import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import StatisticCardLarge from '@/components/dashboard/StatisticCardLarge'; import { AlertTriangle, BarChart3, Briefcase, Building2, DollarSign, Package, ShoppingBag, ShoppingCart, Truck, UserCheck, Users, Warehouse, } from 'lucide-react'; import type { ElementType } from 'react'; import { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, ComposedChart, Legend, Line, LineChart, Pie, PieChart, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts'; // ─── Icon mapping (iconKey string → Lucide component) ──────────────────────── const ICON_MAP: Record = { 'dollar-sign': DollarSign, 'shopping-bag': ShoppingBag, 'bar-chart-3': BarChart3, 'shopping-cart': ShoppingCart, 'package': Package, 'alert-triangle':AlertTriangle, 'truck': Truck, 'user-check': UserCheck, 'users': Users, 'briefcase': Briefcase, 'building-2': Building2, 'warehouse': Warehouse, }; // ─── Types ─────────────────────────────────────────────────────────────────── interface StatKpi { iconKey: string; iconBg?: string; iconColor?: string; title: string; value: string; change?: string; changeType?: 'up' | 'down' | 'neutral' | 'none'; } interface ErpDashboardData { statsRow1: StatKpi[]; statsRow2: StatKpi[]; statsRow3: StatKpi[]; purchaseVsSales: { month: string; sales: number; purchase: number }[]; stockMovement: { month: string; inflow: number; outflow: number }[]; revenueExpense: { month: string; revenue: number; expense: number; profit: number }[]; lowStockItems: { name: string; sku: string; stock: number; reorderLevel: number }[]; recentPurchases: { id: string; date: string; supplier: string; amount: string; status: string }[]; } // ─── Static supplemental data (HR / task modules not yet implemented) ──────── const employeeByDept = [ { name: 'Operations', value: 42 }, { name: 'Sales', value: 28 }, { name: 'Finance', value: 18 }, { name: 'HR', value: 12 }, { name: 'IT', value: 16 }, { name: 'Marketing', value: 14 }, ]; const DEPT_COLORS = ['#6366f1', '#10b981', '#f59e0b', '#ef4444', '#3b82f6', '#ec4899']; const userGrowth = [ { month: 'Jan', employees: 118, contacts: 840 }, { month: 'Feb', employees: 121, contacts: 910 }, { month: 'Mar', employees: 124, contacts: 980 }, { month: 'Apr', employees: 126, contacts: 1050 }, { month: 'May', employees: 128, contacts: 1140 }, { month: 'Jun', employees: 128, contacts: 1230 }, { month: 'Jul', employees: 130, contacts: 1310 }, ]; const recentEmployees = [ { name: 'Ayesha Akter', role: 'Sales Executive', dept: 'Sales', joined: 'Jul 20', status: 'Active' }, { name: 'Rafiqul Islam', role: 'Accountant', dept: 'Finance', joined: 'Jul 18', status: 'Active' }, { name: 'Suma Begum', role: 'HR Officer', dept: 'HR', joined: 'Jul 15', status: 'Active' }, { name: 'Karim Mia', role: 'Warehouse Lead', dept: 'Operations', joined: 'Jul 12', status: 'Active' }, ]; const taskSummary = [ { label: 'Open', count: 38, color: 'bg-blue-100 text-blue-800' }, { label: 'In Progress', count: 24, color: 'bg-yellow-100 text-yellow-800' }, { label: 'Completed', count: 91, color: 'bg-green-100 text-green-800' }, { label: 'Overdue', count: 7, color: 'bg-red-100 text-red-800' }, ]; const statusColors: Record = { Received: 'bg-green-100 text-green-800', Ordered: 'bg-blue-100 text-blue-800', Pending: 'bg-yellow-100 text-yellow-800', Cancelled: 'bg-red-100 text-red-800', }; // ─── KPI row helper ─────────────────────────────────────────────────────────── function KpiRow({ stats }: { stats: StatKpi[] }) { return (
{stats.map((s, i) => ( ))}
); } // ─── Component ──────────────────────────────────────────────────────────────── export default function ErpCentralDashboard({ data = {} as ErpDashboardData }: { data?: ErpDashboardData }) { const { statsRow1 = [], statsRow2 = [], statsRow3 = [], purchaseVsSales = [], stockMovement = [], revenueExpense = [], lowStockItems = [], recentPurchases = [], } = data; return (
{/* KPI row 1 — Sales & Purchases (date-filtered) */} {/* KPI row 2 — Products, stock, contacts */} {/* KPI row 3 — Users, contacts, branches, stock */} {/* Charts row 1 — Purchase vs Sales + Stock Movement */}
Purchase vs Sales Monthly purchase cost vs sales revenue
`${(v / 1000).toFixed(0)}k`} /> v.toLocaleString()} />
Stock Movement Monthly inflow vs outflow (units)
{/* Charts row 2 — Revenue/Expense/Profit + Employee Distribution (static) */}
Revenue · Expense · Profit Monthly financial overview
`${(v / 1000).toFixed(0)}k`} /> v.toLocaleString()} />
Employees by Department Headcount distribution
`${value}`}> {employeeByDept.map((_, i) => ( ))} [v, name]} />
{/* Charts row 3 — Employee & Contact growth (static) */} Employee & Contact Growth Monthly headcount and CRM contact count
{/* Task summary badges (static) */}
{taskSummary.map((t) => ( {t.label} {t.count} ))}
{/* Tables row — Low stock + Recent POs */}
Low Stock Alerts
Items below reorder threshold {lowStockItems.length === 0 ? ( ) : lowStockItems.map((item, i) => ( ))}
Item Stock Reorder At
No low stock items

{item.name}

{item.sku}

 {item.stock} {item.reorderLevel}
Recent Purchase Orders Latest supplier orders in selected range {recentPurchases.length === 0 ? ( ) : recentPurchases.map((po, i) => ( ))}
PO # Supplier Amount Status
No purchase orders in range

{po.id}

{po.date}

 {po.supplier} {po.amount} {po.status}
{/* Recent employees table (static) */} Recently Joined Employees New hires this month {recentEmployees.map((e) => ( ))}
Name Role Department Joined Status
{e.name} {e.role} {e.dept} {e.joined} {e.status}
); }