'use client'; import React from 'react'; import { BarChart3, TrendingUp, Users, MapPin, Calendar, Download, Filter, CheckCircle2, XCircle, LayoutDashboard, Loader2, Wallet } from "lucide-react"; import type { DashboardKpis, MonthlyStatItem, DriverStatItem, GovernorateStatItem } from '@/backend/actions/MonthlyAnalytics'; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"; import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table"; import type { MonthlyAnalyticsState, MonthlyAnalyticsHandlers } from '@/backend/hooks/useMonthlyAnalytics'; interface Props { state: MonthlyAnalyticsState; handlers: MonthlyAnalyticsHandlers; } /** * MonthlyAnalyticsView * A premium dashboard for logistics analytics, adhering to Meshwar's futuristic dark UI. * Features: Single-screen layout, RTL support, high-contrast data visualization. */ export const MonthlyAnalyticsView = ({ state, handlers }: Props) => { const { isLoading, analyticsData, filterForm } = state; const { handleFilterChange, handleApplyFilters, handleExportClick } = handlers; return
{/* --- HEADER & FILTERS SECTION --- */}

الإحصائيات والتحليلات

مراقبة أداء العمليات اللوجستية والنمو الشهري

{ e.preventDefault(); handleApplyFilters(); }} className="flex flex-wrap items-center gap-3" data-api-unique-id='monthlyanalyticsview-re6b53537e1e56d42-s1828789020' data-api-unique-page-name='src/backend/components/MonthlyAnalyticsView'>
الفترة:
handleFilterChange('startDate', e.target.value)} data-api-unique-id='monthlyanalyticsview-rdcfc8e3454642eb7-s1828789020' data-api-unique-page-name='src/backend/components/MonthlyAnalyticsView' />
handleFilterChange('endDate', e.target.value)} data-api-unique-id='monthlyanalyticsview-r6a53db494322bb87-s1828789020' data-api-unique-page-name='src/backend/components/MonthlyAnalyticsView' />
{/* --- MAIN DASHBOARD CONTENT --- */}
{isLoading ?

جاري استرجاع البيانات التحليلية...

: !analyticsData ?

لا توجد بيانات متاحة للفترة المحددة

: <> {/* --- KPI SECTION --- */}
} color="primary" data-api-unique-id='monthlyanalyticsview-rd53a699ee807d650-s1828789020' data-api-unique-page-name='src/backend/components/MonthlyAnalyticsView' /> } color="secondary" data-api-unique-id='monthlyanalyticsview-r89f8283c0d4b3fa0-s1828789020' data-api-unique-page-name='src/backend/components/MonthlyAnalyticsView' /> } color="success" data-api-unique-id='monthlyanalyticsview-rd11fe18b3f5f4960-s1828789020' data-api-unique-page-name='src/backend/components/MonthlyAnalyticsView' /> } color="destructive" data-api-unique-id='monthlyanalyticsview-r6846a1f68dbd0970-s1828789020' data-api-unique-page-name='src/backend/components/MonthlyAnalyticsView' /> } color="secondary" format="currency" data-api-unique-id='monthlyanalyticsview-rf9f96f78cd04e83d-s1828789020' data-api-unique-page-name='src/backend/components/MonthlyAnalyticsView' />
{/* --- ANALYTICS GRID --- */}
{/* --- TREND CHART AREA --- */}
أداء الطلبات لآخر 12 شهراً

التقلبات الشهرية لنمو حجم العمليات
الشهر عدد الطلبات الحالة النسبية {analyticsData.monthlyTrend.length > 0 ? analyticsData.monthlyTrend.map((item, index) => {item.month} {item.order_count.toLocaleString()}
) : لا توجد بيانات زمنية}
{/* --- SIDE ANALYTICS AREA --- */}
}
; }; /** * KPI Card Sub-component */ interface KPICardProps { title: string; value: number; icon: React.ReactNode; color: 'primary' | 'secondary' | 'success' | 'destructive'; format?: 'number' | 'currency'; } const KPICard = ({ title, value, icon, color, format = 'number' }: KPICardProps) => { const formattedValue = format === 'currency' ? `${value.toLocaleString('ar-EG', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} د.ع` : value.toLocaleString(); const colorMap = { primary: 'text-primary border-primary/20 bg-primary/5 shadow-neon-primary', secondary: 'text-meshwar-orange border-meshwar-orange/20 bg-meshwar-orange/5', success: 'text-emerald-500 border-emerald-500/20 bg-emerald-500/5', destructive: 'text-destructive border-destructive/20 bg-destructive/5' }; return
{icon}
المؤشر المباشر

{title}

{formattedValue}

{/* Subtle decorative glow */}
; }; export default MonthlyAnalyticsView;