"use client"; import { useTranslations } from "next-intl"; import { TrendingUp, Activity, DollarSign, ShoppingCart, Users, Search, Settings, Bell, MoreVertical, } from "lucide-react"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Badge } from "@/components/ui/badge"; import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell, } from "recharts"; import { cn } from "@/lib/utils"; // --- Summary Stats Card --- interface SummaryCardProps { label: string; value: string; subValue?: string; icon: React.ReactNode; iconBg?: string; badge?: React.ReactNode; } export function SummaryStatCard({ label, value, subValue, icon, iconBg, badge, }: SummaryCardProps) { return (
{icon}

{label}

{value}

{badge}
{subValue && (

{subValue}

)}
); } // --- Revenue Bar Chart --- export function RevenueBarChart({ data, title, }: { data: any[]; title?: string; }) { // Map data to match simpler months for display const chartData = data.map((d) => ({ name: d.month, revenue: d.income, // Remap income to revenue })); return ( {title || "Total Revenue 2025"} `$${value}`} /> ); } // --- Customer Volume Donut Chart --- const CUSTOMER_DATA = [ { name: "New Customer", value: 15, color: "#1A564F" }, // Dark Green { name: "Current Customer", value: 85, color: "#E5E7EB" }, // Gray ]; export function CustomerVolumeChart({ title, newCustomerLabel, currentCustomerLabel, }: { title?: string; newCustomerLabel?: string; currentCustomerLabel?: string; }) { const newLabel = newCustomerLabel || "New Customer"; const currentLabel = currentCustomerLabel || "Current Customer"; const customerData = [ { name: newLabel, value: 15, color: "#1A564F" }, // Dark Green { name: currentLabel, value: 85, color: "#E5E7EB" }, // Gray ]; return ( {title || "Customer Volume"}
{CUSTOMER_DATA.map((entry, index) => ( ))} {/* Center Label */}
+15% {newLabel}
{/* Legend */}
15% {newLabel}
85% {currentLabel}
); } // --- Traffic Analytics --- // Mock Logos const GoogleLogo = () => ( ); const InstagramLogo = () => ( ); const MetaLogo = () => ( ); const LinkedInLogo = () => ( ); export function TrafficAnalyticCard({ title, subtitle, }: { title?: string; subtitle?: string; }) { const data = [ { name: "Google", value: "220K", color: "bg-gray-100", width: "90%", icon: GoogleLogo, }, { name: "Instagram", value: "124K", color: "bg-gray-100", width: "50%", icon: InstagramLogo, }, { name: "Meta", value: "64K", color: "bg-gray-100", width: "30%", icon: MetaLogo, }, { name: "Linkedin", value: "61K", color: "bg-gray-100", width: "25%", icon: LinkedInLogo, }, ]; return ( {title || "Traffic Analytic"}

298,475

{subtitle || "Total Views from 4 platforms"}

{data.map((item) => (
{item.value}
))} ); } // --- Sales Funnel --- interface SalesFunnelProps { title?: string; productViewLabel?: string; addToCartLabel?: string; initiateCheckoutLabel?: string; purchaseLabel?: string; insightsLabel?: string; dropoffLabel?: string; } export function SalesFunnelChart({ title, productViewLabel, addToCartLabel, initiateCheckoutLabel, purchaseLabel, insightsLabel, dropoffLabel, }: SalesFunnelProps) { return ( {title || "Sales Funnel"} {/* Simplified CSS Funnel Representation */}
{/* Step 1: Product View */}

{productViewLabel || "Product View"}

4.3K

{/* Step 2: Add to Cart (Highlighted) */}

{addToCartLabel || "Add to Cart"}

914

{insightsLabel || "Insights"}{" "}

{/* Step 3: Initiate Checkout */}

{initiateCheckoutLabel || "Initiate Checkout"}

872

{/* Step 4: Purchase */}

{purchaseLabel || "Purchase"}

463

{/* Legend / Dropoff Label */}
{dropoffLabel || "Funnel showing user drop-off from visit to purchase."}
); } function ArrowRightIcon({ className }: { className?: string }) { return ( ); } // --- Top Selling Products List --- interface TopProduct { name: string; price: string | number; rating?: number; image?: string; totalSold?: number; } const DEFAULT_PRODUCTS: TopProduct[] = [ { name: "Stylish Running Shoes (Blue, 8)", price: "$22", rating: 4, image: "https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=100&q=80", }, { name: "Max Women Sling Bag", price: "$10", rating: 3, image: "https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=100&q=80", }, { name: "Men Slim Fit Casual Shirt", price: "$100", rating: 4, image: "https://images.unsplash.com/photo-1596755094514-f87e34085b2c?w=100&q=80", }, { name: "Thunder, With 60H Backup...", price: "$240", rating: 5, image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=100&q=80", }, ]; export function TopSellingProductsList({ title, products, }: { title?: string; products?: TopProduct[]; }) { const t = useTranslations(); const displayProducts = products || DEFAULT_PRODUCTS; return ( {title || t("vendor.topProducts")} {displayProducts.length === 0 ? (

{t("vendor.dashboardWidgets.noProductsYet")}

) : ( displayProducts.slice(0, 5).map((prod, i) => { const priceDisplay = typeof prod.price === "number" ? `$${prod.price.toFixed(2)}` : prod.price; const rating = prod.rating ?? 0; return (
{prod.image ? ( {prod.name} ) : (
{t("vendor.dashboardWidgets.noImage")}
)}

{prod.name}

{[...Array(5)].map((_, starI) => ( {starI < rating ? ( "★" ) : ( ★ )} ))}
{prod.totalSold !== undefined && (

{t("vendor.dashboardWidgets.soldCount", { count: prod.totalSold, })}

)}
{priceDisplay}
); }) )} ); } // Export a dummy for non-used components to avoid build errors if still imported export function WelcomeCard({ name }: { name: string }) { return null; } export function DetailedStatsCard() { return null; } export function SaleByGenderChart() { return null; } export function YearlySalesChart() { return null; } export function BestSalesmanTable() { return null; }