Subscription Listing Ui + Navbar upgradation

contributors/AmanSharma264/client/app/api/subscriptions/route.ts

@@ -0,0 +1,73 @@
+import { NextResponse } from 'next/server';
+
+// GET /api/subscriptions
+export async function GET() {
+  try {
+    // Mock data - replace with your actual database query
+    const subscriptions = [
+      {
+        id: '1',
+        name: 'Netflix Premium',
+        amount: 19.99,
+        billingCycle: 'monthly',
+        category: 'Entertainment',
+        renewalDate: '2026-01-09',
+        trial: false,
+        source: 'stripe',
+        status: 'active'
+      },
+      {
+        id: '2',
+        name: 'Spotify Family',
+        amount: 16.99,
+        billingCycle: 'monthly',
+        category: 'Music',
+        renewalDate: '2026-01-12',
+        trial: false,
+        source: 'paypal',
+        status: 'active'
+      },
+      {
+        id: '3',
+        name: 'Adobe Creative Cloud',
+        amount: 599.88,
+        billingCycle: 'yearly',
+        category: 'Software',
+        renewalDate: '2026-03-15',
+        trial: false,
+        source: 'stripe',
+        status: 'active'
+      },
+      {
+        id: '4',
+        name: 'GitHub Pro',
+        amount: 4.00,
+        billingCycle: 'monthly',
+        category: 'Development',
+        renewalDate: '2026-01-20',
+        trial: true,
+        source: 'stripe',
+        status: 'trial'
+      },
+      {
+        id: '5',
+        name: 'Figma Professional',
+        amount: 12.00,
+        billingCycle: 'monthly',
+        category: 'Design',
+        renewalDate: '2026-02-01',
+        trial: false,
+        source: 'stripe',
+        status: 'active'
+      }
+    ];
+
+    return NextResponse.json({ subscriptions });
+  } catch (error) {
+    console.error('Error fetching subscriptions:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch subscriptions' },
+      { status: 500 }
+    );
+  }
+}

contributors/AmanSharma264/client/app/components/sidebar/Sidebar.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import {
+  LayoutDashboard,
+  CreditCard,
+  TrendingUp,
+  Bell,
+  Settings,
+  User,
+} from "lucide-react";
+
+const navItems = [
+  { name: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
+  { name: "Subscriptions", href: "/dashboard/subscriptions", icon: CreditCard },
+  { name: "Analytics", href: "/dashboard/analytics", icon: TrendingUp },
+  { name: "Notifications", href: "/dashboard/notifications", icon: Bell },
+  { name: "Settings", href: "/dashboard/settings", icon: Settings },
+];
+
+export default function Sidebar() {
+  const pathname = usePathname();
+
+  return (
+    <aside className="w-72 bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900
+      text-white p-6 hidden md:flex flex-col shadow-2xl border-r border-slate-700/50">
+
+      {/* LOGO */}
+      <div className="mb-8">
+        <div className="flex items-center gap-3 mb-1">
+          <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600
+            rounded-xl flex items-center justify-center shadow-lg">
+            <CreditCard className="w-6 h-6 text-white" />
+          </div>
+
+          <h1 className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400
+            bg-clip-text text-transparent">
+            Subsentry
+          </h1>
+        </div>
+
+        <p className="text-xs text-slate-400 ml-13">
+          Manage your subscriptions
+        </p>
+      </div>
+
+      {/* NAVIGATION */}
+      <nav className="space-y-2 flex-1">
+        {navItems.map((item) => {
+          const active = pathname === item.href;
+          const Icon = item.icon;
+
+          return (
+            <Link
+              key={item.name}
+              href={item.href}
+              className={`flex items-center gap-3 px-4 py-3 rounded-xl
+                transition-all duration-200 group
+                ${
+                  active
+                    ? "bg-gradient-to-r from-blue-600 to-blue-500 text-white shadow-lg shadow-blue-500/30"
+                    : "text-slate-300 hover:bg-slate-800/50 hover:text-white"
+                }`}
+            >
+              <Icon
+                className={`w-5 h-5 transition-transform duration-200
+                  ${active ? "scale-110" : "group-hover:scale-110"}`}
+              />
+
+              <span className="font-medium">{item.name}</span>
+
+              {active && (
+                <span className="ml-auto w-2 h-2 bg-white rounded-full animate-pulse" />
+              )}
+            </Link>
+          );
+        })}
+      </nav>
+
+      {/* USER PROFILE */}
+      <div className="mt-auto pt-6 border-t border-slate-700/50">
+        <div className="flex items-center gap-3 p-3 rounded-xl
+          bg-slate-800/50 hover:bg-slate-800 transition cursor-pointer group">
+
+          <div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500
+            rounded-full flex items-center justify-center">
+            <User className="w-5 h-5 text-white" />
+          </div>
+
+          <div className="flex-1">
+            <p className="text-sm font-medium text-white">Aman Sharma</p>
+            <p className="text-xs text-slate-400">Premium Plan</p>
+          </div>
+
+          <Settings
+            className="w-4 h-4 text-slate-400 group-hover:text-white
+              group-hover:rotate-90 transition-all duration-300"
+          />
+        </div>
+      </div>
+    </aside>
+  );
+}

contributors/AmanSharma264/client/app/components/subscriptions/EmptyState.tsx

@@ -0,0 +1,8 @@
+export default function EmptyState() {
+  return (
+    <div className="text-center py-20 text-gray-500">
+      <h2 className="text-xl font-semibold">No subscriptions found</h2>
+      <p>Connect Gmail or add subscriptions manually.</p>
+    </div>
+  );
+}

contributors/AmanSharma264/client/app/components/subscriptions/SubscriptionCard.tsx

@@ -0,0 +1,67 @@
+type Subscription = {
+  id: string;
+  name: string;
+  amount: number;
+  billingCycle: string;
+  category: string;
+  renewalDate: string;
+  status: string;
+  trial: boolean;
+  source: string;
+};
+
+function isUrgent(date: string) {
+  const today = new Date();
+  const renewal = new Date(date);
+  const diff =
+    (renewal.getTime() - today.getTime()) / (1000 * 60 * 60 * 24);
+  return diff <= 3;
+}
+
+export default function SubscriptionCard({ sub }: { sub: Subscription }) {
+  const urgent = isUrgent(sub.renewalDate);
+
+  return (
+    <div
+      className={`border rounded-lg p-4 transition hover:shadow-md ${
+        urgent ? "border-red-500 bg-red-50" : "bg-white"
+      }`}
+    >
+      <div className="flex justify-between">
+        <div>
+          <h3 className="font-semibold text-lg">{sub.name}</h3>
+          <p className="text-sm text-gray-500">{sub.category}</p>
+        </div>
+
+        <div className="text-right">
+          <p className="font-bold">₹{sub.amount}</p>
+          <p className="text-sm text-gray-500">{sub.billingCycle}</p>
+        </div>
+      </div>
+
+      <div className="flex flex-wrap gap-2 mt-3 text-sm">
+        <span className="px-2 py-1 bg-gray-200 rounded">
+          Renews: {new Date(sub.renewalDate).toDateString()}
+        </span>
+
+        {sub.trial && (
+          <span className="px-2 py-1 bg-yellow-200 rounded">Trial</span>
+        )}
+
+        <span className="px-2 py-1 bg-green-200 rounded">
+          {sub.status}
+        </span>
+
+        <span className="px-2 py-1 bg-blue-200 rounded">
+          {sub.source}
+        </span>
+
+        {urgent && (
+          <span className="px-2 py-1 bg-red-600 text-white rounded">
+            ⚠ Renews Soon
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

contributors/AmanSharma264/client/app/components/subscriptions/SubscriptionFilters.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+export default function Filters({
+  status,
+  billing,
+  setStatus,
+  setBilling,
+}: any) {
+  return (
+    <div className="flex gap-4 mb-4 flex-wrap">
+      <select
+        className="border p-2 rounded"
+        value={status}
+        onChange={(e) => setStatus(e.target.value)}
+      >
+        <option value="">All Status</option>
+        <option value="active">Active</option>
+        <option value="cancelled">Cancelled</option>
+      </select>
+
+      <select
+        className="border p-2 rounded"
+        value={billing}
+        onChange={(e) => setBilling(e.target.value)}
+      >
+        <option value="">All Billing</option>
+        <option value="monthly">Monthly</option>
+        <option value="yearly">Yearly</option>
+      </select>
+    </div>
+  );
+}

contributors/AmanSharma264/client/app/dashboard/layout.tsx

@@ -1,33 +1,16 @@
+import Sidebar from "@/app/components/sidebar/Sidebar";
+
 export default function DashboardLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
-    <div className="flex h-screen overflow-hidden">
-
-      <aside className="w-64 bg-gradient-to-b from-slate-900 to-slate-800 text-white p-6 hidden md:block">
-        <h2 className="text-xl font-bold mb-6">SubSentry</h2>
-
-        <nav className="space-y-3 text-sm">
-          <p className="cursor-pointer">Dashboard</p>
-          <p className="cursor-pointer">Subscriptions</p>
-          <p className="cursor-pointer">Settings</p>
-        </nav>
-      </aside>
-
-
-      <div className="flex flex-col flex-1">
-
-        <header className="h-14 flex items-center border-b px-6">
-          <h1 className="font-semibold text-lg">Dashboard</h1>
-        </header>
-
-
-        <main className="flex-1 p-6 overflow-y-auto">
-          {children}
-        </main>
+    <div className="flex min-h-screen bg-gray-900">
+      <Sidebar />
+      <div className="flex-1 bg-gray-900 overflow-auto">
+        {children}
       </div>
     </div>
   );
-}
+}