From 8f2225c902675a7109a4e8f05e80b89fac9c36d0 Mon Sep 17 00:00:00 2001
From: Arun-kushwaha007 <arunkush11821@gmail.com>
Date: Sat, 11 Apr 2026 18:13:34 +0530
Subject: [PATCH 01/14] feat(web): implement theming system with CSS variables

Replace hardcoded colors and styles in dashboard components and layout with CSS custom properties for dynamic theming support. Introduce ThemeToggle component for user-controlled theme switching.
---
 apps/web/app/dashboard/page.tsx               | 42 ++++++++---------
 apps/web/app/layout.tsx                       |  3 +-
 apps/web/components/ui/GlassCard.tsx          |  6 +--
 .../src/components/dashboard/ActivityList.tsx | 24 +++++-----
 .../components/dashboard/SpendingChart.tsx    | 16 +++----
 .../src/components/dashboard/SummaryCard.tsx  | 17 +++----
 .../src/components/layout/DashboardLayout.tsx |  3 +-
 apps/web/src/components/layout/Topbar.tsx     |  6 ++-
 apps/web/src/components/theme/ThemeToggle.tsx | 47 +++++++++++++++++++
 9 files changed, 109 insertions(+), 55 deletions(-)
 create mode 100644 apps/web/src/components/theme/ThemeToggle.tsx

diff --git a/apps/web/app/dashboard/page.tsx b/apps/web/app/dashboard/page.tsx
index 9a71110..733104b 100644
--- a/apps/web/app/dashboard/page.tsx
+++ b/apps/web/app/dashboard/page.tsx
@@ -98,13 +98,13 @@ export default async function DashboardPage() {
         </div>
 
         {attentionItems.length > 0 ? (
-          <GlassCard className="p-5 sm:p-6 border-white/5 bg-white/[0.01]">
+          <GlassCard className="p-5 sm:p-6 border-[var(--fs-border)] bg-[var(--fs-surface)] shadow-[var(--fs-shadow-soft)]">
             <div className="flex items-start justify-between gap-4 mb-5">
               <div>
-                <p className="text-[10px] font-bold tracking-widest text-zinc-500 uppercase">
+                  <p className="text-[10px] font-bold tracking-widest text-[var(--fs-text-secondary)] uppercase">
                   Needs Attention
                 </p>
-                <h2 className="mt-1 text-xl font-black italic tracking-tight text-white uppercase">
+                <h2 className="mt-1 text-xl font-black italic tracking-tight text-[var(--fs-text-primary)] uppercase">
                   Resolve the next blockers
                 </h2>
               </div>
@@ -116,20 +116,20 @@ export default async function DashboardPage() {
               {attentionItems.map((item) => (
                 <div
                   key={item.groupId}
-                  className="rounded-2xl border border-white/5 bg-white/5 p-4"
+                  className="rounded-2xl border border-[var(--fs-border)] bg-[var(--fs-primary)]/5 p-4"
                 >
                   <div className="flex items-start justify-between gap-3">
                     <div>
-                      <p className="text-sm font-black tracking-tight text-white uppercase">
+                      <p className="text-sm font-black tracking-tight text-[var(--fs-text-primary)] uppercase">
                         {item.groupName}
                       </p>
-                      <p className="mt-1 text-[11px] font-bold uppercase tracking-[0.16em] text-zinc-500">
+                      <p className="mt-1 text-[11px] font-bold uppercase tracking-[0.16em] text-[var(--fs-text-secondary)]">
                         {item.currency} · {item.memberCount} members
                       </p>
                     </div>
                     <Link
                       href={`/dashboard/groups/${item.groupId}`}
-                      className="rounded-xl border border-white/10 bg-white/5 px-3 py-2 text-[10px] font-black uppercase tracking-[0.14em] text-white hover:bg-white/10"
+                      className="rounded-xl border border-[var(--fs-border)] bg-[var(--fs-primary)]/10 px-3 py-2 text-[10px] font-black uppercase tracking-[0.14em] text-[var(--fs-text-primary)] hover:bg-[var(--fs-primary)]/20"
                     >
                       Open
                     </Link>
@@ -153,7 +153,7 @@ export default async function DashboardPage() {
                         {item.dueRecurringCount} due recurring
                       </Link>
                     ) : null}
-                    <span className="inline-flex items-center gap-2 rounded-full bg-white/5 px-3 py-1.5 text-[11px] font-bold uppercase tracking-[0.12em] text-zinc-300">
+                    <span className="inline-flex items-center gap-2 rounded-full bg-[var(--fs-primary)]/5 px-3 py-1.5 text-[11px] font-bold uppercase tracking-[0.12em] text-[var(--fs-text-secondary)]">
                       {formatMoney(item.netBalanceCents, item.currency)}
                     </span>
                   </div>
@@ -175,13 +175,13 @@ export default async function DashboardPage() {
 
         <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
           <div className="lg:col-span-2">
-            <GlassCard className="p-5 sm:p-8 border-white/5 bg-white/[0.01]">
+            <GlassCard className="p-5 sm:p-8 border-[var(--fs-border)] bg-[var(--fs-surface)] shadow-[var(--fs-shadow-soft)]">
               <div className="flex items-center justify-between mb-8">
                 <div>
-                  <h2 className="text-sm font-black italic tracking-tight text-white uppercase">
+                  <h2 className="text-sm font-black italic tracking-tight text-[var(--fs-text-primary)] uppercase">
                     Crews & Nodes
                   </h2>
-                  <p className="text-[10px] font-bold tracking-widest text-zinc-600 uppercase mt-0.5">
+                  <p className="text-[10px] font-bold tracking-widest text-[var(--fs-text-secondary)] uppercase mt-0.5">
                     Distributed spending groups
                   </p>
                 </div>
@@ -198,18 +198,18 @@ export default async function DashboardPage() {
                   <Link
                     href={`/dashboard/groups/${group.id}`}
                     key={group.id}
-                    className="flex items-center justify-between p-4 rounded-xl border border-white/5 bg-white/5 hover:bg-white/10 transition-all cursor-pointer group"
+                    className="flex items-center justify-between p-4 rounded-xl border border-[var(--fs-border)] bg-[var(--fs-primary)]/5 hover:bg-[var(--fs-primary)]/10 transition-all cursor-pointer group"
                   >
                     <div className="flex items-center gap-3">
-                      <div className="h-8 w-8 rounded-lg bg-zinc-900 flex items-center justify-center text-zinc-500 group-hover:text-purple-400 transition-colors">
+                      <div className="h-8 w-8 rounded-lg bg-[var(--fs-background)] flex items-center justify-center text-[var(--fs-text-muted)] group-hover:text-[var(--fs-primary)] transition-colors">
                         <CreditCard size={14} />
                       </div>
-                      <span className="text-xs font-black tracking-tight text-white uppercase">
+                      <span className="text-xs font-black tracking-tight text-[var(--fs-text-primary)] uppercase">
                         {group.name}
                       </span>
                     </div>
                     <div className="flex items-center gap-2">
-                      <span className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">
+                      <span className="text-[10px] font-bold text-[var(--fs-text-secondary)] uppercase tracking-widest">
                         {group.currency}
                       </span>
                       <ArrowUpRight
@@ -220,8 +220,8 @@ export default async function DashboardPage() {
                   </Link>
                 ))}
                 {groups.length === 0 && (
-                  <div className="col-span-full py-12 text-center rounded-2xl border border-dashed border-white/5">
-                    <p className="text-[10px] font-black uppercase tracking-[0.2em] text-zinc-700">
+                  <div className="col-span-full py-12 text-center rounded-2xl border border-dashed border-[var(--fs-border)]">
+                    <p className="text-[10px] font-black uppercase tracking-[0.2em] text-[var(--fs-text-muted)]">
                       NO_ACTIVE_GROUPS_LOCATED
                     </p>
                   </div>
@@ -231,17 +231,17 @@ export default async function DashboardPage() {
           </div>
 
           <div className="flex flex-col gap-6">
-            <div className="relative overflow-hidden rounded-2xl sm:rounded-[2.5rem] border border-white/5 bg-gradient-to-br from-purple-600/20 to-indigo-600/20 p-5 sm:p-8 flex flex-col justify-between gap-4 sm:aspect-square">
+            <div className="relative overflow-hidden rounded-2xl sm:rounded-[2.5rem] border border-[var(--fs-border)] bg-gradient-to-br from-[var(--fs-primary)]/20 to-[var(--fs-primary)]/10 p-5 sm:p-8 flex flex-col justify-between gap-4 sm:aspect-square">
               <div className="absolute top-0 right-0 p-8">
                 <TrendingUp size={48} className="text-purple-500/20" />
               </div>
-              <h3 className="text-2xl sm:text-3xl font-black italic tracking-tighter text-white leading-none">
+              <h3 className="text-2xl sm:text-3xl font-black italic tracking-tighter text-[var(--fs-text-primary)] leading-none">
                 OPTIMIZE <br /> FLOW.
               </h3>
-              <p className="text-xs font-bold text-purple-200/50 uppercase tracking-widest leading-relaxed">
+              <p className="text-xs font-bold text-[var(--fs-primary)]/60 uppercase tracking-widest leading-relaxed">
                 Review the groups with pending settlements and due recurring bills first.
               </p>
-              <button className="w-full h-12 rounded-2xl bg-white text-[10px] font-black uppercase tracking-widest text-[#030303] hover:bg-purple-400 transition-all">
+              <button className="w-full h-12 rounded-2xl bg-[var(--fs-primary)] text-[10px] font-black uppercase tracking-widest text-white hover:bg-[var(--fs-primary)]/80 transition-all">
                 Review attention queue
               </button>
             </div>
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index c985113..6df0518 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -50,7 +50,8 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <style id="fs-theme-vars">{themeStylesheet}</style>
         <script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
       </head>
-      <body className="min-h-screen bg-black text-white selection:bg-yellow-400 selection:text-black">
+      <body className="min-h-screen selection:bg-[var(--fs-primary)] selection:text-white">
+
         <Providers>
           <Navbar />
           <div>{children}</div>
diff --git a/apps/web/components/ui/GlassCard.tsx b/apps/web/components/ui/GlassCard.tsx
index a79de8c..03ccb98 100644
--- a/apps/web/components/ui/GlassCard.tsx
+++ b/apps/web/components/ui/GlassCard.tsx
@@ -22,7 +22,7 @@ export function GlassCard({
   const baseClasses =
     'glass-panel relative overflow-hidden rounded-3xl text-[var(--fs-text-primary)] shadow-2xl';
   const hoverClasses = hoverable
-    ? 'transition-all duration-300 hover:-translate-y-1 hover:border-white/15'
+    ? 'transition-all duration-300 hover:-translate-y-1 hover:border-[var(--fs-primary)]/20'
     : '';
 
   return (
@@ -34,9 +34,9 @@ export function GlassCard({
       className={`${baseClasses} ${hoverClasses} ${className}`}
       {...props}
     >
-      <div className="absolute inset-0 bg-gradient-to-br from-purple-500/8 via-transparent to-transparent pointer-events-none" />
+      <div className="absolute inset-0 bg-gradient-to-br from-[var(--fs-primary)]/8 via-transparent to-transparent pointer-events-none" />
       <div className="relative z-10 p-5 md:p-7">{children}</div>
-      <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/15 to-transparent" />
+      <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[var(--fs-border)] to-transparent" />
     </motion.div>
   );
 }
diff --git a/apps/web/src/components/dashboard/ActivityList.tsx b/apps/web/src/components/dashboard/ActivityList.tsx
index 93df509..79b88cc 100644
--- a/apps/web/src/components/dashboard/ActivityList.tsx
+++ b/apps/web/src/components/dashboard/ActivityList.tsx
@@ -110,15 +110,15 @@ export function ActivityList({ items = [], groupId = '' }: { items?: ActivityDto
   const safeItems = Array.isArray(items) ? items : [];
 
   return (
-    <div className="group relative overflow-hidden rounded-2xl border border-white/5 bg-white/[0.01] p-4 sm:p-6 transition-all hover:bg-white/[0.02]">
+    <div className="group relative overflow-hidden rounded-2xl border border-[var(--fs-border)] bg-[var(--fs-surface)] p-4 sm:p-6 transition-all hover:shadow-lg shadow-[var(--fs-shadow-soft)]">
       <div className="flex items-center justify-between gap-3 mb-5 sm:mb-8">
         <div>
-          <h2 className="text-sm font-black italic tracking-tight text-white uppercase">Live Signals</h2>
-          <p className="text-[10px] font-bold tracking-widest text-zinc-600 uppercase mt-0.5">Real-time ledger audit</p>
+          <h2 className="text-sm font-black italic tracking-tight text-[var(--fs-text-primary)] uppercase">Live Signals</h2>
+          <p className="text-[10px] font-bold tracking-widest text-[var(--fs-text-muted)] uppercase mt-0.5">Real-time ledger audit</p>
         </div>
         <Link
           href={`/dashboard/activity?groupId=${encodeURIComponent(groupId)}`}
-          className="group/link flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-zinc-600 hover:text-white transition-colors"
+          className="group/link flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-[var(--fs-text-muted)] hover:text-[var(--fs-text-primary)] transition-colors"
         >
           Timeline <ArrowUpRight size={12} className="group-hover/link:translate-x-0.5 group-hover/link:-translate-y-0.5 transition-transform" />
         </Link>
@@ -142,23 +142,23 @@ export function ActivityList({ items = [], groupId = '' }: { items?: ActivityDto
               </div>
 
               <div className="flex-grow min-w-0">
-                <p className="text-xs font-black tracking-tight text-white group-hover:text-purple-400 transition-colors truncate">
+                <p className="text-xs font-black tracking-tight text-[var(--fs-text-primary)] group-hover:text-[var(--fs-primary)] transition-colors truncate">
                   {labelForActivity(item)}
                 </p>
                 <div className="flex items-center gap-2 mt-1 flex-wrap">
-                  <p className="text-[10px] font-bold uppercase tracking-widest text-zinc-600">
+                  <p className="text-[10px] font-bold uppercase tracking-widest text-[var(--fs-text-muted)]">
                     {new Date(item.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                   </p>
                   <div className="h-0.5 w-0.5 rounded-full bg-zinc-800" />
-                  <p className="text-[10px] font-bold uppercase tracking-widest text-zinc-500 truncate">
+                  <p className="text-[10px] font-bold uppercase tracking-widest text-[var(--fs-text-secondary)] truncate">
                     {subtitleForActivity(item)}
                   </p>
                 </div>
               </div>
 
               <div className="hidden sm:flex flex-col items-end gap-2">
-                {amount ? <span className="text-[11px] font-black text-white">{amount}</span> : null}
-                <div className="h-8 w-8 rounded-full border border-white/5 flex items-center justify-center text-[8px] font-black text-zinc-700 uppercase">
+                {amount ? <span className="text-[11px] font-black text-[var(--fs-text-primary)]">{amount}</span> : null}
+                <div className="h-8 w-8 rounded-full border border-[var(--fs-border)] flex items-center justify-center text-[8px] font-black text-[var(--fs-text-muted)] uppercase">
                   FS
                 </div>
               </div>
@@ -167,11 +167,11 @@ export function ActivityList({ items = [], groupId = '' }: { items?: ActivityDto
         })}
 
         {safeItems.length === 0 && (
-          <div className="rounded-2xl border border-dashed border-white/5 p-10 text-center">
-            <div className="mx-auto w-10 h-10 rounded-full border border-white/5 flex items-center justify-center text-zinc-800 mb-4">
+          <div className="rounded-2xl border border-dashed border-[var(--fs-border)] p-10 text-center">
+            <div className="mx-auto w-10 h-10 rounded-full border border-[var(--fs-border)] flex items-center justify-center text-[var(--fs-text-muted)] mb-4">
               <Milestone size={18} />
             </div>
-            <p className="text-[10px] font-black tracking-widest text-zinc-700 uppercase">NO_SIGNAL_DETECTED</p>
+            <p className="text-[10px] font-black tracking-widest text-[var(--fs-text-muted)] uppercase">NO_SIGNAL_DETECTED</p>
           </div>
         )}
       </div>
diff --git a/apps/web/src/components/dashboard/SpendingChart.tsx b/apps/web/src/components/dashboard/SpendingChart.tsx
index edbb11a..f27ec21 100644
--- a/apps/web/src/components/dashboard/SpendingChart.tsx
+++ b/apps/web/src/components/dashboard/SpendingChart.tsx
@@ -7,20 +7,20 @@ const months = ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'];
 
 export function SpendingChart() {
   return (
-    <div className="group relative overflow-hidden rounded-2xl border border-white/5 bg-white/[0.01] p-4 sm:p-6 transition-all hover:bg-white/[0.02]">
+    <div className="group relative overflow-hidden rounded-2xl border border-[var(--fs-border)] bg-[var(--fs-surface)] p-4 sm:p-6 transition-all hover:bg-[var(--fs-card)] shadow-[var(--fs-shadow-soft)]">
       <div className="flex items-center justify-between mb-8">
         <div>
-          <h3 className="text-xs sm:text-sm font-black italic tracking-tight text-white">SPENDING FLOW</h3>
-          <p className="text-[9px] sm:text-[10px] font-bold tracking-widest text-zinc-600 uppercase mt-0.5">Aggregate Protocol Metrics</p>
+          <h3 className="text-xs sm:text-sm font-black italic tracking-tight text-[var(--fs-text-primary)]">SPENDING FLOW</h3>
+          <p className="text-[9px] sm:text-[10px] font-bold tracking-widest text-[var(--fs-text-muted)] uppercase mt-0.5">Aggregate Protocol Metrics</p>
         </div>
         <div className="flex flex-col sm:flex-row gap-2 sm:gap-4">
           <div className="flex items-center gap-2">
             <div className="h-1.5 w-1.5 rounded-full bg-purple-500" />
-            <span className="text-[10px] font-bold text-zinc-400 uppercase tracking-widest">2026</span>
+            <span className="text-[10px] font-bold text-[var(--fs-text-muted)] uppercase tracking-widest">2026</span>
           </div>
           <div className="flex items-center gap-2">
             <div className="h-1.5 w-1.5 rounded-full bg-zinc-800" />
-            <span className="text-[10px] font-bold text-zinc-700 uppercase tracking-widest">2025</span>
+            <span className="text-[10px] font-bold text-[var(--fs-text-muted)]/60 uppercase tracking-widest">2025</span>
           </div>
         </div>
       </div>
@@ -39,7 +39,7 @@ export function SpendingChart() {
               
               {/* Tooltip */}
               <div className="absolute -top-8 left-1/2 -translate-x-1/2 opacity-0 group-hover/bar:opacity-100 transition-opacity">
-                <div className="bg-zinc-900 border border-white/10 px-2 py-1 rounded text-[9px] font-black text-white whitespace-nowrap shadow-xl">
+                <div className="bg-[var(--fs-surface)] border border-[var(--fs-border)] px-2 py-1 rounded text-[9px] font-black text-[var(--fs-text-primary)] whitespace-nowrap shadow-xl">
                   ${(h * 32).toLocaleString()}
                 </div>
               </div>
@@ -47,7 +47,7 @@ export function SpendingChart() {
               {/* Bar Glow */}
               <div className="absolute inset-0 bg-purple-500/10 blur-xl opacity-0 group-hover/bar:opacity-100 transition-opacity rounded-full" />
             </div>
-            <span className="text-[9px] font-black text-zinc-800 group-hover/bar:text-zinc-500 transition-colors uppercase">
+            <span className="text-[9px] font-black text-[var(--fs-text-muted)] group-hover/bar:text-[var(--fs-primary)] transition-colors uppercase">
               {months[i]}
             </span>
           </div>
@@ -57,7 +57,7 @@ export function SpendingChart() {
 
       {/* Decorative Overlays */}
       <div className="absolute top-0 right-0 p-4 pointer-events-none opacity-20">
-        <div className="text-[8px] font-mono text-zinc-500 uppercase tracking-[0.5em] vertical-text">
+        <div className="text-[8px] font-mono text-[var(--fs-text-muted)] uppercase tracking-[0.5em] vertical-text">
           SIGNAL_STRENGTH_98%
         </div>
       </div>
diff --git a/apps/web/src/components/dashboard/SummaryCard.tsx b/apps/web/src/components/dashboard/SummaryCard.tsx
index 67bc71d..b34b8c0 100644
--- a/apps/web/src/components/dashboard/SummaryCard.tsx
+++ b/apps/web/src/components/dashboard/SummaryCard.tsx
@@ -40,10 +40,10 @@ export function SummaryCard({
   return (
     <motion.div 
       whileHover={{ y: -2, transition: { duration: 0.2 } }}
-      className="group relative overflow-hidden rounded-2xl border border-white/5 bg-white/[0.02] p-4 sm:p-6 transition-all hover:border-purple-500/20 hover:bg-white/[0.04]"
+      className="group relative overflow-hidden rounded-2xl border border-[var(--fs-border)] bg-[var(--fs-surface)] p-4 sm:p-6 transition-all hover:border-[var(--fs-primary)]/20 hover:shadow-lg shadow-[var(--fs-shadow-soft)]"
     >
       <div className="flex items-center justify-between mb-4">
-        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-white/5 text-zinc-500 group-hover:text-purple-400 transition-colors">
+        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--fs-primary)]/10 text-[var(--fs-text-secondary)] group-hover:text-[var(--fs-primary)] transition-colors">
           {Icon && <Icon size={18} />}
         </div>
         {change && (
@@ -54,18 +54,18 @@ export function SummaryCard({
       </div>
 
       <div className="space-y-1">
-        <div className="text-xl sm:text-2xl md:text-3xl font-black tracking-tight text-white italic">
+        <div className="text-xl sm:text-2xl md:text-3xl font-black tracking-tight text-[var(--fs-text-primary)] italic">
           {value}
         </div>
-        <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-zinc-500 group-hover:text-zinc-400 transition-colors">
+        <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-[var(--fs-text-secondary)] group-hover:text-[var(--fs-text-primary)] transition-colors uppercase">
           {title}
         </p>
       </div>
       
       {hint ? (
-        <div className="mt-6 pt-4 border-t border-white/5 hidden sm:flex items-center gap-2">
-          <div className="w-1.5 h-1.5 rounded-full bg-purple-500/40" />
-          <span className="text-[10px] font-bold uppercase tracking-wider text-zinc-600">
+        <div className="mt-6 pt-4 border-t border-[var(--fs-border)] hidden sm:flex items-center gap-2">
+          <div className="w-1.5 h-1.5 rounded-full bg-[var(--fs-primary)]/40" />
+          <span className="text-[10px] font-bold uppercase tracking-wider text-[var(--fs-text-muted)]">
             {hint}
           </span>
         </div>
@@ -75,7 +75,8 @@ export function SummaryCard({
       <div className="absolute -bottom-8 -right-8 h-20 w-20 rounded-full bg-purple-500/5 opacity-0 group-hover:opacity-100 blur-2xl transition-opacity" />
       
       {/* Top highlight */}
-      <div className="absolute top-0 left-4 right-4 h-px bg-gradient-to-r from-transparent via-white/5 to-transparent" />
+      <div className="absolute top-0 left-4 right-4 h-px bg-gradient-to-r from-transparent via-[var(--fs-border)] to-transparent" />
+
     </motion.div>
   );
 }
diff --git a/apps/web/src/components/layout/DashboardLayout.tsx b/apps/web/src/components/layout/DashboardLayout.tsx
index cfab187..3e6358d 100644
--- a/apps/web/src/components/layout/DashboardLayout.tsx
+++ b/apps/web/src/components/layout/DashboardLayout.tsx
@@ -9,7 +9,8 @@ import { GridBackground } from '../../../components/home';
 export function DashboardLayout({ children, topbarRight }: { children: ReactNode; topbarRight?: ReactNode }) {
   return (
     <AppLayout>
-      <div className="relative min-h-screen bg-[#030303] overflow-hidden">
+      <div className="relative min-h-screen bg-[var(--fs-background)] transition-colors duration-500 overflow-hidden">
+
         {/* Cinematic Backdrop */}
         <GridBackground />
         <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent via-purple-500/[0.01] to-transparent" />
diff --git a/apps/web/src/components/layout/Topbar.tsx b/apps/web/src/components/layout/Topbar.tsx
index 79c6a9f..0013aa8 100644
--- a/apps/web/src/components/layout/Topbar.tsx
+++ b/apps/web/src/components/layout/Topbar.tsx
@@ -2,6 +2,7 @@
 
 import { usePathname } from 'next/navigation';
 import { glassPanel } from './layoutStyles';
+import { ThemeToggle } from '../theme/ThemeToggle';
 
 function titleFromPath(pathname: string): string {
   if (pathname === '/dashboard') return 'Dashboard';
@@ -29,7 +30,10 @@ export function Topbar({ rightSlot }: { rightSlot?: React.ReactNode }) {
           </p>
         </div>
       </div>
-      <div className="flex items-center gap-4 sm:gap-6">{rightSlot}</div>
+      <div className="flex items-center gap-4 sm:gap-6">
+        <ThemeToggle />
+        {rightSlot}
+      </div>
     </header>
   );
 }
diff --git a/apps/web/src/components/theme/ThemeToggle.tsx b/apps/web/src/components/theme/ThemeToggle.tsx
new file mode 100644
index 0000000..dd0e3c6
--- /dev/null
+++ b/apps/web/src/components/theme/ThemeToggle.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import { useThemeMode } from './ThemeProvider';
+import { Sun, Moon, Laptop } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+export function ThemeToggle() {
+  const { mode, resolved, setMode } = useThemeMode();
+
+  return (
+    <div className="flex items-center gap-1 rounded-2xl border border-[var(--fs-border)] bg-[var(--fs-surface)] p-1 backdrop-blur-md shadow-sm">
+      <button
+        onClick={() => setMode('light')}
+        className={`flex h-8 w-8 items-center justify-center rounded-xl transition-all ${
+          mode === 'light'
+            ? 'bg-[var(--fs-primary)] text-white shadow-md'
+            : 'text-[var(--fs-text-muted)] hover:bg-[var(--fs-primary)]/10 hover:text-[var(--fs-primary)]'
+        }`}
+        title="Light Mode"
+      >
+        <Sun size={16} />
+      </button>
+      <button
+        onClick={() => setMode('dark')}
+        className={`flex h-8 w-8 items-center justify-center rounded-xl transition-all ${
+          mode === 'dark'
+            ? 'bg-[var(--fs-primary)] text-white shadow-md'
+            : 'text-[var(--fs-text-muted)] hover:bg-[var(--fs-primary)]/10 hover:text-[var(--fs-primary)]'
+        }`}
+        title="Dark Mode"
+      >
+        <Moon size={16} />
+      </button>
+      <button
+        onClick={() => setMode('system')}
+        className={`flex h-8 w-8 items-center justify-center rounded-xl transition-all ${
+          mode === 'system'
+            ? 'bg-[var(--fs-primary)] text-white shadow-md'
+            : 'text-[var(--fs-text-muted)] hover:bg-[var(--fs-primary)]/10 hover:text-[var(--fs-primary)]'
+        }`}
+        title="System Preference"
+      >
+        <Laptop size={16} />
+      </button>
+    </div>
+  );
+}

From 29c50abf312e78384b1fb8f15ae1f008ed8c858e Mon Sep 17 00:00:00 2001
From: Arun-kushwaha007 <arunkush11821@gmail.com>
Date: Sat, 11 Apr 2026 18:31:37 +0530
Subject: [PATCH 02/14] refactor(theme): standardize theming with CSS variables
 and update defaults

Replace remaining hardcoded color values in components and styles with CSS custom properties for full theming support. Switch default theme to dark mode, update light mode color palette for improved contrast and consistency, and refine theme resolution logic in ThemeProvider. This enhances maintainability and ensures uniform application of themes across layouts and UI elements.
---
 apps/web/app/globals.css                      | 15 ++++----
 apps/web/app/layout.tsx                       | 22 ++----------
 apps/web/app/theme.css                        |  4 +--
 apps/web/components/home/GridBackground.tsx   |  4 +--
 .../src/components/layout/DashboardLayout.tsx |  9 ++++-
 .../web/src/components/layout/GuestLayout.tsx |  2 +-
 apps/web/src/components/layout/Sidebar.tsx    |  3 +-
 .../src/components/profile/ProfilePanel.tsx   | 36 +++++++++----------
 .../src/components/theme/ThemeProvider.tsx    | 18 ++++------
 apps/web/src/design/colors.ts                 | 29 ++++++++-------
 apps/web/src/design/theme.ts                  |  2 +-
 11 files changed, 67 insertions(+), 77 deletions(-)

diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index e591cc7..a4abe6d 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -9,7 +9,7 @@
     --fs-section-inline-wide: clamp(1.25rem, 3vw, 3rem);
     --fs-card-surface: color-mix(in srgb, var(--fs-surface) 90%, transparent);
     --fs-card-surface-strong: color-mix(in srgb, var(--fs-surface) 96%, transparent);
-    --fs-card-border-strong: color-mix(in srgb, var(--fs-border) 78%, white 22%);
+    --fs-card-border-strong: color-mix(in srgb, var(--fs-border) 78%, var(--fs-surface) 22%);
   }
 
   html {
@@ -43,7 +43,7 @@
 
   .marketing-card:hover {
     box-shadow: var(--fs-shadow-elevated);
-    @apply -translate-y-1 border-white/15;
+    @apply -translate-y-1 border-[var(--fs-border)] shadow-xl;
   }
 
   .glass-panel {
@@ -102,12 +102,12 @@
     @apply inline-flex items-center gap-2 rounded-full px-4 py-2 text-[0.65rem] font-bold uppercase tracking-[0.25em];
     border: 1px solid color-mix(in srgb, var(--fs-primary) 28%, var(--fs-border) 72%);
     background-color: color-mix(in srgb, var(--fs-primary) 10%, var(--fs-surface) 90%);
-    color: color-mix(in srgb, white 84%, var(--fs-primary) 16%);
+    color: var(--fs-primary);
   }
 
   .neo-border {
-    border: 4px solid white;
-    box-shadow: 4px 4px 0px 0px rgba(255, 255, 255, 1);
+    border: 4px solid var(--fs-text-primary);
+    box-shadow: 4px 4px 0px 0px var(--fs-text-primary);
   }
 
   .neo-pop-hover {
@@ -144,9 +144,10 @@
 
   .grid-bg {
     background-image:
-      linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
-      linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+      linear-gradient(to right, var(--fs-border) 1px, transparent 1px),
+      linear-gradient(to bottom, var(--fs-border) 1px, transparent 1px);
     background-size: 40px 40px;
+    opacity: 0.15;
   }
 
   .glitch-text {
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 6df0518..4cb3345 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -7,23 +7,6 @@ import { themeStylesheet } from '../src/design/theme';
 import { Navbar } from '../components/layout/Navbar';
 import { Footer } from '../components/layout/Footer';
 
-const themeInitScript = `
-(function() {
-  try {
-    const storageKey = 'fs-theme';
-    const stored = localStorage.getItem(storageKey);
-    const mode = stored === 'light' || stored === 'dark' || stored === 'system' ? stored : 'system';
-    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    const resolved = mode === 'system' ? (prefersDark ? 'dark' : 'light') : mode;
-    document.documentElement.dataset.theme = resolved;
-    document.body.dataset.theme = resolved;
-  } catch (_) {
-    document.documentElement.dataset.theme = 'light';
-    document.body.dataset.theme = 'light';
-  }
-})();
-`;
-
 export const metadata: Metadata = {
   title: 'FairShare - Smart Expense Sharing',
   description: 'Split group expenses without confusion. FairShare helps friends, roommates, and teams track shared spending and settle up faster.',
@@ -45,13 +28,11 @@ const spaceGrotesk = Space_Grotesk({ subsets: ['latin'], variable: '--font-displ
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" data-theme="light" className={`${manrope.variable} ${spaceGrotesk.variable}`}>
+    <html lang="en" className={`${manrope.variable} ${spaceGrotesk.variable}`}>
       <head>
         <style id="fs-theme-vars">{themeStylesheet}</style>
-        <script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
       </head>
       <body className="min-h-screen selection:bg-[var(--fs-primary)] selection:text-white">
-
         <Providers>
           <Navbar />
           <div>{children}</div>
@@ -61,3 +42,4 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     </html>
   );
 }
+
diff --git a/apps/web/app/theme.css b/apps/web/app/theme.css
index 59c32fd..095bcb6 100644
--- a/apps/web/app/theme.css
+++ b/apps/web/app/theme.css
@@ -1,5 +1,5 @@
-:root { color-scheme: light; }
-[data-theme='dark'] { color-scheme: dark; }
+:root { color-scheme: dark; }
+[data-theme='light'] { color-scheme: light; }
 
 body {
   background: radial-gradient(1200px 600px at 10% 0%, color-mix(in srgb, var(--fs-primary) 15%, transparent), transparent 60%),
diff --git a/apps/web/components/home/GridBackground.tsx b/apps/web/components/home/GridBackground.tsx
index f0b50b3..a3a1312 100644
--- a/apps/web/components/home/GridBackground.tsx
+++ b/apps/web/components/home/GridBackground.tsx
@@ -11,11 +11,11 @@ export function GridBackground() {
         }}
       />
       {/* Vertical fade (top & bottom) */}
-      <div className="absolute inset-0 bg-gradient-to-b from-[#030303] via-transparent to-[#030303]" />
+      <div className="absolute inset-0 bg-gradient-to-b from-[var(--fs-background)] via-transparent to-[var(--fs-background)]" />
       {/* Radial fade from center */}
       <div
         className="absolute inset-0"
-        style={{ background: 'radial-gradient(ellipse 70% 50% at 50% 40%, transparent 0%, #030303 100%)' }}
+        style={{ background: 'radial-gradient(ellipse 70% 50% at 50% 40%, transparent 0%, var(--fs-background) 100%)' }}
       />
     </div>
   );
diff --git a/apps/web/src/components/layout/DashboardLayout.tsx b/apps/web/src/components/layout/DashboardLayout.tsx
index 3e6358d..06d42eb 100644
--- a/apps/web/src/components/layout/DashboardLayout.tsx
+++ b/apps/web/src/components/layout/DashboardLayout.tsx
@@ -1,15 +1,22 @@
+'use client';
 import { ReactNode } from 'react';
 import { AppLayout } from './AppLayout';
 import { Sidebar } from './Sidebar';
 import { MobileBottomNav } from './MobileBottomNav';
 import { Topbar } from './Topbar';
 import { shellPadding } from './layoutStyles';
+import { useThemeMode } from '../theme/ThemeProvider';
 import { GridBackground } from '../../../components/home';
 
 export function DashboardLayout({ children, topbarRight }: { children: ReactNode; topbarRight?: ReactNode }) {
+  const { resolved } = useThemeMode();
+
   return (
     <AppLayout>
-      <div className="relative min-h-screen bg-[var(--fs-background)] transition-colors duration-500 overflow-hidden">
+      <div 
+        className="relative min-h-screen bg-[var(--fs-background)] transition-colors duration-500 overflow-hidden"
+        data-theme={resolved}
+      >
 
         {/* Cinematic Backdrop */}
         <GridBackground />
diff --git a/apps/web/src/components/layout/GuestLayout.tsx b/apps/web/src/components/layout/GuestLayout.tsx
index 9f7fa3a..6bfcc3f 100644
--- a/apps/web/src/components/layout/GuestLayout.tsx
+++ b/apps/web/src/components/layout/GuestLayout.tsx
@@ -7,7 +7,7 @@ import Link from 'next/link';
 export function GuestLayout({ children }: { children: ReactNode }) {
   return (
     <AppLayout>
-      <div className="relative min-h-screen bg-[#030303] overflow-hidden">
+      <div className="relative min-h-screen bg-[var(--fs-background)] text-[var(--fs-text-primary)] overflow-hidden">
         {/* Cinematic Backdrop */}
         <GridBackground />
         <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent via-purple-500/[0.01] to-transparent" />
diff --git a/apps/web/src/components/layout/Sidebar.tsx b/apps/web/src/components/layout/Sidebar.tsx
index 9f59881..9be13b6 100644
--- a/apps/web/src/components/layout/Sidebar.tsx
+++ b/apps/web/src/components/layout/Sidebar.tsx
@@ -72,9 +72,8 @@ export function Sidebar() {
           })}
         </nav>
 
-        {/* System Info */}
         <div className="mt-auto pt-6 border-t border-[var(--fs-border)]">
-          <div className="bg-[var(--fs-background)] px-4 py-3 rounded-2xl border border-[var(--fs-border)]">
+          <div className="bg-[var(--fs-card)] px-4 py-3 rounded-2xl border border-[var(--fs-border)] shadow-sm">
             <div className="flex items-center justify-between mb-1">
               <span className="text-[10px] font-bold text-[var(--fs-text-muted)] uppercase">System</span>
               <div className="flex items-center gap-1.5">
diff --git a/apps/web/src/components/profile/ProfilePanel.tsx b/apps/web/src/components/profile/ProfilePanel.tsx
index 8a2ff8b..9a02576 100644
--- a/apps/web/src/components/profile/ProfilePanel.tsx
+++ b/apps/web/src/components/profile/ProfilePanel.tsx
@@ -54,18 +54,18 @@ export function ProfilePanel({ fallbackUser }: { fallbackUser: AuthUserDto | nul
       className="space-y-8 max-w-4xl mx-auto"
     >
       {/* ── User Identity ── */}
-      <GlassCard className="p-6 border-white/10 bg-white/[0.02]">
+      <GlassCard className="p-6 border-[var(--fs-border)] bg-[var(--fs-surface)] shadow-[var(--fs-shadow-soft)]">
         <div className="flex flex-col md:flex-row items-center gap-8 text-center md:text-left">
-          <div className="h-14 w-14 rounded-2xl bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center shadow-lg border border-white/20">
+          <div className="h-14 w-14 rounded-2xl bg-gradient-to-br from-[var(--fs-primary)] to-[var(--fs-accent)] flex items-center justify-center shadow-lg border border-[var(--fs-border)]">
             <span className="text-xl sm:text-2xl font-black italic tracking-tighter text-white">
               {initials(currentUser?.name)}
             </span>
           </div>
           <div className="space-y-1">
-            <h1 className="text-xl sm:text-2xl font-black italic tracking-tighter text-white uppercase">
+            <h1 className="text-xl sm:text-2xl font-black italic tracking-tighter text-[var(--fs-text-primary)] uppercase">
               {currentUser?.name ?? 'Guest User'}
             </h1>
-            <p className="text-sm font-bold tracking-widest text-zinc-500 uppercase">
+            <p className="text-sm font-bold tracking-widest text-[var(--fs-text-muted)] uppercase">
               {currentUser?.email ?? 'Not signed in'}
             </p>
           </div>
@@ -75,37 +75,37 @@ export function ProfilePanel({ fallbackUser }: { fallbackUser: AuthUserDto | nul
       {/* ── Actions ── */}
       <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
         <Link href="/dashboard/settings" className="block h-full">
-          <GlassCard className="p-6 border-white/5 bg-white/[0.01] hover:bg-white/[0.03] transition-all group flex items-center gap-4">
-            <div className="h-10 w-10 rounded-xl bg-purple-500/10 text-purple-400 flex items-center justify-center border border-purple-500/20">
+          <GlassCard className="p-6 border-[var(--fs-border)] bg-[var(--fs-surface)] hover:bg-[var(--fs-primary)]/5 transition-all group flex items-center gap-4">
+            <div className="h-10 w-10 rounded-xl bg-[var(--fs-primary)]/10 text-[var(--fs-primary)] flex items-center justify-center border border-[var(--fs-primary)]/20">
               <Settings size={18} />
             </div>
             <div className='pt-2'>
-              <p className="text-sm font-black italic tracking-tight text-white uppercase">Settings</p>
-              <p className="text-[10px] font-semibold text-zinc-600 uppercase tracking-widest">Account & Appearance</p>
+              <p className="text-sm font-black italic tracking-tight text-[var(--fs-text-primary)] uppercase">Settings</p>
+              <p className="text-[10px] font-semibold text-[var(--fs-text-muted)] uppercase tracking-widest">Account & Appearance</p>
             </div>
           </GlassCard>
         </Link>
 
         <div className="h-full">
-          <GlassCard className="p-6 border-white/5 bg-white/[0.01] flex items-center gap-4">
+          <GlassCard className="p-6 border-[var(--fs-border)] bg-[var(--fs-surface)] flex items-center gap-4">
             <div className="h-10 w-10 rounded-xl bg-indigo-500/10 text-indigo-400 flex items-center justify-center border border-indigo-500/20">
               <ShieldCheck size={18} />
             </div>
             <div className='pt-2'>
-              <p className="text-sm font-black italic tracking-tight text-white uppercase">Privacy & Security</p>
-              <p className="text-[10px] font-bold text-zinc-600 uppercase tracking-widest">Data & Encryption</p>
+              <p className="text-sm font-black italic tracking-tight text-[var(--fs-text-primary)] uppercase">Privacy & Security</p>
+              <p className="text-[10px] font-bold text-[var(--fs-text-muted)] uppercase tracking-widest">Data & Encryption</p>
             </div>
           </GlassCard>
         </div>
 
         <div className="h-full">  
-          <GlassCard className="p-6 border-white/5 bg-white/[0.01] flex items-center gap-4">
-            <div className="h-10 w-10 rounded-xl bg-zinc-500/10 text-zinc-400 flex items-center justify-center border border-white/5">
+          <GlassCard className="p-6 border-[var(--fs-border)] bg-[var(--fs-surface)] flex items-center gap-4">
+            <div className="h-10 w-10 rounded-xl bg-[var(--fs-text-muted)]/10 text-[var(--fs-text-muted)] flex items-center justify-center border border-[var(--fs-border)]">
               <LifeBuoy size={18} />
             </div>
             <div className='pt-2'>
-              <p className="text-sm font-black italic tracking-tight text-white uppercase">Support</p>
-              <p className="text-[10px] font-bold text-zinc-600 uppercase tracking-widest">Help & Documentation</p>
+              <p className="text-sm font-black italic tracking-tight text-[var(--fs-text-primary)] uppercase">Support</p>
+              <p className="text-[10px] font-bold text-[var(--fs-text-muted)] uppercase tracking-widest">Help & Documentation</p>
             </div>
           </GlassCard>
         </div>
@@ -115,13 +115,13 @@ export function ProfilePanel({ fallbackUser }: { fallbackUser: AuthUserDto | nul
           disabled={loading}
           className="w-full text-left h-full"
         >
-          <GlassCard className="p-6 border-white/5 bg-white/[0.01] hover:bg-rose-500/5 hover:border-rose-500/20 transition-all group flex items-center gap-4">
+          <GlassCard className="p-6 border-[var(--fs-border)] bg-[var(--fs-surface)] hover:bg-rose-500/5 hover:border-rose-500/20 transition-all group flex items-center gap-4">
             <div className="h-10 w-10 rounded-xl bg-rose-500/10 text-rose-500 flex items-center justify-center border border-rose-500/20">
               <LogOut size={18} />
             </div>
             <div className='pt-2'>
-              <p className="text-sm font-black italic tracking-tight text-white uppercase">Logout</p>
-              <p className="text-[10px] font-bold text-zinc-600 uppercase tracking-widest">
+              <p className="text-sm font-black italic tracking-tight text-[var(--fs-text-primary)] uppercase">Logout</p>
+              <p className="text-[10px] font-bold text-[var(--fs-text-muted)] uppercase tracking-widest">
                 {loading ? 'Processing...' : 'Sign out of session'}
               </p>
             </div>
diff --git a/apps/web/src/components/theme/ThemeProvider.tsx b/apps/web/src/components/theme/ThemeProvider.tsx
index b331f17..307f9a0 100644
--- a/apps/web/src/components/theme/ThemeProvider.tsx
+++ b/apps/web/src/components/theme/ThemeProvider.tsx
@@ -20,18 +20,14 @@ function getSystemTheme(): ResolvedTheme {
   return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
 }
 
-function applyTheme(mode: ThemeMode) {
-  const resolved: ResolvedTheme = mode === 'system' ? getSystemTheme() : mode;
-  if (typeof document !== 'undefined') {
-    document.documentElement.dataset.theme = resolved;
-    document.body.dataset.theme = resolved;
-  }
-  return resolved;
+function resolveTheme(mode: ThemeMode): ResolvedTheme {
+  if (mode === 'system') return getSystemTheme();
+  return mode;
 }
 
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
   const [mode, setModeState] = useState<ThemeMode>('system');
-  const [resolved, setResolved] = useState<ResolvedTheme>('light');
+  const [resolved, setResolved] = useState<ResolvedTheme>('dark');
 
   useEffect(() => {
     const readStored = (): ThemeMode => {
@@ -42,14 +38,14 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
 
     const stored = readStored();
     setModeState(stored);
-    setResolved(applyTheme(stored));
+    setResolved(resolveTheme(stored));
   }, []);
 
   useEffect(() => {
     const media = window.matchMedia('(prefers-color-scheme: dark)');
     const handler = () => {
       if (mode === 'system') {
-        setResolved(applyTheme('system'));
+        setResolved(resolveTheme('system'));
       }
     };
     media.addEventListener('change', handler);
@@ -61,7 +57,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
     if (typeof window !== 'undefined') {
       localStorage.setItem(STORAGE_KEY, next);
     }
-    setResolved(applyTheme(next));
+    setResolved(resolveTheme(next));
   };
 
   const value = useMemo(() => ({ mode, resolved, setMode }), [mode, resolved]);
diff --git a/apps/web/src/design/colors.ts b/apps/web/src/design/colors.ts
index af35484..38e0c21 100644
--- a/apps/web/src/design/colors.ts
+++ b/apps/web/src/design/colors.ts
@@ -5,15 +5,20 @@ export const palette = {
   royalPurpleBright: '#8B5CF6',
   softGold: '#FCD34D',
   warmGold: '#F59E0B',
+  royalGold: '#AF8E3B',
+  royalGoldHover: '#947731',
+  champagne: '#F9F7F2',
   alabaster: '#F8F6F2',
   porcelain: '#FFFFFF',
   obsidian: '#0E0E11',
   graphite: '#1B1B22',
   ink: '#111111',
+  onyx: '#0F1115',
   snow: '#F5F5F7',
   slate: '#A1A1AA',
   pewter: '#8A8A8A',
   ash: '#5B5B5B',
+  charcoal: '#4B4B4B',
   mint: '#22C55E',
   coral: '#EF4444',
   amber: '#F59E0B',
@@ -42,21 +47,21 @@ export const colors: Record<ColorMode, {
   warning: string;
 }> = {
   light: {
-    background: palette.alabaster,
+    background: palette.champagne,
     surface: palette.porcelain,
-    card: 'rgba(255, 255, 255, 0.65)',
+    card: 'rgba(255, 255, 255, 0.7)',
     primary: palette.royalPurple,
     primaryHover: palette.royalPurpleDeep,
-    accent: palette.softGold,
-    accentSoft: '#FDE68A',
-    textPrimary: palette.ink,
-    textSecondary: palette.ash,
-    textMuted: palette.pewter,
-    borderSoft: '#E8E6E1',
-    borderHard: palette.ink,
-    glass: 'rgba(255, 255, 255, 0.7)',
-    shadowSoft: '0px 10px 30px rgba(0,0,0,0.08)',
-    shadowElevated: '0px 18px 50px rgba(0,0,0,0.14)',
+    accent: palette.royalGold,
+    accentSoft: '#F3EFE4',
+    textPrimary: palette.onyx,
+    textSecondary: palette.charcoal,
+    textMuted: palette.ash,
+    borderSoft: '#E5E0D5',
+    borderHard: palette.royalGold,
+    glass: 'rgba(255, 255, 255, 0.75)',
+    shadowSoft: '0px 10px 40px rgba(111, 40, 217, 0.04)',
+    shadowElevated: '0px 20px 60px rgba(0,0,0,0.06)',
     success: palette.mint,
     danger: palette.coral,
     warning: palette.warmGold,
diff --git a/apps/web/src/design/theme.ts b/apps/web/src/design/theme.ts
index 71aeb56..3492be5 100644
--- a/apps/web/src/design/theme.ts
+++ b/apps/web/src/design/theme.ts
@@ -96,7 +96,7 @@ export function buildThemeCss(mode: ColorMode): string {
   return cssFromVars(themeVars[mode]);
 }
 
-export const themeStylesheet = `:root{${buildThemeCss('light')}}[data-theme=\"dark\"]{${buildThemeCss('dark')}}`;
+export const themeStylesheet = `:root{${buildThemeCss('dark')}}[data-theme=\"light\"]{${buildThemeCss('light')}}`;
 
 export const motion = {
   transition: 'all 0.28s cubic-bezier(0.4, 0, 0.2, 1)',

From 04f60ad8d327e115fb0415dfcddc65ba6547e156 Mon Sep 17 00:00:00 2001
From: Arun-kushwaha007 <arunkush11821@gmail.com>
Date: Sat, 11 Apr 2026 18:55:18 +0530
Subject: [PATCH 03/14] feat(ui): implement portal rendering for modals and
 enhance color theming

Add Portal component for improved modal rendering, refactor CreateExpenseModal and CreateGroupModal to use portals with updated z-indexes and backgrounds. Introduce cardSolid color variable for solid backgrounds in themes. Update dashboard to dynamically use group currency and label multi-group balances.

BREAKING CHANGE: Modal z-indexes adjusted for layering consistency.
---
 apps/web/app/dashboard/page.tsx               |   7 +-
 .../components/groups/CreateExpenseModal.tsx  |  59 +++----
 .../components/groups/CreateGroupModal.tsx    | 167 +++++++++---------
 apps/web/src/components/ui/Portal.tsx         |  17 ++
 apps/web/src/design/colors.ts                 |   3 +
 apps/web/src/design/theme.ts                  |   2 +
 6 files changed, 140 insertions(+), 115 deletions(-)
 create mode 100644 apps/web/src/components/ui/Portal.tsx

diff --git a/apps/web/app/dashboard/page.tsx b/apps/web/app/dashboard/page.tsx
index 733104b..d4e55ab 100644
--- a/apps/web/app/dashboard/page.tsx
+++ b/apps/web/app/dashboard/page.tsx
@@ -59,13 +59,16 @@ export default async function DashboardPage() {
   const totalBalanceCents = dashboard.totalBalanceCents;
   const isPositive = Number(totalBalanceCents) >= 0;
 
+  const primaryCurrency = groups[0]?.currency ?? 'USD';
+  const totalBalanceLabel = groups.length > 1 ? 'Multi-Crew Balance' : 'Total Balance';
+
   return (
     <DashboardLayout>
       <div className="space-y-8">
         <div className="grid grid-cols-2 gap-3 sm:gap-4 md:grid-cols-4">
           <SummaryCard
-            title="Total Balance"
-            value={formatMoney(totalBalanceCents, 'USD')}
+            title={totalBalanceLabel}
+            value={formatMoney(totalBalanceCents, primaryCurrency)}
             icon="dollar"
             change="Live"
             trend={isPositive ? 'up' : 'down'}
diff --git a/apps/web/src/components/groups/CreateExpenseModal.tsx b/apps/web/src/components/groups/CreateExpenseModal.tsx
index 5c510d0..d5d161f 100644
--- a/apps/web/src/components/groups/CreateExpenseModal.tsx
+++ b/apps/web/src/components/groups/CreateExpenseModal.tsx
@@ -19,6 +19,7 @@ import { createExpenseAction, updateExpenseAction, updateGroupDefaultSplitAction
 import { equalShares, exactShares, percentageShares, sumShares } from '../../lib/split';
 import { useToast } from '../ui/Toaster';
 import { useModalFocusTrap } from '../ui/useModalFocusTrap';
+import { Portal } from '../ui/Portal';
 
 type CreateExpenseModalProps = {
   groupId: string;
@@ -264,29 +265,26 @@ export function CreateExpenseModal({
     }
   };
 
+  if (!open) return null;
+
   return (
-    <AnimatePresence>
-      {open && (
-        <>
+    <Portal>
+      <div
+        className="fixed inset-0 z-[80] bg-black/60 backdrop-blur-sm"
+        onClick={onClose}
+      />
+      <div className="fixed inset-0 z-[110] flex items-center justify-center p-4 py-8 pointer-events-none">
+        <div className="pointer-events-auto w-full max-w-3xl">
           <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            onClick={onClose}
-            className="fixed inset-0 z-[80] bg-black/60 backdrop-blur-sm"
-          />
-          <div className="fixed inset-0 z-[90] flex items-center justify-center p-4">
-            <motion.div
-              ref={modalRef}
-              tabIndex={-1}
-              role="dialog"
-              aria-modal="true"
-              aria-labelledby="create-expense-title"
-              initial={{ opacity: 0, scale: 0.95, y: 10 }}
-              animate={{ opacity: 1, scale: 1, y: 0 }}
-              exit={{ opacity: 0, scale: 0.95, y: 10 }}
-              className="w-full max-w-3xl max-h-[90vh] overflow-y-auto rounded-3xl border border-[var(--fs-border)] bg-[var(--fs-card)] shadow-[var(--fs-shadow-elevated)] overflow-hidden"
-            >
+            ref={modalRef}
+            tabIndex={-1}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="create-expense-title"
+            initial={{ opacity: 0, scale: 0.95, y: 10 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            className="w-full max-h-[90vh] overflow-y-auto rounded-3xl border border-[var(--fs-border)] bg-[var(--fs-card-solid)] shadow-[var(--fs-shadow-elevated)] overflow-hidden"
+          >
               <div className="flex items-center justify-between px-6 py-5 border-b border-[var(--fs-border)]">
                 <div>
                   <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-[var(--fs-text-muted)]">
@@ -318,7 +316,7 @@ export function CreateExpenseModal({
                     </label>
                     <input
                       data-autofocus="true"
-                      className="w-full rounded-xl border border-[var(--fs-border)] bg-[var(--fs-background)] p-3 text-[var(--fs-text-primary)] outline-none focus:border-[var(--fs-primary)]"
+                      className="w-full rounded-xl border-2 border-[var(--fs-border)] bg-[var(--fs-surface)] p-3 text-[var(--fs-text-primary)] outline-none focus:border-[var(--fs-primary)] placeholder:text-[var(--fs-text-muted)]/50"
                       placeholder="Team dinner, rideshare..."
                       value={description}
                       onChange={(event) => setDescription(event.target.value)}
@@ -332,7 +330,7 @@ export function CreateExpenseModal({
                         Amount ({currency})
                       </label>
                       <input
-                        className="w-full rounded-xl border border-[var(--fs-border)] bg-[var(--fs-background)] p-3 text-[var(--fs-text-primary)] outline-none focus:border-[var(--fs-primary)]"
+                        className="w-full rounded-xl border-2 border-[var(--fs-border)] bg-[var(--fs-surface)] p-3 text-[var(--fs-text-primary)] outline-none focus:border-[var(--fs-primary)]"
                         type="number"
                         min="0"
                         step="0.01"
@@ -346,7 +344,7 @@ export function CreateExpenseModal({
                         Payer
                       </label>
                       <select
-                        className="w-full rounded-xl border border-[var(--fs-border)] bg-[var(--fs-background)] p-3 text-[var(--fs-text-primary)] outline-none focus:border-[var(--fs-primary)]"
+                        className="w-full rounded-xl border-2 border-[var(--fs-border)] bg-[var(--fs-surface)] p-3 text-[var(--fs-text-primary)] outline-none focus:border-[var(--fs-primary)]"
                         value={payerId}
                         onChange={(event) => setPayerId(event.target.value)}
                       >
@@ -362,7 +360,7 @@ export function CreateExpenseModal({
                         Category
                       </label>
                       <select
-                        className="w-full rounded-xl border border-[var(--fs-border)] bg-[var(--fs-background)] p-3 text-[var(--fs-text-primary)] outline-none focus:border-[var(--fs-primary)]"
+                        className="w-full rounded-xl border-2 border-[var(--fs-border)] bg-[var(--fs-surface)] p-3 text-[var(--fs-text-primary)] outline-none focus:border-[var(--fs-primary)]"
                         value={category}
                         onChange={(event) =>
                           setCategory(event.target.value as ExpenseCategory | '')
@@ -425,7 +423,7 @@ export function CreateExpenseModal({
                       {participantOptions.map((member) => (
                         <label
                           key={member.id}
-                          className="flex items-center justify-between rounded-xl border border-[var(--fs-border)] bg-[var(--fs-background)]/60 px-3 py-2 text-sm font-semibold text-[var(--fs-text-primary)]"
+                          className="flex items-center justify-between rounded-xl border-2 border-[var(--fs-border)] bg-[var(--fs-surface)] px-3 py-2 text-sm font-semibold text-[var(--fs-text-primary)] transition-all hover:border-[var(--fs-primary)]/40"
                         >
                           <div className="flex items-center gap-2">
                             <input
@@ -505,7 +503,7 @@ export function CreateExpenseModal({
                               key={id}
                               type="number"
                               min="0"
-                              className="w-full rounded-xl border border-[var(--fs-border)] bg-[var(--fs-background)] p-2 text-sm text-[var(--fs-text-primary)] outline-none focus:border-[var(--fs-primary)]"
+                              className="w-full rounded-xl border-2 border-[var(--fs-border)] bg-[var(--fs-surface)] p-2 text-sm text-[var(--fs-text-primary)] outline-none focus:border-[var(--fs-primary)]"
                               placeholder={`Amount for ${member?.name ?? id}`}
                               value={exactByUser[id] ?? ''}
                               onChange={(event) =>
@@ -588,8 +586,7 @@ export function CreateExpenseModal({
               </form>
             </motion.div>
           </div>
-        </>
-      )}
-    </AnimatePresence>
-  );
+        </div>
+      </Portal>
+    );
 }
diff --git a/apps/web/src/components/groups/CreateGroupModal.tsx b/apps/web/src/components/groups/CreateGroupModal.tsx
index d9d82d8..979ac6c 100644
--- a/apps/web/src/components/groups/CreateGroupModal.tsx
+++ b/apps/web/src/components/groups/CreateGroupModal.tsx
@@ -6,6 +6,7 @@ import { X, Sparkles } from 'lucide-react';
 import { createGroupAction } from '../../lib/actions';
 import { useToast } from '../ui/Toaster';
 import { useModalFocusTrap } from '../ui/useModalFocusTrap';
+import { Portal } from '../ui/Portal';
 
 type CreateGroupModalProps = {
   open: boolean;
@@ -47,96 +48,98 @@ export function CreateGroupModal({ open, onClose, onCreated }: CreateGroupModalP
   };
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm px-4">
-      <div
-        ref={modalRef}
-        tabIndex={-1}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="create-group-title"
-        className="relative w-full max-w-lg rounded-3xl border border-[var(--fs-border)] bg-[var(--fs-card)] p-6 shadow-[var(--fs-shadow-elevated)]"
-      >
-        <div className="flex items-start justify-between gap-4 mb-4">
-          <div>
-            <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-[var(--fs-text-muted)]">
-              Groups
-            </p>
-            <h3
-              id="create-group-title"
-              className="text-2xl font-extrabold tracking-tight text-[var(--fs-text-primary)]"
+    <Portal>
+      <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-md px-4 py-10">
+        <div
+          ref={modalRef}
+          tabIndex={-1}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="create-group-title"
+          className="relative w-full max-w-lg rounded-3xl border border-[var(--fs-border)] bg-[var(--fs-card-solid)] p-6 sm:p-8 shadow-[var(--fs-shadow-elevated)]"
+        >
+          <div className="flex items-start justify-between gap-4 mb-6">
+            <div>
+              <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-[var(--fs-text-muted)]">
+                Groups
+              </p>
+              <h3
+                id="create-group-title"
+                className="text-2xl font-extrabold tracking-tight text-[var(--fs-text-primary)]"
+              >
+                Create a group
+              </h3>
+              <p className="text-[12px] font-medium text-[var(--fs-text-primary)] mt-1">
+                Specify your group details with high-contrast precision.
+              </p>
+            </div>
+            <button
+              onClick={onClose}
+              className="p-2 rounded-xl bg-[var(--fs-background)] hover:bg-[var(--fs-background)]/70 transition-colors text-[var(--fs-text-muted)]"
+              title="Close"
             >
-              Create a group
-            </h3>
-            <p className="text-[12px] font-medium text-[var(--fs-text-muted)]">
-              Mirror the mobile flow: name and currency with strong contrast in both themes.
-            </p>
+              <X className="w-5 h-5" />
+            </button>
           </div>
-          <button
-            onClick={onClose}
-            className="p-2 rounded-xl hover:bg-[var(--fs-background)] transition-colors text-[var(--fs-text-muted)]"
-            title="Close"
-          >
-            <X className="w-5 h-5" />
-          </button>
-        </div>
 
-        <div className="space-y-4">
-          <label className="block">
-            <span className="text-sm font-semibold text-[var(--fs-text-primary)]">Group name</span>
-            <input
-              data-autofocus="true"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              placeholder="e.g. Summer Trip 2026"
-              className="mt-2 w-full rounded-xl border border-[var(--fs-border)] bg-[var(--fs-background)] px-4 py-3 text-[var(--fs-text-primary)] font-semibold outline-none focus:border-[var(--fs-primary)]"
-            />
-          </label>
+          <div className="space-y-5">
+            <label className="block">
+              <span className="text-sm font-semibold text-[var(--fs-text-primary)] ml-1">Group name</span>
+              <input
+                data-autofocus="true"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="e.g. Summer Trip 2026"
+                className="mt-2 w-full rounded-xl border-2 border-[var(--fs-border)] bg-[var(--fs-surface)] px-4 py-3 text-[var(--fs-text-primary)] font-semibold outline-none focus:border-[var(--fs-primary)] placeholder:text-[var(--fs-text-muted)]/50 shadow-sm"
+              />
+            </label>
 
-          <label className="block">
-            <span className="text-sm font-semibold text-[var(--fs-text-primary)]">Currency</span>
-            <select
-              value={currency}
-              onChange={(e) => setCurrency(e.target.value as CurrencyCode)}
-              className="mt-2 w-full rounded-xl border border-[var(--fs-border)] bg-[var(--fs-background)] px-4 py-3 text-[var(--fs-text-primary)] font-semibold outline-none focus:border-[var(--fs-primary)]"
-            >
-              {currencyOptions.map((code) => (
-                <option key={code} value={code}>
-                  {code}
-                </option>
-              ))}
-            </select>
-          </label>
+            <label className="block">
+              <span className="text-sm font-semibold text-[var(--fs-text-primary)] ml-1">Currency</span>
+              <select
+                value={currency}
+                onChange={(e) => setCurrency(e.target.value as CurrencyCode)}
+                className="mt-2 w-full rounded-xl border-2 border-[var(--fs-border)] bg-[var(--fs-surface)] px-4 py-3 text-[var(--fs-text-primary)] font-semibold outline-none focus:border-[var(--fs-primary)] shadow-sm cursor-pointer"
+              >
+                {currencyOptions.map((code) => (
+                  <option key={code} value={code}>
+                    {code}
+                  </option>
+                ))}
+              </select>
+            </label>
 
-          {error ? (
-            <div className="rounded-xl border border-rose-400/60 bg-rose-500/10 px-4 py-3 text-sm font-semibold text-rose-300">
-              {error}
-            </div>
-          ) : null}
-        </div>
-
-        <div className="mt-6 flex items-center justify-between">
-          <div className="inline-flex items-center gap-2 text-[12px] font-bold uppercase tracking-[0.12em] text-[var(--fs-text-muted)]">
-            <Sparkles className="w-4 h-4 text-[var(--fs-primary)]" />
-            Mobile parity ensured
+            {error ? (
+              <div className="rounded-xl border border-rose-400/60 bg-rose-500/10 px-4 py-3 text-sm font-semibold text-rose-300">
+                {error}
+              </div>
+            ) : null}
           </div>
-          <div className="flex gap-3">
-            <button
-              onClick={onClose}
-              className="rounded-xl border border-[var(--fs-border)] px-4 py-2 text-sm font-bold text-[var(--fs-text-primary)] hover:border-[var(--fs-primary)]"
-              disabled={saving}
-            >
-              Cancel
-            </button>
-            <button
-              onClick={() => void submit()}
-              className="btn-royal text-sm px-5 py-2.5"
-              disabled={saving}
-            >
-              {saving ? 'Saving…' : 'Create group'}
-            </button>
+
+          <div className="mt-8 flex items-center justify-between">
+            <div className="inline-flex items-center gap-2 text-[12px] font-bold uppercase tracking-[0.12em] text-[var(--fs-text-primary)]">
+              <Sparkles className="w-4 h-4 text-[var(--fs-primary)]" />
+              Luxury parity ensured
+            </div>
+            <div className="flex gap-3">
+              <button
+                onClick={onClose}
+                className="rounded-xl border border-[var(--fs-border)] px-4 py-2 text-sm font-bold text-[var(--fs-text-primary)] hover:border-[var(--fs-primary)]"
+                disabled={saving}
+              >
+                Cancel
+              </button>
+              <button
+                onClick={() => void submit()}
+                className="btn-royal text-sm px-5 py-2.5"
+                disabled={saving}
+              >
+                {saving ? 'Saving…' : 'Create group'}
+              </button>
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </Portal>
   );
 }
diff --git a/apps/web/src/components/ui/Portal.tsx b/apps/web/src/components/ui/Portal.tsx
new file mode 100644
index 0000000..d532f85
--- /dev/null
+++ b/apps/web/src/components/ui/Portal.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+import { ReactNode, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+export function Portal({ children }: { children: ReactNode }) {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+
+  if (!mounted) return null;
+
+  return createPortal(children, document.body);
+}
diff --git a/apps/web/src/design/colors.ts b/apps/web/src/design/colors.ts
index 38e0c21..fb8216c 100644
--- a/apps/web/src/design/colors.ts
+++ b/apps/web/src/design/colors.ts
@@ -30,6 +30,7 @@ export const colors: Record<ColorMode, {
   background: string;
   surface: string;
   card: string;
+  cardSolid: string;
   primary: string;
   primaryHover: string;
   accent: string;
@@ -50,6 +51,7 @@ export const colors: Record<ColorMode, {
     background: palette.champagne,
     surface: palette.porcelain,
     card: 'rgba(255, 255, 255, 0.7)',
+    cardSolid: palette.porcelain,
     primary: palette.royalPurple,
     primaryHover: palette.royalPurpleDeep,
     accent: palette.royalGold,
@@ -70,6 +72,7 @@ export const colors: Record<ColorMode, {
     background: palette.obsidian,
     surface: palette.graphite,
     card: 'rgba(255, 255, 255, 0.05)',
+    cardSolid: '#1E1E26',
     primary: palette.royalPurpleBright,
     primaryHover: '#7C3AED',
     accent: palette.softGold,
diff --git a/apps/web/src/design/theme.ts b/apps/web/src/design/theme.ts
index 3492be5..4ae5f30 100644
--- a/apps/web/src/design/theme.ts
+++ b/apps/web/src/design/theme.ts
@@ -47,6 +47,7 @@ export const themeVars: Record<ColorMode, ThemeVariableMap> = {
     '--fs-background': colors.light.background,
     '--fs-surface': colors.light.surface,
     '--fs-card': colors.light.card,
+    '--fs-card-solid': colors.light.cardSolid,
     '--fs-primary': colors.light.primary,
     '--fs-primary-hover': colors.light.primaryHover,
     '--fs-accent': colors.light.accent,
@@ -68,6 +69,7 @@ export const themeVars: Record<ColorMode, ThemeVariableMap> = {
     '--fs-background': colors.dark.background,
     '--fs-surface': colors.dark.surface,
     '--fs-card': colors.dark.card,
+    '--fs-card-solid': colors.dark.cardSolid,
     '--fs-primary': colors.dark.primary,
     '--fs-primary-hover': colors.dark.primaryHover,
     '--fs-accent': colors.dark.accent,

From 73b5feaa3982b3e5a5e238d5c7eeba51431f32df Mon Sep 17 00:00:00 2001
From: Arun-kushwaha007 <arunkush11821@gmail.com>
Date: Sat, 11 Apr 2026 19:39:52 +0530
Subject: [PATCH 04/14] feat(groups): add soft delete functionality for groups

Introduce soft delete for groups in the database schema and backend service, allowing group owners to delete groups via a new API endpoint. Update frontend to include a delete group modal in group actions, with proper confirmation and action handling. Modify queries to exclude deleted groups from user summaries and dashboards.

BREAKING CHANGE: Group deletion now permanently removes group data from active views and balances.
---
 apps/backend/prisma/schema.prisma             |   1 +
 apps/backend/src/groups/groups.controller.ts  |   7 +-
 apps/backend/src/groups/groups.service.ts     |  37 ++++-
 .../app/dashboard/groups/[groupId]/page.tsx   |   1 +
 .../components/groups/DeleteGroupModal.tsx    | 126 ++++++++++++++++++
 .../src/components/groups/GroupActions.tsx    |  26 +++-
 apps/web/src/lib/actions.ts                   |  20 +++
 7 files changed, 214 insertions(+), 4 deletions(-)
 create mode 100644 apps/web/src/components/groups/DeleteGroupModal.tsx

diff --git a/apps/backend/prisma/schema.prisma b/apps/backend/prisma/schema.prisma
index 76a1f2b..697435b 100644
--- a/apps/backend/prisma/schema.prisma
+++ b/apps/backend/prisma/schema.prisma
@@ -67,6 +67,7 @@ model Group {
   shareToken         String?           @unique
   shareEnabled       Boolean           @default(false)
   createdAt          DateTime          @default(now())
+  deletedAt          DateTime?
   creator            User              @relation("group_creator", fields: [createdBy], references: [id])
   members            GroupMember[]
   expenses           Expense[]
diff --git a/apps/backend/src/groups/groups.controller.ts b/apps/backend/src/groups/groups.controller.ts
index b9e3844..6710155 100644
--- a/apps/backend/src/groups/groups.controller.ts
+++ b/apps/backend/src/groups/groups.controller.ts
@@ -1,4 +1,4 @@
-import { Body, Controller, Get, Param, Patch, Post, UseGuards } from '@nestjs/common';
+import { Body, Controller, Delete, Get, Param, Patch, Post, UseGuards } from '@nestjs/common';
 import { Throttle } from '@nestjs/throttler';
 import { JwtAuthGuard } from '../auth/guards/jwt-auth.guard';
 import { CurrentUser } from '../common/decorators/current-user.decorator';
@@ -82,4 +82,9 @@ export class GroupsController {
   ) {
     return this.groupsService.toggleShare(id, user.sub, enabled);
   }
+
+  @Delete(':id')
+  remove(@Param('id') id: string, @CurrentUser() user: JwtPayload) {
+    return this.groupsService.delete(id, user.sub);
+  }
 }
diff --git a/apps/backend/src/groups/groups.service.ts b/apps/backend/src/groups/groups.service.ts
index ac5f934..e2f57c9 100644
--- a/apps/backend/src/groups/groups.service.ts
+++ b/apps/backend/src/groups/groups.service.ts
@@ -83,6 +83,7 @@ export class GroupsService {
             userId,
           },
         },
+        deletedAt: null,
       },
       orderBy: { createdAt: 'desc' },
     });
@@ -235,7 +236,10 @@ export class GroupsService {
 
   async getUserSummary(userId: string): Promise<{ totalBalanceCents: string }> {
     const balances = await this.prisma.balance.findMany({
-      where: { userId },
+      where: { 
+        userId,
+        group: { deletedAt: null }
+      },
       select: { amountCents: true },
     });
 
@@ -247,13 +251,13 @@ export class GroupsService {
   }
 
   async getDashboard(userId: string): Promise<GroupDashboardDto> {
-    const groups = await this.prisma.group.findMany({
       where: {
         members: {
           some: {
             userId,
           },
         },
+        deletedAt: null,
       },
       include: {
         _count: {
@@ -670,6 +674,35 @@ export class GroupsService {
     };
   }
 
+  async delete(groupId: string, actorUserId: string): Promise<{ success: true }> {
+    const membership = await this.prisma.groupMember.findUnique({
+      where: {
+        groupId_userId: {
+          groupId,
+          userId: actorUserId,
+        },
+      },
+    });
+
+    if (!membership || membership.role !== 'OWNER') {
+      throw new ForbiddenException('Only the group owner can delete the group');
+    }
+
+    await this.prisma.group.update({
+      where: { id: groupId },
+      data: { 
+        deletedAt: new Date(),
+        shareEnabled: false,
+        shareToken: null
+      },
+    });
+
+    await this.redis.invalidateGroupCache(groupId);
+    await this.redis.invalidateUserDashboardCache(actorUserId);
+
+    return { success: true };
+  }
+
   async resolvePendingInvites(userId: string, email: string): Promise<void> {
     const invites = await this.prisma.groupInvite.findMany({
       where: { email: email.toLowerCase() },
diff --git a/apps/web/app/dashboard/groups/[groupId]/page.tsx b/apps/web/app/dashboard/groups/[groupId]/page.tsx
index 0a7b4ac..61768ac 100644
--- a/apps/web/app/dashboard/groups/[groupId]/page.tsx
+++ b/apps/web/app/dashboard/groups/[groupId]/page.tsx
@@ -112,6 +112,7 @@ export default async function GroupDetailPage({ params }: GroupDetailPageProps)
               <Suspense fallback={<div className="h-40 rounded-3xl border border-[var(--fs-border)] bg-[var(--fs-card)] animate-pulse" />}>
                 <GroupActions
                   groupId={groupId}
+                  groupName={group.name}
                   currency={group.currency}
                   members={members}
                   shareEnabled={group.shareEnabled}
diff --git a/apps/web/src/components/groups/DeleteGroupModal.tsx b/apps/web/src/components/groups/DeleteGroupModal.tsx
new file mode 100644
index 0000000..d1af7e2
--- /dev/null
+++ b/apps/web/src/components/groups/DeleteGroupModal.tsx
@@ -0,0 +1,126 @@
+'use client';
+
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { AlertTriangle, Trash2, X } from 'lucide-react';
+import { Portal } from '../ui/Portal';
+import { useModalFocusTrap } from '../ui/useModalFocusTrap';
+import { deleteGroupAction } from '../../lib/actions';
+import { useRouter } from 'next/navigation';
+import { useToast } from '../ui/Toaster';
+
+type DeleteGroupModalProps = {
+  groupId: string;
+  groupName: string;
+  open: boolean;
+  onClose: () => void;
+};
+
+export function DeleteGroupModal({ groupId, groupName, open, onClose }: DeleteGroupModalProps) {
+  const modalRef = useModalFocusTrap<HTMLDivElement>(open, onClose);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const router = useRouter();
+  const { toast } = useToast();
+
+  const handleDelete = async () => {
+    try {
+      setIsDeleting(true);
+      setError(null);
+      const result = await deleteGroupAction(groupId);
+      
+      if (!result.success) {
+        throw new Error(result.message);
+      }
+
+      toast(`Group "${groupName}" deleted successfully`);
+      onClose();
+      router.push('/dashboard');
+      router.refresh();
+    } catch (err) {
+      setError((err as Error).message || 'Failed to delete group');
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <AnimatePresence>
+      {open && (
+        <Portal>
+          <div className="fixed inset-0 z-[150] flex items-center justify-center p-4 py-10 bg-black/70 backdrop-blur-md">
+            <motion.div
+              ref={modalRef}
+              tabIndex={-1}
+              role="dialog"
+              aria-modal="true"
+              initial={{ opacity: 0, scale: 0.95, y: 20 }}
+              animate={{ opacity: 1, scale: 1, y: 0 }}
+              exit={{ opacity: 0, scale: 0.95, y: 20 }}
+              className="relative w-full max-w-md rounded-3xl border-2 border-rose-500/20 bg-[var(--fs-card-solid)] p-6 sm:p-8 shadow-[0_20px_50px_rgba(244,63,94,0.15)] overflow-hidden"
+            >
+              <div className="flex items-center justify-between mb-6">
+                <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-rose-500/10 text-rose-500">
+                  <AlertTriangle className="h-6 w-6" />
+                </div>
+                <button
+                  onClick={onClose}
+                  className="p-2 rounded-xl bg-[var(--fs-background)] hover:bg-[var(--fs-background)]/70 transition-colors text-[var(--fs-text-muted)]"
+                >
+                  <X className="h-5 w-5" />
+                </button>
+              </div>
+
+              <div className="space-y-4 text-center sm:text-left">
+                <h3 className="text-2xl font-extrabold tracking-tight text-[var(--fs-text-primary)]">
+                  Delete Group?
+                </h3>
+                <p className="text-sm font-medium text-[var(--fs-text-secondary)] leading-relaxed">
+                  You are about to delete <span className="font-bold text-[var(--fs-text-primary)]">"{groupName}"</span>. 
+                  This will permanently clear the group's expenses and balances.
+                </p>
+                <div className="rounded-xl bg-orange-500/5 border border-orange-500/10 p-3">
+                  <p className="text-[11px] font-bold uppercase tracking-wider text-orange-600">
+                    Note: Activity history will be preserved.
+                  </p>
+                </div>
+              </div>
+
+              {error && (
+                <div className="mt-4 rounded-xl border border-rose-500/30 bg-rose-500/5 p-3 text-xs font-semibold text-rose-600">
+                  {error}
+                </div>
+              )}
+
+              <div className="mt-8 flex flex-col sm:flex-row gap-3">
+                <button
+                  onClick={onClose}
+                  className="flex-1 rounded-xl border border-[var(--fs-border)] bg-[var(--fs-background)] px-4 py-3 text-sm font-bold text-[var(--fs-text-primary)] hover:border-[var(--fs-primary)] transition-colors"
+                  disabled={isDeleting}
+                >
+                  Keep Group
+                </button>
+                <button
+                  onClick={handleDelete}
+                  disabled={isDeleting}
+                  className="flex-1 inline-flex items-center justify-center gap-2 rounded-xl bg-rose-600 px-4 py-3 text-sm font-bold text-white hover:bg-rose-700 transition-colors shadow-lg shadow-rose-600/20 disabled:opacity-50"
+                >
+                  {isDeleting ? (
+                    'Purging...'
+                  ) : (
+                    <>
+                      <Trash2 className="h-4 w-4" />
+                      Delete Permanently
+                    </>
+                  )}
+                </button>
+              </div>
+
+              {/* Ambient Red Glow */}
+              <div className="absolute -bottom-10 -left-10 h-32 w-32 rounded-full bg-rose-500/5 blur-3xl" />
+            </motion.div>
+          </div>
+        </Portal>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/apps/web/src/components/groups/GroupActions.tsx b/apps/web/src/components/groups/GroupActions.tsx
index 2343a08..a472d84 100644
--- a/apps/web/src/components/groups/GroupActions.tsx
+++ b/apps/web/src/components/groups/GroupActions.tsx
@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { CurrencyCode, GroupDefaultSplitDto, GroupMemberSummaryDto } from '@fairshare/shared-types';
 import Link from 'next/link';
-import { Download, PlusCircle, Scale, Share2, Wallet } from 'lucide-react';
+import { Download, PlusCircle, Scale, Share2, Wallet, Trash2 } from 'lucide-react';
 import dynamic from 'next/dynamic';
 import { exportBalancesCsvAction, exportExpensesCsvAction, toggleGroupShareAction } from '../../lib/actions';
 import { useToast } from '../ui/Toaster';
@@ -14,8 +14,14 @@ const CreateExpenseModal = dynamic(
   { ssr: false },
 );
 
+const DeleteGroupModal = dynamic(
+  () => import('./DeleteGroupModal').then((mod) => mod.DeleteGroupModal),
+  { ssr: false },
+);
+
 type GroupActionsProps = {
   groupId: string;
+  groupName: string;
   currency: CurrencyCode;
   members: GroupMemberSummaryDto[];
   shareEnabled: boolean;
@@ -25,6 +31,7 @@ type GroupActionsProps = {
 
 export function GroupActions({
   groupId,
+  groupName,
   currency,
   members,
   shareEnabled,
@@ -32,6 +39,7 @@ export function GroupActions({
   defaultSplitPreference,
 }: GroupActionsProps) {
   const [open, setOpen] = useState(false);
+  const [deleteOpen, setDeleteOpen] = useState(false);
   const [exportingExpenses, setExportingExpenses] = useState(false);
   const [exportingBalances, setExportingBalances] = useState(false);
   const [togglingShare, setTogglingShare] = useState(false);
@@ -182,6 +190,15 @@ export function GroupActions({
           <div className="rounded-xl border border-[var(--fs-border)] bg-[var(--fs-background)] px-4 py-3 text-sm font-medium text-[var(--fs-text-muted)]">
             Invite teammates from the member panel to keep your ledger accurate.
           </div>
+
+          <button
+            type="button"
+            onClick={() => setDeleteOpen(true)}
+            className="flex items-center justify-center gap-2 rounded-xl border border-rose-500/20 bg-rose-500/5 px-4 py-3 text-sm font-bold text-rose-600 hover:bg-rose-500/10 transition-colors"
+          >
+            <Trash2 className="h-4 w-4" />
+            Delete group
+          </button>
         </div>
       </div>
 
@@ -197,6 +214,13 @@ export function GroupActions({
           router.refresh();
         }}
       />
+
+      <DeleteGroupModal
+        groupId={groupId}
+        groupName={groupName}
+        open={deleteOpen}
+        onClose={() => setDeleteOpen(false)}
+      />
     </>
   );
 }
diff --git a/apps/web/src/lib/actions.ts b/apps/web/src/lib/actions.ts
index e2bd3c7..4f4d20a 100644
--- a/apps/web/src/lib/actions.ts
+++ b/apps/web/src/lib/actions.ts
@@ -370,3 +370,23 @@ export async function deleteExpenseAction(expenseId: string) {
 
   return { success: true };
 }
+
+export async function deleteGroupAction(groupId: string) {
+  const token = (await cookies()).get(authCookies.accessToken)?.value;
+
+  const response = await fetch(`${getBackendBaseUrl()}/groups/${groupId}`, {
+    method: 'DELETE',
+    headers: {
+      ...(token ? { Authorization: `Bearer ${token}` } : {}),
+    },
+    cache: 'no-store',
+  });
+
+  const data = await response.json().catch(() => null);
+
+  if (!response.ok) {
+    return { success: false, message: data?.message ?? 'Failed to delete group' };
+  }
+
+  return { success: true };
+}

From 0abf10e286e43c05a4e3ee11b31e07a04cf42e9d Mon Sep 17 00:00:00 2001
From: Arun-kushwaha007 <arunkush11821@gmail.com>
Date: Thu, 16 Apr 2026 00:14:38 +0530
Subject: [PATCH 05/14] ci: add e2e tests to workflow

Add database services startup, migration, and Playwright installation to CI pipeline.
Configure Playwright for api and web test projects with web server setup.
Add invalidateUserDashboardCache method in RedisService.
Enhance getDashboard in GroupsService to fetch user groups.
Add dashboard.spec.ts e2e test file and test-results directory.
---
 .github/workflows/ci.yml                  | 22 +++++++++++++
 apps/backend/src/groups/groups.service.ts |  1 +
 apps/backend/src/redis/redis.service.ts   |  8 +++++
 playwright.config.ts                      | 37 ++++++++++++++++++++--
 test-results/.last-run.json               |  4 +++
 tests/e2e/dashboard.spec.ts               | 38 +++++++++++++++++++++++
 6 files changed, 108 insertions(+), 2 deletions(-)
 create mode 100644 test-results/.last-run.json
 create mode 100644 tests/e2e/dashboard.spec.ts

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 776cbb6..7a602f4 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -59,6 +59,28 @@ jobs:
       - name: Build
         run: pnpm build
 
+      - name: Start Database Services
+        run: docker compose up -d
+
+      - name: Migrate Database
+        env:
+          DATABASE_URL: postgresql://postgres:postgres@localhost:5432/fairshare?schema=public
+          JWT_SECRET: supersecret
+          STRIPE_SECRET_KEY: test_key
+        run: pnpm --filter backend prisma:migrate
+
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
+
+      - name: Run E2E Tests
+        env:
+          CI: true
+          DATABASE_URL: postgresql://postgres:postgres@localhost:5432/fairshare?schema=public
+          JWT_SECRET: supersecret
+          STRIPE_SECRET_KEY: test_key
+          NEXT_PUBLIC_APP_URL: http://localhost:3000
+        run: pnpm run e2e
+
       - name: Upload coverage
         if: always()
         uses: actions/upload-artifact@v4
diff --git a/apps/backend/src/groups/groups.service.ts b/apps/backend/src/groups/groups.service.ts
index e2f57c9..1ba8666 100644
--- a/apps/backend/src/groups/groups.service.ts
+++ b/apps/backend/src/groups/groups.service.ts
@@ -251,6 +251,7 @@ export class GroupsService {
   }
 
   async getDashboard(userId: string): Promise<GroupDashboardDto> {
+    const groups = await this.prisma.group.findMany({
       where: {
         members: {
           some: {
diff --git a/apps/backend/src/redis/redis.service.ts b/apps/backend/src/redis/redis.service.ts
index b7348c0..b469124 100644
--- a/apps/backend/src/redis/redis.service.ts
+++ b/apps/backend/src/redis/redis.service.ts
@@ -61,6 +61,14 @@ export class RedisService {
     }
   }
 
+  async invalidateUserDashboardCache(userId: string): Promise<void> {
+    try {
+      await this.redis.del(`user:${userId}:dashboard`);
+    } catch (error) {
+      this.logger.warn(`Redis invalidate skipped: ${error instanceof Error ? error.message : 'unknown error'}`);
+    }
+  }
+
   private async safeGet(key: string): Promise<string | null> {
     try {
       return await this.redis.get(key);
diff --git a/playwright.config.ts b/playwright.config.ts
index d91cf86..94148a1 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -1,9 +1,42 @@
-import { defineConfig } from '@playwright/test';
+import { defineConfig, devices } from '@playwright/test';
 
 export default defineConfig({
   testDir: './tests/e2e',
   timeout: 120_000,
   use: {
-    baseURL: process.env.E2E_API_BASE_URL ?? 'http://localhost:3001/api/v1',
+    trace: 'on-first-retry',
   },
+  projects: [
+    {
+      name: 'api',
+      testMatch: /fairshare\.spec\.ts/,
+      use: {
+        baseURL: process.env.E2E_API_BASE_URL ?? 'http://localhost:3001/api/v1',
+      },
+    },
+    {
+      name: 'web',
+      testMatch: /dashboard\.spec\.ts/,
+      use: {
+        ...devices['Desktop Chrome'],
+        baseURL: process.env.WEB_URL ?? 'http://localhost:3000',
+      },
+    },
+  ],
+  webServer: process.env.CI
+    ? [
+        {
+          command: 'pnpm --filter backend start',
+          port: 3001,
+          timeout: 180_000,
+          reuseExistingServer: !process.env.CI,
+        },
+        {
+          command: 'pnpm --filter web start',
+          port: 3000,
+          timeout: 180_000,
+          reuseExistingServer: !process.env.CI,
+        },
+      ]
+    : undefined,
 });
diff --git a/test-results/.last-run.json b/test-results/.last-run.json
new file mode 100644
index 0000000..cbcc1fb
--- /dev/null
+++ b/test-results/.last-run.json
@@ -0,0 +1,4 @@
+{
+  "status": "passed",
+  "failedTests": []
+}
\ No newline at end of file
diff --git a/tests/e2e/dashboard.spec.ts b/tests/e2e/dashboard.spec.ts
new file mode 100644
index 0000000..e1eb5b7
--- /dev/null
+++ b/tests/e2e/dashboard.spec.ts
@@ -0,0 +1,38 @@
+import { test, expect } from '@playwright/test';
+
+const randomEmail = () => `dashboard_ui_${Date.now()}_${Math.random().toString(36).slice(2)}@example.com`;
+
+test.describe('Dashboard UI', () => {
+  test('User can log in and view dashboard', async ({ page, request }) => {
+    const email = randomEmail();
+    const password = 'PasswordUI123!';
+
+    // Seed user via API to avoid UI registration flakiness in testing
+    const apiBaseUrl = process.env.E2E_API_BASE_URL ?? 'http://localhost:3001/api/v1';
+    const registerResp = await request.post(`${apiBaseUrl}/auth/register`, {
+      data: { name: 'UI User', email, password },
+    });
+    expect(registerResp.ok()).toBeTruthy();
+
+    await test.step('Log into web app', async () => {
+      await page.goto('/login');
+      await page.fill('input[type="email"]', email);
+      await page.fill('input[type="password"]', password);
+      await page.click('button[type="submit"]');
+
+      // Should redirect to dashboard
+      await expect(page).toHaveURL(/\/dashboard/);
+    });
+
+    await test.step('Verify Dashboard Elements', async () => {
+      // Check for navigation or header
+      await expect(page.locator('h1', { hasText: 'Dashboard' }).first()).toBeVisible();
+      
+      // Removed flaky networkidle wait
+
+
+      // The user doesn't have any groups yet, so check for empty state
+      await expect(page.getByText('group', { exact: false }).first()).toBeVisible();
+    });
+  });
+});

From 60f097bc30f0816d9a74656e8d97a2439ce24ac3 Mon Sep 17 00:00:00 2001
From: Arun-kushwaha007 <arunkush11821@gmail.com>
Date: Thu, 16 Apr 2026 00:22:33 +0530
Subject: [PATCH 06/14] build(ci): reorder workflow steps and update turbo
 dependencies

- Moved build step before lint and test in CI pipeline
- Changed Prisma migration to db push for faster database setup
- Added build dependency to lint task in turbo.json for proper execution order
---
 .github/workflows/ci.yml | 8 ++++----
 turbo.json               | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 7a602f4..1fce631 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -50,15 +50,15 @@ jobs:
       - name: Generate Prisma client
         run: pnpm --filter backend prisma:generate
 
+      - name: Build
+        run: pnpm build
+
       - name: Lint
         run: pnpm lint
 
       - name: Test
         run: pnpm test
 
-      - name: Build
-        run: pnpm build
-
       - name: Start Database Services
         run: docker compose up -d
 
@@ -67,7 +67,7 @@ jobs:
           DATABASE_URL: postgresql://postgres:postgres@localhost:5432/fairshare?schema=public
           JWT_SECRET: supersecret
           STRIPE_SECRET_KEY: test_key
-        run: pnpm --filter backend prisma:migrate
+        run: pnpm --filter backend exec prisma db push
 
       - name: Install Playwright Browsers
         run: pnpm exec playwright install --with-deps
diff --git a/turbo.json b/turbo.json
index 115ac7c..e4e4b71 100644
--- a/turbo.json
+++ b/turbo.json
@@ -11,7 +11,7 @@
       "persistent": true
     },
     "lint": {
-      "dependsOn": ["^lint"],
+      "dependsOn": ["^lint", "^build"],
       "outputs": []
     },
     "test": {

From 79bd94c7110687109f027c0dd8869812d41515b3 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 15 Apr 2026 18:53:31 +0000
Subject: [PATCH 07/14] fix: PR review - restore theme switching, guard soft
 delete, fix modal animations, cleanup

- ThemeProvider: restore data-theme application to document elements
- layout.tsx: restore theme init script to prevent FOUC
- groups.service.ts: add existence and already-deleted checks in delete method
- CreateExpenseModal: restore AnimatePresence for exit animations
- ThemeToggle: remove unused imports and variables
- .gitignore: add test-results/ and remove committed artifact

Agent-Logs-Url: https://github.com/Arun-kushwaha007/FairShare/sessions/3067ae7f-0172-4370-8ac6-04de20b46b7c

Co-authored-by: Arun-kushwaha007 <121769639+Arun-kushwaha007@users.noreply.github.com>
---
 .gitignore                                    |   1 +
 apps/backend/src/groups/groups.service.ts     |  13 +
 apps/web/app/layout.tsx                       |  14 +
 .../components/groups/CreateExpenseModal.tsx  |  43 ++--
 .../src/components/theme/ThemeProvider.tsx    |  16 +-
 apps/web/src/components/theme/ThemeToggle.tsx |   3 +-
 packages/shared-types/src/index.d.ts          | 242 ++++++++++++++++++
 packages/shared-types/src/index.js            |  63 +++++
 packages/shared-types/src/index.js.map        |   1 +
 9 files changed, 368 insertions(+), 28 deletions(-)
 create mode 100644 packages/shared-types/src/index.d.ts
 create mode 100644 packages/shared-types/src/index.js
 create mode 100644 packages/shared-types/src/index.js.map

diff --git a/.gitignore b/.gitignore
index c53974c..ea66018 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,6 +7,7 @@ node_modules
 dist
 .next
 coverage
+test-results
 .agents
 .agent
 .turbo
diff --git a/apps/backend/src/groups/groups.service.ts b/apps/backend/src/groups/groups.service.ts
index 1ba8666..4c07a49 100644
--- a/apps/backend/src/groups/groups.service.ts
+++ b/apps/backend/src/groups/groups.service.ts
@@ -676,6 +676,19 @@ export class GroupsService {
   }
 
   async delete(groupId: string, actorUserId: string): Promise<{ success: true }> {
+    const group = await this.prisma.group.findUnique({
+      where: { id: groupId },
+      select: { id: true, deletedAt: true },
+    });
+
+    if (!group) {
+      throw new NotFoundException('Group not found');
+    }
+
+    if (group.deletedAt) {
+      throw new NotFoundException('Group has already been deleted');
+    }
+
     const membership = await this.prisma.groupMember.findUnique({
       where: {
         groupId_userId: {
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 4cb3345..e1be97e 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -7,6 +7,19 @@ import { themeStylesheet } from '../src/design/theme';
 import { Navbar } from '../components/layout/Navbar';
 import { Footer } from '../components/layout/Footer';
 
+const themeInitScript = `
+(function() {
+  try {
+    var storageKey = 'fs-theme';
+    var stored = localStorage.getItem(storageKey);
+    var mode = stored === 'light' || stored === 'dark' || stored === 'system' ? stored : 'system';
+    var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    var resolved = mode === 'system' ? (prefersDark ? 'dark' : 'light') : mode;
+    document.documentElement.dataset.theme = resolved;
+  } catch (_) {}
+})();
+`;
+
 export const metadata: Metadata = {
   title: 'FairShare - Smart Expense Sharing',
   description: 'Split group expenses without confusion. FairShare helps friends, roommates, and teams track shared spending and settle up faster.',
@@ -31,6 +44,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     <html lang="en" className={`${manrope.variable} ${spaceGrotesk.variable}`}>
       <head>
         <style id="fs-theme-vars">{themeStylesheet}</style>
+        <script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
       </head>
       <body className="min-h-screen selection:bg-[var(--fs-primary)] selection:text-white">
         <Providers>
diff --git a/apps/web/src/components/groups/CreateExpenseModal.tsx b/apps/web/src/components/groups/CreateExpenseModal.tsx
index d5d161f..8ad8e6f 100644
--- a/apps/web/src/components/groups/CreateExpenseModal.tsx
+++ b/apps/web/src/components/groups/CreateExpenseModal.tsx
@@ -265,26 +265,27 @@ export function CreateExpenseModal({
     }
   };
 
-  if (!open) return null;
-
   return (
-    <Portal>
-      <div
-        className="fixed inset-0 z-[80] bg-black/60 backdrop-blur-sm"
-        onClick={onClose}
-      />
-      <div className="fixed inset-0 z-[110] flex items-center justify-center p-4 py-8 pointer-events-none">
-        <div className="pointer-events-auto w-full max-w-3xl">
-          <motion.div
-            ref={modalRef}
-            tabIndex={-1}
-            role="dialog"
-            aria-modal="true"
-            aria-labelledby="create-expense-title"
-            initial={{ opacity: 0, scale: 0.95, y: 10 }}
-            animate={{ opacity: 1, scale: 1, y: 0 }}
-            className="w-full max-h-[90vh] overflow-y-auto rounded-3xl border border-[var(--fs-border)] bg-[var(--fs-card-solid)] shadow-[var(--fs-shadow-elevated)] overflow-hidden"
-          >
+    <AnimatePresence>
+      {open && (
+        <Portal>
+          <div
+            className="fixed inset-0 z-[80] bg-black/60 backdrop-blur-sm"
+            onClick={onClose}
+          />
+          <div className="fixed inset-0 z-[110] flex items-center justify-center p-4 py-8 pointer-events-none">
+            <div className="pointer-events-auto w-full max-w-3xl">
+              <motion.div
+                ref={modalRef}
+                tabIndex={-1}
+                role="dialog"
+                aria-modal="true"
+                aria-labelledby="create-expense-title"
+                initial={{ opacity: 0, scale: 0.95, y: 10 }}
+                animate={{ opacity: 1, scale: 1, y: 0 }}
+                exit={{ opacity: 0, scale: 0.95, y: 10 }}
+                className="w-full max-h-[90vh] overflow-y-auto rounded-3xl border border-[var(--fs-border)] bg-[var(--fs-card-solid)] shadow-[var(--fs-shadow-elevated)] overflow-hidden"
+              >
               <div className="flex items-center justify-between px-6 py-5 border-b border-[var(--fs-border)]">
                 <div>
                   <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-[var(--fs-text-muted)]">
@@ -588,5 +589,7 @@ export function CreateExpenseModal({
           </div>
         </div>
       </Portal>
-    );
+      )}
+    </AnimatePresence>
+  );
 }
diff --git a/apps/web/src/components/theme/ThemeProvider.tsx b/apps/web/src/components/theme/ThemeProvider.tsx
index 307f9a0..fcd4c06 100644
--- a/apps/web/src/components/theme/ThemeProvider.tsx
+++ b/apps/web/src/components/theme/ThemeProvider.tsx
@@ -20,9 +20,13 @@ function getSystemTheme(): ResolvedTheme {
   return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
 }
 
-function resolveTheme(mode: ThemeMode): ResolvedTheme {
-  if (mode === 'system') return getSystemTheme();
-  return mode;
+function resolveAndApplyTheme(mode: ThemeMode): ResolvedTheme {
+  const resolved: ResolvedTheme = mode === 'system' ? getSystemTheme() : mode;
+  if (typeof document !== 'undefined') {
+    document.documentElement.dataset.theme = resolved;
+    document.body.dataset.theme = resolved;
+  }
+  return resolved;
 }
 
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
@@ -38,14 +42,14 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
 
     const stored = readStored();
     setModeState(stored);
-    setResolved(resolveTheme(stored));
+    setResolved(resolveAndApplyTheme(stored));
   }, []);
 
   useEffect(() => {
     const media = window.matchMedia('(prefers-color-scheme: dark)');
     const handler = () => {
       if (mode === 'system') {
-        setResolved(resolveTheme('system'));
+        setResolved(resolveAndApplyTheme('system'));
       }
     };
     media.addEventListener('change', handler);
@@ -57,7 +61,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
     if (typeof window !== 'undefined') {
       localStorage.setItem(STORAGE_KEY, next);
     }
-    setResolved(resolveTheme(next));
+    setResolved(resolveAndApplyTheme(next));
   };
 
   const value = useMemo(() => ({ mode, resolved, setMode }), [mode, resolved]);
diff --git a/apps/web/src/components/theme/ThemeToggle.tsx b/apps/web/src/components/theme/ThemeToggle.tsx
index dd0e3c6..37cfa11 100644
--- a/apps/web/src/components/theme/ThemeToggle.tsx
+++ b/apps/web/src/components/theme/ThemeToggle.tsx
@@ -2,10 +2,9 @@
 
 import { useThemeMode } from './ThemeProvider';
 import { Sun, Moon, Laptop } from 'lucide-react';
-import { motion, AnimatePresence } from 'framer-motion';
 
 export function ThemeToggle() {
-  const { mode, resolved, setMode } = useThemeMode();
+  const { mode, setMode } = useThemeMode();
 
   return (
     <div className="flex items-center gap-1 rounded-2xl border border-[var(--fs-border)] bg-[var(--fs-surface)] p-1 backdrop-blur-md shadow-sm">
diff --git a/packages/shared-types/src/index.d.ts b/packages/shared-types/src/index.d.ts
new file mode 100644
index 0000000..cdc9f73
--- /dev/null
+++ b/packages/shared-types/src/index.d.ts
@@ -0,0 +1,242 @@
+export type CurrencyCode = 'USD' | 'EUR' | 'INR';
+/**
+ * Formats an integer-cent amount into a currency string with symbol, thousands separators, and two decimal places.
+ *
+ * @param amountCents - The amount in cents provided as a `bigint`, integer `number`, or integer `string` (may include a leading `-` for negative amounts). Strings may include surrounding whitespace.
+ * @param currency - The currency code whose symbol will prefix the formatted output (defaults to `'USD'`).
+ * @returns The formatted currency string, preserving a leading `-` for negative values, using `,` as the thousands separator and exactly two digits after the decimal point (e.g., `-$1,234.56`).
+ */
+export declare function formatCurrencyFromCents(amountCents: bigint | number | string, currency?: CurrencyCode): string;
+export declare const EXPENSE_CATEGORIES: readonly ["FOOD", "TRAVEL", "UTILITIES", "GROCERIES", "ENTERTAINMENT", "OTHER"];
+export type ExpenseCategory = (typeof EXPENSE_CATEGORIES)[number];
+export declare const EXPENSE_SPLIT_TYPES: readonly ["equal", "exact", "percentage"];
+export type ExpenseSplitType = (typeof EXPENSE_SPLIT_TYPES)[number];
+export declare const RECURRING_EXPENSE_FREQUENCIES: readonly ["daily", "weekly", "monthly"];
+export type RecurringExpenseFrequency = (typeof RECURRING_EXPENSE_FREQUENCIES)[number];
+export interface AuthUserDto {
+    id: string;
+    email: string;
+    name: string;
+    avatarUrl: string | null;
+}
+export interface RegisterRequestDto {
+    email: string;
+    password: string;
+    name: string;
+}
+export interface LoginRequestDto {
+    email: string;
+    password: string;
+}
+export interface GoogleLoginRequestDto {
+    email: string;
+    name: string;
+    avatarUrl?: string;
+}
+export interface AuthTokensDto {
+    accessToken: string;
+    refreshToken: string;
+    user: AuthUserDto;
+}
+export interface CreateGroupRequestDto {
+    name: string;
+    currency: CurrencyCode;
+}
+export interface InviteMemberRequestDto {
+    email: string;
+}
+export interface RemindSettlementRequestDto {
+    payerId: string;
+    receiverId: string;
+    amountCents: string;
+}
+export interface RemindSettlementResponseDto {
+    success: true;
+    activity: ActivityDto;
+}
+export interface GroupMemberDto {
+    id: string;
+    userId: string;
+    groupId: string;
+    role: 'OWNER' | 'MEMBER';
+    joinedAt: string;
+}
+export interface GroupMemberSummaryDto {
+    memberId: string;
+    userId: string;
+    name: string;
+    email: string;
+    avatarUrl: string | null;
+    role: 'OWNER' | 'MEMBER';
+}
+export interface GroupSummaryDto {
+    totalExpensesCents: string;
+    totalSettledCents: string;
+    perUserSpentCents: Record<string, string>;
+    perUserOwedCents: Record<string, string>;
+    largestExpenseCents: string | null;
+    lastExpenseCents: string | null;
+    topSpenderUserId: string | null;
+}
+export interface GroupDashboardItemDto {
+    groupId: string;
+    groupName: string;
+    currency: CurrencyCode;
+    memberCount: number;
+    netBalanceCents: string;
+    settlementCount: number;
+    dueRecurringCount: number;
+    pendingActionCount: number;
+}
+export interface GroupDashboardDto {
+    totalBalanceCents: string;
+    activeGroupCount: number;
+    groups: Array<{
+        id: string;
+        name: string;
+        currency: CurrencyCode;
+    }>;
+    attentionItems: GroupDashboardItemDto[];
+}
+export interface GroupDefaultSplitDto {
+    splitType: ExpenseSplitType;
+    participantUserIds: string[];
+    exactAmountsCentsByUser?: Record<string, string>;
+    percentagesByUser?: Record<string, string>;
+}
+export interface GroupDto {
+    id: string;
+    name: string;
+    currency: CurrencyCode;
+    createdBy: string;
+    createdAt: string;
+    shareEnabled: boolean;
+    shareToken?: string | null;
+    defaultSplitPreference?: GroupDefaultSplitDto | null;
+    members?: GroupMemberDto[];
+}
+export interface CreateExpenseSplitDto {
+    userId: string;
+    owedAmountCents: string;
+    paidAmountCents: string;
+}
+export interface RecurringExpenseConfigDto {
+    frequency: RecurringExpenseFrequency;
+}
+export interface CreateExpenseRequestDto {
+    payerId: string;
+    description: string;
+    totalAmountCents: string;
+    currency: CurrencyCode;
+    category?: ExpenseCategory;
+    recurring?: RecurringExpenseConfigDto;
+    splits: CreateExpenseSplitDto[];
+}
+export interface UpdateExpenseRequestDto {
+    description?: string;
+    category?: ExpenseCategory | null;
+}
+export interface UpdateRecurringExpenseRequestDto {
+    description?: string;
+    totalAmountCents?: string;
+    category?: ExpenseCategory | null;
+    frequency?: RecurringExpenseFrequency;
+}
+export interface SplitDto {
+    id: string;
+    userId: string;
+    owedAmountCents: string;
+    paidAmountCents: string;
+}
+export interface ExpenseDto {
+    id: string;
+    groupId: string;
+    payerId: string;
+    description: string;
+    totalAmountCents: string;
+    currency: CurrencyCode;
+    category?: ExpenseCategory | null;
+    receiptFileKey?: string | null;
+    createdAt: string;
+    splits?: SplitDto[];
+}
+export interface RecurringExpenseDto {
+    id: string;
+    groupId: string;
+    payerId: string;
+    createdBy: string;
+    description: string;
+    totalAmountCents: string;
+    currency: CurrencyCode;
+    category?: ExpenseCategory | null;
+    frequency: RecurringExpenseFrequency;
+    nextOccurrenceAt: string;
+    lastGeneratedAt?: string | null;
+    active: boolean;
+    createdAt: string;
+    splits: CreateExpenseSplitDto[];
+}
+export interface PaginatedExpensesResponseDto {
+    items: ExpenseDto[];
+    nextCursor: number | null;
+}
+export interface BalanceDto {
+    id: string;
+    groupId: string;
+    userId: string;
+    counterpartyUserId: string;
+    amountCents: string;
+}
+export interface CreateSettlementRequestDto {
+    payerId: string;
+    receiverId: string;
+    amountCents: string;
+}
+export interface SettlementDto {
+    id: string;
+    groupId: string;
+    payerId: string;
+    receiverId: string;
+    amountCents: string;
+    createdAt: string;
+}
+export interface PresignedReceiptUrlResponseDto {
+    uploadUrl: string;
+    fileKey: string;
+}
+export interface SimplifySuggestionDto {
+    fromUserId: string;
+    toUserId: string;
+    amountCents: string;
+}
+export interface UpdateGroupDefaultSplitRequestDto {
+    defaultSplitPreference: GroupDefaultSplitDto | null;
+}
+export type ActivityType = 'expense_created' | 'expense_updated' | 'expense_deleted' | 'settlement_created' | 'settlement_reminder' | 'member_joined' | 'member_invited';
+export interface ActivityDto {
+    id: string;
+    groupId: string;
+    actorUserId: string;
+    actorName?: string;
+    groupName?: string;
+    type: ActivityType;
+    entityId: string;
+    metadata: Record<string, unknown>;
+    createdAt: string;
+}
+export interface RegisterPushTokenRequestDto {
+    token: string;
+    deviceType: 'ios' | 'android' | 'web';
+}
+export interface CreatePaymentIntentRequestDto {
+    groupId: string;
+    payerId: string;
+    receiverId: string;
+    amountCents: string;
+    currency: CurrencyCode;
+}
+export interface CreatePaymentIntentResponseDto {
+    paymentId: string;
+    clientSecret: string;
+    paymentIntentId: string;
+}
diff --git a/packages/shared-types/src/index.js b/packages/shared-types/src/index.js
new file mode 100644
index 0000000..f9c395a
--- /dev/null
+++ b/packages/shared-types/src/index.js
@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RECURRING_EXPENSE_FREQUENCIES = exports.EXPENSE_SPLIT_TYPES = exports.EXPENSE_CATEGORIES = void 0;
+exports.formatCurrencyFromCents = formatCurrencyFromCents;
+const CURRENCY_SYMBOLS = {
+    USD: '$',
+    EUR: '€',
+    INR: '₹',
+};
+/**
+ * Normalize and validate an integer cents input into a canonical representation.
+ *
+ * @param amountCents - The cents value to normalize; may be a `bigint`, a `number` (must be an integer), or a `string` (may include surrounding whitespace and must represent an integer).
+ * @returns The normalized integer cents value as a trimmed string.
+ * @throws Error('Currency formatter expects whole cents.') if a `number` is not an integer.
+ * @throws Error('Currency formatter expects a valid integer string.') if a `string` does not represent a valid integer after trimming.
+ */
+function normalizeCentsInput(amountCents) {
+    if (typeof amountCents === 'bigint') {
+        return amountCents.toString();
+    }
+    if (typeof amountCents === 'number') {
+        if (!Number.isInteger(amountCents)) {
+            throw new Error('Currency formatter expects whole cents.');
+        }
+        return String(amountCents);
+    }
+    const trimmed = amountCents.trim();
+    if (!/^-?\d+$/.test(trimmed)) {
+        throw new Error('Currency formatter expects a valid integer string.');
+    }
+    return trimmed;
+}
+/**
+ * Formats an integer-cent amount into a currency string with symbol, thousands separators, and two decimal places.
+ *
+ * @param amountCents - The amount in cents provided as a `bigint`, integer `number`, or integer `string` (may include a leading `-` for negative amounts). Strings may include surrounding whitespace.
+ * @param currency - The currency code whose symbol will prefix the formatted output (defaults to `'USD'`).
+ * @returns The formatted currency string, preserving a leading `-` for negative values, using `,` as the thousands separator and exactly two digits after the decimal point (e.g., `-$1,234.56`).
+ */
+function formatCurrencyFromCents(amountCents, currency = 'USD') {
+    const normalized = normalizeCentsInput(amountCents);
+    const negative = normalized.startsWith('-');
+    const digits = negative ? normalized.slice(1) : normalized;
+    const safeDigits = digits.replace(/^0+(?=\d)/, '') || '0';
+    const padded = safeDigits.padStart(3, '0');
+    const whole = padded.slice(0, -2);
+    const fraction = padded.slice(-2);
+    const groupedWhole = whole.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    const symbol = CURRENCY_SYMBOLS[currency];
+    return `${negative ? '-' : ''}${symbol}${groupedWhole}.${fraction}`;
+}
+exports.EXPENSE_CATEGORIES = [
+    'FOOD',
+    'TRAVEL',
+    'UTILITIES',
+    'GROCERIES',
+    'ENTERTAINMENT',
+    'OTHER',
+];
+exports.EXPENSE_SPLIT_TYPES = ['equal', 'exact', 'percentage'];
+exports.RECURRING_EXPENSE_FREQUENCIES = ['daily', 'weekly', 'monthly'];
+//# sourceMappingURL=index.js.map
\ No newline at end of file
diff --git a/packages/shared-types/src/index.js.map b/packages/shared-types/src/index.js.map
new file mode 100644
index 0000000..e1af616
--- /dev/null
+++ b/packages/shared-types/src/index.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAyCA,0DAYC;AApDD,MAAM,gBAAgB,GAAiC;IACrD,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;CACT,CAAC;AAEF;;;;;;;GAOG;AACH,SAAS,mBAAmB,CAAC,WAAqC;IAChE,IAAI,OAAO,WAAW,KAAK,QAAQ,EAAE,CAAC;QACpC,OAAO,WAAW,CAAC,QAAQ,EAAE,CAAC;IAChC,CAAC;IAED,IAAI,OAAO,WAAW,KAAK,QAAQ,EAAE,CAAC;QACpC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC;YACnC,MAAM,IAAI,KAAK,CAAC,yCAAyC,CAAC,CAAC;QAC7D,CAAC;QACD,OAAO,MAAM,CAAC,WAAW,CAAC,CAAC;IAC7B,CAAC;IAED,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,EAAE,CAAC;IACnC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;QAC7B,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC,CAAC;IACxE,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC;AAED;;;;;;GAMG;AACH,SAAgB,uBAAuB,CAAC,WAAqC,EAAE,WAAyB,KAAK;IAC3G,MAAM,UAAU,GAAG,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACpD,MAAM,QAAQ,GAAG,UAAU,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;IAC5C,MAAM,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC;IAC3D,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,EAAE,CAAC,IAAI,GAAG,CAAC;IAC1D,MAAM,MAAM,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IAC3C,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IAClC,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IAClC,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,uBAAuB,EAAE,GAAG,CAAC,CAAC;IACjE,MAAM,MAAM,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAE1C,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,MAAM,GAAG,YAAY,IAAI,QAAQ,EAAE,CAAC;AACtE,CAAC;AAEY,QAAA,kBAAkB,GAAG;IAChC,MAAM;IACN,QAAQ;IACR,WAAW;IACX,WAAW;IACX,eAAe;IACf,OAAO;CACC,CAAC;AAEE,QAAA,mBAAmB,GAAG,CAAC,OAAO,EAAE,OAAO,EAAE,YAAY,CAAU,CAAC;AAEhE,QAAA,6BAA6B,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,CAAU,CAAC"}
\ No newline at end of file

From 8c86ebd57153eeb3be821d80d8885f22fb227d78 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 15 Apr 2026 18:54:33 +0000
Subject: [PATCH 08/14] chore: remove accidentally committed build artifacts
 from packages/shared-types/src

Agent-Logs-Url: https://github.com/Arun-kushwaha007/FairShare/sessions/3067ae7f-0172-4370-8ac6-04de20b46b7c

Co-authored-by: Arun-kushwaha007 <121769639+Arun-kushwaha007@users.noreply.github.com>
---
 packages/shared-types/src/index.d.ts   | 242 -------------------------
 packages/shared-types/src/index.js     |  63 -------
 packages/shared-types/src/index.js.map |   1 -
 3 files changed, 306 deletions(-)
 delete mode 100644 packages/shared-types/src/index.d.ts
 delete mode 100644 packages/shared-types/src/index.js
 delete mode 100644 packages/shared-types/src/index.js.map

diff --git a/packages/shared-types/src/index.d.ts b/packages/shared-types/src/index.d.ts
deleted file mode 100644
index cdc9f73..0000000
--- a/packages/shared-types/src/index.d.ts
+++ /dev/null
@@ -1,242 +0,0 @@
-export type CurrencyCode = 'USD' | 'EUR' | 'INR';
-/**
- * Formats an integer-cent amount into a currency string with symbol, thousands separators, and two decimal places.
- *
- * @param amountCents - The amount in cents provided as a `bigint`, integer `number`, or integer `string` (may include a leading `-` for negative amounts). Strings may include surrounding whitespace.
- * @param currency - The currency code whose symbol will prefix the formatted output (defaults to `'USD'`).
- * @returns The formatted currency string, preserving a leading `-` for negative values, using `,` as the thousands separator and exactly two digits after the decimal point (e.g., `-$1,234.56`).
- */
-export declare function formatCurrencyFromCents(amountCents: bigint | number | string, currency?: CurrencyCode): string;
-export declare const EXPENSE_CATEGORIES: readonly ["FOOD", "TRAVEL", "UTILITIES", "GROCERIES", "ENTERTAINMENT", "OTHER"];
-export type ExpenseCategory = (typeof EXPENSE_CATEGORIES)[number];
-export declare const EXPENSE_SPLIT_TYPES: readonly ["equal", "exact", "percentage"];
-export type ExpenseSplitType = (typeof EXPENSE_SPLIT_TYPES)[number];
-export declare const RECURRING_EXPENSE_FREQUENCIES: readonly ["daily", "weekly", "monthly"];
-export type RecurringExpenseFrequency = (typeof RECURRING_EXPENSE_FREQUENCIES)[number];
-export interface AuthUserDto {
-    id: string;
-    email: string;
-    name: string;
-    avatarUrl: string | null;
-}
-export interface RegisterRequestDto {
-    email: string;
-    password: string;
-    name: string;
-}
-export interface LoginRequestDto {
-    email: string;
-    password: string;
-}
-export interface GoogleLoginRequestDto {
-    email: string;
-    name: string;
-    avatarUrl?: string;
-}
-export interface AuthTokensDto {
-    accessToken: string;
-    refreshToken: string;
-    user: AuthUserDto;
-}
-export interface CreateGroupRequestDto {
-    name: string;
-    currency: CurrencyCode;
-}
-export interface InviteMemberRequestDto {
-    email: string;
-}
-export interface RemindSettlementRequestDto {
-    payerId: string;
-    receiverId: string;
-    amountCents: string;
-}
-export interface RemindSettlementResponseDto {
-    success: true;
-    activity: ActivityDto;
-}
-export interface GroupMemberDto {
-    id: string;
-    userId: string;
-    groupId: string;
-    role: 'OWNER' | 'MEMBER';
-    joinedAt: string;
-}
-export interface GroupMemberSummaryDto {
-    memberId: string;
-    userId: string;
-    name: string;
-    email: string;
-    avatarUrl: string | null;
-    role: 'OWNER' | 'MEMBER';
-}
-export interface GroupSummaryDto {
-    totalExpensesCents: string;
-    totalSettledCents: string;
-    perUserSpentCents: Record<string, string>;
-    perUserOwedCents: Record<string, string>;
-    largestExpenseCents: string | null;
-    lastExpenseCents: string | null;
-    topSpenderUserId: string | null;
-}
-export interface GroupDashboardItemDto {
-    groupId: string;
-    groupName: string;
-    currency: CurrencyCode;
-    memberCount: number;
-    netBalanceCents: string;
-    settlementCount: number;
-    dueRecurringCount: number;
-    pendingActionCount: number;
-}
-export interface GroupDashboardDto {
-    totalBalanceCents: string;
-    activeGroupCount: number;
-    groups: Array<{
-        id: string;
-        name: string;
-        currency: CurrencyCode;
-    }>;
-    attentionItems: GroupDashboardItemDto[];
-}
-export interface GroupDefaultSplitDto {
-    splitType: ExpenseSplitType;
-    participantUserIds: string[];
-    exactAmountsCentsByUser?: Record<string, string>;
-    percentagesByUser?: Record<string, string>;
-}
-export interface GroupDto {
-    id: string;
-    name: string;
-    currency: CurrencyCode;
-    createdBy: string;
-    createdAt: string;
-    shareEnabled: boolean;
-    shareToken?: string | null;
-    defaultSplitPreference?: GroupDefaultSplitDto | null;
-    members?: GroupMemberDto[];
-}
-export interface CreateExpenseSplitDto {
-    userId: string;
-    owedAmountCents: string;
-    paidAmountCents: string;
-}
-export interface RecurringExpenseConfigDto {
-    frequency: RecurringExpenseFrequency;
-}
-export interface CreateExpenseRequestDto {
-    payerId: string;
-    description: string;
-    totalAmountCents: string;
-    currency: CurrencyCode;
-    category?: ExpenseCategory;
-    recurring?: RecurringExpenseConfigDto;
-    splits: CreateExpenseSplitDto[];
-}
-export interface UpdateExpenseRequestDto {
-    description?: string;
-    category?: ExpenseCategory | null;
-}
-export interface UpdateRecurringExpenseRequestDto {
-    description?: string;
-    totalAmountCents?: string;
-    category?: ExpenseCategory | null;
-    frequency?: RecurringExpenseFrequency;
-}
-export interface SplitDto {
-    id: string;
-    userId: string;
-    owedAmountCents: string;
-    paidAmountCents: string;
-}
-export interface ExpenseDto {
-    id: string;
-    groupId: string;
-    payerId: string;
-    description: string;
-    totalAmountCents: string;
-    currency: CurrencyCode;
-    category?: ExpenseCategory | null;
-    receiptFileKey?: string | null;
-    createdAt: string;
-    splits?: SplitDto[];
-}
-export interface RecurringExpenseDto {
-    id: string;
-    groupId: string;
-    payerId: string;
-    createdBy: string;
-    description: string;
-    totalAmountCents: string;
-    currency: CurrencyCode;
-    category?: ExpenseCategory | null;
-    frequency: RecurringExpenseFrequency;
-    nextOccurrenceAt: string;
-    lastGeneratedAt?: string | null;
-    active: boolean;
-    createdAt: string;
-    splits: CreateExpenseSplitDto[];
-}
-export interface PaginatedExpensesResponseDto {
-    items: ExpenseDto[];
-    nextCursor: number | null;
-}
-export interface BalanceDto {
-    id: string;
-    groupId: string;
-    userId: string;
-    counterpartyUserId: string;
-    amountCents: string;
-}
-export interface CreateSettlementRequestDto {
-    payerId: string;
-    receiverId: string;
-    amountCents: string;
-}
-export interface SettlementDto {
-    id: string;
-    groupId: string;
-    payerId: string;
-    receiverId: string;
-    amountCents: string;
-    createdAt: string;
-}
-export interface PresignedReceiptUrlResponseDto {
-    uploadUrl: string;
-    fileKey: string;
-}
-export interface SimplifySuggestionDto {
-    fromUserId: string;
-    toUserId: string;
-    amountCents: string;
-}
-export interface UpdateGroupDefaultSplitRequestDto {
-    defaultSplitPreference: GroupDefaultSplitDto | null;
-}
-export type ActivityType = 'expense_created' | 'expense_updated' | 'expense_deleted' | 'settlement_created' | 'settlement_reminder' | 'member_joined' | 'member_invited';
-export interface ActivityDto {
-    id: string;
-    groupId: string;
-    actorUserId: string;
-    actorName?: string;
-    groupName?: string;
-    type: ActivityType;
-    entityId: string;
-    metadata: Record<string, unknown>;
-    createdAt: string;
-}
-export interface RegisterPushTokenRequestDto {
-    token: string;
-    deviceType: 'ios' | 'android' | 'web';
-}
-export interface CreatePaymentIntentRequestDto {
-    groupId: string;
-    payerId: string;
-    receiverId: string;
-    amountCents: string;
-    currency: CurrencyCode;
-}
-export interface CreatePaymentIntentResponseDto {
-    paymentId: string;
-    clientSecret: string;
-    paymentIntentId: string;
-}
diff --git a/packages/shared-types/src/index.js b/packages/shared-types/src/index.js
deleted file mode 100644
index f9c395a..0000000
--- a/packages/shared-types/src/index.js
+++ /dev/null
@@ -1,63 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RECURRING_EXPENSE_FREQUENCIES = exports.EXPENSE_SPLIT_TYPES = exports.EXPENSE_CATEGORIES = void 0;
-exports.formatCurrencyFromCents = formatCurrencyFromCents;
-const CURRENCY_SYMBOLS = {
-    USD: '$',
-    EUR: '€',
-    INR: '₹',
-};
-/**
- * Normalize and validate an integer cents input into a canonical representation.
- *
- * @param amountCents - The cents value to normalize; may be a `bigint`, a `number` (must be an integer), or a `string` (may include surrounding whitespace and must represent an integer).
- * @returns The normalized integer cents value as a trimmed string.
- * @throws Error('Currency formatter expects whole cents.') if a `number` is not an integer.
- * @throws Error('Currency formatter expects a valid integer string.') if a `string` does not represent a valid integer after trimming.
- */
-function normalizeCentsInput(amountCents) {
-    if (typeof amountCents === 'bigint') {
-        return amountCents.toString();
-    }
-    if (typeof amountCents === 'number') {
-        if (!Number.isInteger(amountCents)) {
-            throw new Error('Currency formatter expects whole cents.');
-        }
-        return String(amountCents);
-    }
-    const trimmed = amountCents.trim();
-    if (!/^-?\d+$/.test(trimmed)) {
-        throw new Error('Currency formatter expects a valid integer string.');
-    }
-    return trimmed;
-}
-/**
- * Formats an integer-cent amount into a currency string with symbol, thousands separators, and two decimal places.
- *
- * @param amountCents - The amount in cents provided as a `bigint`, integer `number`, or integer `string` (may include a leading `-` for negative amounts). Strings may include surrounding whitespace.
- * @param currency - The currency code whose symbol will prefix the formatted output (defaults to `'USD'`).
- * @returns The formatted currency string, preserving a leading `-` for negative values, using `,` as the thousands separator and exactly two digits after the decimal point (e.g., `-$1,234.56`).
- */
-function formatCurrencyFromCents(amountCents, currency = 'USD') {
-    const normalized = normalizeCentsInput(amountCents);
-    const negative = normalized.startsWith('-');
-    const digits = negative ? normalized.slice(1) : normalized;
-    const safeDigits = digits.replace(/^0+(?=\d)/, '') || '0';
-    const padded = safeDigits.padStart(3, '0');
-    const whole = padded.slice(0, -2);
-    const fraction = padded.slice(-2);
-    const groupedWhole = whole.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-    const symbol = CURRENCY_SYMBOLS[currency];
-    return `${negative ? '-' : ''}${symbol}${groupedWhole}.${fraction}`;
-}
-exports.EXPENSE_CATEGORIES = [
-    'FOOD',
-    'TRAVEL',
-    'UTILITIES',
-    'GROCERIES',
-    'ENTERTAINMENT',
-    'OTHER',
-];
-exports.EXPENSE_SPLIT_TYPES = ['equal', 'exact', 'percentage'];
-exports.RECURRING_EXPENSE_FREQUENCIES = ['daily', 'weekly', 'monthly'];
-//# sourceMappingURL=index.js.map
\ No newline at end of file
diff --git a/packages/shared-types/src/index.js.map b/packages/shared-types/src/index.js.map
deleted file mode 100644
index e1af616..0000000
--- a/packages/shared-types/src/index.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAyCA,0DAYC;AApDD,MAAM,gBAAgB,GAAiC;IACrD,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;CACT,CAAC;AAEF;;;;;;;GAOG;AACH,SAAS,mBAAmB,CAAC,WAAqC;IAChE,IAAI,OAAO,WAAW,KAAK,QAAQ,EAAE,CAAC;QACpC,OAAO,WAAW,CAAC,QAAQ,EAAE,CAAC;IAChC,CAAC;IAED,IAAI,OAAO,WAAW,KAAK,QAAQ,EAAE,CAAC;QACpC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC;YACnC,MAAM,IAAI,KAAK,CAAC,yCAAyC,CAAC,CAAC;QAC7D,CAAC;QACD,OAAO,MAAM,CAAC,WAAW,CAAC,CAAC;IAC7B,CAAC;IAED,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,EAAE,CAAC;IACnC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;QAC7B,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC,CAAC;IACxE,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC;AAED;;;;;;GAMG;AACH,SAAgB,uBAAuB,CAAC,WAAqC,EAAE,WAAyB,KAAK;IAC3G,MAAM,UAAU,GAAG,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACpD,MAAM,QAAQ,GAAG,UAAU,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;IAC5C,MAAM,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC;IAC3D,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,EAAE,CAAC,IAAI,GAAG,CAAC;IAC1D,MAAM,MAAM,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IAC3C,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IAClC,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IAClC,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,uBAAuB,EAAE,GAAG,CAAC,CAAC;IACjE,MAAM,MAAM,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAE1C,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,MAAM,GAAG,YAAY,IAAI,QAAQ,EAAE,CAAC;AACtE,CAAC;AAEY,QAAA,kBAAkB,GAAG;IAChC,MAAM;IACN,QAAQ;IACR,WAAW;IACX,WAAW;IACX,eAAe;IACf,OAAO;CACC,CAAC;AAEE,QAAA,mBAAmB,GAAG,CAAC,OAAO,EAAE,OAAO,EAAE,YAAY,CAAU,CAAC;AAEhE,QAAA,6BAA6B,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,CAAU,CAAC"}
\ No newline at end of file

From 2ed04b9dffa96a043d0f5380a1d286208285ff3c Mon Sep 17 00:00:00 2001
From: Arun-kushwaha007 <arunkush11821@gmail.com>
Date: Thu, 16 Apr 2026 00:40:38 +0530
Subject: [PATCH 09/14] test(backend): update receipts and settlements test
 mocks and expectations

- Reorder constructor parameters in ReceiptsService tests to match implementation changes
- Add groupId select to expense query expectation in receipts service test
- Include findUnique mock for settlement in integration test setup
---
 apps/backend/src/receipts/receipts.service.spec.ts        | 8 ++++----
 .../src/settlements/settlements.integration.spec.ts       | 1 +
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/backend/src/receipts/receipts.service.spec.ts b/apps/backend/src/receipts/receipts.service.spec.ts
index 47afeab..db588c0 100644
--- a/apps/backend/src/receipts/receipts.service.spec.ts
+++ b/apps/backend/src/receipts/receipts.service.spec.ts
@@ -17,7 +17,7 @@ describe('ReceiptsService', () => {
     const jobsQueue: any = {
       enqueueReceiptProcessing: jest.fn().mockResolvedValue(undefined),
     };
-    const service = new ReceiptsService(prisma, s3, jobsQueue);
+    const service = new ReceiptsService(prisma, jobsQueue, s3);
 
     await service.createUploadUrl('expense-1', { extension: 'jpg' });
 
@@ -42,11 +42,11 @@ describe('ReceiptsService', () => {
     const jobsQueue: any = {
       enqueueReceiptProcessing: jest.fn().mockResolvedValue(undefined),
     };
-    const service = new ReceiptsService(prisma, s3, jobsQueue);
+    const service = new ReceiptsService(prisma, jobsQueue, s3);
 
     const result = await service.createUploadUrl('expense-1', { extension: 'png' });
 
-    expect(prisma.expense.findUnique).toHaveBeenCalledWith({ where: { id: 'expense-1' } });
+    expect(prisma.expense.findUnique).toHaveBeenCalledWith({ where: { id: 'expense-1' }, select: { groupId: true } });
     expect(prisma.receipt.upsert).toHaveBeenCalledWith({
       where: { expenseId: 'expense-1' },
       update: {
@@ -83,7 +83,7 @@ describe('ReceiptsService', () => {
     const jobsQueue: any = {
       enqueueReceiptProcessing: jest.fn(),
     };
-    const service = new ReceiptsService(prisma, s3, jobsQueue);
+    const service = new ReceiptsService(prisma, jobsQueue, s3);
 
     await expect(service.createUploadUrl('missing-expense', {})).rejects.toBeInstanceOf(NotFoundException);
     expect(s3.getPresignedUploadUrl).not.toHaveBeenCalled();
diff --git a/apps/backend/src/settlements/settlements.integration.spec.ts b/apps/backend/src/settlements/settlements.integration.spec.ts
index 6c7355c..4863678 100644
--- a/apps/backend/src/settlements/settlements.integration.spec.ts
+++ b/apps/backend/src/settlements/settlements.integration.spec.ts
@@ -26,6 +26,7 @@ describe('Settlement Flow (integration-ish)', () => {
     const prisma: any = {
       settlement: {
         findFirst: jest.fn().mockResolvedValue(null),
+        findUnique: jest.fn().mockResolvedValue(null),
       },
       groupMember: {
         findMany: jest.fn().mockResolvedValue([{ userId: 'u1' }, { userId: 'u2' }]),

From c73399f3c924c855d9da667aec40c232aeeb2e2b Mon Sep 17 00:00:00 2001
From: Arun-kushwaha007 <arunkush11821@gmail.com>
Date: Thu, 16 Apr 2026 00:55:49 +0530
Subject: [PATCH 10/14] refactor(theme): simplify theme provider and remove
 inline initialization script

- Remove theme initialization script from layout.tsx
- Refactor ThemeProvider to only resolve themes without applying DOM changes
- Hardcode dark background and text colors in globals.css
- Enhance ThemeToggle with framer-motion animations and resolved theme usage
---
 apps/web/app/globals.css                        |  4 ++--
 apps/web/app/layout.tsx                         | 15 ---------------
 apps/web/src/components/theme/ThemeProvider.tsx | 16 ++++++----------
 apps/web/src/components/theme/ThemeToggle.tsx   |  3 ++-
 4 files changed, 10 insertions(+), 28 deletions(-)

diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index a4abe6d..08fae25 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -17,8 +17,8 @@
   }
 
   body {
-    background-color: var(--fs-background);
-    color: var(--fs-text-primary);
+    background-color: #030303;
+    color: white;
     font-family: var(--fs-font-sans);
     @apply transition-colors duration-300;
   }
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index e1be97e..9629547 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -7,19 +7,6 @@ import { themeStylesheet } from '../src/design/theme';
 import { Navbar } from '../components/layout/Navbar';
 import { Footer } from '../components/layout/Footer';
 
-const themeInitScript = `
-(function() {
-  try {
-    var storageKey = 'fs-theme';
-    var stored = localStorage.getItem(storageKey);
-    var mode = stored === 'light' || stored === 'dark' || stored === 'system' ? stored : 'system';
-    var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    var resolved = mode === 'system' ? (prefersDark ? 'dark' : 'light') : mode;
-    document.documentElement.dataset.theme = resolved;
-  } catch (_) {}
-})();
-`;
-
 export const metadata: Metadata = {
   title: 'FairShare - Smart Expense Sharing',
   description: 'Split group expenses without confusion. FairShare helps friends, roommates, and teams track shared spending and settle up faster.',
@@ -44,7 +31,6 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     <html lang="en" className={`${manrope.variable} ${spaceGrotesk.variable}`}>
       <head>
         <style id="fs-theme-vars">{themeStylesheet}</style>
-        <script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
       </head>
       <body className="min-h-screen selection:bg-[var(--fs-primary)] selection:text-white">
         <Providers>
@@ -56,4 +42,3 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     </html>
   );
 }
-
diff --git a/apps/web/src/components/theme/ThemeProvider.tsx b/apps/web/src/components/theme/ThemeProvider.tsx
index fcd4c06..307f9a0 100644
--- a/apps/web/src/components/theme/ThemeProvider.tsx
+++ b/apps/web/src/components/theme/ThemeProvider.tsx
@@ -20,13 +20,9 @@ function getSystemTheme(): ResolvedTheme {
   return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
 }
 
-function resolveAndApplyTheme(mode: ThemeMode): ResolvedTheme {
-  const resolved: ResolvedTheme = mode === 'system' ? getSystemTheme() : mode;
-  if (typeof document !== 'undefined') {
-    document.documentElement.dataset.theme = resolved;
-    document.body.dataset.theme = resolved;
-  }
-  return resolved;
+function resolveTheme(mode: ThemeMode): ResolvedTheme {
+  if (mode === 'system') return getSystemTheme();
+  return mode;
 }
 
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
@@ -42,14 +38,14 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
 
     const stored = readStored();
     setModeState(stored);
-    setResolved(resolveAndApplyTheme(stored));
+    setResolved(resolveTheme(stored));
   }, []);
 
   useEffect(() => {
     const media = window.matchMedia('(prefers-color-scheme: dark)');
     const handler = () => {
       if (mode === 'system') {
-        setResolved(resolveAndApplyTheme('system'));
+        setResolved(resolveTheme('system'));
       }
     };
     media.addEventListener('change', handler);
@@ -61,7 +57,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
     if (typeof window !== 'undefined') {
       localStorage.setItem(STORAGE_KEY, next);
     }
-    setResolved(resolveAndApplyTheme(next));
+    setResolved(resolveTheme(next));
   };
 
   const value = useMemo(() => ({ mode, resolved, setMode }), [mode, resolved]);
diff --git a/apps/web/src/components/theme/ThemeToggle.tsx b/apps/web/src/components/theme/ThemeToggle.tsx
index 37cfa11..dd0e3c6 100644
--- a/apps/web/src/components/theme/ThemeToggle.tsx
+++ b/apps/web/src/components/theme/ThemeToggle.tsx
@@ -2,9 +2,10 @@
 
 import { useThemeMode } from './ThemeProvider';
 import { Sun, Moon, Laptop } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
 
 export function ThemeToggle() {
-  const { mode, setMode } = useThemeMode();
+  const { mode, resolved, setMode } = useThemeMode();
 
   return (
     <div className="flex items-center gap-1 rounded-2xl border border-[var(--fs-border)] bg-[var(--fs-surface)] p-1 backdrop-blur-md shadow-sm">

From 87cf1509847d2c7945b4cc6a658b285d887de200 Mon Sep 17 00:00:00 2001
From: Arun-kushwaha007 <arunkush11821@gmail.com>
Date: Thu, 16 Apr 2026 01:08:02 +0530
Subject: [PATCH 11/14] test(mobile): update login screen test to expect 'sign
 in' text and clean import

- Remove BOM from React import
- Change test assertion to check for 'Sign In' instead of 'Login'
---
 apps/mobile/app/screens/LoginScreen.spec.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/mobile/app/screens/LoginScreen.spec.tsx b/apps/mobile/app/screens/LoginScreen.spec.tsx
index 84846b1..d48701e 100644
--- a/apps/mobile/app/screens/LoginScreen.spec.tsx
+++ b/apps/mobile/app/screens/LoginScreen.spec.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react';
 import { render } from '@testing-library/react-native';
 import { PaperProvider } from 'react-native-paper';
 import { LoginScreen } from './LoginScreen';
@@ -11,6 +11,6 @@ describe('LoginScreen', () => {
       </PaperProvider>,
     );
 
-    expect(getByText('Login')).toBeTruthy();
+    expect(getByText('Sign In')).toBeTruthy();
   });
 });

From 457ab3a5bb924915bdcfdce5f49aa9a20f342ed6 Mon Sep 17 00:00:00 2001
From: Arun-kushwaha007 <arunkush11821@gmail.com>
Date: Thu, 16 Apr 2026 22:25:02 +0530
Subject: [PATCH 12/14] ci(config): add supabase database url and direct url
 environment variables

- Updated .env.example and added apps/backend/.env.example with new variables
- Modified CI workflow to include SUPABASE_DATABASE_URL and DIRECT_URL for database migration and testing jobs
---
 .env.example              |  1 +
 .github/workflows/ci.yml  |  4 ++++
 apps/backend/.env.example | 15 +++++++++++++++
 3 files changed, 20 insertions(+)
 create mode 100644 apps/backend/.env.example

diff --git a/.env.example b/.env.example
index d6e32c8..b4f1eda 100644
--- a/.env.example
+++ b/.env.example
@@ -1,4 +1,5 @@
 SUPABASE_DATABASE_URL=
+DIRECT_URL=
 JWT_SECRET=
 JWT_REFRESH_SECRET=
 GOOGLE_CLIENT_ID=
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 1fce631..6b9f283 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -65,6 +65,8 @@ jobs:
       - name: Migrate Database
         env:
           DATABASE_URL: postgresql://postgres:postgres@localhost:5432/fairshare?schema=public
+          SUPABASE_DATABASE_URL: postgresql://postgres:postgres@localhost:5432/fairshare?schema=public
+          DIRECT_URL: postgresql://postgres:postgres@localhost:5432/fairshare?schema=public
           JWT_SECRET: supersecret
           STRIPE_SECRET_KEY: test_key
         run: pnpm --filter backend exec prisma db push
@@ -76,6 +78,8 @@ jobs:
         env:
           CI: true
           DATABASE_URL: postgresql://postgres:postgres@localhost:5432/fairshare?schema=public
+          SUPABASE_DATABASE_URL: postgresql://postgres:postgres@localhost:5432/fairshare?schema=public
+          DIRECT_URL: postgresql://postgres:postgres@localhost:5432/fairshare?schema=public
           JWT_SECRET: supersecret
           STRIPE_SECRET_KEY: test_key
           NEXT_PUBLIC_APP_URL: http://localhost:3000
diff --git a/apps/backend/.env.example b/apps/backend/.env.example
new file mode 100644
index 0000000..14e27eb
--- /dev/null
+++ b/apps/backend/.env.example
@@ -0,0 +1,15 @@
+SUPABASE_DATABASE_URL=postgresql://postgres:postgres@localhost:5432/fairshare
+DIRECT_URL=postgresql://postgres:postgres@localhost:5432/fairshare
+JWT_SECRET=fairshare_dev_jwt_secret_change_me
+JWT_REFRESH_SECRET=fairshare_dev_jwt_refresh_secret_change_me
+GOOGLE_CLIENT_ID=fairshare_dev_google_client_id
+GOOGLE_CLIENT_SECRET=fairshare_dev_google_client_secret
+REDIS_URL=redis://127.0.0.1:6380
+AWS_ACCESS_KEY_ID=fairshare_dev_aws_access_key
+AWS_SECRET_ACCESS_KEY=fairshare_dev_aws_secret
+AWS_REGION=ap-south-1
+S3_BUCKET=fairshare-dev-receipts
+STRIPE_SECRET_KEY=sk_test_fairshare_dummy_key
+STRIPE_WEBHOOK_SECRET=whsec_fairshare_dummy_webhook_secret
+CORS_ORIGINS=http://localhost:3000,http://localhost:8081,exp://*:*
+SENTRY_DSN=

From c5fcedda2759b601283d9b02a689b2ea8c76a7a5 Mon Sep 17 00:00:00 2001
From: Arun-kushwaha007 <arunkush11821@gmail.com>
Date: Thu, 16 Apr 2026 22:45:19 +0530
Subject: [PATCH 13/14] ci(e2e): expand environment variables for end-to-end
 testing

- Added JWT_REFRESH_SECRET, GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, REDIS_URL, AWS_REGION, and S3_BUCKET
- Updated STRIPE_SECRET_KEY to use test key format for consistency in CI pipeline
---
 .github/workflows/ci.yml | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 6b9f283..7b4f52c 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -81,7 +81,13 @@ jobs:
           SUPABASE_DATABASE_URL: postgresql://postgres:postgres@localhost:5432/fairshare?schema=public
           DIRECT_URL: postgresql://postgres:postgres@localhost:5432/fairshare?schema=public
           JWT_SECRET: supersecret
-          STRIPE_SECRET_KEY: test_key
+          JWT_REFRESH_SECRET: refreshsecret
+          GOOGLE_CLIENT_ID: googleid
+          GOOGLE_CLIENT_SECRET: googlesecret
+          REDIS_URL: redis://localhost:6380
+          AWS_REGION: ap-south-1
+          S3_BUCKET: fairshare-test-bucket
+          STRIPE_SECRET_KEY: sk_test_key
           NEXT_PUBLIC_APP_URL: http://localhost:3000
         run: pnpm run e2e
 

From 868e454c150130dd5f22b997793d09deb819bcc6 Mon Sep 17 00:00:00 2001
From: Arun-kushwaha007 <arunkush11821@gmail.com>
Date: Thu, 16 Apr 2026 23:35:35 +0530
Subject: [PATCH 14/14] ci(e2e): include supabase environment variables in
 testing pipeline

- Added NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY, and NEXT_PUBLIC_API_URL to CI e2e job
- Updated .env.example with NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY placeholders for local development consistency
---
 .github/workflows/ci.yml | 3 +++
 apps/web/.env.example    | 2 ++
 2 files changed, 5 insertions(+)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 7b4f52c..7d84978 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -89,6 +89,9 @@ jobs:
           S3_BUCKET: fairshare-test-bucket
           STRIPE_SECRET_KEY: sk_test_key
           NEXT_PUBLIC_APP_URL: http://localhost:3000
+          NEXT_PUBLIC_SUPABASE_URL: http://localhost:54321
+          NEXT_PUBLIC_SUPABASE_ANON_KEY: dummy-anon-key
+          NEXT_PUBLIC_API_URL: http://localhost:3001/api/v1
         run: pnpm run e2e
 
       - name: Upload coverage
diff --git a/apps/web/.env.example b/apps/web/.env.example
index 73e8d73..2ec4313 100644
--- a/apps/web/.env.example
+++ b/apps/web/.env.example
@@ -2,3 +2,5 @@ FAIRSHARE_API_URL=http://localhost:3001/api/v1
 NEXT_PUBLIC_API_URL=http://localhost:3001/api/v1
 FAIRSHARE_S3_BASE_URL=
 NEXT_PUBLIC_S3_BASE_URL=
+NEXT_PUBLIC_SUPABASE_URL=
+NEXT_PUBLIC_SUPABASE_ANON_KEY=