import { MediaManager } from '@/components/media/MediaManager'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import AppLayout from '@/layouts/app-layout'; import { MediaItem } from '@/types/global'; import { Head, router } from '@inertiajs/react'; declare const route: (...args: any[]) => string; interface MediaIndexProps { data: { data: MediaItem[]; links: any[]; current_page: number; last_page: number; total: number; }; groupedAppModuleData: Record; countsByAppModule: Record>; filters: { search: string; app_name: string; app_module: string; }; } export default function Index({ data, groupedAppModuleData, countsByAppModule, filters }: MediaIndexProps) { const appNames = Object.keys(groupedAppModuleData); // ---------- Handlers ---------- const handleSearch = (query: string) => { router.get(route('media.index'), { ...filters, search: query }, { preserveState: true, preserveScroll: true }); }; const handleUpload = (files: File[]) => { if (!files.length) return; files.forEach((file) => { const formData = new FormData(); formData.append('file', file); router.post(route('media.store'), formData, { preserveScroll: true, forceFormData: true, }); }); }; const handleDelete = (id: number) => { if (!confirm('Are you sure?')) return; router.delete(route('media.destroy', id), { preserveState: true, preserveScroll: true, }); }; const handleUpdate = (id: number, payload: any) => { router.put(route('media.update', id), payload, { preserveState: true, preserveScroll: true, }); }; // ---------- Selected Values ---------- const selectedApp = filters.app_name || appNames[0]; const modules = groupedAppModuleData[selectedApp] || []; const selectedModule = filters.app_module || modules[0] || ''; // Get app image count const getAppImageCount = (app: string) => { const appModules = countsByAppModule[app] || {}; return Object.values(appModules).reduce((sum, count) => sum + count, 0); }; // Get module image count const getModuleImageCount = (app: string, module: string) => { return countsByAppModule[app]?.[module] ?? 0; }; const handleAppChange = (app: string) => { const defaultModule = groupedAppModuleData[app]?.[0] || ''; router.get( route('media.index'), { app_name: app, app_module: defaultModule, search: filters.search }, { preserveState: true, preserveScroll: true }, ); }; const handleModuleChange = (module: string) => { const appName = filters.app_name || selectedApp; router.get( route('media.index'), { app_name: appName, app_module: module, search: filters.search }, { preserveState: true, preserveScroll: true }, ); }; return (

{/* */}

{/* -------- App Tabs -------- */} {appNames.map((app) => ( {app.charAt(0).toUpperCase() + app.slice(1)}{' '} ({getAppImageCount(app)}) ))} {appNames.map((app) => ( {/* -------- Module Tabs -------- */} {(groupedAppModuleData[app] || []).map((module) => ( {module.charAt(0).toUpperCase() + module.slice(1)}{' '} ({getModuleImageCount(app, module)}) ))} ))}

{/* -------- Media Manager -------- */}

{ const appMatch = selectedApp ? item.app_name === selectedApp : true; const moduleMatch = selectedModule ? item.app_module === selectedModule : true; return appMatch && moduleMatch; })} onSearch={handleSearch} onUpload={handleUpload} onDelete={handleDelete} onUpdate={handleUpdate} />

); }