Merge pull request 'feat: accreditation crud' (#49) from feat/accreditation-crud into dev

Reviewed-on: #49

backend/prisma/migrations/20260622101915_accreditation/migration.sql

@@ -0,0 +1,18 @@
+-- CreateEnum
+CREATE TYPE "AccreditationType" AS ENUM ('ACCREDITATION', 'CERTIFICATION');
+
+-- CreateTable
+CREATE TABLE "Accreditation" (
+    "id" SERIAL NOT NULL,
+    "title" TEXT NOT NULL,
+    "type" "AccreditationType" NOT NULL,
+    "logo" TEXT,
+    "image" TEXT,
+    "description" TEXT,
+    "sortOrder" INTEGER NOT NULL DEFAULT 1000,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Accreditation_pkey" PRIMARY KEY ("id")
+);

backend/prisma/schema.prisma

@@ -357,3 +357,24 @@ model InsurancePartner {
   createdAt   DateTime @default(now())
   updatedAt   DateTime @updatedAt
 }
+
+model Accreditation {
+  id          Int      @id @default(autoincrement())
+
+  title       String
+  type        AccreditationType
+  logo        String?
+  image       String?
+  description String? @db.Text
+
+  sortOrder   Int      @default(1000)
+  isActive    Boolean  @default(true)
+
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+}
+
+enum AccreditationType {
+  ACCREDITATION
+  CERTIFICATION
+}

backend/src/app.js

@@ -18,6 +18,7 @@ import importRoutes from './routes/importRoutes.js';
 import healthCheckRoutes from './routes/healthCheck.route.js';
 import homepageBannerRoutes from './routes/homepageBanner.routes.js';
 import insurancePartnerRoutes from './routes/insurancePartner.routes.js';
+import accreditationRoutes from './routes/accreditation.routes.js';
 
 dotenv.config();
 
@@ -61,6 +62,7 @@ app.use('/api/import', importRoutes);
 app.use('/api/health-check', healthCheckRoutes);
 app.use('/api/homepage-banners', homepageBannerRoutes);
 app.use('/api/insurance-partners', insurancePartnerRoutes);
+app.use('/api/accreditation', accreditationRoutes);
 
 const PORT = process.env.PORT || 5008;
 app.listen(PORT, () => {

backend/src/controllers/accreditation.controller.js

@@ -0,0 +1,189 @@
+import prisma from '../prisma/client.js';
+
+export const createAccreditation = async (req, res) => {
+	try {
+		const { title, type, logo, image, description, sortOrder, isActive } = req.body;
+
+		if (!title || !type) {
+			return res.status(400).json({
+				success: false,
+				message: 'Title and type are required',
+			});
+		}
+
+		const accreditation = await prisma.accreditation.create({
+			data: {
+				title,
+				type,
+				logo,
+				image,
+				description,
+				sortOrder: sortOrder ? Number(sortOrder) : 1000,
+				isActive: isActive ?? true,
+			},
+		});
+
+		res.status(201).json({
+			success: true,
+			data: accreditation,
+			message: 'Accreditation created successfully',
+		});
+	} catch (error) {
+		console.error('PRISMA TRANSACTION ERROR:', error);
+
+		res.status(500).json({
+			success: false,
+			message: 'Failed to create accreditation',
+		});
+	}
+};
+
+export const getAccreditations = async (req, res) => {
+	try {
+		const { type } = req.query;
+
+		const accreditations = await prisma.accreditation.findMany({
+			where: type
+				? {
+						type,
+					}
+				: undefined,
+			orderBy: {
+				sortOrder: 'asc',
+			},
+		});
+
+		res.json({
+			success: true,
+			data: accreditations,
+		});
+	} catch (error) {
+		console.error(error);
+
+		res.status(500).json({
+			success: false,
+			message: 'Failed to fetch accreditations',
+		});
+	}
+};
+
+export const getActiveAccreditations = async (req, res) => {
+	try {
+		const { type } = req.query;
+
+		const accreditations = await prisma.accreditation.findMany({
+			where: {
+				isActive: true,
+				...(type && { type }),
+			},
+			orderBy: {
+				sortOrder: 'asc',
+			},
+		});
+
+		res.json({
+			success: true,
+			data: accreditations,
+		});
+	} catch (error) {
+		console.error(error);
+
+		res.status(500).json({
+			success: false,
+			message: 'Failed to fetch accreditations',
+		});
+	}
+};
+
+export const getAccreditation = async (req, res) => {
+	try {
+		const { id } = req.params;
+
+		const accreditation = await prisma.accreditation.findUnique({
+			where: {
+				id: Number(id),
+			},
+		});
+
+		if (!accreditation) {
+			return res.status(404).json({
+				success: false,
+				message: 'Accreditation not found',
+			});
+		}
+
+		res.json({
+			success: true,
+			data: accreditation,
+		});
+	} catch (error) {
+		console.error(error);
+
+		res.status(500).json({
+			success: false,
+			message: 'Failed to fetch accreditation',
+		});
+	}
+};
+
+export const updateAccreditation = async (req, res) => {
+	try {
+		const { id } = req.params;
+
+		const { title, type, logo, image, description, sortOrder, isActive } = req.body;
+
+		const updateData = {};
+
+		if (title !== undefined) updateData.title = title;
+		if (type !== undefined) updateData.type = type;
+		if (logo !== undefined) updateData.logo = logo;
+		if (image !== undefined) updateData.image = image;
+		if (description !== undefined) updateData.description = description;
+		if (sortOrder !== undefined) updateData.sortOrder = Number(sortOrder);
+		if (isActive !== undefined) updateData.isActive = isActive;
+
+		const accreditation = await prisma.accreditation.update({
+			where: {
+				id: Number(id),
+			},
+			data: updateData,
+		});
+
+		res.json({
+			success: true,
+			data: accreditation,
+			message: 'Accreditation updated successfully',
+		});
+	} catch (error) {
+		console.error('PRISMA TRANSACTION ERROR:', error);
+
+		res.status(500).json({
+			success: false,
+			message: 'Failed to update accreditation',
+		});
+	}
+};
+
+export const deleteAccreditation = async (req, res) => {
+	try {
+		const { id } = req.params;
+
+		await prisma.accreditation.delete({
+			where: {
+				id: Number(id),
+			},
+		});
+
+		res.json({
+			success: true,
+			message: 'Accreditation deleted successfully',
+		});
+	} catch (error) {
+		console.error(error);
+
+		res.status(500).json({
+			success: false,
+			message: 'Failed to delete accreditation',
+		});
+	}
+};

backend/src/routes/accreditation.routes.js

@@ -0,0 +1,24 @@
+import express from 'express';
+
+import {
+	createAccreditation,
+	getAccreditations,
+	getActiveAccreditations,
+	getAccreditation,
+	updateAccreditation,
+	deleteAccreditation,
+} from '../controllers/accreditation.controller.js';
+
+import jwtAuthMiddleware from '../middleware/auth.js';
+
+const router = express.Router();
+
+router.get('/active', getActiveAccreditations);
+
+router.post('/', jwtAuthMiddleware, createAccreditation);
+router.get('/getAll', jwtAuthMiddleware, getAccreditations);
+router.get('/:id', jwtAuthMiddleware, getAccreditation);
+router.put('/:id', jwtAuthMiddleware, updateAccreditation);
+router.delete('/:id', jwtAuthMiddleware, deleteAccreditation);
+
+export default router;

frontend/src/App.tsx

@@ -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>
 

frontend/src/api/accreditation.ts

@@ -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;
+	}
+};

frontend/src/components/AccreditationModal/AccreditationModal.tsx

@@ -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>
+	);
+}

frontend/src/components/BytescaleUploader/BytescaleUploader.tsx

@@ -15,7 +15,8 @@ interface BytescaleUploaderProps {
 		| '/blog'
 		| '/doctor-og'
 		| '/homepage-banners'
-		| '/insurance-partners';
+		| '/insurance-partners'
+		| '/accreditations';
 }
 
 export function BytescaleUploader({ value, onChange, folderPath }: BytescaleUploaderProps) {

frontend/src/components/layout/Sidebar.tsx

@@ -64,6 +64,7 @@ export default function Sidebar() {
 					name: 'Insurance Partner',
 					path: '/insurance-partner',
 				},
+				{ name: 'Accreditation', path: '/accreditation' },
 			],
 		},
 	];

frontend/src/pages/Accreditation.tsx

@@ -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>
+	);
+}