feat: insurance crud
This commit is contained in:
Kailasdevdas
@@ -0,0 +1,285 @@
|
||||
import { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
import { AxiosError } from 'axios';
|
||||
|
||||
import {
|
||||
getInsurancePartnersApi,
|
||||
createInsurancePartnerApi,
|
||||
updateInsurancePartnerApi,
|
||||
deleteInsurancePartnerApi,
|
||||
InsurancePartner,
|
||||
} from '@/api/insurancePartner';
|
||||
|
||||
import InsurancePartnerModal from '@/components/InsurancePartnerModal/InsurancePartnerModal';
|
||||
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { Input } from '@/components/ui/input';
|
||||
|
||||
import { Loader2, RefreshCw, Plus, Pencil, Trash2, Link2 } from 'lucide-react';
|
||||
|
||||
export default function InsurancePartnerPage() {
|
||||
const [partners, setPartners] = useState<InsurancePartner[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const [partnerModal, setPartnerModal] = useState(false);
|
||||
const [editingPartner, setEditingPartner] = useState<InsurancePartner | null>(null);
|
||||
|
||||
const [searchText, setSearchText] = useState('');
|
||||
|
||||
const [partnerForm, setPartnerForm] = useState<Partial<InsurancePartner>>({
|
||||
name: '',
|
||||
logo: '',
|
||||
websiteUrl: '',
|
||||
sortOrder: 1000,
|
||||
isActive: true,
|
||||
});
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError('');
|
||||
try {
|
||||
const res = await getInsurancePartnersApi();
|
||||
setPartners(res.data || []);
|
||||
} catch (err) {
|
||||
if (err instanceof AxiosError) {
|
||||
setError(err.response?.data?.message || 'Failed to sync insurance directory records.');
|
||||
} else {
|
||||
setError('An unhandled database communication error occurred.');
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [fetchData]);
|
||||
|
||||
const handleToggleStatus = async (partner: InsurancePartner) => {
|
||||
if (!partner.id) return;
|
||||
try {
|
||||
await updateInsurancePartnerApi(partner.id, { isActive: !partner.isActive });
|
||||
toast.success(`Partner status updated successfully`);
|
||||
fetchData();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
toast.error('Could not overwrite corporate status configurations.');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeletePartner = async (id: number) => {
|
||||
const confirmDelete = window.confirm(
|
||||
'Are you completely sure you want to remove this insurance partner record? This step is irreversible.'
|
||||
);
|
||||
if (!confirmDelete) return;
|
||||
|
||||
try {
|
||||
await deleteInsurancePartnerApi(id);
|
||||
fetchData();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
const openAddPartner = () => {
|
||||
setEditingPartner(null);
|
||||
setPartnerForm({
|
||||
name: '',
|
||||
logo: '',
|
||||
websiteUrl: '',
|
||||
sortOrder: 1000,
|
||||
isActive: true,
|
||||
});
|
||||
setPartnerModal(true);
|
||||
};
|
||||
|
||||
const openEditPartner = (partner: InsurancePartner) => {
|
||||
setEditingPartner(partner);
|
||||
setPartnerForm({ ...partner });
|
||||
setPartnerModal(true);
|
||||
};
|
||||
|
||||
const savePartner = async () => {
|
||||
if (!partnerForm.name) return toast.error('Insurance Partner Name is required.');
|
||||
if (!partnerForm.logo) return toast.error('Partner Corporate Logo Asset is required.');
|
||||
|
||||
try {
|
||||
const finalData = { ...partnerForm };
|
||||
|
||||
if (editingPartner?.id) {
|
||||
const changedFields: Record<string, any> = {};
|
||||
Object.keys(finalData).forEach((key) => {
|
||||
const k = key as keyof InsurancePartner;
|
||||
if (JSON.stringify(finalData[k]) !== JSON.stringify(editingPartner[k])) {
|
||||
changedFields[k] = finalData[k];
|
||||
}
|
||||
});
|
||||
|
||||
delete changedFields.id;
|
||||
delete changedFields.createdAt;
|
||||
delete changedFields.updatedAt;
|
||||
|
||||
if (Object.keys(changedFields).length === 0) {
|
||||
setPartnerModal(false);
|
||||
return;
|
||||
}
|
||||
|
||||
await updateInsurancePartnerApi(editingPartner.id, changedFields);
|
||||
} else {
|
||||
await createInsurancePartnerApi(finalData);
|
||||
}
|
||||
|
||||
setPartnerModal(false);
|
||||
fetchData();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
toast.error('An unexpected service exception halted corporate resource persistence runtime.');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Insurance Partners</h1>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Input
|
||||
placeholder="Search partners by name..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
className="w-[260px] text-base"
|
||||
/>
|
||||
|
||||
<Button variant="outline" onClick={fetchData} disabled={loading} className="text-base">
|
||||
<RefreshCw className="mr-2 h-5 w-5" />
|
||||
Refresh
|
||||
</Button>
|
||||
|
||||
<Button onClick={openAddPartner} className="text-base">
|
||||
<Plus className="mr-2 h-5 w-5" />
|
||||
Add Partner
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && <div className="p-4 text-red-600 bg-red-50 border rounded-md text-base">{error}</div>}
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl">Network Panels Sequence Directory</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0 sm:p-6">
|
||||
<div className="rounded-md border overflow-x-auto overflow-y-auto max-h-[680px] relative">
|
||||
<Table className="w-full min-w-[800px] table-fixed border-separate border-spacing-0">
|
||||
<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
|
||||
<TableRow>
|
||||
<TableHead className="w-[80px] bg-background text-sm font-bold">Order</TableHead>
|
||||
<TableHead className="w-[160px] bg-background text-sm font-bold">Logo Preview</TableHead>
|
||||
<TableHead className="w-[260px] bg-background text-sm font-bold">Company Identity</TableHead>
|
||||
<TableHead className="w-[240px] bg-background text-sm font-bold">Portal Website</TableHead>
|
||||
<TableHead className="w-[120px] bg-background text-sm font-bold">Status</TableHead>
|
||||
<TableHead className="w-[120px] bg-background text-right text-sm font-bold">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={6} className="text-center py-10">
|
||||
<Loader2 className="h-8 w-8 animate-spin mx-auto" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : partners.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={6} className="text-center text-muted-foreground py-10 text-base">
|
||||
No active healthcare insurance tie-ups found matching criteria.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
partners.map((partner) => (
|
||||
<TableRow key={partner.id} className="hover:bg-muted/50">
|
||||
<TableCell className="font-mono text-sm">{partner.sortOrder}</TableCell>
|
||||
<TableCell>
|
||||
<div className="w-28 h-14 rounded-md overflow-hidden bg-white p-1 relative border flex items-center justify-center">
|
||||
<img
|
||||
src={partner.logo}
|
||||
alt={`${partner.name} logo`}
|
||||
className="w-full h-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="font-semibold text-base truncate" title={partner.name}>
|
||||
{partner.name}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{partner.websiteUrl ? (
|
||||
<a
|
||||
href={partner.websiteUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-sky-600 hover:underline flex items-center gap-1.5 truncate max-w-[220px]"
|
||||
title={partner.websiteUrl}
|
||||
>
|
||||
<Link2 className="h-3.5 w-3.5 flex-shrink-0" />
|
||||
{partner.websiteUrl}
|
||||
</a>
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground italic">No external URL linked</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
<Switch checked={partner.isActive} onCheckedChange={() => handleToggleStatus(partner)} />
|
||||
<Badge variant={partner.isActive ? 'default' : 'secondary'}>
|
||||
{partner.isActive ? 'Active' : 'Disabled'}
|
||||
</Badge>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-9 w-9 text-muted-foreground hover:text-foreground"
|
||||
onClick={() => openEditPartner(partner)}
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-9 w-9 text-red-500 hover:text-red-600 hover:bg-red-50"
|
||||
onClick={() => partner.id && handleDeletePartner(partner.id)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<InsurancePartnerModal
|
||||
open={partnerModal}
|
||||
onOpenChange={setPartnerModal}
|
||||
editingPartner={editingPartner}
|
||||
partnerForm={partnerForm}
|
||||
setPartnerForm={setPartnerForm}
|
||||
onSave={savePartner}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user