feat: implement recurring expense management UI and associated dashboard pages

Author: Arun-kushwaha007

apps/web/app/dashboard/expenses/[expenseId]/page.tsx

@@ -8,14 +8,15 @@ import { backendFetch } from '../../../../src/lib/backend';
 import { getPublicS3BaseUrl } from '../../../../src/lib/env';
 
 interface ExpenseDetailPageProps {
-  params: {
+  params: Promise<{
     expenseId: string;
-  };
+  }>;
 }
 
 export default async function ExpenseDetailPage({ params }: ExpenseDetailPageProps) {
+  const { expenseId } = await params;
   try {
-    const expense = await backendFetch<ExpenseDto>(`/expenses/${params.expenseId}`);
+    const expense = await backendFetch<ExpenseDto>(`/expenses/${expenseId}`);
     const s3BaseUrl = getPublicS3BaseUrl();
     const receiptUrl = expense.receiptFileKey && s3BaseUrl ? `${s3BaseUrl.replace(/\/$/, '')}/${expense.receiptFileKey}` : null;
 

apps/web/app/dashboard/groups/[groupId]/page.tsx

@@ -16,13 +16,13 @@ import { ExpenseTable, GroupActions, GroupSummaryPanel, MemberList, RecurringExp
 import { backendFetch } from '../../../../src/lib/backend';
 
 interface GroupDetailPageProps {
-  params: {
+  params: Promise<{
     groupId: string;
-  };
+  }>;
 }
 
 export default async function GroupDetailPage({ params }: GroupDetailPageProps) {
-  const { groupId } = params;
+  const { groupId } = await params;
 
   try {
     const [group, members, expenses, summary, balances, currentUser, recurringExpenses] = await Promise.all([

apps/web/app/dashboard/groups/[groupId]/settle/page.tsx

@@ -4,8 +4,8 @@ import { DashboardLayout } from '../../../../../src/components/layout';
 import { SettlementList } from '../../../../../src/components/groups';
 import { backendFetch } from '../../../../../src/lib/backend';
 
-export default async function SettleGroupPage({ params }: { params: { groupId: string } }) {
-  const { groupId } = params;
+export default async function SettleGroupPage({ params }: { params: Promise<{ groupId: string }> }) {
+  const { groupId } = await params;
 
   try {
     const [group, members, suggestions, activity] = await Promise.all([

apps/web/app/login/page.tsx

@@ -20,7 +20,9 @@ import { fadeUp, staggerContainer } from '../../components/home/motion-variants'
 import { GlassCard } from '../../components/ui/GlassCard';
 import { AccentButton } from '../../components/ui/AccentButton';
 
-export default function LoginPage() {
+import { Suspense } from 'react';
+
+function LoginContent() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [showPassword, setShowPassword] = useState(false);
@@ -210,3 +212,11 @@ export default function LoginPage() {
     </main>
   );
 }
+
+export default function LoginPage() {
+  return (
+    <Suspense fallback={<main className="min-h-screen bg-[#030303]" />}>
+      <LoginContent />
+    </Suspense>
+  );
+}

apps/web/package.json

@@ -4,7 +4,7 @@
     "private": true,
     "scripts": {
         "dev": "next dev",
-        "build": "tsc --noEmit",
+        "build": "next build",
         "start": "next start",
         "lint": "tsc --noEmit",
         "test": "echo \"No tests yet\""

apps/web/src/components/groups/RecurringExpenseList.tsx

@@ -246,7 +246,7 @@ export function RecurringExpenseList({ recurringExpenses, members, currency, onC
                   </span>
                 </div>
                 <p className="mt-2 text-sm text-[var(--fs-text-muted)]">
-                  Next run {new Date(item.nextOccurrenceAt).toLocaleDateString()} • Paid by {memberNameById[item.payerId] ?? 'Unknown'} • {item.splits.length} participants
+                  Next run {new Date(item.nextOccurrenceAt).toLocaleDateString()} � Paid by {memberNameById[item.payerId] ?? 'Unknown'} � {item.splits.length} participants
                 </p>
                 <p className="mt-1 text-[12px] font-medium text-[var(--fs-text-muted)]">
                   {formatGeneratedLabel(item.lastGeneratedAt)}

vercel.json

@@ -0,0 +1,7 @@
+{
+  "version": 2,
+  "framework": "nextjs",
+  "buildCommand": "pnpm --filter web build",
+  "outputDirectory": "apps/web/.next",
+  "installCommand": "pnpm install"
+}