import React, { useState, useEffect } from 'react'; import { Head, Link } from '@inertiajs/react'; import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { TrendingUp, Receipt, Banknote, QrCode, CreditCard, Tag, AlertOctagon, Sparkles, Package, Calendar, ArrowUpRight, ShoppingCart, Users, Clock, Flame, Award } from '@/Components/AnimatedIcons'; interface Props { stats: { today_sales: number; today_bills: number; cash_sales: number; upi_sales: number; card_sales: number; discounts: number; voided_bills: number; }; topProducts: Array<{ product_name_snapshot: string; total_qty: number; total_sales: number; }>; salesTrend: Array<{ date: string; sales: number; bills: number; }>; } export default function Dashboard({ stats, topProducts, salesTrend }: Props) { const safeStats = { today_sales: Number(stats?.today_sales || 0), today_bills: Number(stats?.today_bills || 0), cash_sales: Number(stats?.cash_sales || 0), upi_sales: Number(stats?.upi_sales || 0), card_sales: Number(stats?.card_sales || 0), discounts: Number(stats?.discounts || 0), voided_bills: Number(stats?.voided_bills || 0), }; const safeTopProducts = topProducts || []; const safeSalesTrend = salesTrend || []; // Max qty for progress bar calculation const maxQty = Math.max(...safeTopProducts.map((p) => Number(p.total_qty || 0)), 1); const maxSalesTrend = Math.max(...safeSalesTrend.map((s) => Number(s.sales || 0)), 1); // Active theme accent state (Pink vs SeaGreen) const [accent, setAccent] = useState<'pink' | 'seagreen'>(() => { if (typeof window !== 'undefined') { return (localStorage.getItem('admin_accent_color') as any) || 'pink'; } return 'pink'; }); useEffect(() => { const handler = () => { const current = (localStorage.getItem('admin_accent_color') as any) || 'pink'; setAccent(current); }; window.addEventListener('theme_accent_changed', handler); return () => window.removeEventListener('theme_accent_changed', handler); }, []); const isPink = accent === 'pink'; // Accent helper classes const accentText = isPink ? 'text-[#FF0D8F] dark:text-[#FF4DB8]' : 'text-[#0CA996] dark:text-[#00C8B2]'; const accentBg = isPink ? 'bg-[#FF0D8F]' : 'bg-[#0CA996]'; const accentHoverBg = isPink ? 'hover:bg-[#E0067B]' : 'hover:bg-[#098777]'; const accentBadge = isPink ? 'bg-[#FF0D8F]/10 text-[#FF0D8F] border-2 shadow-2xs border-[#FF0D8F]/20 dark:bg-[#FF0D8F]/20 dark:text-[#FFC1E1]' : 'bg-[#0CA996]/10 text-[#0CA996] border-2 shadow-2xs border-[#0CA996]/20 dark:bg-[#0CA996]/20 dark:text-[#00C8B2]'; const accentGradient = isPink ? 'from-[#FF0D8F] to-[#E0067B]' : 'from-[#0CA996] to-[#098777]'; return (

{/* HERO WELCOME HEADER BANNER */}

Real-Time Store Performance Analytics

Owner Analytics & Business Dashboard

Monitor live revenue metrics, payment channel settlements, top bakery cake items, and daily billing history.

Financial Reports Open POS Terminal

{/* TOP HERO KPI CARDS GRID */}

{/* Card 1: Today Net Sales */}

Today Net Revenue ₹{safeStats.today_sales.toFixed(2)}

Live POS Settlements Updated

{/* Card 2: Confirmed Bills */}

Confirmed Bills

{safeStats.today_bills}

Active orders fulfilled Today

{/* Card 3: Cash Collection */}

Cash Collection

₹{safeStats.cash_sales.toFixed(2)}

Physical register cash In Drawer

{/* Card 4: UPI QR Sales */}

UPI QR Digital

₹{safeStats.upi_sales.toFixed(2)}

Instant QR settlements Instant

{/* SECOND ROW FINANCIAL TILES */}

Card Payments ₹{safeStats.card_sales.toFixed(2)} POS Machine Swipes

Discounts Given ₹{safeStats.discounts.toFixed(2)} Total Bill Concessions

Voided Bills {safeStats.voided_bills} Cancelled Transactions

{/* PINTEREST MASONRY SECTION: Top Items & Sales History */}

{/* Top Selling Bakery Items (7 Cols) */}

Top Selling Bakery Items Today

Ranked by volume sold in POS terminal

Top Products

{topProducts.map((p, idx) => { const percentage = Math.round((p.total_qty / maxQty) * 100); return (

#{idx + 1}

{p.product_name_snapshot} Qty Sold: {p.total_qty} units

₹{Number(p.total_sales).toFixed(2)} Gross Total

{/* Progress Bar */}

); })} {topProducts.length === 0 && (

No bakery items sold yet today.

)}

{/* 7-Day Sales Trend & Quick Operations (5 Cols) */}

{/* 7-Day Trend Card */}

7-Day Sales History

Recent store revenue breakdown

{salesTrend.map((row, idx) => (

{idx + 1}

{row.date} {row.bills} bills completed

₹{Number(row.sales).toFixed(2)}

))} {salesTrend.length === 0 && (

No historical sales recorded.

)}

{/* Quick Operations Tile */}

Quick Operations Hub

POS Terminal All Invoices Daily Closing Customer CRM

); }