import { Badge } from '@admin/components/ui/badge'; import { Button } from '@admin/components/ui/button'; import { Card, CardContent } from '@admin/components/ui/card'; import { Input } from '@admin/components/ui/input'; import StatisticCardLarge from '@admin/components/dashboard/StatisticCardLarge'; import AdminLayout from '@admin/layouts/admin/admin-layout'; import { Head, router } from '@inertiajs/react'; import { Building2, CheckCircle2, Layers, Palette, Search, Settings, TrendingUp, Users } from 'lucide-react'; import { ReactNode, useState } from 'react'; interface Theme { id: number; name: string; slug: string; description?: string; preview_image?: string; assigned_tenants_count: number; active_tenants_count: number; } interface ThemeCategory { category: { id: number; name: string; slug: string; }; themes: Theme[]; } interface Tenant { id: number; uid: string; company_name: string; slug: string; email: string; active_theme: { id: number; name: string; category: string; } | null; assigned_themes_count: number; themes: Array<{ id: number; name: string; category: string; is_active: boolean; assigned_at: string; }>; } interface Statistics { total_tenants: number; total_themes: number; total_categories: number; total_assignments: number; } interface ThemeManagementProps { themeCategories: ThemeCategory[]; tenants: Tenant[]; statistics: Statistics; } export default function ThemeManagementIndex({ themeCategories, tenants, statistics }: ThemeManagementProps) { const [searchQuery, setSearchQuery] = useState(''); const [selectedCategory, setSelectedCategory] = useState('all'); const [activeTab, setActiveTab] = useState<'themes' | 'tenants'>('tenants'); const filteredTenants = tenants.filter( (tenant) => tenant.company_name.toLowerCase().includes(searchQuery.toLowerCase()) || tenant.email.toLowerCase().includes(searchQuery.toLowerCase()), ); const filteredThemes = themeCategories .filter(({ category }) => selectedCategory === 'all' || category.slug === selectedCategory) .flatMap(({ themes }) => themes) .filter( (theme) => theme.name.toLowerCase().includes(searchQuery.toLowerCase()) || theme.description?.toLowerCase().includes(searchQuery.toLowerCase()), ); const handleManageTenant = (tenant: Tenant) => { router.visit(route('admin.themes.show', tenant.id)); }; const getThemePreviewImage = (theme: Theme) => { if (theme.preview_image) { return theme.preview_image; } const colors = ['6366f1', '22c55e', '3b82f6', '059669', 'f59e0b', '8b5cf6']; const colorIndex = theme.id % colors.length; return `https://placehold.co/400x300/${colors[colorIndex]}/ffffff?text=${encodeURIComponent(theme.name)}`; }; return ( <>
{/* Header */}

Theme Management

Administration › Themes
{/* Statistics Cards */}
{/* Tab Navigation */}
{/* Search */}
setSearchQuery(e.target.value)} className="pl-10" />
{/* Tenants Tab */} {activeTab === 'tenants' && (
{filteredTenants.map((tenant) => (

{tenant.company_name}

{tenant.email}

{tenant.assigned_themes_count} themes assigned {tenant.active_theme && ( Active: {tenant.active_theme.name} )}
{/* Show assigned themes */} {tenant.themes.length > 0 && (

Assigned Themes:

{tenant.themes.map((theme) => ( {theme.name} {theme.is_active && ' (Active)'} ))}
)} ))} {filteredTenants.length === 0 && (

No tenants found

{searchQuery ? 'Try adjusting your search query' : 'No tenants available'}

 )}
)} {/* Themes Tab */} {activeTab === 'themes' && (
{/* Category Filter */}
{themeCategories.map(({ category }) => ( ))}
{/* Themes Grid */}
{filteredThemes.map((theme) => (
{theme.name}

{theme.name}

{theme.description &&

{theme.description}

}
{theme.assigned_tenants_count} assigned {theme.active_tenants_count} active
))}
{filteredThemes.length === 0 && (

No themes found

{searchQuery ? 'Try adjusting your search query' : 'No themes available'}

 )}
)}
); } ThemeManagementIndex.layout = (page: ReactNode) => ( {page} );