feat: Add CSV/PDF export, dark mode, and PWA support

public/manifest.json

@@ -0,0 +1,63 @@
+{
+  "name": "SoroSave - Group Savings",
+  "short_name": "SoroSave",
+  "description": "Group savings and contribution tracking app",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#4F46E5",
+  "orientation": "portrait-primary",
+  "icons": [
+    {
+      "src": "/icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "/icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "/icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "/icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "/icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "/icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable any"
+    }
+  ],
+  "categories": ["finance", "productivity"],
+  "screenshots": [],
+  "prefer_related_applications": false
+}

public/sw.js

@@ -0,0 +1,77 @@
+/// <reference lib="webworker" />
+
+const CACHE_NAME = 'sorosave-v1';
+const STATIC_ASSETS = [
+  '/',
+  '/manifest.json',
+  '/favicon.ico',
+];
+
+// Install event - cache static assets
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => {
+      return cache.addAll(STATIC_ASSETS);
+    })
+  );
+  self.skipWaiting();
+});
+
+// Activate event - clean old caches
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames
+          .filter((name) => name !== CACHE_NAME)
+          .map((name) => caches.delete(name))
+      );
+    })
+  );
+  self.clients.claim();
+});
+
+// Fetch event - serve from cache, fallback to network
+self.addEventListener('fetch', (event) => {
+  // Skip non-GET requests
+  if (event.request.method !== 'GET') return;
+
+  // Skip cross-origin requests
+  if (!event.request.url.startsWith(self.location.origin)) return;
+
+  event.respondWith(
+    caches.match(event.request).then((cachedResponse) => {
+      if (cachedResponse) {
+        // Return cached response and update cache in background
+        event.waitUntil(
+          fetch(event.request).then((response) => {
+            if (response.ok) {
+              caches.open(CACHE_NAME).then((cache) => {
+                cache.put(event.request, response);
+              });
+            }
+          }).catch(() => {})
+        );
+        return cachedResponse;
+      }
+
+      // Not in cache, fetch from network
+      return fetch(event.request).then((response) => {
+        if (!response.ok) return response;
+
+        // Cache successful responses
+        const responseToCache = response.clone();
+        caches.open(CACHE_NAME).then((cache) => {
+          cache.put(event.request, responseToCache);
+        });
+
+        return response;
+      }).catch(() => {
+        // Return offline fallback for navigation requests
+        if (event.request.mode === 'navigate') {
+          return caches.match('/');
+        }
+      });
+    })
+  );
+});

src/components/DarkModeToggle.tsx

@@ -0,0 +1,97 @@
+/**
+ * Dark Mode utilities for SoroSave
+ * Implements theme toggle with Tailwind CSS and next-themes
+ */
+
+'use client';
+
+import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
+
+/**
+ * Dark mode toggle button component
+ */
+export function DarkModeToggle() {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <button
+      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+      className="p-2 rounded-lg bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
+      aria-label="Toggle dark mode"
+    >
+      {theme === 'dark' ? (
+        <svg
+          className="w-5 h-5 text-yellow-500"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+        >
+          <path
+            fillRule="evenodd"
+            d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+            clipRule="evenodd"
+          />
+        </svg>
+      ) : (
+        <svg
+          className="w-5 h-5 text-gray-700"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+        >
+          <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
+        </svg>
+      )}
+    </button>
+  );
+}
+
+/**
+ * Theme provider wrapper
+ * Add this to your _app.tsx or layout.tsx
+ */
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+    >
+      {children}
+    </ThemeProvider>
+  );
+}
+
+/**
+ * Hook to get current theme state
+ */
+export function useDarkMode() {
+  const { theme, setTheme, systemTheme } = useTheme();
+  const isDark = theme === 'dark' || (theme === 'system' && systemTheme === 'dark');
+
+  return {
+    isDark,
+    theme,
+    setTheme,
+    toggle: () => setTheme(isDark ? 'light' : 'dark'),
+  };
+}
+
+/**
+ * CSS classes for dark mode support
+ * Add to tailwind.config.js:
+ * 
+ * module.exports = {
+ *   darkMode: 'class',
+ *   // ...
+ * }
+ */

src/lib/export.ts

@@ -0,0 +1,148 @@
+/**
+ * Export utilities for SoroSave
+ * Supports CSV and PDF export for group history and contribution records
+ */
+
+import { jsPDF } from 'jspdf';
+import autoTable from 'jspdf-autotable';
+
+// Types for export data
+export interface ContributionRecord {
+  date: string;
+  amount: number;
+  member: string;
+  roundStatus: string;
+}
+
+export interface GroupSummary {
+  groupName: string;
+  totalMembers: number;
+  totalSaved: number;
+  contributions: ContributionRecord[];
+  createdAt: string;
+}
+
+/**
+ * Export contribution history to CSV
+ */
+export function exportToCSV(data: GroupSummary, filename?: string): void {
+  const headers = ['Date', 'Amount', 'Member', 'Round Status'];
+  const rows = data.contributions.map(c => [
+    c.date,
+    c.amount.toString(),
+    c.member,
+    c.roundStatus,
+  ]);
+
+  // Add summary header
+  const summaryRows = [
+    [`Group: ${data.groupName}`],
+    [`Total Members: ${data.totalMembers}`],
+    [`Total Saved: ${data.totalSaved}`],
+    [`Created: ${data.createdAt}`],
+    [], // Empty row
+    headers,
+    ...rows,
+  ];
+
+  // Create CSV content
+  const csvContent = summaryRows
+    .map(row => row.map(cell => `"${cell}"`).join(','))
+    .join('\n');
+
+  // Download
+  downloadFile(
+    csvContent,
+    filename || `${data.groupName}_contributions.csv`,
+    'text/csv'
+  );
+}
+
+/**
+ * Export group summary to PDF
+ */
+export function exportToPDF(data: GroupSummary, filename?: string): void {
+  const doc = new jsPDF();
+
+  // Title
+  doc.setFontSize(20);
+  doc.text(data.groupName, 14, 22);
+
+  // Summary info
+  doc.setFontSize(12);
+  doc.text(`Total Members: ${data.totalMembers}`, 14, 35);
+  doc.text(`Total Saved: $${data.totalSaved.toLocaleString()}`, 14, 42);
+  doc.text(`Created: ${data.createdAt}`, 14, 49);
+
+  // Contribution table
+  autoTable(doc, {
+    startY: 60,
+    head: [['Date', 'Amount', 'Member', 'Round Status']],
+    body: data.contributions.map(c => [
+      c.date,
+      `$${c.amount.toLocaleString()}`,
+      c.member,
+      c.roundStatus,
+    ]),
+    theme: 'striped',
+    headStyles: { fillColor: [79, 70, 229] },
+  });
+
+  // Save
+  doc.save(filename || `${data.groupName}_summary.pdf`);
+}
+
+/**
+ * Export button component helper
+ */
+export function getExportButtons(groupData: GroupSummary) {
+  return [
+    {
+      label: 'Export CSV',
+      onClick: () => exportToCSV(groupData),
+    },
+    {
+      label: 'Export PDF',
+      onClick: () => exportToPDF(groupData),
+    },
+  ];
+}
+
+/**
+ * Helper to download file
+ */
+function downloadFile(
+  content: string,
+  filename: string,
+  mimeType: string
+): void {
+  const blob = new Blob([content], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}
+
+/**
+ * Format contribution data for export
+ */
+export function formatContributionData(
+  contributions: Array<{
+    createdAt: string | Date;
+    amount: number;
+    memberName: string;
+    roundNumber: number;
+    status: string;
+  }>
+): ContributionRecord[] {
+  return contributions.map(c => ({
+    date: new Date(c.createdAt).toLocaleDateString(),
+    amount: c.amount,
+    member: c.memberName,
+    roundStatus: `Round ${c.roundNumber} - ${c.status}`,
+  }));
+}