348 lines
8.7 KiB
TypeScript
348 lines
8.7 KiB
TypeScript
|
import { useState, useEffect, useCallback, useMemo } from 'react';
|
||
|
|
import toast from 'react-hot-toast';
|
||
|
|
import { AxiosError } from 'axios';
|
||
|
|
|
||
|
|
import {
|
||
|
|
getAccreditationsApi,
|
||
|
|
createAccreditationApi,
|
||
|
|
updateAccreditationApi,
|
||
|
|
deleteAccreditationApi,
|
||
|
|
Accreditation,
|
||
|
|
} from '@/api/accreditation';
|
||
|
|
|
||
|
|
import AccreditationModal from '@/components/AccreditationModal/AccreditationModal';
|
||
|
|
|
||
|
|
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, Award } from 'lucide-react';
|
||
|
|
|
||
|
|
export default function AccreditationPage() {
|
||
|
|
const [items, setItems] = useState<Accreditation[]>([]);
|
||
|
|
const [loading, setLoading] = useState(true);
|
||
|
|
const [error, setError] = useState('');
|
||
|
|
|
||
|
|
const [modalOpen, setModalOpen] = useState(false);
|
||
|
|
const [editingItem, setEditingItem] = useState<Accreditation | null>(null);
|
||
|
|
|
||
|
|
const [searchText, setSearchText] = useState('');
|
||
|
|
const [categoryFilter, setCategoryFilter] = useState('');
|
||
|
|
|
||
|
|
const [form, setForm] = useState<Partial<Accreditation>>({
|
||
|
|
title: '',
|
||
|
|
type: 'ACCREDITATION',
|
||
|
|
logo: '',
|
||
|
|
image: '',
|
||
|
|
description: '',
|
||
|
|
sortOrder: 1000,
|
||
|
|
isActive: true,
|
||
|
|
});
|
||
|
|
|
||
|
|
const fetchData = useCallback(async () => {
|
||
|
|
setLoading(true);
|
||
|
|
setError('');
|
||
|
|
|
||
|
|
try {
|
||
|
|
const res = await getAccreditationsApi();
|
||
|
|
|
||
|
|
setItems(res.data || []);
|
||
|
|
} catch (err) {
|
||
|
|
if (err instanceof AxiosError) {
|
||
|
|
setError(err.response?.data?.message || 'Failed to fetch accreditation records');
|
||
|
|
} else {
|
||
|
|
setError('Something went wrong');
|
||
|
|
}
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
fetchData();
|
||
|
|
}, [fetchData]);
|
||
|
|
|
||
|
|
const filteredItems = useMemo(() => {
|
||
|
|
return items.filter((item) => {
|
||
|
|
const matchesSearch = item.title.toLowerCase().includes(searchText.toLowerCase());
|
||
|
|
|
||
|
|
const matchesCategory = categoryFilter ? item.type === categoryFilter : true;
|
||
|
|
|
||
|
|
return matchesSearch && matchesCategory;
|
||
|
|
});
|
||
|
|
}, [items, searchText, categoryFilter]);
|
||
|
|
|
||
|
|
const handleToggleStatus = async (item: Accreditation) => {
|
||
|
|
if (!item.id) return;
|
||
|
|
|
||
|
|
try {
|
||
|
|
await updateAccreditationApi(item.id, {
|
||
|
|
isActive: !item.isActive,
|
||
|
|
});
|
||
|
|
|
||
|
|
toast.success('Status updated');
|
||
|
|
|
||
|
|
fetchData();
|
||
|
|
} catch (err) {
|
||
|
|
console.error(err);
|
||
|
|
|
||
|
|
toast.error('Failed to update status');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleDelete = async (id: number) => {
|
||
|
|
const confirmDelete = window.confirm('Delete this accreditation permanently?');
|
||
|
|
|
||
|
|
if (!confirmDelete) return;
|
||
|
|
|
||
|
|
try {
|
||
|
|
await deleteAccreditationApi(id);
|
||
|
|
|
||
|
|
fetchData();
|
||
|
|
} catch (err) {
|
||
|
|
console.error(err);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const openAdd = () => {
|
||
|
|
setEditingItem(null);
|
||
|
|
|
||
|
|
setForm({
|
||
|
|
title: '',
|
||
|
|
type: 'ACCREDITATION',
|
||
|
|
logo: '',
|
||
|
|
image: '',
|
||
|
|
description: '',
|
||
|
|
sortOrder: 1000,
|
||
|
|
isActive: true,
|
||
|
|
});
|
||
|
|
|
||
|
|
setModalOpen(true);
|
||
|
|
};
|
||
|
|
|
||
|
|
const openEdit = (item: Accreditation) => {
|
||
|
|
setEditingItem(item);
|
||
|
|
|
||
|
|
setForm({
|
||
|
|
...item,
|
||
|
|
});
|
||
|
|
|
||
|
|
setModalOpen(true);
|
||
|
|
};
|
||
|
|
|
||
|
|
const saveItem = async () => {
|
||
|
|
if (!form.title?.trim()) {
|
||
|
|
return toast.error('Title is required');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!form.type) {
|
||
|
|
return toast.error('Category is required');
|
||
|
|
}
|
||
|
|
|
||
|
|
try {
|
||
|
|
if (editingItem?.id) {
|
||
|
|
const changedFields: Record<string, any> = {};
|
||
|
|
|
||
|
|
Object.keys(form).forEach((key) => {
|
||
|
|
const k = key as keyof Accreditation;
|
||
|
|
|
||
|
|
if (JSON.stringify(form[k]) !== JSON.stringify(editingItem[k])) {
|
||
|
|
changedFields[k] = form[k];
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
delete changedFields.id;
|
||
|
|
delete changedFields.createdAt;
|
||
|
|
delete changedFields.updatedAt;
|
||
|
|
|
||
|
|
if (Object.keys(changedFields).length === 0) {
|
||
|
|
setModalOpen(false);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
await updateAccreditationApi(editingItem.id, changedFields);
|
||
|
|
} else {
|
||
|
|
await createAccreditationApi(form);
|
||
|
|
}
|
||
|
|
|
||
|
|
setModalOpen(false);
|
||
|
|
|
||
|
|
fetchData();
|
||
|
|
} catch (err) {
|
||
|
|
console.error(err);
|
||
|
|
|
||
|
|
toast.error('Failed to save accreditation');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="p-6 space-y-6">
|
||
|
|
{/* Header */}
|
||
|
|
<div className="flex flex-col md:flex-row md:justify-between gap-4">
|
||
|
|
<div>
|
||
|
|
<h1 className="text-3xl font-bold">Accreditations & Certifications</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex flex-wrap gap-3">
|
||
|
|
<Input
|
||
|
|
placeholder="Search title..."
|
||
|
|
value={searchText}
|
||
|
|
onChange={(e) => setSearchText(e.target.value)}
|
||
|
|
className="w-[250px]"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<select
|
||
|
|
value={categoryFilter}
|
||
|
|
onChange={(e) => setCategoryFilter(e.target.value)}
|
||
|
|
className="h-10 rounded-md border px-3"
|
||
|
|
>
|
||
|
|
<option value="">All Categories</option>
|
||
|
|
|
||
|
|
<option value="ACCREDITATION">Accreditations</option>
|
||
|
|
|
||
|
|
<option value="CERTIFICATION">Certifications</option>
|
||
|
|
</select>
|
||
|
|
|
||
|
|
<Button variant="outline" onClick={fetchData} disabled={loading}>
|
||
|
|
<RefreshCw className="mr-2 h-4 w-4" />
|
||
|
|
Refresh
|
||
|
|
</Button>
|
||
|
|
|
||
|
|
<Button onClick={openAdd}>
|
||
|
|
<Plus className="mr-2 h-4 w-4" />
|
||
|
|
Add Item
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{error && <div className="p-4 text-red-600 bg-red-50 rounded">{error}</div>}
|
||
|
|
|
||
|
|
<Card>
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle>Accreditation Directory</CardTitle>
|
||
|
|
</CardHeader>
|
||
|
|
|
||
|
|
<CardContent className="p-0 sm:p-6">
|
||
|
|
<div className="border rounded-md overflow-auto">
|
||
|
|
<Table>
|
||
|
|
<TableHeader>
|
||
|
|
<TableRow>
|
||
|
|
<TableHead>Order</TableHead>
|
||
|
|
|
||
|
|
<TableHead>Logo</TableHead>
|
||
|
|
|
||
|
|
<TableHead>Details</TableHead>
|
||
|
|
|
||
|
|
<TableHead>Category</TableHead>
|
||
|
|
|
||
|
|
<TableHead>Status</TableHead>
|
||
|
|
|
||
|
|
<TableHead className="text-right">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>
|
||
|
|
) : filteredItems.length === 0 ? (
|
||
|
|
<TableRow>
|
||
|
|
<TableCell colSpan={6} className="text-center text-muted-foreground py-10">
|
||
|
|
No accreditation records found.
|
||
|
|
</TableCell>
|
||
|
|
</TableRow>
|
||
|
|
) : (
|
||
|
|
filteredItems.map((item) => (
|
||
|
|
<TableRow key={item.id} className="hover:bg-muted/50">
|
||
|
|
<TableCell className="font-mono">{item.sortOrder}</TableCell>
|
||
|
|
|
||
|
|
<TableCell>
|
||
|
|
<div className="w-20 h-16 border rounded-md overflow-hidden bg-white flex items-center justify-center">
|
||
|
|
{item.logo ? (
|
||
|
|
<img src={item.logo} alt={item.title} className="w-full h-full object-contain" />
|
||
|
|
) : (
|
||
|
|
<Award className="h-6 w-6 text-muted-foreground" />
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</TableCell>
|
||
|
|
|
||
|
|
<TableCell>
|
||
|
|
<div className="font-semibold">{item.title}</div>
|
||
|
|
|
||
|
|
<div className="text-sm text-muted-foreground line-clamp-2">
|
||
|
|
{item.description || 'No description provided'}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{item.image && (
|
||
|
|
<div className="mt-2">
|
||
|
|
<a
|
||
|
|
href={item.image}
|
||
|
|
target="_blank"
|
||
|
|
rel="noopener noreferrer"
|
||
|
|
className="text-xs text-blue-600 hover:underline"
|
||
|
|
>
|
||
|
|
View certificate image
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</TableCell>
|
||
|
|
|
||
|
|
<TableCell>
|
||
|
|
<Badge variant={item.type === 'ACCREDITATION' ? 'default' : 'secondary'}>{item.type}</Badge>
|
||
|
|
</TableCell>
|
||
|
|
|
||
|
|
<TableCell>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<Switch checked={item.isActive} onCheckedChange={() => handleToggleStatus(item)} />
|
||
|
|
|
||
|
|
<Badge variant={item.isActive ? 'default' : 'secondary'}>
|
||
|
|
{item.isActive ? 'Active' : 'Hidden'}
|
||
|
|
</Badge>
|
||
|
|
</div>
|
||
|
|
</TableCell>
|
||
|
|
|
||
|
|
<TableCell className="text-right">
|
||
|
|
<div className="flex justify-end gap-2">
|
||
|
|
<Button size="icon" variant="ghost" onClick={() => openEdit(item)}>
|
||
|
|
<Pencil className="h-4 w-4" />
|
||
|
|
</Button>
|
||
|
|
|
||
|
|
<Button
|
||
|
|
size="icon"
|
||
|
|
variant="ghost"
|
||
|
|
className="text-red-500 hover:text-red-600"
|
||
|
|
onClick={() => item.id && handleDelete(item.id)}
|
||
|
|
>
|
||
|
|
<Trash2 className="h-4 w-4" />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</TableCell>
|
||
|
|
</TableRow>
|
||
|
|
))
|
||
|
|
)}
|
||
|
|
</TableBody>
|
||
|
|
</Table>
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
<AccreditationModal
|
||
|
|
open={modalOpen}
|
||
|
|
onOpenChange={setModalOpen}
|
||
|
|
editingAccreditation={editingItem}
|
||
|
|
accreditationForm={form}
|
||
|
|
setAccreditationForm={setForm}
|
||
|
|
onSave={saveItem}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|