From b6c9d71107f9f8b37bdcb1ac41c0001cba8b70e3 Mon Sep 17 00:00:00 2001
From: Shivangi Gupta <shivi14112007@gmail.com>
Date: Tue, 7 Jul 2026 15:21:38 +0530
Subject: [PATCH 1/2] feat(analytics): add stale inventory and profit forecast
 dashboard

---
 app/blocks/__global/app-sidebar.tsx           |  53 +++++----
 .../analytics/ProfitForecast.module.css       |  65 +++++++++++
 app/blocks/analytics/ProfitForecast.tsx       |  53 +++++++++
 .../analytics/StaleInventoryCard.module.css   | 109 +++++++++++++++++
 app/blocks/analytics/StaleInventoryCard.tsx   |  47 ++++++++
 app/routes.ts                                 |   9 +-
 app/routes/analytics.module.css               |   5 +
 app/routes/analytics.tsx                      | 110 ++++++++++++++++++
 8 files changed, 427 insertions(+), 24 deletions(-)
 create mode 100644 app/blocks/analytics/ProfitForecast.module.css
 create mode 100644 app/blocks/analytics/ProfitForecast.tsx
 create mode 100644 app/blocks/analytics/StaleInventoryCard.module.css
 create mode 100644 app/blocks/analytics/StaleInventoryCard.tsx
 create mode 100644 app/routes/analytics.module.css
 create mode 100644 app/routes/analytics.tsx

diff --git a/app/blocks/__global/app-sidebar.tsx b/app/blocks/__global/app-sidebar.tsx
index b707289..c06b563 100644
--- a/app/blocks/__global/app-sidebar.tsx
+++ b/app/blocks/__global/app-sidebar.tsx
@@ -1,13 +1,14 @@
 import { Link, NavLink, useSubmit } from "react-router";
-import { 
-  IconDashboard, 
-  IconBox, 
-  IconChartLine, 
-  IconReceipt, 
-  IconWallet, 
-  IconBrain, 
+import {
+  IconDashboard,
+  IconBox,
+  IconChartLine,
+  IconReceipt,
+  IconWallet,
+  IconBrain,
   IconSettings,
-  IconLogout
+  IconLogout,
+  IconTrendingUp,
 } from "@tabler/icons-react";
 import styles from "./app-sidebar.module.css";
 
@@ -33,9 +34,9 @@ export function AppSidebar({ user }: Props) {
     { to: "/app/sales", label: "Sales Log", icon: <IconReceipt size={20} /> },
     { to: "/app/expenses", label: "Expenses", icon: <IconWallet size={20} /> },
     { to: "/app/ai-insights", label: "AI Insights", icon: <IconBrain size={20} /> },
+    { to: "/app/analytics", label: "Analytics", icon: <IconTrendingUp size={20} /> },
     { to: "/app/settings", label: "Settings", icon: <IconSettings size={20} /> },
   ];
-
   return (
     <aside className={styles.sidebar}>
       <div className={styles.header}>
@@ -49,7 +50,7 @@ export function AppSidebar({ user }: Props) {
           <NavLink
             key={link.to}
             to={link.to}
-            className={({ isActive }) => 
+            className={({ isActive }) =>
               [styles.navItem, isActive ? styles.navItemActive : ""].filter(Boolean).join(" ")
             }
           >
@@ -69,19 +70,31 @@ export function AppSidebar({ user }: Props) {
             <span className={styles.userPlan}>{user.plan || "FREE PLAN"}</span>
           </div>
         </div>
-        <div style={{ display: 'flex', gap: '8px' }}>
-          <button 
+        <div style={{ display: "flex", gap: "8px" }}>
+          <button
             onClick={() => {
-              const current = document.documentElement.getAttribute('data-theme') || 'dark';
-              const next = current === 'dark' ? 'light' : 'dark';
-              document.documentElement.setAttribute('data-theme', next);
-              localStorage.setItem('fliptrack-theme', next);
-            }} 
-            className={styles.logoutBtn} 
-            style={{ flex: 1, justifyContent: 'center' }}
+              const current = document.documentElement.getAttribute("data-theme") || "dark";
+              const next = current === "dark" ? "light" : "dark";
+              document.documentElement.setAttribute("data-theme", next);
+              localStorage.setItem("fliptrack-theme", next);
+            }}
+            className={styles.logoutBtn}
+            style={{ flex: 1, justifyContent: "center" }}
             title="Toggle Theme"
           >
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+            </svg>
           </button>
           <button onClick={handleLogout} className={styles.logoutBtn} style={{ flex: 3 }}>
             <IconLogout size={16} />
diff --git a/app/blocks/analytics/ProfitForecast.module.css b/app/blocks/analytics/ProfitForecast.module.css
new file mode 100644
index 0000000..0ecfc88
--- /dev/null
+++ b/app/blocks/analytics/ProfitForecast.module.css
@@ -0,0 +1,65 @@
+.card {
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-4);
+}
+
+.title {
+  font-size: 1.1rem;
+  margin-bottom: var(--space-4);
+  color: var(--color-text);
+}
+
+.row {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-4);
+}
+
+.statCard {
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  padding: var(--space-4);
+}
+
+.label {
+  font-size: 11px;
+  color: var(--color-text-subtle);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: var(--space-2);
+}
+
+.value {
+  font-family: var(--family-mono);
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: var(--color-text);
+}
+
+.sub {
+  font-size: 12px;
+  color: var(--color-text-subtle);
+  margin-top: var(--space-1);
+}
+
+.positive {
+  color: var(--color-success);
+}
+
+.disclaimer {
+  margin-top: var(--space-4);
+  font-size: 12px;
+  color: var(--color-warning);
+  background: var(--color-warning-bg);
+  border-radius: var(--radius-sm);
+  padding: var(--space-2) var(--space-3);
+}
+
+@media (max-width: 768px) {
+  .row {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/app/blocks/analytics/ProfitForecast.tsx b/app/blocks/analytics/ProfitForecast.tsx
new file mode 100644
index 0000000..40cc7da
--- /dev/null
+++ b/app/blocks/analytics/ProfitForecast.tsx
@@ -0,0 +1,53 @@
+import styles from "./ProfitForecast.module.css";
+
+interface Props {
+  className?: string;
+  forecast?: {
+    totalInventoryCost: number;
+    totalEstimatedMarketValue: number;
+    projectedProfit: number;
+    projectedMarginPct: number;
+    itemsMissingMarketData: number;
+  };
+}
+
+export function ProfitForecast({ className, forecast }: Props) {
+  if (!forecast) return null;
+  const isProfit = forecast.projectedProfit >= 0;
+
+  const cards = [
+    { label: "Inventory Cost", value: `$${forecast.totalInventoryCost.toFixed(2)}`, sub: "All in-stock items" },
+    {
+      label: "Est. Market Value",
+      value: `$${forecast.totalEstimatedMarketValue.toFixed(2)}`,
+      sub: "Based on latest price data",
+    },
+    {
+      label: "Projected Profit",
+      value: `${isProfit ? "+" : ""}$${forecast.projectedProfit.toFixed(2)} (${forecast.projectedMarginPct.toFixed(1)}%)`,
+      sub: "If sold at current market value",
+      positive: isProfit,
+    },
+  ];
+
+  return (
+    <div className={[styles.card, className].filter(Boolean).join(" ")}>
+      <h2 className={styles.title}>Profit Forecast</h2>
+      <div className={styles.row}>
+        {cards.map((c) => (
+          <div key={c.label} className={styles.statCard}>
+            <div className={styles.label}>{c.label}</div>
+            <div className={[styles.value, c.positive ? styles.positive : ""].join(" ")}>{c.value}</div>
+            <div className={styles.sub}>{c.sub}</div>
+          </div>
+        ))}
+      </div>
+      {forecast.itemsMissingMarketData > 0 && (
+        <div className={styles.disclaimer}>
+          {forecast.itemsMissingMarketData} item(s) had no scraped market price yet — purchase or asking price was used
+          as a placeholder.
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/app/blocks/analytics/StaleInventoryCard.module.css b/app/blocks/analytics/StaleInventoryCard.module.css
new file mode 100644
index 0000000..eb64a74
--- /dev/null
+++ b/app/blocks/analytics/StaleInventoryCard.module.css
@@ -0,0 +1,109 @@
+.card {
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-4);
+}
+
+.headerRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-1);
+}
+
+.title {
+  font-size: 1.1rem;
+  color: var(--color-text);
+}
+
+.badge {
+  font-size: 11px;
+  font-family: var(--family-mono);
+  color: var(--color-warning);
+  background: var(--color-warning-bg);
+  border-radius: var(--radius-full);
+  padding: var(--space-1) var(--space-3);
+}
+
+.sub {
+  font-size: 12px;
+  color: var(--color-text-subtle);
+  margin-bottom: var(--space-4);
+}
+
+.empty {
+  font-size: 13px;
+  color: var(--color-text-muted);
+  padding: var(--space-6) 0;
+  text-align: center;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.row {
+  display: grid;
+  grid-template-columns: 1fr 120px 80px;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-2) 0;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.row:last-child {
+  border-bottom: none;
+}
+
+.rowInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.itemName {
+  font-size: 13px;
+  color: var(--color-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.itemMeta {
+  font-size: 11px;
+  color: var(--color-text-subtle);
+}
+
+.progressTrack {
+  height: 6px;
+  background: var(--color-bg-elevated);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+}
+
+.progressFill {
+  height: 100%;
+  background: var(--color-warning);
+  border-radius: var(--radius-full);
+}
+
+.itemValue {
+  font-family: var(--family-mono);
+  font-size: 13px;
+  text-align: right;
+  color: var(--color-text);
+}
+
+@media (max-width: 768px) {
+  .row {
+    grid-template-columns: 1fr;
+    gap: var(--space-2);
+  }
+  .itemValue {
+    text-align: left;
+  }
+}
diff --git a/app/blocks/analytics/StaleInventoryCard.tsx b/app/blocks/analytics/StaleInventoryCard.tsx
new file mode 100644
index 0000000..199d223
--- /dev/null
+++ b/app/blocks/analytics/StaleInventoryCard.tsx
@@ -0,0 +1,47 @@
+import styles from "./StaleInventoryCard.module.css";
+
+interface Props {
+  className?: string;
+  items?: any[];
+}
+
+export function StaleInventoryCard({ className, items = [] }: Props) {
+  const totalTiedUpCapital = items.reduce((acc, i) => acc + Number(i.purchasePrice), 0);
+  const maxDays = Math.max(...items.map((i) => i.daysInStock), 1);
+
+  return (
+    <div className={[styles.card, className].filter(Boolean).join(" ")}>
+      <div className={styles.headerRow}>
+        <h2 className={styles.title}>Stale Inventory</h2>
+        <span className={styles.badge}>{items.length} items &bull; 60+ days</span>
+      </div>
+      <div className={styles.sub}>${totalTiedUpCapital.toFixed(2)} in capital tied up</div>
+
+      {items.length === 0 ? (
+        <div className={styles.empty}>Nothing stale — everything is moving.</div>
+      ) : (
+        <div className={styles.list}>
+          {items.slice(0, 8).map((item) => (
+            <div key={item.id} className={styles.row}>
+              <div className={styles.rowInfo}>
+                <span className={styles.itemName}>
+                  {item.name} {item.size ? `(${item.size})` : ""}
+                </span>
+                <span className={styles.itemMeta}>
+                  {item.sku} &bull; {item.daysInStock} days in stock
+                </span>
+              </div>
+              <div className={styles.progressTrack}>
+                <div
+                  className={styles.progressFill}
+                  style={{ width: `${Math.min((item.daysInStock / maxDays) * 100, 100)}%` }}
+                />
+              </div>
+              <span className={styles.itemValue}>${Number(item.purchasePrice).toFixed(2)}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/app/routes.ts b/app/routes.ts
index da0437d..d8468cf 100644
--- a/app/routes.ts
+++ b/app/routes.ts
@@ -12,7 +12,7 @@ export default [
   route("/changelog", "routes/changelog-page.tsx"),
   route("/privacy", "routes/privacy-policy.tsx"),
   route("/terms", "routes/terms-of-service.tsx"),
-  
+
   ...prefix("/app", [
     layout("routes/app-layout.tsx", [
       route("dashboard", "routes/dashboard.tsx"),
@@ -20,6 +20,7 @@ export default [
       route("inventory/:id", "routes/inventory-item-detail.tsx"),
       route("market-prices", "routes/market-prices.tsx"),
       route("sales", "routes/sales-log.tsx"),
+      route("analytics", "routes/analytics.tsx"),
       route("expenses", "routes/expenses-tracker.tsx"),
       route("income-statement", "routes/income-statement.tsx"),
       route("alerts", "routes/price-alerts.tsx"),
@@ -43,11 +44,11 @@ export default [
   route("/api/ai/ocr", "routes/api.ai.ocr.ts"),
   route("/api/insights", "routes/api.insights.ts"),
   route("/api/export/tax", "routes/api.export.tax.ts"),
-  
+
   // 🌟 Kept from main branch merge (Placed safely above dynamic route)
   route("/api/inventory/search", "routes/api.inventory.search.ts"),
   route("/api/integrations", "routes/api.integrations.ts"),
-  
+
   // 🌟 Your dynamic showroom route (Must stay at the very end as a catch-all)
   route("/:username", "routes/$username.tsx"),
-] satisfies RouteConfig;
\ No newline at end of file
+] satisfies RouteConfig;
diff --git a/app/routes/analytics.module.css b/app/routes/analytics.module.css
new file mode 100644
index 0000000..7a09d4e
--- /dev/null
+++ b/app/routes/analytics.module.css
@@ -0,0 +1,5 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
diff --git a/app/routes/analytics.tsx b/app/routes/analytics.tsx
new file mode 100644
index 0000000..6da2aa0
--- /dev/null
+++ b/app/routes/analytics.tsx
@@ -0,0 +1,110 @@
+import { useLoaderData } from "react-router";
+import type { Route } from "./+types/analytics";
+import { getSupabaseServerClient } from "~/utils/supabase.server";
+import { PrismaClient } from "@prisma/client";
+import styles from "./analytics.module.css";
+import { StaleInventoryCard } from "~/blocks/analytics/StaleInventoryCard";
+import { ProfitForecast } from "~/blocks/analytics/ProfitForecast";
+import { CACHE_PRIVATE_NO_STORE } from "~/utils/cache-headers";
+
+export function headers(_: Route.HeadersArgs) {
+  return {
+    "Cache-Control": CACHE_PRIVATE_NO_STORE,
+  };
+}
+
+const prisma = new PrismaClient();
+const STALE_THRESHOLD_DAYS = 60;
+
+export async function loader({ request }: Route.LoaderArgs) {
+  const { supabase } = getSupabaseServerClient(request);
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (!user) {
+    return {
+      staleItems: [],
+      forecast: {
+        totalInventoryCost: 0,
+        totalEstimatedMarketValue: 0,
+        projectedProfit: 0,
+        projectedMarginPct: 0,
+        itemsMissingMarketData: 0,
+      },
+    };
+  }
+
+  const cutoffDate = new Date();
+  cutoffDate.setDate(cutoffDate.getDate() - STALE_THRESHOLD_DAYS);
+
+  // Pull every in-stock item once, with its most recent MarketPrice snapshot,
+  // then derive both the stale-inventory list and the profit forecast from
+  // the same result set instead of hitting the DB twice.
+  const inStockItems = await prisma.inventoryItem.findMany({
+    where: { userId: user.id, status: "IN_STOCK" },
+    include: {
+      priceHistory: {
+        orderBy: { fetchedAt: "desc" },
+        take: 1,
+      },
+    },
+    orderBy: { purchaseDate: "asc" },
+  });
+
+  const now = Date.now();
+
+  const normalized = inStockItems.map((item) => {
+    const snapshot = item.priceHistory[0];
+    const estimatedMarketValue = snapshot ? Number(snapshot.lastSold ?? snapshot.askPrice ?? 0) || null : null;
+
+    return {
+      ...item,
+      purchasePrice: Number(item.purchasePrice),
+      askingPrice: item.askingPrice != null ? Number(item.askingPrice) : null,
+      estimatedMarketValue,
+      daysInStock: Math.floor((now - item.purchaseDate.getTime()) / (1000 * 60 * 60 * 24)),
+    };
+  });
+
+  const staleItems = normalized.filter((item) => item.purchaseDate < cutoffDate);
+
+  let totalInventoryCost = 0;
+  let totalEstimatedMarketValue = 0;
+  let itemsMissingMarketData = 0;
+
+  for (const item of normalized) {
+    totalInventoryCost += item.purchasePrice;
+    if (item.estimatedMarketValue != null) {
+      totalEstimatedMarketValue += item.estimatedMarketValue;
+    } else {
+      totalEstimatedMarketValue += item.askingPrice ?? item.purchasePrice;
+      itemsMissingMarketData += 1;
+    }
+  }
+
+  const projectedProfit = totalEstimatedMarketValue - totalInventoryCost;
+  const projectedMarginPct = totalInventoryCost > 0 ? (projectedProfit / totalInventoryCost) * 100 : 0;
+
+  return {
+    staleItems,
+    forecast: {
+      totalInventoryCost,
+      totalEstimatedMarketValue,
+      projectedProfit,
+      projectedMarginPct,
+      itemsMissingMarketData,
+    },
+  };
+}
+
+export default function AnalyticsPage() {
+  const { staleItems, forecast } = useLoaderData<typeof loader>();
+
+  return (
+    <div className={styles.page}>
+      <ProfitForecast forecast={forecast} />
+      <StaleInventoryCard items={staleItems} />
+    </div>
+  );
+}

From 2ad60e4aa9bdd4d9daebc77a37adc8de96dc18a2 Mon Sep 17 00:00:00 2001
From: shivi14112007-create <shivi14112007@gmail.com>
Date: Wed, 8 Jul 2026 18:16:52 +0530
Subject: [PATCH 2/2] Update app-sidebar.tsx

---
 app/blocks/__global/app-sidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/blocks/__global/app-sidebar.tsx b/app/blocks/__global/app-sidebar.tsx
index c06b563..dcd2ee5 100644
--- a/app/blocks/__global/app-sidebar.tsx
+++ b/app/blocks/__global/app-sidebar.tsx
@@ -34,7 +34,7 @@ export function AppSidebar({ user }: Props) {
     { to: "/app/sales", label: "Sales Log", icon: <IconReceipt size={20} /> },
     { to: "/app/expenses", label: "Expenses", icon: <IconWallet size={20} /> },
     { to: "/app/ai-insights", label: "AI Insights", icon: <IconBrain size={20} /> },
-    { to: "/app/analytics", label: "Analytics", icon: <IconTrendingUp size={20} /> },
+    { to: "/app/analytics", label: "Analytics & Insights", icon: <IconTrendingUp size={20} /> },
     { to: "/app/settings", label: "Settings", icon: <IconSettings size={20} /> },
   ];
   return (