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

Fix and restyle salesmetrics component

Browse Source
This commit is contained in:
Matt
2025-01-18 01:12:44 -05:00
parent 9003300d0d
commit b5a354a1de
4 changed files with 52 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -66,7 +66,7 @@ export function BestSellers() {
</CardHeader>
<CardContent>
<TabsContent value="products">
<ScrollArea className="h-[400px] w-full">
<ScrollArea className="h-[385px] w-full">
<Table>
<TableHeader>
<TableRow>

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

@@ -115,8 +115,8 @@ export function ForecastMetrics() {
type="monotone"
dataKey="revenue"
name="Revenue"
stroke="#00C49F"
fill="#00C49F"
stroke="#8884D8"
fill="#8884D8"
fillOpacity={0.2}
/>
</AreaChart>

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

@@ -6,7 +6,7 @@ import config from "@/config"
import { formatCurrency } from "@/lib/utils"
import { ClipboardList, Package, DollarSign, ShoppingCart } from "lucide-react"
import { DateRange } from "react-day-picker"
import { addDays } from "date-fns"
import { addDays, format } from "date-fns"
import { DateRangePicker } from "@/components/ui/date-range-picker-narrow"
interface SalesData {
@@ -45,7 +45,7 @@ export function SalesMetrics() {
return (
<>
<CardHeader className="flex flex-row items-center justify-between pr-4">
<CardHeader className="flex flex-row items-center justify-between pr-5">
<CardTitle className="text-xl font-medium">Sales Overview</CardTitle>
<div className="w-[230px]">
<DateRangePicker
@@ -57,80 +57,60 @@ export function SalesMetrics() {
/>
</div>
</CardHeader>
<CardContent>
<CardContent className="py-0 -mb-2">
<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>
<p className="text-lg font-bold">{data?.totalOrders.toLocaleString() || 0}</p>
</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>
<p className="text-lg font-bold">{data?.totalUnitsSold.toLocaleString() || 0}</p>
</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>
<p className="text-lg font-bold">{formatCurrency(data?.totalCogs || 0)}</p>
</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>
<p className="text-lg font-bold">{formatCurrency(data?.totalRevenue || 0)}</p>
</div>
</div>
<div className="h-[300px] w-full">
<div className="h-[250px] w-full">
<ResponsiveContainer width="100%" height="100%">
<AreaChart data={data?.dailySales || []}>
<AreaChart
data={data?.dailySales || []}
margin={{ top: 30, right: 0, left: -60, bottom: 0 }}
>
<XAxis
dataKey="date"
tickLine={false}
axisLine={false}
fontSize={12}
tick={false}
/>
<YAxis
yAxisId="left"
tickLine={false}
axisLine={false}
fontSize={12}
tickFormatter={(value) => value.toLocaleString()}
/>
<YAxis
yAxisId="right"
orientation="right"
tickLine={false}
axisLine={false}
fontSize={12}
tickFormatter={(value) => formatCurrency(value)}
tick={false}
/>
<Tooltip
formatter={(value: number, name: string) => [
name === "units" ? value.toLocaleString() : formatCurrency(value),
name === "units" ? "Units" : name === "revenue" ? "Revenue" : "COGS"
]}
labelFormatter={(label) => `Date: ${label}`}
formatter={(value: number) => [formatCurrency(value), "Revenue"]}
labelFormatter={(date) => format(new Date(date), 'MMM d, yyyy')}
/>
<Area
yAxisId="left"
type="monotone"
dataKey="units"
name="Units"
stroke="#0088FE"
fill="#0088FE"
fillOpacity={0.2}
/>
<Area
yAxisId="right"
type="monotone"
dataKey="revenue"
name="Revenue"
@@ -138,15 +118,6 @@ export function SalesMetrics() {
fill="#00C49F"
fillOpacity={0.2}
/>
<Area
yAxisId="right"
type="monotone"
dataKey="cogs"
name="COGS"
stroke="#FF8042"
fill="#FF8042"
fillOpacity={0.2}
/>
</AreaChart>
</ResponsiveContainer>
</div>