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

Fix statcards layouts + related app changes

Browse Source
This commit is contained in:
Matt
2024-12-22 23:42:28 -05:00
parent 3abd63b836
commit 6936cf84ca
2 changed files with 30 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
dashboard/src/App.jsx
View File

@@ -89,25 +89,25 @@ const DashboardLayout = () => {
<Navigation />
<div className="p-4 space-y-4">
<div className="grid grid-cols-1 xl:grid-cols-6 gap-4">
<div className="2xl:col-span-4 col-span-6">
<div className="xl:col-span-4 col-span-6">
<div className="space-y-4 h-full w-full">
<StatCards />
</div>
</div>
<div className="xl:col-span-2 col-span-6 h-[530px] 2xl:block hidden">
<div className="xl:col-span-2 col-span-6 h-[500px] xl:h-[643px] 2xl:h-[510px] lg:hidden xl:block">
<div className="h-full">
<div className="h-full"><EventFeed /></div>
</div>
</div>
</div>
<div className="grid grid-cols-12 gap-4">
<div className="col-span-12 lg:col-span-6 xl:col-span-6 2xl:hidden h-[740px]">
<div className="hidden lg:col-span-6 lg:block xl:hidden h-[740px]">
<EventFeed />
</div>
<div className="col-span-12 lg:col-span-6 xl:col-span-6 2xl:col-span-4 h-[740px]">
<div className="col-span-12 lg:col-span-6 xl:col-span-4 h-[740px]">
<ProductGrid />
</div>
<div className="col-span-12 2xl:col-span-8 h-full w-full flex">
<div className="col-span-12 xl:col-span-8 h-full w-full flex">
<SalesChart className="w-full h-full"/>
</div>
</div>

43
dashboard/src/components/dashboard/StatCards.jsx
View File

@@ -69,6 +69,7 @@ import {
import { Skeleton } from "@/components/ui/skeleton";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress";
const formatCurrency = (value, minimumFractionDigits = 0) => {
if (!value || isNaN(value)) return "$0";
@@ -939,7 +940,8 @@ const StatCard = ({
onClick,
info,
onDetailsClick,
isLoading = false
isLoading = false,
progress
}) => (
<Card
className={`${className} ${onClick || onDetailsClick ? "cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors" : ""}`}
@@ -966,22 +968,25 @@ const StatCard = ({
<Skeleton className="h-4 w-24" />
</>
) : (
<>
<div className={`text-2xl font-bold ${colorClass}`}>
{valuePrefix}{value}{valueSuffix}
</div>
{description && (
<div className="text-sm text-muted-foreground mt-2 items-center gap-2 flex">
{description}
{trend && (
<span className={`flex items-center gap-1 ${trend === 'up' ? 'text-emerald-600 dark:text-emerald-400' : 'text-rose-600 dark:text-rose-400'}`}>
{trend === 'up' ? <ArrowUp className="w-4 h-4" /> : <ArrowDown className="w-4 h-4" />}
{trendPrefix}{trendValue}{trendSuffix}
</span>
)}
<div className="space-y-2">
<div>
<div className={`text-2xl font-bold ${colorClass}`}>
{valuePrefix}{value}{valueSuffix}
</div>
)}
</>
{description && (
<div className="text-sm text-muted-foreground mt-2 items-center gap-2 flex">
{description}
{trend && (
<span className={`flex items-center gap-1 ${trend === 'up' ? 'text-emerald-600 dark:text-emerald-400' : 'text-rose-600 dark:text-rose-400'}`}>
{trend === 'up' ? <ArrowUp className="w-4 h-4" /> : <ArrowDown className="w-4 h-4" />}
{trendPrefix}{trendValue}{trendSuffix}
</span>
)}
</div>
)}
</div>
</div>
)}
</CardContent>
</Card>
@@ -1229,6 +1234,7 @@ const StatCards = ({
setDetailDataLoading(prev => ({ ...prev, [metric]: false }));
}
}, [timeRange, startDate, endDate, shouldUseLast30Days, setCacheData, getCacheData]);
// Corrected preloadDetailData function
const preloadDetailData = useCallback(() => {
const metrics = [
@@ -1595,15 +1601,16 @@ const StatCards = ({
</div>
</CardHeader>
<CardContent className="p-6 pt-0">
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-3 2xl:grid-cols-4 gap-2 md:gap-3">
<StatCard
title="Total Revenue"
value={formatCurrency(stats?.revenue || 0)}
description={
stats?.periodProgress < 100
? `${stats.periodProgress.toFixed(1)}% complete • Projected: ${formatCurrency(stats.projectedRevenue)}`
? <span><span className="md:hidden">Proj: </span><span className="hidden md:inline">Projected: </span>{formatCurrency(stats.projectedRevenue)}</span>
: `Previous: ${formatCurrency(stats.prevPeriodRevenue)}`
}
progress={stats?.periodProgress < 100 ? stats.periodProgress : undefined}
trend={revenueTrend?.trend}
trendValue={revenueTrend?.value ? formatPercentage(revenueTrend.value) : null}
colorClass="text-green-600 dark:text-green-400"