-
-
-
-
-
- {children}
-
+
);
-}
+}
\ No newline at end of file
diff --git a/contributors/AmanSharma264/client/app/dashboard/subscriptions/page.tsx b/contributors/AmanSharma264/client/app/dashboard/subscriptions/page.tsx
new file mode 100644
index 0000000..823f362
--- /dev/null
+++ b/contributors/AmanSharma264/client/app/dashboard/subscriptions/page.tsx
@@ -0,0 +1,294 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import {
+ Search,
+ Menu,
+ X,
+ CreditCard,
+ Bell,
+ Settings,
+ BarChart3,
+ Home,
+ AlertCircle,
+ Calendar,
+ TrendingUp,
+} from "lucide-react";
+
+const SubscriptionDashboard = () => {
+ const [subscriptions, setSubscriptions] = useState
([]);
+ const [loading, setLoading] = useState(true);
+ const [searchTerm, setSearchTerm] = useState("");
+ const [filterStatus, setFilterStatus] = useState("all");
+ const [filterBillingCycle, setFilterBillingCycle] = useState("all");
+ const [sortBy, setSortBy] = useState("renewalDate");
+ const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+ const [activeNav, setActiveNav] = useState("subscriptions");
+
+ useEffect(() => {
+ const fetchSubscriptions = async () => {
+ try {
+ const res = await fetch("http://localhost:5000/api/subscriptions");
+ const json = await res.json();
+
+ const normalized = (json.data || []).map((sub: any) => ({
+ id: sub._id,
+ name: sub.name,
+ amount: sub.price,
+ billingCycle: sub.billingCycle,
+ category: sub.category,
+ renewalDate: sub.renewalDate,
+ trial: sub.isTrial,
+ status: sub.isTrial ? "trial" : "active",
+ source: "manual",
+ }));
+
+ setSubscriptions(normalized);
+ } catch (err) {
+ console.error("Fetch error:", err);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchSubscriptions();
+ }, []);
+
+ // 🔹 DAYS UNTIL RENEWAL
+ const getDaysUntilRenewal = (renewalDate: string) => {
+ const today = new Date();
+ const renewal = new Date(renewalDate);
+ return Math.ceil(
+ (renewal.getTime() - today.getTime()) / (1000 * 60 * 60 * 24)
+ );
+ };
+
+ // 🔹 FILTER + SORT (UNCHANGED)
+ const filteredSubscriptions = subscriptions
+ .filter((sub) => {
+ const matchesSearch =
+ sub.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+ sub.category.toLowerCase().includes(searchTerm.toLowerCase());
+
+ const matchesStatus =
+ filterStatus === "all" || sub.status === filterStatus;
+
+ const matchesBilling =
+ filterBillingCycle === "all" ||
+ sub.billingCycle === filterBillingCycle;
+
+ return matchesSearch && matchesStatus && matchesBilling;
+ })
+ .sort((a, b) => {
+ if (sortBy === "renewalDate") {
+ return (
+ new Date(a.renewalDate).getTime() -
+ new Date(b.renewalDate).getTime()
+ );
+ }
+ if (sortBy === "amount") {
+ return b.amount - a.amount;
+ }
+ return 0;
+ });
+
+ // 🔹 STATS
+ const urgentRenewals = subscriptions.filter((sub) => {
+ const days = getDaysUntilRenewal(sub.renewalDate);
+ return days <= 3 && days >= 0;
+ }).length;
+
+ const monthlySpending = subscriptions.reduce((sum, sub) => {
+ return sum + (sub.billingCycle === "monthly" ? sub.amount : sub.amount / 12);
+ }, 0);
+
+ // 🔹 CARD COMPONENT
+ const SubscriptionCard = ({ subscription }: any) => {
+ const daysUntil = getDaysUntilRenewal(subscription.renewalDate);
+ const isUrgent = daysUntil <= 3 && daysUntil >= 0;
+
+ return (
+
+
+
+
+ {subscription.name}
+
+
{subscription.category}
+
+
+
+ {subscription.trial && (
+
+ TRIAL
+
+ )}
+
+ {subscription.status.toUpperCase()}
+
+
+
+
+
+
+
Amount
+
+ ₹{subscription.amount}
+
+
+
+
Billing Cycle
+
{subscription.billingCycle}
+
+
+
+
+
+
+
Renewal Date
+
+ {new Date(subscription.renewalDate).toLocaleDateString()}
+
+
+ {isUrgent && (
+
+ )}
+
+
+
+
+ Source: {subscription.source}
+
+
+
+
+ {/* 🔹 STATS */}
+
+
+
Total Subscriptions
+
{subscriptions.length}
+
+
+
Monthly Spending
+
+ ₹{monthlySpending.toFixed(2)}
+
+
+
+
Urgent Renewals
+
{urgentRenewals}
+
+
+
+ {/* 🔹 FILTERS */}
+
+ setSearchTerm(e.target.value)}
+ />
+
+
+
+
+
+
+
+
+ {/* 🔹 LIST */}
+ {loading ? (
+
+) : filteredSubscriptions.length === 0 ? (
+
+
+
+ No subscriptions added
+
+
+ {searchTerm ||
+ filterStatus !== "all" ||
+ filterBillingCycle !== "all"
+ ? "Try adjusting your search or filters"
+ : "Start by adding your first subscription"}
+
+
+
+
+) : (
+
+ {filteredSubscriptions.map((sub) => (
+
+ ))}
+
+)}
+
+