feat: accreditation crud

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' },
 			],
 		},
 	];