import { Head, Link, router } from '@inertiajs/react';
import AdminNavigation from '../../../Components/Admin/AdminNavigation';
import { Card, Col, Container, Row, Table, Badge, Button, Form, InputGroup, Dropdown } from 'react-bootstrap';
import { Plus, Search, Filter, Eye, Edit, Trash2, ToggleLeft, ToggleRight } from 'lucide-react';
import { useState } from 'react';
interface Tenant {
id: number;
name: string;
slug: string;
domain: string | null;
plan: string;
is_active: boolean;
expires_at: string | null;
created_at: string;
users_count: number;
clientes_count: number;
leads_count: number;
}
interface TenantsIndexProps {
tenants: {
data: Tenant[];
links: Array<{ url: string | null; label: string; active: boolean }>;
current_page: number;
last_page: number;
per_page: number;
total: number;
};
stats: {
total: number;
active: number;
inactive: number;
expired: number;
};
filters: {
search: string | null;
plan: string | null;
status: string | null;
};
plans: string[];
}
export default function TenantsIndex({ tenants, stats, filters, plans }: TenantsIndexProps) {
const [search, setSearch] = useState(filters.search || '');
const [selectedPlan, setSelectedPlan] = useState(filters.plan || '');
const [selectedStatus, setSelectedStatus] = useState(filters.status || '');
const handleSearch = (e: React.FormEvent) => {
e.preventDefault();
router.get(route('admin.tenants.index'), {
search,
plan: selectedPlan,
status: selectedStatus,
}, { preserveState: true });
};
const clearFilters = () => {
setSearch('');
setSelectedPlan('');
setSelectedStatus('');
router.get(route('admin.tenants.index'));
};
const toggleStatus = (tenant: Tenant) => {
if (confirm(`¿Estás seguro de ${tenant.is_active ? 'desactivar' : 'activar'} el tenant "${tenant.name}"?`)) {
router.post(route('admin.tenants.toggle-status', tenant.id));
}
};
const deleteTenant = (tenant: Tenant) => {
if (confirm(`¿Estás seguro de eliminar el tenant "${tenant.name}"? Esta acción no se puede deshacer.`)) {
router.delete(route('admin.tenants.destroy', tenant.id));
}
};
const formatDate = (dateString: string) => {
return new Date(dateString).toLocaleDateString('es-ES', {
day: '2-digit',
month: '2-digit',
year: 'numeric'
});
};
const getPlanColor = (plan: string) => {
switch (plan) {
case 'basic': return 'secondary';
case 'premium': return 'primary';
case 'enterprise': return 'success';
default: return 'light';
}
};
const getStatusBadge = (tenant: Tenant) => {
if (!tenant.is_active) {
return Inactivo;
}
if (tenant.expires_at && new Date(tenant.expires_at) < new Date()) {
return Expirado;
}
return Activo;
};
return (
<>