import { Head, router } from "@inertiajs/react"; import { useState } from "react"; import { Sparkles, Filter, TrendingUp, Target, ShoppingBag, Users, SearchX, Briefcase, Download, RotateCcw, SlidersHorizontal, } from "lucide-react"; import AppLayout from "@/layouts/app-layout"; import { Card, CardContent, CardHeader, CardTitle, CardDescription, } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { CrmSelect } from "@/components/crm-select"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; import { StatChip } from "@/components/crm/global-card"; const months = [ "Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember", ]; // Opsi Tahun (Menampilkan 5 tahun ke belakang dan 1 tahun ke depan) const currentYearNum = new Date().getFullYear(); const yearOptions = Array.from({ length: 7 }, (_, i) => currentYearNum - 5 + i); const money = (value: number | string | null | undefined) => new Intl.NumberFormat("id-ID", { style: "currency", currency: "IDR", maximumFractionDigits: 0, }).format(Number(value) || 0); const formatNumber = (value: number | string | null | undefined) => new Intl.NumberFormat("id-ID").format(Number(value) || 0); type Row = { sales_id: number; sales_name: string; target_amount: number; actual_amount: number; amount_percent: number; target_qty: number; actual_qty: number; qty_percent: number; target_visits: number; actual_visits: number; visit_percent: number; target_orders: number; actual_orders: number; order_percent: number; }; type Props = { rows: Row[]; sales: { id: number; name: string }[]; filters: { year: number; month: number; sales_id: number | null }; }; export default function SalesPerformance({ rows, sales, filters }: Props) { const [year, setYear] = useState(String(filters.year)); const [month, setMonth] = useState(String(filters.month)); const [salesId, setSalesId] = useState( filters.sales_id ? String(filters.sales_id) : "", ); const apply = () => router.get( "/crm/sales/performance", { year, month, sales_id: salesId || undefined }, { preserveState: true, preserveScroll: true }, ); const reset = () => { const defaultYear = String(new Date().getFullYear()); const defaultMonth = String(new Date().getMonth() + 1); const defaultSalesId = ""; setYear(defaultYear); setMonth(defaultMonth); setSalesId(defaultSalesId); router.get( "/crm/sales/performance", { year: defaultYear, month: defaultMonth }, { preserveState: true, preserveScroll: true }, ); }; const totalTargetAmount = rows.reduce((n, r) => n + r.target_amount, 0); const totalActualAmount = rows.reduce((n, r) => n + r.actual_amount, 0); const totalTargetQty = rows.reduce((n, r) => n + r.target_qty, 0); const totalActualQty = rows.reduce((n, r) => n + r.actual_qty, 0); const overallAchievement = totalTargetAmount > 0 ? Math.round((totalActualAmount / totalTargetAmount) * 100) : 0; return (

{/* Header Top Bar */}

Sales Performance Analytics

Realtime KPI

Evaluasi pencapaian target penjualan, kuantitas produk, kunjungan, dan pesanan tim sales.

{/* 🌟 FILTER CONTROL BAR */}

Filter Parameter Analytics

Sesuaikan periode & anggota tim untuk menampilkan data terfilter

{/* Menggunakan flex-wrap dan justify-center */}

{/* Dropdown 1: Tahun */}

setYear(e.target.value)} > {yearOptions.map((y) => ( ))}

{/* Dropdown 2: Bulan */}

setMonth(e.target.value)} > {months.map((m, i) => ( ))}

{/* Dropdown 3: Tim Sales */}

setSalesId(e.target.value)} > {sales.map((s) => ( ))}

{/* Group Tombol Aksi */}

{/* StatChip Grid */}

{/* Table Section */}

Detail Matriks Kinerja Periode Analisis:{" "} {months[filters.month - 1] ?? "-"}{" "} {filters.year}

{rows.length} Personil Aktif

Sales Person Penjualan (IDR) Kuantitas (Qty) Kunjungan (Visit) Order Dihasilkan {rows.length ? ( rows.map((r) => (

{r.sales_name .slice(0, 2) .toUpperCase()}

{r.sales_name}

ID: # {r.sales_id}

{/* Omset / Penjualan */}

{money( r.actual_amount, )} /{" "} {money( r.target_amount, )}

{/* Qty */}

{formatNumber( r.actual_qty, )} /{" "} {formatNumber( r.target_qty, )}

{/* Visit */}

{ r.actual_visits }{" "} Visit /{" "} { r.target_visits }

{/* Order */}

{ r.actual_orders }{" "} Order /{" "} { r.target_orders }

)) ) : (

Belum ada data ditemukan

Belum ada rekam kinerja sales pada periode atau filter yang Anda pilih.

)}

); } function ProgressBar({ percent }: { percent: number }) { const isGood = percent >= 80; const isMedium = percent >= 50 && percent < 80; const barColor = isGood ? "bg-emerald-500" : isMedium ? "bg-amber-500" : "bg-rose-500"; const badgeStyle = isGood ? "bg-emerald-50 text-emerald-700" : isMedium ? "bg-amber-50 text-amber-700" : "bg-rose-50 text-rose-700"; return (

{percent}%

); }