feat: accreditation crud
This commit is contained in:
Kailasdevdas
@@ -26,6 +26,7 @@ import ImportData from './pages/ImportData';
|
||||
import HealthPackagePage from './pages/HealthPackagePage';
|
||||
import HomepageBanner from './pages/HomepageBannerPage';
|
||||
import InsurancePartnerPage from './pages/InsurancePartner';
|
||||
import AccreditationPage from './pages/Accreditation';
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
@@ -57,6 +58,7 @@ export default function App() {
|
||||
<Route path="/health-check" element={<HealthPackagePage />} />
|
||||
<Route path="/homepage-banner" element={<HomepageBanner />} />
|
||||
<Route path="/insurance-partner" element={<InsurancePartnerPage />} />
|
||||
<Route path="/accreditation" element={<AccreditationPage />} />
|
||||
</Route>
|
||||
</Route>
|
||||
|
||||
|
||||
@@ -0,0 +1,85 @@
|
||||
import apiClient from '@/api/client';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
export type AccreditationType = 'ACCREDITATION' | 'CERTIFICATION';
|
||||
|
||||
export interface Accreditation {
|
||||
id?: number;
|
||||
|
||||
title: string;
|
||||
|
||||
type: AccreditationType;
|
||||
|
||||
logo?: string;
|
||||
image?: string;
|
||||
|
||||
description?: string;
|
||||
|
||||
sortOrder: number;
|
||||
isActive: boolean;
|
||||
|
||||
createdAt?: string;
|
||||
updatedAt?: string;
|
||||
}
|
||||
|
||||
export const getAccreditationsApi = async (type?: AccreditationType) => {
|
||||
const query = type ? `?type=${type}` : '';
|
||||
const res = await apiClient.get(`/accreditation/getAll${query}`);
|
||||
|
||||
return res.data;
|
||||
};
|
||||
|
||||
export const getAccreditationApi = async (id: number) => {
|
||||
const res = await apiClient.get(`/accreditation/${id}`);
|
||||
|
||||
return res.data;
|
||||
};
|
||||
|
||||
export const getActiveAccreditationsApi = async (type?: AccreditationType) => {
|
||||
const query = type ? `?type=${type}` : '';
|
||||
const res = await apiClient.get(`/accreditation/active${query}`);
|
||||
|
||||
return res.data;
|
||||
};
|
||||
|
||||
export const createAccreditationApi = async (data: Partial<Accreditation>) => {
|
||||
try {
|
||||
const res = await apiClient.post('/accreditation', data);
|
||||
|
||||
toast.success('Accreditation created successfully');
|
||||
|
||||
return res.data;
|
||||
} catch (error: any) {
|
||||
toast.error(error?.response?.data?.message || 'Failed to create accreditation');
|
||||
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
export const updateAccreditationApi = async (id: number, data: Partial<Accreditation>) => {
|
||||
try {
|
||||
const res = await apiClient.put(`/accreditation/${id}`, data);
|
||||
|
||||
toast.success('Accreditation updated successfully');
|
||||
|
||||
return res.data;
|
||||
} catch (error: any) {
|
||||
toast.error(error?.response?.data?.message || 'Failed to update accreditation');
|
||||
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
export const deleteAccreditationApi = async (id: number) => {
|
||||
try {
|
||||
const res = await apiClient.delete(`/accreditation/${id}`);
|
||||
|
||||
toast.success('Accreditation deleted successfully');
|
||||
|
||||
return res.data;
|
||||
} catch (error: any) {
|
||||
toast.error(error?.response?.data?.message || 'Failed to delete accreditation');
|
||||
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,209 @@
|
||||
import { BytescaleUploader } from '@/components/BytescaleUploader/BytescaleUploader';
|
||||
|
||||
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
|
||||
editingAccreditation: any;
|
||||
|
||||
accreditationForm: any;
|
||||
setAccreditationForm: any;
|
||||
|
||||
onSave: () => void;
|
||||
}
|
||||
|
||||
export default function AccreditationModal({
|
||||
open,
|
||||
onOpenChange,
|
||||
editingAccreditation,
|
||||
accreditationForm,
|
||||
setAccreditationForm,
|
||||
onSave,
|
||||
}: Props) {
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="w-full !max-w-3xl h-auto max-h-[90vh] flex flex-col p-0 overflow-hidden">
|
||||
{/* Header */}
|
||||
<DialogHeader className="px-6 py-5 border-b bg-background sticky top-0 z-20">
|
||||
<DialogTitle className="text-2xl font-bold">
|
||||
{editingAccreditation ? 'Edit Accreditation / Certification' : 'Create Accreditation / Certification'}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{/* Body */}
|
||||
<div className="flex-1 overflow-y-auto p-6 space-y-8">
|
||||
{/* Basic Information */}
|
||||
<div className="space-y-5">
|
||||
<div className="border-b pb-2">
|
||||
<h3 className="text-lg font-bold">Basic Information</h3>
|
||||
<p className="text-sm text-muted-foreground">Configure accreditation or certification details.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
<div className="space-y-2">
|
||||
<Label className="font-semibold">Category</Label>
|
||||
|
||||
<Select
|
||||
value={accreditationForm.type}
|
||||
onValueChange={(value) =>
|
||||
setAccreditationForm({
|
||||
...accreditationForm,
|
||||
type: value,
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select category" />
|
||||
</SelectTrigger>
|
||||
|
||||
<SelectContent>
|
||||
<SelectItem value="ACCREDITATION">Accreditation</SelectItem>
|
||||
|
||||
<SelectItem value="CERTIFICATION">Certification</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-semibold">Title</Label>
|
||||
|
||||
<Input
|
||||
value={accreditationForm.title || ''}
|
||||
placeholder="e.g. NABH, NABL, ISO 9001"
|
||||
onChange={(e) =>
|
||||
setAccreditationForm({
|
||||
...accreditationForm,
|
||||
title: e.target.value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-semibold">Description (Optional)</Label>
|
||||
|
||||
<Textarea
|
||||
rows={4}
|
||||
value={accreditationForm.description || ''}
|
||||
placeholder="Short description about this accreditation or certificate"
|
||||
onChange={(e) =>
|
||||
setAccreditationForm({
|
||||
...accreditationForm,
|
||||
description: e.target.value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Media Upload */}
|
||||
<div className="space-y-5">
|
||||
<div className="border-b pb-2">
|
||||
<h3 className="text-lg font-bold">Media Assets</h3>
|
||||
|
||||
<p className="text-sm text-muted-foreground">Upload logo and certificate images.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label className="font-semibold">Logo (Optional)</Label>
|
||||
|
||||
<p className="text-xs text-muted-foreground">Recommended transparent PNG/SVG logo.</p>
|
||||
|
||||
<BytescaleUploader
|
||||
value={accreditationForm.logo || ''}
|
||||
folderPath="/accreditations"
|
||||
onChange={(url) =>
|
||||
setAccreditationForm({
|
||||
...accreditationForm,
|
||||
logo: url,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-semibold">Certificate Image (Optional)</Label>
|
||||
|
||||
<p className="text-xs text-muted-foreground">Upload certificate, award or recognition image.</p>
|
||||
|
||||
<BytescaleUploader
|
||||
value={accreditationForm.image || ''}
|
||||
folderPath="/accreditations"
|
||||
onChange={(url) =>
|
||||
setAccreditationForm({
|
||||
...accreditationForm,
|
||||
image: url,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Display Settings */}
|
||||
<div className="space-y-5">
|
||||
<div className="border-b pb-2">
|
||||
<h3 className="text-lg font-bold">Display Settings</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
<div className="space-y-2">
|
||||
<Label className="font-semibold">Priority</Label>
|
||||
|
||||
<Input
|
||||
type="number"
|
||||
value={accreditationForm.sortOrder}
|
||||
onChange={(e) =>
|
||||
setAccreditationForm({
|
||||
...accreditationForm,
|
||||
sortOrder: Number(e.target.value),
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between border rounded-xl p-4 bg-muted/30">
|
||||
<div>
|
||||
<p className="font-semibold">Active Visibility</p>
|
||||
</div>
|
||||
|
||||
<Switch
|
||||
checked={accreditationForm.isActive}
|
||||
onCheckedChange={(value) =>
|
||||
setAccreditationForm({
|
||||
...accreditationForm,
|
||||
isActive: value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<DialogFooter className="p-6 border-t bg-background sticky bottom-0 z-20">
|
||||
<Button variant="ghost" onClick={() => onOpenChange(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
|
||||
<Button className="px-10" onClick={onSave}>
|
||||
{editingAccreditation ? 'Save Changes' : 'Create Item'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -15,7 +15,8 @@ interface BytescaleUploaderProps {
|
||||
| '/blog'
|
||||
| '/doctor-og'
|
||||
| '/homepage-banners'
|
||||
| '/insurance-partners';
|
||||
| '/insurance-partners'
|
||||
| '/accreditations';
|
||||
}
|
||||
|
||||
export function BytescaleUploader({ value, onChange, folderPath }: BytescaleUploaderProps) {
|
||||
|
||||
@@ -64,6 +64,7 @@ export default function Sidebar() {
|
||||
name: 'Insurance Partner',
|
||||
path: '/insurance-partner',
|
||||
},
|
||||
{ name: 'Accreditation', path: '/accreditation' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@@ -0,0 +1,347 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user