66964a3218
Extracted repeated stat card logic in AdminAnalytics to a new AdminStatCard component and moved the trend indicator to its own file. Updated AdminAnalytics to use AdminStatCard for orders, revenue, vendors, and products, improving code maintainability and consistency. Also updated chart and loading skeleton handling for better UX.
32 lines
817 B
TypeScript
32 lines
817 B
TypeScript
"use client";
|
|
|
|
import { TrendingDown, TrendingUp } from "lucide-react";
|
|
|
|
// Trend indicator component for metric cards
|
|
export const TrendIndicator = ({
|
|
current,
|
|
previous,
|
|
}: {
|
|
current: number;
|
|
previous: number;
|
|
}) => {
|
|
if (!current || !previous) return null;
|
|
|
|
const percentChange = ((current - previous) / previous) * 100;
|
|
|
|
if (Math.abs(percentChange) < 0.1) return null;
|
|
|
|
return (
|
|
<div
|
|
className={`flex items-center text-xs font-medium ${percentChange >= 0 ? "text-green-500" : "text-red-500"}`}
|
|
>
|
|
{percentChange >= 0 ? (
|
|
<TrendingUp className="h-3 w-3 mr-1" />
|
|
) : (
|
|
<TrendingDown className="h-3 w-3 mr-1" />
|
|
)}
|
|
{Math.abs(percentChange).toFixed(1)}%
|
|
</div>
|
|
);
|
|
};
|