feat(web): finalize dashboard group list and details pages with neo-brutalist style

Author: Arun-kushwaha007

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

@@ -28,33 +28,38 @@ export default async function GroupDetailPage({ params }: GroupDetailPageProps)
 
     return (
       <DashboardLayout>
-        <header className="mb-8">
+        <header className="mb-12 border-b-4 border-white pb-8">
           <div className="flex items-center justify-between">
-            <h1 className="text-3xl font-bold text-text-primary">{group.name}</h1>
-            <div className="rounded-full bg-brand/10 px-4 py-1.5 text-xs font-semibold uppercase tracking-wider text-brand">
-              {group.currency}
+            <div className="space-y-1">
+              <h1 className="text-4xl font-black uppercase italic tracking-tighter text-white">{group.name}</h1>
+              <div className="flex items-center gap-2">
+                <div className="h-1.5 w-1.5 rounded-full bg-cyan-400 animate-pulse" />
+                <p className="text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">
+                  SYNC_STATUS // LIVE // {groupId.slice(0, 8)}
+                </p>
+              </div>
+            </div>
+            <div className="neo-border border-2 border-white bg-white px-6 py-2 text-sm font-black uppercase tracking-tighter text-black shadow-[4px_4px_0px_0px_#22d3ee]">
+              VAL: {group.currency}
             </div>
           </div>
-          <p className="mt-2 text-text-secondary">
-            Manage members and track shared expenses.
-          </p>
         </header>
 
-        <div className="grid gap-6 lg:grid-cols-[1fr_320px]">
-          <div className="space-y-6">
+        <div className="grid gap-12 lg:grid-cols-[1fr_350px]">
+          <div className="space-y-12">
             <ExpenseTable expenses={expenses.items} />
           </div>
 
-          <aside className="space-y-6">
+          <aside className="space-y-12">
             <MemberList groupId={groupId} members={members} />
 
-            <div className="rounded-2xl border border-border bg-card p-5 shadow-glass backdrop-blur-glass">
-              <h3 className="text-sm font-semibold text-text-primary">Quick Actions</h3>
-              <div className="mt-4 grid gap-2">
-                <button className="w-full rounded-xl bg-brand py-2.5 text-sm font-semibold text-white transition-opacity hover:opacity-90">
-                  Add Expense
+            <div className="neo-border bg-zinc-900 p-8 shadow-[6px_6px_0px_0px_#facc15]">
+              <h3 className="text-2xl font-black uppercase italic tracking-tighter text-white mb-8">Override Panel</h3>
+              <div className="grid gap-4">
+                <button className="neo-pop-hover bg-white p-4 font-black uppercase text-black shadow-[4px_4px_0px_0px_#facc15] hover:bg-zinc-100 transition-all text-sm tracking-tighter">
+                  + Record Expense
                 </button>
-                <button className="w-full rounded-xl border border-border bg-surface/10 py-2.5 text-sm font-semibold text-text-primary transition-colors hover:bg-surface/20">
+                <button className="neo-pop-hover border-2 border-white bg-black p-4 font-black uppercase text-white shadow-[4px_4px_0px_0px_#a855f7] hover:bg-zinc-900 transition-all text-sm tracking-tighter">
                   Invite Member
                 </button>
               </div>
@@ -63,6 +68,7 @@ export default async function GroupDetailPage({ params }: GroupDetailPageProps)
         </div>
       </DashboardLayout>
     );
+
   } catch (error) {
     console.error('Failed to fetch group details:', error);
     return notFound();

apps/web/app/dashboard/groups/page.tsx

@@ -13,11 +13,12 @@ export default async function DashboardGroupsPage() {
 
   return (
     <DashboardLayout>
-      <div className="mb-6 flex items-center justify-between">
-        <h1 className="text-2xl font-bold text-text-primary">Your Groups</h1>
+      <div className="mb-12 border-b-4 border-white pb-6">
+        <h1 className="text-4xl font-black uppercase italic tracking-tighter text-white">Squad Directory</h1>
+        <p className="text-[10px] font-mono font-bold uppercase tracking-widest text-zinc-500 mt-2">ACCESSING_ALL_ACTIVE_NODES</p>
       </div>
 
-      <section className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      <section className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
         {groups.map((group) => (
           <GroupCard
             key={group.id}
@@ -29,9 +30,9 @@ export default async function DashboardGroupsPage() {
         ))}
 
         {groups.length === 0 && (
-          <div className="col-span-full rounded-2xl border border-border bg-card p-10 text-center text-text-secondary shadow-glass backdrop-blur-glass">
-            <p className="text-lg font-medium text-text-primary">No groups yet</p>
-            <p className="mt-1">Create or join a group to start sharing expenses.</p>
+          <div className="col-span-full neo-border bg-zinc-900 p-20 text-center">
+            <p className="text-2xl font-black uppercase tracking-tighter text-zinc-500 mb-2">NO_GROUPS_INITIALIZED</p>
+            <p className="text-sm font-mono text-zinc-600">Create or join a squad to synchronize records.</p>
           </div>
         )}
       </section>