Add product lines page, tweak audit log
This commit is contained in:
@@ -26,6 +26,7 @@ const HtsLookup = lazy(() => import('./pages/HtsLookup'));
|
||||
const Vendors = lazy(() => import('./pages/Vendors'));
|
||||
const Categories = lazy(() => import('./pages/Categories'));
|
||||
const Brands = lazy(() => import('./pages/Brands'));
|
||||
const ProductLines = lazy(() => import('./pages/ProductLines'));
|
||||
const PurchaseOrders = lazy(() => import('./pages/PurchaseOrders'));
|
||||
const BlackFridayDashboard = lazy(() => import('./pages/BlackFridayDashboard'));
|
||||
const Newsletter = lazy(() => import('./pages/Newsletter'));
|
||||
@@ -149,6 +150,13 @@ function App() {
|
||||
</Suspense>
|
||||
</Protected>
|
||||
} />
|
||||
<Route path="/product-lines" element={
|
||||
<Protected page="product_lines">
|
||||
<Suspense fallback={<PageLoading />}>
|
||||
<ProductLines />
|
||||
</Suspense>
|
||||
</Protected>
|
||||
} />
|
||||
<Route path="/purchase-orders" element={
|
||||
<Protected page="purchase_orders">
|
||||
<Suspense fallback={<PageLoading />}>
|
||||
|
||||
@@ -16,6 +16,7 @@ import {
|
||||
FilePenLine,
|
||||
PenLine,
|
||||
Mail,
|
||||
Layers,
|
||||
} from "lucide-react";
|
||||
import { IconCrystalBall } from "@tabler/icons-react";
|
||||
import {
|
||||
@@ -78,6 +79,12 @@ const inventoryItems = [
|
||||
url: "/brands",
|
||||
permission: "access:brands"
|
||||
},
|
||||
{
|
||||
title: "Product Lines",
|
||||
icon: Layers,
|
||||
url: "/product-lines",
|
||||
permission: "access:product_lines"
|
||||
},
|
||||
{
|
||||
title: "Vendors",
|
||||
icon: Truck,
|
||||
|
||||
@@ -2,11 +2,11 @@ import { cn } from "@/lib/utils";
|
||||
|
||||
const STATUS_STYLES: Record<string, string> = {
|
||||
'Critical': 'bg-red-600 text-white border-transparent',
|
||||
'Reorder Soon': 'bg-yellow-500 text-black border-secondary',
|
||||
'Reorder Soon': 'bg-yellow-400 text-black border-transparent',
|
||||
'Healthy': 'bg-green-600 text-white border-transparent',
|
||||
'Overstock': 'bg-blue-600 text-white border-secondary',
|
||||
'Overstock': 'bg-teal-700 text-white border-transparent',
|
||||
'At Risk': 'border-orange-500 text-orange-600',
|
||||
'New': 'bg-purple-600 text-white border-transparent',
|
||||
'New': 'bg-green-600 text-white border-transparent',
|
||||
'Unknown': 'bg-muted text-muted-foreground border-transparent',
|
||||
};
|
||||
|
||||
|
||||
@@ -484,7 +484,7 @@ function DetailView({ detail, logType }: { detail: AuditDetail; logType: LogType
|
||||
</div>
|
||||
)}
|
||||
|
||||
<PayloadSection label="Request Payload" data={detail.request_payload} />
|
||||
<RequestPayloadSection payload={detail.request_payload} />
|
||||
|
||||
{detail.response_payload != null && (
|
||||
<PayloadSection label="Response Payload" data={detail.response_payload} />
|
||||
@@ -493,6 +493,36 @@ function DetailView({ detail, logType }: { detail: AuditDetail; logType: LogType
|
||||
);
|
||||
}
|
||||
|
||||
/** Keys in request_payload that were NOT sent to the API — stored for audit context only */
|
||||
const CONTEXT_ONLY_KEYS = new Set(["previous_values", "previous_ids"]);
|
||||
|
||||
function RequestPayloadSection({ payload }: { payload: unknown }) {
|
||||
const parsed = typeof payload === "string" ? (() => { try { return JSON.parse(payload); } catch { return payload; } })() : payload;
|
||||
|
||||
// Extract context-only keys from the payload
|
||||
let apiPayload = parsed;
|
||||
let contextData: Record<string, unknown> | null = null;
|
||||
|
||||
if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
|
||||
const obj = parsed as Record<string, unknown>;
|
||||
const contextEntries = Object.entries(obj).filter(([k]) => CONTEXT_ONLY_KEYS.has(k));
|
||||
if (contextEntries.length > 0) {
|
||||
const remaining = Object.fromEntries(Object.entries(obj).filter(([k]) => !CONTEXT_ONLY_KEYS.has(k)));
|
||||
apiPayload = remaining;
|
||||
contextData = Object.fromEntries(contextEntries);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<PayloadSection label="Request Payload" data={apiPayload} />
|
||||
{contextData && (
|
||||
<PayloadSection label="Previous Values" data={contextData} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// --- Formatted JSON viewer ---
|
||||
|
||||
/** Unwrap double-encoded JSON strings from JSONB columns */
|
||||
@@ -689,6 +719,18 @@ function JsonArray({ items, depth }: { items: unknown[]; depth: number }) {
|
||||
);
|
||||
}
|
||||
|
||||
// Arrays of objects — render each item as a collapsible block
|
||||
const hasObjects = items.some((v) => v !== null && typeof v === "object");
|
||||
if (hasObjects) {
|
||||
return (
|
||||
<div className="space-y-1">
|
||||
{items.map((item, i) => (
|
||||
<JsonArrayItem key={i} index={i} value={item} depth={depth} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-1">
|
||||
{items.map((item, i) => (
|
||||
@@ -700,3 +742,34 @@ function JsonArray({ items, depth }: { items: unknown[]; depth: number }) {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function JsonArrayItem({ index, value, depth }: { index: number; value: unknown; depth: number }) {
|
||||
const [open, setOpen] = useState(true);
|
||||
const isObject = value !== null && typeof value === "object";
|
||||
|
||||
if (!isObject) {
|
||||
return (
|
||||
<div>
|
||||
<span className="text-muted-foreground mr-1">[{index}]</span>
|
||||
<JsonValue value={value} depth={depth + 1} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<button
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
className="inline-flex items-center gap-1 hover:text-foreground"
|
||||
>
|
||||
{open ? <ChevronDown className="h-3 w-3 text-muted-foreground" /> : <ChevronRightIcon className="h-3 w-3 text-muted-foreground" />}
|
||||
<span className="text-muted-foreground font-medium">[{index}]</span>
|
||||
</button>
|
||||
{open && (
|
||||
<div className="ml-4 border-l border-border pl-3 mt-1">
|
||||
<JsonValue value={value} depth={depth + 1} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,863 @@
|
||||
import { useState, useMemo, useCallback } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import config from "../config";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
|
||||
import { ChevronDown, ChevronRight } from "lucide-react";
|
||||
import { PHASE_CONFIG } from "@/utils/lifecyclePhases";
|
||||
|
||||
// --- Types ---
|
||||
|
||||
interface LineMetric {
|
||||
brand: string;
|
||||
line: string;
|
||||
product_count: number;
|
||||
active_product_count: number;
|
||||
replenishable_product_count: number;
|
||||
current_stock_units: number;
|
||||
current_stock_cost: number;
|
||||
current_stock_retail: number;
|
||||
on_order_qty: number;
|
||||
on_order_cost: number;
|
||||
sales_7d: number;
|
||||
revenue_7d: number;
|
||||
sales_30d: number;
|
||||
revenue_30d: number;
|
||||
profit_30d: number;
|
||||
cogs_30d: number;
|
||||
sales_365d: number;
|
||||
revenue_365d: number;
|
||||
lifetime_sales: number;
|
||||
lifetime_revenue: number;
|
||||
avg_margin_30d: number | null;
|
||||
total_velocity_daily: number;
|
||||
avg_stock_cover_days: number | null;
|
||||
avg_sells_out_in_days: number | null;
|
||||
total_stockout_days_30d: number;
|
||||
total_replenishment_units: number;
|
||||
total_replenishment_cost: number;
|
||||
phase_launch: number;
|
||||
phase_mature: number;
|
||||
phase_slow_mover: number;
|
||||
phase_decay: number;
|
||||
phase_dormant: number;
|
||||
phase_preorder: number;
|
||||
status_healthy: number;
|
||||
status_reorder: number;
|
||||
status_critical: number;
|
||||
status_overstock: number;
|
||||
status_at_risk: number;
|
||||
status_new: number;
|
||||
abc_a_count: number;
|
||||
abc_b_count: number;
|
||||
abc_c_count: number;
|
||||
earliest_received: string | null;
|
||||
latest_sale: string | null;
|
||||
sales_growth_30d_vs_prev: number | null;
|
||||
revenue_growth_30d_vs_prev: number | null;
|
||||
line_status: string;
|
||||
dominant_lifecycle_phase: string | null;
|
||||
}
|
||||
|
||||
interface LineResponse {
|
||||
lines: LineMetric[];
|
||||
pagination: { total: number; pages: number; currentPage: number; limit: number };
|
||||
}
|
||||
|
||||
interface LineFilterOptions {
|
||||
brands: string[];
|
||||
statuses: string[];
|
||||
phases: string[];
|
||||
}
|
||||
|
||||
interface LineStats {
|
||||
totalLines: number;
|
||||
brandCount: number;
|
||||
activeLines: number;
|
||||
oosLines: number;
|
||||
linesNeedingRestock: number;
|
||||
avgProductsPerLine: number;
|
||||
totalRevenue30d: number;
|
||||
avgMargin: number;
|
||||
}
|
||||
|
||||
interface LineProduct {
|
||||
pid: number;
|
||||
title: string;
|
||||
sku: string;
|
||||
current_stock: number;
|
||||
sales_30d: number;
|
||||
revenue_30d: number;
|
||||
profit_30d: number;
|
||||
margin_30d: number | null;
|
||||
sales_365d: number;
|
||||
lifecycle_phase: string | null;
|
||||
status: string | null;
|
||||
abc_class: string | null;
|
||||
on_order_qty: number;
|
||||
replenishment_units: number;
|
||||
}
|
||||
|
||||
interface LineProductsResponse {
|
||||
totalProducts: number;
|
||||
products: LineProduct[];
|
||||
}
|
||||
|
||||
// Column-level sorts (for clicking table headers)
|
||||
type SortableColumn =
|
||||
| 'brand' | 'line' | 'productCount' | 'activeProductCount'
|
||||
| 'currentStockUnits' | 'currentStockCost' | 'revenue30d' | 'profit30d'
|
||||
| 'avgMargin30d' | 'sales30d' | 'sales365d' | 'revenue365d'
|
||||
| 'totalVelocityDaily' | 'avgStockCoverDays'
|
||||
| 'salesGrowth30dVsPrev' | 'revenueGrowth30dVsPrev'
|
||||
| 'lineStatus' | 'dominantLifecyclePhase';
|
||||
|
||||
// Curated multi-column sort presets (backend handles the ORDER BY)
|
||||
type SortPreset = 'by-brand' | 'top-revenue' | 'needs-restock' | 'fastest-growing' | 'newest' | 'low-stock';
|
||||
|
||||
const SORT_PRESETS: { value: SortPreset; label: string }[] = [
|
||||
{ value: 'by-brand', label: 'By Brand' },
|
||||
{ value: 'top-revenue', label: 'Top Revenue' },
|
||||
{ value: 'needs-restock', label: 'Needs Restock' },
|
||||
{ value: 'fastest-growing', label: 'Fastest Growing' },
|
||||
{ value: 'newest', label: 'Newest Lines' },
|
||||
{ value: 'low-stock', label: 'Low Stock Cover' },
|
||||
];
|
||||
|
||||
interface Filters {
|
||||
search: string;
|
||||
brand: string;
|
||||
status: string;
|
||||
phase: string;
|
||||
}
|
||||
|
||||
// --- Formatting helpers ---
|
||||
|
||||
const formatCurrency = (value: number | string | null | undefined, digits = 0): string => {
|
||||
if (value == null) return 'N/A';
|
||||
const num = typeof value === 'string' ? parseFloat(value) : value;
|
||||
if (isNaN(num)) return 'N/A';
|
||||
return new Intl.NumberFormat('en-US', {
|
||||
style: 'currency', currency: 'USD',
|
||||
minimumFractionDigits: digits, maximumFractionDigits: digits
|
||||
}).format(num);
|
||||
};
|
||||
|
||||
const formatNumber = (value: number | string | null | undefined, digits = 0): string => {
|
||||
if (value == null) return 'N/A';
|
||||
const num = typeof value === 'string' ? parseFloat(value) : value;
|
||||
if (isNaN(num)) return 'N/A';
|
||||
return num.toLocaleString(undefined, { minimumFractionDigits: digits, maximumFractionDigits: digits });
|
||||
};
|
||||
|
||||
const formatPercentage = (value: number | string | null | undefined, digits = 1): string => {
|
||||
if (value == null) return 'N/A';
|
||||
const num = typeof value === 'string' ? parseFloat(value) : value;
|
||||
if (isNaN(num)) return 'N/A';
|
||||
return `${num.toFixed(digits)}%`;
|
||||
};
|
||||
|
||||
const formatGrowth = (value: number | string | null | undefined, digits = 1) => {
|
||||
if (value == null) return <span className="text-muted-foreground">--</span>;
|
||||
const num = typeof value === 'string' ? parseFloat(value) : value;
|
||||
if (isNaN(num)) return <span className="text-muted-foreground">--</span>;
|
||||
const formatted = `${num >= 0 ? '+' : ''}${num.toFixed(digits)}%`;
|
||||
return <span className={num >= 0 ? 'text-green-600' : 'text-red-600'}>{formatted}</span>;
|
||||
};
|
||||
|
||||
const ITEMS_PER_PAGE = 50;
|
||||
|
||||
// --- Status & Phase badges ---
|
||||
|
||||
const statusConfig: Record<string, { label: string; variant: "default" | "secondary" | "outline" | "destructive" }> = {
|
||||
active: { label: 'Active', variant: 'default' },
|
||||
preorder: { label: 'Pre-order', variant: 'secondary' },
|
||||
slow: { label: 'Slow', variant: 'secondary' },
|
||||
out_of_stock: { label: 'Out of Stock', variant: 'destructive' },
|
||||
dormant: { label: 'Dormant', variant: 'outline' },
|
||||
};
|
||||
|
||||
const getPhaseLabel = (phase: string): string =>
|
||||
PHASE_CONFIG[phase]?.label || phase;
|
||||
|
||||
const getPhaseColor = (phase: string): string =>
|
||||
PHASE_CONFIG[phase]?.color || '#94A3B8';
|
||||
|
||||
// Mini bar showing lifecycle phase distribution using shared PHASE_CONFIG colors
|
||||
function PhaseBar({ line }: { line: LineMetric }) {
|
||||
const phases = [
|
||||
{ key: 'preorder', count: Number(line.phase_preorder) },
|
||||
{ key: 'launch', count: Number(line.phase_launch) },
|
||||
{ key: 'decay', count: Number(line.phase_decay) },
|
||||
{ key: 'mature', count: Number(line.phase_mature) },
|
||||
{ key: 'slow_mover', count: Number(line.phase_slow_mover) },
|
||||
{ key: 'dormant', count: Number(line.phase_dormant) },
|
||||
];
|
||||
const total = phases.reduce((s, p) => s + p.count, 0);
|
||||
if (total === 0) return <span className="text-muted-foreground text-xs">--</span>;
|
||||
|
||||
const activePhases = phases.filter(p => p.count > 0);
|
||||
|
||||
return (
|
||||
<TooltipProvider delayDuration={0}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="flex flex-col items-start gap-1.5 cursor-help">
|
||||
<div className="flex h-2 w-20 rounded-full overflow-hidden bg-muted">
|
||||
{activePhases.map(p => (
|
||||
<div
|
||||
key={p.key}
|
||||
className="h-full"
|
||||
style={{ width: `${(p.count / total) * 100}%`, backgroundColor: getPhaseColor(p.key) }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground whitespace-nowrap">
|
||||
{line.dominant_lifecycle_phase ? getPhaseLabel(line.dominant_lifecycle_phase) : '--'}
|
||||
</span>
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="left">
|
||||
<div className="space-y-1">
|
||||
{activePhases.map(p => (
|
||||
<div key={p.key} className="flex items-center gap-2 text-xs">
|
||||
<div className="h-2 w-2 rounded-full" style={{ backgroundColor: getPhaseColor(p.key) }} />
|
||||
<span>{getPhaseLabel(p.key)}</span>
|
||||
<span className="text-primary-foreground/70 ml-auto pl-2">{p.count}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
|
||||
// Stock health status bar — ordered by severity for visual scanning
|
||||
const STATUS_BAR_CONFIG: Record<string, { label: string; color: string }> = {
|
||||
critical: { label: 'Critical', color: '#ef4444' },
|
||||
reorder: { label: 'Reorder Soon', color: '#fbbf24' },
|
||||
healthy: { label: 'Healthy', color: '#22c55e' },
|
||||
at_risk: { label: 'At Risk', color: '#f97316' },
|
||||
overstock: { label: 'Overstock', color: '#0f766e' },
|
||||
preorder: { label: 'Pre-order', color: '#3b82f6' },
|
||||
};
|
||||
|
||||
// Determines display order — array position = render order in bar
|
||||
const STATUS_ORDER: string[] = ['critical', 'reorder', 'healthy', 'at_risk', 'overstock', 'preorder'];
|
||||
|
||||
// Map DB status strings to STATUS_BAR_CONFIG keys
|
||||
const STATUS_KEY_MAP: Record<string, string> = {
|
||||
'Critical': 'critical',
|
||||
'Reorder Soon': 'reorder',
|
||||
'Healthy': 'healthy',
|
||||
'Overstock': 'overstock',
|
||||
'At Risk': 'at_risk',
|
||||
'New': 'healthy',
|
||||
};
|
||||
|
||||
function StatusBar({ line }: { line: LineMetric }) {
|
||||
const statusCounts: Record<string, number> = {
|
||||
critical: Number(line.status_critical),
|
||||
reorder: Number(line.status_reorder),
|
||||
healthy: Number(line.status_healthy) + Number(line.status_new),
|
||||
at_risk: Number(line.status_at_risk),
|
||||
overstock: Number(line.status_overstock),
|
||||
preorder: Number(line.phase_preorder),
|
||||
};
|
||||
|
||||
const statuses = STATUS_ORDER.map(key => ({ key, count: statusCounts[key] }));
|
||||
const total = statuses.reduce((s, st) => s + st.count, 0);
|
||||
if (total === 0) return <span className="text-muted-foreground text-xs">--</span>;
|
||||
|
||||
const active = statuses.filter(s => s.count > 0);
|
||||
const stockCover = line.avg_stock_cover_days != null ? Number(line.avg_stock_cover_days) : null;
|
||||
const onOrder = Number(line.on_order_qty);
|
||||
|
||||
// Summary label: pick the most notable non-healthy/non-preorder status, or "Good"
|
||||
const neutralCount = statusCounts.healthy + statusCounts.preorder;
|
||||
const healthyPct = neutralCount / total;
|
||||
let summaryLabel = 'Good';
|
||||
if (Number(line.current_stock_units) === 0 && onOrder === 0) {
|
||||
summaryLabel = 'No Stock';
|
||||
} else if (stockCover !== null && stockCover < 14) {
|
||||
summaryLabel = `${Math.round(stockCover)}d cover`;
|
||||
} else if (healthyPct < 0.8 && active.length > 1) {
|
||||
// Find the largest problem segment
|
||||
const biggest = active
|
||||
.filter(s => s.key !== 'healthy' && s.key !== 'preorder')
|
||||
.sort((a, b) => b.count - a.count)[0];
|
||||
if (biggest) summaryLabel = `${biggest.count} ${STATUS_BAR_CONFIG[biggest.key].label}`;
|
||||
}
|
||||
|
||||
return (
|
||||
<TooltipProvider delayDuration={0}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="flex flex-col items-end gap-1.5 cursor-help">
|
||||
<div className="flex h-2 w-20 rounded-full overflow-hidden bg-muted">
|
||||
{active.map(s => (
|
||||
<div
|
||||
key={s.key}
|
||||
className="h-full"
|
||||
style={{ width: `${(s.count / total) * 100}%`, backgroundColor: STATUS_BAR_CONFIG[s.key].color }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground whitespace-nowrap">{summaryLabel}</span>
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="left">
|
||||
<div className="space-y-1">
|
||||
{active.map(s => (
|
||||
<div key={s.key} className="flex items-center gap-2 text-xs">
|
||||
<div className="h-2 w-2 rounded-full" style={{ backgroundColor: STATUS_BAR_CONFIG[s.key].color }} />
|
||||
<span>{STATUS_BAR_CONFIG[s.key].label}</span>
|
||||
<span className="text-primary-foreground/70 ml-auto pl-2">{s.count}</span>
|
||||
</div>
|
||||
))}
|
||||
{stockCover !== null && (
|
||||
<div className="text-xs text-primary-foreground/70 pt-1 border-t border-primary-foreground/20 mt-1">
|
||||
{Math.round(stockCover)}d avg cover
|
||||
</div>
|
||||
)}
|
||||
{onOrder > 0 && (
|
||||
<div className="text-xs text-primary-foreground/70">
|
||||
{formatNumber(onOrder)} on order
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
|
||||
// Expandable product detail row
|
||||
function LineProductDetail({ brand, line }: { brand: string; line: string }) {
|
||||
const { data, isLoading } = useQuery<LineProductsResponse>({
|
||||
queryKey: ['lineProducts', brand, line],
|
||||
queryFn: async () => {
|
||||
const res = await fetch(
|
||||
`${config.apiUrl}/lines-aggregate/${encodeURIComponent(brand)}/${encodeURIComponent(line)}/products`,
|
||||
{ credentials: 'include' }
|
||||
);
|
||||
if (!res.ok) throw new Error('Failed to fetch');
|
||||
return res.json();
|
||||
},
|
||||
});
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<TableRow>
|
||||
<TableCell colSpan={13} className="bg-muted/30 p-4">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-48" />
|
||||
<Skeleton className="h-20 w-full" />
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
}
|
||||
|
||||
if (!data || data.products.length === 0) return null;
|
||||
|
||||
return (
|
||||
<TableRow>
|
||||
<TableCell colSpan={13} className="bg-muted/30 p-4">
|
||||
<p className="text-xs text-muted-foreground mb-2">{data.totalProducts} products in this line — sorted by revenue</p>
|
||||
<div className="max-h-[400px] overflow-y-auto rounded border bg-background">
|
||||
<Table>
|
||||
<TableHeader className="sticky top-0 bg-background z-10">
|
||||
<TableRow className="text-xs">
|
||||
<TableHead className="py-1">Product</TableHead>
|
||||
<TableHead className="py-1 text-right">Stock</TableHead>
|
||||
<TableHead className="py-1 text-right">Sales (30d)</TableHead>
|
||||
<TableHead className="py-1 text-right">Revenue (30d)</TableHead>
|
||||
<TableHead className="py-1 text-right">Margin</TableHead>
|
||||
<TableHead className="py-1 text-right">Phase</TableHead>
|
||||
<TableHead className="py-1 text-right">Status</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{data.products.map((p) => (
|
||||
<TableRow key={p.pid} className="text-xs">
|
||||
<TableCell className="py-1.5 max-w-[300px]">
|
||||
<TooltipProvider delayDuration={300}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<span className="block truncate">{p.title}</span>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="top">
|
||||
<p>{p.title}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</TableCell>
|
||||
<TableCell className="py-1.5 text-right">{formatNumber(p.current_stock)}</TableCell>
|
||||
<TableCell className="py-1.5 text-right">{formatNumber(p.sales_30d)}</TableCell>
|
||||
<TableCell className="py-1.5 text-right">{formatCurrency(p.revenue_30d)}</TableCell>
|
||||
<TableCell className="py-1.5 text-right">{formatPercentage(p.margin_30d)}</TableCell>
|
||||
<TableCell className="py-1.5 text-right">
|
||||
{p.lifecycle_phase ? (
|
||||
<span
|
||||
className="inline-block px-1.5 py-0.5 rounded text-[10px] text-white"
|
||||
style={{ backgroundColor: getPhaseColor(p.lifecycle_phase) }}
|
||||
>
|
||||
{getPhaseLabel(p.lifecycle_phase)}
|
||||
</span>
|
||||
) : '--'}
|
||||
</TableCell>
|
||||
<TableCell className="py-1.5 text-right">
|
||||
{p.status ? (
|
||||
<span
|
||||
className="inline-block px-1.5 py-0.5 rounded text-[10px] text-white"
|
||||
style={{ backgroundColor: STATUS_BAR_CONFIG[STATUS_KEY_MAP[p.status] || 'healthy']?.color }}
|
||||
>
|
||||
{p.status}
|
||||
</span>
|
||||
) : '--'}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
}
|
||||
|
||||
// --- Main Page Component ---
|
||||
|
||||
export function ProductLines() {
|
||||
const [page, setPage] = useState(1);
|
||||
const [limit] = useState(ITEMS_PER_PAGE);
|
||||
// Sort can be either a preset (compound sort) or a single column
|
||||
const [sortPreset, setSortPreset] = useState<SortPreset | null>('newest');
|
||||
const [sortColumn, setSortColumn] = useState<SortableColumn>("brand");
|
||||
const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc");
|
||||
const [expandedLine, setExpandedLine] = useState<string | null>(null);
|
||||
const [filters, setFilters] = useState<Filters>({
|
||||
search: "",
|
||||
brand: "all",
|
||||
status: "all",
|
||||
phase: "all",
|
||||
});
|
||||
|
||||
// The active sort key sent to the backend
|
||||
const activeSort = sortPreset || sortColumn;
|
||||
|
||||
// --- Data Fetching ---
|
||||
|
||||
const queryParams = useMemo(() => {
|
||||
const params = new URLSearchParams();
|
||||
params.set('page', page.toString());
|
||||
params.set('limit', limit.toString());
|
||||
params.set('sort', activeSort);
|
||||
if (!sortPreset) {
|
||||
params.set('order', sortDirection);
|
||||
}
|
||||
|
||||
if (filters.search) {
|
||||
params.set('line_ilike', filters.search);
|
||||
}
|
||||
if (filters.brand !== 'all') {
|
||||
params.set('brand', filters.brand);
|
||||
}
|
||||
if (filters.status !== 'all') {
|
||||
params.set('lineStatus', filters.status);
|
||||
}
|
||||
if (filters.phase !== 'all') {
|
||||
params.set('dominantLifecyclePhase', filters.phase);
|
||||
}
|
||||
return params;
|
||||
}, [page, limit, activeSort, sortPreset, sortDirection, filters]);
|
||||
|
||||
const { data: listData, isLoading: isLoadingList, error: listError } = useQuery<LineResponse, Error>({
|
||||
queryKey: ['productLines', queryParams.toString()],
|
||||
queryFn: async () => {
|
||||
const res = await fetch(`${config.apiUrl}/lines-aggregate?${queryParams.toString()}`, {
|
||||
credentials: 'include'
|
||||
});
|
||||
if (!res.ok) throw new Error(`Network response was not ok (${res.status})`);
|
||||
return res.json();
|
||||
},
|
||||
placeholderData: (prev) => prev,
|
||||
});
|
||||
|
||||
const { data: statsData, isLoading: isLoadingStats } = useQuery<LineStats, Error>({
|
||||
queryKey: ['productLineStats'],
|
||||
queryFn: async () => {
|
||||
const res = await fetch(`${config.apiUrl}/lines-aggregate/stats`, { credentials: 'include' });
|
||||
if (!res.ok) throw new Error("Failed to fetch stats");
|
||||
return res.json();
|
||||
},
|
||||
});
|
||||
|
||||
const { data: filterOptions } = useQuery<LineFilterOptions, Error>({
|
||||
queryKey: ['productLineFilterOptions'],
|
||||
queryFn: async () => {
|
||||
const res = await fetch(`${config.apiUrl}/lines-aggregate/filter-options`, { credentials: 'include' });
|
||||
if (!res.ok) throw new Error("Failed to fetch filter options");
|
||||
return res.json();
|
||||
},
|
||||
});
|
||||
|
||||
// --- Handlers ---
|
||||
|
||||
const handleSort = useCallback((column: SortableColumn) => {
|
||||
setSortPreset(null); // Clear preset when manually sorting by column
|
||||
setSortDirection(prev => (sortColumn === column && prev === "desc" ? "asc" : "desc"));
|
||||
setSortColumn(column);
|
||||
setPage(1);
|
||||
}, [sortColumn]);
|
||||
|
||||
const handlePresetChange = useCallback((preset: string) => {
|
||||
if (preset === 'custom') {
|
||||
// Switching to the "custom" placeholder does nothing; user clicks column headers
|
||||
return;
|
||||
}
|
||||
setSortPreset(preset as SortPreset);
|
||||
setPage(1);
|
||||
}, []);
|
||||
|
||||
const handleFilterChange = useCallback((name: keyof Filters, value: string) => {
|
||||
setFilters(prev => ({ ...prev, [name]: value }));
|
||||
setPage(1);
|
||||
}, []);
|
||||
|
||||
const handlePageChange = (newPage: number) => {
|
||||
if (newPage >= 1 && newPage <= (listData?.pagination.pages ?? 1)) {
|
||||
setPage(newPage);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleExpand = (brand: string, line: string) => {
|
||||
const key = `${brand}|||${line}`;
|
||||
setExpandedLine(prev => prev === key ? null : key);
|
||||
};
|
||||
|
||||
// --- Derived ---
|
||||
const lines = listData?.lines ?? [];
|
||||
const pagination = listData?.pagination;
|
||||
const totalPages = pagination?.pages ?? 0;
|
||||
|
||||
const sortIndicator = (col: SortableColumn) => {
|
||||
if (sortPreset || sortColumn !== col) return null;
|
||||
return <span className="ml-1">{sortDirection === 'asc' ? '\u2191' : '\u2193'}</span>;
|
||||
};
|
||||
|
||||
// --- Render ---
|
||||
return (
|
||||
<motion.div
|
||||
layout
|
||||
transition={{ layout: { duration: 0.15, ease: [0.4, 0, 0.2, 1] } }}
|
||||
className="container mx-auto py-6 space-y-4"
|
||||
>
|
||||
{/* Header */}
|
||||
<motion.div layout="position" transition={{ duration: 0.15 }} className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Product Lines</h1>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<motion.div layout="preserve-aspect" transition={{ duration: 0.15 }} className="grid gap-4 md:grid-cols-4">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Product Lines</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoadingStats ? <Skeleton className="h-8 w-24" /> : (
|
||||
<div className="text-2xl font-bold">{formatNumber(statsData?.totalLines)}</div>
|
||||
)}
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{isLoadingStats ? <Skeleton className="h-4 w-28" /> :
|
||||
`${formatNumber(statsData?.activeLines)} active across ${formatNumber(statsData?.brandCount)} brands`}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Avg Products / Line</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoadingStats ? <Skeleton className="h-8 w-20" /> : (
|
||||
<div className="text-2xl font-bold">{formatNumber(statsData?.avgProductsPerLine, 1)}</div>
|
||||
)}
|
||||
<p className="text-xs text-muted-foreground">Average line depth</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Avg Margin (30d)</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoadingStats ? <Skeleton className="h-8 w-20" /> : (
|
||||
<div className="text-2xl font-bold">{formatPercentage(statsData?.avgMargin)}</div>
|
||||
)}
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{isLoadingStats ? <Skeleton className="h-4 w-28" /> :
|
||||
`${formatCurrency(statsData?.totalRevenue30d)} total revenue`}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card
|
||||
className={`cursor-pointer transition-colors hover:border-primary/40 ${sortPreset === 'needs-restock' ? 'border-primary' : ''}`}
|
||||
onClick={() => { setSortPreset('needs-restock'); setPage(1); }}
|
||||
>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Lines Needing Restock</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoadingStats ? <Skeleton className="h-8 w-24" /> : (
|
||||
<div className="text-2xl font-bold">{formatNumber(statsData?.linesNeedingRestock)}</div>
|
||||
)}
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{isLoadingStats ? <Skeleton className="h-4 w-28" /> :
|
||||
`${formatNumber(statsData?.oosLines)} fully out of stock`}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Filters & Sort */}
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Input
|
||||
placeholder="Search lines..."
|
||||
value={filters.search}
|
||||
onChange={(e) => handleFilterChange('search', e.target.value)}
|
||||
className="w-full sm:w-[250px]"
|
||||
/>
|
||||
<Select value={filters.brand} onValueChange={(v) => handleFilterChange('brand', v)}>
|
||||
<SelectTrigger className="w-full sm:w-[200px]">
|
||||
<SelectValue placeholder="Brand" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Brands</SelectItem>
|
||||
{filterOptions?.brands?.map((b) => (
|
||||
<SelectItem key={b} value={b}>{b}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select value={filters.status} onValueChange={(v) => handleFilterChange('status', v)}>
|
||||
<SelectTrigger className="w-full sm:w-[160px]">
|
||||
<SelectValue placeholder="Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Statuses</SelectItem>
|
||||
{filterOptions?.statuses?.map((s) => (
|
||||
<SelectItem key={s} value={s}>
|
||||
{statusConfig[s]?.label || s}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select value={filters.phase} onValueChange={(v) => handleFilterChange('phase', v)}>
|
||||
<SelectTrigger className="w-full sm:w-[180px]">
|
||||
<SelectValue placeholder="Lifecycle" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Phases</SelectItem>
|
||||
{filterOptions?.phases?.map((p) => (
|
||||
<SelectItem key={p} value={p}>
|
||||
{getPhaseLabel(p)}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<div className="ml-auto">
|
||||
<Select value={sortPreset || 'custom'} onValueChange={handlePresetChange}>
|
||||
<SelectTrigger className="w-full sm:w-[180px]">
|
||||
<SelectValue placeholder="Sort by..." />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{SORT_PRESETS.map((p) => (
|
||||
<SelectItem key={p.value} value={p.value}>{p.label}</SelectItem>
|
||||
))}
|
||||
{!sortPreset && (
|
||||
<SelectItem value="custom" disabled>Custom sort</SelectItem>
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Data Table */}
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-8"></TableHead>
|
||||
<TableHead onClick={() => handleSort("brand")} className="cursor-pointer">
|
||||
Brand{sortIndicator("brand")}
|
||||
</TableHead>
|
||||
<TableHead onClick={() => handleSort("line")} className="cursor-pointer">
|
||||
Line{sortIndicator("line")}
|
||||
</TableHead>
|
||||
<TableHead onClick={() => handleSort("productCount")} className="cursor-pointer text-right">
|
||||
Products{sortIndicator("productCount")}
|
||||
</TableHead>
|
||||
<TableHead onClick={() => handleSort("currentStockUnits")} className="cursor-pointer text-right">
|
||||
Stock{sortIndicator("currentStockUnits")}
|
||||
</TableHead>
|
||||
<TableHead onClick={() => handleSort("revenue30d")} className="cursor-pointer text-right">
|
||||
Revenue (30d){sortIndicator("revenue30d")}
|
||||
</TableHead>
|
||||
<TableHead onClick={() => handleSort("profit30d")} className="cursor-pointer text-right">
|
||||
Profit (30d){sortIndicator("profit30d")}
|
||||
</TableHead>
|
||||
<TableHead onClick={() => handleSort("avgMargin30d")} className="cursor-pointer text-right">
|
||||
Margin{sortIndicator("avgMargin30d")}
|
||||
</TableHead>
|
||||
<TableHead onClick={() => handleSort("totalVelocityDaily")} className="cursor-pointer text-right whitespace-nowrap">
|
||||
Velocity/d{sortIndicator("totalVelocityDaily")}
|
||||
</TableHead>
|
||||
<TableHead onClick={() => handleSort("salesGrowth30dVsPrev")} className="cursor-pointer text-right">
|
||||
Growth{sortIndicator("salesGrowth30dVsPrev")}
|
||||
</TableHead>
|
||||
<TableHead className="text-right">Lifecycle</TableHead>
|
||||
<TableHead className="text-right">Product Status</TableHead>
|
||||
<TableHead onClick={() => handleSort("lineStatus")} className="cursor-pointer text-right">
|
||||
Status{sortIndicator("lineStatus")}
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{isLoadingList && !listData ? (
|
||||
Array.from({ length: 8 }).map((_, i) => (
|
||||
<TableRow key={`skel-${i}`}>
|
||||
<TableCell><Skeleton className="h-4 w-4" /></TableCell>
|
||||
<TableCell><Skeleton className="h-5 w-28" /></TableCell>
|
||||
<TableCell><Skeleton className="h-5 w-36" /></TableCell>
|
||||
<TableCell className="text-right"><Skeleton className="h-5 w-10 ml-auto" /></TableCell>
|
||||
<TableCell className="text-right"><Skeleton className="h-5 w-14 ml-auto" /></TableCell>
|
||||
<TableCell className="text-right"><Skeleton className="h-5 w-20 ml-auto" /></TableCell>
|
||||
<TableCell className="text-right"><Skeleton className="h-5 w-18 ml-auto" /></TableCell>
|
||||
<TableCell className="text-right"><Skeleton className="h-5 w-14 ml-auto" /></TableCell>
|
||||
<TableCell className="text-right"><Skeleton className="h-5 w-12 ml-auto" /></TableCell>
|
||||
<TableCell className="text-right"><Skeleton className="h-5 w-14 ml-auto" /></TableCell>
|
||||
<TableCell className="text-right"><Skeleton className="h-5 w-20 ml-auto" /></TableCell>
|
||||
<TableCell className="text-right"><Skeleton className="h-5 w-16 ml-auto" /></TableCell>
|
||||
<TableCell className="text-right"><Skeleton className="h-5 w-16 ml-auto" /></TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
) : listError ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={13} className="text-center py-8 text-destructive">
|
||||
Error loading product lines: {listError.message}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : lines.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={13} className="text-center py-8 text-muted-foreground">
|
||||
No product lines found matching your criteria.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
lines.map((line) => {
|
||||
const key = `${line.brand}|||${line.line}`;
|
||||
const isExpanded = expandedLine === key;
|
||||
const sc = statusConfig[line.line_status] || statusConfig.dormant;
|
||||
|
||||
return (
|
||||
<AnimatePresence key={key}>
|
||||
<TableRow
|
||||
className={`cursor-pointer hover:bg-muted/50 ${line.line_status === 'out_of_stock' || line.line_status === 'dormant' ? 'opacity-60' : ''}`}
|
||||
onClick={() => toggleExpand(line.brand, line.line)}
|
||||
>
|
||||
<TableCell className="w-8 px-2">
|
||||
{isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium text-sm whitespace-nowrap max-w-[200px] overflow-hidden text-ellipsis">{line.brand}</TableCell>
|
||||
<TableCell className="text-sm">{line.line}</TableCell>
|
||||
<TableCell className="text-right">{formatNumber(line.product_count)}</TableCell>
|
||||
<TableCell className="text-right">{formatNumber(line.current_stock_units)}</TableCell>
|
||||
<TableCell className="text-right">{formatCurrency(line.revenue_30d)}</TableCell>
|
||||
<TableCell className="text-right">{formatCurrency(line.profit_30d)}</TableCell>
|
||||
<TableCell className="text-right">{formatPercentage(line.avg_margin_30d)}</TableCell>
|
||||
<TableCell className="text-right">{formatNumber(line.total_velocity_daily, 1)}</TableCell>
|
||||
<TableCell className="text-right">{formatGrowth(line.sales_growth_30d_vs_prev)}</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<PhaseBar line={line} />
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<StatusBar line={line} />
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Badge variant={sc.variant} className="whitespace-nowrap">{sc.label}</Badge>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
{isExpanded && (
|
||||
<LineProductDetail brand={line.brand} line={line.line} />
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && pagination && (
|
||||
<motion.div layout="position" transition={{ duration: 0.15 }} className="flex justify-center">
|
||||
<Pagination>
|
||||
<PaginationContent>
|
||||
<PaginationItem>
|
||||
<PaginationPrevious
|
||||
href="#"
|
||||
onClick={(e) => { e.preventDefault(); handlePageChange(pagination.currentPage - 1); }}
|
||||
aria-disabled={pagination.currentPage === 1}
|
||||
className={pagination.currentPage === 1 ? "pointer-events-none opacity-50" : ""}
|
||||
/>
|
||||
</PaginationItem>
|
||||
{[...Array(Math.min(totalPages, 7))].map((_, i) => {
|
||||
// Show pages around current page
|
||||
let pageNum: number;
|
||||
if (totalPages <= 7) {
|
||||
pageNum = i + 1;
|
||||
} else if (pagination.currentPage <= 4) {
|
||||
pageNum = i + 1;
|
||||
} else if (pagination.currentPage >= totalPages - 3) {
|
||||
pageNum = totalPages - 6 + i;
|
||||
} else {
|
||||
pageNum = pagination.currentPage - 3 + i;
|
||||
}
|
||||
return (
|
||||
<PaginationItem key={pageNum}>
|
||||
<PaginationLink
|
||||
href="#"
|
||||
onClick={(e) => { e.preventDefault(); handlePageChange(pageNum); }}
|
||||
isActive={pagination.currentPage === pageNum}
|
||||
>
|
||||
{pageNum}
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
);
|
||||
})}
|
||||
<PaginationItem>
|
||||
<PaginationNext
|
||||
href="#"
|
||||
onClick={(e) => { e.preventDefault(); handlePageChange(pagination.currentPage + 1); }}
|
||||
aria-disabled={pagination.currentPage >= totalPages}
|
||||
className={pagination.currentPage >= totalPages ? "pointer-events-none opacity-50" : ""}
|
||||
/>
|
||||
</PaginationItem>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
</motion.div>
|
||||
)}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProductLines;
|
||||
@@ -269,7 +269,7 @@ export function Settings() {
|
||||
|
||||
<TabsContent value="audit-log" className="mt-0 focus-visible:outline-none focus-visible:ring-0">
|
||||
<Protected
|
||||
adminOnly
|
||||
permission="settings:audit_log"
|
||||
fallback={
|
||||
<Alert>
|
||||
<AlertDescription>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
export const PHASE_CONFIG: Record<string, { label: string; color: string }> = {
|
||||
preorder: { label: "Pre-order", color: "#3B82F6" },
|
||||
launch: { label: "Launch", color: "#22C55E" },
|
||||
launch: { label: "Launch", color: "#84cc16" },
|
||||
decay: { label: "Active", color: "#F59E0B" },
|
||||
mature: { label: "Evergreen", color: "#8B5CF6" },
|
||||
slow_mover: { label: "Slow Mover", color: "#14B8A6" },
|
||||
slow_mover: { label: "Slow Mover", color: "#06B6D4" },
|
||||
dormant: { label: "Dormant", color: "#6B7280" },
|
||||
unknown: { label: "Unclassified", color: "#94A3B8" },
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user