matt/inventory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rearrange component contents to match IP

Browse Source
This commit is contained in:
Matt
2025-01-17 20:01:47 -05:00
parent c412822881
commit 7a3a6fdb52
11 changed files with 238 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
inventory/src/components/dashboard/BestSellers.tsx
View File

@@ -53,16 +53,19 @@ export function BestSellers() {
return (
<>
<CardHeader>
<div className="flex flex-row items-center justify-between">
<CardTitle className="text-lg font-medium">Best Sellers</CardTitle>
</CardHeader>
<CardContent>
<Tabs defaultValue="products">
<TabsList className="mb-4">
<TabsList>
<TabsTrigger value="products">Products</TabsTrigger>
<TabsTrigger value="vendors">Vendors</TabsTrigger>
<TabsTrigger value="categories">Categories</TabsTrigger>
</TabsList>
</Tabs>
</div>
</CardHeader>
<CardContent>
<Tabs defaultValue="products">
<TabsContent value="products">
<ScrollArea className="h-[400px] w-full">
<Table>

15
inventory/src/components/dashboard/ForecastMetrics.tsx
View File

@@ -5,6 +5,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
import { useState } from "react"
import config from "@/config"
import { formatCurrency } from "@/lib/utils"
import { TrendingUp, DollarSign } from "lucide-react" // Importing icons
interface ForecastData {
forecastSales: number
@@ -41,7 +42,7 @@ export function ForecastMetrics() {
return (
<>
<CardHeader className="flex flex-row items-center justify-between">
<CardTitle className="text-lg font-medium">Sales Forecast</CardTitle>
<CardTitle className="text-xl font-medium">Forecast</CardTitle>
<Select value={period} onValueChange={setPeriod}>
<SelectTrigger className="w-[120px]">
<SelectValue placeholder="Select period" />
@@ -56,13 +57,19 @@ export function ForecastMetrics() {
</Select>
</CardHeader>
<CardContent>
<div className="grid grid-cols-2 gap-4 mb-6">
<div>
<div className="flex flex-col gap-4">
<div className="flex items-baseline justify-between">
<div className="flex items-center gap-2">
<TrendingUp className="h-4 w-4 text-muted-foreground" />
<p className="text-sm font-medium text-muted-foreground">Forecast Sales</p>
</div>
<p className="text-2xl font-bold">{data?.forecastSales.toLocaleString() || 0}</p>
</div>
<div>
<div className="flex items-baseline justify-between">
<div className="flex items-center gap-2">
<DollarSign className="h-4 w-4 text-muted-foreground" />
<p className="text-sm font-medium text-muted-foreground">Forecast Revenue</p>
</div>
<p className="text-2xl font-bold">{formatCurrency(data?.forecastRevenue || 0)}</p>
</div>
</div>

74
inventory/src/components/dashboard/OverstockMetrics.tsx
View File

@@ -1,8 +1,8 @@
import { useQuery } from "@tanstack/react-query"
import { CardHeader, CardTitle, CardContent } from "@/components/ui/card"
import { BarChart, Bar, ResponsiveContainer, XAxis, YAxis, Tooltip } from "recharts"
import config from "@/config"
import { formatCurrency } from "@/lib/utils"
import { Package, Layers, DollarSign, ShoppingCart } from "lucide-react"
interface OverstockMetricsData {
overstockedProducts: number
@@ -32,71 +32,39 @@ export function OverstockMetrics() {
return (
<>
<CardHeader>
<CardTitle className="text-lg font-medium">Overstock Overview</CardTitle>
<CardTitle className="text-xl font-medium">Overstock</CardTitle>
</CardHeader>
<CardContent>
<div className="grid grid-cols-2 gap-4 mb-6">
<div>
<div className="flex flex-col gap-4">
<div className="flex items-baseline justify-between">
<div className="flex items-center gap-2">
<Package className="h-4 w-4 text-muted-foreground" />
<p className="text-sm font-medium text-muted-foreground">Overstocked Products</p>
</div>
<p className="text-2xl font-bold">{data?.overstockedProducts.toLocaleString() || 0}</p>
</div>
<div>
<div className="flex items-baseline justify-between">
<div className="flex items-center gap-2">
<Layers className="h-4 w-4 text-muted-foreground" />
<p className="text-sm font-medium text-muted-foreground">Overstocked Units</p>
</div>
<p className="text-2xl font-bold">{data?.overstockedUnits.toLocaleString() || 0}</p>
</div>
<div>
<p className="text-sm font-medium text-muted-foreground">Total Cost</p>
<div className="flex items-baseline justify-between">
<div className="flex items-center gap-2">
<DollarSign className="h-4 w-4 text-muted-foreground" />
<p className="text-sm font-medium text-muted-foreground">Overstocked Cost</p>
</div>
<p className="text-2xl font-bold">{formatCurrency(data?.overstockedCost || 0)}</p>
</div>
<div>
<p className="text-sm font-medium text-muted-foreground">Total Retail</p>
<div className="flex items-baseline justify-between">
<div className="flex items-center gap-2">
<ShoppingCart className="h-4 w-4 text-muted-foreground" />
<p className="text-sm font-medium text-muted-foreground">Overstocked Retail</p>
</div>
<p className="text-2xl font-bold">{formatCurrency(data?.overstockedRetail || 0)}</p>
</div>
</div>
<div className="h-[300px] w-full">
<ResponsiveContainer width="100%" height="100%">
<BarChart data={data?.overstockByCategory || []}>
<XAxis
dataKey="category"
tickLine={false}
axisLine={false}
fontSize={12}
/>
<YAxis
tickLine={false}
axisLine={false}
fontSize={12}
tickFormatter={(value) => value.toLocaleString()}
/>
<Tooltip
formatter={(value: number, name: string) => [
name === "cost" ? formatCurrency(value) : value.toLocaleString(),
name === "cost" ? "Cost" : name === "products" ? "Products" : "Units"
]}
labelFormatter={(label) => `Category: ${label}`}
/>
<Bar
dataKey="products"
name="Products"
fill="#0088FE"
radius={[4, 4, 0, 0]}
/>
<Bar
dataKey="units"
name="Units"
fill="#00C49F"
radius={[4, 4, 0, 0]}
/>
<Bar
dataKey="cost"
name="Cost"
fill="#FFBB28"
radius={[4, 4, 0, 0]}
/>
</BarChart>
</ResponsiveContainer>
</div>
</CardContent>
</>
)

52
inventory/src/components/dashboard/PurchaseMetrics.tsx
View File

@@ -3,6 +3,7 @@ import { CardHeader, CardTitle, CardContent } from "@/components/ui/card"
import { PieChart, Pie, ResponsiveContainer, Cell, Tooltip } from "recharts"
import config from "@/config"
import { formatCurrency } from "@/lib/utils"
import { ClipboardList, AlertCircle, Layers, DollarSign, ShoppingCart } from "lucide-react" // Importing icons
interface PurchaseMetricsData {
activePurchaseOrders: number
@@ -45,33 +46,53 @@ export function PurchaseMetrics() {
return (
<>
<CardHeader>
<CardTitle className="text-lg font-medium">Purchase Overview</CardTitle>
<CardTitle className="text-xl font-medium">Purchases</CardTitle>
</CardHeader>
<CardContent>
<div className="grid grid-cols-2 gap-4 mb-6">
<div>
<p className="text-sm font-medium text-muted-foreground">Active Orders</p>
<div className="flex justify-between gap-8">
<div className="flex-1">
<div className="flex flex-col gap-4">
<div className="flex items-baseline justify-between">
<div className="flex items-center gap-2">
<ClipboardList className="h-4 w-4 text-muted-foreground" />
<p className="text-sm font-medium text-muted-foreground">Active Purchase Orders</p>
</div>
<p className="text-2xl font-bold">{data?.activePurchaseOrders.toLocaleString() || 0}</p>
</div>
<div>
<p className="text-sm font-medium text-muted-foreground">Overdue Orders</p>
<div className="flex items-baseline justify-between">
<div className="flex items-center gap-2">
<AlertCircle className="h-4 w-4 text-muted-foreground" />
<p className="text-sm font-medium text-muted-foreground">Overdue Purchase Orders</p>
</div>
<p className="text-2xl font-bold">{data?.overduePurchaseOrders.toLocaleString() || 0}</p>
</div>
<div>
<p className="text-sm font-medium text-muted-foreground">Units On Order</p>
<div className="flex items-baseline justify-between">
<div className="flex items-center gap-2">
<Layers className="h-4 w-4 text-muted-foreground" />
<p className="text-sm font-medium text-muted-foreground">On Order Units</p>
</div>
<p className="text-2xl font-bold">{data?.onOrderUnits.toLocaleString() || 0}</p>
</div>
<div>
<p className="text-sm font-medium text-muted-foreground">Order Cost</p>
<div className="flex items-baseline justify-between">
<div className="flex items-center gap-2">
<DollarSign className="h-4 w-4 text-muted-foreground" />
<p className="text-sm font-medium text-muted-foreground">On Order Cost</p>
</div>
<p className="text-2xl font-bold">{formatCurrency(data?.onOrderCost || 0)}</p>
</div>
<div className="col-span-2">
<p className="text-sm font-medium text-muted-foreground">Order Retail</p>
<div className="flex items-baseline justify-between">
<div className="flex items-center gap-2">
<ShoppingCart className="h-4 w-4 text-muted-foreground" />
<p className="text-sm font-medium text-muted-foreground">On Order Retail</p>
</div>
<p className="text-2xl font-bold">{formatCurrency(data?.onOrderRetail || 0)}</p>
</div>
</div>
<div className="h-[300px] w-full">
</div>
<div className="flex-1">
<div className="flex flex-col">
<div className="text-lg flex justify-center font-medium mb-4">Purchase Orders By Vendor</div>
<div className="h-[200px]">
<ResponsiveContainer width="100%" height="100%">
<PieChart>
<Pie
@@ -98,6 +119,9 @@ export function PurchaseMetrics() {
</PieChart>
</ResponsiveContainer>
</div>
</div>
</div>
</div>
</CardContent>
</>
)

63
inventory/src/components/dashboard/ReplenishmentMetrics.tsx
View File

@@ -1,8 +1,8 @@
import { useQuery } from "@tanstack/react-query"
import { CardHeader, CardTitle, CardContent } from "@/components/ui/card"
import { BarChart, Bar, ResponsiveContainer, XAxis, YAxis, Tooltip } from "recharts"
import config from "@/config"
import { formatCurrency } from "@/lib/utils"
import { Package, DollarSign, ShoppingCart } from "lucide-react" // Importing icons
interface ReplenishmentMetricsData {
totalUnitsToReplenish: number
@@ -30,61 +30,32 @@ export function ReplenishmentMetrics() {
return (
<>
<CardHeader>
<CardTitle className="text-lg font-medium">Replenishment Overview</CardTitle>
<CardTitle className="text-xl font-medium">Replenishment</CardTitle>
</CardHeader>
<CardContent>
<div className="grid grid-cols-3 gap-4 mb-6">
<div>
<div className="flex flex-col gap-4">
<div className="flex items-baseline justify-between">
<div className="flex items-center gap-2">
<Package className="h-4 w-4 text-muted-foreground" />
<p className="text-sm font-medium text-muted-foreground">Units to Replenish</p>
</div>
<p className="text-2xl font-bold">{data?.totalUnitsToReplenish.toLocaleString() || 0}</p>
</div>
<div>
<p className="text-sm font-medium text-muted-foreground">Total Cost</p>
<div className="flex items-baseline justify-between">
<div className="flex items-center gap-2">
<DollarSign className="h-4 w-4 text-muted-foreground" />
<p className="text-sm font-medium text-muted-foreground">Replenishment Cost</p>
</div>
<p className="text-2xl font-bold">{formatCurrency(data?.totalReplenishmentCost || 0)}</p>
</div>
<div>
<p className="text-sm font-medium text-muted-foreground">Total Retail</p>
<div className="flex items-baseline justify-between">
<div className="flex items-center gap-2">
<ShoppingCart className="h-4 w-4 text-muted-foreground" />
<p className="text-sm font-medium text-muted-foreground">Replenishment Retail</p>
</div>
<p className="text-2xl font-bold">{formatCurrency(data?.totalReplenishmentRetail || 0)}</p>
</div>
</div>
<div className="h-[300px] w-full">
<ResponsiveContainer width="100%" height="100%">
<BarChart data={data?.replenishmentByCategory || []}>
<XAxis
dataKey="category"
tickLine={false}
axisLine={false}
fontSize={12}
/>
<YAxis
tickLine={false}
axisLine={false}
fontSize={12}
tickFormatter={(value) => value.toLocaleString()}
/>
<Tooltip
formatter={(value: number, name: string) => [
name === "cost" ? formatCurrency(value) : value.toLocaleString(),
name === "cost" ? "Cost" : "Units"
]}
labelFormatter={(label) => `Category: ${label}`}
/>
<Bar
dataKey="units"
name="Units"
fill="#0088FE"
radius={[4, 4, 0, 0]}
/>
<Bar
dataKey="cost"
name="Cost"
fill="#00C49F"
radius={[4, 4, 0, 0]}
/>
</BarChart>
</ResponsiveContainer>
</div>
</CardContent>
</>
)

25
inventory/src/components/dashboard/SalesMetrics.tsx
View File

@@ -5,6 +5,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
import { useState } from "react"
import config from "@/config"
import { formatCurrency } from "@/lib/utils"
import { ClipboardList, Package, DollarSign, ShoppingCart } from "lucide-react"
interface SalesData {
totalOrders: number
@@ -44,7 +45,7 @@ export function SalesMetrics() {
return (
<>
<CardHeader className="flex flex-row items-center justify-between">
<CardTitle className="text-lg font-medium">Sales Overview</CardTitle>
<CardTitle className="text-xl font-medium">Sales Overview</CardTitle>
<Select value={period} onValueChange={setPeriod}>
<SelectTrigger className="w-[120px]">
<SelectValue placeholder="Select period" />
@@ -59,21 +60,33 @@ export function SalesMetrics() {
</Select>
</CardHeader>
<CardContent>
<div className="grid grid-cols-2 gap-4 mb-6">
<div>
<div className="flex flex-col gap-4">
<div className="flex items-baseline justify-between">
<div className="flex items-center gap-2">
<ClipboardList className="h-4 w-4 text-muted-foreground" />
<p className="text-sm font-medium text-muted-foreground">Total Orders</p>
</div>
<p className="text-2xl font-bold">{data?.totalOrders.toLocaleString() || 0}</p>
</div>
<div>
<div className="flex items-baseline justify-between">
<div className="flex items-center gap-2">
<Package className="h-4 w-4 text-muted-foreground" />
<p className="text-sm font-medium text-muted-foreground">Units Sold</p>
</div>
<p className="text-2xl font-bold">{data?.totalUnitsSold.toLocaleString() || 0}</p>
</div>
<div>
<div className="flex items-baseline justify-between">
<div className="flex items-center gap-2">
<DollarSign className="h-4 w-4 text-muted-foreground" />
<p className="text-sm font-medium text-muted-foreground">Cost of Goods</p>
</div>
<p className="text-2xl font-bold">{formatCurrency(data?.totalCogs || 0)}</p>
</div>
<div>
<div className="flex items-baseline justify-between">
<div className="flex items-center gap-2">
<ShoppingCart className="h-4 w-4 text-muted-foreground" />
<p className="text-sm font-medium text-muted-foreground">Revenue</p>
</div>
<p className="text-2xl font-bold">{formatCurrency(data?.totalRevenue || 0)}</p>
</div>
</div>

50
inventory/src/components/dashboard/StockMetrics.tsx
View File

@@ -3,6 +3,7 @@ import { CardHeader, CardTitle, CardContent } from "@/components/ui/card"
import { PieChart, Pie, ResponsiveContainer, Cell, Tooltip } from "recharts"
import config from "@/config"
import { formatCurrency } from "@/lib/utils"
import { Package, Layers, DollarSign, ShoppingCart } from "lucide-react" // Importing icons
interface StockMetricsData {
totalProducts: number
@@ -45,33 +46,53 @@ export function StockMetrics() {
return (
<>
<CardHeader>
<CardTitle className="text-lg font-medium">Stock Overview</CardTitle>
<CardTitle className="text-xl font-medium">Stock</CardTitle>
</CardHeader>
<CardContent>
<div className="grid grid-cols-2 gap-4 mb-6">
<div>
<p className="text-sm font-medium text-muted-foreground">Total Products</p>
<div className="flex justify-between gap-8">
<div className="flex-1">
<div className="flex flex-col gap-4">
<div className="flex items-baseline justify-between">
<div className="flex items-center gap-2">
<Package className="h-4 w-4 text-muted-foreground" />
<p className="text-sm font-medium text-muted-foreground">Products</p>
</div>
<p className="text-2xl font-bold">{data?.totalProducts.toLocaleString() || 0}</p>
</div>
<div>
<div className="flex items-baseline justify-between">
<div className="flex items-center gap-2">
<Layers className="h-4 w-4 text-muted-foreground" />
<p className="text-sm font-medium text-muted-foreground">Products In Stock</p>
</div>
<p className="text-2xl font-bold">{data?.productsInStock.toLocaleString() || 0}</p>
</div>
<div>
<p className="text-sm font-medium text-muted-foreground">Total Stock Units</p>
<div className="flex items-baseline justify-between">
<div className="flex items-center gap-2">
<Layers className="h-4 w-4 text-muted-foreground" />
<p className="text-sm font-medium text-muted-foreground">Stock Units</p>
</div>
<p className="text-2xl font-bold">{data?.totalStockUnits.toLocaleString() || 0}</p>
</div>
<div>
<p className="text-sm font-medium text-muted-foreground">Total Stock Cost</p>
<div className="flex items-baseline justify-between">
<div className="flex items-center gap-2">
<DollarSign className="h-4 w-4 text-muted-foreground" />
<p className="text-sm font-medium text-muted-foreground">Stock Cost</p>
</div>
<p className="text-2xl font-bold">{formatCurrency(data?.totalStockCost || 0)}</p>
</div>
<div className="col-span-2">
<p className="text-sm font-medium text-muted-foreground">Total Stock Retail</p>
<div className="flex items-baseline justify-between">
<div className="flex items-center gap-2">
<ShoppingCart className="h-4 w-4 text-muted-foreground" />
<p className="text-sm font-medium text-muted-foreground">Stock Retail</p>
</div>
<p className="text-2xl font-bold">{formatCurrency(data?.totalStockRetail || 0)}</p>
</div>
</div>
<div className="h-[300px] w-full">
</div>
<div className="flex-1">
<div className="flex flex-col">
<div className="text-lg flex justify-center font-medium mb-4">Stock Retail By Brand</div>
<div className="h-[200px]">
<ResponsiveContainer width="100%" height="100%">
<PieChart>
<Pie
@@ -98,6 +119,9 @@ export function StockMetrics() {
</PieChart>
</ResponsiveContainer>
</div>
</div>
</div>
</div>
</CardContent>
</>
)

4
inventory/src/components/dashboard/TopOverstockedProducts.tsx
View File

@@ -30,10 +30,10 @@ export function TopOverstockedProducts() {
return (
<>
<CardHeader>
<CardTitle className="text-lg font-medium">Top Overstocked Products</CardTitle>
<CardTitle className="text-xl font-medium">Top Overstocked Products</CardTitle>
</CardHeader>
<CardContent>
<ScrollArea className="h-[400px] w-full">
<ScrollArea className="h-[300px] w-full">
<Table>
<TableHeader>
<TableRow>

4
inventory/src/components/dashboard/TopReplenishProducts.tsx
View File

@@ -31,10 +31,10 @@ export function TopReplenishProducts() {
return (
<>
<CardHeader>
<CardTitle className="text-lg font-medium">Top Products to Replenish</CardTitle>
<CardTitle className="text-xl font-medium">Top Products To Replenish</CardTitle>
</CardHeader>
<CardContent>
<ScrollArea className="h-[400px] w-full">
<ScrollArea className="max-h-[650px] w-full overflow-y-auto">
<Table>
<TableHeader>
<TableRow>

2
inventory/src/components/layout/AppSidebar.tsx
View File

@@ -26,7 +26,7 @@ import { useLocation, useNavigate, Link } from "react-router-dom";
const items = [
{
title: "Dashboard",
title: "Overview",
icon: Home,
url: "/",
},

4
inventory/src/pages/Dashboard.tsx
View File

@@ -14,7 +14,7 @@ export function Dashboard() {
return (
<motion.div layout className="flex-1 space-y-4 p-4 md:p-8 pt-6">
<div className="flex items-center justify-between space-y-2">
<h2 className="text-3xl font-bold tracking-tight">Dashboard</h2>
<h2 className="text-3xl font-bold tracking-tight">Overview</h2>
</div>
{/* First row - Stock and Purchase metrics */}
@@ -32,7 +32,7 @@ export function Dashboard() {
<Card className="col-span-2">
<TopReplenishProducts />
</Card>
<div className="col-span-1 grid gap-4 grid-rows-2">
<div className="col-span-1 grid gap-4">
<Card>
<ReplenishmentMetrics />
</Card>