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

Standardize card layouts and fix more spacing

Browse Source
This commit is contained in:
Matt
2025-01-02 16:07:58 -05:00
parent 74fb67db18
commit c7b72875a9
4 changed files with 39 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
dashboard/src/components/dashboard/DateTime.jsx
View File

@@ -148,7 +148,7 @@ const DateTimeWeatherDisplay = ({ scaleFactor = 1 }) => {
case code >= 800 && code < 803:
return <CloudSun className={cn(iconProps, "text-gray-600")} />;
case code >= 803:
return <Cloud className={cn(iconProps, "text-gray-600")} />;
return <Cloud className={cn(iconProps, "text-gray-200")} />;
default:
return <CircleAlert className={cn(iconProps, "text-red-700")} />;
}
@@ -347,30 +347,30 @@ const DateTimeWeatherDisplay = ({ scaleFactor = 1 }) => {
);
return (
<div className="flex flex-col space-y-2 items-center w-full transition-opacity duration-300 ${mounted ? 'opacity-100' : 'opacity-0'}">
<div className="flex flex-col items-center w-full transition-opacity duration-300 ${mounted ? 'opacity-100' : 'opacity-0'}">
{/* Time Display */}
<Card className="bg-gradient-to-br from-slate-900 via-sky-800 to-cyan-800 dark:bg-slate-800 px-1 py-2 w-full hover:scale-[1.02] transition-transform duration-300">
<CardContent className="p-3">
<div className="flex justify-center items-baseline">
<Card className="bg-gradient-to-br mb-[7px] from-slate-900 via-sky-800 to-cyan-800 dark:bg-slate-800 px-1 py-2 w-full hover:scale-[1.02] transition-transform duration-300">
<CardContent className="p-3 h-[106px] flex items-center">
<div className="flex justify-center items-baseline w-full">
<div className={`transition-opacity duration-200 ${isTimeChanging ? 'opacity-60' : 'opacity-100'}`}>
<span className="text-6xl font-bold text-white">{hours}</span>
<span className="text-6xl font-bold text-white">:</span>
<span className="text-6xl font-bold text-white">{minutes}</span>
<span className="text-lg font-medium text-white/90 ml-1">{ampm}</span>
<span className="text-7xl font-bold text-white">{hours}</span>
<span className="text-7xl font-bold text-white">:</span>
<span className="text-7xl font-bold text-white">{minutes}</span>
<span className="text-xl font-medium text-white/90 ml-1">{ampm}</span>
</div>
</div>
</CardContent>
</Card>
{/* Date and Weather Display */}
<div className="grid grid-cols-2 gap-2 w-full">
<Card className="bg-gradient-to-br from-slate-900 via-violet-800 to-purple-800 aspect-square flex items-center justify-center">
<div className="h-[125px] mb-[6px] grid grid-cols-2 gap-2 w-full">
<Card className="h-full bg-gradient-to-br from-slate-900 via-violet-800 to-purple-800 flex items-center justify-center">
<CardContent className="h-full p-0">
<div className="flex flex-col items-center justify-center h-full">
<span className="text-6xl font-bold text-white">
<span className="text-7xl font-bold text-white">
{dateInfo.day}
</span>
<span className="text-xs font-bold text-white/70 mt-2">
<span className="text-sm font-bold text-white mt-2">
{dateInfo.weekday}
</span>
</div>
@@ -385,13 +385,13 @@ return (
weather.weather[0]?.id,
datetime.getHours() >= 18 || datetime.getHours() < 6
),
"flex items-center justify-center aspect-square cursor-pointer hover:brightness-110 transition-all relative"
"flex items-center justify-center cursor-pointer hover:brightness-110 transition-all relative"
)}>
<CardContent className="p-3">
<CardContent className="h-full p-3">
<div className="flex flex-col items-center">
{getWeatherIcon(weather.weather[0]?.id, datetime)}
<span className={cn(
"text-2xl font-bold ml-1 mt-2",
"text-3xl font-bold ml-1 mt-2",
getTemperatureColor(
weather.weather[0]?.id,
datetime.getHours() >= 18 || datetime.getHours() < 6

14
dashboard/src/components/dashboard/MiniRealtimeAnalytics.jsx
View File

@@ -110,28 +110,28 @@ const MiniRealtimeAnalytics = () => {
<div className="grid grid-cols-2 gap-2 mt-1 mb-2">
{summaryCard(
"Last 30 minutes",
"Last 30 Minutes",
"Active users",
basicData.last30MinUsers,
{
colorClass: "text-sky-200",
titleClass: "text-sky-100 font-bold text-md",
descriptionClass: "text-sky-200 text-md font-semibold",
background: "h-[150px] bg-gradient-to-br from-sky-900 to-sky-800",
descriptionClass: "pt-2 text-sky-200 text-md font-semibold",
background: "h-[150px] pt-2 bg-gradient-to-br from-sky-900 to-sky-800",
icon: Users,
iconColor: "text-sky-900",
iconBackground: "bg-sky-300"
}
)}
{summaryCard(
"Last 5 minutes",
"Last 5 Minutes",
"Active users",
basicData.last5MinUsers,
{
colorClass: "text-sky-200",
titleClass: "text-sky-100 font-bold text-md",
descriptionClass: "text-sky-200 text-md font-semibold",
background: "h-[150px] bg-gradient-to-br from-sky-900 to-sky-800",
descriptionClass: "pt-2 text-sky-200 text-md font-semibold",
background: "h-[150px] pt-2 bg-gradient-to-br from-sky-900 to-sky-800",
icon: Activity,
iconColor: "text-sky-900",
iconBackground: "bg-sky-300"
@@ -141,7 +141,7 @@ const MiniRealtimeAnalytics = () => {
<Card className="bg-gradient-to-br from-sky-900 to-sky-800 backdrop-blur-sm">
<CardContent className="p-4">
<div className="h-[200px]">
<div className="h-[230px]">
<ResponsiveContainer width="100%" height="100%">
<BarChart
data={basicData.byMinute}

16
dashboard/src/components/dashboard/MiniSalesChart.jsx
View File

@@ -69,7 +69,9 @@ const MiniStatCard = memo(({
trend,
trendValue,
onClick,
active = true
active = true,
titleClass = "text-sm font-bold text-gray-100",
descriptionClass = "text-sm font-semibold text-gray-200"
}) => (
<Card
className={`w-full ${background || 'bg-gradient-to-br from-gray-900 to-gray-800 backdrop-blur-md'} ${
@@ -78,7 +80,7 @@ const MiniStatCard = memo(({
onClick={onClick}
>
<CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
<CardTitle className="text-sm font-bold text-gray-100">
<CardTitle className={titleClass}>
{title}
</CardTitle>
{Icon && (
@@ -94,8 +96,8 @@ const MiniStatCard = memo(({
<div className={`text-3xl font-extrabold ${colorClass}`}>
{value}
</div>
<div className="mt-2 items-center justify-between flex text-sm font-semibold text-gray-200">
<span>Prev: {previousValue}</span>
<div className="mt-2 items-center justify-between flex">
<span className={descriptionClass}>Prev: {previousValue}</span>
{trend && (
<span
className={`flex items-center gap-0 px-1 py-0.5 rounded-full ${
@@ -240,6 +242,8 @@ const MiniSalesChart = ({ className = "" }) => {
trend={summaryStats.growth.revenue >= 0 ? "up" : "down"}
trendValue={`${Math.abs(Math.round(summaryStats.growth.revenue))}%`}
colorClass="text-emerald-200"
titleClass="text-emerald-100 font-bold text-md"
descriptionClass="text-emerald-200 text-md font-semibold"
icon={PiggyBank}
iconColor="text-emerald-900"
iconBackground="bg-emerald-300"
@@ -254,6 +258,8 @@ const MiniSalesChart = ({ className = "" }) => {
trend={summaryStats.growth.orders >= 0 ? "up" : "down"}
trendValue={`${Math.abs(Math.round(summaryStats.growth.orders))}%`}
colorClass="text-blue-200"
titleClass="text-blue-100 font-bold text-md"
descriptionClass="text-blue-200 text-md font-semibold"
icon={Truck}
iconColor="text-blue-900"
iconBackground="bg-blue-300"
@@ -280,7 +286,7 @@ const MiniSalesChart = ({ className = "" }) => {
</CardContent>
) : (
<CardContent className="p-4">
<div className="h-[200px]">
<div className="h-[230px]">
<ResponsiveContainer width="100%" height="100%">
<LineChart
data={data}

10
dashboard/src/components/dashboard/MiniStatCards.jsx
View File

@@ -386,7 +386,7 @@ const MiniStatCards = ({
value={formatCurrency(stats?.revenue || 0)}
description={
stats?.periodProgress < 100 ? (
<div className="flex items-center gap-1 text-sm">
<div className="flex items-center gap-1">
<span>Proj: </span>
{projectionLoading ? (
<Skeleton className="h-4 w-15" />
@@ -428,7 +428,7 @@ const MiniStatCards = ({
onDetailsClick={() => setSelectedMetric("orders")}
isLoading={loading || !stats}
variant="mini"
background="bg-gradient-to-br from-blue-900 to-blue-800"
background="h-[150px] bg-gradient-to-br from-blue-900 to-blue-800"
/>
<StatCard
@@ -447,7 +447,7 @@ const MiniStatCards = ({
onDetailsClick={() => setSelectedMetric("average_order")}
isLoading={loading || !stats}
variant="mini"
background="bg-gradient-to-br from-violet-900 to-violet-800"
background="h-[150px] bg-gradient-to-br from-violet-900 to-violet-800"
/>
<StatCard
@@ -455,7 +455,7 @@ const MiniStatCards = ({
value={stats?.shipping?.shippedCount || 0}
description={`${stats?.shipping?.locations?.total || 0} locations`}
colorClass="text-orange-200"
titleClass="text-orange-100 font-bold text-sm"
titleClass="text-orange-100 font-bold text-md"
descriptionClass="text-orange-200 text-md font-semibold"
icon={Package}
iconColor="text-orange-900"
@@ -463,7 +463,7 @@ const MiniStatCards = ({
onDetailsClick={() => setSelectedMetric("shipping")}
isLoading={loading || !stats}
variant="mini"
background="bg-gradient-to-br from-orange-900 to-orange-800"
background="h-[150px] bg-gradient-to-br from-orange-900 to-orange-800"
/>
</div>