import { useTranslation } from '@/hooks/use-translation'; import React, { useState } from 'react'; import { Head, Link, router } from '@inertiajs/react'; import AppLayout from '@/layouts/app-layout'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Plus, Edit, Trash2, AlertCircle, Info, CheckCircle, AlertTriangle, BarChart3, Eye, MousePointerClick, XCircle } from 'lucide-react'; import { type BreadcrumbItem, type Banner } from '@/types'; interface PaginationData { current_page: number; data: Banner[]; first_page_url: string; from: number; last_page: number; last_page_url: string; links: Array<{ url?: string; label: string; active: boolean; }>; next_page_url?: string; path: string; per_page: number; prev_page_url?: string; to: number; total: number; } interface Props { banners: PaginationData; filters: { status?: string; audience?: string; }; } export default function BannersIndex({ banners, filters }: Readonly) { const { t } = useTranslation(); const [selectedStatus, setSelectedStatus] = useState(filters.status || 'all'); const [selectedAudience, setSelectedAudience] = useState(filters.audience || 'all'); const handleStatusFilter = (status: string) => { setSelectedStatus(status); router.get('/admin/banners', { status: status === 'all' ? '' : status, audience: selectedAudience === 'all' ? '' : selectedAudience }, { preserveState: true }); }; const handleAudienceFilter = (audience: string) => { setSelectedAudience(audience); router.get('/admin/banners', { status: selectedStatus === 'all' ? '' : selectedStatus, audience: audience === 'all' ? '' : audience }, { preserveState: true }); }; const clearFilters = () => { setSelectedStatus('all'); setSelectedAudience('all'); router.get('/admin/banners', {}, { preserveState: true }); }; const handleDelete = (banner: Banner) => { if (confirm(`Are you sure you want to delete "${banner.title}"?`)) { router.delete(`/admin/banners/${banner.id}`); } }; const toggleActive = (banner: Banner) => { router.post(`/admin/banners/${banner.id}/toggle-active`); }; const getTypeIcon = (type: string) => { switch (type) { case 'info': return ; case 'warning': return ; case 'success': return ; case 'error': return ; default: return ; } }; const getTypeBadgeVariant = (type: string): "default" | "secondary" | "destructive" | "outline" => { switch (type) { case 'warning': return 'secondary'; case 'error': return 'destructive'; default: return 'default'; } }; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: '/dashboard' }, { title: 'Banners', href: '/admin/banners' }, ]; const activeBanners = banners.data.filter(b => b.is_active); const totalViews = banners.data.reduce((sum, b) => sum + b.view_count, 0); const totalClicks = banners.data.reduce((sum, b) => sum + b.click_count, 0); return (

{/* Header */}

{t('Banner Messages')}

{t('Manage system-wide banner messages for users')}

{/* Stats Cards */}

{t('Total Banners')}

{banners.total}

{t('Active')}

{activeBanners.length}

{t('Total Views')}

{totalViews.toLocaleString()}

{t('Total Clicks')}

{totalClicks.toLocaleString()}

{/* Filters */}

{(selectedStatus !== 'all' || selectedAudience !== 'all') && ( )}

{/* Banners List */}

{banners.data.length > 0 ? ( banners.data.map((banner) => (

{banner.title} {getTypeIcon(banner.type)} {banner.type} {banner.is_active ? ( {t('Active')} ) : ( {t('Inactive')} )}

{banner.message}

{t('Audience:')} {banner.target_audience}

{t('Start:')} {new Date(banner.start_date).toLocaleDateString()}

{t('End:')} {banner.end_date ? new Date(banner.end_date).toLocaleDateString() : 'None'}

{t('Created by:')} {banner.creator?.name || 'Unknown'}

{banner.view_count} views

{banner.click_count} clicks

{banner.dismiss_count} dismissed

)) ) : (

{t('No banners found')}

{t('Get started by creating your first banner message')}

)}

{/* Pagination */} {banners.links.length > 3 && (

{banners.links.map((link) => (

)}

); }