From f2df79cb806da4e298880babbbe5a5fa433d8c92 Mon Sep 17 00:00:00 2001 From: Sweta <254068510+sweta-126-ux@users.noreply.github.com> Date: Mon, 6 Jul 2026 00:47:29 +0530 Subject: [PATCH 01/15] "Replace mock inventory detail data with Prisma loader data" --- .../inventory-item-detail/item-header.tsx | 14 +-- .../inventory-item-detail/item-info-card.tsx | 16 ++-- .../price-history-chart.tsx | 27 ++++-- .../inventory-item-detail/related-items.tsx | 9 +- app/routes/app-layout.tsx | 6 +- app/routes/inventory-item-detail.tsx | 89 +++++++++++++++++-- 6 files changed, 124 insertions(+), 37 deletions(-) diff --git a/app/blocks/inventory-item-detail/item-header.tsx b/app/blocks/inventory-item-detail/item-header.tsx index d4a4bff..272d937 100644 --- a/app/blocks/inventory-item-detail/item-header.tsx +++ b/app/blocks/inventory-item-detail/item-header.tsx @@ -1,20 +1,20 @@ import styles from "./item-header.module.css"; -interface Props { className?: string; } +interface Props { className?: string; item: any; } -export function ItemHeader({ className }: Props) { +export function ItemHeader({ className, item }: Props) { return (
Product Image
-
DD1391-100
-

Air Jordan 1 Retro High OG Chicago

+
{item.sku}
+

{item.name}

- Nike + {item.brand} · - Size 10 + Size {item.size} · - Deadstock + {item.condition}
diff --git a/app/blocks/inventory-item-detail/item-info-card.tsx b/app/blocks/inventory-item-detail/item-info-card.tsx index 5cbf2e8..5e075db 100644 --- a/app/blocks/inventory-item-detail/item-info-card.tsx +++ b/app/blocks/inventory-item-detail/item-info-card.tsx @@ -1,17 +1,17 @@ import styles from "./item-info-card.module.css"; -interface Props { className?: string; } +interface Props { className?: string; item: any; } -export function ItemInfoCard({ className }: Props) { +export function ItemInfoCard({ className, item }: Props) { return (
Item Details
-
Purchase Price
$170.00
-
Purchase Date
Jan 18, 2024
-
Condition
Deadstock
-
Status
In Stock
-
Asking Price
$450.00
-
Notes
Purchased during Nike SNKRS drop
+
Purchase Price
${Number(item.purchasePrice).toFixed(2)}
+
Purchase Date
{new Date(item.purchaseDate).toLocaleDateString() }
+
Condition
{item.condition}
+
Status
{item.status}
+
Asking Price
${item.askingPrice ? Number(item.askingPrice).toFixed(2) : "N/A"}
+
Notes
{item.notes || "No notes available"}
); } diff --git a/app/blocks/inventory-item-detail/price-history-chart.tsx b/app/blocks/inventory-item-detail/price-history-chart.tsx index 9437fe0..661d746 100644 --- a/app/blocks/inventory-item-detail/price-history-chart.tsx +++ b/app/blocks/inventory-item-detail/price-history-chart.tsx @@ -1,27 +1,38 @@ import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts"; -import { mockPriceHistory } from "~/data/mock-data"; import styles from "./price-history-chart.module.css"; -interface Props { className?: string; } +interface Props { className?: string; priceHistory: any[]; } const marketplaceColors: Record = { stockx: "#00FF88", goat: "#7C3AED", ebay: "#3B82F6", flightclub: "#FFB347", stadiumgoods: "#FF4D6A", }; -export function PriceHistoryChart({ className }: Props) { +export function PriceHistoryChart({ className, priceHistory }: Props) { + if (!priceHistory.length) { + return ( +
+
30-Day Price History
+

No price history available.

+
+ ); +} return (
30-Day Price History
- + - + `$${v}`} /> [`${Number(v)}`, ""]} /> - {Object.entries(marketplaceColors).map(([key, color]) => ( - - ))} +
diff --git a/app/blocks/inventory-item-detail/related-items.tsx b/app/blocks/inventory-item-detail/related-items.tsx index 1c82dc9..fbd167b 100644 --- a/app/blocks/inventory-item-detail/related-items.tsx +++ b/app/blocks/inventory-item-detail/related-items.tsx @@ -1,16 +1,15 @@ import { Link } from "react-router"; -import { mockInventoryItems } from "~/data/mock-data"; import styles from "./related-items.module.css"; -interface Props { className?: string; } +interface Props { className?: string; items: any[]; } -export function RelatedItems({ className }: Props) { - const related = mockInventoryItems.slice(1, 5); +export function RelatedItems({ className, items }: Props) { + return (
Related Items
- {related.map(item => ( + {items.map(item => (
Image
{item.name}
diff --git a/app/routes/app-layout.tsx b/app/routes/app-layout.tsx index bc217ea..d794257 100644 --- a/app/routes/app-layout.tsx +++ b/app/routes/app-layout.tsx @@ -1,14 +1,14 @@ import { Outlet, redirect, useLoaderData } from "react-router"; import { getSupabaseServerClient } from "~/utils/supabase.server"; -import { PrismaClient } from "@prisma/client"; -import type { Route } from "./+types/app-layout"; +import { PrismaClient } from "@prisma/client "; +type Route = any; import { AppSidebar } from "~/blocks/__global/app-sidebar"; import { BreadcrumbNavigation } from "~/blocks/__global/breadcrumb-navigation"; import styles from "./app-layout.module.css"; const prisma = new PrismaClient(); -export async function loader({ request }: Route.LoaderArgs) { +export async function loader({ request }: any) { const { supabase, headers } = getSupabaseServerClient(request); const { data: { user } } = await supabase.auth.getUser(); diff --git a/app/routes/inventory-item-detail.tsx b/app/routes/inventory-item-detail.tsx index 0d0bddc..ae98907 100644 --- a/app/routes/inventory-item-detail.tsx +++ b/app/routes/inventory-item-detail.tsx @@ -5,18 +5,95 @@ import { PriceHistoryChart } from "~/blocks/inventory-item-detail/price-history- import { MarketplaceComparison } from "~/blocks/inventory-item-detail/marketplace-comparison"; import { SalesHistory } from "~/blocks/inventory-item-detail/sales-history"; import { RelatedItems } from "~/blocks/inventory-item-detail/related-items"; +import { useLoaderData } from "react-router"; + +import { PrismaClient } from "@prisma/client"; +import { getSupabaseServerClient } from "~/utils/supabase.server"; + +const prisma = new PrismaClient(); + +export async function loader({ request, params }: any) { + const { supabase } = getSupabaseServerClient(request); + const { + data: { user }, + } = await supabase.auth.getUser(); + + if (!user) { + return { + item: null, + priceHistory: [], + relatedItems: [], + }; +} + +const item = await prisma.inventoryItem.findFirst({ + where: { + id: params.id, + userId: user.id, + }, + include: { + priceHistory: { + orderBy: { + fetchedAt: "asc", + }, + }, + }, +}); + +if (!item) { + return { + item: null, + priceHistory: [], + relatedItems: [], + }; +} + +const relatedItems = await prisma.inventoryItem.findMany({ + where: { + userId: user.id, + brand: item.brand, // <-- issue requirement + id: { + not: item.id, + }, + }, + take: 4, +}); + +return { + item, + priceHistory: item.priceHistory, + relatedItems, +}; +} + export default function InventoryItemDetailPage() { + const { item, priceHistory, relatedItems } = + useLoaderData(); + + if (!item) { + return
Item not found
; + } + return (
- -
- - + + +
+ +
+ - +
); -} +} \ No newline at end of file From ee0e82501cdd927697a387c14d26cf03b23b812d Mon Sep 17 00:00:00 2001 From: Sweta <254068510+sweta-126-ux@users.noreply.github.com> Date: Mon, 6 Jul 2026 01:04:43 +0530 Subject: [PATCH 02/15] made changes in typescript --- .../inventory-item-detail/item-header.tsx | 11 +- .../price-history-chart.tsx | 81 ++++++++++++- .../inventory-item-detail/related-items.tsx | 8 +- app/routes/inventory-item-detail.tsx | 111 ++++++++++-------- 4 files changed, 153 insertions(+), 58 deletions(-) diff --git a/app/blocks/inventory-item-detail/item-header.tsx b/app/blocks/inventory-item-detail/item-header.tsx index 0d2d9d8..3d50071 100644 --- a/app/blocks/inventory-item-detail/item-header.tsx +++ b/app/blocks/inventory-item-detail/item-header.tsx @@ -1,9 +1,16 @@ import type { InventoryItem } from "@prisma/client"; import styles from "./item-header.module.css"; -interface Props { className?: string; item: any; } +interface Props { + className?: string; + item: Pick; +} export function ItemHeader({ className, item }: Props) { + const displayCondition = item.condition + .replace(/_/g, " ") + .toLowerCase() + .replace(/\b\w/g, (l) => l.toUpperCase()); interface Props { className?: string; item: Pick; @@ -35,6 +42,7 @@ export function ItemHeader({ className, item }: Props) { · Size {item.size} · + {displayCondition} {item.condition} {item.size && ( <> @@ -53,3 +61,4 @@ export function ItemHeader({ className, item }: Props) {
); } + diff --git a/app/blocks/inventory-item-detail/price-history-chart.tsx b/app/blocks/inventory-item-detail/price-history-chart.tsx index ebd9c96..9bed242 100644 --- a/app/blocks/inventory-item-detail/price-history-chart.tsx +++ b/app/blocks/inventory-item-detail/price-history-chart.tsx @@ -1,6 +1,16 @@ import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts"; +import type { MarketPrice } from "@prisma/client"; import styles from "./price-history-chart.module.css"; +interface Props { + className?: string; + priceHistory: (Pick & { + fetchedAt: string | Date; + askPrice: number | null; + bidPrice: number | null; + lastSold: number | null; + })[]; +} interface Props { className?: string; priceHistory: any[]; } import type { MarketPrice } from "@prisma/client"; import styles from "./price-history-chart.module.css"; @@ -34,10 +44,50 @@ const marketplaceColors: Record = { }; export function PriceHistoryChart({ className, priceHistory }: Props) { - if (!priceHistory.length) { + if (!priceHistory || priceHistory.length === 0) { + return ( +
+
30-Day Price History
+

+ No price history available. +

+
+ ); + } + + const groupedData: Record = {}; + + priceHistory.forEach((record) => { + const d = new Date(record.fetchedAt); + const dateStr = `${(d.getMonth() + 1).toString().padStart(2, "0")}/${d.getDate().toString().padStart(2, "0")}`; + const sortKey = d.getTime(); + + if (!groupedData[dateStr]) { + groupedData[dateStr] = { date: dateStr, _sortTime: sortKey }; + } + + const marketKey = record.marketplace.toLowerCase(); + const price = record.lastSold ?? record.askPrice ?? record.bidPrice; + if (price !== null) { + groupedData[dateStr][marketKey] = price; + } + }); + + const chartData = Object.values(groupedData).sort((a, b) => a._sortTime - b._sortTime); + return (
30-Day Price History
+<<<<<<< HEAD +=======

No price history available.

); @@ -84,9 +134,33 @@ export function PriceHistoryChart({ className, priceHistory }: Props) { return (
30-Day Price History
+>>>>>>> 317f4e0f113105201975b82b257e3b34d1b35bd4 - + +<<<<<<< HEAD + + `$${v}`} + /> + [`${Number(v)}`, ""]} + /> +======= `$${v}`} /> [`${Number(v)}`, ""]} /> @@ -113,6 +187,7 @@ export function PriceHistoryChart({ className, priceHistory }: Props) { }} formatter={(v) => [`${Number(v)}`, ""]} /> +>>>>>>> 317f4e0f113105201975b82b257e3b34d1b35bd4
); -} +} \ No newline at end of file diff --git a/app/blocks/inventory-item-detail/related-items.tsx b/app/blocks/inventory-item-detail/related-items.tsx index 38cb8c8..45cdad8 100644 --- a/app/blocks/inventory-item-detail/related-items.tsx +++ b/app/blocks/inventory-item-detail/related-items.tsx @@ -1,17 +1,21 @@ import { Link } from "react-router"; import styles from "./related-items.module.css"; +interface Props { + className?: string; + items: any[]; +} interface Props { className?: string; items: any[]; } interface Props { className?: string; } export function RelatedItems({ className, items }: Props) { - return (
Related Items
+ {items.map((item) => ( {items.map(item => ( {related.map((item) => ( @@ -23,4 +27,4 @@ export function RelatedItems({ className, items }: Props) {
); -} +} \ No newline at end of file diff --git a/app/routes/inventory-item-detail.tsx b/app/routes/inventory-item-detail.tsx index 26ff210..686fada 100644 --- a/app/routes/inventory-item-detail.tsx +++ b/app/routes/inventory-item-detail.tsx @@ -9,67 +9,75 @@ import { PriceHistoryChart } from "~/blocks/inventory-item-detail/price-history- import { MarketplaceComparison } from "~/blocks/inventory-item-detail/marketplace-comparison"; import { SalesHistory } from "~/blocks/inventory-item-detail/sales-history"; import { RelatedItems } from "~/blocks/inventory-item-detail/related-items"; -import { useLoaderData } from "react-router"; - -import { PrismaClient } from "@prisma/client"; -import { getSupabaseServerClient } from "~/utils/supabase.server"; const prisma = new PrismaClient(); -export async function loader({ request, params }: any) { +export async function loader({ request, params }: Route.LoaderArgs) { const { supabase } = getSupabaseServerClient(request); const { data: { user }, } = await supabase.auth.getUser(); - if (!user) { - return { - item: null, - priceHistory: [], - relatedItems: [], - }; -} + if (!user) { + throw new Response("Unauthorized", { status: 401 }); + } -const item = await prisma.inventoryItem.findFirst({ - where: { - id: params.id, - userId: user.id, - }, - include: { - priceHistory: { - orderBy: { - fetchedAt: "asc", + const { id } = params; + if (!id) { + throw new Response("Not Found", { status: 404 }); + } + + const item = await prisma.inventoryItem.findFirst({ + where: { + id, + userId: user.id, + }, + include: { + sale: true, + priceHistory: { + orderBy: { fetchedAt: "desc" }, }, }, - }, -}); + }); -if (!item) { - return { - item: null, - priceHistory: [], - relatedItems: [], - }; -} + if (!item) { + throw new Response("Not Found", { status: 404 }); + } -const relatedItems = await prisma.inventoryItem.findMany({ - where: { - userId: user.id, - brand: item.brand, // <-- issue requirement - id: { - not: item.id, + const relatedItems = await prisma.inventoryItem.findMany({ + where: { + userId: user.id, + brand: item.brand, + id: { + not: item.id, + }, }, - }, - take: 4, -}); - -return { - item, - priceHistory: item.priceHistory, - relatedItems, -}; + take: 4, + }); + + return { + item: { + ...item, + purchasePrice: Number(item.purchasePrice), + askingPrice: item.askingPrice ? Number(item.askingPrice) : null, + sale: item.sale + ? { + ...item.sale, + salePrice: Number(item.sale.salePrice), + platformFee: Number(item.sale.platformFee), + shippingCost: Number(item.sale.shippingCost), + } + : null, + priceHistory: item.priceHistory.map((ph) => ({ + ...ph, + askPrice: ph.askPrice ? Number(ph.askPrice) : null, + bidPrice: ph.bidPrice ? Number(ph.bidPrice) : null, + lastSold: ph.lastSold ? Number(ph.lastSold) : null, + })), + }, + relatedItems, + }; } - const prisma = new PrismaClient(); @@ -129,8 +137,7 @@ export async function loader({ request, params }: Route.LoaderArgs) { } export default function InventoryItemDetailPage() { - const { item, priceHistory, relatedItems } = - useLoaderData(); + const { item, relatedItems } = useLoaderData(); if (!item) { return
Item not found
; @@ -144,6 +151,7 @@ export default function InventoryItemDetailPage() { return (
+
- +
- - - + +
From 72bf24199ed57b5536d7838e37f6b16235cf74d2 Mon Sep 17 00:00:00 2001 From: Sweta <254068510+sweta-126-ux@users.noreply.github.com> Date: Mon, 6 Jul 2026 02:44:35 +0530 Subject: [PATCH 03/15] --- .../inventory-item-detail/item-header.tsx | 37 ++-- .../price-history-chart.tsx | 190 ++++++------------ .../inventory-item-detail/related-items.tsx | 17 +- app/routes/inventory-item-detail.tsx | 8 +- 4 files changed, 84 insertions(+), 168 deletions(-) diff --git a/app/blocks/inventory-item-detail/item-header.tsx b/app/blocks/inventory-item-detail/item-header.tsx index 3d50071..9bfc967 100644 --- a/app/blocks/inventory-item-detail/item-header.tsx +++ b/app/blocks/inventory-item-detail/item-header.tsx @@ -3,7 +3,10 @@ import styles from "./item-header.module.css"; interface Props { className?: string; - item: Pick; + item: Pick< + InventoryItem, + "sku" | "name" | "brand" | "size" | "condition" | "imageUrl" + >; } export function ItemHeader({ className, item }: Props) { @@ -11,16 +14,7 @@ export function ItemHeader({ className, item }: Props) { .replace(/_/g, " ") .toLowerCase() .replace(/\b\w/g, (l) => l.toUpperCase()); -interface Props { - className?: string; - item: Pick; -} -export function ItemHeader({ className, item }: Props) { - const displayCondition = item.condition - .replace(/_/g, " ") - .toLowerCase() - .replace(/\b\w/g, (l) => l.toUpperCase()); return (
@@ -28,37 +22,36 @@ export function ItemHeader({ className, item }: Props) { {item.name} ) : ( "Product Image" )}
+
{item.sku}
+

{item.name}

+
{item.brand} · Size {item.size} · {displayCondition} - {item.condition} - {item.size && ( - <> - · - {item.size} - - )} - · - {displayCondition}
+
); -} - +} \ No newline at end of file diff --git a/app/blocks/inventory-item-detail/price-history-chart.tsx b/app/blocks/inventory-item-detail/price-history-chart.tsx index 9bed242..22eabe6 100644 --- a/app/blocks/inventory-item-detail/price-history-chart.tsx +++ b/app/blocks/inventory-item-detail/price-history-chart.tsx @@ -1,17 +1,13 @@ -import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts"; -import type { MarketPrice } from "@prisma/client"; -import styles from "./price-history-chart.module.css"; - -interface Props { - className?: string; - priceHistory: (Pick & { - fetchedAt: string | Date; - askPrice: number | null; - bidPrice: number | null; - lastSold: number | null; - })[]; -} -interface Props { className?: string; priceHistory: any[]; } +import { + LineChart, + Line, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend, + ResponsiveContainer, +} from "recharts"; import type { MarketPrice } from "@prisma/client"; import styles from "./price-history-chart.module.css"; @@ -31,34 +27,17 @@ const marketplaceColors: Record = { ebay: "#3B82F6", flightclub: "#FFB347", stadiumgoods: "#FF4D6A", - amazon: "#FF9900", - mercari: "#E44B3B", - poshmark: "#7B2D8B", - facebook: "#1877F2", - shopify: "#96BF48", - grailed: "#000000", - depop: "#FF2300", - offerup: "#00AB80", - in_person: "#6B7280", - other: "#9CA3AF", }; -export function PriceHistoryChart({ className, priceHistory }: Props) { +export function PriceHistoryChart({ + className, + priceHistory, +}: Props) { if (!priceHistory || priceHistory.length === 0) { return (
30-Day Price History
-

- No price history available. -

+

No price history available.

); } @@ -67,117 +46,61 @@ export function PriceHistoryChart({ className, priceHistory }: Props) { priceHistory.forEach((record) => { const d = new Date(record.fetchedAt); - const dateStr = `${(d.getMonth() + 1).toString().padStart(2, "0")}/${d.getDate().toString().padStart(2, "0")}`; - const sortKey = d.getTime(); - - if (!groupedData[dateStr]) { - groupedData[dateStr] = { date: dateStr, _sortTime: sortKey }; - } - - const marketKey = record.marketplace.toLowerCase(); - const price = record.lastSold ?? record.askPrice ?? record.bidPrice; - if (price !== null) { - groupedData[dateStr][marketKey] = price; - } - }); - - const chartData = Object.values(groupedData).sort((a, b) => a._sortTime - b._sortTime); - - return ( -
-
30-Day Price History
-<<<<<<< HEAD -======= -

No price history available.

-
- ); -} - if (!priceHistory || priceHistory.length === 0) { - return ( -
-
30-Day Price History
-

- No price history available. -

-
- ); - } - - const groupedData: Record = {}; - priceHistory.forEach((record) => { - const d = new Date(record.fetchedAt); - const dateStr = `${(d.getMonth() + 1).toString().padStart(2, "0")}/${d.getDate().toString().padStart(2, "0")}`; - const sortKey = d.getTime(); + const dateStr = `${(d.getMonth() + 1) + .toString() + .padStart(2, "0")}/${d + .getDate() + .toString() + .padStart(2, "0")}`; if (!groupedData[dateStr]) { - groupedData[dateStr] = { date: dateStr, _sortTime: sortKey }; + groupedData[dateStr] = { + date: dateStr, + }; } const marketKey = record.marketplace.toLowerCase(); - const price = record.lastSold ?? record.askPrice ?? record.bidPrice; - if (price !== null) { - groupedData[dateStr][marketKey] = price; - } + + groupedData[dateStr][marketKey] = + record.askPrice ?? + record.lastSold ?? + record.bidPrice; }); - const chartData = Object.values(groupedData).sort((a, b) => a._sortTime - b._sortTime); + const chartData = Object.values(groupedData); return (
30-Day Price History
->>>>>>> 317f4e0f113105201975b82b257e3b34d1b35bd4 + - - -<<<<<<< HEAD - - `$${v}`} + + - [`${Number(v)}`, ""]} - /> -======= - - `$${v}`} /> - [`${Number(v)}`, ""]} /> - - + + `$${v}`} /> + [`${Number(v)}`, ""]} /> ->>>>>>> 317f4e0f113105201975b82b257e3b34d1b35bd4 + - + + {Object.entries(marketplaceColors).map(([key, color]) => ( + + ))}
diff --git a/app/blocks/inventory-item-detail/related-items.tsx b/app/blocks/inventory-item-detail/related-items.tsx index 45cdad8..ae9fe23 100644 --- a/app/blocks/inventory-item-detail/related-items.tsx +++ b/app/blocks/inventory-item-detail/related-items.tsx @@ -5,23 +5,24 @@ interface Props { className?: string; items: any[]; } -interface Props { className?: string; items: any[]; } -interface Props { - className?: string; -} export function RelatedItems({ className, items }: Props) { return (
Related Items
+
{items.map((item) => ( - {items.map(item => ( - {related.map((item) => ( - +
Image
{item.name}
-
${item.marketValue}
+
+ ${item.marketValue ?? "N/A"} +
))}
diff --git a/app/routes/inventory-item-detail.tsx b/app/routes/inventory-item-detail.tsx index 686fada..deacba9 100644 --- a/app/routes/inventory-item-detail.tsx +++ b/app/routes/inventory-item-detail.tsx @@ -143,7 +143,7 @@ export default function InventoryItemDetailPage() { return
Item not found
; } - return ( + return
@@ -168,9 +168,5 @@ export default function InventoryItemDetailPage() {
- - - -
+ ); -} \ No newline at end of file From c37e5f4123159dcd5a5f1a2085cf3ed170ec62aa Mon Sep 17 00:00:00 2001 From: Sweta <254068510+sweta-126-ux@users.noreply.github.com> Date: Mon, 6 Jul 2026 02:58:55 +0530 Subject: [PATCH 04/15] fixed typescript error --- .../inventory-item-detail/item-header.tsx | 2 +- app/routes/inventory-item-detail.tsx | 73 ++----------------- 2 files changed, 7 insertions(+), 68 deletions(-) diff --git a/app/blocks/inventory-item-detail/item-header.tsx b/app/blocks/inventory-item-detail/item-header.tsx index 9bfc967..d9abc0b 100644 --- a/app/blocks/inventory-item-detail/item-header.tsx +++ b/app/blocks/inventory-item-detail/item-header.tsx @@ -13,7 +13,7 @@ export function ItemHeader({ className, item }: Props) { const displayCondition = item.condition .replace(/_/g, " ") .toLowerCase() - .replace(/\b\w/g, (l) => l.toUpperCase()); + .replace(/\b\w/g, (l: string) => l.toUpperCase()); return (
diff --git a/app/routes/inventory-item-detail.tsx b/app/routes/inventory-item-detail.tsx index deacba9..f120c6e 100644 --- a/app/routes/inventory-item-detail.tsx +++ b/app/routes/inventory-item-detail.tsx @@ -68,7 +68,7 @@ export async function loader({ request, params }: Route.LoaderArgs) { shippingCost: Number(item.sale.shippingCost), } : null, - priceHistory: item.priceHistory.map((ph) => ({ + priceHistory: item.priceHistory.map((ph: { askPrice: any; bidPrice: any; lastSold: any; }) => ({ ...ph, askPrice: ph.askPrice ? Number(ph.askPrice) : null, bidPrice: ph.bidPrice ? Number(ph.bidPrice) : null, @@ -79,62 +79,6 @@ export async function loader({ request, params }: Route.LoaderArgs) { }; } -const prisma = new PrismaClient(); - -export async function loader({ request, params }: Route.LoaderArgs) { - const { supabase } = getSupabaseServerClient(request); - const { - data: { user }, - } = await supabase.auth.getUser(); - - if (!user) { - throw new Response("Unauthorized", { status: 401 }); - } - - const { id } = params; - if (!id) { - throw new Response("Not Found", { status: 404 }); - } - - const item = await prisma.inventoryItem.findFirst({ - where: { - id, - userId: user.id, - }, - include: { - sale: true, - priceHistory: { - orderBy: { fetchedAt: "desc" }, - }, - }, - }); - - if (!item) { - throw new Response("Not Found", { status: 404 }); - } - - return { - item: { - ...item, - purchasePrice: Number(item.purchasePrice), - askingPrice: item.askingPrice ? Number(item.askingPrice) : null, - sale: item.sale - ? { - ...item.sale, - salePrice: Number(item.sale.salePrice), - platformFee: Number(item.sale.platformFee), - shippingCost: Number(item.sale.shippingCost), - } - : null, - priceHistory: item.priceHistory.map((ph) => ({ - ...ph, - askPrice: ph.askPrice ? Number(ph.askPrice) : null, - bidPrice: ph.bidPrice ? Number(ph.bidPrice) : null, - lastSold: ph.lastSold ? Number(ph.lastSold) : null, - })), - }, - }; -} export default function InventoryItemDetailPage() { const { item, relatedItems } = useLoaderData(); @@ -143,11 +87,6 @@ export default function InventoryItemDetailPage() { return
Item not found
; } - return -
- - - const { item } = useLoaderData(); return (
@@ -163,10 +102,10 @@ export default function InventoryItemDetailPage() {
- - + + + - -
- +
); +} From 0137f044cd88aa1bc5901484ddc6aa1b6668fd6f Mon Sep 17 00:00:00 2001 From: Sweta <254068510+sweta-126-ux@users.noreply.github.com> Date: Tue, 7 Jul 2026 18:44:24 +0530 Subject: [PATCH 05/15] fixed duplicate errors --- .../inventory-item-detail/price-history-chart.tsx | 10 +++------- app/routes/app-layout.tsx | 6 +++--- 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/app/blocks/inventory-item-detail/price-history-chart.tsx b/app/blocks/inventory-item-detail/price-history-chart.tsx index 22eabe6..0caed0f 100644 --- a/app/blocks/inventory-item-detail/price-history-chart.tsx +++ b/app/blocks/inventory-item-detail/price-history-chart.tsx @@ -13,13 +13,9 @@ import styles from "./price-history-chart.module.css"; interface Props { className?: string; - priceHistory: (Pick & { - fetchedAt: string | Date; - askPrice: number | null; - bidPrice: number | null; - lastSold: number | null; - })[]; -} + priceHistory: any[]; +}[]; + const marketplaceColors: Record = { stockx: "#00FF88", diff --git a/app/routes/app-layout.tsx b/app/routes/app-layout.tsx index cf9148e..f7ea39e 100644 --- a/app/routes/app-layout.tsx +++ b/app/routes/app-layout.tsx @@ -1,7 +1,7 @@ import { Outlet, redirect, useLoaderData } from "react-router"; import { getSupabaseServerClient } from "~/utils/supabase.server"; -import { PrismaClient } from "@prisma/client "; -type Route = any; +import { PrismaClient } from "@prisma/client"; +import type { Route } from "./+types/app-layout"; import { AppSidebar } from "~/blocks/__global/app-sidebar"; import { BreadcrumbNavigation } from "~/blocks/__global/breadcrumb-navigation"; import styles from "./app-layout.module.css"; @@ -15,7 +15,7 @@ export function headers(_: Route.HeadersArgs) { const prisma = new PrismaClient(); -export async function loader({ request }: any) { +export async function loader({ request }: Route.LoaderArgs) { const { supabase, headers } = getSupabaseServerClient(request); const { data: { user }, From ba4eaa7f9f4f0a82ddf0a96b875734c5b9c2cf29 Mon Sep 17 00:00:00 2001 From: Sweta <254068510+sweta-126-ux@users.noreply.github.com> Date: Wed, 8 Jul 2026 18:19:19 +0530 Subject: [PATCH 06/15] fix inventory detail regressions --- app/blocks/inventory-item-detail/price-history-chart.tsx | 6 ++++-- app/blocks/inventory-item-detail/related-items.tsx | 6 +++--- app/routes/inventory-item-detail.tsx | 2 +- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/app/blocks/inventory-item-detail/price-history-chart.tsx b/app/blocks/inventory-item-detail/price-history-chart.tsx index 0caed0f..954e6da 100644 --- a/app/blocks/inventory-item-detail/price-history-chart.tsx +++ b/app/blocks/inventory-item-detail/price-history-chart.tsx @@ -8,7 +8,6 @@ import { Legend, ResponsiveContainer, } from "recharts"; -import type { MarketPrice } from "@prisma/client"; import styles from "./price-history-chart.module.css"; interface Props { @@ -53,6 +52,7 @@ export function PriceHistoryChart({ if (!groupedData[dateStr]) { groupedData[dateStr] = { date: dateStr, + _sortTime: d.getTime(), }; } @@ -64,7 +64,9 @@ export function PriceHistoryChart({ record.bidPrice; }); - const chartData = Object.values(groupedData); + const chartData = Object.values(groupedData).sort( + (a: any, b: any) => a._sortTime - b._sortTime +); return (
diff --git a/app/blocks/inventory-item-detail/related-items.tsx b/app/blocks/inventory-item-detail/related-items.tsx index ae9fe23..a4ef13b 100644 --- a/app/blocks/inventory-item-detail/related-items.tsx +++ b/app/blocks/inventory-item-detail/related-items.tsx @@ -1,9 +1,9 @@ import { Link } from "react-router"; import styles from "./related-items.module.css"; - +import { InventoryItem } from "@prisma/client"; interface Props { className?: string; - items: any[]; + items: items: InventoryItem[]; } export function RelatedItems({ className, items }: Props) { @@ -21,7 +21,7 @@ export function RelatedItems({ className, items }: Props) {
Image
{item.name}
- ${item.marketValue ?? "N/A"} + ${ ))} diff --git a/app/routes/inventory-item-detail.tsx b/app/routes/inventory-item-detail.tsx index f120c6e..2434455 100644 --- a/app/routes/inventory-item-detail.tsx +++ b/app/routes/inventory-item-detail.tsx @@ -104,7 +104,7 @@ export default function InventoryItemDetailPage() {
- +
); From 51ce40b6f42f2369c25019b5c54fdcf015be8c8d Mon Sep 17 00:00:00 2001 From: Sweta <254068510+sweta-126-ux@users.noreply.github.com> Date: Wed, 8 Jul 2026 18:23:40 +0530 Subject: [PATCH 07/15] fixed TypeScript errors --- app/blocks/inventory-item-detail/related-items.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/blocks/inventory-item-detail/related-items.tsx b/app/blocks/inventory-item-detail/related-items.tsx index a4ef13b..b3e309a 100644 --- a/app/blocks/inventory-item-detail/related-items.tsx +++ b/app/blocks/inventory-item-detail/related-items.tsx @@ -3,7 +3,7 @@ import styles from "./related-items.module.css"; import { InventoryItem } from "@prisma/client"; interface Props { className?: string; - items: items: InventoryItem[]; + items: InventoryItem[]; } export function RelatedItems({ className, items }: Props) { @@ -21,7 +21,7 @@ export function RelatedItems({ className, items }: Props) {
Image
{item.name}
- ${ ))} From 15156fb12b26c5ff857b8d01507575d64c212654 Mon Sep 17 00:00:00 2001 From: Sweta <254068510+sweta-126-ux@users.noreply.github.com> Date: Wed, 8 Jul 2026 18:26:13 +0530 Subject: [PATCH 08/15] fixed a small TS error --- app/blocks/inventory-item-detail/related-items.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/blocks/inventory-item-detail/related-items.tsx b/app/blocks/inventory-item-detail/related-items.tsx index b3e309a..f76bb66 100644 --- a/app/blocks/inventory-item-detail/related-items.tsx +++ b/app/blocks/inventory-item-detail/related-items.tsx @@ -21,7 +21,7 @@ export function RelatedItems({ className, items }: Props) {
Image
{item.name}
- { ))} From d6ae201b8891968e20aba4b1aebe58084c3fbbcd Mon Sep 17 00:00:00 2001 From: Sweta <254068510+sweta-126-ux@users.noreply.github.com> Date: Wed, 8 Jul 2026 18:45:01 +0530 Subject: [PATCH 09/15] fixed some errors --- app/blocks/inventory-item-detail/related-items.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/blocks/inventory-item-detail/related-items.tsx b/app/blocks/inventory-item-detail/related-items.tsx index f76bb66..24c278b 100644 --- a/app/blocks/inventory-item-detail/related-items.tsx +++ b/app/blocks/inventory-item-detail/related-items.tsx @@ -1,6 +1,6 @@ import { Link } from "react-router"; import styles from "./related-items.module.css"; -import { InventoryItem } from "@prisma/client"; +import type { InventoryItem } from "@prisma/client"; interface Props { className?: string; items: InventoryItem[]; @@ -21,7 +21,7 @@ export function RelatedItems({ className, items }: Props) {
Image
{item.name}
- {item.askingPrice ?? "N/A"} + {item.askingPrice ?? String(item.askingPrice) "N/A"}
))} From 683bd1037d32e17d84663cec7dffb946354cd88e Mon Sep 17 00:00:00 2001 From: Sweta <254068510+sweta-126-ux@users.noreply.github.com> Date: Wed, 8 Jul 2026 18:54:17 +0530 Subject: [PATCH 10/15] fixed a bug --- app/blocks/inventory-item-detail/related-items.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/blocks/inventory-item-detail/related-items.tsx b/app/blocks/inventory-item-detail/related-items.tsx index 24c278b..9d1171d 100644 --- a/app/blocks/inventory-item-detail/related-items.tsx +++ b/app/blocks/inventory-item-detail/related-items.tsx @@ -21,7 +21,7 @@ export function RelatedItems({ className, items }: Props) {
Image
{item.name}
- {item.askingPrice ?? String(item.askingPrice) "N/A"} + {item.askingPrice != null ? `$${item.askingPrice}` : "N/A"}
))} From 6763cd3d3d33a9d551f62afe000d092bc9d1bfdc Mon Sep 17 00:00:00 2001 From: Sweta <254068510+sweta-126-ux@users.noreply.github.com> Date: Wed, 8 Jul 2026 21:55:26 +0530 Subject: [PATCH 11/15] fix review feedback --- app/blocks/inventory-item-detail/price-history-chart.tsx | 5 +++-- app/routes/inventory-item-detail.tsx | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/app/blocks/inventory-item-detail/price-history-chart.tsx b/app/blocks/inventory-item-detail/price-history-chart.tsx index 954e6da..f02f80f 100644 --- a/app/blocks/inventory-item-detail/price-history-chart.tsx +++ b/app/blocks/inventory-item-detail/price-history-chart.tsx @@ -9,11 +9,12 @@ import { ResponsiveContainer, } from "recharts"; import styles from "./price-history-chart.module.css"; +import type { MarketPrice } from "@prisma/client"; interface Props { className?: string; - priceHistory: any[]; -}[]; + priceHistory: MarketPrice[]; +} const marketplaceColors: Record = { diff --git a/app/routes/inventory-item-detail.tsx b/app/routes/inventory-item-detail.tsx index 2434455..a2ed2ec 100644 --- a/app/routes/inventory-item-detail.tsx +++ b/app/routes/inventory-item-detail.tsx @@ -103,7 +103,7 @@ export default function InventoryItemDetailPage() {
- +
From 8d79d6fe654180d915c644b5a10caa4dadb875d5 Mon Sep 17 00:00:00 2001 From: Sweta <254068510+sweta-126-ux@users.noreply.github.com> Date: Thu, 9 Jul 2026 14:08:31 +0530 Subject: [PATCH 12/15] fixed a TS error --- .../inventory-item-detail/price-history-chart.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/app/blocks/inventory-item-detail/price-history-chart.tsx b/app/blocks/inventory-item-detail/price-history-chart.tsx index f02f80f..31e2c52 100644 --- a/app/blocks/inventory-item-detail/price-history-chart.tsx +++ b/app/blocks/inventory-item-detail/price-history-chart.tsx @@ -9,11 +9,18 @@ import { ResponsiveContainer, } from "recharts"; import styles from "./price-history-chart.module.css"; -import type { MarketPrice } from "@prisma/client"; + +interface PriceHistoryItem { + marketplace: string; + fetchedAt: Date; + askPrice: number | null; + bidPrice: number | null; + lastSold: number | null; +} interface Props { className?: string; - priceHistory: MarketPrice[]; + priceHistory: PriceHistoryItem[]; } From bba69f159d9bac43e7a628c9d275a70f61a5ba51 Mon Sep 17 00:00:00 2001 From: Sweta <254068510+sweta-126-ux@users.noreply.github.com> Date: Thu, 9 Jul 2026 14:27:32 +0530 Subject: [PATCH 13/15] fix a bug --- .../inventory-item-detail/price-history-chart.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/app/blocks/inventory-item-detail/price-history-chart.tsx b/app/blocks/inventory-item-detail/price-history-chart.tsx index 31e2c52..a6eba03 100644 --- a/app/blocks/inventory-item-detail/price-history-chart.tsx +++ b/app/blocks/inventory-item-detail/price-history-chart.tsx @@ -10,13 +10,16 @@ import { } from "recharts"; import styles from "./price-history-chart.module.css"; -interface PriceHistoryItem { - marketplace: string; - fetchedAt: Date; +import type { MarketPrice } from "@prisma/client"; + +type PriceHistoryItem = Pick< + MarketPrice, + "marketplace" | "fetchedAt" +> & { askPrice: number | null; bidPrice: number | null; lastSold: number | null; -} +}; interface Props { className?: string; @@ -73,7 +76,7 @@ export function PriceHistoryChart({ }); const chartData = Object.values(groupedData).sort( - (a: any, b: any) => a._sortTime - b._sortTime + (a,b) => a._sortTime - b._sortTime ); return ( From 52256665f0b0f7a5fedb143490d14fb3c03cf5b1 Mon Sep 17 00:00:00 2001 From: Sweta <254068510+sweta-126-ux@users.noreply.github.com> Date: Thu, 9 Jul 2026 23:43:03 +0530 Subject: [PATCH 14/15] fix TS error --- app/routes/inventory-item-detail.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/routes/inventory-item-detail.tsx b/app/routes/inventory-item-detail.tsx index a2ed2ec..9bf35bc 100644 --- a/app/routes/inventory-item-detail.tsx +++ b/app/routes/inventory-item-detail.tsx @@ -68,7 +68,7 @@ export async function loader({ request, params }: Route.LoaderArgs) { shippingCost: Number(item.sale.shippingCost), } : null, - priceHistory: item.priceHistory.map((ph: { askPrice: any; bidPrice: any; lastSold: any; }) => ({ + priceHistory: item.priceHistory.map((ph) => ({ ...ph, askPrice: ph.askPrice ? Number(ph.askPrice) : null, bidPrice: ph.bidPrice ? Number(ph.bidPrice) : null, From b88e2d0e237a70c59ba668d5bd2ae320b481747d Mon Sep 17 00:00:00 2001 From: Sweta <254068510+sweta-126-ux@users.noreply.github.com> Date: Fri, 10 Jul 2026 12:17:29 +0530 Subject: [PATCH 15/15] Fix item header size display logic --- .../inventory-item-detail/item-header.tsx | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/app/blocks/inventory-item-detail/item-header.tsx b/app/blocks/inventory-item-detail/item-header.tsx index d9abc0b..4b92fd1 100644 --- a/app/blocks/inventory-item-detail/item-header.tsx +++ b/app/blocks/inventory-item-detail/item-header.tsx @@ -38,14 +38,19 @@ export function ItemHeader({ className, item }: Props) {
{item.sku}

{item.name}

+
+ {item.brand} -
- {item.brand} - · - Size {item.size} - · - {displayCondition} -
+ {item.size && ( + <> + · + {item.size} + g + )} + + · + {displayCondition} +