fix: SSR crash — QueryClient in useState, mounted guard for auth hydration

app/(app)/layout.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { useAuthStore } from '@/lib/auth-store';
 import Sidebar from '@/components/layout/sidebar';
@@ -9,16 +9,22 @@ import Topbar from '@/components/layout/topbar';
 export default function AppLayout({ children }: { children: React.ReactNode }) {
   const router = useRouter();
   const accessToken = useAuthStore((s) => s.accessToken);
+  // Wait for zustand to hydrate from localStorage before checking auth
+  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
-    if (!accessToken) {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (mounted && !accessToken) {
       router.replace('/login');
     }
-  }, [accessToken, router]);
+  }, [mounted, accessToken, router]);
 
-  if (!accessToken) {
+  // Show nothing until hydrated (prevents flash redirect)
-    return null;
+  if (!mounted) return null;
-  }
+  if (!accessToken) return null;
 
   return (
     <div className="flex min-h-screen" style={{ backgroundColor: '#F8FAFC' }}>

app/(app)/remittances/page.tsx

@@ -1,103 +1,124 @@
 'use client';
 
-import { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { useQuery } from '@tanstack/react-query';
+import { api } from '@/lib/api';
 import { Card, CardContent } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
-import {
+import { ChevronRight, CheckCircle } from 'lucide-react';
-  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
-} from '@/components/ui/table';
-import { api } from '@/lib/api';
 import { format } from 'date-fns';
 
 interface Remittance {
   id: string;
-  totalAmount: number;
+  totalAmount: string;
+  notes: string | null;
   status: string;
-  notes?: string;
   createdAt: string;
   collectedBy?: { firstName: string; lastName: string };
   confirmedBy?: { firstName: string; lastName: string };
+  payments?: Array<{ id: string; amount: string }>;
 }
 
-const STATUS_COLORS: Record<string, string> = {
+const peso = (v: string | number) =>
-  PENDING: 'bg-yellow-100 text-yellow-700',
+  '₱' + Number(v ?? 0).toLocaleString('en-PH', { minimumFractionDigits: 2 });
-  CONFIRMED: 'bg-emerald-100 text-emerald-700',
-  REJECTED: 'bg-red-100 text-red-700',
-};
 
 export default function RemittancesPage() {
-  const [page, setPage] = useState(1);
+  const qc = useQueryClient();
-  const limit = 20;
 
-  const { data, isLoading } = useQuery({
+  const { data, isLoading } = useQuery<{ data: Remittance[]; total: number }>({
-    queryKey: ['remittances', page],
+    queryKey: ['remittances'],
     queryFn: async () => {
-      const res = await api.get(`/api/v1/remittances?page=${page}&limit=${limit}`);
+      const res = await api.get('/api/v1/remittances?limit=30');
       return res.data;
     },
+    staleTime: 30_000,
   });
 
-  const items: Remittance[] = Array.isArray(data) ? data : (data?.data ?? data?.items ?? []);
+  const confirm = useMutation({
-  const total = (data as any)?.meta?.total ?? (data as any)?.total ?? items.length;
+    mutationFn: async (id: string) => {
+      await api.patch(`/api/v1/remittances/${id}/confirm`);
+    },
+    onSuccess: () => qc.invalidateQueries({ queryKey: ['remittances'] }),
+  });
+
+  const remittances = data?.data ?? [];
 
   return (
     <div>
       <div className="mb-6">
         <h1 className="text-2xl font-bold text-slate-800">Remittances</h1>
-        <p className="text-slate-500 text-sm mt-1">Collector cash remittance records</p>
+        <p className="text-slate-500 text-sm mt-1">Cash collections submitted by collectors</p>
       </div>
 
-      <Card>
+      <Card className="border shadow-sm">
         <CardContent className="p-0">
-          <Table>
+          <div className="overflow-x-auto">
-            <TableHeader>
+            <table className="w-full text-sm">
-              <TableRow>
+              <thead>
-                <TableHead>Date</TableHead>
+                <tr className="border-b bg-slate-50">
-                <TableHead>Collector</TableHead>
+                  <th className="text-left px-4 py-3 font-medium text-slate-500">Date</th>
-                <TableHead>Status</TableHead>
+                  <th className="text-left px-4 py-3 font-medium text-slate-500 hidden md:table-cell">Collector</th>
-                <TableHead className="text-right">Total Amount</TableHead>
+                  <th className="text-right px-4 py-3 font-medium text-slate-500">Amount</th>
-                <TableHead>Confirmed By</TableHead>
+                  <th className="text-right px-4 py-3 font-medium text-slate-500 hidden lg:table-cell">Payments</th>
-                <TableHead>Notes</TableHead>
+                  <th className="text-left px-4 py-3 font-medium text-slate-500">Status</th>
-              </TableRow>
+                  <th className="text-left px-4 py-3 font-medium text-slate-500 hidden xl:table-cell">Confirmed By</th>
-            </TableHeader>
+                  <th className="px-4 py-3"></th>
-            <TableBody>
+                </tr>
-              {isLoading ? (
+              </thead>
-                Array.from({ length: 6 }).map((_, i) => (
+              <tbody>
-                  <TableRow key={i}>{Array.from({ length: 6 }).map((_, j) => (
+                {isLoading
-                    <TableCell key={j}><Skeleton className="h-4 w-full" /></TableCell>
+                  ? Array.from({ length: 6 }).map((_, i) => (
-                  ))}</TableRow>
+                      <tr key={i} className="border-b">
-                ))
+                        {[...Array(7)].map((_, j) => (
-              ) : items.length === 0 ? (
+                          <td key={j} className="px-4 py-3"><Skeleton className="h-4 w-20" /></td>
-                <TableRow><TableCell colSpan={6} className="text-center py-12 text-slate-400">No remittances yet</TableCell></TableRow>
+                        ))}
-              ) : (
+                      </tr>
-                items.map((r) => (
+                    ))
-                  <TableRow key={r.id} className="hover:bg-slate-50">
+                  : remittances.map((r) => (
-                    <TableCell className="text-sm text-slate-500">
+                      <tr key={r.id} className="border-b hover:bg-slate-50 transition-colors">
-                      {format(new Date(r.createdAt), 'MMM d, yyyy')}
+                        <td className="px-4 py-3 text-slate-600">
-                    </TableCell>
+                          {r.createdAt ? format(new Date(r.createdAt), 'MMM d, yyyy') : '—'}
-                    <TableCell className="text-sm font-medium">
+                        </td>
-                      {r.collectedBy ? `${r.collectedBy.firstName} ${r.collectedBy.lastName}` : '—'}
+                        <td className="px-4 py-3 text-slate-700 hidden md:table-cell">
-                    </TableCell>
+                          {r.collectedBy ? `${r.collectedBy.firstName} ${r.collectedBy.lastName}` : '—'}
-                    <TableCell>
+                        </td>
-                      <span className={`inline-flex px-2 py-0.5 rounded-full text-xs font-medium ${STATUS_COLORS[r.status] ?? 'bg-gray-100 text-gray-600'}`}>
+                        <td className="px-4 py-3 text-right font-semibold text-slate-800">
-                        {r.status}
+                          {peso(r.totalAmount)}
-                      </span>
+                        </td>
-                    </TableCell>
+                        <td className="px-4 py-3 text-right text-slate-600 hidden lg:table-cell">
-                    <TableCell className="text-right font-bold text-emerald-700">
+                          {r.payments?.length ?? '—'}
-                      ₱{Number(r.totalAmount).toLocaleString()}
+                        </td>
-                    </TableCell>
+                        <td className="px-4 py-3">
-                    <TableCell className="text-sm text-slate-500">
+                          <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
-                      {r.confirmedBy ? `${r.confirmedBy.firstName} ${r.confirmedBy.lastName}` : '—'}
+                            r.status === 'CONFIRMED'
-                    </TableCell>
+                              ? 'bg-green-100 text-green-700'
-                    <TableCell className="text-xs text-slate-400 max-w-[150px] truncate">
+                              : 'bg-yellow-100 text-yellow-700'
-                      {r.notes ?? '—'}
+                          }`}>
-                    </TableCell>
+                            {r.status}
-                  </TableRow>
+                          </span>
-                ))
+                        </td>
-              )}
+                        <td className="px-4 py-3 text-slate-600 hidden xl:table-cell">
-            </TableBody>
+                          {r.confirmedBy ? `${r.confirmedBy.firstName} ${r.confirmedBy.lastName}` : '—'}
-          </Table>
+                        </td>
+                        <td className="px-4 py-3">
+                          {r.status !== 'CONFIRMED' && (
+                            <button
+                              onClick={() => confirm.mutate(r.id)}
+                              disabled={confirm.isPending}
+                              className="flex items-center gap-1 text-xs font-medium text-green-700 hover:text-green-800"
+                            >
+                              <CheckCircle size={14} />
+                              Confirm
+                            </button>
+                          )}
+                        </td>
+                      </tr>
+                    ))}
+              </tbody>
+            </table>
+          </div>
+          {!isLoading && remittances.length === 0 && (
+            <div className="text-center py-12 text-slate-400">No remittances yet</div>
+          )}
         </CardContent>
       </Card>
     </div>

app/(app)/reports/page.tsx

@@ -117,7 +117,7 @@ export default function ReportsPage() {
                 <BarChart data={revenue ?? []}>
                   <XAxis dataKey="month" tick={{ fontSize: 11 }} />
                   <YAxis tick={{ fontSize: 11 }} tickFormatter={(v) => `₱${(v/1000).toFixed(0)}k`} />
-                  <Tooltip formatter={(v: number) => peso(v)} />
+                  <Tooltip formatter={(v: any) => peso(v)} />
                   <Bar dataKey="total" fill="#0891B2" radius={[4, 4, 0, 0]} />
                 </BarChart>
               </ResponsiveContainer>

components/providers.tsx

@@ -1,10 +1,19 @@
 'use client';
 
-import { QueryClientProvider } from '@tanstack/react-query';
+import { useState } from 'react';
-import { queryClient } from '@/lib/query-client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Toaster } from '@/components/ui/sonner';
 
 export default function Providers({ children }: { children: React.ReactNode }) {
+  // Must be created inside component — NOT at module level
+  // Module-level singleton causes SSR crashes in Next.js App Router
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: { queries: { staleTime: 30_000, retry: 1 } },
+      })
+  );
+
   return (
     <QueryClientProvider client={queryClient}>
       {children}