100:"ExplicitChatIdProvider" 101:I[903690,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$7b","$7c","$7d","$79","$76","$7e","$77","$7f","$80","$81","$82","$83","$78"],"$100"] 102:I[838238,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$7b","$7c","$7d","$79","$76","$7e","$77","$7f","$80","$81","$82","$83","$78"],"SWRDataProvider"] 104:[] 105:[["b_9M57dWQfaLU",null],["b_t13SPB7ghMr",null],["b_Kxj6N94WAH1",null],["b_BfKH1QQgsTI",null],["b_xGhQlFKgimh",null],["b_m5Mydc8MM3O",null],["b_yU62ofpLtKk",null],["b_jZQrbwWbvSv",null],["b_HHQ1VlEEMad",null],["b_IrMCmaRZlmT",null],["b_7CiBoKudZIt",null],["b_llVTYAng3iq",null],["b_HQnoYb9oeXC",null],["b_Q7oH64N3Xvi",null],["b_oCgvtVSbt8O",null],["b_BVQmJsrtypz",null],["b_05vfeHQ8Wrz",null],["b_WppRdibdU2C",null],["b_W5YDS79gjAk",null],["b_Q0Na4wzjNzY",null],["b_g6jghSISmeA",null],["b_RMT2bNHtqBY",null],["b_9trUDCD4Ue1",null]] 106:[["b_9M57dWQfaLU",{"templateVersionId":null,"templateCanonId":null}],["b_t13SPB7ghMr",{"templateVersionId":null,"templateCanonId":null}],["b_Kxj6N94WAH1",{"templateVersionId":null,"templateCanonId":null}],["b_BfKH1QQgsTI",{"templateVersionId":null,"templateCanonId":null}],["b_xGhQlFKgimh",{"templateVersionId":null,"templateCanonId":null}],["b_m5Mydc8MM3O",{"templateVersionId":null,"templateCanonId":null}],["b_yU62ofpLtKk",{"templateVersionId":null,"templateCanonId":null}],["b_jZQrbwWbvSv",{"templateVersionId":null,"templateCanonId":null}],["b_HHQ1VlEEMad",{"templateVersionId":null,"templateCanonId":null}],["b_IrMCmaRZlmT",{"templateVersionId":null,"templateCanonId":null}],["b_7CiBoKudZIt",{"templateVersionId":null,"templateCanonId":null}],["b_llVTYAng3iq",{"templateVersionId":null,"templateCanonId":null}],["b_HQnoYb9oeXC",{"templateVersionId":null,"templateCanonId":null}],["b_Q7oH64N3Xvi",{"templateVersionId":null,"templateCanonId":null}],["b_oCgvtVSbt8O",{"templateVersionId":null,"templateCanonId":null}],["b_BVQmJsrtypz",{"templateVersionId":null,"templateCanonId":null}],["b_05vfeHQ8Wrz",{"templateVersionId":null,"templateCanonId":null}],["b_WppRdibdU2C",{"templateVersionId":null,"templateCanonId":null}],["b_W5YDS79gjAk",{"templateVersionId":null,"templateCanonId":null}],["b_Q0Na4wzjNzY",{"templateVersionId":null,"templateCanonId":null}],["b_g6jghSISmeA",{"templateVersionId":null,"templateCanonId":null}],["b_RMT2bNHtqBY",{"templateVersionId":null,"templateCanonId":null}],["b_9trUDCD4Ue1",{"templateVersionId":null,"templateCanonId":null}]] 107:[["tbr6UBSu4GT","$D2026-02-02T06:12:01.140Z"],["b_kSV7keqw8xE","$D2026-02-02T06:15:33.609Z"],["b_wpXIfISQ6Q2","$D2026-02-02T06:16:01.470Z"],["b_nUpuvjXoY4Z","$D2026-02-02T06:16:11.919Z"],["b_dL02gdAGImF","$D2026-02-02T06:16:29.098Z"],["b_lnPhdQtij6Q","$D2026-02-02T06:41:25.679Z"],["b_PJOAYtmNaV7","$D2026-02-02T06:42:13.319Z"],["b_xywiIGXKvsI","$D2026-02-02T06:42:22.082Z"],["b_feUS3KuQVob","$D2026-02-02T06:42:34.264Z"],["b_zYA3uHITtWW","$D2026-02-02T06:42:46.874Z"],["b_mlWe7ZdOnwp","$D2026-02-02T06:42:58.628Z"],["b_z76GSAU2p4c","$D2026-02-02T06:49:36.635Z"],["b_LleqMIaQRvZ","$D2026-02-02T06:56:59.224Z"],["b_kXyW2jYYlmt","$D2026-02-02T06:57:15.331Z"],["b_EPt1QmOi7fE","$D2026-02-02T06:57:27.963Z"],["b_m8BSLkR911q","$D2026-02-02T06:57:40.321Z"],["b_9M57dWQfaLU","$D2026-02-02T07:25:26.347Z"],["b_t13SPB7ghMr","$D2026-02-02T07:25:37.614Z"],["b_Kxj6N94WAH1","$D2026-02-02T07:25:50.628Z"],["b_BfKH1QQgsTI","$D2026-02-02T07:26:01.341Z"],["b_xGhQlFKgimh","$D2026-02-02T07:26:13.917Z"],["b_m5Mydc8MM3O","$D2026-02-02T07:26:33.807Z"],["b_yU62ofpLtKk","$D2026-02-02T07:26:52.697Z"],["b_jZQrbwWbvSv","$D2026-02-02T07:27:15.437Z"],["b_HHQ1VlEEMad","$D2026-02-02T07:36:41.357Z"],["b_IrMCmaRZlmT","$D2026-02-02T07:36:50.615Z"],["b_7CiBoKudZIt","$D2026-02-02T07:37:04.059Z"],["b_llVTYAng3iq","$D2026-02-02T07:50:04.555Z"],["b_HQnoYb9oeXC","$D2026-02-02T07:50:28.840Z"],["b_Q7oH64N3Xvi","$D2026-02-02T07:50:44.577Z"],["b_oCgvtVSbt8O","$D2026-02-02T07:50:57.987Z"],["b_BVQmJsrtypz","$D2026-02-02T07:51:14.116Z"],["b_05vfeHQ8Wrz","$D2026-02-02T07:51:28.466Z"],["b_WppRdibdU2C","$D2026-02-02T07:51:46.979Z"],["b_W5YDS79gjAk","$D2026-02-02T07:51:58.249Z"],["b_Q0Na4wzjNzY","$D2026-02-02T07:52:25.660Z"],["b_g6jghSISmeA","$D2026-02-02T07:52:38.313Z"],["b_RMT2bNHtqBY","$D2026-02-02T07:52:52.489Z"],["b_9trUDCD4Ue1","$D2026-02-02T07:53:06.246Z"]] 108:[["b_9M57dWQfaLU",false],["b_t13SPB7ghMr",false],["b_Kxj6N94WAH1",false],["b_BfKH1QQgsTI",false],["b_xGhQlFKgimh",false],["b_m5Mydc8MM3O",false],["b_yU62ofpLtKk",false],["b_jZQrbwWbvSv",false],["b_HHQ1VlEEMad",false],["b_IrMCmaRZlmT",false],["b_7CiBoKudZIt",false],["b_llVTYAng3iq",false],["b_HQnoYb9oeXC",false],["b_Q7oH64N3Xvi",false],["b_oCgvtVSbt8O",false],["b_BVQmJsrtypz",false],["b_05vfeHQ8Wrz",false],["b_WppRdibdU2C",false],["b_W5YDS79gjAk",false],["b_Q0Na4wzjNzY",false],["b_g6jghSISmeA",false],["b_RMT2bNHtqBY",false],["b_9trUDCD4Ue1",false]] 109:[["b_9M57dWQfaLU","$undefined"],["b_t13SPB7ghMr","$undefined"],["b_Kxj6N94WAH1","$undefined"],["b_BfKH1QQgsTI","$undefined"],["b_xGhQlFKgimh","$undefined"],["b_m5Mydc8MM3O","$undefined"],["b_yU62ofpLtKk","$undefined"],["b_jZQrbwWbvSv","$undefined"],["b_HHQ1VlEEMad","$undefined"],["b_IrMCmaRZlmT","$undefined"],["b_7CiBoKudZIt","$undefined"],["b_llVTYAng3iq","$undefined"],["b_HQnoYb9oeXC","$undefined"],["b_Q7oH64N3Xvi","$undefined"],["b_oCgvtVSbt8O","$undefined"],["b_BVQmJsrtypz","$undefined"],["b_05vfeHQ8Wrz","$undefined"],["b_WppRdibdU2C","$undefined"],["b_W5YDS79gjAk","$undefined"],["b_Q0Na4wzjNzY","$undefined"],["b_g6jghSISmeA","$undefined"],["b_RMT2bNHtqBY","$undefined"],["b_9trUDCD4Ue1","$undefined"]] 10a:[["b_9M57dWQfaLU",null],["b_t13SPB7ghMr",null],["b_Kxj6N94WAH1",null],["b_BfKH1QQgsTI",null],["b_xGhQlFKgimh",null],["b_m5Mydc8MM3O",null],["b_yU62ofpLtKk",null],["b_jZQrbwWbvSv",null],["b_HHQ1VlEEMad",null],["b_IrMCmaRZlmT",null],["b_7CiBoKudZIt",null],["b_llVTYAng3iq",null],["b_HQnoYb9oeXC",null],["b_Q7oH64N3Xvi",null],["b_oCgvtVSbt8O",null],["b_BVQmJsrtypz",null],["b_05vfeHQ8Wrz",null],["b_WppRdibdU2C",null],["b_W5YDS79gjAk",null],["b_Q0Na4wzjNzY",null],["b_g6jghSISmeA",null],["b_RMT2bNHtqBY",null],["b_9trUDCD4Ue1",null]] 10b:[["b_9M57dWQfaLU",true],["b_t13SPB7ghMr",true],["b_Kxj6N94WAH1",true],["b_BfKH1QQgsTI",true],["b_xGhQlFKgimh",true],["b_m5Mydc8MM3O",true],["b_yU62ofpLtKk",true],["b_jZQrbwWbvSv",true],["b_HHQ1VlEEMad",true],["b_IrMCmaRZlmT",true],["b_7CiBoKudZIt",true],["b_llVTYAng3iq",true],["b_HQnoYb9oeXC",true],["b_Q7oH64N3Xvi",true],["b_oCgvtVSbt8O",true],["b_BVQmJsrtypz",true],["b_05vfeHQ8Wrz",true],["b_WppRdibdU2C",true],["b_W5YDS79gjAk",true],["b_Q0Na4wzjNzY",true],["b_g6jghSISmeA",true],["b_RMT2bNHtqBY",true],["b_9trUDCD4Ue1",true]] 10c:[["b_9M57dWQfaLU",true],["b_t13SPB7ghMr",true],["b_Kxj6N94WAH1",true],["b_BfKH1QQgsTI",true],["b_xGhQlFKgimh",true],["b_m5Mydc8MM3O",true],["b_yU62ofpLtKk",true],["b_jZQrbwWbvSv",true],["b_HHQ1VlEEMad",true],["b_IrMCmaRZlmT",true],["b_7CiBoKudZIt",true],["b_llVTYAng3iq",true],["b_HQnoYb9oeXC",true],["b_Q7oH64N3Xvi",true],["b_oCgvtVSbt8O",true],["b_BVQmJsrtypz",true],["b_05vfeHQ8Wrz",true],["b_WppRdibdU2C",true],["b_W5YDS79gjAk",true],["b_Q0Na4wzjNzY",true],["b_g6jghSISmeA",true],["b_RMT2bNHtqBY",true],["b_9trUDCD4Ue1",true]] 10d:[] 10e:Td65d8,[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { redirect } from "next/navigation" export default function Home() { redirect("/admin") } [V0_FILE]typescriptreact:file="app/admin/page.tsx" isMerged="true" import { DashboardStats } from "@/components/admin/dashboard/stats" import { DashboardCharts } from "@/components/admin/dashboard/charts" import { RecentActivity } from "@/components/admin/dashboard/recent-activity" export default function AdminDashboard() { return (

Dashboard

Welcome back to MCC Admin Panel

) } [V0_FILE]typescriptreact:file="app/admin/members/page.tsx" isMerged="true" import { MembersTable } from "@/components/admin/members/members-table" export default function MembersPage() { return (

Members Management

Manage party members and their information

) } [V0_FILE]typescriptreact:file="app/admin/news/page.tsx" isMerged="true" import { NewsList } from "@/components/admin/news/news-list" export default function NewsPage() { return (

News & Press Releases

Manage news articles and press releases

) } [V0_FILE]typescriptreact:file="app/admin/events/page.tsx" isMerged="true" import { EventsList } from "@/components/admin/events/events-list" export default function EventsPage() { return (

Events Management

Create and manage MCC events

) } [V0_FILE]typescriptreact:file="app/admin/branches/page.tsx" isMerged="true" import { BranchesList } from "@/components/admin/branches/branches-list" export default function BranchesPage() { return (

Branches Management

Manage branch locations and information

) } [V0_FILE]typescriptreact:file="app/admin/leadership/page.tsx" isMerged="true" import Link from "next/link" import { ArrowLeft } from "lucide-react" import { LeadershipList } from "@/components/admin/leadership/leadership-list" export default function LeadershipPage() { return (

Leadership Management

Manage party leaders and positions

) } [V0_FILE]typescriptreact:file="app/admin/gallery/page.tsx" isMerged="true" import { GalleryManagement } from "@/components/admin/gallery/gallery-management" export default function GalleryPage() { return (

Gallery Management

Manage photos and media files

) } [V0_FILE]typescriptreact:file="app/admin/documents/page.tsx" isMerged="true" import { DocumentsList } from "@/components/admin/documents/documents-list" export default function DocumentsPage() { return (

Documents Management

Upload and manage documents

) } [V0_FILE]typescriptreact:file="app/admin/users/page.tsx" isMerged="true" import { UsersList } from "@/components/admin/users/users-list" export default function UsersPage() { return (

Users & Permissions

Manage admin users and their permissions

) } [V0_FILE]typescriptreact:file="app/admin/admin.css" isMerged="true" /* MCC Admin Panel Styles */ :root { --mcc-red: #ce1126; --mcc-blue: #003087; --mcc-light-gray: #f3f4f6; --mcc-dark-gray: #1f2937; --mcc-border: #e5e7eb; } /* Smooth transitions */ * { transition-property: background-color, border-color, color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 200ms; } /* Scrollbar styling */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--mcc-light-gray); } ::-webkit-scrollbar-thumb { background: var(--mcc-blue); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--mcc-red); } [V0_FILE]typescriptreact:file="components/admin/news/news-list.tsx" isQuickEdit="true" isMerged="true" "use client" import { Edit, Trash2, Plus, Eye, Search, ChevronLeft, ChevronRight } from "lucide-react" import { useState } from "react" const mockNews = [ { id: 1, title: "MCC Launches New Community Initiative", date: "2024-01-15", status: "Published", views: 234 }, { id: 2, title: "Annual Conference Announcement", date: "2024-01-10", status: "Published", views: 567 }, { id: 3, title: "Youth Program Expansion", date: "2024-01-05", status: "Draft", views: 0 }, { id: 4, title: "Partnership with International Bodies", date: "2023-12-28", status: "Published", views: 892 }, { id: 5, title: "New Membership Guidelines Released", date: "2023-12-20", status: "Published", views: 450 }, { id: 6, title: "Cultural Event Planning Begins", date: "2023-12-15", status: "Draft", views: 0 }, { id: 7, title: "Financial Report Q4 2023", date: "2023-12-10", status: "Published", views: 320 }, { id: 8, title: "Leadership Workshop Scheduled", date: "2023-12-05", status: "Published", views: 210 }, ] export function NewsList() { const [searchTerm, setSearchTerm] = useState("") const [statusFilter, setStatusFilter] = useState<"All" | "Published" | "Draft">("All") const [currentPage, setCurrentPage] = useState(1) const [pageSize, setPageSize] = useState(10) const filteredNews = mockNews.filter((item) => { const matchesSearch = item.title.toLowerCase().includes(searchTerm.toLowerCase()) const matchesStatus = statusFilter === "All" || item.status === statusFilter return matchesSearch && matchesStatus }) const totalPages = Math.ceil(filteredNews.length / pageSize) const startIndex = (currentPage - 1) * pageSize const paginatedNews = filteredNews.slice(startIndex, startIndex + pageSize) return (

{ setSearchTerm(e.target.value) setCurrentPage(1) }} className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]" />

{paginatedNews.map((item) => (

{item.title}

{item.date} {item.status} {item.views} views

))}

Showing {filteredNews.length === 0 ? 0 : startIndex + 1} to{" "} {Math.min(startIndex + pageSize, filteredNews.length)} of {filteredNews.length} articles

{Array.from({ length: Math.min(totalPages, 5) }, (_, i) => i + 1).map((page) => ( ))}

) } [V0_FILE]typescriptreact:file="components/admin/users/users-list.tsx" isQuickEdit="true" isMerged="true" "use client" import { Edit, Trash2, Plus, Shield, Search, ChevronLeft, ChevronRight } from "lucide-react" import { useState } from "react" const mockUsers = [ { id: 1, name: "Admin User 1", email: "admin1@mcc.my", role: "Super Admin", status: "Active" }, { id: 2, name: "Admin User 2", email: "admin2@mcc.my", role: "Editor", status: "Active" }, { id: 3, name: "Admin User 3", email: "admin3@mcc.my", role: "Moderator", status: "Inactive" }, { id: 4, name: "Admin User 4", email: "admin4@mcc.my", role: "Viewer", status: "Active" }, { id: 5, name: "Admin User 5", email: "admin5@mcc.my", role: "Editor", status: "Active" }, { id: 6, name: "Admin User 6", email: "admin6@mcc.my", role: "Moderator", status: "Inactive" }, { id: 7, name: "Admin User 7", email: "admin7@mcc.my", role: "Super Admin", status: "Active" }, { id: 8, name: "Admin User 8", email: "admin8@mcc.my", role: "Viewer", status: "Active" }, ] export function UsersList() { const [searchTerm, setSearchTerm] = useState("") const [statusFilter, setStatusFilter] = useState<"All" | "Active" | "Inactive">("All") const [currentPage, setCurrentPage] = useState(1) const [itemsPerPage, setItemsPerPage] = useState(10) const filteredUsers = mockUsers.filter((user) => { const matchesSearch = user.name.toLowerCase().includes(searchTerm.toLowerCase()) || user.email.toLowerCase().includes(searchTerm.toLowerCase()) || user.role.toLowerCase().includes(searchTerm.toLowerCase()) const matchesStatus = statusFilter === "All" || user.status === statusFilter return matchesSearch && matchesStatus }) const totalPages = Math.ceil(filteredUsers.length / itemsPerPage) const startIndex = (currentPage - 1) * itemsPerPage const paginatedUsers = filteredUsers.slice(startIndex, startIndex + itemsPerPage) return (

{ setSearchTerm(e.target.value) setCurrentPage(1) }} className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]" />

{paginatedUsers.map((user) => ( ))}

Name	Email	Role	Status	Actions
{user.name}	{user.email}	{user.role}	{user.status}

Showing {filteredUsers.length === 0 ? 0 : startIndex + 1} to{" "} {Math.min(startIndex + itemsPerPage, filteredUsers.length)} of {filteredUsers.length} users

{Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => ( ))}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "MCC Admin Panel - Malaysian Ceylonese Congress", description: "Admin dashboard for Malaysian Ceylonese Congress website management", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/globals.css" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* MCC Admin Panel Custom Colors */ :root { --mcc-red: #ce1126; --mcc-blue: #003087; } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/admin/memberships/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/admin/media-resources/page.tsx" isMerged="true" "use client" import Link from "next/link" import { Card, CardContent } from "@/components/ui/card" import { ImageIcon, Newspaper } from "lucide-react" export default function MediaResourcesPage() { const sections = [ { id: 1, title: "Photo/Video Gallery", description: "Manage photos and videos for the MCC website", icon: ImageIcon, href: "/admin/media-resources/photo-gallery", color: "bg-blue-100 text-blue-700", }, { id: 2, title: "News", description: "Create and manage news articles and press releases", icon: Newspaper, href: "/admin/media-resources/news", color: "bg-green-100 text-green-700", }, ] return (

Media Resources

Manage media content for your organization

{sections.map((section) => { const Icon = section.icon return (

{section.title}

{section.description}

Click to manage →

) })}

) } [V0_FILE]typescriptreact:file="app/admin/election-corner/page.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Plus, Vote, Calendar, Users, TrendingUp } from "lucide-react" export default function ElectionCornerPage() { const elections = [ { id: 1, title: "National General Election 2024", type: "General Election", startDate: "2024-12-15", endDate: "2024-12-20", status: "completed", candidates: 28, voters: 7840, turnout: "94.2%", }, { id: 2, title: "Branch Committee Elections", type: "Committee Elections", startDate: "2024-11-10", endDate: "2024-11-15", status: "completed", candidates: 42, voters: 6200, turnout: "88.5%", }, { id: 3, title: "Youth Wing Leadership 2025", type: "Youth Election", startDate: "2025-01-20", endDate: "2025-01-25", status: "upcoming", candidates: 15, voters: 2100, turnout: "0%", }, ] const getStatusColor = (status: string) => { switch (status) { case "completed": return "bg-green-100 text-green-700" case "upcoming": return "bg-blue-100 text-blue-700" case "ongoing": return "bg-amber-100 text-amber-700" default: return "bg-gray-100 text-gray-700" } } return (

Election Corner

Manage elections and voting records

{elections.map((election) => (

{election.title} {election.status}

{election.type}

Duration

{election.startDate} to {election.endDate}

Candidates

{election.candidates}

Voters

{election.voters}

Turnout

{election.turnout}

))}

) } [V0_FILE]typescriptreact:file="app/admin/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { AdminSidebar } from "@/components/admin/sidebar" import { AdminHeader } from "@/components/admin/header" import "@/app/admin/admin.css" export const metadata: Metadata = { title: "MCC Admin Panel", description: "Malaysian Ceylonese Congress Admin Dashboard", } export default function AdminLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/admin/header.tsx" isMerged="true" "use client" import { Bell, User, LogOut, Settings } from "lucide-react" import { useState } from "react" export function AdminHeader() { const [isOpen, setIsOpen] = useState(false) return (

{/* Left side - space for mobile menu button */}

{/* Right side - User menu and notifications */}

{/* Notifications */} {/* User menu */}

{/* Dropdown menu */} {isOpen && (

)}

) } [V0_FILE]typescriptreact:file="components/admin/branches/branch-view-modal.tsx" isMerged="true" "use client" import { X, MapPin, Users, Phone, Mail, Calendar, User, MapPinIcon } from "lucide-react" interface Branch { id?: number name: string location: string members: number phone: string email: string established: string address?: string city?: string state?: string zipCode?: string manager?: string } interface BranchViewModalProps { branch: Branch onClose: () => void } export default function BranchViewModal({ branch, onClose }: BranchViewModalProps) { return (

Branch Details

{branch.name}

{branch.location}

Total Members

{branch.members.toLocaleString()}

Established

{branch.established}

Phone

{branch.phone}

{branch.email}

{branch.manager && (

Branch Manager

{branch.manager}

)} {branch.city && (

City

{branch.city}

)}

{branch.address && (

Full Address

{branch.address} {branch.state && `, ${branch.state}`} {branch.zipCode && ` ${branch.zipCode}`}

)}

) } [V0_FILE]typescriptreact:file="app/admin/branch/add/page.tsx" isMerged="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import { ArrowLeft } from "lucide-react" import Link from "next/link" import BranchForm from "@/components/admin/branches/branch-form" interface Branch { id?: number name: string location: string members: number phone: string email: string established: string address?: string city?: string state?: string zipCode?: string manager?: string } export default function AddBranchPage() { const router = useRouter() const [branches, setBranches] = useState([]) const handleSubmit = (data: Omit) => { const newBranch: Branch = { ...data, id: Math.max(...branches.map((b) => b.id || 0), 0) + 1, } setBranches([...branches, newBranch]) router.push("/admin/branch") } return (

Back to Branches

Add New Branch

Fill in the details to create a new branch

router.push("/admin/branch")} />

) } [V0_FILE]typescriptreact:file="app/admin/branch/edit/[id]/page.tsx" isMerged="true" "use client" import { useRouter } from "next/navigation" import { ArrowLeft } from "lucide-react" import Link from "next/link" import BranchForm from "@/components/admin/branches/branch-form" interface Branch { id?: number name: string location: string members: number phone: string email: string established: string address?: string city?: string state?: string zipCode?: string manager?: string } export default function EditBranchPage({ params }: { params: { id: string } }) { const router = useRouter() const branchId = Number.parseInt(params.id) // Mock branch data - replace with API call const mockBranch: Branch = { id: branchId, name: "Kuala Lumpur Main Branch", location: "Kuala Lumpur, Federal Territory", members: 2450, phone: "+60 3-2142-3456", email: "kl@mcc.org.my", established: "1986", address: "123 Merdeka Street", city: "Kuala Lumpur", state: "Federal Territory", zipCode: "50050", manager: "Dato Ahmad bin Abdullah", } const handleSubmit = (data: Omit) => { // Handle update logic here router.push("/admin/branch") } return (

Back to Branches

Edit Branch

Update branch information

router.push("/admin/branch")} />

) } [V0_FILE]typescriptreact:file="app/admin/committees/edit/[id]/page.tsx" isMerged="true" "use client" import { useRouter } from "next/navigation" import { ArrowLeft } from "lucide-react" import Link from "next/link" import CommitteeForm from "@/components/admin/committees/committee-form" interface Committee { id?: number name: string description: string members: number chair: string meetings: string foundedYear?: string vice_chair?: string secretary?: string budget?: string } export default function EditCommitteePage({ params }: { params: { id: string } }) { const router = useRouter() const committeeId = Number.parseInt(params.id) // Mock committee data - replace with API call const mockCommittee: Committee = { id: committeeId, name: "Executive Committee", description: "Oversees overall administration and strategic planning", members: 15, chair: "Datuk S. Arokiasamy", meetings: "Monthly", foundedYear: "1985", vice_chair: "Mr. R. Sivakumar", secretary: "Ms. Anjali Sharma", budget: "RM 500,000", } const handleSubmit = (data: Omit) => { // Handle update logic here router.push("/admin/committees") } return (

Back to Committees

Edit Committee

Update committee information

router.push("/admin/committees")} />

) } [V0_FILE]typescriptreact:file="app/admin/memberships/masterfile/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/admin/memberships/masterfile/page.tsx" isQuickEdit="true" isMerged="true" import MembershipMasterfileClient from "./members-client" export default async function MembershipMasterfilePage() { const members = [ { id: 1, name: "Ahmad Abdullah", email: "ahmad@mcc.org.my", phone: "+60 12-345-6789", membershipType: "Ordinary Member", branch: "Kuala Lumpur", joinDate: "2023-05-15", status: "active", }, { id: 2, name: "Siti Azizah", email: "siti@mcc.org.my", phone: "+60 11-987-6543", membershipType: "Life Member", branch: "Penang", joinDate: "2022-03-10", status: "active", }, { id: 3, name: "Raj Kumar", email: "raj@mcc.org.my", phone: "+60 10-234-5678", membershipType: "Student Member", branch: "Kuala Lumpur", joinDate: "2024-09-20", status: "active", }, ] return } [V0_FILE]jpg:file="public/official-engagement-malaysia.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/official-engagement-malaysia-eQMYBjgV3kW1TifDwgwzFdZRCv8Z22.jpg" isMerged="true" [V0_FILE]png:file="public/community-service.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/community-service-1HKasF2O17Fqs4xTT8kdBVGTlbn9Oe.png" isMerged="true" [V0_FILE]jpg:file="public/checking-news.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/checking-news-desGyyXJknU7fyTWroqHeNCMkNUMz4.jpg" isMerged="true" [V0_FILE]jpg:file="public/risks-malaysia.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/risks-malaysia-4Udo17lMndH7x2RmO9VIBfazmrTjKH.jpg" isMerged="true" [V0_FILE]typescriptreact:file="app/admin/public-page/page.tsx" isMerged="true" "use client" import Link from "next/link" import { Card, CardContent } from "@/components/ui/card" import { Users, FileText } from "lucide-react" export default function PublicPagePage() { const sections = [ { id: "team", title: "Leadership", description: "Manage team members and leadership", icon: Users, href: "/admin/public-page/team", count: 2, }, { id: "documents", title: "Documents & Literature", description: "Manage documents and literature resources", icon: FileText, href: "/admin/public-page/documents", count: 3, }, ] return (

Public Page Management

Manage team, documents, and public content

{sections.map((section) => { const Icon = section.icon return (

{section.title}

{section.description}

{section.count}

Total items

) })}

) } [V0_FILE]jpg:file="public/aravind.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/aravind-brMHOxP7Msv3tdM62UEirV8q2ZOsCS.jpg" isMerged="true" [V0_FILE]jpg:file="public/senthil.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/senthil-3274LTwDIx54B92YNqe1R2rVRw4TNB.jpg" isMerged="true" [V0_FILE]typescriptreact:file="app/admin/contact/page.tsx" isQuickEdit="true" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Mail, Phone, MapPin, Clock, FileText } from "lucide-react" import Link from "next/link" export default function ContactPage() { const contacts = [ { id: 1, name: "Main Office", address: "Jln Tun Ismail, 50480 Kuala Lumpur", phone: "+60 3-4108-9888", email: "info@mcc.org.my", hours: "Monday - Friday: 9AM - 5PM", }, { id: 2, name: "Penang Office", address: "Lebuh Penang, 10200 George Town, Penang", phone: "+60 4-262-3456", email: "penang@mcc.org.my", hours: "Monday - Friday: 9AM - 5PM", }, { id: 3, name: "Johor Office", address: "Jln Sultan Ismail, 80000 Johor Bahru", phone: "+60 7-223-5678", email: "johor@mcc.org.my", hours: "Monday - Friday: 9AM - 5PM", }, ] const contacts_list = [ { id: 1, name: "President", person: "Datuk S. Arokiasamy", phone: "+60 3-4108-9999", email: "president@mcc.org.my", }, { id: 2, name: "Vice President", person: "Mr. K. Veerasingam", phone: "+60 3-4108-9998", email: "vp@mcc.org.my", }, { id: 3, name: "General Secretary", person: "Mr. S. Ramu", phone: "+60 3-4108-9997", email: "secretary@mcc.org.my", }, { id: 4, name: "Treasurer", person: "Mr. V. Subramaniam", phone: "+60 3-4108-9996", email: "treasurer@mcc.org.my", }, ] const sections = [ { id: "info", title: "Contact Information", description: "Manage office locations, addresses, and contact details", icon: Phone, href: "/admin/contact/info", }, { id: "submissions", title: "Form Submissions", description: "View and manage contact form submissions", icon: FileText, href: "/admin/contact/form-submissions", }, ] return (

{/* Header */}

Contact Management

Manage contact information and form submissions

{/* Navigation Cards */}

{sections.map((section) => { const Icon = section.icon return (

{section.title}

{section.description}

) })}

{/* Office Locations */}

Office Locations

{contacts.map((contact) => ( {contact.name}

{contact.address}

{contact.phone}

{contact.email}

{contact.hours}

))}

{/* Key Contacts */}

Key Contacts

{contacts_list.map((contact) => (

{contact.name}

{contact.person}

{contact.phone}

{contact.email}

))}

) } [V0_FILE]typescriptreact:file="app/admin/users-roles/users/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/admin/users-roles/permissions/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent } from "@/components/ui/card" import { ArrowLeft, Lock } from "lucide-react" import Link from "next/link" export default function PermissionsPage() { const [permissions] = useState([ { id: 1, name: "View Dashboard", category: "Dashboard", description: "Access to view dashboard" }, { id: 2, name: "Edit Dashboard", category: "Dashboard", description: "Ability to edit dashboard widgets" }, { id: 3, name: "View Branches", category: "Branch Management", description: "Can view branch information" }, { id: 4, name: "Create Branch", category: "Branch Management", description: "Can create new branches" }, { id: 5, name: "Edit Branch", category: "Branch Management", description: "Can edit branch details" }, { id: 6, name: "Delete Branch", category: "Branch Management", description: "Can delete branches" }, { id: 7, name: "View Members", category: "Member Management", description: "Can view member information" }, { id: 8, name: "Create Member", category: "Member Management", description: "Can add new members" }, { id: 9, name: "Edit Member", category: "Member Management", description: "Can edit member details" }, { id: 10, name: "Delete Member", category: "Member Management", description: "Can delete members" }, { id: 11, name: "Manage Media", category: "Media Resources", description: "Can upload and manage media" }, { id: 12, name: "Manage Users", category: "User Management", description: "Can create and manage users" }, ]) const groupedPermissions = permissions.reduce( (acc, perm) => { if (!acc[perm.category]) acc[perm.category] = [] acc[perm.category].push(perm) return acc }, {} as Record, ) return (

Back to Users & Roles

System Permissions

View all available system permissions

{/* Permissions by Category */}

{Object.entries(groupedPermissions).map(([category, perms]) => (

{category}

{perms.map((perm) => (

{perm.name}

{perm.description}

{category}

))}

{/* Summary */}

Permission Summary

Total Permissions: {permissions.length}

These permissions are assigned to roles, which are then assigned to users to control their access to the admin panel.

) } [V0_FILE]typescriptreact:file="app/admin/users-roles/users/page.tsx" isMerged="true" import UsersClient from "@/components/admin/users-roles/users-client" export default function UsersPage() { return } [V0_FILE]typescriptreact:file="app/admin/branch/view/[id]/page.tsx" isMerged="true" "use client" import { useParams } from "next/navigation" import Link from "next/link" import { ArrowLeft, MapPin, Users, Phone, Mail, Calendar, User, MapPinIcon } from "lucide-react" interface Branch { id: number name: string location: string members: number phone: string email: string established: string address?: string city?: string state?: string zipCode?: string manager?: string } export default function BranchViewPage() { const params = useParams() const branchId = Number(params.id) // Mock data - in real app this would be fetched const branches: Branch[] = [ { id: 1, name: "Kuala Lumpur Main Branch", location: "Kuala Lumpur, Federal Territory", members: 2450, phone: "+60 3-2142-3456", email: "kl@mcc.org.my", established: "1986", address: "123 Merdeka Street", city: "Kuala Lumpur", state: "Federal Territory", zipCode: "50050", manager: "Dato Ahmad bin Abdullah", }, { id: 2, name: "Selangor Branch", location: "Selangor", members: 1890, phone: "+60 3-7957-1234", email: "selangor@mcc.org.my", established: "1990", address: "456 Shah Alam Road", city: "Shah Alam", state: "Selangor", zipCode: "40000", manager: "Tuan Haji Muhammad", }, ] const branch = branches.find((b) => b.id === branchId) if (!branch) { return (

Branch not found

) } return (

{branch.name}

{branch.location}

Total Members

{branch.members.toLocaleString()}

Established

{branch.established}

Phone

{branch.phone}

{branch.email}

{branch.manager && (

Branch Manager

{branch.manager}

)} {branch.city && (

City

{branch.city}

)}

{branch.address && (

Full Address

{branch.address} {branch.state && `, ${branch.state}`} {branch.zipCode && ` ${branch.zipCode}`}

)}

) } [V0_FILE]typescriptreact:file="app/admin/contact/info/view/[id]/page.tsx" isMerged="true" "use client" import { useParams } from "next/navigation" import Link from "next/link" import { ArrowLeft, Phone, Mail, MapPin } from "lucide-react" interface ContactInfo { id: number title: string phone: string email: string address: string googleMapsUrl?: string displayOrder: number status: "Active" | "Inactive" } export default function ContactInfoViewPage() { const params = useParams() const contactId = Number(params.id) // Mock data const contacts: ContactInfo[] = [ { id: 1, title: "Head Office", phone: "+1 (302) 208 2666", email: "info@myowninc.com", address: "Suite 8 The Green #19578, Dover, DE 19901", googleMapsUrl: "https://maps.google.com/embed?pb=...", displayOrder: 0, status: "Active", }, { id: 2, title: "Branch Office", phone: "+91 44 2850 5233", email: "info@myowntravelleisure.com", address: "G-14/608, V.O.C street Desk#473 Perungudi, Kottiyam", googleMapsUrl: "https://maps.google.com/embed?pb=...", displayOrder: 1, status: "Active", }, ] const contact = contacts.find((c) => c.id === contactId) if (!contact) { return (

Contact information not found

) } return (

{contact.title}

Phone

{contact.phone}

{contact.email}

Address

{contact.address}

Status

{contact.status}

Display Order

{contact.displayOrder}

{contact.googleMapsUrl && (

Google Maps URL

{contact.googleMapsUrl}

)}

) } [V0_FILE]typescriptreact:file="app/admin/public-page/team/view/[id]/page.tsx" isMerged="true" "use client" import Link from "next/link" import { ArrowLeft, Edit2 } from "lucide-react" interface TeamMember { id: number name: string position: string email: string phone: string photo: string bio: string status: "Active" | "Inactive" } const mockMembers: TeamMember[] = [ { id: 1, name: "Aravind Subramanian", position: "Committee President", email: "aravind@mcc.org.my", phone: "+60 3-2142-3456", photo: "/aravind.jpg", bio: "Experienced leader with 15 years in community development", status: "Active", }, { id: 2, name: "Senthil Kumar", position: "Vice President", email: "senthil@mcc.org.my", phone: "+60 3-2142-3457", photo: "/senthil.jpg", bio: "Dedicated professional focused on member engagement", status: "Active", }, ] export default function TeamViewPage({ params }: { params: { id: string } }) { const member = mockMembers.find((m) => m.id === Number.parseInt(params.id)) if (!member) { return (

Team member not found.

) } return (

{member.name}

{member.position}

{member.email}

Phone

{member.phone}

Status {member.status}

Bio

{member.bio}

) } [V0_FILE]typescriptreact:file="app/admin/public-page/documents/view/[id]/page.tsx" isMerged="true" "use client" import Link from "next/link" import { ArrowLeft, Edit2, FileText } from "lucide-react" interface Document { id: number title: string category: string description: string fileName: string fileSize: string status: "Active" | "Inactive" order: number } const mockDocuments: Document[] = [ { id: 1, title: "Annual Reports", category: "Reports", description: "Party annual performance reports, Financial reports, Activity summaries", fileName: "MCC_Document.pdf", fileSize: "0.01 MB", status: "Active", order: 3, }, { id: 2, title: "Party Constitution/Charter", category: "Constitution", description: "Official constitution document (PDF), Vision, mission, core values, Code of conduct", fileName: "MCC_Document.pdf", fileSize: "0.01 MB", status: "Active", order: 1, }, ] export default function DocumentViewPage({ params }: { params: { id: string } }) { const document = mockDocuments.find((d) => d.id === Number.parseInt(params.id)) if (!document) { return (

Document not found.

) } return (

{document.title}

{document.category}

Description

{document.description}

File

{document.fileName}

File Size

{document.fileSize}

Display Order

{document.order}

Status {document.status}

) } [V0_FILE]typescriptreact:file="app/admin/users-roles/users/view/[id]/page.tsx" isMerged="true" "use client" import Link from "next/link" import { ArrowLeft, Edit2 } from "lucide-react" interface User { id: number firstName: string lastName: string email: string phone: string role: string status: string lastLogin: string } const mockUsers: User[] = [ { id: 1, firstName: "Datuk S.", lastName: "Arokiasamy", email: "president@mcc.org.my", phone: "+60-3-1234-5678", role: "Admin", status: "Active", lastLogin: "02 Jan 2026", }, { id: 2, firstName: "Mr. K.", lastName: "Veerasingam", email: "vp@mcc.org.my", phone: "+60-3-1234-5679", role: "Editor", status: "Active", lastLogin: "01 Jan 2026", }, { id: 3, firstName: "Ms. Priya", lastName: "Devi", email: "content@mcc.org.my", phone: "+60-3-1234-5680", role: "Content Manager", status: "Active", lastLogin: "31 Dec 2025", }, ] export default function UserViewPage({ params }: { params: { id: string } }) { const user = mockUsers.find((u) => u.id === Number.parseInt(params.id)) if (!user) { return (

User not found.

) } return (

{user.firstName} {user.lastName}

User ID: #{user.id}

{user.email}

Phone

{user.phone}

Role {user.role}

Status {user.status}

Last Login

{user.lastLogin}

) } [V0_FILE]typescriptreact:file="app/admin/memberships/masterfile/add/page.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { ArrowLeft } from "lucide-react" import Link from "next/link" import { useState } from "react" import { useRouter } from "next/navigation" export default function AddMemberPage() { const router = useRouter() const [formData, setFormData] = useState({ name: "", email: "", phone: "", idNumber: "", membershipType: "Ordinary Member", branch: "Kuala Lumpur", address: "", city: "", state: "", zipCode: "", joinDate: new Date().toISOString().split("T")[0], status: "active", }) const [errors, setErrors] = useState>({}) const validateForm = () => { const newErrors: Record = {} if (!formData.name.trim()) newErrors.name = "Name is required" if (!formData.email.trim()) newErrors.email = "Email is required" if (!formData.phone.trim()) newErrors.phone = "Phone is required" if (!formData.idNumber.trim()) newErrors.idNumber = "ID Number is required" setErrors(newErrors) return Object.keys(newErrors).length === 0 } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (validateForm()) { console.log("Adding member:", formData) router.push("/admin/memberships/masterfile") } } return (

{/* Header */}

Add New Member

{/* Form */}

{/* Personal Information */}

Personal Information

Full Name * setFormData({ ...formData, name: e.target.value })} className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent" placeholder="e.g., Ahmad Abdullah" /> {errors.name &&

{errors.name}

}

ID Number * setFormData({ ...formData, idNumber: e.target.value })} className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent" placeholder="e.g., 123456-78-9012" /> {errors.idNumber &&

{errors.idNumber}

}

Email Address * setFormData({ ...formData, email: e.target.value })} className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent" placeholder="e.g., ahmad@email.com" /> {errors.email &&

{errors.email}

}

Phone Number * setFormData({ ...formData, phone: e.target.value })} className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent" placeholder="e.g., +60 12-345-6789" /> {errors.phone &&

{errors.phone}

}

{/* Address Information */}

Address Information

Address

setFormData({ ...formData, address: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
                placeholder="Full street address"
                rows={2}
              />
            </div>

<div>
              <label className="block text-sm font-medium text-gray-700 mb-2">City</label>
              <input
                type="text"
                value={formData.city}
                onChange={(e) => setFormData({ ...formData, city: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
                placeholder="e.g., Kuala Lumpur"
              />
            </div>

<div>
              <label className="block text-sm font-medium text-gray-700 mb-2">State</label>
              <input
                type="text"
                value={formData.state}
                onChange={(e) => setFormData({ ...formData, state: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
                placeholder="e.g., Federal Territory"
              />
            </div>

<div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Postal Code</label>
              <input
                type="text"
                value={formData.zipCode}
                onChange={(e) => setFormData({ ...formData, zipCode: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
                placeholder="e.g., 50050"
              />
            </div>

{/* Membership Information */}
            <div className="md:col-span-2 pt-4 border-t border-gray-200">
              <h2 className="text-lg font-semibold text-gray-900 mb-4">Membership Information</h2>
            </div>

<div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Membership Type</label>
              <select
                value={formData.membershipType}
                onChange={(e) => setFormData({ ...formData, membershipType: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent bg-white"
              >
                <option>Ordinary Member</option>
                <option>Life Member</option>
                <option>Student Member</option>
                <option>Honorary Member</option>
              </select>
            </div>

<div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Branch</label>
              <select
                value={formData.branch}
                onChange={(e) => setFormData({ ...formData, branch: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent bg-white"
              >
                <option>Kuala Lumpur</option>
                <option>Penang</option>
                <option>Johor</option>
                <option>Selangor</option>
              </select>
            </div>

<div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Join Date</label>
              <input
                type="date"
                value={formData.joinDate}
                onChange={(e) => setFormData({ ...formData, joinDate: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
              />
            </div>

<div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Status</label>
              <select
                value={formData.status}
                onChange={(e) => setFormData({ ...formData, status: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent bg-white"
              >
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
                <option value="suspended">Suspended</option>
              </select>
            </div>
          </div>

{/* Buttons */}
          <div className="flex gap-3 pt-6 border-t border-gray-200">
            <button
              type="submit"
              className="bg-[#CE1126] text-white px-4 py-2 rounded-lg hover:bg-red-700 transition font-medium whitespace-nowrap"
            >
              Add Member
            </button>
            <Link
              href="/admin/memberships/masterfile"
              className="bg-gray-200 text-gray-800 px-4 py-2 rounded-lg hover:bg-gray-300 transition font-medium text-center whitespace-nowrap"
            >
              Cancel
            </Link>
          </div>
        </form>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/media-resources/photo-gallery/edit/[id]/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { ArrowLeft } from "lucide-react"

interface PhotoForm {
  title: string
  description: string
  category: string
  image: string
  status: "Active" | "Inactive"
}

export default function EditPhotoPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const [formData, setFormData] = useState<PhotoForm>({
    title: "Official Engagements in Malaysia",
    description: "Ministries, Agencies & Royal Audience",
    category: "Events",
    image: "/official-engagement.jpg",
    status: "Active",
  })

const [errors, setErrors] = useState<Record<string, string>>({})

const validateForm = () => {
    const newErrors: Record<string, string> = {}
    if (!formData.title.trim()) newErrors.title = "Image title is required"
    if (!formData.description.trim()) newErrors.description = "Description is required"
    if (!formData.image.trim()) newErrors.image = "Image URL is required"
    setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (validateForm()) {
      router.push("/admin/media-resources/photo-gallery")
    }
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      <Link
        href="/admin/media-resources/photo-gallery"
        className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 transition-colors"
      >
        <ArrowLeft className="w-5 h-5" />
        Back to Gallery
      </Link>

<div>
        <h1 className="text-3xl font-bold text-gray-900">Edit Image</h1>
        <p className="text-gray-600 mt-1">Update gallery image details</p>
      </div>

<form onSubmit={handleSubmit} className="bg-white rounded-lg border border-gray-200 p-6 space-y-6">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="md:col-span-2">
            <label className="block text-sm font-medium text-gray-700 mb-2">Image Title *</label>
            <input
              type="text"
              value={formData.title}
              onChange={(e) => setFormData({ ...formData, title: e.target.value })}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
              placeholder="e.g., Official Engagements in Malaysia"
            />
            {errors.title && <p className="text-red-500 text-sm mt-1">{errors.title}</p>}
          </div>

<div className="md:col-span-2">
            <label className="block text-sm font-medium text-gray-700 mb-2">Description *</label>
            <textarea
              value={formData.description}
              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
              placeholder="e.g., Ministries, Agencies & Royal Audience"
              rows={3}
            />
            {errors.description && <p className="text-red-500 text-sm mt-1">{errors.description}</p>}
          </div>

<div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Category *</label>
            <select
              value={formData.category}
              onChange={(e) => setFormData({ ...formData, category: e.target.value })}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            >
              <option value="Events">Events</option>
              <option value="Community">Community</option>
              <option value="Youth">Youth</option>
              <option value="Heritage">Heritage</option>
              <option value="Other">Other</option>
            </select>
          </div>

<div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Status *</label>
            <select
              value={formData.status}
              onChange={(e) => setFormData({ ...formData, status: e.target.value as "Active" | "Inactive" })}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            >
              <option value="Active">Active</option>
              <option value="Inactive">Inactive</option>
            </select>
          </div>

<div className="md:col-span-2">
            <label className="block text-sm font-medium text-gray-700 mb-2">Image URL *</label>
            <input
              type="url"
              value={formData.image}
              onChange={(e) => setFormData({ ...formData, image: e.target.value })}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
              placeholder="https://example.com/image.jpg"
            />
            {errors.image && <p className="text-red-500 text-sm mt-1">{errors.image}</p>}
          </div>
        </div>

<div className="flex gap-3 pt-4 border-t border-gray-200">
          <button
            type="submit"
            className="bg-[#CE1126] text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors font-medium whitespace-nowrap"
          >
            Update Image
          </button>
          <Link href="/admin/media-resources/photo-gallery" className="">
            <button
              type="button"
              className="bg-gray-200 text-gray-800 px-4 py-2 rounded-lg hover:bg-gray-300 transition-colors font-medium whitespace-nowrap"
            >
              Cancel
            </button>
          </Link>
        </div>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/users-roles/users/edit/[id]/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"

export default function EditUserPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const [formData, setFormData] = useState({
    firstName: "Datuk S.",
    lastName: "Arokiasamy",
    email: "president@mcc.org.my",
    phone: "+60-3-1234-5678",
    password: "",
    confirmPassword: "",
    status: "Active",
    roles: ["Admin"],
  })

const roles = [
    { name: "Super Admin", permissions: 69, description: "Full access to all features" },
    { name: "Admin", permissions: 25, description: "Administrative access to most features" },
    { name: "Editor", permissions: 18, description: "Can manage content and media" },
    { name: "Content Manager", permissions: 12, description: "Can create and edit content" },
  ]

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handleRoleChange = (role: string) => {
    setFormData((prev) => ({
      ...prev,
      roles: prev.roles.includes(role) ? prev.roles.filter((r) => r !== role) : [...prev.roles, role],
    }))
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (formData.password && formData.password !== formData.confirmPassword) {
      alert("Passwords do not match")
      return
    }
    if (formData.roles.length === 0) {
      alert("Please select at least one role")
      return
    }
    router.push("/admin/users-roles/users")
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      <div>
        <Link
          href="/admin/users-roles/users"
          className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 font-medium mb-4"
        >
          <ArrowLeft className="w-5 h-5" />
          Back to Users
        </Link>
        <h1 className="text-3xl font-bold text-gray-900">Edit User</h1>
        <p className="text-gray-600 mt-2">Update user information and permissions</p>
      </div>

<form onSubmit={handleSubmit} className="max-w-3xl bg-white rounded-lg shadow-lg p-6 space-y-6">
        {/* Personal Information */}
        <div>
          <h2 className="text-xl font-bold text-gray-900 mb-4">Personal Information</h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-900 mb-2">First Name *</label>
              <input
                type="text"
                name="firstName"
                value={formData.firstName}
                onChange={handleChange}
                required
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-[#CE1126]"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-900 mb-2">Last Name *</label>
              <input
                type="text"
                name="lastName"
                value={formData.lastName}
                onChange={handleChange}
                required
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-[#CE1126]"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-900 mb-2">Email Address *</label>
              <input
                type="email"
                name="email"
                value={formData.email}
                onChange={handleChange}
                required
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-[#CE1126]"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-900 mb-2">Phone Number</label>
              <input
                type="tel"
                name="phone"
                value={formData.phone}
                onChange={handleChange}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-[#CE1126]"
              />
            </div>
          </div>
        </div>

{/* Password */}
        <div>
          <h2 className="text-xl font-bold text-gray-900 mb-4">Change Password (Optional)</h2>
          <p className="text-sm text-gray-600 mb-4">Leave blank to keep the current password</p>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-900 mb-2">New Password</label>
              <input
                type="password"
                name="password"
                value={formData.password}
                onChange={handleChange}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-[#CE1126]"
                placeholder="Minimum 8 characters"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-900 mb-2">Confirm Password</label>
              <input
                type="password"
                name="confirmPassword"
                value={formData.confirmPassword}
                onChange={handleChange}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-[#CE1126]"
                placeholder="Re-enter password"
              />
            </div>
          </div>
        </div>

{/* Status */}
        <div>
          <h2 className="text-xl font-bold text-gray-900 mb-4">Account Status</h2>
          <select
            name="status"
            value={formData.status}
            onChange={handleChange}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-[#CE1126]"
          >
            <option>Active</option>
            <option>Inactive</option>
          </select>
        </div>

{/* Roles */}
        <div>
          <h2 className="text-xl font-bold text-gray-900 mb-4">Assign Roles</h2>
          <p className="text-sm text-gray-600 mb-4">Select one or more roles to define what this user can access.</p>
          <div className="space-y-4">
            {roles.map((role) => (
              <label
                key={role.name}
                className="flex items-start gap-3 p-4 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors"
              >
                <input
                  type="checkbox"
                  checked={formData.roles.includes(role.name)}
                  onChange={() => handleRoleChange(role.name)}
                  className="mt-1 w-5 h-5 text-[#CE1126] rounded focus:outline-none focus:ring-2 focus:ring-[#CE1126]"
                />
                <div className="flex-1">
                  <p className="font-semibold text-gray-900">{role.name}</p>
                  <p className="text-sm text-gray-600">{role.description}</p>
                  <p className="text-xs text-gray-500 mt-1">{role.permissions} permissions</p>
                </div>
              </label>
            ))}
          </div>
        </div>

{/* Buttons */}
        <div className="flex gap-4 pt-6">
          <button
            type="button"
            onClick={() => router.push("/admin/users-roles/users")}
            className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors font-medium text-gray-900 whitespace-nowrap"
          >
            Cancel
          </button>
          <button
            type="submit"
            className="px-4 py-2 bg-[#CE1126] text-white rounded-lg hover:bg-red-700 transition-colors font-medium whitespace-nowrap"
          >
            Update User
          </button>
        </div>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/users-roles/roles/add/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"

export default function AddRolePage() {
  const router = useRouter()
  const [formData, setFormData] = useState({
    name: "",
    description: "",
    status: "Active",
    permissions: [] as string[],
  })

const allPermissions = [
    { id: "dashboard_view", name: "View Dashboard", category: "Dashboard" },
    { id: "dashboard_edit", name: "Edit Dashboard", category: "Dashboard" },
    { id: "branch_view", name: "View Branches", category: "Branch Management" },
    { id: "branch_create", name: "Create Branch", category: "Branch Management" },
    { id: "branch_edit", name: "Edit Branch", category: "Branch Management" },
    { id: "branch_delete", name: "Delete Branch", category: "Branch Management" },
    { id: "committee_view", name: "View Committees", category: "Committee Management" },
    { id: "committee_create", name: "Create Committee", category: "Committee Management" },
    { id: "committee_edit", name: "Edit Committee", category: "Committee Management" },
    { id: "committee_delete", name: "Delete Committee", category: "Committee Management" },
    { id: "member_view", name: "View Members", category: "Member Management" },
    { id: "member_create", name: "Create Member", category: "Member Management" },
    { id: "member_edit", name: "Edit Member", category: "Member Management" },
    { id: "member_delete", name: "Delete Member", category: "Member Management" },
    { id: "media_view", name: "View Media", category: "Media Resources" },
    { id: "media_create", name: "Upload Media", category: "Media Resources" },
    { id: "media_edit", name: "Edit Media", category: "Media Resources" },
    { id: "media_delete", name: "Delete Media", category: "Media Resources" },
    { id: "user_view", name: "View Users", category: "User Management" },
    { id: "user_create", name: "Create User", category: "User Management" },
    { id: "user_edit", name: "Edit User", category: "User Management" },
    { id: "user_delete", name: "Delete User", category: "User Management" },
  ]

const groupedPermissions = allPermissions.reduce(
    (acc, perm) => {
      const category = perm.category
      if (!acc[category]) acc[category] = []
      acc[category].push(perm)
      return acc
    },
    {} as Record<string, typeof allPermissions>,
  )

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handlePermissionChange = (permissionId: string) => {
    setFormData((prev) => ({
      ...prev,
      permissions: prev.permissions.includes(permissionId)
        ? prev.permissions.filter((p) => p !== permissionId)
        : [...prev.permissions, permissionId],
    }))
  }

const handleSelectAll = () => {
    if (formData.permissions.length === allPermissions.length) {
      setFormData((prev) => ({ ...prev, permissions: [] }))
    } else {
      setFormData((prev) => ({ ...prev, permissions: allPermissions.map((p) => p.id) }))
    }
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (!formData.name.trim()) {
      alert("Role name is required")
      return
    }
    if (formData.permissions.length === 0) {
      alert("Please select at least one permission")
      return
    }
    router.push("/admin/users-roles/roles")
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      <div>
        <Link
          href="/admin/users-roles/roles"
          className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 font-medium mb-4"
        >
          <ArrowLeft className="w-5 h-5" />
          Back to Roles
        </Link>
        <h1 className="text-3xl font-bold text-gray-900">Add New Role</h1>
        <p className="text-gray-600 mt-2">Create a new role with custom permissions</p>
      </div>

<form onSubmit={handleSubmit} className="max-w-4xl bg-white rounded-lg shadow-lg p-6 space-y-6">
        {/* Role Information */}
        <div>
          <h2 className="text-xl font-bold text-gray-900 mb-4">Role Information</h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-900 mb-2">Role Name *</label>
              <input
                type="text"
                name="name"
                value={formData.name}
                onChange={handleChange}
                required
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-[#CE1126]"
                placeholder="e.g., Content Editor"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-900 mb-2">Status *</label>
              <select
                name="status"
                value={formData.status}
                onChange={handleChange}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-[#CE1126]"
              >
                <option>Active</option>
                <option>Inactive</option>
              </select>
            </div>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-900 mb-2 mt-4">Description</label>
            <textarea
              name="description"
              value={formData.description}
              onChange={handleChange}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-[#CE1126]"
              placeholder="e.g., Can manage content and media resources"
              rows={3}
            />
          </div>
        </div>

{/* Permissions */}
        <div>
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-xl font-bold text-gray-900">Permissions</h2>
            <button
              type="button"
              onClick={handleSelectAll}
              className="text-sm text-[#CE1126] hover:text-red-700 font-medium"
            >
              {formData.permissions.length === allPermissions.length ? "Deselect All" : "Select All"}
            </button>
          </div>

<div className="space-y-6">
            {Object.entries(groupedPermissions).map(([category, perms]) => (
              <div key={category}>
                <h3 className="font-semibold text-gray-900 mb-3">{category}</h3>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                  {perms.map((perm) => (
                    <label
                      key={perm.id}
                      className="flex items-center gap-3 p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors"
                    >
                      <input
                        type="checkbox"
                        checked={formData.permissions.includes(perm.id)}
                        onChange={() => handlePermissionChange(perm.id)}
                        className="w-5 h-5 text-[#CE1126] rounded focus:outline-none focus:ring-2 focus:ring-[#CE1126]"
                      />
                      <span className="text-sm text-gray-900">{perm.name}</span>
                    </label>
                  ))}
                </div>
              </div>
            ))}
          </div>

<div className="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
            <p className="text-sm text-blue-900">
              <span className="font-semibold">Selected Permissions:</span> {formData.permissions.length}/
              {allPermissions.length}
            </p>
          </div>
        </div>

{/* Buttons */}
        <div className="flex gap-4 pt-6">
          <button
            type="button"
            onClick={() => router.push("/admin/users-roles/roles")}
            className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors font-medium text-gray-900 whitespace-nowrap"
          >
            Cancel
          </button>
          <button
            type="submit"
            className="px-4 py-2 bg-[#CE1126] text-white rounded-lg hover:bg-red-700 transition-colors font-medium whitespace-nowrap"
          >
            Create Role
          </button>
        </div>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/users-roles/roles/edit/[id]/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"

export default function EditRolePage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const [formData, setFormData] = useState({
    name: "Admin",
    description: "Administrative access to most features",
    status: "Active",
    permissions: [
      "dashboard_view",
      "dashboard_edit",
      "branch_view",
      "branch_create",
      "branch_edit",
      "branch_delete",
    ] as string[],
  })

return (
    <div className="p-4 sm:p-6 space-y-6">
      <div>
        <Link
          href="/admin/users-roles/roles"
          className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 font-medium mb-4"
        >
          <ArrowLeft className="w-5 h-5" />
          Back to Roles
        </Link>
        <h1 className="text-3xl font-bold text-gray-900">Edit Role</h1>
        <p className="text-gray-600 mt-2">Update role details and permissions</p>
      </div>

<form onSubmit={handleSubmit} className="max-w-4xl bg-white rounded-lg shadow-lg p-6 space-y-6">
        {/* Role Information */}
        <div>
          <h2 className="text-xl font-bold text-gray-900 mb-4">Role Information</h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-900 mb-2">Role Name *</label>
              <input
                type="text"
                name="name"
                value={formData.name}
                onChange={handleChange}
                required
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-[#CE1126]"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-900 mb-2">Status *</label>
              <select
                name="status"
                value={formData.status}
                onChange={handleChange}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-[#CE1126]"
              >
                <option>Active</option>
                <option>Inactive</option>
              </select>
            </div>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-900 mb-2 mt-4">Description</label>
            <textarea
              name="description"
              value={formData.description}
              onChange={handleChange}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-[#CE1126]"
              rows={3}
            />
          </div>
        </div>

{/* Buttons */}
        <div className="flex gap-4 pt-6">
          <button
            type="button"
            onClick={() => router.push("/admin/users-roles/roles")}
            className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors font-medium text-gray-900 whitespace-nowrap"
          >
            Cancel
          </button>
          <button
            type="submit"
            className="px-4 py-2 bg-[#CE1126] text-white rounded-lg hover:bg-red-700 transition-colors font-medium whitespace-nowrap"
          >
            Update Role
          </button>
        </div>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/public-page/documents/add/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useRouter } from "next/navigation"
import { useState } from "react"
import { ArrowLeft, Upload } from "lucide-react"
import Link from "next/link"
import { API_ENDPOINTS } from "@/lib/api-config"

export default function AddDocumentPage() {
  const router = useRouter()
  const [fileName, setFileName] = useState("No file chosen")
  const [file, setFile] = useState<File | null>(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState("")
  const [errors, setErrors] = useState<Record<string, string>>({})
  const [formData, setFormData] = useState({
    title: "",
    category: "",
    description: "",
    order: 0,
    status: "ACTIVE",
  })

const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files?.[0]) {
      const selectedFile = e.target.files[0]
      setFileName(selectedFile.name)
      setFile(selectedFile)
      setErrors((prev) => ({ ...prev, file: "" }))
    }
  }

const validateForm = () => {
    const newErrors: Record<string, string> = {}
    if (!formData.title.trim()) newErrors.title = "Title is required"
    if (!formData.category.trim()) newErrors.category = "Category is required"
    if (!file) newErrors.file = "File is required"
    if (formData.status === "") newErrors.status = "Status is required"

setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

if (!validateForm()) return

setLoading(true)
    setError("")

try {
      const formDataPayload = new FormData()
      formDataPayload.append("title", formData.title)
      formDataPayload.append("category", formData.category)
      formDataPayload.append("description", formData.description)
      formDataPayload.append("display_order", String(formData.order))
      formDataPayload.append("status", formData.status)
      if (file) {
        formDataPayload.append("file", file)
      }

const response = await fetch(API_ENDPOINTS.documents.create, {
        method: "POST",
        body: formDataPayload,
        headers: {
          "X-Requested-With": "XMLHttpRequest",
        },
        credentials: "include",
      })

if (!response.ok) {
        throw new Error("Failed to create document")
      }

const result = await response.json()

if (result.status === "SUCCESS") {
        router.push("/admin/public-page/documents")
      } else {
        setError(result.message || "Failed to create document")
      }
    } catch (err) {
      console.error("[v0] Error creating document:", err)
      setError("Failed to create document. Please try again.")
    } finally {
      setLoading(false)
    }
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      <div className="flex items-center gap-3">
        <Link href="/admin/public-page/documents">
          <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors">
            <ArrowLeft className="w-5 h-5 text-gray-600" />
          </button>
        </Link>
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Add New Document</h1>
          <p className="text-gray-600 mt-1">Upload a document resource</p>
        </div>
      </div>

{error && (
        <div className="bg-red-50 border border-red-200 rounded-lg p-4">
          <p className="text-sm text-red-800">{error}</p>
        </div>
      )}

<div className="bg-white rounded-lg p-6 max-w-2xl">
        <form onSubmit={handleSubmit} className="space-y-6">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Title (Category) *</label>
            <input
              type="text"
              value={formData.title}
              onChange={(e) => {
                setFormData({ ...formData, title: e.target.value })
                setErrors((prev) => ({ ...prev, title: "" }))
              }}
              className={`w-full px-4 py-2 border ${
                errors.title ? "border-red-500" : "border-gray-300"
              } rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent`}
              placeholder="e.g., Agriculture & Food, Employment Affairs"
            />
            {errors.title && <p className="text-xs text-red-600 mt-1">{errors.title}</p>}
            <p className="text-xs text-gray-500 mt-1">Title acts as category/heading</p>
          </div>

<div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Document Category *</label>
            <input
              type="text"
              value={formData.category}
              onChange={(e) => {
                setFormData({ ...formData, category: e.target.value })
                setErrors((prev) => ({ ...prev, category: "" }))
              }}
              className={`w-full px-4 py-2 border ${
                errors.category ? "border-red-500" : "border-gray-300"
              } rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent`}
              placeholder="e.g., Reports, Constitution"
            />
            {errors.category && <p className="text-xs text-red-600 mt-1">{errors.category}</p>}
          </div>

<div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Description</label>
            <textarea
              value={formData.description}
              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
              placeholder="Enter description items, one per line. Each will be displayed as a bullet point"
              rows={4}
            />
            <p className="text-xs text-gray-500 mt-1">
              Each line will be displayed as a bullet point on the public page
            </p>
          </div>

<div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Document File *</label>
            <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
              <Upload className="w-8 h-8 text-gray-400 mx-auto mb-2" />
              <label htmlFor="file-input" className="cursor-pointer">
                <p className="text-sm font-medium text-[#CE1126]">Choose File</p>
                <p className="text-xs text-gray-500 mt-1">{fileName}</p>
                <input
                  id="file-input"
                  type="file"
                  onChange={handleFileChange}
                  className="hidden"
                  accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.zip,.rar"
                />
              </label>
            </div>
            {errors.file && <p className="text-xs text-red-600 mt-2">{errors.file}</p>}
            <p className="text-xs text-gray-500 mt-2">
              Upload a document file (PDF, DOC, DOCX, XLS, XLSX, PPT, PPTX, TXT, ZIP, RAR)
            </p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Display Order</label>
              <input
                type="number"
                value={formData.order}
                onChange={(e) => setFormData({ ...formData, order: Number(e.target.value) })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
                placeholder="0"
              />
              <p className="text-xs text-gray-500 mt-1">Lower numbers appear first</p>
            </div>

<div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Status *</label>
              <select
                value={formData.status}
                onChange={(e) => {
                  setFormData({ ...formData, status: e.target.value })
                  setErrors((prev) => ({ ...prev, status: "" }))
                }}
                className={`w-full px-4 py-2 border ${
                  errors.status ? "border-red-500" : "border-gray-300"
                } rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent`}
              >
                <option value="ACTIVE">Active</option>
                <option value="INACTIVE">Inactive</option>
              </select>
              {errors.status && <p className="text-xs text-red-600 mt-1">{errors.status}</p>}
            </div>
          </div>

<div className="flex gap-3 pt-4 border-t border-gray-200">
            <button
              type="submit"
              disabled={loading}
              className="bg-[#CE1126] text-white px-4 py-2 rounded-lg hover:bg-red-700 disabled:opacity-50 transition-colors font-medium whitespace-nowrap"
            >
              {loading ? "Adding..." : "Add Document"}
            </button>
            <Link href="/admin/public-page/documents" className="">
              <button
                type="button"
                className="bg-gray-200 text-gray-800 px-4 py-2 rounded-lg hover:bg-gray-300 transition-colors font-medium whitespace-nowrap"
              >
                Cancel
              </button>
            </Link>
          </div>
        </form>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/public-page/documents/edit/[id]/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useRouter, useParams } from "next/navigation"
import { useState } from "react"
import { ArrowLeft, Upload } from "lucide-react"
import Link from "next/link"

export default function EditDocumentPage() {
  const router = useRouter()
  const params = useParams()
  const id = params.id

const [fileName, setFileName] = useState("MCC_Document.pdf")
  const [formData, setFormData] = useState({
    title: "Annual Reports",
    category: "Reports",
    description: "Party annual performance reports, Financial reports, Activity summaries",
    order: 3,
    status: "Active",
  })

const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files?.[0]) {
      setFileName(e.target.files[0].name)
    }
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    alert("Document updated successfully!")
    router.push("/admin/public-page/documents")
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      <div className="flex items-center gap-3">
        <Link href="/admin/public-page/documents">
          <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors">
            <ArrowLeft className="w-5 h-5 text-gray-600" />
          </button>
        </Link>
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Edit Document</h1>
          <p className="text-gray-600 mt-1">Update document information</p>
        </div>
      </div>

<div className="bg-white rounded-lg p-6 max-w-2xl">
        <form onSubmit={handleSubmit} className="space-y-6">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Title (Category) *</label>
            <input
              type="text"
              required
              value={formData.title}
              onChange={(e) => setFormData({ ...formData, title: e.target.value })}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
              placeholder="e.g., Agriculture & Food, Employment Affairs"
            />
            <p className="text-xs text-gray-500 mt-1">Title acts as category/heading</p>
          </div>

<div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Document Category *</label>
            <input
              type="text"
              required
              value={formData.category}
              onChange={(e) => setFormData({ ...formData, category: e.target.value })}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
              placeholder="e.g., Reports, Constitution"
            />
          </div>

<div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Document File *</label>
            <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
              <Upload className="w-8 h-8 text-gray-400 mx-auto mb-2" />
              <label htmlFor="file-input" className="cursor-pointer">
                <p className="text-sm font-medium text-[#CE1126]">Choose File</p>
                <p className="text-xs text-gray-500 mt-1">{fileName}</p>
                <input
                  id="file-input"
                  type="file"
                  onChange={handleFileChange}
                  className="hidden"
                  accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.zip,.rar"
                />
              </label>
            </div>
            <p className="text-xs text-gray-500 mt-2">
              Upload a document file (PDF, DOC, DOCX, XLS, XLSX, PPT, PPTX, TXT, ZIP, RAR)
            </p>
          </div>

<div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Status *</label>
              <select
                value={formData.status}
                onChange={(e) => setFormData({ ...formData, status: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
              >
                <option>Active</option>
                <option>Inactive</option>
              </select>
            </div>
          </div>

<div className="flex gap-3 pt-4 border-t border-gray-200">
            <button
              type="submit"
              className="bg-[#CE1126] text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors font-medium whitespace-nowrap"
            >
              Update Document
            </button>
            <Link href="/admin/public-page/documents" className="">
              <button
                type="button"
                className="bg-gray-200 text-gray-800 px-4 py-2 rounded-lg hover:bg-gray-300 transition-colors font-medium whitespace-nowrap"
              >
                Cancel
              </button>
            </Link>
          </div>
        </form>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/branch/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Plus, MapPin, Users, Phone, Mail, Edit2, Eye, Trash2 } from "lucide-react"
import Link from "next/link"

interface Branch {
  id: number
  name: string
  location: string
  members: number
  phone: string
  email: string
  established: string
  address?: string
  city?: string
  state?: string
  zipCode?: string
  manager?: string
  image?: string
}

export default function BranchPage() {
  const [branches, setBranches] = useState<Branch[]>([
    {
      id: 1,
      name: "Kuala Lumpur Main Branch",
      location: "Kuala Lumpur, Federal Territory",
      members: 2450,
      phone: "+60 3-2142-3456",
      email: "kl@mcc.org.my",
      established: "1986",
      address: "123 Merdeka Street",
      city: "Kuala Lumpur",
      state: "Federal Territory",
      zipCode: "50050",
      manager: "Dato Ahmad bin Abdullah",
      image: "/kuala-lumpur-branch.jpg",
    },
    {
      id: 2,
      name: "Selangor Branch",
      location: "Selangor",
      members: 1890,
      phone: "+60 3-7957-1234",
      email: "selangor@mcc.org.my",
      established: "1990",
      address: "456 Shah Alam Road",
      city: "Shah Alam",
      state: "Selangor",
      zipCode: "40000",
      manager: "Tuan Haji Muhammad",
      image: "/selangor-branch.jpg",
    },
  ])

const handleDeleteBranch = (id: number) => {
    setBranches(branches.filter((b) => b.id !== id))
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Branch Management</h1>
          <p className="text-gray-600 mt-2">Manage all MCC branches across Malaysia</p>
        </div>
        <Link
          href="/admin/branch/add"
          className="flex items-center gap-2 bg-[#CE1126] text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors font-medium text-sm w-full sm:w-auto justify-center sm:justify-start"
        >
          <Plus className="w-5 h-5" />
          Add Branch
        </Link>
      </div>

<div className="grid gap-6">
        {branches.map((branch) => (
          <Card key={branch.id} className="hover:shadow-lg transition-shadow">
            <CardHeader className="pb-4">
              <div className="flex items-start justify-between gap-4">
                {branch.image && (
                  <img
                    src={branch.image || "/placeholder.svg"}
                    alt={branch.name}
                    className="w-20 h-20 rounded-lg object-cover flex-shrink-0"
                  />
                )}
                <div className="flex-1">
                  <CardTitle className="flex items-center gap-2 text-lg">
                    <MapPin className="w-5 h-5 text-[#CE1126]" />
                    {branch.name}
                  </CardTitle>
                  <p className="text-gray-600 mt-1">{branch.location}</p>
                </div>
                <div className="flex gap-2">
                  <Link
                    href={`/admin/branch/view/${branch.id}`}
                    className="p-2 hover:bg-blue-100 rounded-lg transition-colors"
                    title="View"
                  >
                    <Eye className="w-5 h-5 text-blue-500" />
                  </Link>
                  <Link
                    href={`/admin/branch/edit/${branch.id}`}
                    className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
                    title="Edit"
                  >
                    <Edit2 className="w-5 h-5 text-gray-400" />
                  </Link>
                  <button
                    onClick={() => handleDeleteBranch(branch.id)}
                    className="p-2 hover:bg-red-100 rounded-lg transition-colors"
                    title="Delete"
                  >
                    <Trash2 className="w-5 h-5 text-red-500" />
                  </button>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 text-sm">
                <div>
                  <p className="text-gray-600">Established</p>
                  <p className="text-lg font-semibold text-gray-900">{branch.established}</p>
                </div>
                <div>
                  <p className="text-gray-600 flex items-center gap-1">
                    <Users className="w-4 h-4" /> Members
                  </p>
                  <p className="text-lg font-semibold text-gray-900">{branch.members.toLocaleString()}</p>
                </div>
                <div>
                  <p className="text-gray-600 flex items-center gap-1">
                    <Phone className="w-4 h-4" /> Phone
                  </p>
                  <p className="text-sm font-mono text-gray-900">{branch.phone}</p>
                </div>
                <div>
                  <p className="text-gray-600 flex items-center gap-1">
                    <Mail className="w-4 h-4" /> Email
                  </p>
                  <p className="text-sm font-mono text-gray-900">{branch.email}</p>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]jpg:file="public/kuala-lumpur-branch.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/kuala-lumpur-branch-JAxPxw692Gkie6PwUsIZf1qRIkezUq.jpg" isMerged="true"
[V0_FILE]jpg:file="public/selangor-branch.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/selangor-branch-swsVQ2Ex6G3grwlTzHi0RbCjrCGQm0.jpg" isMerged="true"
[V0_FILE]jpg:file="public/executive-committee.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/executive-committee-Kn5QOGlTy57sXCSEeLnacbRYCNzwQK.jpg" isMerged="true"
[V0_FILE]jpg:file="public/community-development.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/community-development-WItQxBBvdM5Oa3fdtZFrcbmzKrbwWL.jpg" isMerged="true"
[V0_FILE]jpg:file="public/finance-audit.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/finance-audit-vO9FbACNSiOSfKKRf0rlMVYDRDjA8L.jpg" isMerged="true"
[V0_FILE]jpg:file="public/youth-sports.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/youth-sports-MswvVNq8KOuTcPedXOUu2VV5F2mhOH.jpg" isMerged="true"
[V0_FILE]jpg:file="public/cultural-heritage.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/cultural-heritage-3VEA1MSr255JqBJIAB87KqFVzv0Rmo.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/admin/committees/pages/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Plus, Edit2, Trash2, Eye, ArrowLeft, Calendar, User } from "lucide-react"

interface Page {
  id: number
  title: string
  slug: string
  description: string
  author: string
  status: "Published" | "Draft"
  createdDate: string
  lastModified: string
}

export default function PageManagementPage() {
  const [pages, setPages] = useState<Page[]>([
    {
      id: 1,
      title: "Executive Committee Overview",
      slug: "executive-committee",
      description: "Main overview page for the Executive Committee with roles and responsibilities",
      author: "Admin",
      status: "Published",
      createdDate: "2024-01-15",
      lastModified: "2024-01-20",
    },
    {
      id: 2,
      title: "Community Development Programs",
      slug: "community-development-programs",
      description: "Details about community development initiatives and ongoing programs",
      author: "Admin",
      status: "Published",
      createdDate: "2024-01-10",
      lastModified: "2024-01-18",
    },
    {
      id: 3,
      title: "Youth & Sports Events",
      slug: "youth-sports-events",
      description: "Information about youth engagement and sports activities",
      author: "Editor",
      status: "Draft",
      createdDate: "2024-01-25",
      lastModified: "2024-01-25",
    },
    {
      id: 4,
      title: "Cultural Heritage Initiatives",
      slug: "cultural-heritage",
      description: "Cultural programs preserving Tamil heritage",
      author: "Admin",
      status: "Published",
      createdDate: "2024-01-05",
      lastModified: "2024-01-22",
    },
  ])

const handleDelete = (id: number) => {
    if (confirm("Are you sure you want to delete this page? This action cannot be undone.")) {
      setPages(pages.filter((p) => p.id !== id))
    }
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      {/* Header */}
      <div className="flex items-center gap-3">
        <Link href="/admin/committees">
          <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors">
            <ArrowLeft className="w-5 h-5 text-gray-600" />
          </button>
        </Link>
        <div className="flex-1">
          <h1 className="text-3xl font-bold text-gray-900">Page Management</h1>
          <p className="text-gray-600 mt-2">Create, edit, and manage website pages for committees</p>
        </div>
        <Link href="/admin/committees/pages/add">
          <button className="flex items-center gap-2 bg-[#CE1126] text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors font-medium whitespace-nowrap">
            <Plus className="w-5 h-5" />
            Add Page
          </button>
        </Link>
      </div>

{/* Pages List Table */}
      <div className="bg-white rounded-lg border border-gray-200">
        <div className="p-4 border-b border-gray-200">
          <p className="text-sm text-gray-600">Total Pages: {pages.length}</p>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="border-b border-gray-200 bg-gray-50">
                <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">Page Title</th>
                <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">URL Slug</th>
                <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">Description</th>
                <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">Author</th>
                <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">Status</th>
                <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">Modified</th>
                <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">Actions</th>
              </tr>
            </thead>
            <tbody>
              {pages.length === 0 ? (
                <tr>
                  <td colSpan={7} className="py-8 text-center text-gray-500">
                    No pages found. Create your first page to get started.
                  </td>
                </tr>
              ) : (
                pages.map((page) => (
                  <tr key={page.id} className="border-b border-gray-200 hover:bg-gray-50 transition-colors">
                    <td className="py-4 px-4">
                      <div className="font-semibold text-gray-900">{page.title}</div>
                    </td>
                    <td className="py-4 px-4">
                      <code className="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded">/{page.slug}</code>
                    </td>
                    <td className="py-4 px-4 text-sm text-gray-600 max-w-xs truncate">{page.description}</td>
                    <td className="py-4 px-4">
                      <div className="flex items-center gap-2 text-sm text-gray-700">
                        <User className="w-4 h-4" />
                        {page.author}
                      </div>
                    </td>
                    <td className="py-4 px-4">
                      <span
                        className={`inline-block px-3 py-1 rounded-full text-xs font-medium ${
                          page.status === "Published" ? "bg-green-100 text-green-800" : "bg-yellow-100 text-yellow-800"
                        }`}
                      >
                        {page.status}
                      </span>
                    </td>
                    <td className="py-4 px-4">
                      <div className="flex items-center gap-2 text-sm text-gray-600">
                        <Calendar className="w-4 h-4" />
                        {new Date(page.lastModified).toLocaleDateString()}
                      </div>
                    </td>
                    <td className="py-4 px-4">
                      <div className="flex gap-2">
                        <Link href={`/admin/committees/pages/view/${page.id}`}>
                          <button className="p-2 hover:bg-blue-50 rounded-lg transition-colors" title="View page">
                            <Eye className="w-4 h-4 text-blue-600" />
                          </button>
                        </Link>
                        <Link href={`/admin/committees/pages/edit/${page.id}`}>
                          <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors" title="Edit page">
                            <Edit2 className="w-4 h-4 text-gray-600" />
                          </button>
                        </Link>
                        <button
                          onClick={() => handleDelete(page.id)}
                          className="p-2 hover:bg-red-50 rounded-lg transition-colors"
                          title="Delete page"
                        >
                          <Trash2 className="w-4 h-4 text-red-600" />
                        </button>
                      </div>
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/committees/pages/add/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"
import { ArrowLeft, Save } from "lucide-react"
import { useRouter } from "next/navigation"

export default function AddPagePage() {
  const router = useRouter()
  const [formData, setFormData] = useState({
    title: "",
    slug: "",
    description: "",
    content: "",
    author: "Admin",
    status: "Draft" as "Draft" | "Published",
  })

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    const { name, value } = e.target
    if (name === "title") {
      setFormData({
        ...formData,
        title: value,
        slug: value
          .toLowerCase()
          .trim()
          .replace(/[^\w\s-]/g, "")
          .replace(/\s+/g, "-")
          .replace(/-+/g, "-"),
      })
    } else {
      setFormData({ ...formData, [name]: value })
    }
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    console.log("Page created:", formData)
    router.push("/admin/committees/pages")
  }

{/* Form */}
      <form onSubmit={handleSubmit} className="space-y-6">
        <div className="bg-white rounded-lg border border-gray-200 p-6 space-y-6">
          {/* Page Title */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Page Title *</label>
            <input
              type="text"
              name="title"
              value={formData.title}
              onChange={handleChange}
              placeholder="Enter page title"
              required
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent outline-none transition-colors"
            />
            <p className="text-xs text-gray-500 mt-1">This will appear as the page heading</p>
          </div>

{/* URL Slug */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">URL Slug *</label>
            <div className="flex items-center gap-2">
              <span className="text-gray-600">/committees/pages/</span>
              <input
                type="text"
                name="slug"
                value={formData.slug}
                onChange={handleChange}
                placeholder="auto-generated"
                required
                className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent outline-none transition-colors"
              />
            </div>
            <p className="text-xs text-gray-500 mt-1">Auto-generated from title, can be edited</p>
          </div>

{/* Description */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Description *</label>
            <textarea
              name="description"
              value={formData.description}
              onChange={handleChange}
              placeholder="Brief description of the page content"
              required
              rows={3}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent outline-none transition-colors resize-none"
            />
            <p className="text-xs text-gray-500 mt-1">This description will appear in listings</p>
          </div>

{/* Page Content */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Page Content *</label>
            <textarea
              name="content"
              value={formData.content}
              onChange={handleChange}
              placeholder="Enter the main content for this page"
              required
              rows={8}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent outline-none transition-colors resize-none font-mono text-sm"
            />
            <p className="text-xs text-gray-500 mt-1">You can use basic HTML or Markdown formatting</p>
          </div>

{/* Author */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Author</label>
            <input
              type="text"
              name="author"
              value={formData.author}
              onChange={handleChange}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent outline-none transition-colors"
            />
          </div>

{/* Status */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Status *</label>
            <select
              name="status"
              value={formData.status}
              onChange={handleChange}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent outline-none transition-colors"
            >
              <option value="Draft">Draft</option>
              <option value="Published">Published</option>
            </select>
            <p className="text-xs text-gray-500 mt-1">Published pages are visible on the website</p>
          </div>
        </div>

{/* Form Actions */}
        <div className="flex gap-4">
          <button
            type="submit"
            className="flex items-center gap-2 bg-[#CE1126] text-white px-6 py-2 rounded-lg hover:bg-red-700 transition-colors font-medium"
          >
            <Save className="w-5 h-5" />
            Create Page
          </button>
          <Link href="/admin/committees/pages">
            <button
              type="button"
              className="px-6 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors font-medium text-gray-700"
            >
              Cancel
            </button>
          </Link>
        </div>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/committees/pages/edit/[id]/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"
import { ArrowLeft, Save } from "lucide-react"
import { useRouter, useParams } from "next/navigation"

export default function EditPagePage() {
  const router = useRouter()
  const params = useParams()
  const pageId = params.id

const [formData, setFormData] = useState({
    title: "Executive Committee Overview",
    slug: "executive-committee",
    description: "Main overview page for the Executive Committee with roles and responsibilities",
    content: "Executive Committee is responsible for overseeing strategic planning and operational matters...",
    author: "Admin",
    status: "Published" as "Draft" | "Published",
  })

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    console.log("Page updated:", formData)
    router.push("/admin/committees/pages")
  }

{/* URL Slug */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">URL Slug *</label>
            <div className="flex items-center gap-2">
              <span className="text-gray-600">/committees/pages/</span>
              <input
                type="text"
                name="slug"
                value={formData.slug}
                onChange={handleChange}
                placeholder="page-slug"
                required
                className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent outline-none transition-colors"
              />
            </div>
            <p className="text-xs text-gray-500 mt-1">Auto-generated from title, can be edited</p>
          </div>

{/* Form Actions */}
        <div className="flex gap-4">
          <button
            type="submit"
            className="flex items-center gap-2 bg-[#CE1126] text-white px-6 py-2 rounded-lg hover:bg-red-700 transition-colors font-medium"
          >
            <Save className="w-5 h-5" />
            Save Changes
          </button>
          <Link href="/admin/committees/pages">
            <button
              type="button"
              className="px-6 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors font-medium text-gray-700"
            >
              Cancel
            </button>
          </Link>
        </div>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/committees/pages/view/[id]/page.tsx" isMerged="true"
"use client"

import Link from "next/link"
import { ArrowLeft, Edit2, Trash2, Calendar, User } from "lucide-react"
import { useRouter, useParams } from "next/navigation"
import { useState } from "react"

export default function ViewPagePage() {
  const router = useRouter()
  const params = useParams()
  const pageId = params.id

const [pageData] = useState({
    id: pageId,
    title: "Executive Committee Overview",
    slug: "executive-committee",
    description: "Main overview page for the Executive Committee with roles and responsibilities",
    content:
      "The Executive Committee is responsible for overseeing strategic planning and operational matters of the organization. Members meet monthly to discuss key initiatives, budget allocations, and organizational policies.",
    author: "Admin",
    status: "Published" as "Draft" | "Published",
    createdDate: "2024-01-15",
    lastModified: "2024-01-20",
    viewCount: 245,
  })

const handleDelete = () => {
    if (confirm("Are you sure you want to delete this page? This action cannot be undone.")) {
      router.push("/admin/committees/pages")
    }
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      {/* Header */}
      <div className="flex items-center gap-3">
        <Link href="/admin/committees/pages">
          <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors">
            <ArrowLeft className="w-5 h-5 text-gray-600" />
          </button>
        </Link>
        <div className="flex-1">
          <h1 className="text-3xl font-bold text-gray-900">{pageData.title}</h1>
          <p className="text-gray-600 mt-2">View page details and content</p>
        </div>
        <div className="flex gap-2">
          <Link href={`/admin/committees/pages/edit/${pageId}`}>
            <button className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors font-medium">
              <Edit2 className="w-5 h-5" />
              Edit
            </button>
          </Link>
          <button
            onClick={handleDelete}
            className="flex items-center gap-2 bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors font-medium"
          >
            <Trash2 className="w-5 h-5" />
            Delete
          </button>
        </div>
      </div>

{/* Page Details */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div className="bg-white rounded-lg border border-gray-200 p-4">
          <p className="text-xs text-gray-600 uppercase font-semibold">Status</p>
          <p className="text-lg font-semibold mt-2">
            <span
              className={`inline-block px-3 py-1 rounded-full text-xs font-medium ${
                pageData.status === "Published" ? "bg-green-100 text-green-800" : "bg-yellow-100 text-yellow-800"
              }`}
            >
              {pageData.status}
            </span>
          </p>
        </div>
        <div className="bg-white rounded-lg border border-gray-200 p-4">
          <p className="text-xs text-gray-600 uppercase font-semibold flex items-center gap-1">
            <User className="w-4 h-4" /> Author
          </p>
          <p className="text-lg font-semibold mt-2 text-gray-900">{pageData.author}</p>
        </div>
        <div className="bg-white rounded-lg border border-gray-200 p-4">
          <p className="text-xs text-gray-600 uppercase font-semibold flex items-center gap-1">
            <Calendar className="w-4 h-4" /> Created
          </p>
          <p className="text-sm font-semibold mt-2 text-gray-900">
            {new Date(pageData.createdDate).toLocaleDateString()}
          </p>
        </div>
        <div className="bg-white rounded-lg border border-gray-200 p-4">
          <p className="text-xs text-gray-600 uppercase font-semibold">Views</p>
          <p className="text-lg font-semibold mt-2 text-gray-900">{pageData.viewCount}</p>
        </div>
      </div>

{/* Page Content */}
      <div className="bg-white rounded-lg border border-gray-200 p-6 space-y-6">
        <div>
          <h2 className="text-sm font-semibold text-gray-700 uppercase mb-2">Page Title</h2>
          <p className="text-2xl font-bold text-gray-900">{pageData.title}</p>
        </div>

<div>
          <h2 className="text-sm font-semibold text-gray-700 uppercase mb-2">URL Slug</h2>
          <code className="text-sm bg-gray-100 text-gray-700 px-3 py-2 rounded block w-fit">
            /committees/pages/{pageData.slug}
          </code>
        </div>

<div>
          <h2 className="text-sm font-semibold text-gray-700 uppercase mb-2">Description</h2>
          <p className="text-gray-700 leading-relaxed">{pageData.description}</p>
        </div>

<div>
          <h2 className="text-sm font-semibold text-gray-700 uppercase mb-2">Content</h2>
          <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
            <p className="text-gray-700 leading-relaxed whitespace-pre-wrap">{pageData.content}</p>
          </div>
        </div>

<div className="pt-4 border-t border-gray-200">
          <p className="text-xs text-gray-500">Last modified: {new Date(pageData.lastModified).toLocaleString()}</p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]png:file="public/abstract-hero-banner.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-hero-banner-ZiOBSXqkgrzZ1euqqUVJhPan8tJGLX.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/admin/menus/[id]/edit/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import { ChevronLeft, Trash2 } from "lucide-react"

interface MenuItem {
  id: number
  label: string
  url: string
  order: number
}

export default function EditMenuPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const [items, setItems] = useState<MenuItem[]>([
    { id: 1, label: "Home", url: "/", order: 1 },
    { id: 2, label: "About", url: "/about", order: 2 },
    { id: 3, label: "Services", url: "/services", order: 3 },
    { id: 4, label: "Contact", url: "/contact", order: 4 },
  ])
  const [menuName, setMenuName] = useState("Header Menu")
  const [description, setDescription] = useState("Main menu shown at the top of the website")

const handleSave = () => {
    console.log("Saving menu:", { menuName, description, items })
    router.push("/admin/menus")
  }

const handleDeleteItem = (id: number) => {
    if (confirm("Are you sure you want to delete this menu item?")) {
      setItems(items.filter((item) => item.id !== id))
    }
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      {/* Header */}
      <div className="flex items-center gap-3">
        <Link href="/admin/menus">
          <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors">
            <ChevronLeft className="w-5 h-5 text-gray-600" />
          </button>
        </Link>
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Edit Menu</h1>
          <p className="text-gray-600 mt-1">Update menu items and settings</p>
        </div>
      </div>

{/* Form */}
      <div className="bg-white rounded-lg border border-gray-200 p-6 space-y-6">
        {/* Menu Details */}
        <div className="space-y-4">
          <h2 className="text-lg font-semibold text-gray-900">Menu Details</h2>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Menu Name</label>
            <input
              type="text"
              value={menuName}
              onChange={(e) => setMenuName(e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Description</label>
            <textarea
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              rows={3}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
            />
          </div>
        </div>

{/* Menu Items */}
        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <h2 className="text-lg font-semibold text-gray-900">Menu Items</h2>
            <Link href={`/admin/menus/${params.id}/add-item`}>
              <button className="px-3 py-2 text-sm font-medium text-[#CE1126] hover:bg-red-50 rounded-lg transition-colors">
                + Add Item
              </button>
            </Link>
          </div>

<div className="space-y-2">
            {items.map((item) => (
              <div key={item.id} className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
                <div className="flex-1">
                  <p className="text-sm font-medium text-gray-900">{item.label}</p>
                  <p className="text-xs text-gray-600">{item.url}</p>
                </div>
                <span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">Order: {item.order}</span>
                <button
                  onClick={() => handleDeleteItem(item.id)}
                  className="p-2 hover:bg-red-50 rounded-lg transition-colors"
                >
                  <Trash2 className="w-4 h-4 text-red-600" />
                </button>
              </div>
            ))}
          </div>
        </div>
      </div>

{/* Action Buttons */}
      <div className="flex gap-3 justify-end">
        <Link href="/admin/menus">
          <button className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors font-medium text-gray-700 w-auto">
            Cancel
          </button>
        </Link>
        <button
          onClick={handleSave}
          className="px-4 py-2 bg-[#CE1126] text-white rounded-lg hover:bg-red-700 transition-colors font-medium w-auto"
        >
          Save Menu
        </button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/menus/[id]/add-item/page.tsx" isMerged="true"
"use client"

import { useRouter } from "next/navigation"
import Link from "next/link"
import { ChevronLeft } from "lucide-react"
import { useState } from "react"

export default function AddMenuItemPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const [label, setLabel] = useState("")
  const [url, setUrl] = useState("")
  const [order, setOrder] = useState(1)

const handleSave = () => {
    if (!label.trim() || !url.trim()) {
      alert("Please fill in all fields")
      return
    }
    console.log("Adding menu item:", { label, url, order })
    router.push(`/admin/menus/${params.id}/edit`)
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      {/* Header */}
      <div className="flex items-center gap-3">
        <Link href={`/admin/menus/${params.id}/edit`}>
          <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors">
            <ChevronLeft className="w-5 h-5 text-gray-600" />
          </button>
        </Link>
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Add Menu Item</h1>
          <p className="text-gray-600 mt-1">Create a new menu item</p>
        </div>
      </div>

{/* Form */}
      <div className="bg-white rounded-lg border border-gray-200 p-6 space-y-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Item Label</label>
          <input
            type="text"
            value={label}
            onChange={(e) => setLabel(e.target.value)}
            placeholder="e.g., Home, About, Services"
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">URL/Link</label>
          <input
            type="text"
            value={url}
            onChange={(e) => setUrl(e.target.value)}
            placeholder="e.g., /, /about, /services"
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Display Order</label>
          <input
            type="number"
            value={order}
            onChange={(e) => setOrder(Number.parseInt(e.target.value))}
            min="1"
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
          />
        </div>
      </div>

{/* Action Buttons */}
      <div className="flex gap-3 justify-end">
        <Link href={`/admin/menus/${params.id}/edit`}>
          <button className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors font-medium text-gray-700 w-auto">
            Cancel
          </button>
        </Link>
        <button
          onClick={handleSave}
          className="px-4 py-2 bg-[#CE1126] text-white rounded-lg hover:bg-red-700 transition-colors font-medium w-auto"
        >
          Add Item
        </button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/menus/[id]/reorder/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import { ChevronLeft, GripVertical, ChevronUp, ChevronDown } from "lucide-react"

interface MenuItem {
  id: number
  label: string
  url: string
  order: number
}

export default function ReorderMenuPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const [items, setItems] = useState<MenuItem[]>([
    { id: 1, label: "Home", url: "/", order: 1 },
    { id: 2, label: "About", url: "/about", order: 2 },
    { id: 3, label: "Services", url: "/services", order: 3 },
    { id: 4, label: "Contact", url: "/contact", order: 4 },
  ])

const moveUp = (index: number) => {
    if (index > 0) {
      const newItems = [...items]
      ;[newItems[index], newItems[index - 1]] = [newItems[index - 1], newItems[index]]
      newItems.forEach((item, i) => (item.order = i + 1))
      setItems(newItems)
    }
  }

const moveDown = (index: number) => {
    if (index < items.length - 1) {
      const newItems = [...items]
      ;[newItems[index], newItems[index + 1]] = [newItems[index + 1], newItems[index]]
      newItems.forEach((item, i) => (item.order = i + 1))
      setItems(newItems)
    }
  }

const handleSave = () => {
    console.log("Saving menu order:", items)
    router.push("/admin/menus")
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      {/* Header */}
      <div className="flex items-center gap-3">
        <Link href={`/admin/menus/${params.id}/edit`}>
          <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors">
            <ChevronLeft className="w-5 h-5 text-gray-600" />
          </button>
        </Link>
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Reorder Menu Items</h1>
          <p className="text-gray-600 mt-1">Drag or use arrow buttons to change the order of menu items</p>
        </div>
      </div>

{/* Menu Items Reorder */}
      <div className="bg-white rounded-lg border border-gray-200 p-6">
        <div className="space-y-3">
          {items.map((item, index) => (
            <div
              key={item.id}
              className="flex items-center gap-3 p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors group"
            >
              <GripVertical className="w-5 h-5 text-gray-400" />
              <div className="flex-1">
                <p className="font-medium text-gray-900">{item.label}</p>
                <p className="text-sm text-gray-600">{item.url}</p>
              </div>
              <div className="flex items-center gap-2">
                <button
                  onClick={() => moveUp(index)}
                  disabled={index === 0}
                  className="p-2 hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg transition-colors"
                >
                  <ChevronUp className="w-4 h-4 text-blue-600" />
                </button>
                <button
                  onClick={() => moveDown(index)}
                  disabled={index === items.length - 1}
                  className="p-2 hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg transition-colors"
                >
                  <ChevronDown className="w-4 h-4 text-blue-600" />
                </button>
                <span className="text-sm font-semibold text-gray-700 w-8 text-center">#{item.order}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

{/* Action Buttons */}
      <div className="flex gap-3 justify-end">
        <Link href={`/admin/menus/${params.id}/edit`}>
          <button className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors font-medium text-gray-700 w-auto">
            Cancel
          </button>
        </Link>
        <button
          onClick={handleSave}
          className="px-4 py-2 bg-[#CE1126] text-white rounded-lg hover:bg-red-700 transition-colors font-medium w-auto"
        >
          Save Order
        </button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/banners/view/[id]/page.tsx" isMerged="true"
"use client"

import Link from "next/link"
import { ArrowLeft, Edit2, Trash2 } from "lucide-react"

export default function ViewBannerPage({ params }: { params: { id: string } }) {
  const banner = {
    id: Number.parseInt(params.id),
    title: "Welcome to MCC",
    type: "Homepage Banner",
    description: "Main banner for homepage with call-to-action",
    imageUrl: "/welcome-banner.jpg",
    status: "Active",
    order: 1,
    displayLocation: "Homepage - Above Fold",
    createdDate: "2024-01-15",
    createdBy: "Admin User",
    lastModified: "2024-01-25",
    modifiedBy: "Admin User",
  }

const handleDelete = () => {
    if (confirm("Are you sure you want to delete this banner?")) {
      alert("Banner deleted successfully!")
    }
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <Link href="/admin/banners">
          <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors">
            <ArrowLeft className="w-5 h-5 text-gray-600" />
          </button>
        </Link>
        <h1 className="text-3xl font-bold text-gray-900">View Banner</h1>
      </div>

{/* Main Content */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Banner Preview */}
        <div className="lg:col-span-2">
          <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
            <div className="aspect-video bg-gray-100 overflow-hidden">
              <img
                src={banner.imageUrl || "/placeholder.svg"}
                alt={banner.title}
                className="w-full h-full object-cover"
              />
            </div>
            <div className="p-6 space-y-4">
              <div>
                <h2 className="text-2xl font-bold text-gray-900">{banner.title}</h2>
                <div className="flex gap-2 mt-2">
                  <span className="inline-block px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800">
                    {banner.type}
                  </span>
                  <span className="inline-block px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">
                    {banner.status}
                  </span>
                </div>
              </div>
              <div>
                <h3 className="text-sm font-semibold text-gray-700 mb-1">Description</h3>
                <p className="text-gray-600">{banner.description}</p>
              </div>
            </div>
          </div>
        </div>

{/* Details Sidebar */}
        <div className="space-y-4">
          <div className="bg-white rounded-lg border border-gray-200 p-6 space-y-4">
            <div>
              <p className="text-xs font-semibold text-gray-600 uppercase">Display Location</p>
              <p className="text-gray-900 font-medium mt-1">{banner.displayLocation}</p>
            </div>
            <div className="border-t border-gray-200 pt-4">
              <p className="text-xs font-semibold text-gray-600 uppercase">Display Order</p>
              <p className="text-gray-900 font-medium mt-1">{banner.order}</p>
            </div>
            <div className="border-t border-gray-200 pt-4">
              <p className="text-xs font-semibold text-gray-600 uppercase">Status</p>
              <p className="text-gray-900 font-medium mt-1">{banner.status}</p>
            </div>
            <div className="border-t border-gray-200 pt-4">
              <p className="text-xs font-semibold text-gray-600 uppercase">Created</p>
              <p className="text-gray-900 text-sm mt-1">{banner.createdDate}</p>
              <p className="text-gray-600 text-xs mt-1">by {banner.createdBy}</p>
            </div>
            <div className="border-t border-gray-200 pt-4">
              <p className="text-xs font-semibold text-gray-600 uppercase">Last Modified</p>
              <p className="text-gray-900 text-sm mt-1">{banner.lastModified}</p>
              <p className="text-gray-600 text-xs mt-1">by {banner.modifiedBy}</p>
            </div>
          </div>

{/* Action Buttons */}
          <div className="bg-white rounded-lg border border-gray-200 p-6 space-y-2">
            <Link href={`/admin/banners/edit/${banner.id}`}>
              <button className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-[#003087] text-white rounded-lg hover:bg-blue-800 transition-colors font-medium">
                <Edit2 className="w-4 h-4" />
                Edit Banner
              </button>
            </Link>
            <button
              onClick={handleDelete}
              className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors font-medium"
            >
              <Trash2 className="w-4 h-4" />
              Delete Banner
            </button>
            <Link href="/admin/banners">
              <button className="w-full px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors font-medium">
                Back to Banners
              </button>
            </Link>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/banners/reorder/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { ArrowLeft, ArrowUp, ArrowDown } from "lucide-react"

interface Banner {
  id: number
  title: string
  type: string
  order: number
}

export default function ReorderBannersPage() {
  const [banners, setBanners] = useState<Banner[]>([
    { id: 1, title: "Welcome to MCC", type: "Homepage Banner", order: 1 },
    { id: 2, title: "Our Mission Banner", type: "Homepage Banner", order: 2 },
    { id: 3, title: "Featured Slider 1", type: "Slider", order: 3 },
  ])

const moveUp = (index: number) => {
    if (index > 0) {
      const newBanners = [...banners]
      ;[newBanners[index], newBanners[index - 1]] = [newBanners[index - 1], newBanners[index]]
      newBanners.forEach((b, i) => (b.order = i + 1))
      setBanners(newBanners)
    }
  }

const moveDown = (index: number) => {
    if (index < banners.length - 1) {
      const newBanners = [...banners]
      ;[newBanners[index], newBanners[index + 1]] = [newBanners[index + 1], newBanners[index]]
      newBanners.forEach((b, i) => (b.order = i + 1))
      setBanners(newBanners)
    }
  }

const handleSave = () => {
    console.log("Saving banner order:", banners)
    alert("Banner order updated successfully!")
  }

{/* Instructions */}
      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
        <p className="text-sm text-blue-800">
          Use the up and down arrows to reorder banners. The order determines how they appear on your website.
        </p>
      </div>

{/* Banners List */}
      <div className="bg-white rounded-lg border border-gray-200 p-4 sm:p-6">
        <div className="space-y-2">
          {banners.map((banner, index) => (
            <div
              key={banner.id}
              className="flex items-center gap-3 p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
            >
              <div className="flex gap-1">
                <button
                  onClick={() => moveUp(index)}
                  disabled={index === 0}
                  className="p-2 text-gray-600 hover:bg-white rounded disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                >
                  <ArrowUp className="w-4 h-4" />
                </button>
                <button
                  onClick={() => moveDown(index)}
                  disabled={index === banners.length - 1}
                  className="p-2 text-gray-600 hover:bg-white rounded disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                >
                  <ArrowDown className="w-4 h-4" />
                </button>
              </div>
              <div className="flex-1">
                <p className="text-sm font-medium text-gray-900">{banner.title}</p>
                <p className="text-xs text-gray-600">{banner.type}</p>
              </div>
              <span className="text-sm font-semibold text-white bg-[#003087] px-3 py-1 rounded">
                Order {banner.order}
              </span>
            </div>
          ))}
        </div>
      </div>

{/* Action Buttons */}
      <div className="flex gap-3">
        <button
          onClick={handleSave}
          className="px-4 py-2 bg-[#CE1126] text-white rounded-lg hover:bg-red-700 transition-colors font-medium w-auto"
        >
          Save Order
        </button>
        <Link href="/admin/banners">
          <button className="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors font-medium w-auto">
            Cancel
          </button>
        </Link>
      </div>
    </div>
  )
}
[V0_FILE]jpg:file="public/welcome-banner.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/welcome-banner-3v3GVY7uPKUSOMvjq7rMQGnH8KyFZq.jpg" isMerged="true"
[V0_FILE]jpg:file="public/mission-banner.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mission-banner-bBY2afBLms0T7CZN25i4RL4Ozs17xn.jpg" isMerged="true"
[V0_FILE]jpg:file="public/slider-featured.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/slider-featured-u8JvYZbJlanBSLl8UkVEo6C0fKCFFZ.jpg" isMerged="true"
[V0_FILE]typescript:file="lib/admin-menu.ts" isMerged="true"
import {
  LayoutDashboard,
  Building2,
  Users,
  UserCheck,
  FileStack,
  Globe,
  MessageSquare,
  Vote,
  Shield,
  FileText,
  Menu,
  ImageIcon,
  Settings,
  Activity,
  LogIn,
  Database,
  HelpCircle,
} from "lucide-react"

export const ADMIN_MENU_ITEMS = [
  {
    label: "Dashboard",
    href: "/admin",
    icon: LayoutDashboard,
    description: "View overview and statistics",
  },
  {
    label: "Branch",
    href: "/admin/branch",
    icon: Building2,
    description: "Manage regional branches",
  },
  {
    label: "Committees",
    href: "/admin/committees",
    icon: Users,
    description: "Manage committees and chairs",
  },
  {
    label: "Page Management",
    href: "/admin/pages",
    icon: FileText,
    description: "Manage website pages and sections",
  },
  {
    label: "Menu Management",
    href: "/admin/menus",
    icon: Menu,
    description: "Control website navigation menus",
  },
  {
    label: "Banner & Slider Management",
    href: "/admin/banners",
    icon: ImageIcon,
    description: "Manage banners and sliders",
  },
  {
    label: "Memberships",
    href: "/admin/memberships",
    icon: UserCheck,
    description: "Manage member registrations",
  },
  {
    label: "Media Resources",
    href: "/admin/media-resources",
    icon: FileStack,
    description: "Manage documents and media",
  },
  {
    label: "Public Page",
    href: "/admin/public-page",
    icon: Globe,
    description: "Manage website pages",
  },
  {
    label: "Contact",
    href: "/admin/contact",
    icon: MessageSquare,
    description: "Manage contact information",
  },
  {
    label: "Election corner",
    href: "/admin/election-corner",
    icon: Vote,
    description: "Manage elections and voting",
  },
  {
    label: "Users & Roles",
    href: "/admin/users-roles",
    icon: Shield,
    description: "Manage admin users and permissions",
  },
  {
    label: "Settings",
    href: "/admin/settings",
    icon: Settings,
    description: "Configure website and system settings",
  },
  {
    label: "Audit & Logs",
    href: "/admin/audit-logs",
    icon: Shield,
    description: "View audit and logs",
    submenu: [
      {
        label: "Admin Activity Logs",
        href: "/admin/audit-logs/activity",
        icon: Activity,
      },
      {
        label: "Login History",
        href: "/admin/audit-logs/login",
        icon: LogIn,
      },
      {
        label: "Data Change Logs",
        href: "/admin/audit-logs/data-changes",
        icon: Database,
      },
    ],
  },
  {
    label: "Support / Help",
    href: "/admin/support",
    icon: HelpCircle,
    description: "Admin guide, support requests, and FAQs",
  },
]
[V0_FILE]typescriptreact:file="app/admin/settings/general/contact-info/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { Save } from "lucide-react"
import Link from "next/link"
import { API_ENDPOINTS } from "@/lib/api-config"
import { apiGetWithHeaders, apiPostWithHeaders } from "@/lib/api-utils"

interface ContactData {
  email: string
  phone: string
  street_address: string
  city: string
  zip_code: string
  country: string
}

interface FormErrors {
  email?: string
  phone?: string
  street_address?: string
  city?: string
  zip_code?: string
  country?: string
}

export default function ContactInfoPage() {
  const [formData, setFormData] = useState<ContactData>({
    email: "",
    phone: "",
    street_address: "",
    city: "",
    zip_code: "",
    country: "",
  })

const [errors, setErrors] = useState<FormErrors>({})
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null)
  const [usesSampleData, setUsesSampleData] = useState(false)

useEffect(() => {
    const fetchContactInfo = async () => {
      try {
        const response = await apiGetWithHeaders(API_ENDPOINTS.settings.contact.get)
        const result = await response.json()

if (result.status === "SUCCESS" && result.data) {
          setFormData({
            email: result.data.email || "",
            phone: result.data.phone || "",
            street_address: result.data.street_address || "",
            city: result.data.city || "",
            zip_code: result.data.zip_code || "",
            country: result.data.country || "",
          })
        }
      } catch (error) {
        console.error("Failed to fetch contact info:", error)
        setUsesSampleData(true)
        // Use default sample data on error
        setFormData({
          email: "info@mcc.my",
          phone: "+60-3-2000-0000",
          street_address: "123 Jalan Merdeka",
          city: "Kuala Lumpur",
          zip_code: "50000",
          country: "Malaysia",
        })
      } finally {
        setLoading(false)
      }
    }

fetchContactInfo()
  }, [])

const validateForm = (): boolean => {
    const newErrors: FormErrors = {}

if (!formData.email?.trim()) {
      newErrors.email = "Email is required"
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
      newErrors.email = "Please enter a valid email address"
    }

if (!formData.phone?.trim()) {
      newErrors.phone = "Phone number is required"
    }

if (!formData.street_address?.trim()) {
      newErrors.street_address = "Street address is required"
    }

if (!formData.city?.trim()) {
      newErrors.city = "City is required"
    }

if (!formData.zip_code?.trim()) {
      newErrors.zip_code = "Zip code is required"
    }

if (!formData.country?.trim()) {
      newErrors.country = "Country is required"
    }

setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({
      ...prev,
      [name]: value,
    }))
    if (errors[name as keyof FormErrors]) {
      setErrors((prev) => ({
        ...prev,
        [name]: undefined,
      }))
    }
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

if (!validateForm()) {
      setMessage({ type: "error", text: "Please fix the errors above" })
      return
    }

setSaving(true)
    setMessage(null)

try {
      const response = await apiPostWithHeaders(API_ENDPOINTS.settings.contact.save, formData)
      const result = await response.json()

if (result.status === "SUCCESS") {
        setMessage({ type: "success", text: "Contact information saved successfully!" })
        setUsesSampleData(false)
      } else {
        setMessage({ type: "error", text: result.message || "Failed to save contact information" })
      }
    } catch (error) {
      console.error("Failed to save contact info:", error)
      setMessage({ type: "error", text: "Failed to save contact information. Please try again." })
    } finally {
      setSaving(false)
    }
  }

if (loading) {
    return (
      <div className="p-4 sm:p-6 space-y-6">
        <div className="flex items-center justify-center h-64">
          <p className="text-gray-600">Loading...</p>
        </div>
      </div>
    )
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Contact Information</h1>
          <p className="text-gray-600 mt-2">Configure contact email, phone, and address</p>
        </div>
        <Link href="/admin/settings/general">
          <button className="px-4 py-2 text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium">
            Back
          </button>
        </Link>
      </div>

{usesSampleData && (
        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
          <p className="text-yellow-800 text-sm">Using sample data. Unable to connect to server.</p>
        </div>
      )}

{message && (
        <div
          className={`rounded-lg p-4 text-sm font-medium ${
            message.type === "success"
              ? "bg-green-50 border border-green-200 text-green-800"
              : "bg-red-50 border border-red-200 text-red-800"
          }`}
        >
          {message.text}
        </div>
      )}

<form onSubmit={handleSubmit} className="bg-white rounded-lg border border-gray-200 p-6 space-y-6 max-w-2xl">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Email Address *</label>
          <input
            type="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
            className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087] ${
              errors.email ? "border-red-500" : "border-gray-300"
            }`}
          />
          {errors.email && <p className="text-red-600 text-sm mt-1">{errors.email}</p>}
        </div>

<div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Phone Number *</label>
          <input
            type="tel"
            name="phone"
            value={formData.phone}
            onChange={handleChange}
            className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087] ${
              errors.phone ? "border-red-500" : "border-gray-300"
            }`}
          />
          {errors.phone && <p className="text-red-600 text-sm mt-1">{errors.phone}</p>}
        </div>

<div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Street Address *</label>
          <input
            type="text"
            name="street_address"
            value={formData.street_address}
            onChange={handleChange}
            className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087] ${
              errors.street_address ? "border-red-500" : "border-gray-300"
            }`}
          />
          {errors.street_address && <p className="text-red-600 text-sm mt-1">{errors.street_address}</p>}
        </div>

<div className="grid grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">City</label>
            <input
              type="text"
              name="city"
              value={formData.city}
              onChange={handleChange}
              className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087] ${
                errors.city ? "border-red-500" : "border-gray-300"
              }`}
            />
            {errors.city && <p className="text-red-600 text-sm mt-1">{errors.city}</p>}
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Zip Code</label>
            <input
              type="text"
              name="zip_code"
              value={formData.zip_code}
              onChange={handleChange}
              className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087] ${
                errors.zip_code ? "border-red-500" : "border-gray-300"
              }`}
            />
            {errors.zip_code && <p className="text-red-600 text-sm mt-1">{errors.zip_code}</p>}
          </div>
        </div>

<div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Country</label>
          <input
            type="text"
            name="country"
            value={formData.country}
            onChange={handleChange}
            className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087] ${
              errors.country ? "border-red-500" : "border-gray-300"
            }`}
          />
          {errors.country && <p className="text-red-600 text-sm mt-1">{errors.country}</p>}
        </div>

<button
          type="submit"
          disabled={saving}
          className="flex items-center gap-2 px-4 py-2 bg-[#CE1126] text-white rounded-lg hover:bg-red-700 disabled:bg-gray-400 transition-colors font-medium text-sm w-auto"
        >
          <Save className="w-5 h-5" />
          {saving ? "Saving..." : "Save Settings"}
        </button>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/settings/general/footer-content/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { Save, Trash2 } from "lucide-react"
import Link from "next/link"
import { API_ENDPOINTS } from "@/lib/api-config"

export default function FooterContentPage() {
  const [formData, setFormData] = useState({
    footerAddress: "123 Jalan Merdeka, Kuala Lumpur, Malaysia",
    copyrightText: "© 2026 Malaysian Ceylonese Congress. All rights reserved.",
    quickLinks: [
      { label: "About Us", url: "/about" },
      { label: "Contact", url: "/contact" },
      { label: "Privacy Policy", url: "/privacy" },
    ],
  })

const [newLink, setNewLink] = useState({ label: "", url: "" })
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [success, setSuccess] = useState(false)

const handleChange = (e: any) => {
    const { name, value } = e.target
    setFormData((prev) => ({
      ...prev,
      [name]: value,
    }))
    setError(null)
  }

const addQuickLink = async () => {
    if (!newLink.label || !newLink.url) {
      setError("Please enter both label and URL for the quick link")
      return
    }

setLoading(true)
    setError(null)

try {
      const response = await fetch(API_ENDPOINTS.settings.footer.addQuickLink, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
          "X-Requested-With": "XMLHttpRequest",
        },
        credentials: "include",
        body: JSON.stringify({
          label: newLink.label,
          url: newLink.url,
          order: formData.quickLinks.length + 1,
        }),
      })

const data = await response.json()

if (data.status === "SUCCESS") {
        setFormData((prev) => ({
          ...prev,
          quickLinks: [...prev.quickLinks, { ...newLink }],
        }))
        setNewLink({ label: "", url: "" })
        setSuccess(true)
        setTimeout(() => setSuccess(false), 3000)
      } else {
        setError("Failed to add quick link")
      }
    } catch (err) {
      setError("Unable to connect to server. Please try again.")
      console.error("Add quick link error:", err)
    } finally {
      setLoading(false)
    }
  }

const removeQuickLink = (index: number) => {
    setFormData((prev) => ({
      ...prev,
      quickLinks: prev.quickLinks.filter((_, i) => i !== index),
    }))
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    setError(null)
    setSuccess(false)

try {
      const payload = {
        footer_address: formData.footerAddress,
        copyright_text: formData.copyrightText,
      }

const response = await fetch(API_ENDPOINTS.settings.footer.update, {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
          "X-Requested-With": "XMLHttpRequest",
        },
        credentials: "include",
        body: JSON.stringify(payload),
      })

const data = await response.json()

if (data.status === "SUCCESS") {
        setSuccess(true)
        setTimeout(() => setSuccess(false), 3000)
      } else {
        setError("Failed to save footer content")
      }
    } catch (err) {
      setError("Unable to connect to server. Please try again.")
      console.error("Footer save error:", err)
    } finally {
      setLoading(false)
    }
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Footer Content</h1>
          <p className="text-gray-600 mt-2">Manage footer address, copyright text, and quick links</p>
        </div>
        <Link href="/admin/settings/general">
          <button className="px-4 py-2 text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium">
            Back
          </button>
        </Link>
      </div>

{success && (
        <div className="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg text-sm">
          Footer content saved successfully!
        </div>
      )}

{error && (
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">{error}</div>
      )}

<form onSubmit={handleSubmit} className="bg-white rounded-lg border border-gray-200 p-6 space-y-6 max-w-2xl">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Footer Address *</label>
          <textarea
            name="footerAddress"
            value={formData.footerAddress}
            onChange={handleChange}
            rows={3}
            required
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
          />
        </div>

<div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Copyright Text *</label>
          <textarea
            name="copyrightText"
            value={formData.copyrightText}
            onChange={handleChange}
            rows={2}
            required
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
          />
        </div>

<div>
          <h3 className="text-lg font-bold text-gray-900 mb-4 pb-4 border-b border-gray-200">Quick Links</h3>
          <div className="space-y-4">
            {formData.quickLinks.map((link, idx) => (
              <div key={idx} className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
                <div className="flex-1">
                  <p className="text-sm font-medium text-gray-700">{link.label}</p>
                  <p className="text-xs text-gray-500">{link.url}</p>
                </div>
                <button
                  type="button"
                  onClick={() => removeQuickLink(idx)}
                  className="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
                >
                  <Trash2 className="w-4 h-4" />
                </button>
              </div>
            ))}
          </div>

<div className="mt-4 space-y-3 p-4 bg-blue-50 rounded-lg border border-blue-200">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Link Label</label>
              <input
                type="text"
                value={newLink.label}
                onChange={(e) => setNewLink({ ...newLink, label: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
                placeholder="e.g., About Us"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Link URL</label>
              <input
                type="text"
                value={newLink.url}
                onChange={(e) => setNewLink({ ...newLink, url: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
                placeholder="e.g., /about"
              />
            </div>
            <button
              type="button"
              onClick={addQuickLink}
              disabled={loading}
              className="w-auto px-4 py-2 bg-[#003087] text-white rounded-lg hover:bg-blue-900 transition-colors font-medium text-sm disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {loading ? "Adding..." : "Add Link"}
            </button>
          </div>
        </div>

import { Card, CardContent } from "@/components/ui/card"
import { ArrowRight, Shield, Eye, Zap } from "lucide-react"
import Link from "next/link"

export default function WebsiteSettingsPage() {
  const sections = [
    {
      title: "Display Options",
      description: "Configure page display settings and user interface options",
      icon: Eye,
      href: "/admin/settings/website-settings/display-options",
      color: "bg-green-50 border-green-200 hover:border-green-400",
    },
    {
      title: "Security Settings",
      description: "Manage security preferences and access controls",
      icon: Shield,
      href: "/admin/settings/website-settings/security",
      color: "bg-red-50 border-red-200 hover:border-red-400",
    },
    {
      title: "Performance",
      description: "Configure caching, optimization, and performance settings",
      icon: Zap,
      href: "/admin/settings/website-settings/performance",
      color: "bg-yellow-50 border-yellow-200 hover:border-yellow-400",
    },
  ]

return (
    <div className="p-4 sm:p-6 space-y-8">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Website Settings</h1>
          <p className="text-gray-600 mt-2">Configure site behavior and display options</p>
        </div>
        <Link href="/admin/settings">
          <button className="px-4 py-2 text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium">
            Back
          </button>
        </Link>
      </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {sections.map((section, idx) => {
          const Icon = section.icon
          return (
            <Link key={idx} href={section.href}>
              <Card className={`h-full cursor-pointer border transition-all ${section.color}`}>
                <CardContent className="pt-6">
                  <div className="flex items-start justify-between">
                    <div>
                      <h3 className="font-bold text-gray-900 text-lg">{section.title}</h3>
                      <p className="text-gray-600 text-sm mt-2">{section.description}</p>
                    </div>
                    <Icon className="w-8 h-8 text-gray-400" />
                  </div>
                  <div className="mt-4 flex items-center gap-2 text-[#CE1126] font-medium">
                    Configure <ArrowRight className="w-4 h-4" />
                  </div>
                </CardContent>
              </Card>
            </Link>
          )
        })}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/settings/system-preferences/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { Save } from "lucide-react"
import Link from "next/link"
import { API_ENDPOINTS } from "@/lib/api-config"

export default function SystemPreferencesPage() {
  const [formData, setFormData] = useState({
    maintenanceMode: false,
    emailNotifications: true,
    debugMode: false,
    maxUploadSize: "50",
    sessionTimeout: "30",
    maxLoginAttempts: "5",
    backupEnabled: true,
    cachingEnabled: true,
  })

const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [success, setSuccess] = useState(false)

const handleChange = (e: any) => {
    const { name, value, type, checked } = e.target
    setFormData((prev) => ({
      ...prev,
      [name]: type === "checkbox" ? checked : value,
    }))
    setError(null)
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    setError(null)
    setSuccess(false)

try {
      const payload = {
        maintenance_mode: formData.maintenanceMode,
        debug_mode: formData.debugMode,
        email_notifications: formData.emailNotifications,
        max_upload_size_mb: Number.parseInt(formData.maxUploadSize),
        automatic_backups: formData.backupEnabled,
        enable_caching: formData.cachingEnabled,
        session_timeout_minutes: Number.parseInt(formData.sessionTimeout),
        max_login_attempts: Number.parseInt(formData.maxLoginAttempts),
      }

const response = await fetch(API_ENDPOINTS.settings.systemPreferences, {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
          "X-Requested-With": "XMLHttpRequest",
        },
        credentials: "include",
        body: JSON.stringify(payload),
      })

const data = await response.json()

if (data.status === "SUCCESS") {
        setSuccess(true)
        setTimeout(() => setSuccess(false), 3000)
      } else {
        setError("Failed to save system preferences")
      }
    } catch (err) {
      setError("Unable to connect to server. Please try again.")
      console.error("System preferences save error:", err)
    } finally {
      setLoading(false)
    }
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">System Preferences</h1>
          <p className="text-gray-600 mt-2">Configure system-level preferences and defaults</p>
        </div>
        <Link href="/admin/settings">
          <button className="px-4 py-2 text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium">
            Back
          </button>
        </Link>
      </div>

{success && (
        <div className="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg text-sm">
          System preferences saved successfully!
        </div>
      )}

{error && (
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">{error}</div>
      )}

<form onSubmit={handleSubmit} className="bg-white rounded-lg border border-gray-200 p-6 space-y-6 max-w-2xl">
        <div>
          <h3 className="text-lg font-bold text-gray-900 mb-4 pb-4 border-b border-gray-200">System Status</h3>
          <div className="space-y-4">
            <label className="flex items-center gap-3">
              <input
                type="checkbox"
                name="maintenanceMode"
                checked={formData.maintenanceMode}
                onChange={handleChange}
                className="w-4 h-4 rounded border-gray-300 text-[#CE1126] cursor-pointer"
              />
              <span className="text-gray-700 font-medium">Maintenance Mode</span>
            </label>
            <p className="text-sm text-gray-500 ml-7">Website will be unavailable to public users when enabled</p>

<label className="flex items-center gap-3 mt-4">
              <input
                type="checkbox"
                name="debugMode"
                checked={formData.debugMode}
                onChange={handleChange}
                className="w-4 h-4 rounded border-gray-300 text-[#CE1126] cursor-pointer"
              />
              <span className="text-gray-700 font-medium">Debug Mode</span>
            </label>
            <p className="text-sm text-gray-500 ml-7">Enable detailed error logging and debugging information</p>
          </div>
        </div>

<div>
          <h3 className="text-lg font-bold text-gray-900 mb-4 pb-4 border-b border-gray-200">Notifications</h3>
          <div className="space-y-4">
            <label className="flex items-center gap-3">
              <input
                type="checkbox"
                name="emailNotifications"
                checked={formData.emailNotifications}
                onChange={handleChange}
                className="w-4 h-4 rounded border-gray-300 text-[#003087] cursor-pointer"
              />
              <span className="text-gray-700 font-medium">Email Notifications</span>
            </label>
            <p className="text-sm text-gray-500 ml-7">Send email notifications for system events</p>
          </div>
        </div>

<div>
          <h3 className="text-lg font-bold text-gray-900 mb-4 pb-4 border-b border-gray-200">Upload & Storage</h3>
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Max Upload Size (MB)</label>
              <input
                type="number"
                name="maxUploadSize"
                value={formData.maxUploadSize}
                onChange={handleChange}
                min="1"
                max="500"
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
              />
            </div>
            <label className="flex items-center gap-3">
              <input
                type="checkbox"
                name="backupEnabled"
                checked={formData.backupEnabled}
                onChange={handleChange}
                className="w-4 h-4 rounded border-gray-300 text-[#003087] cursor-pointer"
              />
              <span className="text-gray-700 font-medium">Automatic Backups</span>
            </label>
          </div>
        </div>

<div>
          <h3 className="text-lg font-bold text-gray-900 mb-4 pb-4 border-b border-gray-200">Performance</h3>
          <div className="space-y-4">
            <label className="flex items-center gap-3">
              <input
                type="checkbox"
                name="cachingEnabled"
                checked={formData.cachingEnabled}
                onChange={handleChange}
                className="w-4 h-4 rounded border-gray-300 text-[#003087] cursor-pointer"
              />
              <span className="text-gray-700 font-medium">Enable Caching</span>
            </label>
            <p className="text-sm text-gray-500 ml-7">Cache content for improved performance</p>
          </div>
        </div>

<div>
          <h3 className="text-lg font-bold text-gray-900 mb-4 pb-4 border-b border-gray-200">Security</h3>
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Session Timeout (minutes)</label>
              <input
                type="number"
                name="sessionTimeout"
                value={formData.sessionTimeout}
                onChange={handleChange}
                min="5"
                max="480"
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Max Login Attempts</label>
              <input
                type="number"
                name="maxLoginAttempts"
                value={formData.maxLoginAttempts}
                onChange={handleChange}
                min="1"
                max="20"
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
              />
            </div>
          </div>
        </div>

<button
          type="submit"
          disabled={loading}
          className="flex items-center gap-2 px-4 py-2 bg-[#CE1126] text-white rounded-lg hover:bg-red-700 transition-colors font-medium text-sm w-auto disabled:opacity-50 disabled:cursor-not-allowed"
        >
          <Save className="w-5 h-5" />
          {loading ? "Saving..." : "Save Preferences"}
        </button>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/audit-logs/activity/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/audit-logs/login/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/audit-logs/data-changes/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/audit-logs/layout.tsx" isMerged="true"
import type React from "react"
import { Suspense } from "react"

export default function AuditLogsLayout({ children }: { children: React.ReactNode }) {
  return <Suspense fallback={null}>{children}</Suspense>
}
[V0_FILE]typescriptreact:file="app/admin/audit-logs/activity/layout.tsx" isMerged="true"
import type React from "react"
import { Suspense } from "react"

export default function ActivityLayout({ children }: { children: React.ReactNode }) {
  return <Suspense fallback={null}>{children}</Suspense>
}
[V0_FILE]typescriptreact:file="app/admin/audit-logs/login/layout.tsx" isMerged="true"
import type React from "react"
import { Suspense } from "react"

export default function LoginLayout({ children }: { children: React.ReactNode }) {
  return <Suspense fallback={null}>{children}</Suspense>
}
[V0_FILE]typescriptreact:file="app/admin/audit-logs/data-changes/layout.tsx" isMerged="true"
import type React from "react"
import { Suspense } from "react"

export default function DataChangesLayout({ children }: { children: React.ReactNode }) {
  return <Suspense fallback={null}>{children}</Suspense>
}
[V0_FILE]typescriptreact:file="app/admin/audit-logs/activity/page.tsx" isMerged="true"
import { Suspense } from "react"
import ActivityLogsClient from "./client"

export default function ActivityLogsPage() {
  return (
    <Suspense fallback={null}>
      <ActivityLogsClient />
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="app/admin/audit-logs/login/page.tsx" isMerged="true"
import { Suspense } from "react"
import LoginHistoryClient from "./client"

export default function LoginHistoryPage() {
  return (
    <Suspense fallback={null}>
      <LoginHistoryClient />
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="app/admin/audit-logs/data-changes/page.tsx" isMerged="true"
import { Suspense } from "react"
import DataChangeLogsClient from "./client"

export default function DataChangeLogsPage() {
  return (
    <Suspense fallback={null}>
      <DataChangeLogsClient />
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="app/admin/support/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { BookOpen, MessageSquare, HelpCircle, ArrowRight } from "lucide-react"

export default function SupportPage() {
  const [selectedSection, setSelectedSection] = useState<string | null>(null)

const supportSections = [
    {
      id: "admin-guide",
      title: "Admin Guide",
      description: "Complete instructions on how to use the admin panel",
      icon: BookOpen,
      href: "/admin/support/admin-guide",
      content: "Step-by-step guides for all admin features, dashboard overview, and best practices",
    },
    {
      id: "support-requests",
      title: "Support Requests",
      description: "Raise issues or request help from system administrators",
      icon: MessageSquare,
      href: "/admin/support/support-requests",
      content: "Submit new tickets, track existing requests, and communicate with support team",
    },
    {
      id: "system-help",
      title: "System Help",
      description: "FAQs and system-related help documentation",
      icon: HelpCircle,
      href: "/admin/support/system-help",
      content: "Frequently asked questions, troubleshooting guides, and system requirements",
    },
  ]

return (
    <div className="p-4 sm:p-6">
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-gray-900">Support & Help Center</h1>
        <p className="text-gray-600 mt-2">Get assistance and learn how to use the admin panel</p>
      </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {supportSections.map((section) => {
          const IconComponent = section.icon
          return (
            <Link key={section.id} href={section.href} className="group">
              <div className="bg-white rounded-lg border border-gray-200 p-6 hover:shadow-lg hover:border-[#CE1126] transition-all h-full flex flex-col">
                <div className="flex items-center justify-between mb-4">
                  <IconComponent className="w-10 h-10 text-[#CE1126]" />
                  <ArrowRight className="w-5 h-5 text-gray-400 group-hover:text-[#CE1126] transition-colors" />
                </div>
                <h3 className="text-xl font-bold text-gray-900 mb-2">{section.title}</h3>
                <p className="text-gray-600 text-sm mb-3 flex-grow">{section.description}</p>
                <p className="text-xs text-gray-500">{section.content}</p>
              </div>
            </Link>
          )
        })}
      </div>

<div className="mt-12 bg-gradient-to-r from-[#003087] to-blue-700 rounded-lg p-8 text-white">
        <h2 className="text-2xl font-bold mb-3">Need Immediate Help?</h2>
        <p className="mb-4">If you can't find what you're looking for, please reach out to our support team.</p>
        <div className="flex flex-wrap gap-4">
          <Link
            href="/admin/support/support-requests"
            className="px-6 py-2 bg-white text-[#003087] rounded-lg font-semibold hover:bg-gray-100 transition-colors w-auto"
          >
            Create Support Request
          </Link>
          <a
            href="mailto:support@mcc.org"
            className="px-6 py-2 border-2 border-white text-white rounded-lg font-semibold hover:bg-white hover:text-[#003087] transition-colors w-auto"
          >
            Email Support
          </a>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/support/admin-guide/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { ChevronDown, ChevronUp, ArrowLeft } from "lucide-react"
import Link from "next/link"

export default function AdminGuidePage() {
  const [expandedSection, setExpandedSection] = useState<string | null>(null)

const guideContent = [
    {
      id: "dashboard",
      title: "Dashboard Overview",
      content:
        "The dashboard provides a quick overview of key metrics and statistics. View recent activities, pending items, and quick access to important modules.",
      subsections: ["Key metrics and statistics cards", "Recent activity timeline", "Quick action shortcuts"],
    },
    {
      id: "page-management",
      title: "Page Management",
      content:
        "Create, edit, and manage website pages. Organize page content into sections like banners, content blocks, and image galleries.",
      subsections: [
        "Creating new pages",
        "Editing existing pages",
        "Managing page sections",
        "Publishing and unpublishing pages",
      ],
    },
    {
      id: "menu-management",
      title: "Menu Management",
      content:
        "Control website navigation menus including header, footer, and quick navigation links. Reorder menu items to customize navigation structure.",
      subsections: ["Header menu configuration", "Footer menu setup", "Quick navigation links", "Menu item reordering"],
    },
    {
      id: "banner-slider",
      title: "Banner & Slider Management",
      content: "Manage homepage banners and image sliders. Upload images, set display order, and control visibility.",
      subsections: [
        "Creating banners",
        "Uploading banner images",
        "Setting display order",
        "Enabling/disabling banners",
      ],
    },
    {
      id: "user-management",
      title: "User & Role Management",
      content:
        "Manage admin users, assign roles, and control permissions. Create different user levels with specific access rights.",
      subsections: ["Creating admin users", "Assigning roles", "Managing permissions", "User activity tracking"],
    },
    {
      id: "settings",
      title: "Settings Configuration",
      content: "Configure general website settings, contact information, social media links, and system preferences.",
      subsections: [
        "Website name and logo",
        "Contact information",
        "Social media links",
        "Footer content",
        "System preferences",
      ],
    },
    {
      id: "audit-logs",
      title: "Audit & Logs",
      content: "Track all admin activities, login history, and data changes for security and transparency.",
      subsections: ["Admin activity logs", "Login history", "Data change tracking", "Exporting logs"],
    },
  ]

const toggleSection = (id: string) => {
    setExpandedSection(expandedSection === id ? null : id)
  }

return (
    <div className="p-4 sm:p-6">
      <Link
        href="/admin/support"
        className="inline-flex items-center gap-2 text-[#CE1126] hover:text-red-700 font-medium mb-6 transition-colors"
      >
        <ArrowLeft className="w-5 h-5" />
        Back to Support
      </Link>

<div className="mb-6">
        <h1 className="text-3xl font-bold text-gray-900">Admin Panel Guide</h1>
        <p className="text-gray-600 mt-2">Complete instructions on how to use all admin panel features</p>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
        <div className="lg:col-span-3">
          <div className="space-y-4">
            {guideContent.map((section) => (
              <div key={section.id} className="bg-white rounded-lg border border-gray-200 overflow-hidden">
                <button
                  onClick={() => toggleSection(section.id)}
                  className="w-full px-6 py-4 flex items-center justify-between hover:bg-gray-50 transition-colors"
                >
                  <h3 className="text-lg font-semibold text-gray-900">{section.title}</h3>
                  {expandedSection === section.id ? (
                    <ChevronUp className="w-5 h-5 text-[#CE1126]" />
                  ) : (
                    <ChevronDown className="w-5 h-5 text-gray-400" />
                  )}
                </button>

{expandedSection === section.id && (
                  <div className="px-6 py-4 border-t border-gray-200 bg-gray-50">
                    <p className="text-gray-700 mb-4">{section.content}</p>
                    <div>
                      <h4 className="text-sm font-semibold text-gray-900 mb-3">Key Points:</h4>
                      <ul className="space-y-2">
                        {section.subsections.map((subsection, index) => (
                          <li key={index} className="flex items-start text-sm text-gray-600">
                            <span className="text-[#CE1126] font-bold mr-3">•</span>
                            <span>{subsection}</span>
                          </li>
                        ))}
                      </ul>
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>

<div className="lg:col-span-1">
          <div className="bg-white rounded-lg border border-gray-200 p-6 sticky top-6">
            <h3 className="text-lg font-bold text-gray-900 mb-4">Quick Links</h3>
            <div className="space-y-3">
              {guideContent.map((section) => (
                <button
                  key={section.id}
                  onClick={() => toggleSection(section.id)}
                  className="block w-full text-left text-sm text-[#CE1126] hover:text-[#003087] font-medium transition-colors"
                >
                  {section.title}
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/support/system-help/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/support/admin-guide/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/support/support-requests/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/support/page/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/support/system-help/page.tsx" isMerged="true"
import { Suspense } from "react"
import SystemHelpClient from "./client"

export default function SystemHelpPage() {
  return (
    <Suspense fallback={null}>
      <SystemHelpClient />
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="app/admin/audit-logs/activity/[id]/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ChevronLeft, Trash2, Edit } from "lucide-react"
import Link from "next/link"

interface ActivityLogDetail {
  id: string
  adminName: string
  adminEmail: string
  action: string
  module: string
  description: string
  timestamp: string
  ipAddress: string
  userAgent: string
  status: "success" | "failed"
  details: {
    recordId: string
    recordName: string
    affectedFields: string[]
  }
}

export default function ActivityDetailPage({ params }: { params: { id: string } }) {
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)

// Mock data - replace with actual data fetching
  const log: ActivityLogDetail = {
    id: params.id,
    adminName: "John Admin",
    adminEmail: "john@example.com",
    action: "Create",
    module: "Pages",
    description: "Created new page 'About Us'",
    timestamp: "2025-01-08 10:45:23",
    ipAddress: "192.168.1.100",
    userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36",
    status: "success",
    details: {
      recordId: "PAGE-001",
      recordName: "About Us Page",
      affectedFields: ["Title", "Slug", "Content", "Author", "Status"],
    },
  }

const getActionColor = (action: string) => {
    switch (action) {
      case "Create":
        return "bg-green-100 text-green-800"
      case "Update":
        return "bg-blue-100 text-blue-800"
      case "Delete":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between gap-4">
        <div className="flex items-center gap-3">
          <Link href="/admin/audit-logs/activity">
            <Button variant="ghost" size="sm" className="w-auto">
              <ChevronLeft className="w-4 h-4" />
            </Button>
          </Link>
          <div>
            <h1 className="text-3xl font-bold text-gray-900">Activity Details</h1>
            <p className="text-gray-600 mt-1">View complete activity log information</p>
          </div>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" className="w-auto gap-2 bg-transparent">
            <Edit className="w-4 h-4" />
            Edit Note
          </Button>
          <Button
            variant="outline"
            className="w-auto gap-2 text-red-600 hover:text-red-700 bg-transparent"
            onClick={() => setShowDeleteConfirm(true)}
          >
            <Trash2 className="w-4 h-4" />
            Delete
          </Button>
        </div>
      </div>

{/* Main Details */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2 space-y-6">
          {/* Activity Summary */}
          <Card>
            <CardHeader>
              <CardTitle>Activity Summary</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <p className="text-sm text-gray-600 font-medium mb-1">Action</p>
                  <span className={`px-3 py-1 rounded-full text-xs font-semibold ${getActionColor(log.action)}`}>
                    {log.action}
                  </span>
                </div>
                <div>
                  <p className="text-sm text-gray-600 font-medium mb-1">Module</p>
                  <p className="text-gray-900 font-semibold">{log.module}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-600 font-medium mb-1">Status</p>
                  <p className={`font-semibold ${log.status === "success" ? "text-green-600" : "text-red-600"}`}>
                    {log.status === "success" ? "✓ Success" : "✗ Failed"}
                  </p>
                </div>
                <div>
                  <p className="text-sm text-gray-600 font-medium mb-1">Timestamp</p>
                  <p className="text-gray-900">{log.timestamp}</p>
                </div>
              </div>
              <div>
                <p className="text-sm text-gray-600 font-medium mb-2">Description</p>
                <p className="text-gray-900 bg-gray-50 p-3 rounded">{log.description}</p>
              </div>
            </CardContent>
          </Card>

{/* Admin Information */}
          <Card>
            <CardHeader>
              <CardTitle>Admin Information</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <p className="text-sm text-gray-600 font-medium mb-1">Admin Name</p>
                  <p className="text-gray-900 font-semibold">{log.adminName}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-600 font-medium mb-1">Email</p>
                  <p className="text-gray-900">{log.adminEmail}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-600 font-medium mb-1">IP Address</p>
                  <p className="text-gray-900 font-mono">{log.ipAddress}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-600 font-medium mb-1">Device/Browser</p>
                  <p className="text-gray-900 text-sm">{log.userAgent.substring(0, 50)}...</p>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Affected Fields */}
          <Card>
            <CardHeader>
              <CardTitle>Affected Fields</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex flex-wrap gap-2">
                {log.details.affectedFields.map((field) => (
                  <span key={field} className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium">
                    {field}
                  </span>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>

{/* Sidebar */}
        <div className="space-y-6">
          {/* Record Information */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Record Details</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              <div>
                <p className="text-xs text-gray-600 font-medium uppercase mb-1">Record ID</p>
                <p className="text-gray-900 font-mono text-sm">{log.details.recordId}</p>
              </div>
              <div>
                <p className="text-xs text-gray-600 font-medium uppercase mb-1">Record Name</p>
                <p className="text-gray-900">{log.details.recordName}</p>
              </div>
              <div className="pt-2 border-t">
                <p className="text-xs text-gray-600 font-medium uppercase mb-2">Quick Actions</p>
                <div className="space-y-2">
                  <Button variant="outline" className="w-full text-sm h-9 bg-transparent">
                    View Record
                  </Button>
                  <Button variant="outline" className="w-full text-sm h-9 bg-transparent">
                    Related Changes
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>

{/* Delete Confirmation Modal */}
      {showDeleteConfirm && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
          <Card className="max-w-sm">
            <CardHeader>
              <CardTitle>Delete Activity Log?</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <p className="text-gray-600">
                Are you sure you want to delete this activity log? This action cannot be undone.
              </p>
              <div className="flex gap-3">
                <Button variant="outline" className="flex-1 bg-transparent" onClick={() => setShowDeleteConfirm(false)}>
                  Cancel
                </Button>
                <Button className="flex-1 bg-red-600 hover:bg-red-700 text-white">Delete</Button>
              </div>
            </CardContent>
          </Card>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/audit-logs/activity/[id]/layout.tsx" isMerged="true"
import type { ReactNode } from "react"

export default function Layout({ children }: { children: ReactNode }) {
  return <>{children}</>
}
[V0_FILE]typescriptreact:file="app/admin/audit-logs/login/[id]/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ChevronLeft, Trash2, Shield } from "lucide-react"
import Link from "next/link"

interface LoginSessionDetail {
  id: string
  adminName: string
  email: string
  loginTime: string
  logoutTime: string | null
  ipAddress: string
  device: string
  browser: string
  location: string
  country: string
  isp: string
  status: "active" | "logged_out"
  sessionToken: string
  riskLevel: "low" | "medium" | "high"
}

export default function LoginDetailPage({ params }: { params: { id: string } }) {
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
  const [showTerminateConfirm, setShowTerminateConfirm] = useState(false)

// Mock data - replace with actual data fetching
  const session: LoginSessionDetail = {
    id: params.id,
    adminName: "John Admin",
    email: "john@example.com",
    loginTime: "2025-01-08 10:15:30",
    logoutTime: "2025-01-08 17:45:20",
    ipAddress: "192.168.1.100",
    device: "Windows Desktop",
    browser: "Chrome 120",
    location: "New York, USA",
    country: "United States",
    isp: "Verizon Communications",
    status: "logged_out",
    sessionToken: "sess_1234567890abcdef",
    riskLevel: "low",
  }

const getDurationInHours = (loginTime: string, logoutTime: string | null) => {
    if (!logoutTime) return "Active"
    const login = new Date(loginTime)
    const logout = new Date(logoutTime)
    const hours = (logout.getTime() - login.getTime()) / (1000 * 60 * 60)
    return `${hours.toFixed(1)} hours`
  }

const getRiskColor = (level: string) => {
    switch (level) {
      case "low":
        return "bg-green-100 text-green-800"
      case "medium":
        return "bg-yellow-100 text-yellow-800"
      case "high":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const getStatusColor = (status: string) => {
    return status === "active" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between gap-4">
        <div className="flex items-center gap-3">
          <Link href="/admin/audit-logs/login">
            <Button variant="ghost" size="sm" className="w-auto">
              <ChevronLeft className="w-4 h-4" />
            </Button>
          </Link>
          <div>
            <h1 className="text-3xl font-bold text-gray-900">Login Session Details</h1>
            <p className="text-gray-600 mt-1">View complete login session information</p>
          </div>
        </div>
        <div className="flex gap-2">
          {session.status === "active" && (
            <Button
              variant="outline"
              className="w-auto gap-2 text-orange-600 hover:text-orange-700 bg-transparent"
              onClick={() => setShowTerminateConfirm(true)}
            >
              <Shield className="w-4 h-4" />
              Terminate
            </Button>
          )}
          <Button
            variant="outline"
            className="w-auto gap-2 text-red-600 hover:text-red-700 bg-transparent"
            onClick={() => setShowDeleteConfirm(true)}
          >
            <Trash2 className="w-4 h-4" />
            Delete Log
          </Button>
        </div>
      </div>

{/* Main Details */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2 space-y-6">
          {/* Session Summary */}
          <Card>
            <CardHeader>
              <CardTitle>Session Summary</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <p className="text-sm text-gray-600 font-medium mb-1">Status</p>
                  <span className={`px-3 py-1 rounded-full text-xs font-semibold ${getStatusColor(session.status)}`}>
                    {session.status === "active" ? "Active" : "Logged Out"}
                  </span>
                </div>
                <div>
                  <p className="text-sm text-gray-600 font-medium mb-1">Risk Level</p>
                  <span className={`px-3 py-1 rounded-full text-xs font-semibold ${getRiskColor(session.riskLevel)}`}>
                    {session.riskLevel.charAt(0).toUpperCase() + session.riskLevel.slice(1)}
                  </span>
                </div>
                <div>
                  <p className="text-sm text-gray-600 font-medium mb-1">Login Time</p>
                  <p className="text-gray-900">{session.loginTime}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-600 font-medium mb-1">Logout Time</p>
                  <p className="text-gray-900">{session.logoutTime || "Still Active"}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-600 font-medium mb-1">Session Duration</p>
                  <p className="text-gray-900 font-semibold text-[#CE1126]">
                    {getDurationInHours(session.loginTime, session.logoutTime)}
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Device & Network Information */}
          <Card>
            <CardHeader>
              <CardTitle>Device & Network Information</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <p className="text-sm text-gray-600 font-medium mb-1">Device</p>
                  <p className="text-gray-900">{session.device}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-600 font-medium mb-1">Browser</p>
                  <p className="text-gray-900">{session.browser}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-600 font-medium mb-1">IP Address</p>
                  <p className="text-gray-900 font-mono">{session.ipAddress}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-600 font-medium mb-1">Location</p>
                  <p className="text-gray-900">{session.location}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-600 font-medium mb-1">Country</p>
                  <p className="text-gray-900">{session.country}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-600 font-medium mb-1">ISP</p>
                  <p className="text-gray-900">{session.isp}</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

{/* Sidebar */}
        <div className="space-y-6">
          {/* Session Information */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Session Information</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              <div>
                <p className="text-xs text-gray-600 font-medium uppercase mb-1">Session Token</p>
                <p className="text-gray-900 font-mono text-xs break-all">{session.sessionToken}</p>
              </div>
              <div className="pt-2 border-t">
                <p className="text-xs text-gray-600 font-medium uppercase mb-2">Quick Actions</p>
                <div className="space-y-2">
                  <Button variant="outline" className="w-full text-sm h-9 bg-transparent">
                    View Admin
                  </Button>
                  <Button variant="outline" className="w-full text-sm h-9 bg-transparent">
                    Related Sessions
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>

{/* Delete Confirmation Modal */}
      {showDeleteConfirm && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
          <Card className="max-w-sm">
            <CardHeader>
              <CardTitle>Delete Login Log?</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <p className="text-gray-600">
                Are you sure you want to delete this login log? This action cannot be undone.
              </p>
              <div className="flex gap-3">
                <Button variant="outline" className="flex-1 bg-transparent" onClick={() => setShowDeleteConfirm(false)}>
                  Cancel
                </Button>
                <Button className="flex-1 bg-red-600 hover:bg-red-700 text-white">Delete</Button>
              </div>
            </CardContent>
          </Card>
        </div>
      )}

{/* Terminate Session Modal */}
      {showTerminateConfirm && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
          <Card className="max-w-sm">
            <CardHeader>
              <CardTitle>Terminate Active Session?</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <p className="text-gray-600">This will immediately log out the user from this device.</p>
              <div className="flex gap-3">
                <Button
                  variant="outline"
                  className="flex-1 bg-transparent"
                  onClick={() => setShowTerminateConfirm(false)}
                >
                  Cancel
                </Button>
                <Button className="flex-1 bg-orange-600 hover:bg-orange-700 text-white">Terminate</Button>
              </div>
            </CardContent>
          </Card>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/audit-logs/login/[id]/layout.tsx" isMerged="true"
import type { ReactNode } from "react"

export default function Layout({ children }: { children: ReactNode }) {
  return <>{children}</>
}
[V0_FILE]typescriptreact:file="app/admin/audit-logs/data-changes/[id]/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ChevronLeft, Trash2 } from "lucide-react"
import Link from "next/link"

interface FieldChange {
  field: string
  oldValue: string
  newValue: string
  dataType: string
}

interface DataChangeDetail {
  id: string
  adminName: string
  module: string
  recordName: string
  recordId: string
  changeType: "create" | "update" | "delete"
  timestamp: string
  changes: FieldChange[]
  description: string
}

export default function DataChangeDetailPage({ params }: { params: { id: string } }) {
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)

// Mock data - replace with actual data fetching
  const log: DataChangeDetail = {
    id: params.id,
    adminName: "John Admin",
    module: "Pages",
    recordName: "About Us Page",
    recordId: "PAGE-001",
    changeType: "update",
    timestamp: "2025-01-08 10:45:23",
    description: "Updated page content and metadata",
    changes: [
      {
        field: "Title",
        oldValue: "About Our Organization",
        newValue: "About Us",
        dataType: "text",
      },
      {
        field: "Slug",
        oldValue: "about-our-organization",
        newValue: "about-us",
        dataType: "text",
      },
      {
        field: "Content",
        oldValue: "<p>Old content...</p>",
        newValue: "<p>Updated content with new information...</p>",
        dataType: "html",
      },
      {
        field: "Status",
        oldValue: "Draft",
        newValue: "Published",
        dataType: "select",
      },
      {
        field: "Published Date",
        oldValue: "2025-01-01",
        newValue: "2025-01-08",
        dataType: "date",
      },
    ],
  }

const getChangeTypeColor = (changeType: string) => {
    switch (changeType) {
      case "create":
        return "bg-green-100 text-green-800"
      case "update":
        return "bg-blue-100 text-blue-800"
      case "delete":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

{/* Main Details */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2 space-y-6">
          {/* Change Summary */}
          <Card>
            <CardHeader>
              <CardTitle>Change Summary</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <p className="text-sm text-gray-600 font-medium mb-1">Change Type</p>
                  <span
                    className={`px-3 py-1 rounded-full text-xs font-semibold ${getChangeTypeColor(log.changeType)}`}
                  >
                    {log.changeType.charAt(0).toUpperCase() + log.changeType.slice(1)}
                  </span>
                </div>
                <div>
                  <p className="text-sm text-gray-600 font-medium mb-1">Module</p>
                  <p className="text-gray-900 font-semibold">{log.module}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-600 font-medium mb-1">Record Name</p>
                  <p className="text-gray-900">{log.recordName}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-600 font-medium mb-1">Timestamp</p>
                  <p className="text-gray-900">{log.timestamp}</p>
                </div>
              </div>
              <div>
                <p className="text-sm text-gray-600 font-medium mb-2">Description</p>
                <p className="text-gray-900 bg-gray-50 p-3 rounded">{log.description}</p>
              </div>
            </CardContent>
          </Card>

{/* Admin Information */}
          <Card>
            <CardHeader>
              <CardTitle>Admin Information</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-gray-600 font-medium mb-1">Modified By</p>
              <p className="text-gray-900 font-semibold">{log.adminName}</p>
            </CardContent>
          </Card>

{/* Field Changes */}
          <div className="space-y-4">
            <h2 className="text-xl font-bold text-gray-900">Field Changes</h2>
            {log.changes.map((change, idx) => (
              <Card key={idx} className="border-l-4 border-l-[#CE1126]">
                <CardContent className="pt-6">
                  <div className="mb-4">
                    <div className="flex items-center gap-2 mb-2">
                      <h3 className="font-bold text-gray-900">{change.field}</h3>
                      <span className="text-xs bg-gray-200 text-gray-700 px-2 py-1 rounded">{change.dataType}</span>
                    </div>
                  </div>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <p className="text-xs text-gray-600 font-medium uppercase mb-2">Before</p>
                      <div className="bg-red-50 border border-red-200 rounded p-3 font-mono text-sm text-red-900 break-all">
                        {change.oldValue || "(empty)"}
                      </div>
                    </div>
                    <div>
                      <p className="text-xs text-gray-600 font-medium uppercase mb-2">After</p>
                      <div className="bg-green-50 border border-green-200 rounded p-3 font-mono text-sm text-green-900 break-all">
                        {change.newValue || "(empty)"}
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>

{/* Sidebar */}
        <div className="space-y-6">
          {/* Record Information */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Record Details</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              <div>
                <p className="text-xs text-gray-600 font-medium uppercase mb-1">Record ID</p>
                <p className="text-gray-900 font-mono text-sm">{log.recordId}</p>
              </div>
              <div>
                <p className="text-xs text-gray-600 font-medium uppercase mb-1">Module</p>
                <p className="text-gray-900">{log.module}</p>
              </div>
              <div>
                <p className="text-xs text-gray-600 font-medium uppercase mb-1">Total Changes</p>
                <p className="text-2xl font-bold text-[#CE1126]">{log.changes.length}</p>
              </div>
              <div className="pt-2 border-t">
                <p className="text-xs text-gray-600 font-medium uppercase mb-2">Quick Actions</p>
                <div className="space-y-2">
                  <Button variant="outline" className="w-full text-sm h-9 bg-transparent">
                    View Record
                  </Button>
                  <Button variant="outline" className="w-full text-sm h-9 bg-transparent">
                    Change History
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>

{/* Delete Confirmation Modal */}
      {showDeleteConfirm && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
          <Card className="max-w-sm">
            <CardHeader>
              <CardTitle>Delete Change Log?</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <p className="text-gray-600">
                Are you sure you want to delete this change log? This action cannot be undone.
              </p>
              <div className="flex gap-3">
                <Button variant="outline" className="flex-1 bg-transparent" onClick={() => setShowDeleteConfirm(false)}>
                  Cancel
                </Button>
                <Button className="flex-1 bg-red-600 hover:bg-red-700 text-white">Delete</Button>
              </div>
            </CardContent>
          </Card>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/audit-logs/data-changes/[id]/layout.tsx" isMerged="true"
import type { ReactNode } from "react"

export default function Layout({ children }: { children: ReactNode }) {
  return <>{children}</>
}
[V0_FILE]typescriptreact:file="app/admin/support/support-requests/[id]/layout.tsx" isMerged="true"
import type React from "react"
import { Suspense } from "react"

export default function SupportRequestLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <Suspense fallback={<div className="p-4 sm:p-6">Loading...</div>}>{children}</Suspense>
}
[V0_FILE]typescriptreact:file="app/admin/support/support-requests/add/layout.tsx" isMerged="true"
import type React from "react"
import { Suspense } from "react"

export default function AddSupportRequestLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <Suspense fallback={<div className="p-4 sm:p-6">Loading...</div>}>{children}</Suspense>
}
[V0_FILE]typescript:file="lib/pagination.ts" isMerged="true"
export interface PaginationState {
  currentPage: number
  itemsPerPage: number
  totalItems: number
}

export const calculatePagination = (items: any[], currentPage: number, itemsPerPage: number) => {
  const totalItems = items.length
  const totalPages = Math.ceil(totalItems / itemsPerPage)
  const startIndex = (currentPage - 1) * itemsPerPage
  const endIndex = startIndex + itemsPerPage
  const paginatedItems = items.slice(startIndex, endIndex)

return {
    paginatedItems,
    totalPages,
    totalItems,
    startIndex,
    endIndex,
    currentPage,
  }
}

export const getPaginationRange = (currentPage: number, totalPages: number) => {
  const delta = 2
  const range = []
  const rangeWithDots = []
  let l

for (let i = 1; i <= totalPages; i++) {
    if (i == 1 || i == totalPages || (i >= currentPage - delta && i <= currentPage + delta)) {
      range.push(i)
    }
  }

range.forEach((i) => {
    if (l) {
      if (i - l === 2) {
        rangeWithDots.push(l + 1)
      } else if (i - l !== 1) {
        rangeWithDots.push("...")
      }
    }
    rangeWithDots.push(i)
    l = i
  })

return rangeWithDots
}
[V0_FILE]typescriptreact:file="app/admin/pages/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/menus/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/banners/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/committees/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/menus/layout.tsx" isMerged="true"
import type React from "react"
import { Suspense } from "react"

export default function MenusLayout({ children }: { children: React.ReactNode }) {
  return <Suspense fallback={null}>{children}</Suspense>
}
[V0_FILE]typescriptreact:file="app/admin/banners/layout.tsx" isMerged="true"
import type React from "react"
import { Suspense } from "react"

export default function BannersLayout({ children }: { children: React.ReactNode }) {
  return <Suspense fallback={null}>{children}</Suspense>
}
[V0_FILE]typescriptreact:file="app/admin/committees/layout.tsx" isMerged="true"
import type React from "react"
import { Suspense } from "react"

export default function CommitteesLayout({ children }: { children: React.ReactNode }) {
  return <Suspense fallback={null}>{children}</Suspense>
}
[V0_FILE]typescriptreact:file="app/admin/menus/page.tsx" isMerged="true"
import { Suspense } from "react"
import MenusClient from "./client"

export default function MenusPage() {
  return (
    <Suspense fallback={null}>
      <MenusClient />
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="app/admin/menus/client.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Plus, GripVertical, Search, ChevronLeft, ChevronRight } from "lucide-react"

interface MenuItem {
  id: number
  label: string
  url: string
  order: number
}

interface Menu {
  id: number
  type: "Header" | "Footer" | "Quick Navigation"
  name: string
  items: MenuItem[]
  description: string
  status: "Active" | "Inactive"
  lastModified: string
}

export default function MenusClient() {
  const [menus, setMenus] = useState<Menu[]>([
    {
      id: 1,
      type: "Header",
      name: "Header Menu",
      description: "Main menu shown at the top of the website",
      status: "Active",
      lastModified: "2024-01-25",
      items: [
        { id: 1, label: "Home", url: "/", order: 1 },
        { id: 2, label: "About", url: "/about", order: 2 },
        { id: 3, label: "Services", url: "/services", order: 3 },
        { id: 4, label: "Contact", url: "/contact", order: 4 },
      ],
    },
    {
      id: 2,
      type: "Footer",
      name: "Footer Menu",
      description: "Menu links shown at the bottom of the website",
      status: "Active",
      lastModified: "2024-01-24",
      items: [
        { id: 5, label: "Privacy Policy", url: "/privacy", order: 1 },
        { id: 6, label: "Terms & Conditions", url: "/terms", order: 2 },
        { id: 7, label: "Sitemap", url: "/sitemap", order: 3 },
        { id: 8, label: "RSS Feed", url: "/feed", order: 4 },
      ],
    },
    {
      id: 3,
      type: "Quick Navigation",
      name: "Quick Navigation",
      description: "Shortcut links for important pages",
      status: "Active",
      lastModified: "2024-01-23",
      items: [
        { id: 9, label: "Join Us", url: "/membership", order: 1 },
        { id: 10, label: "Donate", url: "/donate", order: 2 },
        { id: 11, label: "Events", url: "/events", order: 3 },
      ],
    },
  ])

const [searchTerm, setSearchTerm] = useState("")
  const [typeFilter, setTypeFilter] = useState<"All" | "Header" | "Footer" | "Quick Navigation">("All")
  const [statusFilter, setStatusFilter] = useState<"All" | "Active" | "Inactive">("All")
  const [currentPage, setCurrentPage] = useState(1)
  const [pageSize, setPageSize] = useState(10)

const filteredMenus = menus.filter((menu) => {
    const matchesSearch = menu.name.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesType = typeFilter === "All" || menu.type === typeFilter
    const matchesStatus = statusFilter === "All" || menu.status === statusFilter
    return matchesSearch && matchesType && matchesStatus
  })

const totalPages = Math.ceil(filteredMenus.length / pageSize)
  const startIndex = (currentPage - 1) * pageSize
  const paginatedMenus = filteredMenus.slice(startIndex, startIndex + pageSize)

const handleDelete = (id: number) => {
    if (confirm("Are you sure you want to delete this menu? This action cannot be undone.")) {
      setMenus(menus.filter((m) => m.id !== id))
    }
  }

const toggleStatus = (id: number) => {
    setMenus(menus.map((m) => (m.id === id ? { ...m, status: m.status === "Active" ? "Inactive" : "Active" } : m)))
  }

{/* Statistics Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div className="bg-white rounded-lg border border-gray-200 p-4">
          <p className="text-sm text-gray-600">Total Menus</p>
          <p className="text-2xl font-bold text-gray-900 mt-1">{menus.length}</p>
        </div>
        <div className="bg-white rounded-lg border border-gray-200 p-4">
          <p className="text-sm text-gray-600">Active Menus</p>
          <p className="text-2xl font-bold text-green-600 mt-1">{menus.filter((m) => m.status === "Active").length}</p>
        </div>
      </div>

<div className="flex flex-col sm:flex-row gap-4">
        <div className="flex-1 relative">
          <Search className="absolute left-3 top-3 w-5 h-5 text-gray-400" />
          <input
            type="text"
            placeholder="Search menus..."
            value={searchTerm}
            onChange={(e) => {
              setSearchTerm(e.target.value)
              setCurrentPage(1)
            }}
            className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
          />
        </div>
        <select
          value={typeFilter}
          onChange={(e) => {
            setTypeFilter(e.target.value as "All" | "Header" | "Footer" | "Quick Navigation")
            setCurrentPage(1)
          }}
          className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
        >
          <option value="All">All Types</option>
          <option value="Header">Header</option>
          <option value="Footer">Footer</option>
          <option value="Quick Navigation">Quick Navigation</option>
        </select>
        <select
          value={statusFilter}
          onChange={(e) => {
            setStatusFilter(e.target.value as "All" | "Active" | "Inactive")
            setCurrentPage(1)
          }}
          className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
        >
          <option value="All">All Status</option>
          <option value="Active">Active</option>
          <option value="Inactive">Inactive</option>
        </select>
      </div>

{/* Menus Grid */}
      <div className="grid grid-cols-1 gap-4">
        {paginatedMenus.length === 0 ? (
          <div className="bg-white rounded-lg border border-gray-200 p-8 text-center">
            <p className="text-gray-500">No menus found.</p>
          </div>
        ) : (
          paginatedMenus.map((menu) => (
            <div key={menu.id} className="bg-white rounded-lg border border-gray-200 overflow-hidden">
              {/* Menu Header */}
              <div className="p-4 sm:p-6 border-b border-gray-200">
                <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
                  <div className="flex-1">
                    <div className="flex items-center gap-3">
                      <h2 className="text-xl font-bold text-gray-900">{menu.name}</h2>
                      <span
                        className={`inline-block px-3 py-1 rounded-full text-xs font-medium ${
                          menu.status === "Active" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
                        }`}
                      >
                        {menu.status}
                      </span>
                    </div>
                    <p className="text-sm text-gray-600 mt-1">{menu.description}</p>
                    <p className="text-xs text-gray-500 mt-2">Last modified: {menu.lastModified}</p>
                  </div>
                  <div className="flex gap-2">
                    <button
                      onClick={() => toggleStatus(menu.id)}
                      className="px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium text-gray-700 w-auto"
                    >
                      {menu.status === "Active" ? "Deactivate" : "Activate"}
                    </button>
                    <Link href={`/admin/menus/${menu.id}/edit`}>
                      <button className="px-3 py-2 bg-[#003087] text-white rounded-lg hover:bg-blue-800 transition-colors text-sm font-medium whitespace-nowrap">
                        Edit Menu
                      </button>
                    </Link>
                  </div>
                </div>
              </div>

{/* Menu Items */}
              <div className="p-4 sm:p-6">
                <h3 className="text-sm font-semibold text-gray-700 mb-3">Menu Items ({menu.items.length})</h3>
                <div className="space-y-2">
                  {menu.items.length === 0 ? (
                    <p className="text-sm text-gray-500 py-4">No items in this menu.</p>
                  ) : (
                    menu.items.map((item) => (
                      <div
                        key={item.id}
                        className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
                      >
                        <GripVertical className="w-4 h-4 text-gray-400 flex-shrink-0" />
                        <div className="flex-1">
                          <p className="text-sm font-medium text-gray-900">{item.label}</p>
                          <p className="text-xs text-gray-600">{item.url}</p>
                        </div>
                        <span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">Order: {item.order}</span>
                      </div>
                    ))
                  )}
                </div>
                <div className="mt-4 flex gap-2">
                  <Link href={`/admin/menus/${menu.id}/add-item`}>
                    <button className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-[#CE1126] hover:bg-red-50 rounded-lg transition-colors whitespace-nowrap w-auto">
                      <Plus className="w-4 h-4" />
                      Add Item
                    </button>
                  </Link>
                  <Link href={`/admin/menus/${menu.id}/reorder`}>
                    <button className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-[#003087] hover:bg-blue-50 rounded-lg transition-colors whitespace-nowrap w-auto">
                      <GripVertical className="w-4 h-4" />
                      Reorder Items
                    </button>
                  </Link>
                </div>
              </div>
            </div>
          ))
        )}
      </div>

{totalPages > 1 && (
        <div className="px-4 py-4 border-t border-gray-200 flex flex-col sm:flex-row items-center justify-between gap-4 bg-white rounded-lg border border-gray-200">
          <div className="text-sm text-gray-600">
            Showing {filteredMenus.length === 0 ? 0 : startIndex + 1} to{" "}
            {Math.min(startIndex + pageSize, filteredMenus.length)} of {filteredMenus.length} menus
          </div>
          <div className="flex items-center gap-4">
            <select
              value={pageSize}
              onChange={(e) => {
                setPageSize(Number(e.target.value))
                setCurrentPage(1)
              }}
              className="px-3 py-1 border border-gray-300 rounded text-sm"
            >
              <option value={10}>10 per page</option>
              <option value={25}>25 per page</option>
              <option value={50}>50 per page</option>
            </select>
            <div className="flex gap-2">
              <button
                onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
                disabled={currentPage === 1}
                className="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                <ChevronLeft className="w-4 h-4" />
              </button>
              <div className="flex items-center gap-1">
                {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => i + 1).map((page) => (
                  <button
                    key={page}
                    onClick={() => setCurrentPage(page)}
                    className={`w-8 h-8 rounded-lg text-sm font-medium transition-colors ${
                      currentPage === page ? "bg-[#CE1126] text-white" : "border border-gray-300 hover:bg-gray-50"
                    }`}
                  >
                    {page}
                  </button>
                ))}
              </div>
              <button
                onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
                disabled={currentPage === totalPages}
                className="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                <ChevronRight className="w-4 h-4" />
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/banners/page.tsx" isMerged="true"
import { Suspense } from "react"
import BannersClient from "./client"

export default function BannersPage() {
  return (
    <Suspense fallback={null}>
      <BannersClient />
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="app/admin/committees/page.tsx" isMerged="true"
import { Suspense } from "react"
import CommitteesClient from "./client"

export default function CommitteesPage() {
  return (
    <Suspense fallback={null}>
      <CommitteesClient />
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="app/admin/memberships/pending-applications/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/public-page/documents/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/contact/info/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/memberships/pending-applications/layout.tsx" isMerged="true"
import type React from "react"
import { Suspense } from "react"

export default function PendingApplicationsLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <Suspense fallback={null}>{children}</Suspense>
}
[V0_FILE]typescriptreact:file="app/admin/public-page/documents/layout.tsx" isMerged="true"
import type React from "react"
import { Suspense } from "react"

export default function DocumentsLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <Suspense fallback={null}>{children}</Suspense>
}
[V0_FILE]typescriptreact:file="app/admin/contact/info/layout.tsx" isMerged="true"
import type React from "react"
import { Suspense } from "react"

export default function ContactInfoLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <Suspense fallback={null}>{children}</Suspense>
}
[V0_FILE]typescriptreact:file="app/admin/memberships/pending-applications/page.tsx" isMerged="true"
import { Suspense } from "react"
import PendingApplicationsClient from "./client"

export default function PendingApplicationsPage() {
  return (
    <Suspense fallback={null}>
      <PendingApplicationsClient />
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="app/admin/public-page/documents/page.tsx" isMerged="true"
import { Suspense } from "react"
import DocumentsClient from "./client"

export default function DocumentsPage() {
  return (
    <Suspense fallback={null}>
      <DocumentsClient />
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="app/admin/public-page/documents/client.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Plus, Edit2, Trash2, Eye, FileText, ArrowLeft, Search } from "lucide-react"

interface Document {
  id: number
  title: string
  category: string
  description: string
  fileName: string
  fileSize: string
  status: "Active" | "Inactive"
  order: number
}

export default function DocumentsClient() {
  const [currentPage, setCurrentPage] = useState(1)
  const [itemsPerPage, setItemsPerPage] = useState(10)
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedStatus, setSelectedStatus] = useState("all")

const [documents, setDocuments] = useState<Document[]>([
    {
      id: 1,
      title: "Annual Reports",
      category: "Reports",
      description: "Party annual performance reports, Financial reports, Activity summaries",
      fileName: "MCC_Document.pdf",
      fileSize: "0.01 MB",
      status: "Active",
      order: 3,
    },
    {
      id: 2,
      title: "Party Constitution/Charter",
      category: "Constitution",
      description: "Official constitution document (PDF), Vision, mission, core values, Code of conduct",
      fileName: "MCC_Document.pdf",
      fileSize: "0.01 MB",
      status: "Active",
      order: 1,
    },
    {
      id: 3,
      title: "Policy Documents",
      category: "Policies",
      description: "These are campaign related documents, Economic policy overview, Education policy",
      fileName: "MCC_Document.pdf",
      fileSize: "0.01 MB",
      status: "Active",
      order: 2,
    },
  ])

const filteredDocs = documents.filter((doc) => {
    const matchSearch =
      doc.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      doc.category.toLowerCase().includes(searchQuery.toLowerCase())
    const matchStatus = selectedStatus === "all" || doc.status === selectedStatus
    return matchSearch && matchStatus
  })

const sortedDocs = [...filteredDocs].sort((a, b) => a.order - b.order)

const totalPages = Math.ceil(sortedDocs.length / itemsPerPage)
  const startIndex = (currentPage - 1) * itemsPerPage
  const paginatedDocs = sortedDocs.slice(startIndex, startIndex + itemsPerPage)

const handleDelete = (id: number) => {
    if (confirm("Are you sure you want to delete this document?")) {
      setDocuments(documents.filter((d) => d.id !== id))
    }
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      <div className="flex items-center gap-3">
        <Link href="/admin/public-page">
          <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors">
            <ArrowLeft className="w-5 h-5 text-gray-600" />
          </button>
        </Link>
        <div className="flex-1">
          <h1 className="text-3xl font-bold text-gray-900">Documents & Literature</h1>
          <p className="text-gray-600 mt-2">Manage official documents and resources</p>
        </div>
        <Link href="/admin/public-page/documents/add">
          <button className="flex items-center gap-2 bg-[#CE1126] text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors font-medium whitespace-nowrap w-auto">
            <Plus className="w-5 h-5" />
            Add Document
          </button>
        </Link>
      </div>

<div className="space-y-4">
        <div className="flex items-center gap-2 bg-white p-3 rounded-lg border border-gray-200">
          <Search className="w-5 h-5 text-gray-400" />
          <input
            type="text"
            placeholder="Search by title or category..."
            value={searchQuery}
            onChange={(e) => {
              setSearchQuery(e.target.value)
              setCurrentPage(1)
            }}
            className="flex-1 outline-none text-gray-900"
          />
        </div>

<div className="bg-white rounded-lg p-4 overflow-x-auto">
        <p className="text-sm text-gray-600 mb-4">Total Documents: {filteredDocs.length}</p>
        <table className="w-full">
          <thead>
            <tr className="border-b border-gray-200">
              <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">Title (Category)</th>
              <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">Description</th>
              <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">File</th>
              <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">Size</th>
              <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">Status</th>
              <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">Order</th>
              <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">Actions</th>
            </tr>
          </thead>
          <tbody>
            {paginatedDocs.map((doc) => (
              <tr key={doc.id} className="border-b border-gray-200 hover:bg-gray-50">
                <td className="py-4 px-4">
                  <div className="font-semibold text-gray-900">{doc.title}</div>
                  <div className="text-xs text-gray-500">{doc.category}</div>
                </td>
                <td className="py-4 px-4 text-sm text-gray-600 max-w-xs">{doc.description.substring(0, 50)}...</td>
                <td className="py-4 px-4 text-sm text-gray-600 flex items-center gap-2">
                  <FileText className="w-4 h-4" />
                  {doc.fileName}
                </td>
                <td className="py-4 px-4 text-sm text-gray-600">{doc.fileSize}</td>
                <td className="py-4 px-4">
                  <span
                    className={`inline-block px-3 py-1 rounded-full text-xs font-medium ${
                      doc.status === "Active" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
                    }`}
                  >
                    {doc.status}
                  </span>
                </td>
                <td className="py-4 px-4 text-sm text-gray-600">{doc.order}</td>
                <td className="py-4 px-4">
                  <div className="flex gap-2">
                    <Link href={`/admin/public-page/documents/view/${doc.id}`}>
                      <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors">
                        <Eye className="w-4 h-4 text-gray-600" />
                      </button>
                    </Link>
                    <Link href={`/admin/public-page/documents/edit/${doc.id}`}>
                      <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors">
                        <Edit2 className="w-4 h-4 text-gray-600" />
                      </button>
                    </Link>
                    <button
                      onClick={() => handleDelete(doc.id)}
                      className="p-2 hover:bg-red-50 rounded-lg transition-colors"
                    >
                      <Trash2 className="w-4 h-4 text-red-600" />
                    </button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

{paginatedDocs.length === 0 && (
        <div className="text-center py-12">
          <p className="text-gray-600">No documents found.</p>
        </div>
      )}

<div className="flex flex-col sm:flex-row items-center justify-between gap-4 pt-4 border-t border-gray-200">
        <div className="text-sm text-gray-600">
          Showing {startIndex + 1} to {Math.min(startIndex + itemsPerPage, sortedDocs.length)} of {sortedDocs.length}{" "}
          documents
        </div>
        <div className="flex items-center gap-2">
          <select
            value={itemsPerPage}
            onChange={(e) => {
              setItemsPerPage(Number(e.target.value))
              setCurrentPage(1)
            }}
            className="px-3 py-1 border border-gray-300 rounded-lg bg-white text-sm"
          >
            <option value="10">10 per page</option>
            <option value="25">25 per page</option>
            <option value="50">50 per page</option>
            <option value="100">100 per page</option>
          </select>
          <button
            onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
            disabled={currentPage === 1}
            className="px-3 py-1 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
          >
            Previous
          </button>
          <div className="flex items-center gap-1">
            {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
              <button
                key={page}
                onClick={() => setCurrentPage(page)}
                className={`px-3 py-1 rounded-lg text-sm ${
                  currentPage === page
                    ? "bg-[#CE1126] text-white font-medium"
                    : "border border-gray-300 hover:bg-gray-50"
                }`}
              >
                {page}
              </button>
            ))}
          </div>
          <button
            onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
            disabled={currentPage === totalPages}
            className="px-3 py-1 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
          >
            Next
          </button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/contact/info/page.tsx" isMerged="true"
import { Suspense } from "react"
import ContactInfoClient from "./client"

export default function ContactInformationPage() {
  return (
    <Suspense fallback={null}>
      <ContactInfoClient />
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="components/admin/pagination-controls.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { ChevronLeft, ChevronRight } from "lucide-react"

interface PaginationControlsProps {
  currentPage: number
  totalPages: number
  totalItems: number
  itemsPerPage: number
  onPageChange: (page: number) => void
  onItemsPerPageChange?: (count: number) => void
}

export function PaginationControls({
  currentPage,
  totalPages,
  totalItems,
  itemsPerPage,
  onPageChange,
  onItemsPerPageChange,
}: PaginationControlsProps) {
  const startItem = (currentPage - 1) * itemsPerPage + 1
  const endItem = Math.min(currentPage * itemsPerPage, totalItems)

return (
    <div className="flex flex-col sm:flex-row items-center justify-between gap-4 p-4 border-t border-gray-800 bg-gray-50">
      <div className="text-sm text-gray-700 font-medium">
        Showing <span className="font-semibold text-gray-900">{startItem}</span> to{" "}
        <span className="font-semibold text-gray-900">{endItem}</span> of{" "}
        <span className="font-semibold text-gray-900">{totalItems}</span> results
      </div>

<div className="flex items-center gap-2">
        <Button
          variant="outline"
          size="sm"
          onClick={() => onPageChange(currentPage - 1)}
          disabled={currentPage === 1}
          className="w-auto gap-2 border-gray-800 text-gray-900 hover:bg-gray-200"
        >
          <ChevronLeft className="w-4 h-4" />
          <span className="hidden sm:inline">Previous</span>
        </Button>

<div className="hidden sm:flex items-center gap-1">
          {Array.from({ length: totalPages }, (_, i) => i + 1)
            .slice(Math.max(0, currentPage - 2), Math.min(totalPages, currentPage + 2))
            .map((page) => (
              <Button
                key={page}
                size="sm"
                onClick={() => onPageChange(page)}
                className={`w-10 h-10 p-0 ${
                  page === currentPage
                    ? "bg-[#CE1126] text-white hover:bg-[#B00D1F]"
                    : "border border-gray-800 text-gray-900 bg-white hover:bg-gray-200"
                }`}
              >
                {page}
              </Button>
            ))}
        </div>

<Button
          variant="outline"
          size="sm"
          onClick={() => onPageChange(currentPage + 1)}
          disabled={currentPage === totalPages}
          className="w-auto gap-2 border-gray-800 text-gray-900 hover:bg-gray-200"
        >
          <span className="hidden sm:inline">Next</span>
          <ChevronRight className="w-4 h-4" />
        </Button>
      </div>

{onItemsPerPageChange && (
        <div className="flex items-center gap-2">
          <span className="text-sm text-gray-700 font-medium">Per page:</span>
          <select
            value={itemsPerPage}
            onChange={(e) => onItemsPerPageChange(Number.parseInt(e.target.value))}
            className="px-3 py-1 border border-gray-800 rounded-md text-sm text-gray-900 bg-white hover:bg-gray-50"
          >
            <option value={10}>10</option>
            <option value={25}>25</option>
            <option value={50}>50</option>
            <option value={100}>100</option>
          </select>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/breadcrumb.tsx" isMerged="true"
"use client"

import Link from "next/link"
import { ChevronRight } from "lucide-react"

interface BreadcrumbItem {
  label: string
  href: string
}

interface BreadcrumbProps {
  items: BreadcrumbItem[]
  current: string
}

export function Breadcrumb({ items, current }: BreadcrumbProps) {
  return (
    <nav className="flex items-center gap-2 text-sm mb-4">
      <Link href="/admin" className="text-[#003087] hover:underline">
        Admin
      </Link>
      {items.map((item, index) => (
        <div key={index} className="flex items-center gap-2">
          <ChevronRight className="w-4 h-4 text-gray-400" />
          <Link href={item.href} className="text-[#003087] hover:underline">
            {item.label}
          </Link>
        </div>
      ))}
      <ChevronRight className="w-4 h-4 text-gray-400" />
      <span className="text-gray-700 font-medium">{current}</span>
    </nav>
  )
}
[V0_FILE]typescriptreact:file="app/admin/pages/view/[id]/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { ArrowLeft, Edit2, Trash2, Calendar, User, Eye } from "lucide-react"
import { Breadcrumb } from "@/components/admin/breadcrumb"

interface PageSection {
  id: number
  type: "banner" | "content" | "image" | "gallery"
  title: string
  content?: string
  imageUrl?: string
  order: number
}

interface Page {
  id: number
  title: string
  slug: string
  description: string
  author: string
  status: "Published" | "Draft"
  createdDate: string
  lastModified: string
  sections: PageSection[]
}

export default function ViewPagePage({ params }: { params: { id: string } }) {
  const [page] = useState<Page>({
    id: Number.parseInt(params.id),
    title: "Home",
    slug: "home",
    description: "Main landing page with hero banner and featured content",
    author: "Admin",
    status: "Published",
    createdDate: "2024-01-15",
    lastModified: "2024-01-20",
    sections: [
      {
        id: 1,
        type: "banner",
        title: "Hero Banner",
        content: "Welcome to our organization",
        imageUrl: "/abstract-hero-banner.png",
        order: 1,
      },
      {
        id: 2,
        type: "content",
        title: "About Section",
        content: "This is the about section content describing our organization and mission",
        order: 2,
      },
      {
        id: 3,
        type: "gallery",
        title: "Photo Gallery",
        order: 3,
      },
    ],
  })

const handleDelete = () => {
    if (confirm("Are you sure you want to delete this page? This action cannot be undone.")) {
      window.location.href = "/admin/pages"
    }
  }

const sectionTypeColors: Record<string, { bg: string; text: string; label: string }> = {
    banner: { bg: "bg-purple-100", text: "text-purple-800", label: "Banner" },
    content: { bg: "bg-blue-100", text: "text-blue-800", label: "Content Block" },
    image: { bg: "bg-green-100", text: "text-green-800", label: "Image" },
    gallery: { bg: "bg-orange-100", text: "text-orange-800", label: "Gallery" },
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      <Breadcrumb items={[{ label: "Pages", href: "/admin/pages" }]} current={`View: ${page.title}`} />

{/* Header */}
      <div className="flex items-center justify-between gap-4">
        <div className="flex items-center gap-3 flex-1">
          <Link href="/admin/pages">
            <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors">
              <ArrowLeft className="w-5 h-5 text-gray-600" />
            </button>
          </Link>
          <div>
            <h1 className="text-3xl font-bold text-gray-900">{page.title}</h1>
            <p className="text-gray-600 mt-1">View page details and sections</p>
          </div>
        </div>
        <div className="flex gap-2">
          <button className="flex items-center gap-2 bg-[#003087] text-white px-4 py-2 rounded-lg hover:bg-blue-900 transition-colors font-medium">
            <Eye className="w-5 h-5" />
            Preview
          </button>
          <Link href={`/admin/pages/edit/${page.id}`}>
            <button className="flex items-center gap-2 bg-[#CE1126] text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors font-medium">
              <Edit2 className="w-5 h-5" />
              Edit
            </button>
          </Link>
          <button
            onClick={handleDelete}
            className="flex items-center gap-2 bg-red-100 text-red-700 px-4 py-2 rounded-lg hover:bg-red-200 transition-colors"
          >
            <Trash2 className="w-5 h-5" />
            Delete
          </button>
        </div>
      </div>

{/* Page Information */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="bg-white rounded-lg border border-gray-200 p-6">
          <h3 className="font-semibold text-gray-900 mb-4">Page Information</h3>
          <div className="space-y-4">
            <div>
              <p className="text-xs text-gray-600 uppercase tracking-wide">Page Title</p>
              <p className="text-lg font-semibold text-gray-900">{page.title}</p>
            </div>
            <div>
              <p className="text-xs text-gray-600 uppercase tracking-wide">URL Slug</p>
              <code className="text-sm bg-gray-100 text-gray-700 px-2 py-1 rounded">/{page.slug}</code>
            </div>
            <div>
              <p className="text-xs text-gray-600 uppercase tracking-wide">Status</p>
              <span
                className={`inline-block px-3 py-1 rounded-full text-xs font-medium ${
                  page.status === "Published" ? "bg-green-100 text-green-800" : "bg-yellow-100 text-yellow-800"
                }`}
              >
                {page.status}
              </span>
            </div>
          </div>
        </div>

<div className="bg-white rounded-lg border border-gray-200 p-6">
          <h3 className="font-semibold text-gray-900 mb-4">Metadata</h3>
          <div className="space-y-4">
            <div>
              <p className="text-xs text-gray-600 uppercase tracking-wide">Author</p>
              <div className="flex items-center gap-2 text-gray-900">
                <User className="w-4 h-4" />
                {page.author}
              </div>
            </div>
            <div>
              <p className="text-xs text-gray-600 uppercase tracking-wide">Created</p>
              <div className="flex items-center gap-2 text-gray-900">
                <Calendar className="w-4 h-4" />
                {new Date(page.createdDate).toLocaleDateString()}
              </div>
            </div>
            <div>
              <p className="text-xs text-gray-600 uppercase tracking-wide">Last Modified</p>
              <div className="flex items-center gap-2 text-gray-900">
                <Calendar className="w-4 h-4" />
                {new Date(page.lastModified).toLocaleDateString()}
              </div>
            </div>
          </div>
        </div>
      </div>

{/* Description */}
      <div className="bg-white rounded-lg border border-gray-200 p-6">
        <h3 className="font-semibold text-gray-900 mb-4">Description</h3>
        <p className="text-gray-700">{page.description}</p>
      </div>

{/* Page Sections */}
      <div className="space-y-4">
        <h2 className="text-2xl font-bold text-gray-900">Page Sections ({page.sections.length})</h2>
        <div className="space-y-3">
          {page.sections.map((section) => {
            const sectionStyle = sectionTypeColors[section.type]
            return (
              <div key={section.id} className="bg-white rounded-lg border border-gray-200 p-6">
                <div className="flex items-start justify-between mb-4">
                  <div>
                    <div className="flex items-center gap-3 mb-2">
                      <span
                        className={`inline-block px-3 py-1 rounded-full text-xs font-medium ${sectionStyle.bg} ${sectionStyle.text}`}
                      >
                        {sectionStyle.label}
                      </span>
                      <span className="text-sm text-gray-600">#{section.order}</span>
                    </div>
                    <h3 className="text-lg font-semibold text-gray-900">{section.title}</h3>
                  </div>
                </div>

{section.type === "banner" && (
                  <>
                    <p className="text-gray-700 mb-4">{section.content}</p>
                    {section.imageUrl && (
                      <img
                        src={section.imageUrl || "/placeholder.svg"}
                        alt={section.title}
                        className="w-full rounded-lg object-cover max-h-64"
                      />
                    )}
                  </>
                )}

{section.type === "content" && <p className="text-gray-700 leading-relaxed">{section.content}</p>}

{section.type === "gallery" && (
                  <div className="bg-gray-100 rounded-lg p-8 text-center text-gray-500">Gallery preview</div>
                )}

{section.type === "image" && section.imageUrl && (
                  <img
                    src={section.imageUrl || "/placeholder.svg"}
                    alt={section.title}
                    className="w-full rounded-lg object-cover"
                  />
                )}
              </div>
            )
          })}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/events/events-list.tsx" isMerged="true"
"use client"

import { Calendar, MapPin, Users, Edit, Trash2, Plus } from "lucide-react"
import { useState } from "react"

const mockEvents = [
  {
    id: 1,
    title: "Annual General Meeting",
    date: "2024-03-15",
    location: "Kuala Lumpur Convention Center",
    attendees: 250,
    status: "Active",
  },
  { id: 2, title: "Youth Forum", date: "2024-03-22", location: "Petaling Jaya", attendees: 150, status: "Active" },
  {
    id: 3,
    title: "Community Outreach Program",
    date: "2024-04-05",
    location: "Various Branches",
    attendees: 500,
    status: "Active",
  },
  { id: 4, title: "Leadership Workshop", date: "2024-04-10", location: "Selangor", attendees: 100, status: "Inactive" },
]

export function EventsList() {
  const [currentPage, setCurrentPage] = useState(1)
  const [pageSize, setPageSize] = useState(4)

const totalPages = Math.ceil(mockEvents.length / pageSize)
  const startIndex = (currentPage - 1) * pageSize
  const paginatedEvents = mockEvents.slice(startIndex, startIndex + pageSize)

return (
    <div className="space-y-6">
      <div className="flex justify-end">
        <button className="flex items-center gap-2 px-4 py-2 bg-[#CE1126] text-white rounded-lg hover:bg-red-700 transition-colors">
          <Plus className="w-5 h-5" />
          Add Event
        </button>
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {paginatedEvents.map((event) => (
          <div
            key={event.id}
            className="bg-white border border-gray-200 rounded-lg p-6 hover:shadow-lg transition-shadow"
          >
            <h4 className="font-bold text-gray-900 text-lg mb-4">{event.title}</h4>
            <div className="mb-3">
              <span
                className={`px-3 py-1 rounded-full text-xs font-medium ${
                  event.status === "Active" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
                }`}
              >
                {event.status}
              </span>
            </div>
            <div className="space-y-3">
              <div className="flex items-center gap-2 text-gray-600">
                <Calendar className="w-5 h-5 text-[#CE1126]" />
                <span>{event.date}</span>
              </div>
              <div className="flex items-center gap-2 text-gray-600">
                <MapPin className="w-5 h-5 text-[#003087]" />
                <span>{event.location}</span>
              </div>
              <div className="flex items-center gap-2 text-gray-600">
                <Users className="w-5 h-5 text-[#003087]" />
                <span>{event.attendees} attendees</span>
              </div>
            </div>
            <div className="flex gap-2 mt-6 pt-4 border-t border-gray-200">
              <button className="flex-1 flex items-center justify-center gap-2 px-4 py-2 text-[#003087] border border-[#003087] rounded-lg hover:bg-blue-50 transition-colors">
                <Edit className="w-4 h-4" />
                Edit
              </button>
              <button className="flex-1 flex items-center justify-center gap-2 px-4 py-2 text-[#CE1126] border border-[#CE1126] rounded-lg hover:bg-red-50 transition-colors">
                <Trash2 className="w-4 h-4" />
                Delete
              </button>
            </div>
          </div>
        ))}
      </div>

{totalPages > 1 && (
        <div className="px-4 py-4 border-t border-gray-200 flex flex-col sm:flex-row items-center justify-between gap-4">
          <div className="text-sm text-gray-600">
            Showing {mockEvents.length === 0 ? 0 : startIndex + 1} to{" "}
            {Math.min(startIndex + pageSize, mockEvents.length)} of {mockEvents.length} events
          </div>
          <div className="flex items-center gap-4">
            <select
              value={pageSize}
              onChange={(e) => {
                setPageSize(Number(e.target.value))
                setCurrentPage(1)
              }}
              className="px-3 py-1 border border-gray-300 rounded text-sm"
            >
              <option value={4}>4 per page</option>
              <option value={8}>8 per page</option>
              <option value={12}>12 per page</option>
            </select>
            <div className="flex gap-2">
              <button
                onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
                disabled={currentPage === 1}
                className="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                ←
              </button>
              <div className="flex items-center gap-1">
                {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => i + 1).map((page) => (
                  <button
                    key={page}
                    onClick={() => setCurrentPage(page)}
                    className={`w-8 h-8 rounded-lg text-sm font-medium transition-colors ${
                      currentPage === page ? "bg-[#CE1126] text-white" : "border border-gray-300 hover:bg-gray-50"
                    }`}
                  >
                    {page}
                  </button>
                ))}
              </div>
              <button
                onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
                disabled={currentPage === totalPages}
                className="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                →
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/leadership/leadership-list.tsx" isMerged="true"
"use client"

import { Crown, Edit, Trash2 } from "lucide-react"
import { useState } from "react"

const mockLeaders = [
  { id: 1, name: "Tan Sri Datuk Ahmed", position: "President", experience: "25 years", status: "Active" },
  { id: 2, name: "Datuk Seri Rashid", position: "Vice President", experience: "20 years", status: "Active" },
  { id: 3, name: "Dato Lee Chong", position: "Secretary General", experience: "18 years", status: "Inactive" },
  { id: 4, name: "Tun Ibrahim Ali", position: "Treasurer", experience: "22 years", status: "Active" },
  { id: 5, name: "Datin Seri Azizah", position: "Women Wing Leader", experience: "15 years", status: "Active" },
  { id: 6, name: "Encik Muhammad Ridzuan", position: "Youth Wing Leader", experience: "8 years", status: "Active" },
]

export function LeadershipList() {
  const [currentPage, setCurrentPage] = useState(1)
  const [pageSize, setPageSize] = useState(6)

const totalPages = Math.ceil(mockLeaders.length / pageSize)
  const startIndex = (currentPage - 1) * pageSize
  const paginatedLeaders = mockLeaders.slice(startIndex, startIndex + pageSize)

return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {paginatedLeaders.map((leader) => (
          <div
            key={leader.id}
            className="bg-white border border-gray-200 rounded-lg p-6 hover:shadow-lg transition-shadow"
          >
            <div className="flex items-start justify-between mb-4">
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 bg-gradient-to-br from-[#CE1126] to-[#003087] rounded-full flex items-center justify-center text-white">
                  <Crown className="w-6 h-6" />
                </div>
                <div>
                  <h4 className="font-bold text-gray-900">{leader.name}</h4>
                  <p className="text-sm text-[#CE1126] font-medium">{leader.position}</p>
                </div>
              </div>
              <div className="flex gap-2">
                <button className="p-2 text-gray-600 hover:text-[#003087] hover:bg-blue-50 rounded-lg transition-colors">
                  <Edit className="w-4 h-4" />
                </button>
                <button className="p-2 text-gray-600 hover:text-[#CE1126] hover:bg-red-50 rounded-lg transition-colors">
                  <Trash2 className="w-4 h-4" />
                </button>
              </div>
            </div>
            <div className="pt-4 border-t border-gray-200 space-y-3">
              <div className="mb-2">
                <span
                  className={`px-3 py-1 rounded-full text-xs font-medium ${
                    leader.status === "Active" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
                  }`}
                >
                  {leader.status}
                </span>
              </div>
              <p className="text-sm text-gray-600">
                Experience: <span className="font-medium text-gray-900">{leader.experience}</span>
              </p>
            </div>
          </div>
        ))}
      </div>

{totalPages > 1 && (
        <div className="px-4 py-4 border-t border-gray-200 flex flex-col sm:flex-row items-center justify-between gap-4">
          <div className="text-sm text-gray-600">
            Showing {mockLeaders.length === 0 ? 0 : startIndex + 1} to{" "}
            {Math.min(startIndex + pageSize, mockLeaders.length)} of {mockLeaders.length} leaders
          </div>
          <div className="flex items-center gap-4">
            <select
              value={pageSize}
              onChange={(e) => {
                setPageSize(Number(e.target.value))
                setCurrentPage(1)
              }}
              className="px-3 py-1 border border-gray-300 rounded text-sm"
            >
              <option value={6}>6 per page</option>
              <option value={12}>12 per page</option>
            </select>
            <div className="flex gap-2">
              <button
                onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
                disabled={currentPage === 1}
                className="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                ←
              </button>
              <div className="flex items-center gap-1">
                {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => i + 1).map((page) => (
                  <button
                    key={page}
                    onClick={() => setCurrentPage(page)}
                    className={`w-8 h-8 rounded-lg text-sm font-medium transition-colors ${
                      currentPage === page ? "bg-[#CE1126] text-white" : "border border-gray-300 hover:bg-gray-50"
                    }`}
                  >
                    {page}
                  </button>
                ))}
              </div>
              <button
                onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
                disabled={currentPage === totalPages}
                className="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                →
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/gallery/gallery-management.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Upload, Trash2, Plus, Search, ChevronLeft, ChevronRight } from "lucide-react"

const mockGallery = [
  { id: 1, title: "Annual Conference 2024", images: 12, uploadDate: "2024-01-15", status: "Active" },
  { id: 2, title: "Youth Forum Photos", images: 24, uploadDate: "2024-01-10", status: "Active" },
  { id: 3, title: "Community Outreach", images: 18, uploadDate: "2024-01-05", status: "Active" },
  { id: 4, title: "Leadership Meeting", images: 8, uploadDate: "2023-12-28", status: "Inactive" },
  { id: 5, title: "Cultural Event Photos", images: 32, uploadDate: "2023-12-20", status: "Active" },
  { id: 6, title: "Sports Tournament", images: 28, uploadDate: "2023-12-15", status: "Active" },
  { id: 7, title: "Awards Ceremony", images: 15, uploadDate: "2023-12-10", status: "Active" },
  { id: 8, title: "Training Session", images: 20, uploadDate: "2023-12-05", status: "Inactive" },
]

export function GalleryManagement() {
  const [searchTerm, setSearchTerm] = useState("")
  const [currentPage, setCurrentPage] = useState(1)
  const [pageSize, setPageSize] = useState(6)

const filteredGallery = mockGallery.filter((gallery) =>
    gallery.title.toLowerCase().includes(searchTerm.toLowerCase()),
  )

const totalPages = Math.ceil(filteredGallery.length / pageSize)
  const startIndex = (currentPage - 1) * pageSize
  const paginatedGallery = filteredGallery.slice(startIndex, startIndex + pageSize)

return (
    <div className="space-y-6">
      {/* Upload section */}
      <div className="bg-gradient-to-br from-[#003087] to-[#001f5c] rounded-lg p-8 text-white">
        <div className="flex flex-col items-center justify-center gap-4">
          <Upload className="w-12 h-12 opacity-80" />
          <div className="text-center">
            <h3 className="text-lg font-bold">Upload Photos</h3>
            <p className="text-blue-200 mt-2">Drag and drop images or click to browse</p>
          </div>
          <button className="flex items-center gap-2 px-6 py-2 bg-[#CE1126] text-white rounded-lg hover:bg-red-700 transition-colors mt-4">
            <Plus className="w-5 h-5" />
            Choose Files
          </button>
        </div>
      </div>

<div className="flex-1 relative">
        <Search className="absolute left-3 top-3 w-5 h-5 text-gray-400" />
        <input
          type="text"
          placeholder="Search galleries..."
          value={searchTerm}
          onChange={(e) => {
            setSearchTerm(e.target.value)
            setCurrentPage(1)
          }}
          className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
        />
      </div>

{/* Galleries list */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {paginatedGallery.map((gallery) => (
          <div
            key={gallery.id}
            className="bg-white border border-gray-200 rounded-lg p-6 hover:shadow-lg transition-shadow"
          >
            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
              <div>
                <h4 className="font-bold text-gray-900">{gallery.title}</h4>
                <div className="mt-2 mb-2">
                  <span
                    className={`px-3 py-1 rounded-full text-xs font-medium ${
                      gallery.status === "Active" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
                    }`}
                  >
                    {gallery.status}
                  </span>
                </div>
                <div className="flex flex-wrap gap-4 mt-2 text-sm text-gray-600">
                  <span>{gallery.images} images</span>
                  <span>{gallery.uploadDate}</span>
                </div>
              </div>
              <div className="flex gap-2">
                <button className="px-4 py-2 text-[#003087] border border-[#003087] rounded-lg hover:bg-blue-50 transition-colors whitespace-nowrap">
                  View
                </button>
                <button className="p-2 text-gray-600 hover:text-[#CE1126] hover:bg-red-50 rounded-lg transition-colors">
                  <Trash2 className="w-4 h-4" />
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>

{totalPages > 1 && (
        <div className="px-4 py-4 border-t border-gray-200 flex flex-col sm:flex-row items-center justify-between gap-4">
          <div className="text-sm text-gray-600">
            Showing {filteredGallery.length === 0 ? 0 : startIndex + 1} to{" "}
            {Math.min(startIndex + pageSize, filteredGallery.length)} of {filteredGallery.length} galleries
          </div>
          <div className="flex items-center gap-4">
            <select
              value={pageSize}
              onChange={(e) => {
                setPageSize(Number(e.target.value))
                setCurrentPage(1)
              }}
              className="px-3 py-1 border border-gray-300 rounded text-sm"
            >
              <option value={6}>6 per page</option>
              <option value={12}>12 per page</option>
              <option value={18}>18 per page</option>
            </select>
            <div className="flex gap-2">
              <button
                onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
                disabled={currentPage === 1}
                className="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                <ChevronLeft className="w-4 h-4" />
              </button>
              <div className="flex items-center gap-1">
                {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => i + 1).map((page) => (
                  <button
                    key={page}
                    onClick={() => setCurrentPage(page)}
                    className={`w-8 h-8 rounded-lg text-sm font-medium transition-colors ${
                      currentPage === page ? "bg-[#CE1126] text-white" : "border border-gray-300 hover:bg-gray-50"
                    }`}
                  >
                    {page}
                  </button>
                ))}
              </div>
              <button
                onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
                disabled={currentPage === totalPages}
                className="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                <ChevronRight className="w-4 h-4" />
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]plaintext:file="public/mcc-logo.jfif" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/mcc%20logo.jfif-kKRcFODDrbYVIODMFSl12ToC2faOzc.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="app/admin/settings/page.tsx" isMerged="true"
"use client"

import { Card, CardContent } from "@/components/ui/card"
import { ArrowRight, Settings, Globe, Share2, Building2, Sliders } from "lucide-react"
import Link from "next/link"

export default function SettingsPage() {
  const settingsSections = [
    {
      title: "General Settings",
      description: "Website name, logo, contact email, phone number, and branding",
      icon: Globe,
      href: "/admin/settings/general",
      color: "bg-blue-50 border-blue-200 hover:border-blue-400",
    },
    {
      title: "Website Settings",
      description: "Basic site configurations, display options, and security settings",
      icon: Settings,
      href: "/admin/settings/website-settings",
      color: "bg-purple-50 border-purple-200 hover:border-purple-400",
    },
    {
      title: "Social Media Links",
      description: "Facebook, Instagram, YouTube, Twitter, LinkedIn, and TikTok",
      icon: Share2,
      href: "/admin/settings/social-media",
      color: "bg-pink-50 border-pink-200 hover:border-pink-400",
    },
    {
      title: "Footer Content",
      description: "Address, copyright text, and quick links management",
      icon: Building2,
      href: "/admin/settings/general/footer-content",
      color: "bg-green-50 border-green-200 hover:border-green-400",
    },
    {
      title: "System Preferences",
      description: "Maintenance mode, notifications, upload limits, and performance",
      icon: Sliders,
      href: "/admin/settings/system-preferences",
      color: "bg-yellow-50 border-yellow-200 hover:border-yellow-400",
    },
  ]

return (
    <div className="p-4 sm:p-6 space-y-8">
      <div>
        <h1 className="text-3xl font-bold text-gray-900">Settings</h1>
        <p className="text-gray-600 mt-2">Configure website behavior and system information</p>
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {settingsSections.map((section, idx) => {
          const Icon = section.icon
          return (
            <Link key={idx} href={section.href}>
              <Card className={`h-full cursor-pointer border transition-all ${section.color}`}>
                <CardContent className="pt-6">
                  <div className="flex items-start justify-between">
                    <div>
                      <h3 className="font-bold text-gray-900 text-lg">{section.title}</h3>
                      <p className="text-gray-600 text-sm mt-2">{section.description}</p>
                    </div>
                    <Icon className="w-8 h-8 text-gray-400" />
                  </div>
                  <div className="mt-4 flex items-center gap-2 text-[#CE1126] font-medium">
                    Configure <ArrowRight className="w-4 h-4" />
                  </div>
                </CardContent>
              </Card>
            </Link>
          )
        })}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/settings/general/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { Card, CardContent } from "@/components/ui/card"
import { ArrowRight, Globe, Mail } from "lucide-react"
import Link from "next/link"

export default function GeneralSettingsPage() {
  const sections = [
    {
      title: "Website Information",
      description: "Manage website name, logo, description, and branding",
      icon: Globe,
      href: "/admin/settings/general/website-info",
      color: "bg-blue-50 border-blue-200 hover:border-blue-400",
    },
    {
      title: "Contact Information",
      description: "Configure contact email, phone number, and address",
      icon: Mail,
      href: "/admin/settings/general/contact-info",
      color: "bg-green-50 border-green-200 hover:border-green-400",
    },
  ]

return (
    <div className="p-4 sm:p-6 space-y-8">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">General Settings</h1>
          <p className="text-gray-600 mt-2">Configure basic website information and preferences</p>
        </div>
        <Link href="/admin/settings">
          <button className="px-4 py-2 text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium">
            Back
          </button>
        </Link>
      </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {sections.map((section, idx) => {
          const Icon = section.icon
          return (
            <Link key={idx} href={section.href}>
              <Card className={`h-full cursor-pointer border transition-all ${section.color}`}>
                <CardContent className="pt-6">
                  <div className="flex items-start justify-between">
                    <div>
                      <h3 className="font-bold text-gray-900 text-lg">{section.title}</h3>
                      <p className="text-gray-600 text-sm mt-2">{section.description}</p>
                    </div>
                    <Icon className="w-8 h-8 text-gray-400" />
                  </div>
                  <div className="mt-4 flex items-center gap-2 text-[#CE1126] font-medium">
                    Configure <ArrowRight className="w-4 h-4" />
                  </div>
                </CardContent>
              </Card>
            </Link>
          )
        })}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/pages/add/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { Breadcrumb } from "@/components/admin/breadcrumb"
import { useState } from "react"
import Link from "next/link"
import { ArrowLeft } from "lucide-react"
import { useRouter } from "next/navigation"
import { API_ENDPOINTS } from "@/lib/api-config"
import { apiCallWithJSON } from "@/lib/api-utils"

export default function AddPagePage() {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState("")
  const [formData, setFormData] = useState({
    title: "",
    slug: "",
    description: "",
    status: "PUBLISHED",
  })

const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const title = e.target.value
    setFormData({
      ...formData,
      title,
      slug: title.toLowerCase().replace(/\s+/g, "-"),
    })
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError("")

if (!formData.title.trim()) {
      setError("Page title is required")
      return
    }

if (!formData.description.trim()) {
      setError("Description is required")
      return
    }

setLoading(true)
    try {
      const payload = {
        title: formData.title,
        description: formData.description,
        status: formData.status === "Published" ? "PUBLISHED" : "DRAFT",
      }

const response = await apiCallWithJSON(API_ENDPOINTS.pages.create, payload, "POST")

if (response.status === "SUCCESS") {
        router.push("/admin/pages")
      } else {
        setError(response.message || "Failed to create page")
      }
    } catch (err) {
      console.error("[v0] Page creation error:", err)
      setError(err instanceof Error ? err.message : "Failed to create page. Please try again.")
    } finally {
      setLoading(false)
    }
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      <Breadcrumb items={[{ label: "Pages", href: "/admin/pages" }]} current="Create New Page" />

{/* Header */}
      <div className="flex items-center gap-3">
        <Link href="/admin/pages">
          <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors">
            <ArrowLeft className="w-5 h-5 text-gray-600" />
          </button>
        </Link>
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Create New Page</h1>
          <p className="text-gray-600 mt-1">Add a new page to your website</p>
        </div>
      </div>

{/* Form */}
      <form onSubmit={handleSubmit} className="bg-white rounded-lg border border-gray-200 p-6 space-y-6 max-w-2xl">
        {error && <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">{error}</div>}

<div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Page Title</label>
          <input
            type="text"
            value={formData.title}
            onChange={handleTitleChange}
            placeholder="e.g., Home, About Us, Contact"
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#CE1126]"
            required
          />
          <p className="text-xs text-gray-500 mt-1">Choose a descriptive title for your page</p>
        </div>

<div>
          <label className="block text-sm font-medium text-gray-700 mb-2">URL Slug</label>
          <input
            type="text"
            value={formData.slug}
            onChange={(e) => setFormData({ ...formData, slug: e.target.value })}
            placeholder="auto-generated from title"
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#CE1126]"
          />
          <p className="text-xs text-gray-500 mt-1">URL will be /pages/{formData.slug}</p>
        </div>

<div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Description</label>
          <textarea
            value={formData.description}
            onChange={(e) => setFormData({ ...formData, description: e.target.value })}
            placeholder="Brief description of the page content"
            rows={4}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#CE1126]"
          />
        </div>

<div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Initial Status</label>
          <select
            value={formData.status}
            onChange={(e) => setFormData({ ...formData, status: e.target.value })}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#CE1126]"
          >
            <option value="PUBLISHED">Published</option>
            <option value="DRAFT">Draft</option>
          </select>
          <p className="text-xs text-gray-500 mt-1">You can change this later</p>
        </div>

<div className="flex gap-3 pt-4">
          <button
            type="submit"
            disabled={loading}
            className="bg-[#CE1126] text-white px-6 py-2 rounded-lg hover:bg-red-700 transition-colors font-medium w-auto disabled:opacity-50"
          >
            {loading ? "Creating..." : "Create Page"}
          </button>
          <Link href="/admin/pages">
            <button
              type="button"
              className="bg-gray-200 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-300 transition-colors w-auto"
            >
              Cancel
            </button>
          </Link>
        </div>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/pages/edit/[id]/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { ArrowLeft, Plus, Trash2, ChevronDown, ChevronUp } from "lucide-react"
import { Breadcrumb } from "@/components/admin/breadcrumb"
import { apiCallWithJSON } from "@/lib/api-utils"
import { API_BASE_URL } from "@/lib/api-config"

interface PageSection {
  id: number
  type: "banner" | "content" | "image" | "gallery"
  title: string
  content?: string
  imageUrl?: string
  order: number
}

interface Page {
  id: number
  title: string
  slug: string
  description: string
  status: "Published" | "Draft"
  sections: PageSection[]
}

interface PageData {
  id: number
  title: string
  description: string
  status: "PUBLISHED" | "DRAFT"
}

export default function EditPagePage({ params }: { params: { id: string } }) {
  const [page, setPage] = useState<Page>({
    id: Number.parseInt(params.id),
    title: "Home",
    slug: "home",
    description: "Main landing page",
    status: "Published",
    sections: [
      {
        id: 1,
        type: "banner",
        title: "Hero Banner",
        content: "Welcome to our organization",
        imageUrl: "/abstract-hero-banner.png",
        order: 1,
      },
      {
        id: 2,
        type: "content",
        title: "About Section",
        content: "This is the about section content",
        order: 2,
      },
      {
        id: 3,
        type: "gallery",
        title: "Photo Gallery",
        order: 3,
      },
    ],
  })

const [pageData, setPageData] = useState<PageData>({
    id: Number.parseInt(params.id),
    title: "",
    description: "",
    status: "PUBLISHED",
  })

const [expandedSection, setExpandedSection] = useState<number | null>(null)
  const [showAddSection, setShowAddSection] = useState(false)
  const [loading, setLoading] = useState(false)
  const [saving, setSaving] = useState(false)

const handleDeleteSection = (sectionId: number) => {
    if (confirm("Are you sure you want to delete this section?")) {
      setPage({
        ...page,
        sections: page.sections.filter((s) => s.id !== sectionId),
      })
    }
  }

const handleMoveSection = (sectionId: number, direction: "up" | "down") => {
    const index = page.sections.findIndex((s) => s.id === sectionId)
    if ((direction === "up" && index > 0) || (direction === "down" && index < page.sections.length - 1)) {
      const newSections = [...page.sections]
      const swapIndex = direction === "up" ? index - 1 : index + 1
      ;[newSections[index], newSections[swapIndex]] = [newSections[swapIndex], newSections[index]]
      setPage({ ...page, sections: newSections.map((s, i) => ({ ...s, order: i + 1 })) })
    }
  }

useEffect(() => {
    const fetchPageDetails = async () => {
      try {
        setLoading(true)
        // Note: Fetch specific page details if your API supports it
        // For now, fetching from list and finding the page
        const response = await fetch(`${API_BASE_URL}/api/admin/pages/${page.id}`)
        const data = await response.json()
        setPage({
          id: data.id,
          title: data.title,
          slug: data.slug,
          description: data.description,
          status: data.status,
          sections: data.sections,
        })
        setPageData({
          id: data.id,
          title: data.title,
          description: data.description,
          status: data.status,
        })
      } catch (error) {
        console.error("[v0] Error fetching page:", error)
      } finally {
        setLoading(false)
      }
    }
    fetchPageDetails()
  }, [params.id])

const handleSave = async () => {
    try {
      setSaving(true)
      const payload = {
        title: pageData.title,
        description: pageData.description,
        status: pageData.status,
        is_active: true,
      }
      const data = await apiCallWithJSON(`${API_BASE_URL}/api/admin/pages/${pageData.id}`, "PUT", payload)
      if (data.status === "SUCCESS") {
        alert("Page updated successfully")
      }
    } catch (error) {
      console.error("[v0] Error saving page:", error)
      alert("Failed to save page")
    } finally {
      setSaving(false)
    }
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      <Breadcrumb items={[{ label: "Pages", href: "/admin/pages" }]} current={`Edit: ${pageData.title || "Page"}`} />

{/* Header */}
      <div className="flex items-center gap-3">
        <Link href="/admin/pages">
          <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors">
            <ArrowLeft className="w-5 h-5 text-gray-600" />
          </button>
        </Link>
        <div className="flex-1">
          <h1 className="text-3xl font-bold text-gray-900">Edit Page</h1>
          <p className="text-gray-600 mt-1">Manage page content and sections</p>
        </div>
      </div>

{/* Page Information */}
      <div className="bg-white rounded-lg border border-gray-200 p-6 space-y-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Page Title</label>
          <input
            type="text"
            value={pageData.title}
            onChange={(e) => setPageData({ ...pageData, title: e.target.value })}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#CE1126]"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Description</label>
          <textarea
            value={pageData.description}
            onChange={(e) => setPageData({ ...pageData, description: e.target.value })}
            rows={3}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#CE1126]"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Status</label>
          <select
            value={pageData.status}
            onChange={(e) => setPageData({ ...pageData, status: e.target.value as "PUBLISHED" | "DRAFT" })}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#CE1126]"
          >
            <option value="DRAFT">Draft</option>
            <option value="PUBLISHED">Published</option>
          </select>
        </div>
      </div>

{/* Page Sections Management */}
      <div className="space-y-4">
        <div className="flex items-center justify-between">
          <h2 className="text-2xl font-bold text-gray-900">Page Sections</h2>
          <button
            onClick={() => setShowAddSection(!showAddSection)}
            className="flex items-center gap-2 bg-[#CE1126] text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors font-medium"
          >
            <Plus className="w-5 h-5" />
            Add Section
          </button>
        </div>

{/* Add Section Form */}
        {showAddSection && (
          <div className="bg-white rounded-lg border border-gray-200 p-6 space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Section Type</label>
                <select className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#CE1126]">
                  <option value="banner">Banner</option>
                  <option value="content">Content Block</option>
                  <option value="image">Image</option>
                  <option value="gallery">Gallery</option>
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Section Title</label>
                <input
                  type="text"
                  placeholder="e.g., Hero Banner, About Us"
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#CE1126]"
                />
              </div>
            </div>
            <div className="flex gap-2">
              <button className="flex-1 bg-[#CE1126] text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors font-medium">
                Add Section
              </button>
              <button
                onClick={() => setShowAddSection(false)}
                className="flex-1 bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 transition-colors"
              >
                Cancel
              </button>
            </div>
          </div>
        )}

{/* Sections List */}
        <div className="space-y-3">
          {page.sections.map((section) => {
            const sectionStyle = sectionTypeColors[section.type]
            return (
              <div key={section.id} className="bg-white rounded-lg border border-gray-200 overflow-hidden">
                <button
                  onClick={() => setExpandedSection(expandedSection === section.id ? null : section.id)}
                  className="w-full flex items-center justify-between p-4 hover:bg-gray-50 transition-colors"
                >
                  <div className="flex items-center gap-3 flex-1">
                    <span
                      className={`inline-block px-3 py-1 rounded-full text-xs font-medium ${sectionStyle.bg} ${sectionStyle.text}`}
                    >
                      {sectionStyle.label}
                    </span>
                    <div className="text-left">
                      <h3 className="font-semibold text-gray-900">{section.title}</h3>
                      <p className="text-sm text-gray-600">Section #{section.order}</p>
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    {expandedSection === section.id ? (
                      <ChevronUp className="w-5 h-5" />
                    ) : (
                      <ChevronDown className="w-5 h-5" />
                    )}
                  </div>
                </button>

{/* Section Content */}
                {expandedSection === section.id && (
                  <div className="border-t border-gray-200 bg-gray-50 p-4 space-y-4">
                    {section.type === "banner" && (
                      <>
                        <div>
                          <label className="block text-sm font-medium text-gray-700 mb-2">Banner Title</label>
                          <input
                            type="text"
                            defaultValue={section.content}
                            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#CE1126]"
                          />
                        </div>
                        <div>
                          <label className="block text-sm font-medium text-gray-700 mb-2">Banner Image</label>
                          <div className="flex gap-2">
                            <input
                              type="text"
                              value={section.imageUrl}
                              className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#CE1126]"
                            />
                            <button className="bg-[#003087] text-white px-4 py-2 rounded-lg hover:bg-blue-900">
                              Upload
                            </button>
                          </div>
                        </div>
                      </>
                    )}
                    {section.type === "content" && (
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-2">Content</label>
                        <textarea
                          defaultValue={section.content}
                          rows={4}
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#CE1126]"
                        />
                      </div>
                    )}
                    {section.type === "gallery" && (
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-2">Gallery Images</label>
                        <button className="w-full border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-[#CE1126] transition-colors">
                          <p className="text-gray-600">Click to upload images or drag and drop</p>
                        </button>
                      </div>
                    )}
                    <div className="flex gap-2 pt-4 border-t border-gray-200">
                      <button className="flex-1 bg-[#003087] text-white px-4 py-2 rounded-lg hover:bg-blue-900">
                        Save Changes
                      </button>
                      <button
                        onClick={() => handleDeleteSection(section.id)}
                        className="px-4 py-2 bg-red-100 text-red-700 rounded-lg hover:bg-red-200"
                      >
                        <Trash2 className="w-4 h-4" />
                      </button>
                    </div>
                  </div>
                )}

{/* Section Actions */}
                {expandedSection !== section.id && (
                  <div className="border-t border-gray-200 bg-gray-50 p-4 flex gap-2">
                    <button
                      onClick={() => handleMoveSection(section.id, "up")}
                      className="px-3 py-2 text-sm bg-gray-200 hover:bg-gray-300 rounded-lg transition-colors"
                      disabled={section.order === 1}
                    >
                      ↑ Move Up
                    </button>
                    <button
                      onClick={() => handleMoveSection(section.id, "down")}
                      className="px-3 py-2 text-sm bg-gray-200 hover:bg-gray-300 rounded-lg transition-colors"
                      disabled={section.order === page.sections.length}
                    >
                      ↓ Move Down
                    </button>
                  </div>
                )}
              </div>
            )
          })}
        </div>
      </div>

{/* Save Button */}
      <div className="flex gap-2">
        <button
          onClick={handleSave}
          disabled={saving}
          className="bg-[#CE1126] text-white px-6 py-2 rounded-lg hover:bg-red-700 transition-colors font-medium w-auto disabled:bg-gray-400"
        >
          {saving ? "Saving..." : "Save Page"}
        </button>
        <Link href="/admin/pages">
          <button className="bg-gray-200 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-300 transition-colors w-auto">
            Cancel
          </button>
        </Link>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/pages/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Plus, Edit2, Trash2, Search } from "lucide-react"
import { PaginationControls } from "@/components/admin/pagination-controls"
import { apiCall } from "@/lib/api-utils"
import { API_BASE_URL } from "@/lib/api-config"

interface Page {
  id: number
  title: string
  slug: string
  description: string
  status: "PUBLISHED" | "DRAFT"
  is_active: boolean
  author: string
  author_id: number
  modified: string
}

interface PaginationData {
  current_page: number
  page_size: number
  total_pages: number
  total_records: number
}

interface Author {
  id: number
  name: string
}

export default function PageManagementPage() {
  const [pages, setPages] = useState<Page[]>([])
  const [loading, setLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState("")
  const [statusFilter, setStatusFilter] = useState("all")
  const [authorFilter, setAuthorFilter] = useState("")
  const [currentPage, setCurrentPage] = useState(1)
  const [itemsPerPage, setItemsPerPage] = useState(10)
  const [pagination, setPagination] = useState<PaginationData>({
    current_page: 1,
    page_size: 10,
    total_pages: 1,
    total_records: 0,
  })
  const [authors, setAuthors] = useState<Author[]>([])

useEffect(() => {
    fetchPages()
    fetchAuthors()
  }, [currentPage, itemsPerPage, searchTerm, statusFilter, authorFilter])

const fetchPages = async () => {
    try {
      setLoading(true)
      const params = new URLSearchParams()
      params.append("page", currentPage.toString())
      params.append("page_size", itemsPerPage.toString())
      if (searchTerm) params.append("search", searchTerm)
      if (statusFilter !== "all") params.append("status", statusFilter)
      if (authorFilter) params.append("author", authorFilter)

const url = `${API_BASE_URL}/api/admin/pages?${params.toString()}`
      const data = await apiCall(url)
      if (data.status === "SUCCESS") {
        setPages(data.pages || [])
        setPagination(data.pagination)
      }
    } catch (error) {
      console.error("[v0] Error fetching pages:", error)
    } finally {
      setLoading(false)
    }
  }

const fetchAuthors = async () => {
    try {
      const url = `${API_BASE_URL}/api/admin/pages/authors`
      const data = await apiCall(url)
      if (data.status === "SUCCESS" && data.authors) {
        setAuthors(data.authors)
      }
    } catch (error) {
      console.error("[v0] Error fetching authors:", error)
    }
  }

const handleDelete = async (id: number, title: string) => {
    if (confirm(`Are you sure you want to delete "${title}"? This action cannot be undone.`)) {
      try {
        const data = await apiCall(`${API_BASE_URL}/api/admin/pages/${id}`, "DELETE")
        if (data.status === "SUCCESS") {
          alert("Page deleted successfully")
          fetchPages()
        }
      } catch (error) {
        console.error("[v0] Error deleting page:", error)
        alert("Failed to delete page")
      }
    }
  }

const handleToggleActive = async (id: number) => {
    try {
      const data = await apiCall(`${API_BASE_URL}/api/admin/pages/${id}`, "PATCH")
      if (data.status === "SUCCESS") {
        fetchPages()
      }
    } catch (error) {
      console.error("[v0] Error toggling page active status:", error)
      alert("Failed to update page status")
    }
  }

const activatedPages = pages.filter((p) => p.is_active).length
  const publishedPages = pages.filter((p) => p.status === "PUBLISHED").length
  const draftPages = pages.filter((p) => p.status === "DRAFT").length

return (
    <div className="p-4 sm:p-6 space-y-6">
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Page Management</h1>
          <p className="text-gray-600 mt-1">Create and manage website pages</p>
        </div>
        <Link href="/admin/pages/add">
          <button className="flex items-center gap-2 bg-[#CE1126] text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors font-medium w-full sm:w-auto justify-center">
            <Plus className="w-5 h-5" />
            Create Page
          </button>
        </Link>
      </div>

{/* Statistics Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div className="bg-white rounded-lg border border-gray-200 p-4">
          <p className="text-gray-600 text-sm mb-1">Total Pages</p>
          <p className="text-3xl font-bold text-gray-900">{pagination.total_records}</p>
        </div>
        <div className="bg-white rounded-lg border border-gray-200 p-4">
          <p className="text-gray-600 text-sm mb-1">Activated Pages</p>
          <p className="text-3xl font-bold text-[#CE1126]">{activatedPages}</p>
        </div>
        <div className="bg-white rounded-lg border border-gray-200 p-4">
          <p className="text-gray-600 text-sm mb-1">Published</p>
          <p className="text-3xl font-bold text-green-600">{publishedPages}</p>
        </div>
        <div className="bg-white rounded-lg border border-gray-200 p-4">
          <p className="text-gray-600 text-sm mb-1">Drafts</p>
          <p className="text-3xl font-bold text-yellow-600">{draftPages}</p>
        </div>
      </div>

{/* Search and Filters */}
      <div className="bg-white rounded-lg border border-gray-200 p-4 space-y-4">
        <div className="flex items-center gap-2 bg-gray-50 rounded-lg px-3 py-2 border border-gray-200">
          <Search className="w-5 h-5 text-gray-400" />
          <input
            type="text"
            placeholder="Search by title or description..."
            value={searchTerm}
            onChange={(e) => {
              setSearchTerm(e.target.value)
              setCurrentPage(1)
            }}
            className="flex-1 bg-transparent outline-none text-gray-700"
          />
        </div>
        <div className="flex flex-col sm:flex-row gap-2">
          <select
            value={authorFilter}
            onChange={(e) => {
              setAuthorFilter(e.target.value)
              setCurrentPage(1)
            }}
            className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#CE1126]"
          >
            <option value="">All Authors</option>
            {authors.map((author) => (
              <option key={author.id} value={author.id.toString()}>
                {author.name}
              </option>
            ))}
          </select>
          <select
            value={statusFilter}
            onChange={(e) => {
              setStatusFilter(e.target.value)
              setCurrentPage(1)
            }}
            className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#CE1126]"
          >
            <option value="all">All Status</option>
            <option value="PUBLISHED">Published</option>
            <option value="DRAFT">Draft</option>
          </select>
        </div>
      </div>

{/* Pages Table */}
      <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
        {loading ? (
          <div className="p-8 text-center">
            <p className="text-gray-600">Loading pages...</p>
          </div>
        ) : pages.length === 0 ? (
          <div className="p-8 text-center">
            <p className="text-gray-600">No pages found</p>
          </div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead className="bg-gray-50 border-b border-gray-200">
                <tr>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">
                    Title
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">
                    Description
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">
                    Status
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">
                    Activation
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">
                    Author
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">
                    Modified
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-200">
                {pages.map((page) => (
                  <tr key={page.id} className="hover:bg-gray-50 transition-colors">
                    <td className="px-6 py-4 whitespace-nowrap font-medium text-gray-900">{page.title}</td>
                    <td className="px-6 py-4 text-sm text-gray-600 max-w-xs truncate">{page.description}</td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <span
                        className={`inline-block px-3 py-1 rounded-full text-xs font-medium ${
                          page.status === "PUBLISHED" ? "bg-green-100 text-green-800" : "bg-yellow-100 text-yellow-800"
                        }`}
                      >
                        {page.status === "PUBLISHED" ? "Published" : "Draft"}
                      </span>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <button
                        onClick={() => handleToggleActive(page.id)}
                        className={`inline-block px-3 py-1 rounded-full text-xs font-medium cursor-pointer transition-colors ${
                          page.is_active
                            ? "bg-green-100 text-green-800 hover:bg-green-200"
                            : "bg-gray-100 text-gray-800 hover:bg-gray-200"
                        }`}
                      >
                        {page.is_active ? "✓ Activated" : "✕ Deactivated"}
                      </button>
                    </td>
                    <td className="px-6 py-4 text-sm text-gray-600">{page.author}</td>
                    <td className="px-6 py-4 text-sm text-gray-600">{page.modified}</td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div className="flex gap-2">
                        <Link href={`/admin/pages/edit/${page.id}`}>
                          <button className="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors">
                            <Edit2 className="w-4 h-4" />
                          </button>
                        </Link>
                        <button
                          onClick={() => handleDelete(page.id, page.title)}
                          className="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
                        >
                          <Trash2 className="w-4 h-4" />
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>

{/* Pagination */}
      {pages.length > 0 && (
        <PaginationControls
          currentPage={pagination.current_page}
          totalPages={pagination.total_pages}
          totalItems={pagination.total_records}
          itemsPerPage={pagination.page_size}
          onPageChange={setCurrentPage}
          onItemsPerPageChange={(value) => {
            setItemsPerPage(value)
            setCurrentPage(1)
          }}
        />
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/banners/client.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Plus, Edit2, Trash2, Eye, Search, ChevronLeft, ChevronRight } from "lucide-react"
import { API_BASE_URL } from "@/lib/api-config"
import { apiCall, apiCallWithJSON } from "@/lib/api-utils"

interface Banner {
  id: number
  title: string
  banner_type: string
  description: string
  image_url: string
  status: string
  display_order: number
  display_location: string
  modified: string
}

export default function BannersClient() {
  const [banners, setBanners] = useState<Banner[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [typeFilter, setTypeFilter] = useState<"All" | "HOMEPAGE_BANNER" | "SLIDER">("All")
  const [statusFilter, setStatusFilter] = useState<"All" | "ACTIVE" | "INACTIVE">("All")
  const [currentPage, setCurrentPage] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState("")

// Fetch banners from API with filters
  useEffect(() => {
    const fetchBanners = async () => {
      try {
        setLoading(true)
        const params = new URLSearchParams()
        if (searchTerm) params.append("search", searchTerm)
        if (typeFilter !== "All") params.append("type", typeFilter)
        if (statusFilter !== "All") params.append("status", statusFilter)
        params.append("page", currentPage.toString())
        params.append("page_size", pageSize.toString())

const url = `${API_BASE_URL}/api/admin/banners?${params.toString()}`
        const data = await apiCall(url)
        setBanners(data.banners || [])
        setError("")
      } catch (err) {
        console.error("[v0] Error fetching banners:", err)
        setError("Failed to fetch banners")
      } finally {
        setLoading(false)
      }
    }

fetchBanners()
  }, [searchTerm, typeFilter, statusFilter, currentPage, pageSize])

const handleDelete = async (id: number) => {
    if (confirm("Are you sure you want to delete this banner? This action cannot be undone.")) {
      try {
        await apiCall(`${API_BASE_URL}/api/admin/banners/${id}`, "DELETE")
        setBanners(banners.filter((b) => b.id !== id))
      } catch (err) {
        console.error("[v0] Error deleting banner:", err)
        alert("Failed to delete banner")
      }
    }
  }

// Toggle status using PATCH request
  const toggleStatus = async (id: number) => {
    try {
      await apiCallWithJSON(`${API_BASE_URL}/api/admin/banners/${id}`, {}, "PUT")
      setBanners(
        banners.map((b) => (b.id === id ? { ...b, status: b.status === "ACTIVE" ? "INACTIVE" : "ACTIVE" } : b)),
      )
    } catch (err) {
      console.error("[v0] Error toggling status:", err)
      alert("Failed to toggle banner status")
    }
  }

const activeBanners = banners.filter((b) => b.status === "ACTIVE").length
  const totalBanners = banners.length

return (
    <div className="p-4 sm:p-6 space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Banner & Slider Management</h1>
          <p className="text-gray-600 mt-2">Manage banners and sliders displayed on your website</p>
        </div>
        <Link href="/admin/banners/add">
          <button className="flex items-center gap-2 px-4 py-2 bg-[#CE1126] text-white rounded-lg hover:bg-red-700 transition-colors font-medium whitespace-nowrap">
            <Plus className="w-4 h-4" />
            Add Banner
          </button>
        </Link>
      </div>

{/* Statistics Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <div className="bg-white rounded-lg border border-gray-200 p-4">
          <p className="text-sm text-gray-600">Total Banners</p>
          <p className="text-2xl font-bold text-gray-900 mt-1">{totalBanners}</p>
        </div>
        <div className="bg-white rounded-lg border border-gray-200 p-4">
          <p className="text-sm text-gray-600">Active Banners</p>
          <p className="text-2xl font-bold text-green-600 mt-1">{activeBanners}</p>
        </div>
        <div className="bg-white rounded-lg border border-gray-200 p-4">
          <p className="text-sm text-gray-600">Inactive Banners</p>
          <p className="text-2xl font-bold text-gray-900 mt-1">{totalBanners - activeBanners}</p>
        </div>
      </div>

<div className="flex flex-col sm:flex-row gap-4">
        <div className="flex-1 relative">
          <Search className="absolute left-3 top-3 w-5 h-5 text-gray-400" />
          <input
            type="text"
            placeholder="Search banners..."
            value={searchTerm}
            onChange={(e) => {
              setSearchTerm(e.target.value)
              setCurrentPage(1)
            }}
            className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
          />
        </div>
        <select
          value={typeFilter}
          onChange={(e) => {
            setTypeFilter(e.target.value as "All" | "HOMEPAGE_BANNER" | "SLIDER")
            setCurrentPage(1)
          }}
          className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
        >
          <option value="All">All Types</option>
          <option value="HOMEPAGE_BANNER">Homepage Banner</option>
          <option value="SLIDER">Slider</option>
        </select>
        <select
          value={statusFilter}
          onChange={(e) => {
            setStatusFilter(e.target.value as "All" | "ACTIVE" | "INACTIVE")
            setCurrentPage(1)
          }}
          className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
        >
          <option value="All">All Status</option>
          <option value="ACTIVE">Active</option>
          <option value="INACTIVE">Inactive</option>
        </select>
      </div>

{error && <div className="bg-red-100 text-red-800 p-4 rounded-lg">{error}</div>}

{/* Banners List */}
      <div className="space-y-4">
        {loading ? (
          <div className="text-center py-8 text-gray-500">Loading banners...</div>
        ) : banners.length === 0 ? (
          <div className="bg-white rounded-lg border border-gray-200 p-8 text-center">
            <p className="text-gray-500">No banners found. Create your first banner to get started.</p>
            <Link href="/admin/banners/add">
              <button className="mt-4 px-4 py-2 bg-[#CE1126] text-white rounded-lg hover:bg-red-700 transition-colors font-medium">
                Create Banner
              </button>
            </Link>
          </div>
        ) : (
          banners.map((banner) => (
            <div key={banner.id} className="bg-white rounded-lg border border-gray-200 overflow-hidden">
              <div className="p-4 sm:p-6">
                <div className="flex flex-col sm:flex-row gap-4">
                  {/* Banner Image */}
                  <div className="flex-shrink-0 w-full sm:w-32 h-24 sm:h-32 bg-gray-100 rounded-lg overflow-hidden">
                    <img
                      src={banner.image_url || "/placeholder.svg"}
                      alt={banner.title}
                      className="w-full h-full object-cover"
                    />
                  </div>

{/* Banner Info */}
                  <div className="flex-1 space-y-2">
                    <div className="flex flex-col sm:flex-row sm:items-start justify-between gap-2">
                      <div>
                        <div className="flex items-center gap-3">
                          <h3 className="text-lg font-bold text-gray-900">{banner.title}</h3>
                          <span className="inline-block px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800">
                            {banner.banner_type}
                          </span>
                          <span
                            className={`inline-block px-2 py-1 rounded text-xs font-medium ${
                              banner.status === "ACTIVE" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
                            }`}
                          >
                            {banner.status}
                          </span>
                        </div>
                        <p className="text-sm text-gray-600 mt-1">{banner.description}</p>
                        <p className="text-xs text-gray-500 mt-1">Location: {banner.display_location}</p>
                        <p className="text-xs text-gray-500">
                          Order: {banner.display_order} | Modified: {banner.modified}
                        </p>
                      </div>
                    </div>
                  </div>

{/* Actions */}
                  <div className="flex flex-wrap sm:flex-col gap-2">
                    <Link href={`/admin/banners/view/${banner.id}`}>
                      <button className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors w-auto">
                        <Eye className="w-4 h-4" />
                        View
                      </button>
                    </Link>
                    <Link href={`/admin/banners/edit/${banner.id}`}>
                      <button className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-white bg-[#003087] rounded-lg hover:bg-blue-800 transition-colors w-auto">
                        <Edit2 className="w-4 h-4" />
                        Edit
                      </button>
                    </Link>
                    <button
                      onClick={() => toggleStatus(banner.id)}
                      className="px-3 py-2 text-sm font-medium text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors w-auto whitespace-nowrap"
                    >
                      {banner.status === "ACTIVE" ? "Deactivate" : "Activate"}
                    </button>
                    <button
                      onClick={() => handleDelete(banner.id)}
                      className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors w-auto"
                    >
                      <Trash2 className="w-4 h-4" />
                      Delete
                    </button>
                  </div>
                </div>
              </div>
            </div>
          ))
        )}
      </div>

{/* Pagination */}
      {banners.length > 0 && (
        <div className="px-4 py-4 border-t border-gray-200 flex flex-col sm:flex-row items-center justify-between gap-4 bg-white rounded-lg border border-gray-200">
          <div className="text-sm text-gray-600">Showing {banners.length} banners</div>
          <div className="flex items-center gap-4">
            <select
              value={pageSize}
              onChange={(e) => {
                setPageSize(Number(e.target.value))
                setCurrentPage(1)
              }}
              className="px-3 py-1 border border-gray-300 rounded text-sm"
            >
              <option value={10}>10 per page</option>
              <option value={25}>25 per page</option>
              <option value={50}>50 per page</option>
            </select>
            <div className="flex gap-2">
              <button
                onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
                disabled={currentPage === 1}
                className="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                <ChevronLeft className="w-4 h-4" />
              </button>
              <button
                onClick={() => setCurrentPage(currentPage + 1)}
                className="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
              >
                <ChevronRight className="w-4 h-4" />
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/banners/add/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { ArrowLeft } from "lucide-react"
import { API_BASE_URL } from "@/lib/api-config"
import { apiCallWithJSON } from "@/lib/api-utils"

export default function AddBannerPage() {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState("")
  const [formData, setFormData] = useState({
    title: "",
    banner_type: "HOMEPAGE_BANNER",
    description: "",
    display_location: "HOMEPAGE_ABOVE",
    image_url: "",
    status: "ACTIVE",
    display_order: 1,
  })

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    setError("")

try {
      await apiCallWithJSON(`${API_BASE_URL}/api/admin/banners`, formData, "POST")
      router.push("/admin/banners")
    } catch (err) {
      console.error("[v0] Banner creation error:", err)
      setError("Failed to create banner. Please try again.")
    } finally {
      setLoading(false)
    }
  }

{/* Error Message */}
      {error && <div className="bg-red-100 text-red-800 p-4 rounded-lg">{error}</div>}

{/* Form */}
      <form onSubmit={handleSubmit} className="bg-white rounded-lg border border-gray-200 p-4 sm:p-6 space-y-6">
        {/* Title */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Banner Title *</label>
          <input
            type="text"
            name="title"
            value={formData.title}
            onChange={handleChange}
            placeholder="e.g., Welcome to MCC"
            required
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#CE1126]"
          />
        </div>

{/* Type */}
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Banner Type *</label>
            <select
              name="banner_type"
              value={formData.banner_type}
              onChange={handleChange}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#CE1126]"
            >
              <option value="HOMEPAGE_BANNER">Homepage Banner</option>
              <option value="SLIDER">Slider</option>
            </select>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Status *</label>
            <select
              name="status"
              value={formData.status}
              onChange={handleChange}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#CE1126]"
            >
              <option value="ACTIVE">Active</option>
              <option value="INACTIVE">Inactive</option>
            </select>
          </div>
        </div>

{/* Display Location */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Display Location *</label>
          <select
            name="display_location"
            value={formData.display_location}
            onChange={handleChange}
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#CE1126]"
          >
            <option value="HOMEPAGE_ABOVE">Homepage - Above Fold</option>
            <option value="HOMEPAGE_MIDDLE">Homepage - Middle Section</option>
            <option value="HOMEPAGE_BOTTOM">Homepage - Bottom Section</option>
            <option value="HOMEPAGE_SLIDER">Homepage - Slider Section</option>
          </select>
        </div>

{/* Image URL */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Image URL *</label>
          <input
            type="text"
            name="image_url"
            value={formData.image_url}
            onChange={handleChange}
            placeholder="https://example.com/banner.jpg"
            required
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#CE1126]"
          />
          <p className="text-xs text-gray-500 mt-1">Recommended size: 1200x400px for banners, 800x400px for sliders</p>
        </div>

{/* Description */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Description</label>
          <textarea
            name="description"
            value={formData.description}
            onChange={handleChange}
            placeholder="Brief description of the banner"
            rows={4}
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#CE1126]"
          />
        </div>

{/* Order */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Display Order</label>
          <input
            type="number"
            name="display_order"
            value={formData.display_order}
            onChange={handleChange}
            min="1"
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#CE1126]"
          />
        </div>

{/* Form Actions */}
        <div className="flex gap-3 pt-4">
          <button
            type="submit"
            disabled={loading}
            className="px-4 py-2 bg-[#CE1126] text-white rounded-lg hover:bg-red-700 disabled:opacity-50 transition-colors font-medium w-auto"
          >
            {loading ? "Creating..." : "Create Banner"}
          </button>
          <Link href="/admin/banners">
            <button
              type="button"
              className="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors font-medium w-auto"
            >
              Cancel
            </button>
          </Link>
        </div>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/banners/edit/[id]/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { ArrowLeft } from "lucide-react"
import { API_BASE_URL } from "@/lib/api-config"
import { apiCall, apiCallWithJSON } from "@/lib/api-utils"

export default function EditBannerPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [fetching, setFetching] = useState(true)
  const [error, setError] = useState("")
  const [formData, setFormData] = useState({
    title: "",
    banner_type: "HOMEPAGE_BANNER",
    description: "",
    display_location: "HOMEPAGE_ABOVE",
    image_url: "",
    status: "ACTIVE",
    display_order: 1,
  })

// Fetch banner data from API
  useEffect(() => {
    const fetchBanner = async () => {
      try {
        const data = await apiCall(`${API_BASE_URL}/api/admin/banners/${params.id}`)
        setFormData({
          title: data.title,
          banner_type: data.banner_type,
          description: data.description,
          display_location: data.display_location,
          image_url: data.image_url,
          status: data.status,
          display_order: data.display_order,
        })
      } catch (err) {
        console.error("[v0] Error fetching banner:", err)
        setError("Failed to load banner")
      } finally {
        setFetching(false)
      }
    }

fetchBanner()
  }, [params.id])

// Submit updates to API
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    setError("")

try {
      await apiCallWithJSON(`${API_BASE_URL}/api/admin/banners/${params.id}`, formData, "PUT")
      router.push("/admin/banners")
    } catch (err) {
      console.error("[v0] Banner update error:", err)
      setError("Failed to update banner. Please try again.")
    } finally {
      setLoading(false)
    }
  }

if (fetching) {
    return (
      <div className="p-4 sm:p-6">
        <div className="text-center py-8 text-gray-500">Loading banner...</div>
      </div>
    )
  }

{error && <div className="bg-red-100 text-red-800 p-4 rounded-lg">{error}</div>}

{/* Form */}
      <form onSubmit={handleSubmit} className="bg-white rounded-lg border border-gray-200 p-4 sm:p-6 space-y-6">
        {/* Title */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Banner Title *</label>
          <input
            type="text"
            name="title"
            value={formData.title}
            onChange={handleChange}
            required
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#CE1126]"
          />
        </div>

{/* Image URL */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Image URL *</label>
          <input
            type="text"
            name="image_url"
            value={formData.image_url}
            onChange={handleChange}
            required
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#CE1126]"
          />
          <p className="text-xs text-gray-500 mt-1">Recommended size: 1200x400px for banners, 800x400px for sliders</p>
        </div>

{/* Description */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Description</label>
          <textarea
            name="description"
            value={formData.description}
            onChange={handleChange}
            rows={4}
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#CE1126]"
          />
        </div>

{/* Form Actions */}
        <div className="flex gap-3 pt-4">
          <button
            type="submit"
            disabled={loading}
            className="px-4 py-2 bg-[#CE1126] text-white rounded-lg hover:bg-red-700 disabled:opacity-50 transition-colors font-medium w-auto"
          >
            {loading ? "Saving..." : "Save Changes"}
          </button>
          <Link href="/admin/banners">
            <button
              type="button"
              className="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors font-medium w-auto"
            >
              Cancel
            </button>
          </Link>
        </div>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/memberships/pending-applications/view/[id]/page.tsx" isMerged="true"
"use client"

import { Card, CardContent } from "@/components/ui/card"
import { ArrowLeft, CheckCircle, XCircle, Clock } from "lucide-react"
import Link from "next/link"
import { useParams } from "next/navigation"
import { useState, useEffect } from "react"
import { apiCall, apiCallWithJSON } from "@/lib/api-utils"
import { API_ENDPOINTS } from "@/lib/api-config"

interface ApplicationDetail {
  id: number
  full_name: string
  dob: string
  gender: string
  phone: string
  email: string
  address: string
  branch: string
  status: "PENDING" | "REVIEWING" | "APPROVED" | "REJECTED"
  submitted_at: string
}

export default function ViewApplicationPage() {
  const params = useParams()
  const applicationId = Number(params.id)

const [application, setApplication] = useState<ApplicationDetail | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [actionLoading, setActionLoading] = useState(false)
  const [actionMessage, setActionMessage] = useState<{ type: "success" | "error"; text: string } | null>(null)

useEffect(() => {
    const fetchApplication = async () => {
      try {
        setIsLoading(true)
        setError(null)
        const response = await apiCall(API_ENDPOINTS.memberships.applicationDetails(applicationId))
        console.log("[v0] Fetched application details:", response)
        if (response.status === "SUCCESS" && response.data) {
          setApplication(response.data)
        } else {
          setError("Failed to fetch application details")
        }
      } catch (err) {
        console.error("[v0] Error fetching application:", err)
        setError(err instanceof Error ? err.message : "Failed to fetch application details")
      } finally {
        setIsLoading(false)
      }
    }

if (applicationId) {
      fetchApplication()
    }
  }, [applicationId])

const handleMoveToReview = async () => {
    try {
      setActionLoading(true)
      setActionMessage(null)
      const response = await apiCallWithJSON(API_ENDPOINTS.memberships.moveToReview(applicationId), {})
      console.log("[v0] Move to review response:", response)
      if (response.status === "SUCCESS") {
        setActionMessage({ type: "success", text: "Application moved to review" })
        if (application) {
          setApplication({ ...application, status: "REVIEWING" })
        }
      } else {
        setActionMessage({ type: "error", text: "Failed to move to review" })
      }
    } catch (err) {
      console.error("[v0] Error moving to review:", err)
      setActionMessage({
        type: "error",
        text: err instanceof Error ? err.message : "Failed to move to review",
      })
    } finally {
      setActionLoading(false)
    }
  }

const handleApprove = async () => {
    try {
      setActionLoading(true)
      setActionMessage(null)
      const response = await apiCallWithJSON(API_ENDPOINTS.memberships.approveApplication(applicationId), {})
      console.log("[v0] Approve response:", response)
      if (response.status === "SUCCESS") {
        setActionMessage({
          type: "success",
          text: `Application approved! Membership Number: ${response.membership_no}`,
        })
        if (application) {
          setApplication({ ...application, status: "APPROVED" })
        }
      } else {
        setActionMessage({ type: "error", text: "Failed to approve application" })
      }
    } catch (err) {
      console.error("[v0] Error approving application:", err)
      setActionMessage({
        type: "error",
        text: err instanceof Error ? err.message : "Failed to approve application",
      })
    } finally {
      setActionLoading(false)
    }
  }

const getStatusBadge = (status: string) => {
    const statusColors: Record<string, string> = {
      PENDING: "bg-yellow-100 text-yellow-800",
      REVIEWING: "bg-blue-100 text-blue-800",
      APPROVED: "bg-green-100 text-green-800",
      REJECTED: "bg-red-100 text-red-800",
    }
    return statusColors[status] || statusColors.PENDING
  }

const getStatusIcon = (status: string) => {
    switch (status) {
      case "APPROVED":
        return <CheckCircle className="w-5 h-5 text-green-600" />
      case "REJECTED":
        return <XCircle className="w-5 h-5 text-red-600" />
      case "REVIEWING":
        return <Clock className="w-5 h-5 text-blue-600" />
      default:
        return <Clock className="w-5 h-5 text-yellow-600" />
    }
  }

if (isLoading) {
    return (
      <div className="p-4 sm:p-6 space-y-6">
        <div className="flex items-center gap-3">
          <Link href="/admin/memberships/pending-applications" className="p-2 hover:bg-gray-100 rounded-lg transition">
            <ArrowLeft className="w-5 h-5 text-gray-700" />
          </Link>
          <div>
            <h1 className="text-3xl font-bold text-gray-900">Application Details</h1>
            <p className="text-gray-600 mt-1">Loading application information...</p>
          </div>
        </div>
      </div>
    )
  }

if (error || !application) {
    return (
      <div className="p-4 sm:p-6 space-y-6">
        <div className="flex items-center gap-3">
          <Link href="/admin/memberships/pending-applications" className="p-2 hover:bg-gray-100 rounded-lg transition">
            <ArrowLeft className="w-5 h-5 text-gray-700" />
          </Link>
          <div>
            <h1 className="text-3xl font-bold text-gray-900">Application Details</h1>
            <p className="text-red-600 mt-1">{error || "Application not found"}</p>
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      {/* Header */}
      <div className="flex items-center gap-3">
        <Link href="/admin/memberships/pending-applications" className="p-2 hover:bg-gray-100 rounded-lg transition">
          <ArrowLeft className="w-5 h-5 text-gray-700" />
        </Link>
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Application Details</h1>
          <p className="text-gray-600 mt-1">View pending application information</p>
        </div>
      </div>

{/* Action Message */}
      {actionMessage && (
        <div
          className={`p-4 rounded-lg ${
            actionMessage.type === "success" ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"
          }`}
        >
          {actionMessage.text}
        </div>
      )}

{/* Application Details */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Main Details */}
        <div className="lg:col-span-2 space-y-6">
          {/* Basic Information */}
          <Card>
            <CardContent className="pt-6">
              <h2 className="text-lg font-semibold text-gray-900 mb-4">Basic Information</h2>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <p className="text-sm text-gray-600">Full Name</p>
                  <p className="text-base font-medium text-gray-900">{application.full_name}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-600">Date of Birth</p>
                  <p className="text-base font-medium text-gray-900">{application.dob}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-600">Gender</p>
                  <p className="text-base font-medium text-gray-900">{application.gender}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-600">Branch</p>
                  <p className="text-base font-medium text-gray-900">{application.branch}</p>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Contact Information */}
          <Card>
            <CardContent className="pt-6">
              <h2 className="text-lg font-semibold text-gray-900 mb-4">Contact Information</h2>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <p className="text-sm text-gray-600">Email</p>
                  <p className="text-base font-medium text-gray-900">{application.email}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-600">Phone</p>
                  <p className="text-base font-medium text-gray-900">{application.phone}</p>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Address Information */}
          <Card>
            <CardContent className="pt-6">
              <h2 className="text-lg font-semibold text-gray-900 mb-4">Address Information</h2>
              <div className="grid grid-cols-1 gap-4">
                <div>
                  <p className="text-sm text-gray-600">Address</p>
                  <p className="text-base font-medium text-gray-900">{application.address}</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

{/* Sidebar */}
        <div className="space-y-6">
          {/* Status Card */}
          <Card>
            <CardContent className="pt-6">
              <h2 className="text-lg font-semibold text-gray-900 mb-4">Application Status</h2>
              <div className="space-y-3">
                <div className="flex items-center gap-2">
                  {getStatusIcon(application.status)}
                  <span
                    className={`inline-block px-3 py-1 rounded-full text-sm font-medium ${getStatusBadge(application.status)}`}
                  >
                    {application.status.charAt(0) + application.status.slice(1).toLowerCase()}
                  </span>
                </div>
                <div>
                  <p className="text-sm text-gray-600">Submitted On</p>
                  <p className="text-base font-medium text-gray-900">
                    {new Date(application.submitted_at).toLocaleDateString()}
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Action Buttons */}
          <Card>
            <CardContent className="pt-6">
              <h2 className="text-lg font-semibold text-gray-900 mb-4">Actions</h2>
              <div className="space-y-2">
                <button
                  onClick={handleApprove}
                  disabled={actionLoading || application.status !== "PENDING"}
                  className="w-full px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition font-medium disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  {actionLoading ? "Processing..." : "Approve"}
                </button>
                <button
                  disabled={actionLoading || application.status === "REJECTED"}
                  className="w-full px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition font-medium disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  Reject
                </button>
                <button
                  onClick={handleMoveToReview}
                  disabled={actionLoading || application.status !== "PENDING"}
                  className="w-full px-4 py-2 bg-[#003087] text-white rounded-lg hover:bg-blue-900 transition font-medium disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  {actionLoading && "Processing..."}
                  {!actionLoading && "Move to Review"}
                </button>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/dashboard/stats.tsx" isMerged="true"
"use client"

import { Users, Newspaper, Calendar, FileText, Loader } from "lucide-react"
import { useEffect, useState } from "react"
import { API_ENDPOINTS, DEFAULT_HEADERS } from "@/lib/api-config"

interface DashboardSummary {
  total_members: number
  news_articles: number
  upcoming_events: number
  documents: number
}

export function DashboardStats() {
  const [stats, setStats] = useState<DashboardSummary | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    const fetchDashboardSummary = async () => {
      try {
        setLoading(true)
        setError(null)

const response = await fetch(API_ENDPOINTS.dashboard.summary, {
          method: "GET",
          headers: DEFAULT_HEADERS,
          credentials: "include",
        })

if (!response.ok) {
          const errorText = await response.text()
          throw new Error(`HTTP error! status: ${response.status}`)
        }

const data = await response.json()

if (data.status === "SUCCESS" && data.cards) {
          setStats(data.cards)
        } else {
          setStats({
            total_members: 1245,
            news_articles: 18,
            upcoming_events: 4,
            documents: 32,
          })
        }
      } catch (err) {
        setStats({
          total_members: 1245,
          news_articles: 18,
          upcoming_events: 4,
          documents: 32,
        })
        setError(null)
      } finally {
        setLoading(false)
      }
    }

fetchDashboardSummary()
  }, [])

if (loading) {
    return (
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
        {[1, 2, 3, 4].map((i) => (
          <div key={i} className="bg-white rounded-lg border border-gray-200 p-6 animate-pulse">
            <div className="flex items-center justify-between">
              <div className="flex-1">
                <div className="h-4 bg-gray-200 rounded w-24 mb-2"></div>
                <div className="h-8 bg-gray-200 rounded w-16 mt-2"></div>
              </div>
              <Loader className="w-6 h-6 text-gray-400 animate-spin" />
            </div>
          </div>
        ))}
      </div>
    )
  }

if (error || !stats) {
    return (
      <div className="bg-red-50 border border-red-200 rounded-lg p-4">
        <p className="text-red-800">{error || "Unable to load dashboard data"}</p>
      </div>
    )
  }

const statsCards = [
    {
      label: "Total Members",
      value: stats.total_members.toLocaleString(),
      icon: Users,
      color: "from-blue-500 to-blue-600",
    },
    {
      label: "News Articles",
      value: stats.news_articles.toLocaleString(),
      icon: Newspaper,
      color: "from-red-500 to-red-600",
    },
    {
      label: "Upcoming Events",
      value: stats.upcoming_events.toLocaleString(),
      icon: Calendar,
      color: "from-purple-500 to-purple-600",
    },
    {
      label: "Documents",
      value: stats.documents.toLocaleString(),
      icon: FileText,
      color: "from-green-500 to-green-600",
    },
  ]

return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
      {statsCards.map((stat) => {
        const Icon = stat.icon
        return (
          <div
            key={stat.label}
            className="bg-white rounded-lg border border-gray-200 p-6 hover:shadow-lg transition-shadow"
          >
            <div className="flex items-center justify-between">
              <div>
                <p className="text-gray-600 text-sm font-medium">{stat.label}</p>
                <p className="text-3xl font-bold text-gray-900 mt-2">{stat.value}</p>
              </div>
              <div className={`w-12 h-12 bg-gradient-to-br ${stat.color} rounded-lg flex items-center justify-center`}>
                <Icon className="w-6 h-6 text-white" />
              </div>
            </div>
          </div>
        )
      })}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/dashboard/charts.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import {
  BarChart,
  Bar,
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from "recharts"
import { API_ENDPOINTS } from "@/lib/api-config"

// Mock data for weekly activity fallback
const mockWeeklyActivity = [
  { day: "Sun", articles: 2, events: 1 },
  { day: "Mon", articles: 4, events: 0 },
  { day: "Tue", articles: 1, events: 2 },
  { day: "Wed", articles: 3, events: 1 },
  { day: "Thu", articles: 5, events: 2 },
  { day: "Fri", articles: 2, events: 0 },
  { day: "Sat", articles: 1, events: 1 },
]

const mockMemberData = [
  { month: "Jan", count: 120 },
  { month: "Feb", count: 185 },
  { month: "Mar", count: 260 },
  { month: "Apr", count: 410 },
  { month: "May", count: 530 },
  { month: "Jun", count: 680 },
]

export function DashboardCharts() {
  const [memberData, setMemberData] = useState("")
  const [activityData, setActivityData] = useState("")
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    const fetchDashboardData = async () => {
      try {
        const [memberResponse, activityResponse] = await Promise.all([
          fetch(API_ENDPOINTS.dashboard.memberGrowth, {
            method: "GET",
            headers: {
              "Content-Type": "application/json",
              Accept: "application/json",
              "X-Requested-With": "XMLHttpRequest",
            },
            credentials: "include",
          }),
          fetch(API_ENDPOINTS.dashboard.weeklyActivity, {
            method: "GET",
            headers: {
              "Content-Type": "application/json",
              Accept: "application/json",
              "X-Requested-With": "XMLHttpRequest",
            },
            credentials: "include",
          }),
        ])

if (memberResponse.ok) {
          const memberResult = await memberResponse.json()
          if (memberResult.status === "SUCCESS" && memberResult.data) {
            setMemberData(memberResult.data)
          }
        }

if (activityResponse.ok) {
          const activityResult = await activityResponse.json()
          if (activityResult.status === "SUCCESS" && activityResult.data) {
            setActivityData(activityResult.data)
          }
        }
      } catch (error) {
        console.log("[v0] Dashboard data fetch failed, using mock data")
      } finally {
        setIsLoading(false)
      }
    }

fetchDashboardData()
  }, [])

return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
      {/* Members Growth Chart */}
      <div className="bg-white rounded-lg border border-gray-200 p-6">
        <h3 className="text-lg font-bold text-gray-900 mb-4">Members Growth</h3>
        {isLoading ? (
          <div className="h-[300px] bg-gray-100 rounded-lg animate-pulse" />
        ) : (
          <ResponsiveContainer width="100%" height={300}>
            <LineChart data={memberData}>
              <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
              <XAxis dataKey="month" stroke="#6b7280" />
              <YAxis stroke="#6b7280" />
              <Tooltip
                contentStyle={{
                  backgroundColor: "#fff",
                  border: "1px solid #e5e7eb",
                  borderRadius: "8px",
                }}
              />
              <Line
                type="monotone"
                dataKey="count"
                stroke="#003087"
                strokeWidth={2}
                dot={{ fill: "#CE1126", r: 5 }}
                activeDot={{ r: 7 }}
              />
            </LineChart>
          </ResponsiveContainer>
        )}
      </div>

{/* Weekly Activity Chart */}
      <div className="bg-white rounded-lg border border-gray-200 p-6">
        <h3 className="text-lg font-bold text-gray-900 mb-4">Weekly Activity</h3>
        {isLoading ? (
          <div className="h-[300px] bg-gray-100 rounded-lg animate-pulse" />
        ) : (
          <ResponsiveContainer width="100%" height={300}>
            <BarChart data={activityData}>
              <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
              <XAxis dataKey="day" stroke="#6b7280" />
              <YAxis stroke="#6b7280" />
              <Tooltip
                contentStyle={{
                  backgroundColor: "#fff",
                  border: "1px solid #e5e7eb",
                  borderRadius: "8px",
                }}
              />
              <Legend />
              <Bar dataKey="articles" fill="#003087" radius={[8, 8, 0, 0]} />
              <Bar dataKey="events" fill="#CE1126" radius={[8, 8, 0, 0]} />
            </BarChart>
          </ResponsiveContainer>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/branches/branches-list.tsx" isMerged="true"
"use client"

import { Users, Phone, Edit, Trash2, Search, ChevronLeft, ChevronRight, Plus, X } from "lucide-react"
import { useState, useEffect } from "react"
import BranchForm from "./branch-form"
import { API_BASE_URL, DEFAULT_HEADERS } from "@/lib/api-config"

export function BranchesList() {
  const [branches, setBranches] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

const [searchTerm, setSearchTerm] = useState("")
  const [currentPage, setCurrentPage] = useState(1)
  const [pageSize, setPageSize] = useState(6)
  const [showModal, setShowModal] = useState(false)
  const [selectedBranch, setSelectedBranch] = useState<any | null>(null)
  const [deleteConfirm, setDeleteConfirm] = useState<number | null>(null)
  const [isDeleting, setIsDeleting] = useState(false)

useEffect(() => {
    fetchBranches()
  }, [])

const fetchBranches = async () => {
    try {
      setLoading(true)
      const apiUrl = `${API_BASE_URL}/api/admin/branches`
      const response = await fetch(apiUrl, {
        method: "GET",
        headers: DEFAULT_HEADERS,
        credentials: "include",
      })

if (!response.ok) {
        throw new Error(`Failed to fetch branches: ${response.status}`)
      }

const result = await response.json()
      if (result.status === "SUCCESS" && result.branches) {
        const mappedBranches = result.branches.map((branch: any) => ({
          id: branch.id,
          name: branch.name,
          location: branch.location,
          phone: branch.phone,
          email: branch.email,
          members: branch.member_count,
          city: branch.city,
          state: branch.state,
          status: "Active",
        }))
        setBranches(mappedBranches)
      }
    } catch (err) {
      console.error("[v0] Error fetching branches:", err)
      setError(err instanceof Error ? err.message : "Failed to fetch branches")
    } finally {
      setLoading(false)
    }
  }

const filteredBranches = branches.filter(
    (branch) =>
      branch.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      branch.location.toLowerCase().includes(searchTerm.toLowerCase()),
  )

const totalPages = Math.ceil(filteredBranches.length / pageSize)
  const startIndex = (currentPage - 1) * pageSize
  const paginatedBranches = filteredBranches.slice(startIndex, startIndex + pageSize)

const handleFormSubmit = (data: any) => {
    console.log("Branch created/updated:", data)
    setShowModal(false)
    setSelectedBranch(null)
    fetchBranches()
  }

const handleFormCancel = () => {
    setShowModal(false)
    setSelectedBranch(null)
  }

const handleEditBranch = (branch: any) => {
    setSelectedBranch(branch)
    setShowModal(true)
  }

const handleDeleteBranch = async (branchId: number) => {
    setIsDeleting(true)
    try {
      const apiUrl = `${API_BASE_URL}/api/admin/branches/${branchId}`
      const response = await fetch(apiUrl, {
        method: "DELETE",
        headers: DEFAULT_HEADERS,
        credentials: "include",
      })

if (!response.ok) {
        throw new Error(`Delete failed with status ${response.status}`)
      }

setDeleteConfirm(null)
      fetchBranches()
    } catch (error) {
      console.error("[v0] Branch deletion error:", error)
      alert(`Failed to delete branch: ${error instanceof Error ? error.message : "Unknown error"}`)
    } finally {
      setIsDeleting(false)
    }
  }

if (loading) {
    return <div className="text-center py-8 text-gray-600">Loading branches...</div>
  }

if (error) {
    return <div className="text-center py-8 text-red-600">Error: {error}</div>
  }

return (
    <div className="space-y-6">
      <div className="flex gap-4 items-center">
        <div className="flex-1 relative">
          <Search className="absolute left-3 top-3 w-5 h-5 text-gray-400" />
          <input
            type="text"
            placeholder="Search branches or location..."
            value={searchTerm}
            onChange={(e) => {
              setSearchTerm(e.target.value)
              setCurrentPage(1)
            }}
            className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
          />
        </div>
        <button
          onClick={() => {
            setSelectedBranch(null)
            setShowModal(true)
          }}
          className="flex items-center gap-2 bg-[#CE1126] text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors font-medium text-sm whitespace-nowrap"
        >
          <Plus className="w-4 h-4" />
          Add Branch
        </button>
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {paginatedBranches.map((branch) => (
          <div
            key={branch.id}
            className="bg-white border border-gray-200 rounded-lg p-6 hover:shadow-lg transition-shadow"
          >
            <div className="flex items-start justify-between mb-4">
              <div className="w-10 h-10 bg-gradient-to-br from-[#CE1126] to-[#003087] rounded-lg flex items-center justify-center text-white font-bold">
                {branch.name.charAt(0)}
              </div>
              <div className="flex gap-2">
                <button
                  onClick={() => handleEditBranch(branch)}
                  className="p-2 text-gray-600 hover:text-[#003087] hover:bg-blue-50 rounded-lg transition-colors"
                >
                  <Edit className="w-4 h-4" />
                </button>
                <button
                  onClick={() => setDeleteConfirm(branch.id)}
                  className="p-2 text-gray-600 hover:text-[#CE1126] hover:bg-red-50 rounded-lg transition-colors"
                >
                  <Trash2 className="w-4 h-4" />
                </button>
              </div>
            </div>

<h4 className="font-bold text-gray-900 text-lg mb-4">{branch.name}</h4>

<div className="mb-3">
              <span className="px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                {branch.status}
              </span>
            </div>

<div className="space-y-3">
              <div className="text-sm">
                <p className="text-gray-600">Location</p>
                <p className="font-medium text-gray-900">{branch.location}</p>
              </div>
              <div className="flex items-center gap-2 text-gray-600">
                <Users className="w-4 h-4 text-[#003087]" />
                <span>{branch.members} members</span>
              </div>
              <div className="flex items-center gap-2 text-gray-600">
                <Phone className="w-4 h-4 text-[#CE1126]" />
                <span>{branch.phone}</span>
              </div>
            </div>
          </div>
        ))}
      </div>

{paginatedBranches.length === 0 && (
        <div className="text-center py-12 text-gray-600">
          No branches found. {filteredBranches.length === 0 && searchTerm ? "Try adjusting your search." : ""}
        </div>
      )}

{totalPages > 1 && (
        <div className="px-4 py-4 border-t border-gray-200 flex flex-col sm:flex-row items-center justify-between gap-4">
          <div className="text-sm text-gray-600">
            Showing {filteredBranches.length === 0 ? 0 : startIndex + 1} to{" "}
            {Math.min(startIndex + pageSize, filteredBranches.length)} of {filteredBranches.length} branches
          </div>
          <div className="flex items-center gap-4">
            <select
              value={pageSize}
              onChange={(e) => {
                setPageSize(Number(e.target.value))
                setCurrentPage(1)
              }}
              className="px-3 py-1 border border-gray-300 rounded text-sm"
            >
              <option value={6}>6 per page</option>
              <option value={12}>12 per page</option>
              <option value={18}>18 per page</option>
            </select>
            <div className="flex gap-2">
              <button
                onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
                disabled={currentPage === 1}
                className="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                <ChevronLeft className="w-4 h-4" />
              </button>
              <div className="flex items-center gap-1">
                {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => i + 1).map((page) => (
                  <button
                    key={page}
                    onClick={() => setCurrentPage(page)}
                    className={`w-8 h-8 rounded-lg text-sm font-medium transition-colors ${
                      currentPage === page ? "bg-[#CE1126] text-white" : "border border-gray-300 hover:bg-gray-50"
                    }`}
                  >
                    {page}
                  </button>
                ))}
              </div>
              <button
                onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
                disabled={currentPage === totalPages}
                className="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                <ChevronRight className="w-4 h-4" />
              </button>
            </div>
          </div>
        </div>
      )}

{showModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto">
            <div className="sticky top-0 bg-white border-b border-gray-200 p-6 flex items-center justify-between">
              <h2 className="text-2xl font-bold text-gray-900">{selectedBranch ? "Edit Branch" : "Add New Branch"}</h2>
              <button onClick={handleFormCancel} className="p-2 hover:bg-gray-100 rounded-lg transition-colors">
                <X className="w-6 h-6 text-gray-600" />
              </button>
            </div>
            <div className="p-6">
              <BranchForm branch={selectedBranch} onSubmit={handleFormSubmit} onCancel={handleFormCancel} />
            </div>
          </div>
        </div>
      )}

{deleteConfirm !== null && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-lg p-6 max-w-sm w-full">
            <h3 className="text-lg font-bold text-gray-900 mb-2">Delete Branch</h3>
            <p className="text-gray-600 mb-6">
              Are you sure you want to delete this branch? This action cannot be undone.
            </p>
            <div className="flex gap-3">
              <button
                onClick={() => handleDeleteBranch(deleteConfirm)}
                disabled={isDeleting}
                className="flex-1 bg-[#CE1126] text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors font-medium text-sm disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {isDeleting ? "Deleting..." : "Delete"}
              </button>
              <button
                onClick={() => setDeleteConfirm(null)}
                disabled={isDeleting}
                className="flex-1 bg-gray-200 text-gray-800 px-4 py-2 rounded-lg hover:bg-gray-300 transition-colors font-medium text-sm disabled:opacity-50 disabled:cursor-not-allowed"
              >
                Cancel
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/committees/client.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Plus, Users, Award, Clock, Edit2, Search, ChevronLeft, ChevronRight, Delete as Delete2 } from "lucide-react"
import Link from "next/link"
import { API_BASE_URL } from "@/lib/api-config"

interface Committee {
  id: number
  name: string
  description: string
  member_count: number
  chair_person: string
  meeting_frequency: string
  image: string | null
}

export default function CommitteesClient() {
  const [committees, setCommittees] = useState<Committee[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [searchTerm, setSearchTerm] = useState("")
  const [currentPage, setCurrentPage] = useState(1)
  const [pageSize, setPageSize] = useState(6)
  const [showDeleteConfirm, setShowDeleteConfirm] = useState<number | null>(null)

useEffect(() => {
    const fetchCommittees = async () => {
      try {
        setLoading(true)
        const searchQuery = searchTerm ? `?search=${encodeURIComponent(searchTerm)}` : ""
        const response = await fetch(`${API_BASE_URL}/api/admin/committees${searchQuery}`, {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            Accept: "application/json",
            "X-Requested-With": "XMLHttpRequest",
          },
          credentials: "include",
        })

if (!response.ok) {
          throw new Error(`Failed to fetch committees: ${response.statusText}`)
        }

const data = await response.json()

if (data.status === "SUCCESS" && data.committees) {
          setCommittees(data.committees)
        } else {
          setError("Invalid response format")
        }
      } catch (err) {
        console.error("[v0] Committees fetch error:", err)
        setError(err instanceof Error ? err.message : "Failed to load committees")
      } finally {
        setLoading(false)
      }
    }

fetchCommittees()
  }, [searchTerm])

const totalPages = Math.ceil(committees.length / pageSize)
  const startIndex = (currentPage - 1) * pageSize
  const paginatedCommittees = committees.slice(startIndex, startIndex + pageSize)

const handleDelete = async (id: number) => {
    try {
      const response = await fetch(`${API_BASE_URL}/api/admin/committees/${id}`, {
        method: "DELETE",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
          "X-Requested-With": "XMLHttpRequest",
        },
        credentials: "include",
      })

if (!response.ok) {
        throw new Error(`Failed to delete committee: ${response.statusText}`)
      }

const result = await response.json()

if (result.status === "SUCCESS") {
        setCommittees(committees.filter((c) => c.id !== id))
        setShowDeleteConfirm(null)
      } else {
        throw new Error(result.message || "Delete failed")
      }
    } catch (err) {
      console.error("[v0] Committee delete error:", err)
      setError(err instanceof Error ? err.message : "Failed to delete committee")
    }
  }

if (loading) {
    return (
      <div className="p-4 sm:p-6 space-y-6">
        <div className="animate-pulse space-y-4">
          <div className="h-10 bg-gray-200 rounded w-1/4"></div>
          <div className="h-32 bg-gray-200 rounded"></div>
        </div>
      </div>
    )
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Committees</h1>
          <p className="text-gray-600 mt-2">Manage committees and their members</p>
        </div>
        <Link
          href="/admin/committees/add"
          className="flex items-center gap-2 bg-[#CE1126] text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors font-medium text-sm w-full sm:w-auto justify-center sm:justify-start"
        >
          <Plus className="w-5 h-5" />
          Add Committee
        </Link>
      </div>

<div className="flex-1 relative">
        <Search className="absolute left-3 top-3 w-5 h-5 text-gray-400" />
        <input
          type="text"
          placeholder="Search committees or chairman..."
          value={searchTerm}
          onChange={(e) => {
            setSearchTerm(e.target.value)
            setCurrentPage(1)
          }}
          className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
        />
      </div>

{error && <div className="p-4 bg-red-50 text-red-700 rounded-lg text-sm">{error}</div>}

{committees.length === 0 && !error && (
        <div className="text-center py-12">
          <p className="text-gray-600">No committees found</p>
        </div>
      )}

<div className="grid gap-6">
        {paginatedCommittees.map((committee) => (
          <Card key={committee.id} className="hover:shadow-lg transition-shadow">
            <CardHeader className="pb-4">
              <div className="flex items-start justify-between gap-4">
                {committee.image && (
                  <img
                    src={committee.image || "/placeholder.svg"}
                    alt={committee.name}
                    className="w-20 h-20 rounded-lg object-cover flex-shrink-0"
                  />
                )}
                <div className="flex-1">
                  <CardTitle className="flex items-center gap-2 text-lg">
                    <Award className="w-5 h-5 text-[#CE1126]" />
                    {committee.name}
                  </CardTitle>
                  <CardDescription className="mt-1">{committee.description}</CardDescription>
                </div>
                <div className="flex gap-2">
                  <Link
                    href={`/admin/committees/edit/${committee.id}`}
                    className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
                  >
                    <Edit2 className="w-5 h-5 text-gray-400" />
                  </Link>
                  <button
                    onClick={() => setShowDeleteConfirm(committee.id)}
                    className="p-2 hover:bg-red-50 rounded-lg transition-colors"
                  >
                    <Delete2 className="w-5 h-5 text-red-400" />
                  </button>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
                <div>
                  <p className="text-sm text-gray-600 flex items-center gap-1">
                    <Users className="w-4 h-4" /> Members
                  </p>
                  <p className="text-lg font-semibold text-gray-900">{committee.member_count}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-600">Chair Person</p>
                  <p className="text-sm font-medium text-gray-900">{committee.chair_person}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-600 flex items-center gap-1">
                    <Clock className="w-4 h-4" /> Meetings
                  </p>
                  <p className="text-sm font-medium text-gray-900">{committee.meeting_frequency}</p>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

{showDeleteConfirm && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
          <Card className="w-full max-w-sm">
            <CardHeader>
              <CardTitle>Delete Committee</CardTitle>
              <CardDescription>
                Are you sure you want to delete this committee? This action cannot be undone.
              </CardDescription>
            </CardHeader>
            <CardContent className="flex gap-3">
              <button
                onClick={() => setShowDeleteConfirm(null)}
                className="flex-1 px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition-colors font-medium"
              >
                Cancel
              </button>
              <button
                onClick={() => handleDelete(showDeleteConfirm)}
                className="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors font-medium"
              >
                Delete
              </button>
            </CardContent>
          </Card>
        </div>
      )}

{totalPages > 1 && (
        <div className="px-4 py-4 border-t border-gray-200 flex flex-col sm:flex-row items-center justify-between gap-4 bg-white rounded-lg border border-gray-200">
          <div className="text-sm text-gray-600">
            Showing {committees.length === 0 ? 0 : startIndex + 1} to{" "}
            {Math.min(startIndex + pageSize, committees.length)} of {committees.length} committees
          </div>
          <div className="flex items-center gap-4">
            <select
              value={pageSize}
              onChange={(e) => {
                setPageSize(Number(e.target.value))
                setCurrentPage(1)
              }}
              className="px-3 py-1 border border-gray-300 rounded text-sm"
            >
              <option value={6}>6 per page</option>
              <option value={12}>12 per page</option>
              <option value={18}>18 per page</option>
            </select>
            <div className="flex gap-2">
              <button
                onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
                disabled={currentPage === 1}
                className="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                <ChevronLeft className="w-4 h-4" />
              </button>
              <div className="flex items-center gap-1">
                {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => i + 1).map((page) => (
                  <button
                    key={page}
                    onClick={() => setCurrentPage(page)}
                    className={`w-8 h-8 rounded-lg text-sm font-medium transition-colors ${
                      currentPage === page ? "bg-[#CE1126] text-white" : "border border-gray-300 hover:bg-gray-50"
                    }`}
                  >
                    {page}
                  </button>
                ))}
              </div>
              <button
                onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
                disabled={currentPage === totalPages}
                className="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                <ChevronRight className="w-4 h-4" />
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/committees/add/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"
import CommitteeForm from "@/components/admin/committees/committee-form"
import { API_BASE_URL } from "@/lib/api-config"

export default function AddCommitteePage() {
  const router = useRouter()
  const [errorMsg, setErrorMsg] = useState<string | null>(null)

const handleSubmit = async (formData: FormData) => {
    try {
      setErrorMsg(null)
      const response = await fetch(`${API_BASE_URL}/api/admin/committees`, {
        method: "POST",
        body: formData,
        headers: {
          Accept: "application/json",
          "X-Requested-With": "XMLHttpRequest",
        },
        credentials: "include",
      })

if (!response.ok) {
        throw new Error(`Failed to create committee: ${response.statusText}`)
      }

const data = await response.json()
      router.push("/admin/committees")
    } catch (error) {
      const message = error instanceof Error ? error.message : "Failed to create committee"
      setErrorMsg(message)
      throw error
    }
  }

return (
    <div className="p-4 sm:p-6">
      <div className="mb-6">
        <Link
          href="/admin/committees"
          className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 font-medium mb-6"
        >
          <ArrowLeft className="w-5 h-5" />
          Back to Committees
        </Link>
        <h1 className="text-3xl font-bold text-gray-900">Add New Committee</h1>
        <p className="text-gray-600 mt-2">Fill in the details to create a new committee</p>
      </div>

{errorMsg && <div className="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700">{errorMsg}</div>}

<div className="bg-white rounded-lg shadow-lg p-6">
        <CommitteeForm onSubmit={handleSubmit} onCancel={() => router.push("/admin/committees")} />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/memberships/page.tsx" isMerged="true"
"use client"

import { Card, CardContent } from "@/components/ui/card"
import { Plus, Users, TrendingUp, DollarSign, ArrowRight, Loader } from "lucide-react"
import Link from "next/link"
import { useEffect, useState } from "react"
import { API_ENDPOINTS } from "@/lib/api-config"

interface MembershipStats {
  total_members: number
  active_memberships: number
  new_this_month: number
  pending_applications: number
  under_review: number
}

export default function MembershipsPage() {
  const [stats, setStats] = useState<MembershipStats | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    const fetchMembershipStats = async () => {
      try {
        setLoading(true)
        setError(null)

const response = await fetch(API_ENDPOINTS.dashboard.members, {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            Accept: "application/json",
            "X-Requested-With": "XMLHttpRequest",
          },
          credentials: "include",
        })

if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`)
        }

const data = await response.json()

if (data.status === "SUCCESS" && data.data) {
          setStats(data.data)
        } else {
          // Fallback to mock data
          setStats({
            total_members: 8560,
            active_memberships: 7840,
            new_this_month: 245,
            pending_applications: 3,
            under_review: 0,
          })
        }
      } catch (err) {
        // Use fallback mock data on error
        setStats({
          total_members: 8560,
          active_memberships: 7840,
          new_this_month: 245,
          pending_applications: 3,
          under_review: 0,
        })
        setError(null)
      } finally {
        setLoading(false)
      }
    }

fetchMembershipStats()
  }, [])

const membershipStats = [
    {
      label: "Total Members",
      value: stats?.total_members.toLocaleString() || "0",
      icon: Users,
      color: "bg-blue-100 text-[#003087]",
    },
    {
      label: "Active Memberships",
      value: stats?.active_memberships.toLocaleString() || "0",
      icon: TrendingUp,
      color: "bg-green-100 text-green-700",
    },
    {
      label: "New This Month",
      value: stats?.new_this_month.toLocaleString() || "0",
      icon: Plus,
      color: "bg-amber-100 text-amber-700",
    },
    {
      label: "Annual Revenue",
      value: "RM 642,500",
      icon: DollarSign,
      color: "bg-purple-100 text-purple-700",
    },
  ]

const membershipTypes = [
    { type: "Ordinary Member", count: 5200, fee: "RM 50/year", status: "active" },
    { type: "Life Member", count: 1840, fee: "RM 500 (one-time)", status: "active" },
    { type: "Student Member", count: 890, fee: "RM 20/year", status: "active" },
    { type: "Honorary Member", count: 630, fee: "Complimentary", status: "active" },
  ]

if (loading) {
    return (
      <div className="p-4 sm:p-6 space-y-6">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Memberships</h1>
          <p className="text-gray-600 mt-2">Monitor and manage member registrations</p>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          {[1, 2, 3, 4].map((i) => (
            <div key={i} className="bg-white rounded-lg border border-gray-200 p-6 animate-pulse">
              <div className="flex items-center justify-between">
                <div className="flex-1">
                  <div className="h-4 bg-gray-200 rounded w-24 mb-2"></div>
                  <div className="h-8 bg-gray-200 rounded w-16 mt-2"></div>
                </div>
                <Loader className="w-6 h-6 text-gray-400 animate-spin" />
              </div>
            </div>
          ))}
        </div>
      </div>
    )
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      <div>
        <h1 className="text-3xl font-bold text-gray-900">Memberships</h1>
        <p className="text-gray-600 mt-2">Monitor and manage member registrations</p>
      </div>

{/* Sub-sections Navigation */}
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <Link href="/admin/memberships/pending-applications" className="group">
          <Card className="h-full hover:shadow-lg transition-all hover:border-[#CE1126]">
            <CardContent className="pt-6">
              <div className="flex items-start justify-between mb-4">
                <div>
                  <h3 className="text-lg font-semibold text-gray-900">Pending Applications</h3>
                  <p className="text-sm text-gray-600 mt-1">Review new membership applications</p>
                </div>
                <ArrowRight className="w-5 h-5 text-[#CE1126] group-hover:translate-x-1 transition" />
              </div>
              <div className="text-2xl font-bold text-[#CE1126]">{stats?.pending_applications || 0}</div>
              <p className="text-xs text-gray-600 mt-1">Pending review</p>
            </CardContent>
          </Card>
        </Link>

<Link href="/admin/memberships/masterfile" className="group">
          <Card className="h-full hover:shadow-lg transition-all hover:border-[#003087]">
            <CardContent className="pt-6">
              <div className="flex items-start justify-between mb-4">
                <div>
                  <h3 className="text-lg font-semibold text-gray-900">Membership Masterfile</h3>
                  <p className="text-sm text-gray-600 mt-1">View and manage all members</p>
                </div>
                <ArrowRight className="w-5 h-5 text-[#003087] group-hover:translate-x-1 transition" />
              </div>
              <div className="text-2xl font-bold text-[#003087]">{stats?.total_members.toLocaleString() || "0"}</div>
              <p className="text-xs text-gray-600 mt-1">Total members</p>
            </CardContent>
          </Card>
        </Link>
      </div>

{/* Stats Grid */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        {membershipStats.map((stat, idx) => {
          const Icon = stat.icon
          return (
            <Card key={idx} className="hover:shadow-lg transition-shadow">
              <CardContent className="pt-6">
                <div className="flex items-start justify-between">
                  <div>
                    <p className="text-sm text-gray-600">{stat.label}</p>
                    <p className="text-2xl font-bold text-gray-900 mt-1">{stat.value}</p>
                  </div>
                  <div className={`p-3 rounded-lg ${stat.color}`}>
                    <Icon className="w-6 h-6" />
                  </div>
                </div>
              </CardContent>
            </Card>
          )
        })}
      </div>

{/* Membership Types */}
      <div className="space-y-4">
        <h2 className="text-xl font-bold text-gray-900">Membership Types</h2>
        {membershipTypes.map((type, idx) => (
          <Card key={idx} className="hover:shadow-lg transition-shadow">
            <CardContent className="pt-6">
              <div className="flex items-center justify-between flex-wrap gap-4">
                <div>
                  <p className="font-semibold text-gray-900">{type.type}</p>
                  <p className="text-sm text-gray-600 mt-1">{type.fee}</p>
                </div>
                <div className="text-right">
                  <p className="text-2xl font-bold text-[#CE1126]">{type.count.toLocaleString()}</p>
                  <p className="text-xs text-gray-600 mt-1">Active Members</p>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/memberships/masterfile/members-client.tsx" isMerged="true"
"use client"

import { Card } from "@/components/ui/card"
import { Search, Plus, Eye, Edit, Trash2, Filter, Download, ArrowLeft } from "lucide-react"
import Link from "next/link"
import { useState, useEffect, useCallback } from "react"
import { API_ENDPOINTS } from "@/lib/api-config"

interface Member {
  id: number
  membership_no: string
  name: string
  email: string
  phone?: string
  membershipType?: string
  branch: string
  join_date: string
  status: string
}

interface ApiResponse {
  status: string
  members: Member[]
  pagination: {
    page: number
    total_pages: number
    total_records: number
  }
}

interface Props {
  initialMembers: Member[]
}

export default function MembershipMasterfileClient({ initialMembers }: Props) {
  const [currentPage, setCurrentPage] = useState(1)
  const [itemsPerPage, setItemsPerPage] = useState(10)
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedBranch, setSelectedBranch] = useState("all")
  const [selectedStatus, setSelectedStatus] = useState("all")
  const [members, setMembers] = useState<Member[]>(initialMembers)
  const [isLoading, setIsLoading] = useState(false)
  const [exportLoading, setExportLoading] = useState(false)
  const [totalRecords, setTotalRecords] = useState(0)

const fetchMembers = useCallback(async () => {
    try {
      setIsLoading(true)

// Build query parameters for search, pagination, and filters
      const queryParams = new URLSearchParams()
      if (searchQuery) queryParams.append("search", searchQuery)
      queryParams.append("page", currentPage.toString())
      queryParams.append("limit", itemsPerPage.toString())
      if (selectedBranch !== "all") queryParams.append("branch", selectedBranch)
      if (selectedStatus !== "all") queryParams.append("status", selectedStatus)

const url = `${API_ENDPOINTS.memberships.members.searchAndFilter}?${queryParams.toString()}`

const response = await fetch(url, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
          "X-Requested-With": "XMLHttpRequest",
        },
        credentials: "include",
      })

if (!response.ok) {
        throw new Error(`API error: ${response.status}`)
      }

const data: ApiResponse = await response.json()

if (data.status === "SUCCESS" && data.members) {
        setMembers(data.members)
        if (data.pagination) {
          setTotalRecords(data.pagination.total_records)
        } else {
          setMembers(initialMembers)
        }
      }
    } catch (err) {
      setMembers(initialMembers)
    } finally {
      setIsLoading(false)
    }
  }, [currentPage, itemsPerPage, searchQuery, selectedBranch, selectedStatus, initialMembers])

useEffect(() => {
    fetchMembers()
  }, [fetchMembers])

const handleExportMembers = async () => {
    try {
      setExportLoading(true)
      const response = await fetch(API_ENDPOINTS.memberships.members.exportList, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
          "X-Requested-With": "XMLHttpRequest",
        },
        credentials: "include",
      })

if (response.ok) {
        const blob = await response.blob()
        const url = window.URL.createObjectURL(blob)
        const a = document.createElement("a")
        a.href = url
        a.download = `members-export-${new Date().toISOString().split("T")[0]}.csv`
        document.body.appendChild(a)
        a.click()
        window.URL.revokeObjectURL(url)
        document.body.removeChild(a)
      }
    } catch (err) {
      // Export error silently
    } finally {
      setExportLoading(false)
    }
  }

const totalPages = Math.ceil(totalRecords / itemsPerPage)

return (
    <div className="p-4 sm:p-6 space-y-6">
      {/* Header */}
      <div className="flex items-center gap-3 mb-6">
        <Link href="/admin/memberships" className="p-2 hover:bg-gray-100 rounded-lg transition">
          <ArrowLeft className="w-5 h-5 text-gray-700" />
        </Link>
        <div className="flex-1">
          <h1 className="text-3xl font-bold text-gray-900">Membership Masterfile</h1>
          <p className="text-gray-600 mt-1">View and manage all members</p>
        </div>
        <Link
          href="/admin/memberships/masterfile/add"
          className="flex items-center gap-2 bg-[#CE1126] text-white px-4 py-2 rounded-lg hover:bg-red-700 transition font-medium w-auto"
        >
          <Plus className="w-5 h-5" />
          <span className="hidden sm:inline">Add Member</span>
        </Link>
      </div>

{/* Search and Filters */}
      <div className="space-y-4">
        <div className="flex items-center gap-2 bg-white p-4 rounded-lg border border-gray-200">
          <Search className="w-5 h-5 text-gray-400" />
          <input
            type="text"
            placeholder="Search by name, IC, or email..."
            value={searchQuery}
            onChange={(e) => {
              setSearchQuery(e.target.value)
              setCurrentPage(1)
            }}
            className="flex-1 outline-none text-gray-900"
          />
        </div>

<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
          <select
            value={selectedBranch}
            onChange={(e) => {
              setSelectedBranch(e.target.value)
              setCurrentPage(1)
            }}
            className="px-4 py-2 border border-gray-300 rounded-lg bg-white"
          >
            <option value="all">All Branches</option>
            <option value="Kuala Lumpur">Kuala Lumpur</option>
            <option value="Penang">Penang</option>
            <option value="Johor">Johor</option>
          </select>

<select
            value={selectedStatus}
            onChange={(e) => {
              setSelectedStatus(e.target.value)
              setCurrentPage(1)
            }}
            className="px-4 py-2 border border-gray-300 rounded-lg bg-white"
          >
            <option value="all">All Statuses</option>
            <option value="ACTIVE">Active</option>
            <option value="INACTIVE">Inactive</option>
            <option value="PENDING">Pending</option>
          </select>

<div className="flex gap-2">
            <button className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition">
              <Filter className="w-4 h-4" />
              <span className="hidden sm:inline">Filter</span>
            </button>
            <button
              onClick={handleExportMembers}
              disabled={exportLoading}
              className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition disabled:opacity-50 disabled:cursor-not-allowed"
            >
              <Download className="w-4 h-4" />
              <span className="hidden sm:inline">{exportLoading ? "Exporting..." : "Export"}</span>
            </button>
          </div>
        </div>
      </div>

{/* Stats */}
      <Card className="bg-gradient-to-r from-[#CE1126] to-red-700 text-white">
        <div className="p-6">
          <p className="text-sm opacity-90">Total Members: {totalRecords}</p>
          <p className="text-3xl font-bold mt-2">{totalRecords}</p>
        </div>
      </Card>

{/* Members Table */}
      <div className="overflow-x-auto bg-white rounded-lg border border-gray-200">
        <table className="w-full">
          <thead>
            <tr className="border-b border-gray-200 bg-gray-50">
              <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">Membership No</th>
              <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">Name</th>
              <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">Email</th>
              <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">Branch</th>
              <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">Join Date</th>
              <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">Status</th>
              <th className="px-4 py-3 text-center text-sm font-semibold text-gray-700">Actions</th>
            </tr>
          </thead>
          <tbody>
            {isLoading ? (
              <tr>
                <td colSpan={7} className="px-4 py-12 text-center text-gray-600">
                  <div className="flex items-center justify-center">
                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[#CE1126]"></div>
                    <span className="ml-2">Loading members...</span>
                  </div>
                </td>
              </tr>
            ) : members.length === 0 ? (
              <tr>
                <td colSpan={7} className="px-4 py-12 text-center text-gray-600">
                  No members found matching your criteria.
                </td>
              </tr>
            ) : (
              members.map((member) => (
                <tr key={member.id} className="border-b border-gray-200 hover:bg-gray-50 transition">
                  <td className="px-4 py-3 text-sm font-medium text-gray-900">{member.membership_no}</td>
                  <td className="px-4 py-3 text-sm font-medium text-gray-900">{member.name}</td>
                  <td className="px-4 py-3 text-sm text-gray-600">{member.email}</td>
                  <td className="px-4 py-3 text-sm text-gray-600">{member.branch}</td>
                  <td className="px-4 py-3 text-sm text-gray-600">{member.join_date}</td>
                  <td className="px-4 py-3 text-sm">
                    <span
                      className={`px-2 py-1 rounded text-xs font-medium ${
                        member.status === "ACTIVE"
                          ? "bg-green-100 text-green-800"
                          : member.status === "INACTIVE"
                            ? "bg-gray-100 text-gray-800"
                            : "bg-yellow-100 text-yellow-800"
                      }`}
                    >
                      {member.status}
                    </span>
                  </td>
                  <td className="px-4 py-3 text-center">
                    <div className="flex items-center justify-center gap-2">
                      <Link
                        href={`/admin/memberships/masterfile/view/${member.id}`}
                        className="inline-flex items-center justify-center p-2 hover:bg-blue-100 rounded transition"
                      >
                        <Eye className="w-4 h-4 text-blue-600" />
                      </Link>
                      <Link
                        href={`/admin/memberships/masterfile/edit/${member.id}`}
                        className="inline-flex items-center justify-center p-2 hover:bg-amber-100 rounded transition"
                      >
                        <Edit className="w-4 h-4 text-amber-600" />
                      </Link>
                      <button className="inline-flex items-center justify-center p-2 hover:bg-red-100 rounded transition">
                        <Trash2 className="w-4 h-4 text-red-600" />
                      </button>
                    </div>
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>

{/* Pagination */}
      <div className="flex flex-col sm:flex-row items-center justify-between gap-4 pt-4 border-t border-gray-200">
        <div className="text-sm text-gray-600">
          Showing page {currentPage} of {totalPages} ({totalRecords} total members)
        </div>
        <div className="flex items-center gap-2">
          <select
            value={itemsPerPage}
            onChange={(e) => {
              setItemsPerPage(Number(e.target.value))
              setCurrentPage(1)
            }}
            className="px-3 py-1 border border-gray-300 rounded-lg bg-white text-sm"
          >
            <option value="10">10 per page</option>
            <option value="25">25 per page</option>
            <option value="50">50 per page</option>
            <option value="100">100 per page</option>
          </select>
          <button
            onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
            disabled={currentPage === 1}
            className="px-3 py-1 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
          >
            Previous
          </button>
          <div className="flex items-center gap-1">
            {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
              const page = i + 1
              return (
                <button
                  key={page}
                  onClick={() => setCurrentPage(page)}
                  className={`px-3 py-1 rounded-lg text-sm ${
                    currentPage === page
                      ? "bg-[#CE1126] text-white font-medium"
                      : "border border-gray-300 hover:bg-gray-50"
                  }`}
                >
                  {page}
                </button>
              )
            })}
          </div>
          <button
            onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
            disabled={currentPage === totalPages}
            className="px-3 py-1 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
          >
            Next
          </button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/memberships/masterfile/edit/[id]/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { ArrowLeft } from "lucide-react"
import Link from "next/link"
import { useState } from "react"
import { useRouter } from "next/navigation"
import { apiCall } from "@/lib/api-utils"
import { API_ENDPOINTS } from "@/lib/api-config"

export default function EditMemberPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const memberId = Number(params.id)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [submitError, setSubmitError] = useState<string | null>(null)
  const [formData, setFormData] = useState({
    name: "Ahmad Abdullah",
    email: "ahmad@mcc.org.my",
    phone: "+60 12-345-6789",
    idNumber: "123456-78-9012",
    membershipType: "Ordinary Member",
    branch: "Kuala Lumpur",
    address: "123 Merdeka Street",
    city: "Kuala Lumpur",
    state: "Federal Territory",
    zipCode: "50050",
    joinDate: "2023-05-15",
    status: "active",
  })

const [errors, setErrors] = useState<Record<string, string>>({})

const validateForm = () => {
    const newErrors: Record<string, string> = {}
    if (!formData.name.trim()) newErrors.name = "Name is required"
    if (!formData.email.trim()) newErrors.email = "Email is required"
    if (!formData.phone.trim()) newErrors.phone = "Phone is required"
    setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!validateForm()) return

try {
      setIsSubmitting(true)
      setSubmitError(null)

const statusResponse = await apiCall(API_ENDPOINTS.memberships.members.updateStatus(memberId), {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
          "X-Requested-With": "XMLHttpRequest",
        },
        body: JSON.stringify({
          status: formData.status.toUpperCase(),
        }),
      })

if (statusResponse.status === "SUCCESS") {
        router.push("/admin/memberships/masterfile")
      } else {
        setSubmitError(statusResponse.message || "Failed to update member status")
      }
    } catch (err) {
      setSubmitError(err instanceof Error ? err.message : "Failed to update member")
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <div className="p-4 sm:p-6">
      {/* Header */}
      <div className="flex items-center gap-3 mb-6">
        <Link href="/admin/memberships/masterfile" className="p-2 hover:bg-gray-100 rounded-lg transition">
          <ArrowLeft className="w-5 h-5 text-gray-700" />
        </Link>
        <h1 className="text-3xl font-bold text-gray-900">Edit Member</h1>
      </div>

{/* Form */}
      <div className="bg-white rounded-lg border border-gray-200 p-6">
        {submitError && (
          <div className="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg">
            <p className="text-red-700 text-sm">{submitError}</p>
          </div>
        )}

<form onSubmit={handleSubmit} className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {/* Personal Information */}
            <div className="md:col-span-2">
              <h2 className="text-lg font-semibold text-gray-900 mb-4">Personal Information</h2>
            </div>

<div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Full Name *</label>
              <input
                type="text"
                value={formData.name}
                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
              />
              {errors.name && <p className="text-red-500 text-sm mt-1">{errors.name}</p>}
            </div>

<div>
              <label className="block text-sm font-medium text-gray-700 mb-2">ID Number</label>
              <input
                type="text"
                value={formData.idNumber}
                onChange={(e) => setFormData({ ...formData, idNumber: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
              />
            </div>

<div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Email Address *</label>
              <input
                type="email"
                value={formData.email}
                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
              />
              {errors.email && <p className="text-red-500 text-sm mt-1">{errors.email}</p>}
            </div>

<div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Phone Number *</label>
              <input
                type="tel"
                value={formData.phone}
                onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
              />
              {errors.phone && <p className="text-red-500 text-sm mt-1">{errors.phone}</p>}
            </div>

{/* Address Information */}
            <div className="md:col-span-2 pt-4 border-t border-gray-200">
              <h2 className="text-lg font-semibold text-gray-900 mb-4">Address Information</h2>
            </div>

<div className="md:col-span-2">
              <label className="block text-sm font-medium text-gray-700 mb-2">Address</label>
              <textarea
                value={formData.address}
                onChange={(e) => setFormData({ ...formData, address: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
                rows={2}
              />
            </div>

{/* Buttons */}
          <div className="flex gap-3 pt-6 border-t border-gray-200">
            <button
              type="submit"
              disabled={isSubmitting}
              className="bg-[#CE1126] text-white px-4 py-2 rounded-lg hover:bg-red-700 transition font-medium whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {isSubmitting ? "Updating..." : "Update Member"}
            </button>
            <Link
              href="/admin/memberships/masterfile"
              className="bg-gray-200 text-gray-800 px-4 py-2 rounded-lg hover:bg-gray-300 transition font-medium text-center whitespace-nowrap"
            >
              Cancel
            </Link>
          </div>
        </form>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/memberships/pending-applications/client.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Eye, Download, Filter, ArrowLeft, Search } from "lucide-react"
import Link from "next/link"
import { apiCall } from "@/lib/api-utils"
import { API_ENDPOINTS } from "@/lib/api-config"

interface PendingApplication {
  id: number
  full_name: string
  email: string
  phone: string
  branch: string
  status: "PENDING" | "REVIEWING" | "APPROVED" | "REJECTED"
  submitted_on: string
}

const MOCK_PENDING_APPLICATIONS: PendingApplication[] = [
  {
    id: 1,
    full_name: "Ahmad bin Abdullah",
    email: "ahmad@email.com",
    phone: "+60123456789",
    branch: "Kuala Lumpur",
    status: "PENDING",
    submitted_on: "2026-01-15",
  },
  {
    id: 2,
    full_name: "Fatimah binti Hassan",
    email: "fatimah@email.com",
    phone: "+60187654321",
    branch: "Penang",
    status: "REVIEWING",
    submitted_on: "2026-01-14",
  },
  {
    id: 3,
    full_name: "Muhammad Ali",
    email: "ali@email.com",
    phone: "+60147258369",
    branch: "Johor",
    status: "PENDING",
    submitted_on: "2026-01-13",
  },
]

export default function PendingApplicationsClient() {
  const [applications, setApplications] = useState<PendingApplication[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [currentPage, setCurrentPage] = useState(1)
  const [itemsPerPage, setItemsPerPage] = useState(10)
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedStatus, setSelectedStatus] = useState("all")

useEffect(() => {
    const fetchApplications = async () => {
      try {
        setIsLoading(true)
        setError(null)
        const response = await apiCall(API_ENDPOINTS.memberships.pendingApplications)
        console.log("[v0] Fetched applications:", response)
        if (response.status === "SUCCESS" && response.applications) {
          setApplications(response.applications)
        } else {
          console.log("[v0] Invalid response format, using fallback data")
          setApplications(MOCK_PENDING_APPLICATIONS)
          setError("Using sample data. Unable to connect to server.")
        }
      } catch (err) {
        console.error("[v0] Error fetching applications:", err)
        console.log("[v0] Setting fallback mock data due to API error")
        setApplications(MOCK_PENDING_APPLICATIONS)
        setError("Using sample data. Unable to connect to server.")
      } finally {
        setIsLoading(false)
      }
    }

fetchApplications()
  }, [])

const filteredApplications = applications.filter((app) => {
    const matchSearch =
      app.full_name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      app.email.toLowerCase().includes(searchQuery.toLowerCase())
    const matchStatus = selectedStatus === "all" || app.status === selectedStatus
    return matchSearch && matchStatus
  })

const totalPages = Math.ceil(filteredApplications.length / itemsPerPage)
  const startIndex = (currentPage - 1) * itemsPerPage
  const paginatedApplications = filteredApplications.slice(startIndex, startIndex + itemsPerPage)

const handleExport = () => {
    const csv = [
      ["Name", "Email", "Phone", "Branch", "Status", "Submitted On"],
      ...filteredApplications.map((app) => [
        app.full_name,
        app.email,
        app.phone,
        app.branch,
        app.status,
        app.submitted_on,
      ]),
    ]
      .map((row) => row.map((cell) => `"${cell}"`).join(","))
      .join("\n")

const blob = new Blob([csv], { type: "text/csv" })
    const url = window.URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = "pending-applications.csv"
    a.click()
    window.URL.revokeObjectURL(url)
  }

if (isLoading) {
    return (
      <div className="p-4 sm:p-6 space-y-6">
        <div className="flex items-center gap-3 mb-6">
          <Link href="/admin/memberships" className="p-2 hover:bg-gray-100 rounded-lg transition">
            <ArrowLeft className="w-5 h-5 text-gray-700" />
          </Link>
          <div>
            <h1 className="text-3xl font-bold text-gray-900">Pending Applications</h1>
            <p className="text-gray-600 mt-1">Review and manage membership applications</p>
          </div>
        </div>
        <div className="text-center py-12">
          <p className="text-gray-600">Loading applications...</p>
        </div>
      </div>
    )
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      {/* Error Banner */}
      {error && (
        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
          <p className="text-sm text-yellow-800">{error}</p>
        </div>
      )}

{/* Header */}
      <div className="flex items-center gap-3 mb-6">
        <Link href="/admin/memberships" className="p-2 hover:bg-gray-100 rounded-lg transition">
          <ArrowLeft className="w-5 h-5 text-gray-700" />
        </Link>
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Pending Applications</h1>
          <p className="text-gray-600 mt-1">Review and manage membership applications</p>
        </div>
      </div>

{/* Stats */}
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <Card>
          <CardContent className="pt-6">
            <div className="text-center">
              <p className="text-sm text-gray-600">Total Pending</p>
              <p className="text-3xl font-bold text-[#CE1126] mt-2">{applications.length}</p>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="pt-6">
            <div className="text-center">
              <p className="text-sm text-gray-600">Under Review</p>
              <p className="text-3xl font-bold text-[#003087] mt-2">
                {applications.filter((a) => a.status === "REVIEWING").length}
              </p>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="pt-6">
            <div className="text-center">
              <p className="text-sm text-gray-600">Approved</p>
              <p className="text-3xl font-bold text-green-600 mt-2">
                {applications.filter((a) => a.status === "APPROVED").length}
              </p>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Search and Filters */}
      <div className="space-y-4">
        <div className="flex items-center gap-2 bg-white p-3 rounded-lg border border-gray-200">
          <Search className="w-5 h-5 text-gray-400" />
          <input
            type="text"
            placeholder="Search by name or email..."
            value={searchQuery}
            onChange={(e) => {
              setSearchQuery(e.target.value)
              setCurrentPage(1)
            }}
            className="flex-1 outline-none text-gray-900"
          />
        </div>

<div className="flex flex-col sm:flex-row gap-3">
          <select
            value={selectedStatus}
            onChange={(e) => {
              setSelectedStatus(e.target.value)
              setCurrentPage(1)
            }}
            className="px-4 py-2 border border-gray-300 rounded-lg bg-white"
          >
            <option value="all">All Status</option>
            <option value="PENDING">Pending</option>
            <option value="REVIEWING">Reviewing</option>
            <option value="APPROVED">Approved</option>
            <option value="REJECTED">Rejected</option>
          </select>
          <button className="flex items-center gap-2 px-4 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition w-auto">
            <Filter className="w-4 h-4" />
            <span>Filter</span>
          </button>
          <button
            onClick={handleExport}
            className="flex items-center gap-2 px-4 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition ml-auto w-auto"
          >
            <Download className="w-4 h-4" />
            <span>Export</span>
          </button>
        </div>
      </div>

{/* Applications Table */}
      <div className="overflow-x-auto">
        <table className="w-full">
          <thead>
            <tr className="border-b border-gray-200 bg-gray-50">
              <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">Name</th>
              <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">Email</th>
              <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">Phone</th>
              <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">Branch</th>
              <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">Submitted</th>
              <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">Status</th>
              <th className="px-4 py-3 text-center text-sm font-semibold text-gray-700">Actions</th>
            </tr>
          </thead>
          <tbody>
            {paginatedApplications.map((app) => (
              <tr key={app.id} className="border-b border-gray-200 hover:bg-gray-50 transition">
                <td className="px-4 py-3 text-sm text-gray-900">{app.full_name}</td>
                <td className="px-4 py-3 text-sm text-gray-600">{app.email}</td>
                <td className="px-4 py-3 text-sm text-gray-600">{app.phone}</td>
                <td className="px-4 py-3 text-sm text-gray-600">{app.branch}</td>
                <td className="px-4 py-3 text-sm text-gray-600">{new Date(app.submitted_on).toLocaleDateString()}</td>
                <td className="px-4 py-3">
                  <span
                    className={`px-3 py-1 rounded-full text-xs font-medium whitespace-nowrap ${getStatusBadge(app.status)}`}
                  >
                    {app.status.charAt(0) + app.status.slice(1).toLowerCase()}
                  </span>
                </td>
                <td className="px-4 py-3 text-center">
                  <Link
                    href={`/admin/memberships/pending-applications/view/${app.id}`}
                    className="inline-flex items-center justify-center p-2 hover:bg-gray-200 rounded transition"
                  >
                    <Eye className="w-4 h-4 text-gray-600" />
                  </Link>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

{paginatedApplications.length === 0 && (
        <div className="text-center py-12">
          <p className="text-gray-600">No pending applications found.</p>
        </div>
      )}

<div className="flex flex-col sm:flex-row items-center justify-between gap-4 pt-4 border-t border-gray-200">
        <div className="text-sm text-gray-600">
          Showing {startIndex + 1} to {Math.min(startIndex + itemsPerPage, filteredApplications.length)} of{" "}
          {filteredApplications.length} applications
        </div>
        <div className="flex items-center gap-2">
          <select
            value={itemsPerPage}
            onChange={(e) => {
              setItemsPerPage(Number(e.target.value))
              setCurrentPage(1)
            }}
            className="px-3 py-1 border border-gray-300 rounded-lg bg-white text-sm"
          >
            <option value="10">10 per page</option>
            <option value="25">25 per page</option>
            <option value="50">50 per page</option>
            <option value="100">100 per page</option>
          </select>
          <button
            onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
            disabled={currentPage === 1}
            className="px-3 py-1 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
          >
            Previous
          </button>
          <div className="flex items-center gap-1">
            {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
              <button
                key={page}
                onClick={() => setCurrentPage(page)}
                className={`px-3 py-1 rounded-lg text-sm ${
                  currentPage === page
                    ? "bg-[#CE1126] text-white font-medium"
                    : "border border-gray-300 hover:bg-gray-50"
                }`}
              >
                {page}
              </button>
            ))}
          </div>
          <button
            onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
            disabled={currentPage === totalPages}
            className="px-3 py-1 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
          >
            Next
          </button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/media-resources/photo-gallery/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Card, CardContent } from "@/components/ui/card"
import { Plus, Eye, Edit2, Trash2, ArrowLeft, ImageIcon, AlertCircle } from "lucide-react"
import { API_ENDPOINTS } from "@/lib/api-config"

interface PhotoItem {
  id: number
  title: string
  description: string
  category: string
  image_url: string
  status: string
  published_date: string
}

export default function PhotoGalleryPage() {
  const [photos, setPhotos] = useState<PhotoItem[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

const mockPhotos: PhotoItem[] = [
    {
      id: 1,
      title: "Official Engagements in Malaysia",
      description: "Ministries, Agencies & Royal Audience",
      category: "Events",
      image_url: "/official-engagement.jpg",
      status: "ACTIVE",
      published_date: "2025-12-11",
    },
    {
      id: 2,
      title: "Community Service Day",
      description: "Annual community outreach program",
      category: "Community",
      image_url: "/community-service.jpg",
      status: "ACTIVE",
      published_date: "2025-12-10",
    },
    {
      id: 3,
      title: "Youth Program Launch",
      description: "New youth development initiative",
      category: "Youth",
      image_url: "/youth-program.jpg",
      status: "ACTIVE",
      published_date: "2025-12-09",
    },
  ]

useEffect(() => {
    fetchPhotos()
  }, [])

const fetchPhotos = async () => {
    try {
      setLoading(true)
      const response = await fetch(API_ENDPOINTS.gallery.list, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
          "X-Requested-With": "XMLHttpRequest",
        },
        credentials: "include",
      })

if (!response.ok) {
        throw new Error("Failed to fetch gallery")
      }

const data = await response.json()
      setPhotos(Array.isArray(data) ? data : data.data || [])
      setError(null)
    } catch (err) {
      console.error("Error fetching gallery:", err)
      setPhotos(mockPhotos)
      setError("Using sample data. Unable to connect to server.")
    } finally {
      setLoading(false)
    }
  }

const handleDelete = async (id: number) => {
    if (!confirm("Are you sure you want to delete this image?")) return

try {
      const response = await fetch(API_ENDPOINTS.gallery.delete(id), {
        method: "DELETE",
        headers: {
          "Content-Type": "application/json",
          "X-Requested-With": "XMLHttpRequest",
        },
        credentials: "include",
      })

if (!response.ok) throw new Error("Failed to delete image")

setPhotos(photos.filter((photo) => photo.id !== id))
    } catch (err) {
      console.error("Error deleting image:", err)
      alert("Failed to delete image")
    }
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
        <div className="flex items-center gap-4">
          <Link href="/admin/media-resources" className="p-2 hover:bg-gray-100 rounded-lg transition-colors">
            <ArrowLeft className="w-5 h-5 text-gray-600" />
          </Link>
          <div>
            <h1 className="text-3xl font-bold text-gray-900">Photo/Video Gallery</h1>
            <p className="text-gray-600 mt-1">Total Images: {photos.length}</p>
          </div>
        </div>
        <Link href="/admin/media-resources/photo-gallery/add">
          <button className="flex items-center gap-2 bg-[#CE1126] text-white px-6 py-3 rounded-lg hover:bg-red-700 transition-colors font-medium">
            <Plus className="w-5 h-5" />
            Add New Image
          </button>
        </Link>
      </div>

{error && (
        <div className="flex items-center gap-3 bg-yellow-50 border border-yellow-200 text-yellow-800 px-4 py-3 rounded-lg">
          <AlertCircle className="w-5 h-5 flex-shrink-0" />
          <p className="text-sm">{error}</p>
        </div>
      )}

{loading ? (
        <div className="text-center py-12">
          <p className="text-gray-500">Loading gallery...</p>
        </div>
      ) : (
        <>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {photos.map((photo) => (
              <Card key={photo.id} className="hover:shadow-lg transition-shadow overflow-hidden">
                <div className="relative bg-gray-200 h-40 overflow-hidden">
                  <img
                    src={photo.image_url || "/placeholder.svg"}
                    alt={photo.title}
                    className="w-full h-full object-cover"
                  />
                  <span
                    className={`absolute top-2 right-2 px-3 py-1 rounded-full text-xs font-medium ${
                      photo.status === "ACTIVE" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
                    }`}
                  >
                    {photo.status}
                  </span>
                </div>
                <CardContent className="pt-4">
                  <h3 className="font-semibold text-gray-900">{photo.title}</h3>
                  <p className="text-sm text-gray-600 mt-1">{photo.description}</p>
                  <div className="flex gap-2 text-xs text-gray-500 mt-2">
                    <span className="bg-gray-100 px-2 py-1 rounded">{photo.category}</span>
                    <span className="bg-gray-100 px-2 py-1 rounded">{photo.published_date}</span>
                  </div>
                  <div className="flex gap-2 mt-4">
                    <Link href={`/admin/media-resources/photo-gallery/view/${photo.id}`} className="flex-1">
                      <button className="w-full flex items-center justify-center gap-1 p-2 text-blue-600 hover:bg-blue-50 rounded transition-colors text-sm">
                        <Eye className="w-4 h-4" />
                        View
                      </button>
                    </Link>
                    <Link href={`/admin/media-resources/photo-gallery/edit/${photo.id}`} className="flex-1">
                      <button className="w-full flex items-center justify-center gap-1 p-2 text-amber-600 hover:bg-amber-50 rounded transition-colors text-sm">
                        <Edit2 className="w-4 h-4" />
                        Edit
                      </button>
                    </Link>
                    <button
                      onClick={() => handleDelete(photo.id)}
                      className="flex-1 flex items-center justify-center gap-1 p-2 text-red-600 hover:bg-red-50 rounded transition-colors text-sm"
                    >
                      <Trash2 className="w-4 h-4" />
                      Delete
                    </button>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>

{photos.length === 0 && (
            <div className="text-center py-12">
              <ImageIcon className="w-12 h-12 text-gray-300 mx-auto mb-4" />
              <p className="text-gray-500 text-lg">No images found. Create your first gallery item!</p>
            </div>
          )}
        </>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/media-resources/photo-gallery/add/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { ArrowLeft } from "lucide-react"
import { API_ENDPOINTS } from "@/lib/api-config"

interface PhotoForm {
  title: string
  description: string
  category: string
  image_url: string
  status: string
}

export default function AddPhotoPage() {
  const router = useRouter()
  const [formData, setFormData] = useState<PhotoForm>({
    title: "",
    description: "",
    category: "Events",
    image_url: "",
    status: "ACTIVE",
  })

const [errors, setErrors] = useState<Record<string, string>>({})
  const [isSubmitting, setIsSubmitting] = useState(false)

const validateForm = () => {
    const newErrors: Record<string, string> = {}
    if (!formData.title.trim()) newErrors.title = "Image title is required"
    if (!formData.description.trim()) newErrors.description = "Description is required"
    if (!formData.image_url.trim()) newErrors.image_url = "Image URL is required"
    setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!validateForm()) return

try {
      setIsSubmitting(true)
      const response = await fetch(API_ENDPOINTS.gallery.create, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "X-Requested-With": "XMLHttpRequest",
        },
        credentials: "include",
        body: JSON.stringify({
          title: formData.title,
          description: formData.description,
          category: formData.category,
          image_url: formData.image_url,
          status: formData.status,
        }),
      })

if (!response.ok) throw new Error("Failed to create image")

const data = await response.json()
      router.push("/admin/media-resources/photo-gallery")
    } catch (err) {
      console.error("Error creating image:", err)
      alert("Failed to create image")
    } finally {
      setIsSubmitting(false)
    }
  }

<div>
        <h1 className="text-3xl font-bold text-gray-900">Add New Image</h1>
        <p className="text-gray-600 mt-1">Upload and manage gallery images</p>
      </div>

<div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Status *</label>
            <select
              value={formData.status}
              onChange={(e) => setFormData({ ...formData, status: e.target.value })}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            >
              <option value="ACTIVE">Active</option>
              <option value="INACTIVE">Inactive</option>
            </select>
          </div>

<div className="md:col-span-2">
            <label className="block text-sm font-medium text-gray-700 mb-2">Image URL *</label>
            <input
              type="url"
              value={formData.image_url}
              onChange={(e) => setFormData({ ...formData, image_url: e.target.value })}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
              placeholder="https://example.com/image.jpg"
            />
            {errors.image_url && <p className="text-red-500 text-sm mt-1">{errors.image_url}</p>}
          </div>
        </div>

<div className="flex gap-3 pt-4 border-t border-gray-200">
          <button
            type="submit"
            disabled={isSubmitting}
            className="bg-[#CE1126] text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors font-medium whitespace-nowrap disabled:opacity-50"
          >
            {isSubmitting ? "Adding..." : "Add Image"}
          </button>
          <Link href="/admin/media-resources/photo-gallery" className="">
            <button
              type="button"
              className="bg-gray-200 text-gray-800 px-4 py-2 rounded-lg hover:bg-gray-300 transition-colors font-medium whitespace-nowrap"
            >
              Cancel
            </button>
          </Link>
        </div>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/media-resources/photo-gallery/view/[id]/page.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { useParams } from "next/navigation"
import Link from "next/link"
import { ArrowLeft } from "lucide-react"
import { API_ENDPOINTS } from "@/lib/api-config"

interface PhotoItem {
  id: number
  title: string
  description: string
  category: string
  image_url: string
  status: string
  published_date: string
}

export default function PhotoViewPage() {
  const params = useParams()
  const photoId = Number(params.id)
  const [photo, setPhoto] = useState<PhotoItem | null>(null)
  const [loading, setLoading] = useState(true)

useEffect(() => {
    fetchPhoto()
  }, [photoId])

const fetchPhoto = async () => {
    try {
      setLoading(true)
      const response = await fetch(API_ENDPOINTS.gallery.list, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
          "X-Requested-With": "XMLHttpRequest",
        },
        credentials: "include",
      })

if (!response.ok) throw new Error("Failed to fetch photos")

const data = await response.json()
      const photos = Array.isArray(data) ? data : data.data || []
      const foundPhoto = photos.find((p: PhotoItem) => p.id === photoId)

if (foundPhoto) {
        setPhoto(foundPhoto)
      }
    } catch (err) {
      console.error("Error fetching photo:", err)
    } finally {
      setLoading(false)
    }
  }

if (loading) {
    return (
      <div className="p-4 sm:p-6">
        <p className="text-gray-500">Loading...</p>
      </div>
    )
  }

if (!photo) {
    return (
      <div className="p-4 sm:p-6">
        <Link href="/admin/media-resources/photo-gallery">
          <button className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 font-medium mb-4">
            <ArrowLeft className="w-5 h-5" />
            Back to Photo Gallery
          </button>
        </Link>
        <p className="text-gray-500">Photo not found</p>
      </div>
    )
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      <Link href="/admin/media-resources/photo-gallery">
        <button className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 font-medium mb-4">
          <ArrowLeft className="w-5 h-5" />
          Back to Photo Gallery
        </button>
      </Link>

<div className="bg-white rounded-lg shadow-lg overflow-hidden">
        <div className="bg-[#CE1126] text-white px-6 py-4">
          <h1 className="text-2xl font-bold">{photo.title}</h1>
        </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <p className="text-sm text-gray-600 font-medium mb-2">Description</p>
              <p className="text-gray-900 leading-relaxed">{photo.description}</p>
            </div>

<div>
              <p className="text-sm text-gray-600 font-medium mb-2">Category</p>
              <span className="inline-block bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">
                {photo.category}
              </span>
            </div>

<div>
              <p className="text-sm text-gray-600 font-medium mb-2">Published Date</p>
              <p className="text-gray-900">{photo.published_date}</p>
            </div>

<div>
              <p className="text-sm text-gray-600 font-medium mb-2">Status</p>
              <span
                className={`inline-block px-3 py-1 rounded-full text-sm font-medium ${
                  photo.status === "ACTIVE" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
                }`}
              >
                {photo.status}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]jpg:file="public/official-engagement.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/official-engagement-lRQl231PUtZ9nrBFHdXEr2tIByOSCw.jpg" isMerged="true"
[V0_FILE]jpg:file="public/community-service.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/community-service-53zYiKFAgi4cRdRGNgrjkJ1MLbbgcr.jpg" isMerged="true"
[V0_FILE]jpg:file="public/youth-program.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/youth-program-UfYjipfBHvvMBi32GmpKazA2qMqFfh.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="components/admin/committees/committee-form.tsx" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { API_BASE_URL } from "@/lib/api-config"
import { validationHelpers } from "@/lib/form-validation"

interface Committee {
  id?: number
  name: string
  description: string
  members: number
  chair: string
  meetings: string
  foundedYear?: string
  vice_chair?: string
  secretary?: string
  budget?: string
  image?: File | string
  member_count?: number
  meeting_frequency?: string
  founded_year?: number
  annual_budget?: string
  chair_person?: string
}

interface CommitteeFormProps {
  committee?: Committee | null
  onSubmit: (data: FormData) => Promise<void>
  onCancel: () => void
}

export default function CommitteeForm({ committee, onSubmit, onCancel }: CommitteeFormProps) {
  const [formData, setFormData] = useState({
    name: committee?.name || "",
    description: committee?.description || "",
    members: committee?.members || committee?.member_count || 0,
    chair: committee?.chair || committee?.chair_person || "",
    meetings: committee?.meetings || committee?.meeting_frequency || "",
    foundedYear: committee?.foundedYear || committee?.founded_year || "",
    vice_chair: committee?.vice_chair || "",
    secretary: committee?.secretary || "",
    budget: committee?.budget || committee?.annual_budget || "",
  })

const [imagePreview, setImagePreview] = useState<string | null>((committee?.image as string) || null)
  const [isLoading, setIsLoading] = useState(false)
  const [errors, setErrors] = useState<Record<string, string>>({})

const [imageFile, setImageFile] = useState<File | null>(null)

const handleFieldChange = (field: string, value: string | number) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
    if (errors[field]) {
      setErrors((prev) => ({ ...prev, [field]: "" }))
    }
  }

const validateForm = () => {
    const newErrors: Record<string, string> = {}

newErrors.name = validationHelpers.required(formData.name, "Committee name")
    newErrors.description = validationHelpers.required(formData.description, "Description")
    newErrors.chair = validationHelpers.required(formData.chair, "Chair person")
    newErrors.meetings = validationHelpers.required(formData.meetings, "Meeting frequency")
    newErrors.members = validationHelpers.minValue(formData.members, 1, "Members")

Object.keys(newErrors).forEach((key) => {
      if (!newErrors[key]) delete newErrors[key]
    })

setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!validateForm()) return

setIsLoading(true)
    const formDataToSend = new FormData()

formDataToSend.append("name", formData.name)
    formDataToSend.append("description", formData.description)
    formDataToSend.append("member_count", String(formData.members))
    formDataToSend.append("chair_person", formData.chair)
    formDataToSend.append("vice_chair", formData.vice_chair || "")
    formDataToSend.append("secretary", formData.secretary || "")
    formDataToSend.append("meeting_frequency", formData.meetings)
    formDataToSend.append("founded_year", formData.foundedYear || "")
    formDataToSend.append("annual_budget", formData.budget || "")

if (imageFile instanceof File) {
      formDataToSend.append("image", imageFile)
    }

try {
      const method = committee?.id ? "PUT" : "POST"
      const url = committee?.id
        ? `${API_BASE_URL}/api/admin/committees/${committee.id}`
        : `${API_BASE_URL}/api/admin/committees`

const response = await fetch(url, {
        method,
        body: formDataToSend,
        headers: {
          Accept: "application/json",
          "X-Requested-With": "XMLHttpRequest",
        },
        credentials: "include",
      })

if (!response.ok) {
        throw new Error(`Failed to ${committee?.id ? "update" : "create"} committee: ${response.statusText}`)
      }

const result = await response.json()

if (result.status === "SUCCESS") {
        await onSubmit(formDataToSend)
      } else {
        throw new Error(result.message || "Operation failed")
      }
    } catch (error) {
      console.error("[v0] Committee form error:", error)
      setErrors({
        submit: error instanceof Error ? error.message : `Failed to ${committee?.id ? "update" : "create"} committee`,
      })
    } finally {
      setIsLoading(false)
    }
  }

const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      setImageFile(file)
      const reader = new FileReader()
      reader.onloadend = () => {
        setImagePreview(reader.result as string)
      }
      reader.readAsDataURL(file)
    }
  }

return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <div
        className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-[#CE1126] transition-colors cursor-pointer"
        onClick={() => document.getElementById("committeeImage")?.click()}
      >
        {imagePreview ? (
          <div className="flex flex-col items-center gap-4">
            <img
              src={imagePreview || "/placeholder.svg"}
              alt="Committee preview"
              className="w-32 h-32 rounded-lg object-cover"
            />
            <input type="file" accept="image/*" onChange={handleImageChange} className="hidden" id="committeeImage" />
            <label htmlFor="committeeImage" className="text-sm text-blue-600 hover:text-blue-700 cursor-pointer">
              Change Image
            </label>
          </div>
        ) : (
          <div className="flex flex-col items-center gap-2">
            <svg className="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
            </svg>
            <label htmlFor="committeeImage" className="text-sm font-medium text-gray-700 cursor-pointer">
              <span className="text-[#CE1126]">Click to upload</span> or drag and drop
            </label>
            <p className="text-xs text-gray-500">PNG, JPG, GIF up to 5MB</p>
            <input type="file" accept="image/*" onChange={handleImageChange} className="hidden" id="committeeImage" />
          </div>
        )}
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div className="md:col-span-2">
          <label className="block text-sm font-medium text-gray-700 mb-2">Committee Name *</label>
          <input
            type="text"
            value={formData.name}
            onChange={(e) => handleFieldChange("name", e.target.value)}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            placeholder="e.g., Executive Committee"
          />
          {errors.name && <p className="text-red-500 text-sm mt-1">{errors.name}</p>}
        </div>

<div className="md:col-span-2">
          <label className="block text-sm font-medium text-gray-700 mb-2">Description *</label>
          <textarea
            value={formData.description}
            onChange={(e) => handleFieldChange("description", e.target.value)}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            placeholder="e.g., Oversees overall administration and strategic planning"
            rows={3}
          />
          {errors.description && <p className="text-red-500 text-sm mt-1">{errors.description}</p>}
        </div>

<div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Chair Person *</label>
          <input
            type="text"
            value={formData.chair}
            onChange={(e) => handleFieldChange("chair", e.target.value)}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            placeholder="e.g., Datuk S. Arokiasamy"
          />
          {errors.chair && <p className="text-red-500 text-sm mt-1">{errors.chair}</p>}
        </div>

<div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Vice Chair</label>
          <input
            type="text"
            value={formData.vice_chair}
            onChange={(e) => handleFieldChange("vice_chair", e.target.value)}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            placeholder="e.g., Mr. R. Sivakumar"
          />
        </div>

<div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Secretary</label>
          <input
            type="text"
            value={formData.secretary}
            onChange={(e) => handleFieldChange("secretary", e.target.value)}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            placeholder="e.g., Ms. Anjali Sharma"
          />
        </div>

<div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Number of Members *</label>
          <input
            type="number"
            value={formData.members}
            onChange={(e) => handleFieldChange("members", Number.parseInt(e.target.value) || 0)}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            placeholder="e.g., 15"
          />
          {errors.members && <p className="text-red-500 text-sm mt-1">{errors.members}</p>}
        </div>

<div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Meeting Frequency *</label>
          <select
            value={formData.meetings}
            onChange={(e) => handleFieldChange("meetings", e.target.value)}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
          >
            <option value="">Select frequency</option>
            <option value="WEEKLY">Weekly</option>
            <option value="BI_WEEKLY">Bi-weekly</option>
            <option value="MONTHLY">Monthly</option>
            <option value="QUARTERLY">Quarterly</option>
          </select>
          {errors.meetings && <p className="text-red-500 text-sm mt-1">{errors.meetings}</p>}
        </div>

<div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Founded Year</label>
          <input
            type="text"
            value={formData.foundedYear}
            onChange={(e) => handleFieldChange("foundedYear", e.target.value)}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            placeholder="e.g., 1985"
          />
        </div>

<div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Annual Budget</label>
          <input
            type="text"
            value={formData.budget}
            onChange={(e) => handleFieldChange("budget", e.target.value)}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            placeholder="e.g., RM 500,000"
          />
        </div>
      </div>

{errors.submit && <p className="text-red-500 text-sm">{errors.submit}</p>}

<div className="flex gap-3 pt-4 border-t border-gray-200">
        <button
          type="submit"
          disabled={isLoading}
          className="bg-[#CE1126] text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors font-medium text-sm whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed"
        >
          {isLoading ? "Submitting..." : committee ? "Update Committee" : "Add Committee"}
        </button>
        <button
          type="button"
          onClick={onCancel}
          disabled={isLoading}
          className="bg-gray-200 text-gray-800 px-4 py-2 rounded-lg hover:bg-gray-300 transition-colors font-medium text-sm whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed"
        >
          Cancel
        </button>
      </div>
    </form>
  )
}
[V0_FILE]typescriptreact:file="components/admin/public-page/team-form.tsx" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { Upload } from "lucide-react"
import { validationHelpers } from "@/lib/form-validation"

interface TeamMember {
  id?: number
  name: string
  position: string
  email: string
  phone: string
  bio: string
  status: "Active" | "Inactive"
  photo: string
}

interface TeamFormProps {
  member?: TeamMember | null
  onSubmit: (data: Omit<TeamMember, "id">) => void
  onCancel: () => void
}

export default function TeamForm({ member, onSubmit, onCancel }: TeamFormProps) {
  const [preview, setPreview] = useState<string>(member?.photo || "")
  const [formData, setFormData] = useState({
    name: member?.name || "",
    position: member?.position || "",
    email: member?.email || "",
    phone: member?.phone || "",
    bio: member?.bio || "",
    status: member?.status || "Active",
    photo: member?.photo || "",
  })

const [errors, setErrors] = useState<Record<string, string>>({})

const handleFieldChange = (field: string, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
    if (errors[field]) {
      setErrors((prev) => ({ ...prev, [field]: "" }))
    }
  }

const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      const reader = new FileReader()
      reader.onloadend = () => {
        const result = reader.result as string
        setPreview(result)
        setFormData({ ...formData, photo: result })
      }
      reader.readAsDataURL(file)
    }
  }

const validateForm = () => {
    const newErrors: Record<string, string> = {}

newErrors.name = validationHelpers.required(formData.name, "Name")
    newErrors.position = validationHelpers.required(formData.position, "Position")
    newErrors.email = validationHelpers.required(formData.email, "Email") || validationHelpers.email(formData.email)
    newErrors.phone = validationHelpers.required(formData.phone, "Phone") || validationHelpers.phone(formData.phone)

Object.keys(newErrors).forEach((key) => {
      if (!newErrors[key]) delete newErrors[key]
    })

setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (validateForm()) {
      onSubmit(formData)
    }
  }

return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-3">Photo</label>
        <div className="flex flex-col sm:flex-row gap-4">
          {preview && (
            <img src={preview || "/placeholder.svg"} alt="Preview" className="w-24 h-24 rounded-full object-cover" />
          )}
          <div className="flex-1">
            <label className="flex items-center justify-center w-full px-4 py-3 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:border-[#CE1126] transition-colors">
              <div className="flex items-center gap-2">
                <Upload className="w-5 h-5 text-gray-600" />
                <span className="text-sm text-gray-600">Click to upload photo</span>
              </div>
              <input type="file" accept="image/*" onChange={handleImageChange} className="hidden" />
            </label>
          </div>
        </div>
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Name *</label>
          <input
            type="text"
            value={formData.name}
            onChange={(e) => handleFieldChange("name", e.target.value)}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            placeholder="Full name"
          />
          {errors.name && <p className="text-red-500 text-sm mt-1">{errors.name}</p>}
        </div>

<div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Position *</label>
          <input
            type="text"
            value={formData.position}
            onChange={(e) => handleFieldChange("position", e.target.value)}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            placeholder="e.g., Committee President"
          />
          {errors.position && <p className="text-red-500 text-sm mt-1">{errors.position}</p>}
        </div>

<div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Email *</label>
          <input
            type="email"
            value={formData.email}
            onChange={(e) => handleFieldChange("email", e.target.value)}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            placeholder="email@mcc.org.my"
          />
          {errors.email && <p className="text-red-500 text-sm mt-1">{errors.email}</p>}
        </div>

<div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Phone *</label>
          <input
            type="tel"
            value={formData.phone}
            onChange={(e) => handleFieldChange("phone", e.target.value)}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            placeholder="+60 3-2142-3456"
          />
          {errors.phone && <p className="text-red-500 text-sm mt-1">{errors.phone}</p>}
        </div>

<div className="md:col-span-2">
          <label className="block text-sm font-medium text-gray-700 mb-2">Bio</label>
          <textarea
            value={formData.bio}
            onChange={(e) => handleFieldChange("bio", e.target.value)}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            placeholder="Brief biography"
            rows={4}
          />
        </div>

<div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Status *</label>
          <select
            value={formData.status}
            onChange={(e) => handleFieldChange("status", e.target.value as "Active" | "Inactive")}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
          >
            <option>Active</option>
            <option>Inactive</option>
          </select>
        </div>
      </div>

<div className="flex gap-3 pt-4 border-t border-gray-200">
        <button
          type="submit"
          className="bg-[#CE1126] text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors font-medium text-sm whitespace-nowrap"
        >
          {member ? "Update Team Member" : "Add Team Member"}
        </button>
        <button
          type="button"
          onClick={onCancel}
          className="bg-gray-200 text-gray-800 px-4 py-2 rounded-lg hover:bg-gray-300 transition-colors font-medium text-sm whitespace-nowrap"
        >
          Cancel
        </button>
      </div>
    </form>
  )
}
[V0_FILE]typescriptreact:file="components/admin/settings/settings-form.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { Save } from "lucide-react"
import { useState } from "react"
import { validationHelpers } from "@/lib/form-validation"

export function SettingsForm() {
  const [settings, setSettings] = useState({
    siteName: "Malaysian Ceylonese Congress",
    siteDescription: "Official Portal of the Malaysian Ceylonese Congress",
    siteEmail: "info@mcc.my",
    emailNotifications: true,
    maintenanceMode: false,
    maxUploadSize: "50MB",
  })

const [errors, setErrors] = useState<Record<string, string>>({})

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value, type } = e.target
    const newValue = type === "checkbox" ? (e.target as HTMLInputElement).checked : value

setSettings((prev) => ({
      ...prev,
      [name]: newValue,
    }))

// Clear error for this field
    if (errors[name]) {
      setErrors((prev) => ({ ...prev, [name]: "" }))
    }
  }

const validateForm = () => {
    const newErrors: Record<string, string> = {}

newErrors.siteName = validationHelpers.required(settings.siteName, "Site name")
    newErrors.siteDescription = validationHelpers.required(settings.siteDescription, "Site description")
    newErrors.siteEmail =
      validationHelpers.required(settings.siteEmail, "Contact email") || validationHelpers.email(settings.siteEmail)

Object.keys(newErrors).forEach((key) => {
      if (!newErrors[key]) delete newErrors[key]
    })

setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (validateForm()) {
      console.log("Settings saved:", settings)
      alert("Settings saved successfully!")
    }
  }

return (
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
      {/* Main settings */}
      <div className="lg:col-span-2">
        <form onSubmit={handleSubmit} className="bg-white rounded-lg border border-gray-200 p-6 space-y-6">
          {/* General Settings */}
          <div>
            <h3 className="text-lg font-bold text-gray-900 mb-4 pb-4 border-b border-gray-200">General Settings</h3>
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Site Name *</label>
                <input
                  type="text"
                  name="siteName"
                  value={settings.siteName}
                  onChange={handleChange}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
                />
                {errors.siteName && <p className="text-red-500 text-sm mt-1">{errors.siteName}</p>}
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Site Description *</label>
                <textarea
                  name="siteDescription"
                  value={settings.siteDescription}
                  onChange={handleChange}
                  rows={3}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
                />
                {errors.siteDescription && <p className="text-red-500 text-sm mt-1">{errors.siteDescription}</p>}
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Contact Email *</label>
                <input
                  type="email"
                  name="siteEmail"
                  value={settings.siteEmail}
                  onChange={handleChange}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
                />
                {errors.siteEmail && <p className="text-red-500 text-sm mt-1">{errors.siteEmail}</p>}
              </div>
            </div>
          </div>

{/* Email Settings */}
          <div>
            <h3 className="text-lg font-bold text-gray-900 mb-4 pb-4 border-b border-gray-200">Email Settings</h3>
            <div className="space-y-4">
              <label className="flex items-center gap-3">
                <input
                  type="checkbox"
                  name="emailNotifications"
                  checked={settings.emailNotifications}
                  onChange={handleChange}
                  className="w-4 h-4 rounded border-gray-300 text-[#003087] cursor-pointer"
                />
                <span className="text-gray-700">Enable email notifications</span>
              </label>
            </div>
          </div>

{/* System Settings */}
          <div>
            <h3 className="text-lg font-bold text-gray-900 mb-4 pb-4 border-b border-gray-200">System Settings</h3>
            <div className="space-y-4">
              <label className="flex items-center gap-3">
                <input
                  type="checkbox"
                  name="maintenanceMode"
                  checked={settings.maintenanceMode}
                  onChange={handleChange}
                  className="w-4 h-4 rounded border-gray-300 text-[#CE1126] cursor-pointer"
                />
                <span className="text-gray-700">Maintenance mode</span>
              </label>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Max Upload Size</label>
                <input
                  type="text"
                  name="maxUploadSize"
                  value={settings.maxUploadSize}
                  onChange={handleChange}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
                />
              </div>
            </div>
          </div>

<button
            type="submit"
            className="flex items-center justify-center gap-2 px-4 py-2 bg-[#CE1126] text-white rounded-lg hover:bg-red-700 transition-colors font-medium text-sm whitespace-nowrap"
          >
            <Save className="w-5 h-5" />
            Save Settings
          </button>
        </form>
      </div>

{/* Info panel */}
      <div className="lg:col-span-1">
        <div className="bg-gradient-to-br from-[#003087] to-[#001f5c] text-white rounded-lg p-6">
          <h3 className="font-bold text-lg mb-4">System Information</h3>
          <div className="space-y-4 text-sm">
            <div>
              <p className="text-blue-200">Version</p>
              <p className="font-medium">1.0.0</p>
            </div>
            <div>
              <p className="text-blue-200">Last Updated</p>
              <p className="font-medium">2024-01-15</p>
            </div>
            <div>
              <p className="text-blue-200">Database Size</p>
              <p className="font-medium">234 MB</p>
            </div>
            <div className="pt-4 border-t border-blue-400">
              <p className="text-blue-200 text-xs">Malaysian Ceylonese Congress Admin Panel</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/media-resources/news/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Plus, Edit2, Trash2, ArrowLeft } from "lucide-react"
import { API_ENDPOINTS } from "@/lib/api-config"

interface NewsItem {
  id: number
  title: string
  slug: string
  category: string
  author: string
  featured_image_url: string
  status: string
  published_date: string
}

const mockNews: NewsItem[] = [
  {
    id: 1,
    title: "Community Day",
    slug: "community-day",
    category: "Annual outreach",
    author: "Community",
    featured_image_url: "/news-collage.png",
    status: "ACTIVE",
    published_date: "2026-01-13",
  },
]

export default function NewsPage() {
  const [news, setNews] = useState<NewsItem[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    fetchNews()
  }, [])

const fetchNews = async () => {
    try {
      setLoading(true)
      const response = await fetch(API_ENDPOINTS.news.list, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
          "X-Requested-With": "XMLHttpRequest",
        },
        credentials: "include",
      })

if (!response.ok) {
        throw new Error("Failed to fetch news")
      }

const data = await response.json()
      setNews(Array.isArray(data) ? data : data.news || mockNews)
      setError(null)
    } catch (err) {
      setNews(mockNews)
      setError("Using sample data. Unable to connect to server.")
    } finally {
      setLoading(false)
    }
  }

const handleDelete = async (id: number) => {
    if (confirm("Are you sure you want to delete this news article?")) {
      try {
        const response = await fetch(API_ENDPOINTS.news.delete(id), {
          method: "DELETE",
          headers: {
            "Content-Type": "application/json",
            Accept: "application/json",
            "X-Requested-With": "XMLHttpRequest",
          },
          credentials: "include",
        })

if (response.ok) {
          setNews(news.filter((item) => item.id !== id))
        } else {
          alert("Failed to delete news article")
        }
      } catch (err) {
        setNews(news.filter((item) => item.id !== id))
      }
    }
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      {error && (
        <div className="bg-yellow-50 border border-yellow-200 text-yellow-800 px-4 py-3 rounded-lg text-sm">
          {error}
        </div>
      )}

<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
        <div className="flex items-center gap-4">
          <Link href="/admin/media-resources" className="p-2 hover:bg-gray-100 rounded-lg transition-colors">
            <ArrowLeft className="w-5 h-5 text-gray-600" />
          </Link>
          <div>
            <h1 className="text-3xl font-bold text-gray-900">News Management</h1>
            <p className="text-gray-600 mt-1">Total News Articles: {news.length}</p>
          </div>
        </div>
        <Link href="/admin/media-resources/news/add">
          <button className="flex items-center gap-2 bg-[#CE1126] text-white px-6 py-3 rounded-lg hover:bg-red-700 transition-colors font-medium">
            <Plus className="w-5 h-5" />
            Add New News Article
          </button>
        </Link>
      </div>

<div className="bg-white rounded-lg border border-gray-200 overflow-x-auto">
        <table className="w-full">
          <thead className="bg-gray-50 border-b border-gray-200">
            <tr>
              <th className="px-4 sm:px-6 py-3 text-left text-xs font-semibold text-gray-700">TITLE</th>
              <th className="hidden sm:table-cell px-6 py-3 text-left text-xs font-semibold text-gray-700">CATEGORY</th>
              <th className="hidden md:table-cell px-6 py-3 text-left text-xs font-semibold text-gray-700">AUTHOR</th>
              <th className="hidden lg:table-cell px-6 py-3 text-left text-xs font-semibold text-gray-700">STATUS</th>
              <th className="hidden lg:table-cell px-6 py-3 text-left text-xs font-semibold text-gray-700">DATE</th>
              <th className="px-4 sm:px-6 py-3 text-center text-xs font-semibold text-gray-700">ACTIONS</th>
            </tr>
          </thead>
          <tbody>
            {news.map((item, index) => (
              <tr key={item.id} className={index !== news.length - 1 ? "border-b border-gray-200" : ""}>
                <td className="px-4 sm:px-6 py-4">
                  <div className="flex items-center gap-3">
                    <img
                      src={item.featured_image_url || "/placeholder.svg?height=40&width=40&query=news"}
                      alt={item.title}
                      className="w-10 h-10 object-cover rounded hidden sm:block"
                    />
                    <div>
                      <p className="font-medium text-gray-900 text-sm">{item.title}</p>
                      <p className="text-xs text-gray-500">Slug: {item.slug}</p>
                    </div>
                  </div>
                </td>
                <td className="hidden sm:table-cell px-6 py-4 text-sm text-gray-600">{item.category}</td>
                <td className="hidden md:table-cell px-6 py-4 text-sm text-gray-600">{item.author}</td>
                <td className="hidden lg:table-cell px-6 py-4">
                  <span
                    className={`px-2 py-1 text-xs font-medium rounded-full ${
                      item.status === "ACTIVE" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
                    }`}
                  >
                    {item.status}
                  </span>
                </td>
                <td className="hidden lg:table-cell px-6 py-4 text-sm text-gray-600">{item.published_date}</td>
                <td className="px-4 sm:px-6 py-4">
                  <div className="flex items-center justify-center gap-2">
                    <Link href={`/admin/media-resources/news/edit/${item.id}`}>
                      <button className="p-2 text-amber-600 hover:bg-amber-50 rounded transition-colors">
                        <Edit2 className="w-4 h-4" />
                      </button>
                    </Link>
                    <button
                      onClick={() => handleDelete(item.id)}
                      className="p-2 text-red-600 hover:bg-red-50 rounded transition-colors"
                    >
                      <Trash2 className="w-4 h-4" />
                    </button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

{news.length === 0 && !loading && (
        <div className="text-center py-12">
          <p className="text-gray-500 text-lg">No news articles found. Create your first article!</p>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/media-resources/news/add/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { ArrowLeft } from "lucide-react"
import { API_ENDPOINTS } from "@/lib/api-config"

interface NewsForm {
  title: string
  category: string
  author: string
  content: string
  featured_image_url: string
  status: "ACTIVE" | "INACTIVE"
}

export default function AddNewsPage() {
  const router = useRouter()
  const [formData, setFormData] = useState<NewsForm>({
    title: "",
    category: "Annual outreach",
    author: "",
    content: "",
    featured_image_url: "",
    status: "ACTIVE",
  })

const [errors, setErrors] = useState<Record<string, string>>({})
  const [loading, setLoading] = useState(false)

const validateForm = () => {
    const newErrors: Record<string, string> = {}
    if (!formData.title.trim()) newErrors.title = "Article title is required"
    if (!formData.content.trim()) newErrors.content = "Content is required"
    if (!formData.author.trim()) newErrors.author = "Author name is required"
    if (!formData.featured_image_url.trim()) newErrors.featured_image_url = "Featured image URL is required"
    setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!validateForm()) return

try {
      setLoading(true)
      const response = await fetch(API_ENDPOINTS.news.create, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
          "X-Requested-With": "XMLHttpRequest",
        },
        credentials: "include",
        body: JSON.stringify(formData),
      })

if (response.ok) {
        router.push("/admin/media-resources/news")
      } else {
        alert("Failed to create news article")
      }
    } catch (err) {
      alert("Failed to create news article")
    } finally {
      setLoading(false)
    }
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      <Link
        href="/admin/media-resources/news"
        className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 transition-colors"
      >
        <ArrowLeft className="w-5 h-5" />
        Back to News
      </Link>

<div>
        <h1 className="text-3xl font-bold text-gray-900">Add New News Article</h1>
        <p className="text-gray-600 mt-1">Create and publish a new news article</p>
      </div>

<form onSubmit={handleSubmit} className="bg-white rounded-lg border border-gray-200 p-6 space-y-6">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="md:col-span-2">
            <label className="block text-sm font-medium text-gray-700 mb-2">Article Title *</label>
            <input
              type="text"
              value={formData.title}
              onChange={(e) => {
                setFormData({ ...formData, title: e.target.value })
                if (errors.title) setErrors({ ...errors, title: "" })
              }}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
              placeholder="e.g., Community Day"
            />
            {errors.title && <p className="text-red-500 text-sm mt-1">{errors.title}</p>}
          </div>

<div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Category *</label>
            <select
              value={formData.category}
              onChange={(e) => setFormData({ ...formData, category: e.target.value })}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            >
              <option value="Annual outreach">Annual outreach</option>
              <option value="Events">Events</option>
              <option value="Community">Community</option>
              <option value="Malaysia">Malaysia</option>
              <option value="Other">Other</option>
            </select>
          </div>

<div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Author *</label>
            <input
              type="text"
              value={formData.author}
              onChange={(e) => {
                setFormData({ ...formData, author: e.target.value })
                if (errors.author) setErrors({ ...errors, author: "" })
              }}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
              placeholder="e.g., Community"
            />
            {errors.author && <p className="text-red-500 text-sm mt-1">{errors.author}</p>}
          </div>

<div className="md:col-span-2">
            <label className="block text-sm font-medium text-gray-700 mb-2">Article Content *</label>
            <textarea
              value={formData.content}
              onChange={(e) => {
                setFormData({ ...formData, content: e.target.value })
                if (errors.content) setErrors({ ...errors, content: "" })
              }}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
              placeholder="Write your article content here..."
              rows={6}
            />
            {errors.content && <p className="text-red-500 text-sm mt-1">{errors.content}</p>}
          </div>

<div className="md:col-span-2">
            <label className="block text-sm font-medium text-gray-700 mb-2">Featured Image URL *</label>
            <input
              type="url"
              value={formData.featured_image_url}
              onChange={(e) => {
                setFormData({ ...formData, featured_image_url: e.target.value })
                if (errors.featured_image_url) setErrors({ ...errors, featured_image_url: "" })
              }}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
              placeholder="https://example.com/image.jpg"
            />
            {errors.featured_image_url && <p className="text-red-500 text-sm mt-1">{errors.featured_image_url}</p>}
          </div>

<div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Status *</label>
            <select
              value={formData.status}
              onChange={(e) => setFormData({ ...formData, status: e.target.value as "ACTIVE" | "INACTIVE" })}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            >
              <option value="ACTIVE">ACTIVE</option>
              <option value="INACTIVE">INACTIVE</option>
            </select>
          </div>
        </div>

<div className="flex gap-3 pt-4 border-t border-gray-200">
          <button
            type="submit"
            disabled={loading}
            className="bg-[#CE1126] text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors font-medium whitespace-nowrap disabled:opacity-50"
          >
            {loading ? "Publishing..." : "Publish Article"}
          </button>
          <Link href="/admin/media-resources/news">
            <button
              type="button"
              className="bg-gray-200 text-gray-800 px-4 py-2 rounded-lg hover:bg-gray-300 transition-colors font-medium whitespace-nowrap"
            >
              Cancel
            </button>
          </Link>
        </div>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/media-resources/news/edit/[id]/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { ArrowLeft } from "lucide-react"
import { API_ENDPOINTS } from "@/lib/api-config"

interface NewsForm {
  title: string
  category: string
  author: string
  content: string
  featured_image_url: string
  status: "ACTIVE" | "INACTIVE"
}

export default function EditNewsPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const [formData, setFormData] = useState<NewsForm>({
    title: "",
    category: "Annual outreach",
    author: "",
    content: "",
    featured_image_url: "",
    status: "ACTIVE",
  })

const [errors, setErrors] = useState<Record<string, string>>({})
  const [loading, setLoading] = useState(false)

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!validateForm()) return

try {
      setLoading(true)
      const response = await fetch(API_ENDPOINTS.news.update(Number(params.id)), {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
          "X-Requested-With": "XMLHttpRequest",
        },
        credentials: "include",
        body: JSON.stringify(formData),
      })

if (response.ok) {
        router.push("/admin/media-resources/news")
      } else {
        alert("Failed to update news article")
      }
    } catch (err) {
      alert("Failed to update news article")
    } finally {
      setLoading(false)
    }
  }

<div>
        <h1 className="text-3xl font-bold text-gray-900">Edit News Article</h1>
        <p className="text-gray-600 mt-1">Update article details and content</p>
      </div>

<form onSubmit={handleSubmit} className="bg-white rounded-lg border border-gray-200 p-6 space-y-6">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="md:col-span-2">
            <label className="block text-sm font-medium text-gray-700 mb-2">Article Title *</label>
            <input
              type="text"
              value={formData.title}
              onChange={(e) => {
                setFormData({ ...formData, title: e.target.value })
                if (errors.title) setErrors({ ...errors, title: "" })
              }}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
              placeholder="e.g., Community Day"
            />
            {errors.title && <p className="text-red-500 text-sm mt-1">{errors.title}</p>}
          </div>

<div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Category *</label>
            <select
              value={formData.category}
              onChange={(e) => setFormData({ ...formData, category: e.target.value })}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            >
              <option value="Annual outreach">Annual outreach</option>
              <option value="Events">Events</option>
              <option value="Community">Community</option>
              <option value="Malaysia">Malaysia</option>
              <option value="Other">Other</option>
            </select>
          </div>

<div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Status *</label>
            <select
              value={formData.status}
              onChange={(e) => setFormData({ ...formData, status: e.target.value as "ACTIVE" | "INACTIVE" })}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            >
              <option value="ACTIVE">ACTIVE</option>
              <option value="INACTIVE">INACTIVE</option>
            </select>
          </div>
        </div>

<div className="flex gap-3 pt-4 border-t border-gray-200">
          <button
            type="submit"
            disabled={loading}
            className="bg-[#CE1126] text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors font-medium whitespace-nowrap disabled:opacity-50"
          >
            {loading ? "Updating..." : "Update Article"}
          </button>
          <Link href="/admin/media-resources/news">
            <button
              type="button"
              className="bg-gray-200 text-gray-800 px-4 py-2 rounded-lg hover:bg-gray-300 transition-colors font-medium whitespace-nowrap"
            >
              Cancel
            </button>
          </Link>
        </div>
      </form>
    </div>
  )
}
[V0_FILE]png:file="public/news-collage.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/news-collage-Mbl2UlxZql5hyThHv0fARaTNQnhx64.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/admin/public-page/team/add/page.tsx" isMerged="true"
"use client"

import type React from "react"
import { useRouter } from "next/navigation"
import { useState } from "react"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"
import { API_ENDPOINTS } from "@/lib/api-config"
import { validationHelpers } from "@/lib/form-validation"

export default function AddTeamPage() {
  const router = useRouter()
  const [preview, setPreview] = useState<string>("")
  const [loading, setLoading] = useState(false)
  const [errors, setErrors] = useState<Record<string, string>>({})
  const [formData, setFormData] = useState({
    name: "",
    position: "",
    email: "",
    phone: "",
    bio: "",
    status: "ACTIVE",
    photo: null as File | null,
  })

const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      setFormData({ ...formData, photo: file })
      const reader = new FileReader()
      reader.onloadend = () => {
        setPreview(reader.result as string)
      }
      reader.readAsDataURL(file)
    }
  }

const handleFieldChange = (field: string, value: string) => {
    setFormData({ ...formData, [field]: value } as any)
    if (errors[field]) {
      setErrors((prev) => ({ ...prev, [field]: "" }))
    }
  }

const validateForm = () => {
    const newErrors: Record<string, string> = {}

Object.keys(newErrors).forEach((key) => {
      if (!newErrors[key]) delete newErrors[key]
    })

setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!validateForm()) return

try {
      setLoading(true)

const requestData = new FormData()
      requestData.append("name", formData.name)
      requestData.append("position", formData.position)
      requestData.append("email", formData.email)
      requestData.append("phone", formData.phone)
      requestData.append("bio", formData.bio)
      requestData.append("status", formData.status)
      if (formData.photo) {
        requestData.append("photo", formData.photo)
      }

const response = await fetch(API_ENDPOINTS.leadership.create, {
        method: "POST",
        body: requestData,
        headers: {
          Accept: "application/json",
          "X-Requested-With": "XMLHttpRequest",
        },
        credentials: "include",
      })

if (!response.ok) throw new Error("Failed to create team member")

alert("Team member added successfully!")
      router.push("/admin/public-page/team")
    } catch (err) {
      alert("Failed to add team member. Please try again.")
    } finally {
      setLoading(false)
    }
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      <div className="flex items-center gap-3">
        <Link href="/admin/public-page/team">
          <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors">
            <ArrowLeft className="w-5 h-5 text-gray-600" />
          </button>
        </Link>
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Add Team Member</h1>
          <p className="text-gray-600 mt-1">Create a new team member profile</p>
        </div>
      </div>

<div className="bg-white rounded-lg p-6 max-w-2xl">
        <form onSubmit={handleSubmit} className="space-y-6">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-3">Photo</label>
            <div className="flex flex-col sm:flex-row gap-4">
              {preview && (
                <img
                  src={preview || "/placeholder.svg"}
                  alt="Preview"
                  className="w-24 h-24 rounded-full object-cover"
                />
              )}
              <div className="flex-1">
                <label className="flex items-center justify-center w-full px-4 py-3 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:border-[#CE1126] transition-colors">
                  <div className="flex items-center gap-2">
                    <span className="text-sm text-gray-600">Click to upload photo</span>
                  </div>
                  <input type="file" accept="image/*" onChange={handleImageChange} className="hidden" />
                </label>
              </div>
            </div>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Name *</label>
              <input
                type="text"
                value={formData.name}
                onChange={(e) => handleFieldChange("name", e.target.value)}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
                placeholder="Full name"
              />
              {errors.name && <p className="text-red-500 text-sm mt-1">{errors.name}</p>}
            </div>

<div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Position *</label>
              <input
                type="text"
                value={formData.position}
                onChange={(e) => handleFieldChange("position", e.target.value)}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
                placeholder="e.g., Committee President"
              />
              {errors.position && <p className="text-red-500 text-sm mt-1">{errors.position}</p>}
            </div>

<div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Email *</label>
              <input
                type="email"
                value={formData.email}
                onChange={(e) => handleFieldChange("email", e.target.value)}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
                placeholder="email@mcc.org.my"
              />
              {errors.email && <p className="text-red-500 text-sm mt-1">{errors.email}</p>}
            </div>

<div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Phone *</label>
              <input
                type="tel"
                value={formData.phone}
                onChange={(e) => handleFieldChange("phone", e.target.value)}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
                placeholder="+60 3-2142-3456"
              />
              {errors.phone && <p className="text-red-500 text-sm mt-1">{errors.phone}</p>}
            </div>

<div className="md:col-span-2">
              <label className="block text-sm font-medium text-gray-700 mb-2">Bio</label>
              <textarea
                value={formData.bio}
                onChange={(e) => handleFieldChange("bio", e.target.value)}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
                placeholder="Brief biography"
                rows={4}
              />
            </div>

<div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Status *</label>
              <select
                value={formData.status}
                onChange={(e) => handleFieldChange("status", e.target.value)}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
              >
                <option value="ACTIVE">Active</option>
                <option value="INACTIVE">Inactive</option>
              </select>
            </div>
          </div>

<div className="flex gap-3 pt-4 border-t border-gray-200">
            <button
              type="submit"
              disabled={loading}
              className="bg-[#CE1126] text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors font-medium text-sm whitespace-nowrap disabled:opacity-50"
            >
              {loading ? "Adding..." : "Add Team Member"}
            </button>
            <Link href="/admin/public-page/team">
              <button
                type="button"
                className="bg-gray-200 text-gray-800 px-4 py-2 rounded-lg hover:bg-gray-300 transition-colors font-medium text-sm whitespace-nowrap"
              >
                Cancel
              </button>
            </Link>
          </div>
        </form>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/contact/info/client.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { ArrowLeft, Eye, Edit2, Trash2, Plus, Search } from "lucide-react"
import { Card } from "@/components/ui/card"
import { API_ENDPOINTS } from "@/lib/api-config"

interface ContactInfo {
  id: number
  title: string
  phone: string
  email: string
  address: string
  googleMapsUrl?: string
  displayOrder: number
  status: "ACTIVE" | "INACTIVE"
}

export default function ContactInfoClient() {
  const [currentPage, setCurrentPage] = useState(1)
  const [itemsPerPage, setItemsPerPage] = useState(10)
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedStatus, setSelectedStatus] = useState("all")
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

const [contacts, setContacts] = useState<ContactInfo[]>([
    {
      id: 1,
      title: "Head Office",
      phone: "+1 (302) 208 2666",
      email: "info@myowninc.com",
      address: "Suite 8 The Green #19578, Dover, DE 19901",
      googleMapsUrl: "https://maps.google.com/embed?pb=...",
      displayOrder: 0,
      status: "ACTIVE",
    },
    {
      id: 2,
      title: "Branch Office",
      phone: "+91 44 2850 5233",
      email: "info@myowntravelleisure.com",
      address: "G-14/608, V.O.C street Desk#473 Perungudi, Kottiyam",
      googleMapsUrl: "https://maps.google.com/embed?pb=...",
      displayOrder: 1,
      status: "ACTIVE",
    },
  ])

useEffect(() => {
    const fetchContacts = async () => {
      try {
        setIsLoading(true)
        const response = await fetch(API_ENDPOINTS.contactInfo.list, {
          headers: {
            "Content-Type": "application/json",
            Accept: "application/json",
            "X-Requested-With": "XMLHttpRequest",
          },
          credentials: "include",
        })

if (!response.ok) {
          throw new Error("Failed to fetch contacts")
        }

const data = await response.json()
        if (Array.isArray(data)) {
          // Map API response to component format
          const mappedContacts = data.map((contact: any) => ({
            id: contact.id,
            title: contact.title,
            phone: contact.phone,
            email: contact.email,
            address: contact.address,
            googleMapsUrl: contact.map_embed_url,
            displayOrder: contact.order || contact.display_order || 0,
            status: contact.status,
          }))
          setContacts(mappedContacts)
          setError(null)
        }
      } catch (err) {
        console.error("[v0] Failed to fetch contacts:", err)
        setError("Using sample data. Unable to connect to server.")
      } finally {
        setIsLoading(false)
      }
    }

fetchContacts()
  }, [])

const filteredContacts = contacts.filter((contact) => {
    const matchSearch =
      contact.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      contact.address.toLowerCase().includes(searchQuery.toLowerCase())
    const matchStatus = selectedStatus === "all" || contact.status === selectedStatus
    return matchSearch && matchStatus
  })

const totalPages = Math.ceil(filteredContacts.length / itemsPerPage)
  const startIndex = (currentPage - 1) * itemsPerPage
  const paginatedContacts = filteredContacts.slice(startIndex, startIndex + itemsPerPage)

const handleDelete = (id: number) => {
    if (confirm("Are you sure you want to delete this contact information?")) {
      const deleteContact = async () => {
        try {
          const response = await fetch(API_ENDPOINTS.contactInfo.delete(id), {
            method: "DELETE",
            headers: {
              "Content-Type": "application/json",
              Accept: "application/json",
              "X-Requested-With": "XMLHttpRequest",
            },
            credentials: "include",
          })

if (!response.ok) {
            throw new Error("Failed to delete contact")
          }

setContacts(contacts.filter((c) => c.id !== id))
        } catch (err) {
          console.error("[v0] Delete failed:", err)
          alert("Failed to delete contact. Please try again.")
        }
      }
      deleteContact()
    }
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      <div className="flex items-center gap-3 mb-4">
        <Link href="/admin/contact">
          <button className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 font-medium w-auto">
            <ArrowLeft className="w-5 h-5" />
            Back to Contact
          </button>
        </Link>
      </div>

{error && (
        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 text-yellow-800 text-sm">{error}</div>
      )}

{/* Header */}
      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Contact Information Management</h1>
          <p className="text-gray-600 mt-1">Total Contact Info: {filteredContacts.length}</p>
        </div>
        <Link href="/admin/contact/info/add">
          <button className="flex items-center gap-2 bg-[#CE1126] text-white px-6 py-3 rounded-lg hover:bg-red-700 transition-colors font-medium w-auto">
            <Plus className="w-5 h-5" />
            Add New Contact Info
          </button>
        </Link>
      </div>

<div className="space-y-4">
        <div className="flex items-center gap-2 bg-white p-3 rounded-lg border border-gray-200">
          <Search className="w-5 h-5 text-gray-400" />
          <input
            type="text"
            placeholder="Search by title or address..."
            value={searchQuery}
            onChange={(e) => {
              setSearchQuery(e.target.value)
              setCurrentPage(1)
            }}
            className="flex-1 outline-none text-gray-900"
          />
        </div>

{/* Table */}
      <Card className="overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="bg-gray-50 border-b border-gray-200">
                <th className="px-4 sm:px-6 py-4 text-left font-semibold text-gray-700">TITLE</th>
                <th className="px-4 sm:px-6 py-4 text-left font-semibold text-gray-700 hidden sm:table-cell">PHONE</th>
                <th className="px-4 sm:px-6 py-4 text-left font-semibold text-gray-700 hidden md:table-cell">EMAIL</th>
                <th className="px-4 sm:px-6 py-4 text-left font-semibold text-gray-700 hidden lg:table-cell">
                  ADDRESS
                </th>
                <th className="px-4 sm:px-6 py-4 text-left font-semibold text-gray-700">STATUS</th>
                <th className="px-4 sm:px-6 py-4 text-left font-semibold text-gray-700 hidden sm:table-cell">ORDER</th>
                <th className="px-4 sm:px-6 py-4 text-left font-semibold text-gray-700">ACTIONS</th>
              </tr>
            </thead>
            <tbody>
              {paginatedContacts.map((contact) => (
                <tr key={contact.id} className="border-b border-gray-200 hover:bg-gray-50 transition-colors">
                  <td className="px-4 sm:px-6 py-4 font-medium text-gray-900">{contact.title}</td>
                  <td className="px-4 sm:px-6 py-4 text-gray-700 hidden sm:table-cell text-xs">{contact.phone}</td>
                  <td className="px-4 sm:px-6 py-4 text-gray-700 hidden md:table-cell text-xs truncate">
                    {contact.email}
                  </td>
                  <td className="px-4 sm:px-6 py-4 text-gray-700 hidden lg:table-cell text-xs truncate">
                    {contact.address.substring(0, 30)}...
                  </td>
                  <td className="px-4 sm:px-6 py-4">
                    <span
                      className={`inline-block px-2 py-1 rounded text-xs font-semibold ${contact.status === "ACTIVE" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"}`}
                    >
                      {contact.status === "ACTIVE" ? "Active" : "Inactive"}
                    </span>
                  </td>
                  <td className="px-4 sm:px-6 py-4 text-gray-700 hidden sm:table-cell">{contact.displayOrder}</td>
                  <td className="px-4 sm:px-6 py-4">
                    <div className="flex gap-2">
                      <Link href={`/admin/contact/info/view/${contact.id}`}>
                        <button className="text-blue-600 hover:text-blue-800 p-1" title="View">
                          <Eye className="w-4 h-4" />
                        </button>
                      </Link>
                      <Link href={`/admin/contact/info/edit/${contact.id}`}>
                        <button className="text-amber-600 hover:text-amber-800 p-1" title="Edit">
                          <Edit2 className="w-4 h-4" />
                        </button>
                      </Link>
                      <button
                        onClick={() => handleDelete(contact.id)}
                        className="text-red-600 hover:text-red-800 p-1"
                        title="Delete"
                      >
                        <Trash2 className="w-4 h-4" />
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>

{paginatedContacts.length === 0 && (
        <div className="text-center py-12">
          <p className="text-gray-600">No contact information found.</p>
        </div>
      )}

<div className="flex flex-col sm:flex-row items-center justify-between gap-4 pt-4 border-t border-gray-200">
        <div className="text-sm text-gray-600">
          Showing {startIndex + 1} to {Math.min(startIndex + itemsPerPage, filteredContacts.length)} of{" "}
          {filteredContacts.length} contacts
        </div>
        <div className="flex items-center gap-2">
          <select
            value={itemsPerPage}
            onChange={(e) => {
              setItemsPerPage(Number(e.target.value))
              setCurrentPage(1)
            }}
            className="px-3 py-1 border border-gray-300 rounded-lg bg-white text-sm"
          >
            <option value="10">10 per page</option>
            <option value="25">25 per page</option>
            <option value="50">50 per page</option>
            <option value="100">100 per page</option>
          </select>
          <button
            onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
            disabled={currentPage === 1}
            className="px-3 py-1 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
          >
            Previous
          </button>
          <div className="flex items-center gap-1">
            {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
              <button
                key={page}
                onClick={() => setCurrentPage(page)}
                className={`px-3 py-1 rounded-lg text-sm ${
                  currentPage === page
                    ? "bg-[#CE1126] text-white font-medium"
                    : "border border-gray-300 hover:bg-gray-50"
                }`}
              >
                {page}
              </button>
            ))}
          </div>
          <button
            onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
            disabled={currentPage === totalPages}
            className="px-3 py-1 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
          >
            Next
          </button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/contact/info/add/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"
import { validationHelpers } from "@/lib/form-validation"
import { API_ENDPOINTS } from "@/lib/api-config"

export default function AddContactInfoPage() {
  const router = useRouter()
  const [formData, setFormData] = useState({
    title: "",
    phone: "",
    address: "",
    email: "",
    map_embed_url: "",
    display_order: 0,
    status: "ACTIVE",
  })
  const [errors, setErrors] = useState<Record<string, string>>({})
  const [isSubmitting, setIsSubmitting] = useState(false)

const validateForm = () => {
    const newErrors: Record<string, string> = {}

newErrors.title = validationHelpers.required(formData.title, "Title")
    newErrors.phone = validationHelpers.required(formData.phone, "Phone") || validationHelpers.phone(formData.phone)
    newErrors.address = validationHelpers.required(formData.address, "Address")
    newErrors.email = validationHelpers.required(formData.email, "Email") || validationHelpers.email(formData.email)

Object.keys(newErrors).forEach((key) => {
      if (!newErrors[key]) delete newErrors[key]
    })

setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (validateForm()) {
      try {
        setIsSubmitting(true)
        const response = await fetch(API_ENDPOINTS.contactInfo.create, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Accept: "application/json",
            "X-Requested-With": "XMLHttpRequest",
          },
          credentials: "include",
          body: JSON.stringify(formData),
        })

if (!response.ok) {
          throw new Error("Failed to create contact")
        }

const data = await response.json()
        router.push("/admin/contact/info")
      } catch (err) {
        alert("Failed to create contact. Please try again.")
      } finally {
        setIsSubmitting(false)
      }
    }
  }

return (
    <div className="p-4 sm:p-6">
      <div className="mb-6">
        <Link href="/admin/contact/info">
          <button className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 font-medium mb-4">
            <ArrowLeft className="w-5 h-5" />
            Back
          </button>
        </Link>
        <h1 className="text-3xl font-bold text-gray-900">Add New Contact Information</h1>
      </div>

<div className="bg-white rounded-lg p-6 max-w-2xl">
        <form onSubmit={handleSubmit} className="space-y-6">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Title *</label>
            <input
              type="text"
              placeholder="e.g., Head Office, mcc Office, Community Center"
              value={formData.title}
              onChange={(e) => handleFieldChange("title", e.target.value)}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            />
            {errors.title && <p className="text-red-500 text-sm mt-1">{errors.title}</p>}
          </div>

<div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Phone *</label>
            <input
              type="tel"
              placeholder="Phone number (e.g., 080 4576 392)"
              value={formData.phone}
              onChange={(e) => handleFieldChange("phone", e.target.value)}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            />
            {errors.phone && <p className="text-red-500 text-sm mt-1">{errors.phone}</p>}
          </div>

<div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Address *</label>
            <textarea
              placeholder="Full address"
              value={formData.address}
              onChange={(e) => handleFieldChange("address", e.target.value)}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
              rows={3}
            />
            {errors.address && <p className="text-red-500 text-sm mt-1">{errors.address}</p>}
          </div>

<div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Email *</label>
            <input
              type="email"
              placeholder="Email address (e.g., contact@mcc.com)"
              value={formData.email}
              onChange={(e) => handleFieldChange("email", e.target.value)}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            />
            {errors.email && <p className="text-red-500 text-sm mt-1">{errors.email}</p>}
          </div>

<div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Google Maps Embed URL</label>
            <input
              type="text"
              placeholder="To get embed URL: 1) Open your Google Maps share link 2) Click 'Embed a map' 3) Copy the iframe src URL"
              value={formData.map_embed_url}
              onChange={(e) => handleFieldChange("map_embed_url", e.target.value)}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent text-xs"
            />
            <p className="text-xs text-gray-500 mt-1">
              To get embed URL: 1) Open your Google Maps share link (e.g. https://share.google/...). 2) Click
              "Embed a map" button. 3) Copy the iframe src URL and paste it here
            </p>
          </div>

<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Display Order</label>
              <input
                type="number"
                value={formData.display_order}
                onChange={(e) => handleFieldChange("display_order", Number(e.target.value))}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
                placeholder="0"
              />
              <p className="text-xs text-gray-500 mt-1">Lower numbers appear first</p>
            </div>

<div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Status *</label>
              <select
                value={formData.status}
                onChange={(e) => handleFieldChange("status", e.target.value)}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
              >
                <option value="ACTIVE">Active</option>
                <option value="INACTIVE">Inactive</option>
              </select>
            </div>
          </div>

<div className="flex gap-3 pt-4 border-t border-gray-200">
            <button
              type="submit"
              disabled={isSubmitting}
              className="bg-[#CE1126] text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors font-medium whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {isSubmitting ? "Adding..." : "Add Contact Information"}
            </button>
            <Link href="/admin/contact/info">
              <button
                type="button"
                className="bg-gray-200 text-gray-800 px-4 py-2 rounded-lg hover:bg-gray-300 transition-colors font-medium whitespace-nowrap"
              >
                Cancel
              </button>
            </Link>
          </div>
        </form>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/contact/info/edit/[id]/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter, useParams } from "next/navigation"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"
import { validationHelpers } from "@/lib/form-validation"
import { API_ENDPOINTS } from "@/lib/api-config"

export default function EditContactInfoPage() {
  const router = useRouter()
  const params = useParams()
  const contactId = Number(params.id)

const [formData, setFormData] = useState({
    title: "",
    phone: "",
    address: "",
    email: "",
    map_embed_url: "",
    display_order: 0,
    status: "ACTIVE",
  })
  const [errors, setErrors] = useState<Record<string, string>>({})
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    setFormData({
      title: "Head Office",
      phone: "+1 (302) 208 2666",
      address: "Suite 8 The Green #19578, Dover, DE 19901",
      email: "info@myowninc.com",
      map_embed_url: "https://maps.google.com/embed?pb=...",
      display_order: 0,
      status: "ACTIVE",
    })
    setIsLoading(false)
  }, [contactId])

const validateForm = () => {
    const newErrors: Record<string, string> = {}

Object.keys(newErrors).forEach((key) => {
      if (!newErrors[key]) delete newErrors[key]
    })

setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (validateForm()) {
      try {
        setIsSubmitting(true)
        const response = await fetch(API_ENDPOINTS.contactInfo.update(contactId), {
          method: "PUT",
          headers: {
            "Content-Type": "application/json",
            Accept: "application/json",
            "X-Requested-With": "XMLHttpRequest",
          },
          credentials: "include",
          body: JSON.stringify(formData),
        })

if (!response.ok) {
          throw new Error("Failed to update contact")
        }

router.push("/admin/contact/info")
      } catch (err) {
        alert("Failed to update contact. Please try again.")
      } finally {
        setIsSubmitting(false)
      }
    }
  }

if (isLoading) {
    return (
      <div className="p-4 sm:p-6">
        <p className="text-gray-600">Loading...</p>
      </div>
    )
  }

<div className="bg-white rounded-lg p-6 max-w-2xl">
        <form onSubmit={handleSubmit} className="space-y-6">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Title *</label>
            <input
              type="text"
              placeholder="e.g., Head Office, mcc Office, Community Center"
              value={formData.title}
              onChange={(e) => handleFieldChange("title", e.target.value)}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            />
            {errors.title && <p className="text-red-500 text-sm mt-1">{errors.title}</p>}
          </div>

<div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Status *</label>
              <select
                value={formData.status}
                onChange={(e) => handleFieldChange("status", e.target.value as "ACTIVE" | "INACTIVE")}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
              >
                <option value="ACTIVE">Active</option>
                <option value="INACTIVE">Inactive</option>
              </select>
            </div>
          </div>

<div className="flex gap-3 pt-4 border-t border-gray-200">
            <button
              type="submit"
              disabled={isSubmitting}
              className="bg-[#CE1126] text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors font-medium whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {isSubmitting ? "Updating..." : "Update Contact Information"}
            </button>
            <Link href="/admin/contact/info">
              <button
                type="button"
                className="bg-gray-200 text-gray-800 px-4 py-2 rounded-lg hover:bg-gray-300 transition-colors font-medium whitespace-nowrap"
              >
                Cancel
              </button>
            </Link>
          </div>
        </form>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/contact/form-submissions/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { ArrowLeft, Eye, Trash2, AlertCircle } from "lucide-react"
import Link from "next/link"
import { API_ENDPOINTS } from "@/lib/api-config"

interface FormSubmission {
  id: number
  name: string
  email: string
  subject: string
  message: string
  status: "NEW" | "APPROVED" | "REJECTED"
  date: string
}

const mockSubmissions: FormSubmission[] = [
  {
    id: 1,
    name: "John Doe",
    email: "john@example.com",
    subject: "Membership Inquiry",
    message: "I am interested in becoming a member of MCC. Could you provide me with more information?",
    date: "2026-01-15T10:30:00Z",
    status: "NEW",
  },
  {
    id: 2,
    name: "Sarah Johnson",
    email: "sarah@example.com",
    subject: "Event Participation",
    message: "I would like to participate in the upcoming community event. Please let me know the details.",
    date: "2026-01-14T14:45:00Z",
    status: "APPROVED",
  },
]

export default function FormSubmissionsPage() {
  const [submissions, setSubmissions] = useState<FormSubmission[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [filterStatus, setFilterStatus] = useState<"All" | "NEW" | "APPROVED" | "REJECTED">("All")

useEffect(() => {
    const fetchSubmissions = async () => {
      try {
        setLoading(true)
        const response = await fetch(API_ENDPOINTS.contactForms.list, {
          headers: {
            "Content-Type": "application/json",
            Accept: "application/json",
            "X-Requested-With": "XMLHttpRequest",
          },
          credentials: "include",
        })

if (!response.ok) {
          throw new Error("Failed to fetch form submissions")
        }

const data = await response.json()
        setSubmissions(Array.isArray(data) ? data : data.submissions || mockSubmissions)
        setError(null)
      } catch (err) {
        setSubmissions(mockSubmissions)
        setError("Unable to connect to server. Using sample data.")
      } finally {
        setLoading(false)
      }
    }

fetchSubmissions()
  }, [])

const filteredSubmissions =
    filterStatus === "All" ? submissions : submissions.filter((s) => s.status === filterStatus)
  const newCount = submissions.filter((s) => s.status === "NEW").length

const handleDelete = (id: number) => {
    if (confirm("Are you sure you want to delete this submission?")) {
      setSubmissions(submissions.filter((s) => s.id !== id))
    }
  }

const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString()
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "NEW":
        return "bg-blue-100 text-blue-800"
      case "APPROVED":
        return "bg-green-100 text-green-800"
      case "REJECTED":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      <div className="flex items-center gap-3 mb-4">
        <Link href="/admin/contact">
          <button className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 font-medium">
            <ArrowLeft className="w-5 h-5" />
            Back to Contact
          </button>
        </Link>
      </div>

{error && (
        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 flex items-center gap-3">
          <AlertCircle className="w-5 h-5 text-yellow-600 flex-shrink-0" />
          <p className="text-sm text-yellow-800">{error}</p>
        </div>
      )}

{/* Header */}
      <div>
        <h1 className="text-3xl font-bold text-gray-900">Contact Form Submissions</h1>
        <p className="text-gray-600 mt-1">Total Submissions: {submissions.length}</p>
      </div>

{/* Filter Tabs */}
      <div className="flex gap-2 border-b border-gray-200 overflow-x-auto">
        {(["All", "NEW", "APPROVED", "REJECTED"] as const).map((status) => (
          <button
            key={status}
            onClick={() => setFilterStatus(status)}
            className={`px-4 py-3 font-medium text-sm border-b-2 transition-colors whitespace-nowrap ${filterStatus === status ? "border-[#CE1126] text-[#CE1126]" : "border-transparent text-gray-600 hover:text-gray-900"}`}
          >
            {status} {status === "NEW" && newCount > 0 && `(${newCount})`}
          </button>
        ))}
      </div>

{/* Submissions List */}
      <div className="space-y-3">
        {loading ? (
          <Card className="p-8 text-center">
            <p className="text-gray-600">Loading submissions...</p>
          </Card>
        ) : filteredSubmissions.length === 0 ? (
          <Card className="p-8 text-center">
            <p className="text-gray-600">No contact submissions found.</p>
          </Card>
        ) : (
          filteredSubmissions.map((submission) => (
            <Card key={submission.id} className="hover:shadow-md transition-shadow">
              <CardContent className="pt-6">
                <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
                  <div className="flex-1 min-w-0">
                    <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 mb-2">
                      <h3 className="font-semibold text-gray-900 truncate">{submission.name}</h3>
                      <span
                        className={`inline-block px-2 py-1 rounded text-xs font-semibold w-fit ${getStatusColor(submission.status)}`}
                      >
                        {submission.status}
                      </span>
                    </div>
                    <p className="text-sm text-gray-600 mb-1">{submission.email}</p>
                    <p className="text-sm font-medium text-gray-900 mb-2">{submission.subject}</p>
                    <p className="text-sm text-gray-700 line-clamp-2">{submission.message}</p>
                    <p className="text-xs text-gray-500 mt-2">{formatDate(submission.date)}</p>
                  </div>
                  <div className="flex gap-2 flex-shrink-0">
                    <Link href={`/admin/contact/form-submissions/view/${submission.id}`}>
                      <button
                        className="text-blue-600 hover:text-blue-800 p-2 hover:bg-blue-50 rounded-lg transition-colors"
                        title="View"
                      >
                        <Eye className="w-5 h-5" />
                      </button>
                    </Link>
                    <button
                      onClick={() => handleDelete(submission.id)}
                      className="text-red-600 hover:text-red-800 p-2 hover:bg-red-50 rounded-lg transition-colors"
                      title="Delete"
                    >
                      <Trash2 className="w-5 h-5" />
                    </button>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/contact/form-submissions/view/[id]/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { ArrowLeft, AlertCircle } from "lucide-react"
import { API_ENDPOINTS } from "@/lib/api-config"

interface FormSubmission {
  id: number
  name: string
  email: string
  subject: string
  message: string
  status: "NEW" | "APPROVED" | "REJECTED"
  date: string
}

export default function FormSubmissionViewPage({ params }: { params: { id: string } }) {
  const [submission, setSubmission] = useState<FormSubmission | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [updatingStatus, setUpdatingStatus] = useState(false)

useEffect(() => {
    const fetchSubmission = async () => {
      try {
        setLoading(true)
        const response = await fetch(`${API_ENDPOINTS.contactForms.list}/${params.id}`, {
          headers: {
            "Content-Type": "application/json",
            Accept: "application/json",
            "X-Requested-With": "XMLHttpRequest",
          },
          credentials: "include",
        })

if (!response.ok) {
          throw new Error("Failed to fetch submission")
        }

const data = await response.json()
        setSubmission(data || mockSubmissions[0])
        setError(null)
      } catch (err) {
        setSubmission(mockSubmissions.find((s) => s.id === Number.parseInt(params.id)) || mockSubmissions[0])
        setError("Unable to connect to server. Using sample data.")
      } finally {
        setLoading(false)
      }
    }

fetchSubmission()
  }, [params.id])

const handleStatusUpdate = async (newStatus: "NEW" | "APPROVED" | "REJECTED") => {
    if (!submission) return

try {
      setUpdatingStatus(true)
      const response = await fetch(API_ENDPOINTS.contactForms.updateStatus(submission.id), {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
          "X-Requested-With": "XMLHttpRequest",
        },
        credentials: "include",
        body: JSON.stringify({ status: newStatus }),
      })

if (!response.ok) {
        throw new Error("Failed to update status")
      }

setSubmission({ ...submission, status: newStatus })
      } catch (err) {
        alert("Failed to update status. Please try again.")
    } finally {
      setUpdatingStatus(false)
    }
  }

const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString()
  }

if (loading) {
    return (
      <div className="p-6">
        <p className="text-gray-600">Loading submission...</p>
      </div>
    )
  }

if (!submission) {
    return (
      <div className="p-6">
        <Link href="/admin/contact/form-submissions">
          <button className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 font-medium mb-4">
            <ArrowLeft className="w-5 h-5" />
            Back to Submissions
          </button>
        </Link>
        <p className="text-gray-600">Submission not found.</p>
      </div>
    )
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      <Link href="/admin/contact/form-submissions">
        <button className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 font-medium">
          <ArrowLeft className="w-5 h-5" />
          Back to Submissions
        </button>
      </Link>

<div className="bg-white rounded-lg p-6 sm:p-8 space-y-6">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">{submission.subject}</h1>
          <p className="text-gray-600 mt-2">From: {submission.name}</p>
        </div>

<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
          <div>
            <label className="text-sm font-medium text-gray-600">Name</label>
            <p className="text-gray-900 mt-2">{submission.name}</p>
          </div>
          <div>
            <label className="text-sm font-medium text-gray-600">Email</label>
            <p className="text-gray-900 mt-2 break-all">{submission.email}</p>
          </div>
          <div>
            <label className="text-sm font-medium text-gray-600">Submitted Date</label>
            <p className="text-gray-900 mt-2">{formatDate(submission.date)}</p>
          </div>
          <div>
            <label className="text-sm font-medium text-gray-600">Status</label>
            <span
              className={`inline-block px-3 py-1 rounded-full text-sm font-medium mt-2 ${getStatusColor(submission.status)}`}
            >
              {submission.status}
            </span>
          </div>
        </div>

<div>
          <label className="text-sm font-medium text-gray-600">Message</label>
          <div className="mt-2 bg-gray-50 rounded-lg p-4">
            <p className="text-gray-900 whitespace-pre-wrap">{submission.message}</p>
          </div>
        </div>

<div className="pt-6 border-t border-gray-200">
          <label className="text-sm font-medium text-gray-600 block mb-3">Update Status</label>
          <div className="flex gap-3 flex-wrap">
            {(["NEW", "APPROVED", "REJECTED"] as const).map((status) => (
              <button
                key={status}
                onClick={() => handleStatusUpdate(status)}
                disabled={updatingStatus || submission.status === status}
                className={`px-4 py-2 rounded-lg font-medium text-sm transition-colors ${
                  submission.status === status
                    ? "bg-gray-100 text-gray-500 cursor-not-allowed"
                    : status === "APPROVED"
                      ? "bg-green-100 text-green-700 hover:bg-green-200"
                      : status === "REJECTED"
                        ? "bg-red-100 text-red-700 hover:bg-red-200"
                        : "bg-blue-100 text-blue-700 hover:bg-blue-200"
                }`}
              >
                {updatingStatus ? "Updating..." : `Mark as ${status}`}
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/api-utils.ts" isQuickEdit="true" isMerged="true"
export async function apiCall(url: string, method: "GET" | "DELETE" = "GET") {
  const response = await fetch(url, {
    method,
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
      "X-Requested-With": "XMLHttpRequest",
    },
    credentials: "include",
  })

if (!response.ok) {
    const errorText = await response.text()
    throw new Error(`HTTP error! status: ${response.status}, message: ${errorText}`)
  }

return response.json()
}

export async function apiCallWithFormData(url: string, formData: FormData, method: "POST" | "PUT" = "POST") {
  const response = await fetch(url, {
    method,
    body: formData,
    credentials: "include",
    headers: {
      Accept: "application/json",
      "X-Requested-With": "XMLHttpRequest",
    },
  })

if (!response.ok) {
    const errorText = await response.text()
    throw new Error(`HTTP error! status: ${response.status}, message: ${errorText}`)
  }

return response.json()
}

export async function apiCallWithJSON(url: string, data: unknown, method: "POST" | "PUT" = "POST") {
  const response = await fetch(url, {
    method,
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
      "X-Requested-With": "XMLHttpRequest",
    },
    body: JSON.stringify(data),
    credentials: "include",
  })

if (!response.ok) {
    const errorText = await response.text()
    throw new Error(`HTTP error! status: ${response.status}, message: ${errorText}`)
  }

return response.json()
}

export async function apiGetWithHeaders(url: string, customHeaders: Record<string, string> = {}) {
  const response = await fetch(url, {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
      "X-Requested-With": "XMLHttpRequest",
      ...customHeaders,
    },
    credentials: "include",
  })

if (!response.ok) {
    const errorText = await response.text()
    throw new Error(`HTTP error! status: ${response.status}, message: ${errorText}`)
  }

return response.json()
}

export async function apiPostWithHeaders(url: string, data?: unknown, customHeaders: Record<string, string> = {}) {
  const response = await fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
      "X-Requested-With": "XMLHttpRequest",
      ...customHeaders,
    },
    body: data ? JSON.stringify(data) : undefined,
    credentials: "include",
  })

if (!response.ok) {
    const errorText = await response.text()
    throw new Error(`HTTP error! status: ${response.status}, message: ${errorText}`)
  }

return response
}

export async function apiPutWithHeaders(url: string, data?: unknown, customHeaders: Record<string, string> = {}) {
  const response = await fetch(url, {
    method: "PUT",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
      "X-Requested-With": "XMLHttpRequest",
      ...customHeaders,
    },
    body: data ? JSON.stringify(data) : undefined,
    credentials: "include",
  })

if (!response.ok) {
    const errorText = await response.text()
    throw new Error(`HTTP error! status: ${response.status}, message: ${errorText}`)
  }

return response
}
[V0_FILE]typescriptreact:file="app/admin/settings/social-media/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Save } from "lucide-react"
import Link from "next/link"
import { Facebook, Instagram, Youtube, Twitter } from "lucide-react"
import { API_ENDPOINTS } from "@/lib/api-config"

export default function SocialMediaPage() {
  const [formData, setFormData] = useState({
    facebook: "https://facebook.com/mcc-malaysia",
    instagram: "https://instagram.com/mcc_malaysia",
    youtube: "https://youtube.com/@mccmalaysia",
    twitter: "https://twitter.com/mcc_malaysia",
    linkedin: "https://linkedin.com/company/mcc-malaysia",
    tiktok: "https://tiktok.com/@mcc_malaysia",
  })

const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [success, setSuccess] = useState(false)

const handleChange = (e: any) => {
    const { name, value } = e.target
    setFormData((prev) => ({
      ...prev,
      [name]: value,
    }))
    setError(null)
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    setError(null)
    setSuccess(false)

try {
      const response = await fetch(API_ENDPOINTS.settings.socialMedia, {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
          "X-Requested-With": "XMLHttpRequest",
        },
        credentials: "include",
        body: JSON.stringify(formData),
      })

const data = await response.json()

if (data.status === "SUCCESS") {
        setSuccess(true)
        setTimeout(() => setSuccess(false), 3000)
      } else {
        setError("Failed to save social media links")
      }
    } catch (err) {
      setError("Unable to connect to server. Please try again.")
      console.error("Social media save error:", err)
    } finally {
      setLoading(false)
    }
  }

const socialLinks = [
    { key: "facebook", label: "Facebook", icon: Facebook, color: "text-blue-600" },
    { key: "instagram", label: "Instagram", icon: Instagram, color: "text-pink-600" },
    { key: "youtube", label: "YouTube", icon: Youtube, color: "text-red-600" },
    { key: "twitter", label: "Twitter", icon: Twitter, color: "text-blue-400" },
    { key: "linkedin", label: "LinkedIn", icon: Twitter, color: "text-blue-700" },
    { key: "tiktok", label: "TikTok", icon: Twitter, color: "text-gray-900" },
  ]

return (
    <div className="p-4 sm:p-6 space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Social Media Links</h1>
          <p className="text-gray-600 mt-2">Configure social media accounts</p>
        </div>
        <Link href="/admin/settings">
          <button className="px-4 py-2 text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium">
            Back
          </button>
        </Link>
      </div>

{success && (
        <div className="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg text-sm">
          Social media links saved successfully!
        </div>
      )}

{error && (
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">{error}</div>
      )}

<form onSubmit={handleSubmit} className="bg-white rounded-lg border border-gray-200 p-6 space-y-6 max-w-2xl">
        {socialLinks.map((social) => {
          const Icon = social.icon
          return (
            <div key={social.key}>
              <label className="block text-sm font-medium text-gray-700 mb-2 flex items-center gap-2">
                <Icon className={`w-5 h-5 ${social.color}`} />
                {social.label}
              </label>
              <input
                type="url"
                name={social.key}
                value={formData[social.key as keyof typeof formData]}
                onChange={handleChange}
                placeholder={`https://${social.key}.com/your-profile`}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
              />
            </div>
          )
        })}

<button
          type="submit"
          disabled={loading}
          className="flex items-center gap-2 px-4 py-2 bg-[#CE1126] text-white rounded-lg hover:bg-red-700 transition-colors font-medium text-sm w-auto disabled:opacity-50 disabled:cursor-not-allowed"
        >
          <Save className="w-5 h-5" />
          {loading ? "Saving..." : "Save Links"}
        </button>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/audit-logs/page.tsx" isMerged="true"
"use client"
import { Card, CardContent } from "@/components/ui/card"
import { ArrowRight, Activity, LogIn, Database } from "lucide-react"
import Link from "next/link"
import { useState, useEffect } from "react"
import { API_ENDPOINTS } from "@/lib/api-config"
import { apiGetWithHeaders } from "@/lib/api-utils"

interface DashboardStats {
  today_activities: number
  login_events: number
  data_changes: number
}

export default function AuditLogsPage() {
  const [stats, setStats] = useState<DashboardStats>({
    today_activities: 0,
    login_events: 0,
    data_changes: 0,
  })
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState(false)

useEffect(() => {
    const fetchDashboardStats = async () => {
      try {
        const response = await apiGetWithHeaders(API_ENDPOINTS.audit.dashboard)
        const data = await response.json()
        setStats(data)
        setError(false)
      } catch {
        setError(true)
      } finally {
        setIsLoading(false)
      }
    }

fetchDashboardStats()
  }, [])

const statCards = [
    { label: "Today Activities", count: stats.today_activities, icon: Activity, color: "bg-blue-100 text-blue-700" },
    { label: "Login Events", count: stats.login_events, icon: LogIn, color: "bg-green-100 text-green-700" },
    { label: "Data Changes", count: stats.data_changes, icon: Database, color: "bg-purple-100 text-purple-700" },
  ]

const logSections = [
    {
      title: "Admin Activity Logs",
      description: "Records of all admin actions - creates, updates, deletes, and system changes",
      icon: Activity,
      href: "/admin/audit-logs/activity",
      color: "bg-blue-50 border-blue-200 hover:border-blue-400",
    },
    {
      title: "Login History",
      description: "Track who logged in, IP addresses, devices, and login timestamps",
      icon: LogIn,
      href: "/admin/audit-logs/login",
      color: "bg-green-50 border-green-200 hover:border-green-400",
    },
    {
      title: "Data Change Logs",
      description: "View history of all data modifications - before and after values",
      icon: Database,
      href: "/admin/audit-logs/data-changes",
      color: "bg-purple-50 border-purple-200 hover:border-purple-400",
    },
  ]

return (
    <div className="p-4 sm:p-6 space-y-8">
      <div>
        <h1 className="text-3xl font-bold text-gray-900">Audit & Logs</h1>
        <p className="text-gray-600 mt-2">Monitor admin activities, security events, and data changes</p>
      </div>

{error && (
        <div className="bg-yellow-50 border border-yellow-200 text-yellow-800 px-4 py-3 rounded">
          Using sample data. Unable to connect to server.
        </div>
      )}

{/* Stats Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
        {statCards.map((stat, idx) => {
          const Icon = stat.icon
          return (
            <Card key={idx}>
              <CardContent className="pt-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm text-gray-600">{stat.label}</p>
                    <p className="text-3xl font-bold text-gray-900 mt-2">{isLoading ? "-" : stat.count}</p>
                  </div>
                  <div className={`p-3 rounded-lg ${stat.color}`}>
                    <Icon className="w-6 h-6" />
                  </div>
                </div>
              </CardContent>
            </Card>
          )
        })}
      </div>

{/* Log Sections */}
      <div>
        <h2 className="text-2xl font-bold text-gray-900 mb-4">Log Management</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {logSections.map((section, idx) => {
            const Icon = section.icon
            return (
              <Link key={idx} href={section.href}>
                <Card className={`h-full cursor-pointer border transition-all ${section.color}`}>
                  <CardContent className="pt-6">
                    <div className="flex items-start justify-between">
                      <div>
                        <h3 className="font-bold text-gray-900 text-lg">{section.title}</h3>
                        <p className="text-gray-600 text-sm mt-2">{section.description}</p>
                      </div>
                      <Icon className="w-8 h-8 text-gray-400" />
                    </div>
                    <div className="mt-4 flex items-center gap-2 text-[#CE1126] font-medium">
                      View Logs <ArrowRight className="w-4 h-4" />
                    </div>
                  </CardContent>
                </Card>
              </Link>
            )
          })}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/audit-logs/activity/client.tsx" isMerged="true"
"use client"
import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { ChevronLeft, Search, Download, Eye } from "lucide-react"
import Link from "next/link"
import { API_ENDPOINTS } from "@/lib/api-config"
import { apiGetWithHeaders } from "@/lib/api-utils"

interface ActivityLog {
  id: string
  adminName: string
  action: string
  module: string
  description: string
  timestamp: string
  ipAddress: string
  status: "success" | "failed"
}

interface ApiResponse {
  count: number
  next: string | null
  previous: string | null
  results: ActivityLog[]
}

export default function ActivityLogsClient() {
  const [searchTerm, setSearchTerm] = useState("")
  const [filterAction, setFilterAction] = useState("all")
  const [page, setPage] = useState(1)
  const [logs, setLogs] = useState<ActivityLog[]>([])
  const [totalCount, setTotalCount] = useState(0)
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState(false)

useEffect(() => {
    const fetchLogs = async () => {
      try {
        const params = new URLSearchParams()
        if (searchTerm) params.append("search", searchTerm)
        if (filterAction !== "all") params.append("action", filterAction)
        params.append("page", page.toString())
        params.append("page_size", "10")

const url = `${API_ENDPOINTS.audit.adminActivities}?${params.toString()}`
        const response = await apiGetWithHeaders(url)
        const data: ApiResponse = await response.json()
        setLogs(data.results)
        setTotalCount(data.count)
        setError(false)
      } catch {
        setError(true)
        setLogs(mockLogs)
        setTotalCount(mockLogs.length)
      } finally {
        setIsLoading(false)
      }
    }

fetchLogs()
  }, [searchTerm, filterAction, page])

const mockLogs: ActivityLog[] = [
    {
      id: "1",
      adminName: "John Admin",
      action: "Create",
      module: "Pages",
      description: "Created new page 'About Us'",
      timestamp: "2025-01-08 10:45:23",
      ipAddress: "192.168.1.100",
      status: "success",
    },
    {
      id: "2",
      adminName: "Jane Editor",
      action: "Update",
      module: "Committees",
      description: "Updated committee member list",
      timestamp: "2025-01-08 09:30:15",
      ipAddress: "192.168.1.101",
      status: "success",
    },
  ]

const actions = Array.from(new Set(logs.map((log) => log.action)))

const getStatusColor = (status: string) => {
    return status === "success" ? "text-green-600" : "text-red-600"
  }

const downloadExport = async () => {
    try {
      const response = await fetch(API_ENDPOINTS.audit.export.adminActivities, {
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
          "X-Requested-With": "XMLHttpRequest",
        },
        credentials: "include",
      })
      const blob = await response.blob()
      const url = window.URL.createObjectURL(blob)
      const a = document.createElement("a")
      a.href = url
      a.download = `admin-activities-${new Date().toISOString()}.csv`
      a.click()
    } catch {
      alert("Failed to export data")
    }
  }

{error && (
        <div className="bg-yellow-50 border border-yellow-200 text-yellow-800 px-4 py-3 rounded">
          Using sample data. Unable to connect to server.
        </div>
      )}

{/* Search and Filter */}
      <Card>
        <CardContent className="pt-6">
          <div className="flex flex-col sm:flex-row gap-3">
            <div className="flex-1 relative">
              <Search className="absolute left-3 top-3 w-4 h-4 text-gray-400" />
              <Input
                placeholder="Search by admin name, action, or description..."
                value={searchTerm}
                onChange={(e) => {
                  setSearchTerm(e.target.value)
                  setPage(1)
                }}
                className="pl-10"
              />
            </div>
            <select
              value={filterAction}
              onChange={(e) => {
                setFilterAction(e.target.value)
                setPage(1)
              }}
              className="px-3 py-2 border border-gray-300 rounded-md text-sm w-auto"
            >
              <option value="all">All Actions</option>
              {["CREATE", "UPDATE", "DELETE", "POST", "GET", "PUT"].map((action) => (
                <option key={action} value={action}>
                  {action}
                </option>
              ))}
            </select>
          </div>
        </CardContent>
      </Card>

{/* Activity Logs Table */}
      <Card>
        <CardHeader>
          <CardTitle>Activity Records</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-gray-200">
                  <th className="text-left py-3 px-4 font-semibold text-gray-700">Admin Name</th>
                  <th className="text-left py-3 px-4 font-semibold text-gray-700">Action</th>
                  <th className="text-left py-3 px-4 font-semibold text-gray-700">Module</th>
                  <th className="text-left py-3 px-4 font-semibold text-gray-700">Description</th>
                  <th className="text-left py-3 px-4 font-semibold text-gray-700">Timestamp</th>
                  <th className="text-left py-3 px-4 font-semibold text-gray-700">IP Address</th>
                  <th className="text-left py-3 px-4 font-semibold text-gray-700">Status</th>
                  <th className="text-center py-3 px-4 font-semibold text-gray-700">Actions</th>
                </tr>
              </thead>
              <tbody>
                {logs.length > 0 ? (
                  logs.map((log) => (
                    <tr key={log.id} className="border-b border-gray-100 hover:bg-gray-50">
                      <td className="py-3 px-4">{log.adminName}</td>
                      <td className="py-3 px-4">
                        <span className={`px-3 py-1 rounded-full text-xs font-semibold ${getActionColor(log.action)}`}>
                          {log.action}
                        </span>
                      </td>
                      <td className="py-3 px-4">{log.module}</td>
                      <td className="py-3 px-4 max-w-xs truncate">{log.description}</td>
                      <td className="py-3 px-4 text-gray-600">{log.timestamp}</td>
                      <td className="py-3 px-4 text-gray-600">{log.ipAddress}</td>
                      <td className="py-3 px-4">
                        <span className={`font-semibold ${getStatusColor(log.status)}`}>
                          {log.status === "success" ? "✓ Success" : "✗ Failed"}
                        </span>
                      </td>
                      <td className="py-3 px-4">
                        <div className="flex items-center justify-center gap-2">
                          <Link href={`/admin/audit-logs/activity/${log.id}`}>
                            <Button variant="ghost" size="sm" className="w-auto text-[#CE1126]">
                              <Eye className="w-4 h-4" />
                            </Button>
                          </Link>
                        </div>
                      </td>
                    </tr>
                  ))
                ) : (
                  <tr>
                    <td colSpan={8} className="py-8 text-center text-gray-500">
                      No activity logs found
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>

{/* Pagination */}
      <div className="flex items-center justify-between">
        <p className="text-sm text-gray-600">
          Showing page {page} of {Math.ceil(totalCount / 10)} ({totalCount} total logs)
        </p>
        <div className="flex gap-2">
          <Button
            variant="outline"
            className="w-auto bg-transparent"
            disabled={page === 1}
            onClick={() => setPage(page - 1)}
          >
            Previous
          </Button>
          <Button
            variant="outline"
            className="w-auto bg-transparent"
            disabled={page * 10 >= totalCount}
            onClick={() => setPage(page + 1)}
          >
            Next
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/audit-logs/login/client.tsx" isMerged="true"
"use client"
import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { ChevronLeft, Search, Download, Eye, Smartphone, Monitor, MapPin } from "lucide-react"
import Link from "next/link"
import { API_ENDPOINTS } from "@/lib/api-config"
import { apiGetWithHeaders } from "@/lib/api-utils"

interface LoginLog {
  id: string
  adminName: string
  email: string
  loginTime: string
  logoutTime: string | null
  ipAddress: string
  device: string
  browser: string
  location: string
  status: "active" | "logged_out"
}

interface ApiResponse {
  count: number
  next: string | null
  previous: string | null
  results: LoginLog[]
}

export default function LoginHistoryClient() {
  const [searchTerm, setSearchTerm] = useState("")
  const [filterStatus, setFilterStatus] = useState("all")
  const [page, setPage] = useState(1)
  const [logs, setLogs] = useState<LoginLog[]>([])
  const [totalCount, setTotalCount] = useState(0)
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState(false)

useEffect(() => {
    const fetchLogs = async () => {
      try {
        const params = new URLSearchParams()
        if (searchTerm) params.append("search", searchTerm)
        if (filterStatus !== "all") params.append("status", filterStatus.toUpperCase())
        params.append("page", page.toString())
        params.append("page_size", "25")

const url = `${API_ENDPOINTS.audit.loginHistory}?${params.toString()}`
        const response = await apiGetWithHeaders(url)
        const data: ApiResponse = await response.json()
        setLogs(data.results)
        setTotalCount(data.count)
        setError(false)
      } catch {
        setError(true)
        setLogs(mockLogs)
        setTotalCount(mockLogs.length)
      } finally {
        setIsLoading(false)
      }
    }

fetchLogs()
  }, [searchTerm, filterStatus, page])

const mockLogs: LoginLog[] = [
    {
      id: "1",
      adminName: "John Admin",
      email: "john@example.com",
      loginTime: "2025-01-08 10:15:30",
      logoutTime: "2025-01-08 17:45:20",
      ipAddress: "192.168.1.100",
      device: "Windows Desktop",
      browser: "Chrome 120",
      location: "New York, USA",
      status: "logged_out",
    },
  ]

const getStatusColor = (status: string) => {
    return status === "active" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
  }

const downloadExport = async () => {
    try {
      const response = await fetch(API_ENDPOINTS.audit.export.loginHistory, {
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
          "X-Requested-With": "XMLHttpRequest",
        },
        credentials: "include",
      })
      const blob = await response.blob()
      const url = window.URL.createObjectURL(blob)
      const a = document.createElement("a")
      a.href = url
      a.download = `login-history-${new Date().toISOString()}.csv`
      a.click()
    } catch {
      alert("Failed to export data")
    }
  }

{error && (
        <div className="bg-yellow-50 border border-yellow-200 text-yellow-800 px-4 py-3 rounded">
          Using sample data. Unable to connect to server.
        </div>
      )}

{/* Search and Filter */}
      <Card>
        <CardContent className="pt-6">
          <div className="flex flex-col sm:flex-row gap-3">
            <div className="flex-1 relative">
              <Search className="absolute left-3 top-3 w-4 h-4 text-gray-400" />
              <Input
                placeholder="Search by admin name, email, or IP address..."
                value={searchTerm}
                onChange={(e) => {
                  setSearchTerm(e.target.value)
                  setPage(1)
                }}
                className="pl-10"
              />
            </div>
            <select
              value={filterStatus}
              onChange={(e) => {
                setFilterStatus(e.target.value)
                setPage(1)
              }}
              className="px-3 py-2 border border-gray-300 rounded-md text-sm w-auto"
            >
              <option value="all">All Status</option>
              <option value="active">Active Sessions</option>
              <option value="logged_out">Logged Out</option>
            </select>
          </div>
        </CardContent>
      </Card>

{/* Login History Table */}
      <Card>
        <CardHeader>
          <CardTitle>Login Records</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-gray-200">
                  <th className="text-left py-3 px-4 font-semibold text-gray-700">Admin Name</th>
                  <th className="text-left py-3 px-4 font-semibold text-gray-700">Email</th>
                  <th className="text-left py-3 px-4 font-semibold text-gray-700">Login Time</th>
                  <th className="text-left py-3 px-4 font-semibold text-gray-700">Duration</th>
                  <th className="text-left py-3 px-4 font-semibold text-gray-700">Device</th>
                  <th className="text-left py-3 px-4 font-semibold text-gray-700">Browser</th>
                  <th className="text-left py-3 px-4 font-semibold text-gray-700">Location</th>
                  <th className="text-left py-3 px-4 font-semibold text-gray-700">Status</th>
                  <th className="text-center py-3 px-4 font-semibold text-gray-700">Actions</th>
                </tr>
              </thead>
              <tbody>
                {logs.length > 0 ? (
                  logs.map((log) => (
                    <tr key={log.id} className="border-b border-gray-100 hover:bg-gray-50">
                      <td className="py-3 px-4 font-medium">{log.adminName}</td>
                      <td className="py-3 px-4 text-gray-600">{log.email}</td>
                      <td className="py-3 px-4 text-gray-600">{log.loginTime}</td>
                      <td className="py-3 px-4">
                        <span className="font-semibold text-[#CE1126]">
                          {getDurationInHours(log.loginTime, log.logoutTime)}
                        </span>
                      </td>
                      <td className="py-3 px-4">
                        <div className="flex items-center gap-2">
                          {log.device.includes("Desktop") ? (
                            <Monitor className="w-4 h-4 text-gray-500" />
                          ) : (
                            <Smartphone className="w-4 h-4 text-gray-500" />
                          )}
                          <span className="text-gray-600">{log.device}</span>
                        </div>
                      </td>
                      <td className="py-3 px-4 text-gray-600">{log.browser}</td>
                      <td className="py-3 px-4">
                        <div className="flex items-center gap-2 text-gray-600">
                          <MapPin className="w-4 h-4" />
                          <span>{log.location}</span>
                        </div>
                      </td>
                      <td className="py-3 px-4">
                        <span
                          className={`px-3 py-1 rounded-full text-xs font-semibold whitespace-nowrap ${getStatusColor(log.status)}`}
                        >
                          {log.status === "active" ? "Active" : "Logged Out"}
                        </span>
                      </td>
                      <td className="py-3 px-4">
                        <div className="flex items-center justify-center gap-2">
                          <Link href={`/admin/audit-logs/login/${log.id}`}>
                            <Button variant="ghost" size="sm" className="w-auto text-[#CE1126]">
                              <Eye className="w-4 h-4" />
                            </Button>
                          </Link>
                        </div>
                      </td>
                    </tr>
                  ))
                ) : (
                  <tr>
                    <td colSpan={9} className="py-8 text-center text-gray-500">
                      No login records found
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>

{/* Pagination */}
      <div className="flex items-center justify-between">
        <p className="text-sm text-gray-600">
          Showing page {page} of {Math.ceil(totalCount / 25)} ({totalCount} total records)
        </p>
        <div className="flex gap-2">
          <Button
            variant="outline"
            className="w-auto bg-transparent"
            disabled={page === 1}
            onClick={() => setPage(page - 1)}
          >
            Previous
          </Button>
          <Button
            variant="outline"
            className="w-auto bg-transparent"
            disabled={page * 25 >= totalCount}
            onClick={() => setPage(page + 1)}
          >
            Next
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/audit-logs/data-changes/client.tsx" isMerged="true"
"use client"
import { useState, useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { ChevronLeft, Search, Download, ChevronDown } from "lucide-react"
import Link from "next/link"
import { API_ENDPOINTS } from "@/lib/api-config"
import { apiGetWithHeaders } from "@/lib/api-utils"

interface DataChangeLog {
  id: string
  adminName: string
  module: string
  recordName: string
  changeType: "create" | "update" | "delete"
  timestamp: string
  changes: Array<{
    field: string
    oldValue: string
    newValue: string
  }>
}

export default function DataChangeLogsClient() {
  const [searchTerm, setSearchTerm] = useState("")
  const [expandedId, setExpandedId] = useState<string | null>(null)
  const [filterModule, setFilterModule] = useState("all")
  const [logs, setLogs] = useState<DataChangeLog[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState(false)

useEffect(() => {
    const fetchLogs = async () => {
      try {
        const params = new URLSearchParams()
        if (searchTerm) params.append("search", searchTerm)
        if (filterModule !== "all") params.append("module", filterModule)

const url = `${API_ENDPOINTS.audit.dataChanges}?${params.toString()}`
        const response = await apiGetWithHeaders(url)
        const data = await response.json()
        setLogs(Array.isArray(data) ? data : data.results || [])
        setError(false)
      } catch {
        setError(true)
        setLogs(mockLogs)
      } finally {
        setIsLoading(false)
      }
    }

fetchLogs()
  }, [searchTerm, filterModule])

const mockLogs: DataChangeLog[] = [
    {
      id: "1",
      adminName: "John Admin",
      module: "Pages",
      recordName: "About Us Page",
      changeType: "update",
      timestamp: "2025-01-08 10:45:23",
      changes: [
        { field: "Title", oldValue: "About Our Organization", newValue: "About Us" },
        { field: "Content", oldValue: "Old content...", newValue: "Updated content..." },
      ],
    },
  ]

const modules = Array.from(new Set(logs.map((log) => log.module)))

const downloadExport = async () => {
    try {
      const response = await fetch(API_ENDPOINTS.audit.export.adminActivities, {
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
          "X-Requested-With": "XMLHttpRequest",
        },
        credentials: "include",
      })
      const blob = await response.blob()
      const url = window.URL.createObjectURL(blob)
      const a = document.createElement("a")
      a.href = url
      a.download = `data-changes-${new Date().toISOString()}.csv`
      a.click()
    } catch {
      alert("Failed to export data")
    }
  }

{error && (
        <div className="bg-yellow-50 border border-yellow-200 text-yellow-800 px-4 py-3 rounded">
          Using sample data. Unable to connect to server.
        </div>
      )}

{/* Search and Filter */}
      <Card>
        <CardContent className="pt-6">
          <div className="flex flex-col sm:flex-row gap-3">
            <div className="flex-1 relative">
              <Search className="absolute left-3 top-3 w-4 h-4 text-gray-400" />
              <Input
                placeholder="Search by admin, record name, or module..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10"
              />
            </div>
            <select
              value={filterModule}
              onChange={(e) => setFilterModule(e.target.value)}
              className="px-3 py-2 border border-gray-300 rounded-md text-sm w-auto"
            >
              <option value="all">All Modules</option>
              {modules.map((module) => (
                <option key={module} value={module}>
                  {module}
                </option>
              ))}
            </select>
          </div>
        </CardContent>
      </Card>

{/* Data Change Logs */}
      <div className="space-y-4">
        {logs.length > 0 ? (
          logs.map((log) => (
            <Card key={log.id} className="border-l-4 border-l-[#CE1126]">
              <CardContent className="pt-6">
                <div
                  className="flex items-start justify-between gap-4 cursor-pointer"
                  onClick={() => setExpandedId(expandedId === log.id ? null : log.id)}
                >
                  <div className="flex-1">
                    <div className="flex items-center gap-3 mb-3">
                      <span className="text-2xl">📝</span>
                      <div>
                        <h3 className="font-bold text-gray-900">{log.recordName}</h3>
                        <p className="text-sm text-gray-600">{log.module}</p>
                      </div>
                    </div>
                    <div className="flex items-center gap-3 flex-wrap">
                      <span
                        className={`px-3 py-1 rounded-full text-xs font-semibold ${getChangeTypeColor(log.changeType)}`}
                      >
                        {log.changeType.charAt(0).toUpperCase() + log.changeType.slice(1)}
                      </span>
                      <span className="text-sm text-gray-600">by {log.adminName}</span>
                      <span className="text-sm text-gray-500">{log.timestamp}</span>
                    </div>
                  </div>
                  <Button variant="ghost" size="sm" className="w-auto">
                    <ChevronDown
                      className={`w-5 h-5 transition-transform ${expandedId === log.id ? "transform rotate-180" : ""}`}
                    />
                  </Button>
                </div>

{/* Expanded Details */}
                {expandedId === log.id && (
                  <div className="mt-6 pt-6 border-t border-gray-200">
                    <h4 className="font-semibold text-gray-900 mb-4">Changes Details</h4>
                    <div className="space-y-3">
                      {log.changes.map((change, idx) => (
                        <div key={idx} className="bg-gray-50 p-4 rounded-lg">
                          <p className="font-semibold text-gray-900 mb-2">{change.field}</p>
                          <div className="grid grid-cols-2 gap-4">
                            <div>
                              <p className="text-xs text-gray-600 mb-1">Before</p>
                              <p className="text-sm bg-red-50 text-red-900 p-2 rounded border border-red-200 font-mono">
                                {change.oldValue || "N/A"}
                              </p>
                            </div>
                            <div>
                              <p className="text-xs text-gray-600 mb-1">After</p>
                              <p className="text-sm bg-green-50 text-green-900 p-2 rounded border border-green-200 font-mono">
                                {change.newValue || "N/A"}
                              </p>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>
          ))
        ) : (
          <Card>
            <CardContent className="py-8 text-center text-gray-500">No data change logs found</CardContent>
          </Card>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/support/support-requests/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Plus, Trash2, Eye, ArrowLeft } from "lucide-react"
import Link from "next/link"
import { API_ENDPOINTS } from "@/lib/api-config"
import { apiGetWithHeaders } from "@/lib/api-utils"

export default function SupportRequestsPage() {
  const [requests, setRequests] = useState<SupportRequest[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(false)
  const [searchQuery, setSearchQuery] = useState("")

useEffect(() => {
    const fetchRequests = async () => {
      try {
        const response = await apiGetWithHeaders(`${API_ENDPOINTS.support.tickets}?q=${searchQuery}`)
        if (response.ok) {
          const data = await response.json()
          setRequests(Array.isArray(data) ? data : [])
          setError(false)
        } else {
          setError(true)
          setRequests(mockRequests)
        }
      } catch (err) {
        setError(true)
        setRequests(mockRequests)
      } finally {
        setLoading(false)
      }
    }

fetchRequests()
  }, [searchQuery])

const mockRequests: SupportRequest[] = [
    {
      id: 1,
      subject: "Unable to upload images to banner",
      description: "Getting error when trying to upload images larger than 2MB",
      category: "Technical Issue",
      priority: "High",
      status: "Open",
      createdBy: "Admin User 1",
      createdDate: "2024-01-08",
      responses: 2,
    },
    {
      id: 2,
      subject: "How to reorder menu items?",
      description: "Need help with the menu reordering feature",
      category: "How To",
      priority: "Medium",
      status: "In Progress",
      createdBy: "Admin User 2",
      createdDate: "2024-01-07",
      responses: 0,
    },
    {
      id: 3,
      subject: "Feature request: Bulk page creation",
      description: "Would like to create multiple pages at once",
      category: "Feature Request",
      priority: "Low",
      status: "Pending Review",
      createdBy: "Admin User 3",
      createdDate: "2024-01-06",
      responses: 1,
    },
  ]

const priorityColors: Record<string, string> = {
    High: "text-red-600 bg-red-50 border-red-200",
    Medium: "text-yellow-600 bg-yellow-50 border-yellow-200",
    Low: "text-green-600 bg-green-50 border-green-200",
  }

const statusColors: Record<string, string> = {
    Open: "text-blue-600 bg-blue-50 border-blue-200",
    "In Progress": "text-purple-600 bg-purple-50 border-purple-200",
    "Pending Review": "text-orange-600 bg-orange-50 border-orange-200",
    Resolved: "text-green-600 bg-green-50 border-green-200",
  }

const handleDelete = async (id: number) => {
    setRequests(requests.filter((r) => r.id !== id))
  }

return (
    <div className="p-4 sm:p-6">
      <Link href="/admin/support" className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 mb-4 w-auto">
        <ArrowLeft className="w-5 h-5" />
        Back to Support
      </Link>

<div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Support Requests</h1>
          <p className="text-gray-600 mt-2">Submit new support tickets and track existing requests</p>
        </div>
        <Link
          href="/admin/support/support-requests/add"
          className="flex items-center gap-2 px-4 py-2 bg-[#CE1126] text-white rounded-lg hover:bg-red-700 transition-colors w-auto"
        >
          <Plus className="w-5 h-5" />
          New Request
        </Link>
      </div>

{error && (
        <div className="mb-4 p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
          <p className="text-sm text-yellow-800">Using sample data. Unable to connect to server.</p>
        </div>
      )}

{loading ? (
        <div className="text-center py-12">
          <p className="text-gray-600">Loading support requests...</p>
        </div>
      ) : (
        <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="bg-gray-50 border-b border-gray-200">
                  <th className="px-6 py-4 text-left text-sm font-semibold text-gray-900">Subject</th>
                  <th className="px-6 py-4 text-left text-sm font-semibold text-gray-900">Category</th>
                  <th className="px-6 py-4 text-left text-sm font-semibold text-gray-900">Priority</th>
                  <th className="px-6 py-4 text-left text-sm font-semibold text-gray-900">Status</th>
                  <th className="px-6 py-4 text-left text-sm font-semibold text-gray-900">Responses</th>
                  <th className="px-6 py-4 text-left text-sm font-semibold text-gray-900">Created</th>
                  <th className="px-6 py-4 text-center text-sm font-semibold text-gray-900">Actions</th>
                </tr>
              </thead>
              <tbody>
                {requests.map((request) => (
                  <tr key={request.id} className="border-b border-gray-200 hover:bg-gray-50 transition-colors">
                    <td className="px-6 py-4">
                      <p className="font-medium text-gray-900">{request.subject}</p>
                      <p className="text-sm text-gray-500">{request.createdBy || "User"}</p>
                    </td>
                    <td className="px-6 py-4 text-sm text-gray-600">{request.category}</td>
                    <td className="px-6 py-4">
                      <span
                        className={`inline-block px-3 py-1 text-xs font-semibold rounded-full border ${priorityColors[request.priority] || priorityColors.Medium}`}
                      >
                        {request.priority}
                      </span>
                    </td>
                    <td className="px-6 py-4">
                      <span
                        className={`inline-block px-3 py-1 text-xs font-semibold rounded-full border ${statusColors[request.status] || statusColors.Open}`}
                      >
                        {request.status}
                      </span>
                    </td>
                    <td className="px-6 py-4 text-sm text-gray-600">{request.responses || 0}</td>
                    <td className="px-6 py-4 text-sm text-gray-500">{request.createdDate}</td>
                    <td className="px-6 py-4">
                      <div className="flex items-center justify-center gap-2">
                        <Link
                          href={`/admin/support/support-requests/${request.id}`}
                          className="p-2 text-[#003087] hover:bg-blue-50 rounded-lg transition-colors"
                          title="View details"
                        >
                          <Eye className="w-5 h-5" />
                        </Link>
                        <button
                          onClick={() => handleDelete(request.id)}
                          className="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
                          title="Delete request"
                        >
                          <Trash2 className="w-5 h-5" />
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/support/support-requests/add/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"
import { ArrowLeft } from "lucide-react"
import { API_ENDPOINTS } from "@/lib/api-config"
import { apiPostWithHeaders } from "@/lib/api-utils"

export default function AddSupportRequestPage() {
  const [formData, setFormData] = useState({
    subject: "",
    category: "Technical Issue",
    description: "",
    priority: "HIGH",
  })
  const [loading, setLoading] = useState(false)
  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null)
  const [errors, setErrors] = useState<Record<string, string>>({})

const validateForm = () => {
    const newErrors: Record<string, string> = {}
    if (!formData.subject.trim()) newErrors.subject = "Subject is required"
    if (!formData.description.trim()) newErrors.description = "Description is required"
    setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!validateForm()) return

setLoading(true)
    try {
      const response = await apiPostWithHeaders(API_ENDPOINTS.support.createTicket, {
        subject: formData.subject,
        category: formData.category,
        description: formData.description,
        priority: formData.priority,
      })

if (response.ok) {
        setMessage({ type: "success", text: "Support request created successfully!" })
        setFormData({ subject: "", category: "Technical Issue", description: "", priority: "HIGH" })
        setTimeout(() => {
          window.location.href = "/admin/support/support-requests"
        }, 1500)
      } else {
        setMessage({ type: "error", text: "Failed to create support request" })
      }
    } catch (err) {
      setMessage({ type: "error", text: "Error creating support request" })
    } finally {
      setLoading(false)
    }
  }

const handleInputChange = (field: string) => {
    setErrors((prev) => ({ ...prev, [field]: "" }))
  }

return (
    <div className="p-4 sm:p-6">
      <Link href="/admin/support" className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 mb-6">
        <ArrowLeft className="w-5 h-5" />
        Back to Support
      </Link>

<div className="bg-white rounded-lg border border-gray-200 p-6 max-w-2xl">
        <h1 className="text-3xl font-bold text-gray-900 mb-6">Create New Support Request</h1>

{message && (
          <div
            className={`mb-4 p-3 rounded-lg ${
              message.type === "success"
                ? "bg-green-50 border border-green-200 text-green-800"
                : "bg-red-50 border border-red-200 text-red-800"
            }`}
          >
            <p className="text-sm">{message.text}</p>
          </div>
        )}

<form className="space-y-4" onSubmit={handleSubmit}>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Subject</label>
            <input
              type="text"
              value={formData.subject}
              onChange={(e) => {
                setFormData({ ...formData, subject: e.target.value })
                handleInputChange("subject")
              }}
              placeholder="Brief description of your issue"
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            />
            {errors.subject && <p className="text-sm text-red-600 mt-1">{errors.subject}</p>}
          </div>

<div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Category</label>
            <select
              value={formData.category}
              onChange={(e) => setFormData({ ...formData, category: e.target.value })}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            >
              <option>Technical Issue</option>
              <option>How To</option>
              <option>Feature Request</option>
              <option>Bug Report</option>
              <option>Other</option>
            </select>
          </div>

<div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Priority</label>
            <select
              value={formData.priority}
              onChange={(e) => setFormData({ ...formData, priority: e.target.value })}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            >
              <option value="HIGH">High</option>
              <option value="MEDIUM">Medium</option>
              <option value="LOW">Low</option>
            </select>
          </div>

<div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Detailed Description</label>
            <textarea
              value={formData.description}
              onChange={(e) => {
                setFormData({ ...formData, description: e.target.value })
                handleInputChange("description")
              }}
              placeholder="Provide detailed information about your request"
              rows={5}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            />
            {errors.description && <p className="text-sm text-red-600 mt-1">{errors.description}</p>}
          </div>

<div className="flex gap-3 pt-4">
            <Link
              href="/admin/support"
              className="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors w-auto"
            >
              Cancel
            </Link>
            <button
              type="submit"
              disabled={loading}
              className="px-6 py-2 bg-[#CE1126] text-white rounded-lg hover:bg-red-700 transition-colors w-auto disabled:opacity-50"
            >
              {loading ? "Submitting..." : "Submit Request"}
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/support/support-requests/[id]/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { ArrowLeft, Trash2, Edit } from "lucide-react"
import { API_ENDPOINTS } from "@/lib/api-config"
import { apiGetWithHeaders, apiPostWithHeaders } from "@/lib/api-utils"

interface SupportRequest {
  id: number
  subject: string
  description: string
  category: string
  priority: string
  status: string
  createdBy?: string
  createdDate: string
  responses?: number
  details?: string
  comments?: Array<{
    id: number
    author: string
    date: string
    text: string
  }>
}

const mockRequests: Record<number, SupportRequest> = {
  1: {
    id: 1,
    subject: "Unable to upload images to banner",
    description: "Getting error when trying to upload images larger than 2MB",
    category: "Technical Issue",
    priority: "High",
    status: "Open",
    createdBy: "Admin User 1",
    createdDate: "2024-01-08",
    responses: 2,
    details:
      "The system returns error code 413 - Payload Too Large. Need to increase the upload limit or provide better validation messages.",
    comments: [
      {
        id: 1,
        author: "Support Team",
        date: "2024-01-08",
        text: "We are looking into this issue. The upload limit is currently set to 2MB for security reasons.",
      },
      {
        id: 2,
        author: "Admin User 1",
        date: "2024-01-08",
        text: "Can we increase it to 5MB? Our banner images are typically 3-4MB.",
      },
    ],
  },
  2: {
    id: 2,
    subject: "How to reorder menu items?",
    description: "Need help with the menu reordering feature",
    category: "How To",
    priority: "Medium",
    status: "In Progress",
    createdBy: "Admin User 2",
    createdDate: "2024-01-07",
    responses: 0,
    details: "User is confused about the drag-and-drop interface in the menu reordering section.",
    comments: [],
  },
  3: {
    id: 3,
    subject: "Feature request: Bulk page creation",
    description: "Would like to create multiple pages at once",
    category: "Feature Request",
    priority: "Low",
    status: "Pending Review",
    createdBy: "Admin User 3",
    createdDate: "2024-01-06",
    responses: 1,
    details: "It would save time if we could upload a CSV file with page details and create multiple pages at once.",
    comments: [
      {
        id: 1,
        author: "Support Team",
        date: "2024-01-07",
        text: "Thank you for the feature suggestion. We will review this in our next planning meeting.",
      },
    ],
  },
}

export default function SupportRequestDetailPage({ params }: { params: { id: string } }) {
  const [request, setRequest] = useState<SupportRequest | null>(null)
  const [loading, setLoading] = useState(true)
  const [newComment, setNewComment] = useState("")
  const [replying, setReplying] = useState(false)

useEffect(() => {
    const fetchRequest = async () => {
      try {
        const response = await apiGetWithHeaders(API_ENDPOINTS.support.getTicket(Number.parseInt(params.id)))
        if (response.ok) {
          const data = await response.json()
          setRequest(data)
        } else {
          setRequest(mockRequests[Number.parseInt(params.id)] || null)
        }
      } catch (err) {
        setRequest(mockRequests[Number.parseInt(params.id)] || null)
      } finally {
        setLoading(false)
      }
    }

fetchRequest()
  }, [params.id])

const handleAddComment = async () => {
    if (!newComment.trim() || !request) return

setReplying(true)
    try {
      const response = await apiPostWithHeaders(API_ENDPOINTS.support.replyToTicket(request.id), {
        message: newComment,
      })

if (response.ok) {
        setNewComment("")
        if (request.comments) {
          setRequest({
            ...request,
            comments: [
              ...request.comments,
              {
                id: (request.comments?.length || 0) + 1,
                author: "You",
                date: new Date().toISOString().split("T")[0],
                text: newComment,
              },
            ],
          })
        }
      }
    } catch (err) {
      console.error("Error adding comment:", err)
    } finally {
      setReplying(false)
    }
  }

if (loading) {
    return (
      <div className="p-4 sm:p-6">
        <p className="text-gray-600">Loading...</p>
      </div>
    )
  }

if (!request) {
    return (
      <div className="p-4 sm:p-6">
        <Link href="/admin/support" className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 mb-6">
          <ArrowLeft className="w-5 h-5" />
          Back to Support
        </Link>
        <div className="bg-white rounded-lg border border-gray-200 p-6 text-center">
          <p className="text-gray-600">Support request not found</p>
        </div>
      </div>
    )
  }

<div className="grid gap-6">
        {/* Header */}
        <div className="bg-white rounded-lg border border-gray-200 p-6">
          <div className="flex items-start justify-between mb-4">
            <div>
              <h1 className="text-3xl font-bold text-gray-900">{request.subject}</h1>
              <p className="text-gray-600 mt-2">ID: #{request.id}</p>
            </div>
            <div className="flex gap-2">
              <button className="p-2 text-[#003087] hover:bg-blue-50 rounded-lg transition-colors" title="Edit">
                <Edit className="w-5 h-5" />
              </button>
              <button className="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors" title="Delete">
                <Trash2 className="w-5 h-5" />
              </button>
            </div>
          </div>
        </div>

{/* Details */}
        <div className="grid md:grid-cols-3 gap-6">
          <div className="md:col-span-2 bg-white rounded-lg border border-gray-200 p-6 space-y-6">
            <div>
              <h2 className="text-lg font-semibold text-gray-900 mb-4">Description</h2>
              <p className="text-gray-700">{request.description}</p>
            </div>

{request.details && (
              <div>
                <h2 className="text-lg font-semibold text-gray-900 mb-4">Details</h2>
                <p className="text-gray-700">{request.details}</p>
              </div>
            )}

{/* Comments */}
            <div>
              <h2 className="text-lg font-semibold text-gray-900 mb-4">
                Comments & Responses ({request.responses || 0})
              </h2>
              <div className="space-y-4 mb-6">
                {request.comments?.map((comment) => (
                  <div key={comment.id} className="bg-gray-50 rounded-lg p-4">
                    <div className="flex justify-between items-start mb-2">
                      <p className="font-medium text-gray-900">{comment.author}</p>
                      <p className="text-sm text-gray-500">{comment.date}</p>
                    </div>
                    <p className="text-gray-700">{comment.text}</p>
                  </div>
                ))}
              </div>

<div className="space-y-3">
                <textarea
                  value={newComment}
                  onChange={(e) => setNewComment(e.target.value)}
                  placeholder="Add a comment..."
                  rows={4}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
                />
                <button
                  onClick={handleAddComment}
                  disabled={replying || !newComment.trim()}
                  className="px-6 py-2 bg-[#CE1126] text-white rounded-lg hover:bg-red-700 transition-colors w-auto disabled:opacity-50"
                >
                  {replying ? "Adding..." : "Add Comment"}
                </button>
              </div>
            </div>
          </div>

{/* Sidebar */}
          <div className="space-y-4">
            <div className="bg-white rounded-lg border border-gray-200 p-4">
              <p className="text-sm text-gray-500 mb-1">Status</p>
              <p
                className={`font-medium inline-block px-3 py-1 text-sm rounded-full border ${statusColors[request.status] || statusColors.Open}`}
              >
                {request.status}
              </p>
            </div>

<div className="bg-white rounded-lg border border-gray-200 p-4">
              <p className="text-sm text-gray-500 mb-1">Priority</p>
              <p
                className={`font-medium inline-block px-3 py-1 text-sm rounded-full border ${priorityColors[request.priority] || priorityColors.Medium}`}
              >
                {request.priority}
              </p>
            </div>

<div className="bg-white rounded-lg border border-gray-200 p-4">
              <p className="text-sm text-gray-500 mb-1">Category</p>
              <p className="font-medium text-gray-900">{request.category}</p>
            </div>

<div className="bg-white rounded-lg border border-gray-200 p-4">
              <p className="text-sm text-gray-500 mb-1">Created By</p>
              <p className="font-medium text-gray-900">{request.createdBy || "User"}</p>
            </div>

<div className="bg-white rounded-lg border border-gray-200 p-4">
              <p className="text-sm text-gray-500 mb-1">Created Date</p>
              <p className="font-medium text-gray-900">{request.createdDate}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/support/system-help/client.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Search, ChevronDown, ChevronUp, ArrowLeft } from "lucide-react"
import Link from "next/link"
import { API_ENDPOINTS } from "@/lib/api-config"
import { apiGetWithHeaders } from "@/lib/api-utils"

interface FAQ {
  id: string
  category: string
  question: string
  answer: string
}

export default function SystemHelpClient() {
  const [expandedFaq, setExpandedFaq] = useState<string | null>(null)
  const [searchQuery, setSearchQuery] = useState("")
  const [faqs, setFaqs] = useState<FAQ[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const fetchFaqs = async () => {
      try {
        const response = await apiGetWithHeaders(`${API_ENDPOINTS.support.faqs}?q=${searchQuery}`)
        if (response.ok) {
          const data = await response.json()
          setFaqs(Array.isArray(data) ? data : mockFaqs)
        } else {
          setFaqs(mockFaqs)
        }
      } catch (err) {
        setFaqs(mockFaqs)
      } finally {
        setLoading(false)
      }
    }

fetchFaqs()
  }, [searchQuery])

const mockFaqs: FAQ[] = [
    {
      id: "faq-1",
      category: "General",
      question: "What is the minimum browser requirement?",
      answer:
        "The admin panel works best on Chrome, Firefox, Safari, and Edge browsers. Please ensure your browser is up to date for optimal performance.",
    },
    {
      id: "faq-2",
      category: "General",
      question: "How often should I backup my data?",
      answer:
        "We recommend creating backups at least weekly, or after making significant changes to your website content. You can access backup options in the Settings panel.",
    },
    {
      id: "faq-3",
      category: "Pages",
      question: "Can I schedule pages to publish automatically?",
      answer:
        "Currently, pages must be published manually. However, you can save as draft and publish when ready. Scheduled publishing will be available in a future update.",
    },
    {
      id: "faq-4",
      category: "Pages",
      question: "What is the maximum file size for page images?",
      answer:
        "Images can be up to 10MB in size. For best performance, we recommend compressing images to 2MB or less before uploading.",
    },
    {
      id: "faq-5",
      category: "Users",
      question: "How do I reset a user password?",
      answer:
        "Go to Users & Roles, select the user, and click 'Reset Password'. A temporary password will be generated and shown to you.",
    },
    {
      id: "faq-6",
      category: "Users",
      question: "Can I assign multiple roles to a single user?",
      answer:
        "Currently, each user can have one primary role. For more granular control, manage specific permissions within that role.",
    },
  ]

const systemRequirements = [
    {
      requirement: "Operating System",
      details: "Windows 7+, macOS 10.12+, Linux (any modern distribution)",
    },
    {
      requirement: "Browser",
      details: "Chrome 90+, Firefox 88+, Safari 14+, Edge 90+",
    },
    {
      requirement: "Internet Speed",
      details: "Minimum 2 Mbps for optimal performance",
    },
    {
      requirement: "Display Resolution",
      details: "Minimum 1024x768, recommended 1920x1080 or higher",
    },
    {
      requirement: "JavaScript",
      details: "Must be enabled for full functionality",
    },
  ]

const filteredFaqs = faqs.filter(
    (faq) =>
      faq.question.toLowerCase().includes(searchQuery.toLowerCase()) ||
      faq.answer.toLowerCase().includes(searchQuery.toLowerCase()),
  )

const toggleFaq = (id: string) => {
    setExpandedFaq(expandedFaq === id ? null : id)
  }

<div className="mb-8">
        <h1 className="text-3xl font-bold text-gray-900">System Help & FAQs</h1>
        <p className="text-gray-600 mt-2">Frequently asked questions and system-related help documentation</p>
      </div>

{/* Search Bar */}
      <div className="mb-8">
        <div className="relative">
          <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
          <input
            type="text"
            placeholder="Search FAQs..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
          />
        </div>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        {/* FAQs */}
        <div className="lg:col-span-2">
          <h2 className="text-2xl font-bold text-gray-900 mb-6">Frequently Asked Questions</h2>

<div className="space-y-3">
            {loading ? (
              <p className="text-gray-600">Loading FAQs...</p>
            ) : filteredFaqs.length > 0 ? (
              filteredFaqs.map((faq) => (
                <div key={faq.id} className="bg-white rounded-lg border border-gray-200 overflow-hidden">
                  <button
                    onClick={() => toggleFaq(faq.id)}
                    className="w-full px-6 py-4 flex items-center justify-between hover:bg-gray-50 transition-colors"
                  >
                    <div className="text-left flex-grow">
                      <p className="text-xs font-semibold text-[#CE1126] mb-1">{faq.category}</p>
                      <h3 className="text-base font-semibold text-gray-900">{faq.question}</h3>
                    </div>
                    {expandedFaq === faq.id ? (
                      <ChevronUp className="w-5 h-5 text-[#CE1126] ml-4 flex-shrink-0" />
                    ) : (
                      <ChevronDown className="w-5 h-5 text-gray-400 ml-4 flex-shrink-0" />
                    )}
                  </button>

{expandedFaq === faq.id && (
                    <div className="px-6 py-4 border-t border-gray-200 bg-gray-50">
                      <p className="text-gray-700 leading-relaxed">{faq.answer}</p>
                    </div>
                  )}
                </div>
              ))
            ) : (
              <div className="bg-white rounded-lg border border-gray-200 p-8 text-center">
                <p className="text-gray-500">No FAQs found matching your search.</p>
              </div>
            )}
          </div>
        </div>

{/* System Requirements */}
        <div className="lg:col-span-1">
          <div className="bg-white rounded-lg border border-gray-200 p-6 sticky top-6">
            <h3 className="text-xl font-bold text-gray-900 mb-6">System Requirements</h3>
            <div className="space-y-4">
              {systemRequirements.map((item, index) => (
                <div key={index} className="pb-4 border-b border-gray-200 last:border-b-0">
                  <p className="text-sm font-semibold text-gray-900">{item.requirement}</p>
                  <p className="text-sm text-gray-600 mt-1">{item.details}</p>
                </div>
              ))}
            </div>

<div className="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
              <p className="text-xs font-semibold text-[#003087] mb-2">Pro Tip</p>
              <p className="text-sm text-gray-700">Clear your browser cache if you experience any display issues.</p>
            </div>
          </div>
        </div>
      </div>

{/* Troubleshooting */}
      <div className="mt-12 bg-white rounded-lg border border-gray-200 p-6">
        <h2 className="text-2xl font-bold text-gray-900 mb-6">Common Troubleshooting</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="p-4 border border-gray-200 rounded-lg">
            <h3 className="font-semibold text-gray-900 mb-2">Page Not Loading?</h3>
            <ul className="text-sm text-gray-600 space-y-2">
              <li>• Clear your browser cache</li>
              <li>• Try a different browser</li>
              <li>• Check your internet connection</li>
              <li>• Disable browser extensions</li>
            </ul>
          </div>
          <div className="p-4 border border-gray-200 rounded-lg">
            <h3 className="font-semibold text-gray-900 mb-2">Upload Issues?</h3>
            <ul className="text-sm text-gray-600 space-y-2">
              <li>• Check file size is under 10MB</li>
              <li>• Verify file format (JPG, PNG, PDF)</li>
              <li>• Ensure stable internet connection</li>
              <li>• Try uploading from different device</li>
            </ul>
          </div>
          <div className="p-4 border border-gray-200 rounded-lg">
            <h3 className="font-semibold text-gray-900 mb-2">Permission Denied?</h3>
            <ul className="text-sm text-gray-600 space-y-2">
              <li>• Verify your user role</li>
              <li>• Contact admin for permission upgrade</li>
              <li>• Check if your access was revoked</li>
              <li>• Logout and login again</li>
            </ul>
          </div>
          <div className="p-4 border border-gray-200 rounded-lg">
            <h3 className="font-semibold text-gray-900 mb-2">Forgot Password?</h3>
            <ul className="text-sm text-gray-600 space-y-2">
              <li>• Use login page 'Forgot Password' link</li>
              <li>• Check your email for reset link</li>
              <li>• Contact admin for assistance</li>
              <li>• Ensure email account is accessible</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/api-config.ts" isMerged="true"
export const API_BASE_URL = process.env.REACT_APP_API_BASE_URL || "http://localhost:3000"

// Default headers for all API requests
export const DEFAULT_HEADERS = {
  'Content-Type': 'application/json',
}

// Helper function for GET requests with proper headers
export const fetchWithHeaders = async (url: string, options?: RequestInit) => {
  const headers = {
    ...DEFAULT_HEADERS,
    ...options?.headers,
  }
  
  return fetch(url, {
    ...options,
    headers,
  })
}

export const API_ENDPOINTS = {
  dashboard: {
    summary: `${API_BASE_URL}/api/admin/dashboard/summary`,
    memberGrowth: `${API_BASE_URL}/api/admin/dashboard/member-growth`,
    weeklyActivity: `${API_BASE_URL}/api/admin/dashboard/weekly-activity`,
    recentActivities: `${API_BASE_URL}/api/admin/dashboard/recent-activities`,
    members: `${API_BASE_URL}/api/dashboard/members`,
  },
  branches: {
    list: `${API_BASE_URL}/api/admin/branches`,
    create: `${API_BASE_URL}/api/admin/branches/create`,
    update: (id: number) => `${API_BASE_URL}/api/admin/branches/${id}`,
    delete: (id: number) => `${API_BASE_URL}/api/admin/branches/${id}`,
  },
  committees: {
    list: `${API_BASE_URL}/api/admin/committees`,
    create: `${API_BASE_URL}/api/admin/committees`,
    update: (id: number) => `${API_BASE_URL}/api/admin/committees/${id}`,
    delete: (id: number) => `${API_BASE_URL}/api/admin/committees/${id}`,
  },
  pages: {
    list: `${API_BASE_URL}/api/admin/pages`,
    create: `${API_BASE_URL}/api/admin/pages`,
    update: (id: number) => `${API_BASE_URL}/api/admin/pages/${id}`,
    delete: (id: number) => `${API_BASE_URL}/api/admin/pages/${id}`,
    toggleActive: (id: number) => `${API_BASE_URL}/api/admin/pages/${id}`,
  },
  banners: {
    list: `${API_BASE_URL}/api/admin/banners`,
    create: `${API_BASE_URL}/api/admin/banners`,
    update: (id: number) => `${API_BASE_URL}/api/admin/banners/${id}`,
    delete: (id: number) => `${API_BASE_URL}/api/admin/banners/${id}`,
    toggleStatus: (id: number) => `${API_BASE_URL}/api/admin/banners/${id}`,
  },
  gallery: {
    list: `${API_BASE_URL}/api/gallery`,
    create: `${API_BASE_URL}/api/gallery/create`,
    update: (id: number) => `${API_BASE_URL}/api/gallery/${id}`,
    delete: (id: number) => `${API_BASE_URL}/api/gallery/${id}`,
  },
  news: {
    list: `${API_BASE_URL}/api/news`,
    create: `${API_BASE_URL}/api/news/create`,
    update: (id: number) => `${API_BASE_URL}/api/news/${id}`,
    delete: (id: number) => `${API_BASE_URL}/api/news/${id}`,
  },
  leadership: {
    list: `${API_BASE_URL}/api/admin/leadership/list`,
    create: `${API_BASE_URL}/api/admin/leadership`,
    update: (id: number) => `${API_BASE_URL}/api/admin/leadership/${id}`,
    delete: (id: number) => `${API_BASE_URL}/api/admin/leadership/${id}`,
  },
  documents: {
    list: `${API_BASE_URL}/api/admin/documents`,
    create: `${API_BASE_URL}/api/admin/documents/create`,
  },
  contactInfo: {
    list: `${API_BASE_URL}/api/admin/contact-info`,
    create: `${API_BASE_URL}/api/admin/contact-info/create`,
    update: (id: number) => `${API_BASE_URL}/api/admin/contact-info/${id}`,
    delete: (id: number) => `${API_BASE_URL}/api/admin/contact-info/${id}`,
  },
  memberships: {
    pendingApplications: `${API_BASE_URL}/api/branch/pending-applications`,
    applicationDetails: (id: number) => `${API_BASE_URL}/api/branch/application/${id}`,
    moveToReview: (id: number) => `${API_BASE_URL}/api/branch/application/${id}/review`,
    approveApplication: (id: number) => `${API_BASE_URL}/api/branch/application/${id}/approve`,
    members: {
      searchAndFilter: `${API_BASE_URL}/api/members`,
      list: `${API_BASE_URL}/api/admin/members`,
      getProfile: `${API_BASE_URL}/api/member/profile`,
      downloadCard: (id: number) => `${API_BASE_URL}/api/member/${id}/membership-card/download`,
      updateStatus: (id: number) => `${API_BASE_URL}/api/member/${id}/status`,
      printCard: (id: number) => `${API_BASE_URL}/api/admin/members/${id}/card/print`,
      exportList: `${API_BASE_URL}/api/admin/members/export`,
    },
  },
  contactForms: {
    list: `${API_BASE_URL}/api/admin/contact/forms`,
    updateStatus: (id: number) => `${API_BASE_URL}/api/admin/contact/forms/${id}/status`,
  },
  settings: {
    website: {
      get: `${API_BASE_URL}/api/settings/website`,
      update: `${API_BASE_URL}/api/settings/website`,
    },
    contact: {
      get: `${API_BASE_URL}/api/settings/contact`,
      save: `${API_BASE_URL}/api/settings/contact`,
    },
    display: `${API_BASE_URL}/api/website/settings/display`,
    security: `${API_BASE_URL}/api/website/settings/security`,
    performance: `${API_BASE_URL}/api/website/settings/performance`,
    getAll: `${API_BASE_URL}/api/website/settings`,
    socialMedia: `${API_BASE_URL}/api/settings/social-media`,
    footer: {
      update: `${API_BASE_URL}/api/settings/footer`,
      addQuickLink: `${API_BASE_URL}/api/settings/footer/quick-link`,
    },
    systemPreferences: `${API_BASE_URL}/api/settings/system-preferences`,
  },
  audit: {
    dashboard: `${API_BASE_URL}/api/audit/dashboard`,
    adminActivities: `${API_BASE_URL}/api/audit/admin-activities`,
    loginHistory: `${API_BASE_URL}/api/audit/login-history`,
    dataChanges: `${API_BASE_URL}/api/audit/data-changes`,
    export: {
      adminActivities: `${API_BASE_URL}/api/audit/export/admin-activities`,
      loginHistory: `${API_BASE_URL}/api/audit/export/login-history`,
    },
  },
  support: {
    tickets: `${API_BASE_URL}/api/support/tickets/`,
    createTicket: `${API_BASE_URL}/api/support/tickets/create/`,
    getTicket: (id: number) => `${API_BASE_URL}/api/support/tickets/${id}`,
    replyToTicket: (id: number) => `${API_BASE_URL}/api/support/tickets/${id}`,
    faqs: `${API_BASE_URL}/api/faqs/`,
  },
  users: {
    summary: `${API_BASE_URL}/api/summary`,
    list: `${API_BASE_URL}/api/users`,
    create: `${API_BASE_URL}/api/users`,
    update: (id: number) => `${API_BASE_URL}/api/users/${id}`,
    delete: (id: number) => `${API_BASE_URL}/api/users/${id}`,
    detail: (id: number) => `${API_BASE_URL}/api/users/detail/${id}`,
    assignRoles: (id: number) => `${API_BASE_URL}/api/users/${id}/roles`,
  },
  roles: {
    list: `${API_BASE_URL}/api/roles`,
    create: `${API_BASE_URL}/api/roles`,
    update: (id: number) => `${API_BASE_URL}/api/roles/${id}`,
    delete: (id: number) => `${API_BASE_URL}/api/roles/${id}`,
  },
  permissions: {
    list: `${API_BASE_URL}/api/permissions`,
  },
}
[V0_FILE]typescriptreact:file="app/admin/users-roles/page.tsx" isMerged="true"
"use client"
import { Card, CardContent } from "@/components/ui/card"
import { ArrowRight, Users, Lock, Shield } from "lucide-react"
import Link from "next/link"
import { useState, useEffect } from "react"

export default function UsersRolesPage() {
  const [stats, setStats] = useState([
    { label: "Total Users", count: 0, icon: Users, color: "bg-blue-100 text-blue-700" },
    { label: "Total Roles", count: 0, icon: Lock, color: "bg-purple-100 text-purple-700" },
    { label: "Total Permissions", count: 0, icon: Shield, color: "bg-green-100 text-green-700" },
  ])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const fetchSummary = async () => {
      try {
        const response = await fetch("http://localhost:3000/api/summary", {
          headers: {
            "Content-Type": "application/json",
            Accept: "application/json",
            "X-Requested-With": "XMLHttpRequest",
          },
          credentials: "include",
        })
        if (response.ok) {
          const data = await response.json()
          setStats([
            { label: "Total Users", count: data.total_users, icon: Users, color: "bg-blue-100 text-blue-700" },
            { label: "Total Roles", count: data.total_roles, icon: Lock, color: "bg-purple-100 text-purple-700" },
            {
              label: "Total Permissions",
              count: data.total_permissions,
              icon: Shield,
              color: "bg-green-100 text-green-700",
            },
          ])
        }
      } catch (error) {
        console.error("Failed to fetch summary:", error)
      } finally {
        setLoading(false)
      }
    }

fetchSummary()
  }, [])

const sections = [
    {
      title: "Users Management",
      description: "Manage admin users, assign roles, and control access",
      icon: Users,
      href: "/admin/users-roles/users",
      color: "bg-blue-50 border-blue-200 hover:border-blue-400",
    },
    {
      title: "Roles Management",
      description: "Create and configure roles with custom permissions",
      icon: Lock,
      href: "/admin/users-roles/roles",
      color: "bg-purple-50 border-purple-200 hover:border-purple-400",
    },
    {
      title: "Permissions",
      description: "Define and manage system permissions",
      icon: Shield,
      href: "/admin/users-roles/permissions",
      color: "bg-green-50 border-green-200 hover:border-green-400",
    },
  ]

return (
    <div className="p-4 sm:p-6 space-y-8">
      <div>
        <h1 className="text-3xl font-bold text-gray-900">Users & Roles</h1>
        <p className="text-gray-600 mt-2">Manage system users, roles, and permissions</p>
      </div>

{/* Stats Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
        {stats.map((stat, idx) => {
          const Icon = stat.icon
          return (
            <Card key={idx}>
              <CardContent className="pt-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm text-gray-600">{stat.label}</p>
                    <p className="text-3xl font-bold text-gray-900 mt-2">{loading ? "-" : stat.count}</p>
                  </div>
                  <div className={`p-3 rounded-lg ${stat.color}`}>
                    <Icon className="w-6 h-6" />
                  </div>
                </div>
              </CardContent>
            </Card>
          )
        })}
      </div>

{/* Management Sections */}
      <div>
        <h2 className="text-2xl font-bold text-gray-900 mb-4">Management Sections</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {sections.map((section, idx) => {
            const Icon = section.icon
            return (
              <Link key={idx} href={section.href}>
                <Card className={`h-full cursor-pointer border transition-all ${section.color}`}>
                  <CardContent className="pt-6">
                    <div className="flex items-start justify-between">
                      <div>
                        <h3 className="font-bold text-gray-900 text-lg">{section.title}</h3>
                        <p className="text-gray-600 text-sm mt-2">{section.description}</p>
                      </div>
                      <Icon className="w-8 h-8 text-gray-400" />
                    </div>
                    <div className="mt-4 flex items-center gap-2 text-[#CE1126] font-medium">
                      Manage <ArrowRight className="w-4 h-4" />
                    </div>
                  </CardContent>
                </Card>
              </Link>
            )
          })}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/users-roles/users-client.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { ArrowLeft, Plus, Edit2, Trash2, Search, Eye } from "lucide-react"
import Link from "next/link"

interface User {
  id: number
  email: string
  first_name: string
  last_name: string
  is_active: boolean
  phone?: string
  role?: string
  status?: string
  lastLogin?: string
}

export default function UsersClient() {
  const [users, setUsers] = useState<User[]>([])
  const [loading, setLoading] = useState(true)
  const [searchQuery, setSearchQuery] = useState("")
  const [filterRole, setFilterRole] = useState("All Roles")
  const [error, setError] = useState<string | null>(null)

// Mock data fallback
  const mockUsers = [
    {
      id: 1,
      email: "president@mcc.org.my",
      first_name: "Datuk S.",
      last_name: "Arokiasamy",
      phone: "+60-3-1234-5678",
      is_active: true,
      role: "Admin",
      status: "Active",
      lastLogin: "02 Jan 2026",
    },
    {
      id: 2,
      email: "vp@mcc.org.my",
      first_name: "Mr. K.",
      last_name: "Veerasingam",
      phone: "+60-3-1234-5679",
      is_active: true,
      role: "Editor",
      status: "Active",
      lastLogin: "01 Jan 2026",
    },
    {
      id: 3,
      email: "content@mcc.org.my",
      first_name: "Ms. Priya",
      last_name: "Devi",
      phone: "+60-3-1234-5680",
      is_active: true,
      role: "Content Manager",
      status: "Active",
      lastLogin: "31 Dec 2025",
    },
  ]

useEffect(() => {
    fetchUsers()
  }, [searchQuery, filterRole])

const fetchUsers = async () => {
    setLoading(true)
    setError(null)
    try {
      const params = new URLSearchParams()
      if (searchQuery) params.append("search", searchQuery)
      if (filterRole && filterRole !== "All Roles") params.append("role", filterRole)

const response = await fetch(`http://localhost:3000/api/users?${params.toString()}`, {
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
          "X-Requested-With": "XMLHttpRequest",
        },
        credentials: "include",
      })

if (response.ok) {
        const data = await response.json()
        setUsers(data.results || [])
      } else {
        setUsers(mockUsers)
        setError("Using sample data. Unable to connect to server.")
      }
    } catch (error) {
      console.error("Failed to fetch users:", error)
      setUsers(mockUsers)
      setError("Using sample data. Unable to connect to server.")
    } finally {
      setLoading(false)
    }
  }

const handleDelete = async (id: number) => {
    if (confirm("Are you sure you want to delete this user?")) {
      try {
        const response = await fetch(`http://localhost:3000/api/users/${id}`, {
          method: "DELETE",
          headers: {
            "Content-Type": "application/json",
            "X-Requested-With": "XMLHttpRequest",
          },
          credentials: "include",
        })

if (response.ok) {
          setUsers(users.filter((u) => u.id !== id))
        }
      } catch (error) {
        console.error("Failed to delete user:", error)
      }
    }
  }

const filteredUsers = users.filter(
    (user) =>
      (user.first_name.toLowerCase().includes(searchQuery.toLowerCase()) ||
        user.email.toLowerCase().includes(searchQuery.toLowerCase())) &&
      (filterRole === "All Roles" || user.role === filterRole),
  )

const getRoleColor = (role?: string) => {
    switch (role) {
      case "Admin":
        return "bg-red-100 text-red-700"
      case "Editor":
        return "bg-blue-100 text-blue-700"
      case "Content Manager":
        return "bg-green-100 text-green-700"
      default:
        return "bg-gray-100 text-gray-700"
    }
  }

const getStatusColor = (isActive: boolean) => {
    return isActive ? "bg-green-100 text-green-700" : "bg-red-100 text-red-700"
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      {error && <div className="bg-yellow-50 border border-yellow-200 text-yellow-800 p-4 rounded-lg">{error}</div>}

<div className="flex items-center justify-between flex-wrap gap-4">
        <div>
          <Link
            href="/admin/users-roles"
            className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 font-medium mb-4"
          >
            <ArrowLeft className="w-5 h-5" />
            Back to Users & Roles
          </Link>
          <h1 className="text-3xl font-bold text-gray-900">Users Management</h1>
          <p className="text-gray-600 mt-2">Total Users: {users.length}</p>
        </div>
        <Link
          href="/admin/users-roles/users/add"
          className="flex items-center gap-2 bg-[#CE1126] text-white px-6 py-3 rounded-lg hover:bg-red-700 transition-colors font-medium"
        >
          <Plus className="w-5 h-5" />
          Add New User
        </Link>
      </div>

{/* Search and Filters */}
      <Card>
        <CardContent className="pt-6">
          <div className="flex flex-col sm:flex-row gap-4">
            <div className="flex-1 relative">
              <Search className="absolute left-3 top-3 w-5 h-5 text-gray-400" />
              <input
                type="text"
                placeholder="Search by name or email..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-[#CE1126]"
              />
            </div>
            <select
              value={filterRole}
              onChange={(e) => setFilterRole(e.target.value)}
              className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-[#CE1126]"
            >
              <option>All Roles</option>
              <option>Admin</option>
              <option>Editor</option>
              <option>Content Manager</option>
            </select>
          </div>
        </CardContent>
      </Card>

{/* Users Table */}
      <Card className="overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead className="bg-gray-50 border-b">
              <tr>
                <th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">NAME</th>
                <th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">EMAIL</th>
                <th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">PHONE</th>
                <th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">ROLE</th>
                <th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">STATUS</th>
                <th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">LAST LOGIN</th>
                <th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">ACTIONS</th>
              </tr>
            </thead>
            <tbody className="divide-y">
              {loading ? (
                <tr>
                  <td colSpan={7} className="px-6 py-4 text-center text-gray-600">
                    Loading...
                  </td>
                </tr>
              ) : filteredUsers.length === 0 ? (
                <tr>
                  <td colSpan={7} className="px-6 py-4 text-center text-gray-600">
                    No users found
                  </td>
                </tr>
              ) : (
                filteredUsers.map((user) => (
                  <tr key={user.id} className="hover:bg-gray-50 transition-colors">
                    <td className="px-6 py-4 text-sm text-gray-900 font-medium">
                      {user.first_name} {user.last_name}
                    </td>
                    <td className="px-6 py-4 text-sm text-gray-600">{user.email}</td>
                    <td className="px-6 py-4 text-sm text-gray-600">{user.phone || "-"}</td>
                    <td className="px-6 py-4">
                      <span
                        className={`inline-block px-3 py-1 rounded-full text-xs font-semibold ${getRoleColor(user.role)}`}
                      >
                        {user.role || "N/A"}
                      </span>
                    </td>
                    <td className="px-6 py-4">
                      <span
                        className={`inline-block px-3 py-1 rounded-full text-xs font-semibold ${getStatusColor(user.is_active)}`}
                      >
                        {user.is_active ? "Active" : "Inactive"}
                      </span>
                    </td>
                    <td className="px-6 py-4 text-sm text-gray-600">{user.lastLogin || "-"}</td>
                    <td className="px-6 py-4">
                      <div className="flex gap-2">
                        <Link
                          href={`/admin/users-roles/users/view/${user.id}`}
                          className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
                        >
                          <Eye className="w-5 h-5 text-blue-600" />
                        </Link>
                        <Link
                          href={`/admin/users-roles/users/edit/${user.id}`}
                          className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
                        >
                          <Edit2 className="w-5 h-5 text-blue-600" />
                        </Link>
                        <button
                          onClick={() => handleDelete(user.id)}
                          className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
                        >
                          <Trash2 className="w-5 h-5 text-red-600" />
                        </button>
                      </div>
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/users-roles/users/add/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"
import { validateRequired, validateEmail } from "@/lib/form-validation"

export default function AddUserPage() {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [errors, setErrors] = useState<Record<string, string>>({})
  const [formData, setFormData] = useState({
    first_name: "",
    last_name: "",
    email: "",
    phone: "",
    password: "",
    confirmPassword: "",
    roles: [] as number[],
  })

const roles = [
    { id: 1, name: "Super Admin", permissions: 69, description: "Full access to all features" },
    { id: 2, name: "Admin", permissions: 25, description: "Administrative access to most features" },
    { id: 3, name: "Editor", permissions: 18, description: "Can manage content and media" },
    { id: 4, name: "Content Manager", permissions: 12, description: "Can create and edit content" },
  ]

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
    if (errors[name]) {
      setErrors((prev) => ({ ...prev, [name]: "" }))
    }
  }

const handleRoleChange = (roleId: number) => {
    setFormData((prev) => ({
      ...prev,
      roles: prev.roles.includes(roleId) ? prev.roles.filter((r) => r !== roleId) : [...prev.roles, roleId],
    }))
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    const newErrors: Record<string, string> = {}

if (!validateRequired(formData.first_name)) newErrors.first_name = "First name is required"
    if (!validateRequired(formData.last_name)) newErrors.last_name = "Last name is required"
    if (!validateEmail(formData.email)) newErrors.email = "Valid email is required"
    if (!validateRequired(formData.password)) newErrors.password = "Password is required"
    if (formData.password !== formData.confirmPassword) newErrors.confirmPassword = "Passwords do not match"
    if (formData.roles.length === 0) newErrors.roles = "Please select at least one role"

if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors)
      return
    }

setLoading(true)
    try {
      const response = await fetch("http://localhost:3000/api/users", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
          "X-Requested-With": "XMLHttpRequest",
        },
        credentials: "include",
        body: JSON.stringify({
          email: formData.email,
          password: formData.password,
          first_name: formData.first_name,
          last_name: formData.last_name,
          phone: formData.phone,
        }),
      })

if (response.ok) {
        router.push("/admin/users-roles/users")
      } else {
        setErrors({ submit: "Failed to create user" })
      }
    } catch (error) {
      console.error("Failed to create user:", error)
      setErrors({ submit: "An error occurred while creating the user" })
    } finally {
      setLoading(false)
    }
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      <div>
        <Link
          href="/admin/users-roles/users"
          className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 font-medium mb-4"
        >
          <ArrowLeft className="w-5 h-5" />
          Back to Users
        </Link>
        <h1 className="text-3xl font-bold text-gray-900">Add New User</h1>
        <p className="text-gray-600 mt-2">Create a new admin user account</p>
      </div>

{errors.submit && (
        <div className="bg-red-50 border border-red-200 text-red-800 p-4 rounded-lg">{errors.submit}</div>
      )}

<form onSubmit={handleSubmit} className="max-w-3xl bg-white rounded-lg shadow-lg p-6 space-y-6">
        {/* Personal Information */}
        <div>
          <h2 className="text-xl font-bold text-gray-900 mb-4">Personal Information</h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-900 mb-2">First Name *</label>
              <input
                type="text"
                name="first_name"
                value={formData.first_name}
                onChange={handleChange}
                className={`w-full px-4 py-2 border rounded-lg focus:outline-none ${errors.first_name ? "border-red-500" : "border-gray-300 focus:border-[#CE1126]"}`}
                placeholder="e.g., John"
              />
              {errors.first_name && <p className="text-red-600 text-sm mt-1">{errors.first_name}</p>}
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-900 mb-2">Last Name *</label>
              <input
                type="text"
                name="last_name"
                value={formData.last_name}
                onChange={handleChange}
                className={`w-full px-4 py-2 border rounded-lg focus:outline-none ${errors.last_name ? "border-red-500" : "border-gray-300 focus:border-[#CE1126]"}`}
                placeholder="e.g., Doe"
              />
              {errors.last_name && <p className="text-red-600 text-sm mt-1">{errors.last_name}</p>}
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-900 mb-2">Email Address *</label>
              <input
                type="email"
                name="email"
                value={formData.email}
                onChange={handleChange}
                className={`w-full px-4 py-2 border rounded-lg focus:outline-none ${errors.email ? "border-red-500" : "border-gray-300 focus:border-[#CE1126]"}`}
                placeholder="e.g., john@mcc.org.my"
              />
              {errors.email && <p className="text-red-600 text-sm mt-1">{errors.email}</p>}
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-900 mb-2">Phone Number</label>
              <input
                type="tel"
                name="phone"
                value={formData.phone}
                onChange={handleChange}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-[#CE1126]"
                placeholder="e.g., +60-3-1234-5678"
              />
            </div>
          </div>
        </div>

{/* Password */}
        <div>
          <h2 className="text-xl font-bold text-gray-900 mb-4">Password</h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-900 mb-2">Password *</label>
              <input
                type="password"
                name="password"
                value={formData.password}
                onChange={handleChange}
                className={`w-full px-4 py-2 border rounded-lg focus:outline-none ${errors.password ? "border-red-500" : "border-gray-300 focus:border-[#CE1126]"}`}
                placeholder="Minimum 8 characters"
              />
              {errors.password && <p className="text-red-600 text-sm mt-1">{errors.password}</p>}
              <p className="text-xs text-gray-600 mt-1">Minimum 8 characters</p>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-900 mb-2">Confirm Password *</label>
              <input
                type="password"
                name="confirmPassword"
                value={formData.confirmPassword}
                onChange={handleChange}
                className={`w-full px-4 py-2 border rounded-lg focus:outline-none ${errors.confirmPassword ? "border-red-500" : "border-gray-300 focus:border-[#CE1126]"}`}
                placeholder="Re-enter password"
              />
              {errors.confirmPassword && <p className="text-red-600 text-sm mt-1">{errors.confirmPassword}</p>}
            </div>
          </div>
        </div>

{/* Roles */}
        <div>
          <h2 className="text-xl font-bold text-gray-900 mb-4">Assign Roles</h2>
          <p className="text-sm text-gray-600 mb-4">
            Select one or more roles to define what this user can access. The user's access will be based on the roles
            assigned.
          </p>
          {errors.roles && <p className="text-red-600 text-sm mb-2">{errors.roles}</p>}
          <div className="space-y-4">
            {roles.map((role) => (
              <label
                key={role.id}
                className="flex items-start gap-3 p-4 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors"
              >
                <input
                  type="checkbox"
                  checked={formData.roles.includes(role.id)}
                  onChange={() => handleRoleChange(role.id)}
                  className="mt-1 w-5 h-5 text-[#CE1126] rounded focus:outline-none focus:ring-2 focus:ring-[#CE1126]"
                />
                <div className="flex-1">
                  <p className="font-semibold text-gray-900">{role.name}</p>
                  <p className="text-sm text-gray-600">{role.description}</p>
                  <p className="text-xs text-gray-500 mt-1">{role.permissions} permissions</p>
                </div>
              </label>
            ))}
          </div>
        </div>

{/* Buttons */}
        <div className="flex gap-4 pt-6">
          <button
            type="button"
            onClick={() => router.push("/admin/users-roles/users")}
            className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors font-medium text-gray-900 whitespace-nowrap"
          >
            Cancel
          </button>
          <button
            type="submit"
            disabled={loading}
            className="px-4 py-2 bg-[#CE1126] text-white rounded-lg hover:bg-red-700 transition-colors font-medium whitespace-nowrap disabled:opacity-50"
          >
            {loading ? "Adding..." : "Add User"}
          </button>
        </div>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/users-roles/roles/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { ArrowLeft, Plus, Edit2, Trash2 } from "lucide-react"
import Link from "next/link"

interface Role {
  id: number
  name: string
  description?: string
  permissions?: number
  users?: number
  status?: string
}

export default function RolesPage() {
  const [roles, setRoles] = useState<Role[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

// Mock data fallback
  const mockRoles: Role[] = [
    {
      id: 1,
      name: "Super Admin",
      description: "Full access to all features and settings",
      permissions: 69,
      users: 1,
      status: "Active",
    },
    {
      id: 2,
      name: "Admin",
      description: "Administrative access to most features",
      permissions: 25,
      users: 1,
      status: "Active",
    },
    {
      id: 3,
      name: "Editor",
      description: "Can manage content and media resources",
      permissions: 18,
      users: 1,
      status: "Active",
    },
    {
      id: 4,
      name: "Content Manager",
      description: "Can create and edit content only",
      permissions: 12,
      users: 1,
      status: "Active",
    },
  ]

useEffect(() => {
    fetchRoles()
  }, [])

const fetchRoles = async () => {
    setLoading(true)
    setError(null)
    try {
      const response = await fetch("http://localhost:3000/api/roles", {
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
          "X-Requested-With": "XMLHttpRequest",
        },
        credentials: "include",
      })

if (response.ok) {
        const data = await response.json()
        setRoles(Array.isArray(data) ? data : [])
      } else {
        setRoles(mockRoles)
        setError("Using sample data. Unable to connect to server.")
      }
    } catch (error) {
      console.error("Failed to fetch roles:", error)
      setRoles(mockRoles)
      setError("Using sample data. Unable to connect to server.")
    } finally {
      setLoading(false)
    }
  }

const handleDelete = async (id: number) => {
    if (confirm("Are you sure you want to delete this role?")) {
      try {
        const response = await fetch(`http://localhost:3000/api/roles/${id}`, {
          method: "DELETE",
          headers: {
            "Content-Type": "application/json",
            "X-Requested-With": "XMLHttpRequest",
          },
          credentials: "include",
        })

if (response.ok) {
          setRoles(roles.filter((r) => r.id !== id))
        }
      } catch (error) {
        console.error("Failed to delete role:", error)
      }
    }
  }

const getRoleColorClass = (name: string) => {
    switch (name) {
      case "Super Admin":
        return "bg-red-100 text-red-700 border-red-200"
      case "Admin":
        return "bg-blue-100 text-blue-700 border-blue-200"
      case "Editor":
        return "bg-green-100 text-green-700 border-green-200"
      default:
        return "bg-purple-100 text-purple-700 border-purple-200"
    }
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      {error && <div className="bg-yellow-50 border border-yellow-200 text-yellow-800 p-4 rounded-lg">{error}</div>}

<div className="flex items-center justify-between flex-wrap gap-4">
        <div>
          <Link
            href="/admin/users-roles"
            className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 font-medium mb-4"
          >
            <ArrowLeft className="w-5 h-5" />
            Back to Users & Roles
          </Link>
          <h1 className="text-3xl font-bold text-gray-900">Roles Management</h1>
          <p className="text-gray-600 mt-2">Create and configure roles with custom permissions</p>
        </div>
        <Link
          href="/admin/users-roles/roles/add"
          className="flex items-center gap-2 bg-[#CE1126] text-white px-6 py-3 rounded-lg hover:bg-red-700 transition-colors font-medium"
        >
          <Plus className="w-5 h-5" />
          Add New Role
        </Link>
      </div>

{/* Roles Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {loading ? (
          <Card>
            <CardContent className="pt-6 text-center">Loading...</CardContent>
          </Card>
        ) : roles.length === 0 ? (
          <Card>
            <CardContent className="pt-6 text-center">No roles found</CardContent>
          </Card>
        ) : (
          roles.map((role) => (
            <Card key={role.id} className={`border-2 ${getRoleColorClass(role.name)}`}>
              <CardContent className="pt-6">
                <div className="space-y-4">
                  <div>
                    <h3 className="text-xl font-bold text-gray-900">{role.name}</h3>
                    <p className="text-sm text-gray-600 mt-2">{role.description}</p>
                  </div>

<div className="flex gap-6">
                    <div>
                      <p className="text-xs text-gray-600">Permissions</p>
                      <p className="text-2xl font-bold text-gray-900">{role.permissions || 0}</p>
                    </div>
                    <div>
                      <p className="text-xs text-gray-600">Users</p>
                      <p className="text-2xl font-bold text-gray-900">{role.users || 0}</p>
                    </div>
                  </div>

<div className="flex gap-2 pt-4 border-t">
                    <Link
                      href={`/admin/users-roles/roles/edit/${role.id}`}
                      className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium text-sm"
                    >
                      <Edit2 className="w-4 h-4" />
                      Edit
                    </Link>
                    <button
                      onClick={() => handleDelete(role.id)}
                      className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors font-medium text-sm"
                    >
                      <Trash2 className="w-4 h-4" />
                      Delete
                    </button>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/form-validation.ts" isQuickEdit="true" isMerged="true"
export const validationHelpers = {
  required: (value: string, fieldName: string): string => {
    if (!value || !value.toString().trim()) {
      return `${fieldName} is required`
    }
    return ""
  },

email: (value: string): string => {
    if (!value) return ""
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    if (!emailRegex.test(value.trim())) {
      return "Email format is invalid (e.g., contact@mcc.org.my)"
    }
    return ""
  },

phone: (value: string): string => {
    if (!value) return ""
    const phoneDigits = value.replace(/\D/g, "")
    if (phoneDigits.length < 10) {
      return "Phone number must have at least 10 digits"
    }
    return ""
  },

minLength: (value: string, length: number, fieldName: string): string => {
    if (!value) return ""
    if (value.trim().length < length) {
      return `${fieldName} must be at least ${length} characters`
    }
    return ""
  },

year: (value: string, fieldName: string): string => {
    if (!value) return ""
    const year = Number.parseInt(value.trim(), 10)
    const currentYear = new Date().getFullYear()
    if (isNaN(year) || year < 1900 || year > currentYear) {
      return `${fieldName} must be between 1900 and ${currentYear}`
    }
    return ""
  },

minValue: (value: number, minimum: number, fieldName: string): string => {
    if (value < minimum) {
      return `${fieldName} must be at least ${minimum}`
    }
    return ""
  },
}

export const getValidationErrors = (
  formData: Record<string, any>,
  rules: Record<string, { validate: (value: any) => string; required?: boolean }>,
) => {
  const errors: Record<string, string> = {}

for (const [field, rule] of Object.entries(rules)) {
    const value = formData[field]

// Check if field is required
    if (rule.required && !value?.toString().trim()) {
      errors[field] = `This field is required`
      continue
    }

// Run custom validation
    if (value !== undefined && value !== "") {
      const error = rule.validate(value)
      if (error) {
        errors[field] = error
      }
    }
  }

return errors
}

export const validateRequired = (value: string, fieldName = "This field"): string => {
  return validationHelpers.required(value, fieldName)
}

export const validateEmail = (value: string): string => {
  return validationHelpers.email(value)
}

export const validatePhone = (value: string): string => {
  return validationHelpers.phone(value)
}

export const validateMinLength = (value: string, length: number, fieldName: string): string => {
  return validationHelpers.minLength(value, length, fieldName)
}

export const validateYear = (value: string, fieldName: string): string => {
  return validationHelpers.year(value, fieldName)
}

export const validateMinValue = (value: number, minimum: number, fieldName: string): string => {
  return validationHelpers.minValue(value, minimum, fieldName)
}
[V0_FILE]typescriptreact:file="app/admin/memberships/masterfile/view/[id]/page.tsx" isMerged="true"
"use client"

import Link from "next/link"
import { ArrowLeft, Edit2, Download } from "lucide-react"
import { useState, useEffect } from "react"
import { useParams } from "next/navigation"
import { apiCall } from "@/lib/api-utils"
import { API_ENDPOINTS } from "@/lib/api-config"

interface Member {
  membership_no: string
  full_name: string
  email: string
  phone: string
  address: string
  branch: string
  joined_on: string
  status: string
}

export default function MemberViewPage() {
  const params = useParams()
  const memberId = Number(params.id)

const [member, setMember] = useState<Member | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [downloadLoading, setDownloadLoading] = useState(false)
  const [downloadError, setDownloadError] = useState<string | null>(null)

useEffect(() => {
    const fetchMember = async () => {
      try {
        setIsLoading(true)
        setError(null)
        const url = `${API_ENDPOINTS.memberships.members.getProfile}?id=${memberId}`
        const response = await apiCall(url)
        if (response.status === "SUCCESS" && response.data) {
          setMember(response.data)
        } else {
          setError("Failed to fetch member details")
        }
      } catch (err) {
        setError(err instanceof Error ? err.message : "Failed to fetch member details")
      } finally {
        setIsLoading(false)
      }
    }

if (memberId) {
      fetchMember()
    }
  }, [memberId])

const handleDownloadCard = async () => {
    try {
      setDownloadLoading(true)
      setDownloadError(null)
      const response = await fetch(API_ENDPOINTS.memberships.members.downloadCard(memberId), {
        method: "GET",
        headers: {
          Accept: "application/pdf",
          "X-Requested-With": "XMLHttpRequest",
        },
        credentials: "include",
      })

if (response.ok) {
        const blob = await response.blob()
        const url = window.URL.createObjectURL(blob)
        const a = document.createElement("a")
        a.href = url
        a.download = `membership-card-${memberId}.pdf`
        document.body.appendChild(a)
        a.click()
        window.URL.revokeObjectURL(url)
        document.body.removeChild(a)
      } else {
        setDownloadError("Failed to download membership card")
      }
    } catch (err) {
      setDownloadError(err instanceof Error ? err.message : "Error downloading card")
    } finally {
      setDownloadLoading(false)
    }
  }

if (isLoading) {
    return (
      <div className="p-6">
        <Link href="/admin/memberships/masterfile">
          <button className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 font-medium mb-4">
            <ArrowLeft className="w-5 h-5" />
            Back to Masterfile
          </button>
        </Link>
        <p className="text-gray-600">Loading member information...</p>
      </div>
    )
  }

if (error || !member) {
    return (
      <div className="p-6">
        <Link href="/admin/memberships/masterfile">
          <button className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 font-medium mb-4">
            <ArrowLeft className="w-5 h-5" />
            Back to Masterfile
          </button>
        </Link>
        <p className="text-red-600">{error || "Member not found."}</p>
      </div>
    )
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      <Link href="/admin/memberships/masterfile">
        <button className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 font-medium">
          <ArrowLeft className="w-5 h-5" />
          Back to Masterfile
        </button>
      </Link>

<div className="bg-white rounded-lg p-6 sm:p-8 space-y-6">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">{member.full_name}</h1>
          <p className="text-gray-600 mt-2">Membership No: {member.membership_no}</p>
        </div>

<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
          <div>
            <label className="text-sm font-medium text-gray-600">Email</label>
            <p className="text-gray-900 mt-2">{member.email}</p>
          </div>
          <div>
            <label className="text-sm font-medium text-gray-600">Phone</label>
            <p className="text-gray-900 mt-2">{member.phone}</p>
          </div>
          <div>
            <label className="text-sm font-medium text-gray-600">Address</label>
            <p className="text-gray-900 mt-2">{member.address}</p>
          </div>
          <div>
            <label className="text-sm font-medium text-gray-600">Branch</label>
            <p className="text-gray-900 mt-2">{member.branch}</p>
          </div>
          <div>
            <label className="text-sm font-medium text-gray-600">Joined On</label>
            <p className="text-gray-900 mt-2">{member.joined_on}</p>
          </div>
          <div>
            <label className="text-sm font-medium text-gray-600">Status</label>
            <span className="inline-block px-3 py-1 bg-green-100 text-green-800 rounded text-sm font-medium mt-2">
              {member.status}
            </span>
          </div>
        </div>

{downloadError && (
          <div className="p-4 bg-red-50 border border-red-200 rounded-lg">
            <p className="text-red-700 text-sm">{downloadError}</p>
          </div>
        )}

<div className="flex gap-2 pt-6 border-t border-gray-200">
          <Link href={`/admin/memberships/masterfile/edit/${memberId}`}>
            <button className="flex items-center gap-2 bg-amber-100 text-amber-700 px-4 py-2 rounded-lg hover:bg-amber-200 transition font-medium">
              <Edit2 className="w-4 h-4" />
              Edit
            </button>
          </Link>
          <button
            onClick={handleDownloadCard}
            disabled={downloadLoading}
            className="flex items-center gap-2 bg-[#003087] text-white px-4 py-2 rounded-lg hover:bg-blue-900 transition font-medium disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <Download className="w-4 h-4" />
            {downloadLoading ? "Downloading..." : "Download Card"}
          </button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/public-page/team/edit/[id]/page.tsx" isMerged="true"
"use client"

import type React from "react"
import { useRouter, useParams } from "next/navigation"
import { useState, useEffect } from "react"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"
import { API_ENDPOINTS } from "@/lib/api-config"
import { validationHelpers } from "@/lib/form-validation"

interface TeamMember {
  id: number
  name: string
  position: string
  email: string
  phone: string
  bio: string
  photo: string
  status: "ACTIVE" | "INACTIVE"
}

export default function EditTeamPage() {
  const router = useRouter()
  const params = useParams()
  const id = Number(params.id)

const [preview, setPreview] = useState<string>("")
  const [loading, setLoading] = useState(true)
  const [submitting, setSubmitting] = useState(false)
  const [errors, setErrors] = useState<Record<string, string>>({})
  const [formData, setFormData] = useState<TeamMember>({
    id: 0,
    name: "",
    position: "",
    email: "",
    phone: "",
    bio: "",
    photo: "",
    status: "ACTIVE",
  })

useEffect(() => {
    const fetchMember = async () => {
      try {
        setLoading(true)
        // Mock data for now since we're editing member with specific ID
        const mockMembers: Record<number, TeamMember> = {
          1: {
            id: 1,
            name: "Aravind Subramanian",
            position: "Committee President",
            email: "aravind@mcc.org.my",
            phone: "+60 3-2142-3456",
            bio: "Experienced leader with 15 years in community development",
            photo: "/aravind.jpg",
            status: "ACTIVE",
          },
          2: {
            id: 2,
            name: "Senthil Kumar",
            position: "Vice President",
            email: "senthil@mcc.org.my",
            phone: "+60 3-2142-3457",
            bio: "Dedicated professional focused on member engagement",
            photo: "/senthil.jpg",
            status: "ACTIVE",
          },
        }

const member = mockMembers[id]
        if (member) {
          setFormData(member)
          setPreview(member.photo)
        }
      } catch (err) {
        // Failed to fetch member, using mock data
      } finally {
        setLoading(false)
      }
    }

fetchMember()
  }, [id])

const validateForm = () => {
    const newErrors: Record<string, string> = {}

Object.keys(newErrors).forEach((key) => {
      if (!newErrors[key]) delete newErrors[key]
    })

setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!validateForm()) return

try {
      setSubmitting(true)

const response = await fetch(API_ENDPOINTS.leadership.update(id), {
        method: "PUT",
        body: requestData,
        headers: {
          Accept: "application/json",
          "X-Requested-With": "XMLHttpRequest",
        },
        credentials: "include",
      })

if (!response.ok) throw new Error("Failed to update team member")

alert("Team member updated successfully!")
      router.push("/admin/public-page/team")
    } catch (err) {
      alert("Failed to update team member. Please try again.")
    } finally {
      setSubmitting(false)
    }
  }

if (loading) {
    return (
      <div className="p-4 sm:p-6">
        <p className="text-gray-600">Loading...</p>
      </div>
    )
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      <div className="flex items-center gap-3">
        <Link href="/admin/public-page/team">
          <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors">
            <ArrowLeft className="w-5 h-5 text-gray-600" />
          </button>
        </Link>
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Edit Team Member</h1>
          <p className="text-gray-600 mt-1">Update team member information</p>
        </div>
      </div>

<div className="bg-white rounded-lg p-6 max-w-2xl">
        <form onSubmit={handleSubmit} className="space-y-6">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-3">Photo</label>
            <div className="flex flex-col sm:flex-row gap-4">
              {preview && (
                <img
                  src={preview || "/placeholder.svg"}
                  alt="Preview"
                  className="w-24 h-24 rounded-full object-cover"
                />
              )}
              <div className="flex-1">
                <label className="flex items-center justify-center w-full px-4 py-3 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:border-[#CE1126] transition-colors">
                  <div className="flex items-center gap-2">
                    <span className="text-sm text-gray-600">Click to upload photo</span>
                  </div>
                  <input type="file" accept="image/*" onChange={handleImageChange} className="hidden" />
                </label>
              </div>
            </div>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Name *</label>
              <input
                type="text"
                value={formData.name}
                onChange={(e) => handleFieldChange("name", e.target.value)}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
                placeholder="Full name"
              />
              {errors.name && <p className="text-red-500 text-sm mt-1">{errors.name}</p>}
            </div>

<div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Position *</label>
              <input
                type="text"
                value={formData.position}
                onChange={(e) => handleFieldChange("position", e.target.value)}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
                placeholder="e.g., Committee President"
              />
              {errors.position && <p className="text-red-500 text-sm mt-1">{errors.position}</p>}
            </div>

<div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Email *</label>
              <input
                type="email"
                value={formData.email}
                onChange={(e) => handleFieldChange("email", e.target.value)}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
                placeholder="email@mcc.org.my"
              />
              {errors.email && <p className="text-red-500 text-sm mt-1">{errors.email}</p>}
            </div>

<div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Phone *</label>
              <input
                type="tel"
                value={formData.phone}
                onChange={(e) => handleFieldChange("phone", e.target.value)}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
                placeholder="+60 3-2142-3456"
              />
              {errors.phone && <p className="text-red-500 text-sm mt-1">{errors.phone}</p>}
            </div>

<div className="md:col-span-2">
              <label className="block text-sm font-medium text-gray-700 mb-2">Bio</label>
              <textarea
                value={formData.bio}
                onChange={(e) => handleFieldChange("bio", e.target.value)}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
                placeholder="Brief biography"
                rows={4}
              />
            </div>

<div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Status *</label>
              <select
                value={formData.status}
                onChange={(e) => handleFieldChange("status", e.target.value as "ACTIVE" | "INACTIVE")}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
              >
                <option value="ACTIVE">Active</option>
                <option value="INACTIVE">Inactive</option>
              </select>
            </div>
          </div>

<div className="flex gap-3 pt-4 border-t border-gray-200">
            <button
              type="submit"
              disabled={submitting}
              className="bg-[#CE1126] text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors font-medium text-sm whitespace-nowrap disabled:opacity-50"
            >
              {submitting ? "Updating..." : "Update Team Member"}
            </button>
            <Link href="/admin/public-page/team">
              <button
                type="button"
                className="bg-gray-200 text-gray-800 px-4 py-2 rounded-lg hover:bg-gray-300 transition-colors font-medium text-sm whitespace-nowrap"
              >
                Cancel
              </button>
            </Link>
          </div>
        </form>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/public-page/team/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Card, CardContent } from "@/components/ui/card"
import { Plus, Edit2, Trash2, Eye, ArrowLeft } from "lucide-react"
import { API_ENDPOINTS } from "@/lib/api-config"

interface TeamMember {
  id: number
  name: string
  position: string
  email: string
  phone: string
  photo: string
  bio: string
  status: "ACTIVE" | "INACTIVE"
}

export default function TeamPage() {
  const [members, setMembers] = useState<TeamMember[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

const mockMembers: TeamMember[] = [
    {
      id: 1,
      name: "Aravind Subramanian",
      position: "Committee President",
      email: "aravind@mcc.org.my",
      phone: "+60 3-2142-3456",
      photo: "/aravind.jpg",
      bio: "Experienced leader with 15 years in community development",
      status: "ACTIVE",
    },
    {
      id: 2,
      name: "Senthil Kumar",
      position: "Vice President",
      email: "senthil@mcc.org.my",
      phone: "+60 3-2142-3457",
      photo: "/senthil.jpg",
      bio: "Dedicated professional focused on member engagement",
      status: "ACTIVE",
    },
  ]

useEffect(() => {
    const fetchMembers = async () => {
      try {
        setLoading(true)
        const response = await fetch(API_ENDPOINTS.leadership.list, {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            Accept: "application/json",
            "X-Requested-With": "XMLHttpRequest",
          },
          credentials: "include",
        })

if (!response.ok) throw new Error("Failed to fetch team members")
        const data = await response.json()

const transformedMembers = data.map((member: any) => ({
          id: member.id,
          name: member.name,
          position: member.position,
          email: member.email,
          phone: member.phone,
          photo: member.photo,
          bio: member.bio,
          status: member.status,
        }))

setMembers(transformedMembers)
        setError(null)
      } catch (err) {
        setMembers(mockMembers)
        setError("Using sample data. Unable to connect to server.")
      } finally {
        setLoading(false)
      }
    }

fetchMembers()
  }, [])

const handleDelete = async (id: number) => {
    if (!confirm("Are you sure you want to delete this member?")) return

try {
      const response = await fetch(API_ENDPOINTS.leadership.delete(id), {
        method: "DELETE",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
          "X-Requested-With": "XMLHttpRequest",
        },
        credentials: "include",
      })

if (!response.ok) throw new Error("Failed to delete member")
      setMembers(members.filter((m) => m.id !== id))
    } catch (err) {
      alert("Failed to delete member. Please try again.")
    }
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      <Link href="/admin/public-page">
        <button className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 transition-colors font-medium text-sm mb-4">
          <ArrowLeft className="w-5 h-5" />
          Back to Public Page
        </button>
      </Link>

<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Leadership</h1>
          <p className="text-gray-600 mt-2">Manage team members and leadership</p>
        </div>
        <Link href="/admin/public-page/team/add">
          <button className="flex items-center gap-2 bg-[#CE1126] text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors font-medium text-sm w-full sm:w-auto">
            <Plus className="w-5 h-5" />
            Add New Team Member
          </button>
        </Link>
      </div>

{error && (
        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3 text-sm text-yellow-800">{error}</div>
      )}

<div className="bg-white rounded-lg p-4">
        <p className="text-sm text-gray-600 mb-4">Total Team Members: {members.length}</p>
        {loading ? (
          <div className="text-center py-8">
            <p className="text-gray-600">Loading team members...</p>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {members.map((member) => (
              <Card key={member.id} className="hover:shadow-lg transition-shadow">
                <CardContent className="pt-6">
                  <div className="text-center">
                    <img
                      src={member.photo || "/placeholder.svg?height=96&width=96&query=team%20member"}
                      alt={member.name}
                      className="w-24 h-24 rounded-full mx-auto mb-4 object-cover"
                    />
                    <h3 className="font-semibold text-gray-900">{member.name}</h3>
                    <p className="text-sm text-[#CE1126] font-medium">{member.position}</p>
                    <p className="text-xs text-gray-500 mt-1">{member.email}</p>
                    <p className="text-xs text-gray-500">{member.phone}</p>
                    <div className="mt-2">
                      <span
                        className={`inline-block px-3 py-1 rounded-full text-xs font-medium ${
                          member.status === "ACTIVE" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
                        }`}
                      >
                        {member.status === "ACTIVE" ? "Active" : "Inactive"}
                      </span>
                    </div>
                    <div className="flex gap-2 mt-4 justify-center">
                      <Link href={`/admin/public-page/team/view/${member.id}`}>
                        <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors">
                          <Eye className="w-5 h-5 text-gray-600" />
                        </button>
                      </Link>
                      <Link href={`/admin/public-page/team/edit/${member.id}`}>
                        <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors">
                          <Edit2 className="w-5 h-5 text-gray-600" />
                        </button>
                      </Link>
                      <button
                        onClick={() => handleDelete(member.id)}
                        className="p-2 hover:bg-red-50 rounded-lg transition-colors"
                      >
                        <Trash2 className="w-5 h-5 text-red-600" />
                      </button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/settings/general/website-info/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { Save, AlertCircle } from "lucide-react"
import Link from "next/link"
import { API_ENDPOINTS } from "@/lib/api-config"
import { apiGetWithHeaders } from "@/lib/api-utils"

export default function WebsiteInfoPage() {
  const [formData, setFormData] = useState({
    siteName: "Malaysian Ceylonese Congress",
    siteSlogan: "Unity in Service",
    siteDescription: "Official Portal of the Malaysian Ceylonese Congress",
    siteLogo: "/mcc-logo.jfif",
    favicon: "/favicon.ico",
  })

const [errors, setErrors] = useState<Record<string, string>>({})
  const [loading, setLoading] = useState(false)
  const [fetchLoading, setFetchLoading] = useState(true)
  const [successMessage, setSuccessMessage] = useState("")
  const [errorMessage, setErrorMessage] = useState("")
  const [logoFile, setLogoFile] = useState<File | null>(null)
  const [faviconFile, setFaviconFile] = useState<File | null>(null)

useEffect(() => {
    fetchWebsiteSettings()
  }, [])

const fetchWebsiteSettings = async () => {
    try {
      setFetchLoading(true)
      const response = await apiGetWithHeaders(API_ENDPOINTS.settings.website.get)
      if (response.status === "SUCCESS" && response.data) {
        setFormData({
          siteName: response.data.site_name || "Malaysian Ceylonese Congress",
          siteSlogan: response.data.site_slogan || "Unity in Service",
          siteDescription: response.data.site_description || "Official Portal of the Malaysian Ceylonese Congress",
          siteLogo: response.data.site_logo || "/mcc-logo.jfif",
          favicon: response.data.favicon || "/favicon.ico",
        })
      }
    } catch (error) {
      // Failed to fetch website settings, using default values
    } finally {
      setFetchLoading(false)
    }
  }

const handleChange = (e: any) => {
    const { name, value } = e.target
    setFormData((prev) => ({
      ...prev,
      [name]: value,
    }))
    if (errors[name]) {
      setErrors((prev) => ({ ...prev, [name]: "" }))
    }
    setSuccessMessage("")
    setErrorMessage("")
  }

const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>, fileType: "logo" | "favicon") => {
    const file = e.target.files?.[0]
    if (file) {
      if (fileType === "logo") {
        setLogoFile(file)
      } else {
        setFaviconFile(file)
      }
    }
  }

const validateForm = () => {
    const newErrors: Record<string, string> = {}

if (!formData.siteName.trim()) {
      newErrors.siteName = "Site name is required"
    }
    if (!formData.siteDescription.trim()) {
      newErrors.siteDescription = "Site description is required"
    }

setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

if (!validateForm()) {
      return
    }

try {
      setLoading(true)
      setErrorMessage("")
      setSuccessMessage("")

const formDataToSend = new FormData()
      formDataToSend.append("site_name", formData.siteName)
      formDataToSend.append("site_slogan", formData.siteSlogan)
      formDataToSend.append("site_description", formData.siteDescription)

if (logoFile) {
        formDataToSend.append("site_logo", logoFile)
      }

if (faviconFile) {
        formDataToSend.append("favicon", faviconFile)
      }

const response = await fetch(API_ENDPOINTS.settings.website.update, {
        method: "POST",
        headers: {
          Accept: "application/json",
          "X-Requested-With": "XMLHttpRequest",
        },
        credentials: "include",
        body: formDataToSend,
      })

if (!response.ok) {
        throw new Error("Failed to save website information")
      }

const data = await response.json()

if (data.status === "SUCCESS") {
        setSuccessMessage("Website information saved successfully!")
        setLogoFile(null)
        setFaviconFile(null)
        // Refresh the data
        await fetchWebsiteSettings()
      } else {
        setErrorMessage(data.message || "Failed to save website information")
      }
    } catch (error) {
      setErrorMessage("Failed to save website information. Please try again.")
    } finally {
      setLoading(false)
    }
  }

if (fetchLoading) {
    return (
      <div className="p-4 sm:p-6 space-y-6">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold text-gray-900">Website Information</h1>
            <p className="text-gray-600 mt-2">Manage website name, logo, and branding</p>
          </div>
          <Link href="/admin/settings/general">
            <button className="px-4 py-2 text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium">
              Back
            </button>
          </Link>
        </div>
        <div className="text-center py-8">
          <p className="text-gray-600">Loading website information...</p>
        </div>
      </div>
    )
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Website Information</h1>
          <p className="text-gray-600 mt-2">Manage website name, logo, and branding</p>
        </div>
        <Link href="/admin/settings/general">
          <button className="px-4 py-2 text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium">
            Back
          </button>
        </Link>
      </div>

{successMessage && (
        <div className="p-4 bg-green-50 border border-green-200 rounded-lg flex items-start gap-3">
          <AlertCircle className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
          <p className="text-green-800 text-sm">{successMessage}</p>
        </div>
      )}

{errorMessage && (
        <div className="p-4 bg-red-50 border border-red-200 rounded-lg flex items-start gap-3">
          <AlertCircle className="w-5 h-5 text-red-600 mt-0.5 flex-shrink-0" />
          <p className="text-red-800 text-sm">{errorMessage}</p>
        </div>
      )}

<form onSubmit={handleSubmit} className="bg-white rounded-lg border border-gray-200 p-6 space-y-6 max-w-2xl">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Site Name *</label>
          <input
            type="text"
            name="siteName"
            value={formData.siteName}
            onChange={handleChange}
            required
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
          />
          {errors.siteName && <p className="text-red-500 text-sm mt-1">{errors.siteName}</p>}
        </div>

<div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Site Slogan</label>
          <input
            type="text"
            name="siteSlogan"
            value={formData.siteSlogan}
            onChange={handleChange}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
          />
        </div>

<div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Site Description</label>
          <textarea
            name="siteDescription"
            value={formData.siteDescription}
            onChange={handleChange}
            rows={4}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
          />
          {errors.siteDescription && <p className="text-red-500 text-sm mt-1">{errors.siteDescription}</p>}
        </div>

<div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Site Logo</label>
          <div className="flex items-center gap-4">
            {formData.siteLogo && (
              <img
                src={formData.siteLogo || "/placeholder.svg"}
                alt="Current Logo"
                className="w-12 h-12 object-contain border border-gray-200 rounded-lg"
              />
            )}
            <div className="flex-1">
              <input
                type="file"
                accept="image/*"
                onChange={(e) => handleFileChange(e, "logo")}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
              />
              {logoFile && <p className="text-sm text-green-600 mt-1">New file selected: {logoFile.name}</p>}
            </div>
          </div>
        </div>

<div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Favicon</label>
          <div className="flex items-center gap-4">
            <input
              type="file"
              accept="image/*"
              onChange={(e) => handleFileChange(e, "favicon")}
              className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
            />
            {faviconFile && <p className="text-sm text-green-600 mt-1">New file selected: {faviconFile.name}</p>}
          </div>
        </div>

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import Link from "next/link"
import { ArrowLeft, Eye } from "lucide-react"
import { useState, useEffect } from "react"
import { API_ENDPOINTS } from "@/lib/api-config"
import { apiPutWithHeaders } from "@/lib/api-utils"

export default function DisplayOptionsPage() {
  const [settings, setSettings] = useState({
    items_per_page: 25,
    enable_dark_mode: true,
    show_breadcrumbs: true,
    show_page_numbers: true,
    enable_animations: true,
    default_theme: "LIGHT",
    compact_view: false,
  })

const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [message, setMessage] = useState("")
  const [error, setError] = useState("")

useEffect(() => {
    fetchSettings()
  }, [])

const fetchSettings = async () => {
    try {
      const response = await fetch(API_ENDPOINTS.settings.getAll, {
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
          "X-Requested-With": "XMLHttpRequest",
        },
        credentials: "include",
      })

if (response.ok) {
        const data = await response.json()
        setSettings({
          items_per_page: data.items_per_page || 25,
          enable_dark_mode: data.enable_dark_mode || true,
          show_breadcrumbs: data.show_breadcrumbs || true,
          show_page_numbers: data.show_page_numbers || true,
          enable_animations: data.enable_animations || true,
          default_theme: data.default_theme || "LIGHT",
          compact_view: data.compact_view || false,
        })
      }
    } catch (err) {
      // Failed to fetch display settings, using defaults
    } finally {
      setLoading(false)
    }
  }

const handleChange = (key: string, value: any) => {
    setSettings((prev) => ({ ...prev, [key]: value }))
    setError("")
  }

const handleSave = async () => {
    setSaving(true)
    setError("")
    setMessage("")

try {
      const response = await apiPutWithHeaders(API_ENDPOINTS.settings.display, {
        items_per_page: settings.items_per_page,
        default_theme: settings.default_theme,
        enable_dark_mode: settings.enable_dark_mode,
        show_breadcrumbs: settings.show_breadcrumbs,
        show_page_numbers: settings.show_page_numbers,
        enable_animations: settings.enable_animations,
        compact_view: settings.compact_view,
      })

const data = await response.json()

if (response.ok && data.status === "SUCCESS") {
        setMessage("Display options updated successfully!")
        setTimeout(() => setMessage(""), 3000)
      } else {
        setError(data.message || "Failed to update settings")
      }
    } catch (err) {
      setError("Failed to save display options")
    } finally {
      setSaving(false)
    }
  }

return (
    <div className="p-4 sm:p-6 space-y-8">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <Link href="/admin/settings/website-settings">
            <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors">
              <ArrowLeft className="w-5 h-5 text-gray-700" />
            </button>
          </Link>
          <div>
            <h1 className="text-3xl font-bold text-gray-900">Display Options</h1>
            <p className="text-gray-600 mt-2">Configure page display settings and user interface preferences</p>
          </div>
        </div>
      </div>

{message && (
        <div className="p-3 bg-green-50 border border-green-200 rounded-lg text-green-800 text-sm">{message}</div>
      )}

{error && <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-red-800 text-sm">{error}</div>}

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card className="border border-gray-200">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Eye className="w-5 h-5 text-blue-600" />
              Display Settings
            </CardTitle>
            <CardDescription>Configure how content is displayed</CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <div>
              <label className="block text-sm font-medium text-gray-900 mb-2">Items Per Page</label>
              <select
                value={settings.items_per_page}
                onChange={(e) => handleChange("items_per_page", Number(e.target.value))}
                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
              >
                <option value={10}>10 items</option>
                <option value={25}>25 items</option>
                <option value={50}>50 items</option>
                <option value={100}>100 items</option>
              </select>
            </div>

<div>
              <label className="block text-sm font-medium text-gray-900 mb-2">Default Theme</label>
              <select
                value={settings.default_theme}
                onChange={(e) => handleChange("default_theme", e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
              >
                <option value="LIGHT">Light</option>
                <option value="DARK">Dark</option>
              </select>
            </div>

<div className="space-y-3">
              <div className="flex items-center">
                <input
                  type="checkbox"
                  id="darkMode"
                  checked={settings.enable_dark_mode}
                  onChange={(e) => handleChange("enable_dark_mode", e.target.checked)}
                  className="w-4 h-4 text-red-600 border-gray-300 rounded focus:ring-2 focus:ring-red-500"
                />
                <label htmlFor="darkMode" className="ml-3 text-sm font-medium text-gray-900">
                  Enable Dark Mode Support
                </label>
              </div>

<div className="flex items-center">
                <input
                  type="checkbox"
                  id="breadcrumbs"
                  checked={settings.show_breadcrumbs}
                  onChange={(e) => handleChange("show_breadcrumbs", e.target.checked)}
                  className="w-4 h-4 text-red-600 border-gray-300 rounded focus:ring-2 focus:ring-red-500"
                />
                <label htmlFor="breadcrumbs" className="ml-3 text-sm font-medium text-gray-900">
                  Show Breadcrumbs
                </label>
              </div>

<div className="flex items-center">
                <input
                  type="checkbox"
                  id="pageNumbers"
                  checked={settings.show_page_numbers}
                  onChange={(e) => handleChange("show_page_numbers", e.target.checked)}
                  className="w-4 h-4 text-red-600 border-gray-300 rounded focus:ring-2 focus:ring-red-500"
                />
                <label htmlFor="pageNumbers" className="ml-3 text-sm font-medium text-gray-900">
                  Show Page Numbers in Pagination
                </label>
              </div>

<div className="flex items-center">
                <input
                  type="checkbox"
                  id="animations"
                  checked={settings.enable_animations}
                  onChange={(e) => handleChange("enable_animations", e.target.checked)}
                  className="w-4 h-4 text-red-600 border-gray-300 rounded focus:ring-2 focus:ring-red-500"
                />
                <label htmlFor="animations" className="ml-3 text-sm font-medium text-gray-900">
                  Enable UI Animations
                </label>
              </div>

<div className="flex items-center">
                <input
                  type="checkbox"
                  id="compact"
                  checked={settings.compact_view}
                  onChange={(e) => handleChange("compact_view", e.target.checked)}
                  className="w-4 h-4 text-red-600 border-gray-300 rounded focus:ring-2 focus:ring-red-500"
                />
                <label htmlFor="compact" className="ml-3 text-sm font-medium text-gray-900">
                  Compact View
                </label>
              </div>
            </div>
          </CardContent>
        </Card>

<Card className="border border-gray-200">
          <CardHeader>
            <CardTitle>Preview</CardTitle>
            <CardDescription>Your display settings preview</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="p-4 bg-gray-50 rounded-lg border border-gray-200">
              <p className="text-xs text-gray-600 mb-2">Current Settings:</p>
              <div className="space-y-1 text-sm text-gray-700">
                <p>
                  <span className="font-medium">Items per page:</span> {settings.items_per_page}
                </p>
                <p>
                  <span className="font-medium">Default theme:</span> {settings.default_theme}
                </p>
                <p>
                  <span className="font-medium">Dark mode:</span> {settings.enable_dark_mode ? "Enabled" : "Disabled"}
                </p>
                <p>
                  <span className="font-medium">Breadcrumbs:</span> {settings.show_breadcrumbs ? "Shown" : "Hidden"}
                </p>
                <p>
                  <span className="font-medium">Animations:</span> {settings.enable_animations ? "Enabled" : "Disabled"}
                </p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

<div className="flex justify-end gap-3">
        <Link href="/admin/settings/website-settings">
          <button className="px-6 py-2 text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors font-medium">
            Cancel
          </button>
        </Link>
        <button
          onClick={handleSave}
          disabled={saving}
          className="px-6 py-2 bg-[#CE1126] text-white rounded-lg hover:bg-red-700 transition-colors font-medium disabled:opacity-50"
        >
          {saving ? "Saving..." : "Save Changes"}
        </button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/settings/website-settings/performance/page.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import Link from "next/link"
import { ArrowLeft, Zap } from "lucide-react"
import { useState, useEffect } from "react"
import { API_ENDPOINTS } from "@/lib/api-config"
import { apiPutWithHeaders } from "@/lib/api-utils"

export default function PerformancePage() {
  const [settings, setSettings] = useState({
    enable_caching: true,
    cache_expiry_seconds: 3600,
    enable_gzip: true,
    enable_cdn: true,
    optimize_images: true,
    minify_css: true,
    minify_js: true,
    enable_lazy_loading: true,
    optimize_db_queries: true,
    api_rate_limit_per_hour: 1000,
  })

const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [message, setMessage] = useState("")
  const [error, setError] = useState("")

useEffect(() => {
    fetchSettings()
  }, [])

if (response.ok) {
        const data = await response.json()
        setSettings({
          enable_caching: data.enable_caching || true,
          cache_expiry_seconds: data.cache_expiry_seconds || 3600,
          enable_gzip: data.enable_gzip || true,
          enable_cdn: data.enable_cdn || true,
          optimize_images: data.optimize_images || true,
          minify_css: data.minify_css || true,
          minify_js: data.minify_js || true,
          enable_lazy_loading: data.enable_lazy_loading || true,
          optimize_db_queries: data.optimize_db_queries || true,
          api_rate_limit_per_hour: data.api_rate_limit_per_hour || 1000,
        })
      }
    } catch (err) {
      // Failed to fetch performance settings, using defaults
    } finally {
      setLoading(false)
    }
  }

const handleChange = (key: string, value: any) => {
    setSettings((prev) => ({ ...prev, [key]: value }))
    setError("")
  }

const handleSave = async () => {
    setSaving(true)
    setError("")
    setMessage("")

try {
      const response = await apiPutWithHeaders(API_ENDPOINTS.settings.performance, {
        enable_caching: settings.enable_caching,
        enable_gzip: settings.enable_gzip,
        enable_cdn: settings.enable_cdn,
        optimize_images: settings.optimize_images,
        minify_css: settings.minify_css,
        minify_js: settings.minify_js,
        enable_lazy_loading: settings.enable_lazy_loading,
        optimize_db_queries: settings.optimize_db_queries,
        cache_expiry_seconds: settings.cache_expiry_seconds,
        api_rate_limit_per_hour: settings.api_rate_limit_per_hour,
      })

const data = await response.json()

if (response.ok && data.status === "SUCCESS") {
        setMessage("Performance settings updated successfully!")
        setTimeout(() => setMessage(""), 3000)
      } else {
        setError(data.message || "Failed to update settings")
      }
    } catch (err) {
      setError("Failed to save performance settings")
    } finally {
      setSaving(false)
    }
  }

return (
    <div className="p-4 sm:p-6 space-y-8">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <Link href="/admin/settings/website-settings">
            <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors">
              <ArrowLeft className="w-5 h-5 text-gray-700" />
            </button>
          </Link>
          <div>
            <h1 className="text-3xl font-bold text-gray-900">Performance Settings</h1>
            <p className="text-gray-600 mt-2">Configure caching, optimization, and performance settings</p>
          </div>
        </div>
      </div>

{message && (
        <div className="p-3 bg-green-50 border border-green-200 rounded-lg text-green-800 text-sm">{message}</div>
      )}

{error && <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-red-800 text-sm">{error}</div>}

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card className="border border-gray-200">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Zap className="w-5 h-5 text-yellow-600" />
              Performance Optimization
            </CardTitle>
            <CardDescription>Configure performance settings</CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="space-y-3">
              <div className="flex items-center">
                <input
                  type="checkbox"
                  id="caching"
                  checked={settings.enable_caching}
                  onChange={(e) => handleChange("enable_caching", e.target.checked)}
                  className="w-4 h-4 text-red-600 border-gray-300 rounded focus:ring-2 focus:ring-red-500"
                />
                <label htmlFor="caching" className="ml-3 text-sm font-medium text-gray-900">
                  Enable Caching
                </label>
              </div>

<div className="flex items-center">
                <input
                  type="checkbox"
                  id="compression"
                  checked={settings.enable_gzip}
                  onChange={(e) => handleChange("enable_gzip", e.target.checked)}
                  className="w-4 h-4 text-red-600 border-gray-300 rounded focus:ring-2 focus:ring-red-500"
                />
                <label htmlFor="compression" className="ml-3 text-sm font-medium text-gray-900">
                  Enable GZIP Compression
                </label>
              </div>

<div className="flex items-center">
                <input
                  type="checkbox"
                  id="cdn"
                  checked={settings.enable_cdn}
                  onChange={(e) => handleChange("enable_cdn", e.target.checked)}
                  className="w-4 h-4 text-red-600 border-gray-300 rounded focus:ring-2 focus:ring-red-500"
                />
                <label htmlFor="cdn" className="ml-3 text-sm font-medium text-gray-900">
                  Enable CDN
                </label>
              </div>

<div className="flex items-center">
                <input
                  type="checkbox"
                  id="imageOpt"
                  checked={settings.optimize_images}
                  onChange={(e) => handleChange("optimize_images", e.target.checked)}
                  className="w-4 h-4 text-red-600 border-gray-300 rounded focus:ring-2 focus:ring-red-500"
                />
                <label htmlFor="imageOpt" className="ml-3 text-sm font-medium text-gray-900">
                  Enable Image Optimization
                </label>
              </div>

<div className="flex items-center">
                <input
                  type="checkbox"
                  id="minifyCSS"
                  checked={settings.minify_css}
                  onChange={(e) => handleChange("minify_css", e.target.checked)}
                  className="w-4 h-4 text-red-600 border-gray-300 rounded focus:ring-2 focus:ring-red-500"
                />
                <label htmlFor="minifyCSS" className="ml-3 text-sm font-medium text-gray-900">
                  Minify CSS
                </label>
              </div>

<div className="flex items-center">
                <input
                  type="checkbox"
                  id="minifyJS"
                  checked={settings.minify_js}
                  onChange={(e) => handleChange("minify_js", e.target.checked)}
                  className="w-4 h-4 text-red-600 border-gray-300 rounded focus:ring-2 focus:ring-red-500"
                />
                <label htmlFor="minifyJS" className="ml-3 text-sm font-medium text-gray-900">
                  Minify JavaScript
                </label>
              </div>

<div className="flex items-center">
                <input
                  type="checkbox"
                  id="lazyLoad"
                  checked={settings.enable_lazy_loading}
                  onChange={(e) => handleChange("enable_lazy_loading", e.target.checked)}
                  className="w-4 h-4 text-red-600 border-gray-300 rounded focus:ring-2 focus:ring-red-500"
                />
                <label htmlFor="lazyLoad" className="ml-3 text-sm font-medium text-gray-900">
                  Enable Lazy Loading
                </label>
              </div>

<div className="flex items-center">
                <input
                  type="checkbox"
                  id="dbOpt"
                  checked={settings.optimize_db_queries}
                  onChange={(e) => handleChange("optimize_db_queries", e.target.checked)}
                  className="w-4 h-4 text-red-600 border-gray-300 rounded focus:ring-2 focus:ring-red-500"
                />
                <label htmlFor="dbOpt" className="ml-3 text-sm font-medium text-gray-900">
                  Database Query Optimization
                </label>
              </div>
            </div>

<div className="border-t pt-4 space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-900 mb-2">Cache Expiry Time (seconds)</label>
                <input
                  type="number"
                  value={settings.cache_expiry_seconds}
                  onChange={(e) => handleChange("cache_expiry_seconds", Number(e.target.value))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
                />
              </div>

<div>
                <label className="block text-sm font-medium text-gray-900 mb-2">API Rate Limit (requests/hour)</label>
                <input
                  type="number"
                  value={settings.api_rate_limit_per_hour}
                  onChange={(e) => handleChange("api_rate_limit_per_hour", Number(e.target.value))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
                />
              </div>
            </div>
          </CardContent>
        </Card>

<Card className="border border-gray-200">
          <CardHeader>
            <CardTitle>Performance Metrics</CardTitle>
            <CardDescription>Current optimization status</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
              <p className="text-sm font-medium text-blue-900 mb-3">Enabled Optimizations:</p>
              <div className="space-y-2 text-sm text-blue-800">
                {settings.enable_caching && <p>✓ Caching enabled</p>}
                {settings.enable_gzip && <p>✓ GZIP Compression</p>}
                {settings.enable_cdn && <p>✓ CDN enabled</p>}
                {settings.optimize_images && <p>✓ Image Optimization</p>}
                {settings.minify_css && <p>✓ CSS Minification</p>}
                {settings.minify_js && <p>✓ JavaScript Minification</p>}
                {settings.enable_lazy_loading && <p>✓ Lazy Loading</p>}
                {settings.optimize_db_queries && <p>✓ Database Optimization</p>}
              </div>
            </div>

<div className="p-4 bg-gray-50 rounded-lg border border-gray-200">
              <p className="text-xs text-gray-600 mb-2">Configuration:</p>
              <div className="space-y-1 text-sm text-gray-700">
                <p>
                  <span className="font-medium">Cache expiry:</span> {settings.cache_expiry_seconds}s
                </p>
                <p>
                  <span className="font-medium">API rate limit:</span> {settings.api_rate_limit_per_hour}/hour
                </p>
              </div>
            </div>

<div className="p-3 bg-green-50 rounded-lg border border-green-200 text-center">
              <p className="text-xs text-green-900 font-medium">Performance Status: OPTIMAL</p>
            </div>
          </CardContent>
        </Card>
      </div>

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import Link from "next/link"
import { ArrowLeft, Shield } from "lucide-react"
import { useState, useEffect } from "react"
import { API_ENDPOINTS } from "@/lib/api-config"
import { apiPutWithHeaders } from "@/lib/api-utils"

export default function SecuritySettingsPage() {
  const [settings, setSettings] = useState({
    enable_ssl: true,
    force_https: true,
    enable_2fa: true,
    session_timeout_minutes: 30,
    max_login_attempts: 5,
    password_expiry_days: 90,
    enable_audit_logs: true,
    require_strong_passwords: true,
  })

const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [message, setMessage] = useState("")
  const [error, setError] = useState("")

useEffect(() => {
    fetchSettings()
  }, [])

if (response.ok) {
        const data = await response.json()
        setSettings({
          enable_ssl: data.enable_ssl || true,
          force_https: data.force_https || true,
          enable_2fa: data.enable_2fa || true,
          session_timeout_minutes: data.session_timeout_minutes || 30,
          max_login_attempts: data.max_login_attempts || 5,
          password_expiry_days: data.password_expiry_days || 90,
          enable_audit_logs: data.enable_audit_logs || true,
          require_strong_passwords: data.require_strong_passwords || true,
        })
      }
    } catch (err) {
      // Failed to fetch security settings, using defaults
    } finally {
      setLoading(false)
    }
  }

const handleChange = (key: string, value: any) => {
    setSettings((prev) => ({ ...prev, [key]: value }))
    setError("")
  }

const handleSave = async () => {
    setSaving(true)
    setError("")
    setMessage("")

try {
      const response = await apiPutWithHeaders(API_ENDPOINTS.settings.security, {
        enable_ssl: settings.enable_ssl,
        force_https: settings.force_https,
        enable_2fa: settings.enable_2fa,
        enable_audit_logs: settings.enable_audit_logs,
        require_strong_passwords: settings.require_strong_passwords,
        session_timeout_minutes: settings.session_timeout_minutes,
        max_login_attempts: settings.max_login_attempts,
        password_expiry_days: settings.password_expiry_days,
      })

const data = await response.json()

if (response.ok && data.status === "SUCCESS") {
        setMessage("Security settings updated successfully!")
        setTimeout(() => setMessage(""), 3000)
      } else {
        setError(data.message || "Failed to update settings")
      }
    } catch (err) {
      setError("Failed to save security settings")
    } finally {
      setSaving(false)
    }
  }

return (
    <div className="p-4 sm:p-6 space-y-8">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <Link href="/admin/settings/website-settings">
            <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors">
              <ArrowLeft className="w-5 h-5 text-gray-700" />
            </button>
          </Link>
          <div>
            <h1 className="text-3xl font-bold text-gray-900">Security Settings</h1>
            <p className="text-gray-600 mt-2">Manage security preferences and access controls</p>
          </div>
        </div>
      </div>

{message && (
        <div className="p-3 bg-green-50 border border-green-200 rounded-lg text-green-800 text-sm">{message}</div>
      )}

{error && <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-red-800 text-sm">{error}</div>}

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card className="border border-gray-200">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Shield className="w-5 h-5 text-red-600" />
              Security Controls
            </CardTitle>
            <CardDescription>Configure security settings</CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="space-y-3">
              <div className="flex items-center">
                <input
                  type="checkbox"
                  id="ssl"
                  checked={settings.enable_ssl}
                  onChange={(e) => handleChange("enable_ssl", e.target.checked)}
                  className="w-4 h-4 text-red-600 border-gray-300 rounded focus:ring-2 focus:ring-red-500"
                />
                <label htmlFor="ssl" className="ml-3 text-sm font-medium text-gray-900">
                  Enable SSL/TLS
                </label>
              </div>

<div className="flex items-center">
                <input
                  type="checkbox"
                  id="https"
                  checked={settings.force_https}
                  onChange={(e) => handleChange("force_https", e.target.checked)}
                  className="w-4 h-4 text-red-600 border-gray-300 rounded focus:ring-2 focus:ring-red-500"
                />
                <label htmlFor="https" className="ml-3 text-sm font-medium text-gray-900">
                  Force HTTPS
                </label>
              </div>

<div className="flex items-center">
                <input
                  type="checkbox"
                  id="twoFactor"
                  checked={settings.enable_2fa}
                  onChange={(e) => handleChange("enable_2fa", e.target.checked)}
                  className="w-4 h-4 text-red-600 border-gray-300 rounded focus:ring-2 focus:ring-red-500"
                />
                <label htmlFor="twoFactor" className="ml-3 text-sm font-medium text-gray-900">
                  Enable Two-Factor Authentication
                </label>
              </div>

<div className="flex items-center">
                <input
                  type="checkbox"
                  id="auditLogs"
                  checked={settings.enable_audit_logs}
                  onChange={(e) => handleChange("enable_audit_logs", e.target.checked)}
                  className="w-4 h-4 text-red-600 border-gray-300 rounded focus:ring-2 focus:ring-red-500"
                />
                <label htmlFor="auditLogs" className="ml-3 text-sm font-medium text-gray-900">
                  Enable Audit Logs
                </label>
              </div>

<div className="flex items-center">
                <input
                  type="checkbox"
                  id="strongPassword"
                  checked={settings.require_strong_passwords}
                  onChange={(e) => handleChange("require_strong_passwords", e.target.checked)}
                  className="w-4 h-4 text-red-600 border-gray-300 rounded focus:ring-2 focus:ring-red-500"
                />
                <label htmlFor="strongPassword" className="ml-3 text-sm font-medium text-gray-900">
                  Require Strong Passwords
                </label>
              </div>
            </div>

<div className="border-t pt-4 space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-900 mb-2">Session Timeout (minutes)</label>
                <input
                  type="number"
                  value={settings.session_timeout_minutes}
                  onChange={(e) => handleChange("session_timeout_minutes", Number(e.target.value))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
                />
              </div>

<div>
                <label className="block text-sm font-medium text-gray-900 mb-2">Max Login Attempts</label>
                <input
                  type="number"
                  value={settings.max_login_attempts}
                  onChange={(e) => handleChange("max_login_attempts", Number(e.target.value))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
                />
              </div>

<div>
                <label className="block text-sm font-medium text-gray-900 mb-2">Password Expiry (days)</label>
                <input
                  type="number"
                  value={settings.password_expiry_days}
                  onChange={(e) => handleChange("password_expiry_days", Number(e.target.value))}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
                />
              </div>
            </div>
          </CardContent>
        </Card>

<Card className="border border-gray-200">
          <CardHeader>
            <CardTitle>Security Overview</CardTitle>
            <CardDescription>Current security configuration</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="p-4 bg-green-50 rounded-lg border border-green-200">
              <p className="text-sm font-medium text-green-900 mb-3">Enabled Security Features:</p>
              <div className="space-y-2 text-sm text-green-800">
                {settings.enable_ssl && <p>✓ SSL/TLS Encryption</p>}
                {settings.force_https && <p>✓ HTTPS Enforcement</p>}
                {settings.enable_2fa && <p>✓ Two-Factor Authentication</p>}
                {settings.enable_audit_logs && <p>✓ Audit Logging</p>}
                {settings.require_strong_passwords && <p>✓ Strong Password Policy</p>}
              </div>
            </div>

<div className="p-4 bg-gray-50 rounded-lg border border-gray-200">
              <p className="text-xs text-gray-600 mb-2">Policy Settings:</p>
              <div className="space-y-1 text-sm text-gray-700">
                <p>
                  <span className="font-medium">Session timeout:</span> {settings.session_timeout_minutes} min
                </p>
                <p>
                  <span className="font-medium">Max login attempts:</span> {settings.max_login_attempts}
                </p>
                <p>
                  <span className="font-medium">Password expiry:</span> {settings.password_expiry_days} days
                </p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

<div className="flex justify-end gap-3">
        <Link href="/admin/settings/website-settings">
          <button className="px-6 py-2 text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors font-medium">
            Cancel
          </button>
        </Link>
        <button
          onClick={handleSave}
          disabled={saving}
          className="px-6 py-2 bg-[#CE1126] text-white rounded-lg hover:bg-red-700 transition-colors font-medium disabled:opacity-50"
        >
          {saving ? "Saving..." : "Save Changes"}
        </button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/branches/branch-form.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { API_BASE_URL } from "@/lib/api-config"
import { validationHelpers } from "@/lib/form-validation"

interface Branch {
  id?: number
  name: string
  location: string
  members: number
  phone: string
  email: string
  established: string
  address?: string
  city?: string
  state?: string
  zipCode?: string
  manager?: string
  image?: string
}

interface BranchFormProps {
  branch?: Branch | null
  onSubmit: (data: Omit<Branch, "id">) => void
  onCancel: () => void
}

export default function BranchForm({ branch, onSubmit, onCancel }: BranchFormProps) {
  const [formData, setFormData] = useState({
    name: branch?.name || "",
    location: branch?.location || "",
    members: branch?.members || 0,
    phone: branch?.phone || "",
    email: branch?.email || "",
    established: branch?.established || "",
    address: branch?.address || "",
    city: branch?.city || "",
    state: branch?.state || "",
    zipCode: branch?.zipCode || "",
    manager: branch?.manager || "",
  })

const [logoFile, setLogoFile] = useState<File | null>(null)
  const [errors, setErrors] = useState<Record<string, string>>({})
  const [imagePreview, setImagePreview] = useState<string | null>(branch?.image || null)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [submitError, setSubmitError] = useState<string | null>(null)

const handleInputChange = (field: string, value: string | number) => {
    setFormData({ ...formData, [field]: value })
    if (errors[field]) {
      setErrors({ ...errors, [field]: "" })
    }
  }

const validateForm = () => {
    const newErrors: Record<string, string> = {}

newErrors.name = validationHelpers.required(formData.name, "Branch name")
    newErrors.location =
      validationHelpers.required(formData.location, "Location") ||
      validationHelpers.minLength(formData.location, 3, "Location")
    newErrors.phone = validationHelpers.required(formData.phone, "Phone") || validationHelpers.phone(formData.phone)
    newErrors.email = validationHelpers.required(formData.email, "Email") || validationHelpers.email(formData.email)
    newErrors.established =
      validationHelpers.required(formData.established, "Established year") ||
      validationHelpers.year(formData.established, "Established year")
    newErrors.members = validationHelpers.minValue(formData.members, 0, "Members")

// Remove empty error messages
    Object.keys(newErrors).forEach((key) => {
      if (!newErrors[key]) delete newErrors[key]
    })

setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!validateForm()) return

setIsSubmitting(true)
    setSubmitError(null)

try {
      const formDataToSend = new FormData()
      formDataToSend.append("name", formData.name)
      formDataToSend.append("location", formData.location)
      formDataToSend.append("phone", formData.phone)
      formDataToSend.append("email", formData.email)
      formDataToSend.append("established_year", formData.established)
      formDataToSend.append("member_count", formData.members.toString())
      formDataToSend.append("address", formData.address)
      formDataToSend.append("city", formData.city)
      formDataToSend.append("state", formData.state)
      formDataToSend.append("postal_code", formData.zipCode)
      formDataToSend.append("branch_manager", formData.manager)

if (logoFile) {
        formDataToSend.append("logo", logoFile)
      }

const isUpdate = branch?.id
      const apiUrl = isUpdate
        ? `${API_BASE_URL}/api/admin/branches/${branch.id}`
        : `${API_BASE_URL}/api/admin/branches/create`
      const method = isUpdate ? "PUT" : "POST"

const response = await fetch(apiUrl, {
        method,
        body: formDataToSend,
        headers: {
          Accept: "application/json",
          "X-Requested-With": "XMLHttpRequest",
        },
        credentials: "include",
      })

if (!response.ok) {
        const errorText = await response.text()
        throw new Error(`API returned status ${response.status}: ${errorText}`)
      }

const result = await response.json()

onSubmit({
        ...formData,
        image: imagePreview || "",
      })
    } catch (error) {
      const errorMessage =
        error instanceof Error
          ? error.message
          : `Failed to ${branch?.id ? "update" : "create"} branch. Please try again.`

if (errorMessage.includes("Failed to fetch")) {
        setSubmitError(
          `Cannot connect to server. Please ensure your Python backend is running at: ${API_BASE_URL}/api/admin/branches`,
        )
      } else {
        setSubmitError(errorMessage)
      }
    } finally {
      setIsSubmitting(false)
    }
  }

const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      setLogoFile(file)
      const reader = new FileReader()
      reader.onloadend = () => {
        const base64String = reader.result as string
        setImagePreview(base64String)
      }
      reader.readAsDataURL(file)
    }
  }

const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault()
    e.stopPropagation()
  }

const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault()
    e.stopPropagation()
    const file = e.dataTransfer.files?.[0]
    if (file && file.type.startsWith("image/")) {
      setLogoFile(file)
      const reader = new FileReader()
      reader.onloadend = () => {
        const base64String = reader.result as string
        setImagePreview(base64String)
      }
      reader.readAsDataURL(file)
    }
  }

return (
    <form onSubmit={handleSubmit} className="space-y-6">
      {submitError && (
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">{submitError}</div>
      )}

<div
        onDragOver={handleDragOver}
        onDrop={handleDrop}
        className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-[#CE1126] transition-colors cursor-pointer"
        onClick={() => document.getElementById("branchImage")?.click()}
      >
        {imagePreview ? (
          <div className="flex flex-col items-center gap-4">
            <img
              src={imagePreview || "/placeholder.svg"}
              alt="Branch preview"
              className="w-32 h-32 rounded-lg object-cover"
            />
            <div className="flex gap-2">
              <button
                type="button"
                onClick={(e) => {
                  e.stopPropagation()
                  document.getElementById("branchImage")?.click()
                }}
                className="text-sm text-blue-600 hover:text-blue-700 cursor-pointer"
              >
                Change Image
              </button>
              <button
                type="button"
                onClick={(e) => {
                  e.stopPropagation()
                  setImagePreview(null)
                  setLogoFile(null)
                  const input = document.getElementById("branchImage") as HTMLInputElement
                  if (input) input.value = ""
                }}
                className="text-sm text-red-600 hover:text-red-700 cursor-pointer"
              >
                Remove
              </button>
            </div>
          </div>
        ) : (
          <div className="flex flex-col items-center gap-2">
            <svg className="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
            </svg>
            <div className="text-sm font-medium text-gray-700">
              <span className="text-[#CE1126]">Click to upload</span> or drag and drop
            </div>
            <p className="text-xs text-gray-500">PNG, JPG, GIF up to 5MB</p>
          </div>
        )}
        <input
          type="file"
          accept="image/*"
          onChange={handleImageChange}
          className="hidden"
          id="branchImage"
          aria-label="Upload branch logo"
        />
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Branch Name *</label>
          <input
            type="text"
            value={formData.name}
            onChange={(e) => handleInputChange("name", e.target.value)}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            placeholder="e.g., Kuala Lumpur Main Branch"
          />
          {errors.name && <p className="text-red-500 text-sm mt-1">{errors.name}</p>}
        </div>

<div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Location *</label>
          <input
            type="text"
            value={formData.location}
            onChange={(e) => handleInputChange("location", e.target.value)}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            placeholder="e.g., Kuala Lumpur, Federal Territory"
          />
          {errors.location && <p className="text-red-500 text-sm mt-1">{errors.location}</p>}
        </div>

<div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Phone *</label>
          <input
            type="tel"
            value={formData.phone}
            onChange={(e) => handleInputChange("phone", e.target.value)}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            placeholder="e.g., +60 3-2142-3456"
          />
          {errors.phone && <p className="text-red-500 text-sm mt-1">{errors.phone}</p>}
        </div>

<div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Email *</label>
          <input
            type="email"
            value={formData.email}
            onChange={(e) => handleInputChange("email", e.target.value)}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            placeholder="e.g., kl@mcc.org.my"
          />
          {errors.email && <p className="text-red-500 text-sm mt-1">{errors.email}</p>}
        </div>

<div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Established Year *</label>
          <input
            type="text"
            value={formData.established}
            onChange={(e) => handleInputChange("established", e.target.value)}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            placeholder="e.g., 1986"
          />
          {errors.established && <p className="text-red-500 text-sm mt-1">{errors.established}</p>}
        </div>

<div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Number of Members *</label>
          <input
            type="number"
            value={formData.members}
            onChange={(e) => handleInputChange("members", Number.parseInt(e.target.value) || 0)}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            placeholder="e.g., 2450"
          />
          {errors.members && <p className="text-red-500 text-sm mt-1">{errors.members}</p>}
        </div>

<div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Branch Manager</label>
          <input
            type="text"
            value={formData.manager}
            onChange={(e) => handleInputChange("manager", e.target.value)}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            placeholder="e.g., Dato Ahmad bin Abdullah"
          />
        </div>

<div>
          <label className="block text-sm font-medium text-gray-700 mb-2">City</label>
          <input
            type="text"
            value={formData.city}
            onChange={(e) => handleInputChange("city", e.target.value)}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            placeholder="e.g., Kuala Lumpur"
          />
        </div>

<div>
          <label className="block text-sm font-medium text-gray-700 mb-2">State</label>
          <input
            type="text"
            value={formData.state}
            onChange={(e) => handleInputChange("state", e.target.value)}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            placeholder="e.g., Federal Territory"
          />
        </div>

<div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Postal Code</label>
          <input
            type="text"
            value={formData.zipCode}
            onChange={(e) => handleInputChange("zipCode", e.target.value)}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            placeholder="e.g., 50050"
          />
        </div>

<div className="md:col-span-2">
          <label className="block text-sm font-medium text-gray-700 mb-2">Address</label>
          <textarea
            value={formData.address}
            onChange={(e) => handleInputChange("address", e.target.value)}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
            placeholder="e.g., 123 Merdeka Street"
            rows={3}
          />
        </div>
      </div>

<div className="flex gap-3 pt-4 border-t border-gray-200">
        <button
          type="submit"
          disabled={isSubmitting}
          className="w-32 bg-[#CE1126] text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors font-medium text-sm disabled:opacity-50 disabled:cursor-not-allowed"
        >
          {isSubmitting ? (branch ? "Updating..." : "Creating...") : branch ? "Update Branch" : "Add Branch"}
        </button>
        <button
          type="button"
          onClick={onCancel}
          disabled={isSubmitting}
          className="w-32 bg-gray-200 text-gray-800 px-4 py-2 rounded-lg hover:bg-gray-300 transition-colors font-medium text-sm disabled:opacity-50 disabled:cursor-not-allowed"
        >
          Cancel
        </button>
      </div>
    </form>
  )
}
[V0_FILE]typescriptreact:file="components/admin/dashboard/recent-activity.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Calendar, Newspaper, Users, FileText, Activity } from "lucide-react"
import { API_ENDPOINTS, DEFAULT_HEADERS } from "@/lib/api-config"

const mockActivities = [
  {
    id: 1,
    type: "event",
    title: "Annual General Meeting Scheduled",
    description: "Scheduled for March 15, 2024",
    time: "2 hours ago",
  },
  {
    id: 2,
    type: "news",
    title: "New Press Release Published",
    description: "Statement on recent government initiative",
    time: "4 hours ago",
  },
  {
    id: 3,
    type: "member",
    title: "15 New Members Registered",
    description: "From Kuala Lumpur and Selangor branches",
    time: "6 hours ago",
  },
]

const getIconForActivity = (title: string) => {
  const titleLower = title.toLowerCase()
  if (titleLower.includes("membership")) return Users
  if (titleLower.includes("branch")) return FileText
  if (titleLower.includes("member")) return Users
  if (titleLower.includes("news")) return Newspaper
  if (titleLower.includes("event")) return Calendar
  return Activity
}

const formatTime = (isoString: string) => {
  const date = new Date(isoString)
  const now = new Date()
  const diffMs = now.getTime() - date.getTime()
  const diffMins = Math.floor(diffMs / 60000)
  const diffHours = Math.floor(diffMs / 3600000)
  const diffDays = Math.floor(diffMs / 86400000)

if (diffMins < 1) return "Just now"
  if (diffMins < 60) return `${diffMins}m ago`
  if (diffHours < 24) return `${diffHours}h ago`
  if (diffDays < 7) return `${diffDays}d ago`

return date.toLocaleDateString()
}

export function RecentActivity() {
  const [activities, setActivities] = useState(mockActivities)
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const fetchActivities = async () => {
      try {
        const response = await fetch(API_ENDPOINTS.dashboard.recentActivities, {
          method: "GET",
          headers: DEFAULT_HEADERS,
          credentials: "include",
        })

if (!response.ok) {
          setActivities(mockActivities)
          return
        }

const data = await response.json()
        if (data.status === "SUCCESS" && data.activities) {
          const formattedActivities = data.activities.map((activity: any, index: number) => ({
            id: index,
            title: activity.title,
            description: activity.description,
            time: formatTime(activity.time),
          }))
          setActivities(formattedActivities)
        } else {
          setActivities(mockActivities)
        }
      } catch (error) {
        setActivities(mockActivities)
      } finally {
        setLoading(false)
      }
    }

fetchActivities()
  }, [])

return (
    <div className="bg-white rounded-lg border border-gray-200 p-6">
      <h3 className="text-lg font-bold text-gray-900 mb-4">Recent Activity</h3>
      <div className="space-y-4">
        {activities.map((activity, index) => {
          const Icon = getIconForActivity(activity.title)
          return (
            <div key={index} className="flex items-start gap-4 pb-4 border-b border-gray-200 last:border-0 last:pb-0">
              <div className="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0">
                <Icon className="w-5 h-5 text-[#003087]" />
              </div>
              <div className="flex-1 min-w-0">
                <p className="font-medium text-gray-900">{activity.title}</p>
                <p className="text-sm text-gray-600">{activity.description}</p>
                <p className="text-xs text-gray-500 mt-1">{activity.time}</p>
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/members/members-table.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Edit, Trash2, Plus, Search, ChevronLeft, ChevronRight, Download } from "lucide-react"
import { apiCall } from "@/lib/api-utils"
import { API_ENDPOINTS, DEFAULT_HEADERS } from "@/lib/api-config"

interface Member {
  id: number
  name: string
  email: string
  branch: string
  status: string
}

export function MembersTable() {
  const [searchTerm, setSearchTerm] = useState("")
  const [pageSize, setPageSize] = useState(10)
  const [currentPage, setCurrentPage] = useState(1)
  const [branchFilter, setBranchFilter] = useState<string>("All")
  const [members, setMembers] = useState<Member[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [downloadLoading, setDownloadLoading] = useState(false)

const mockMembers = [
    { id: 1, name: "Ahmad Bin Abdullah", email: "ahmad@mcc.my", branch: "Kuala Lumpur", status: "Active" },
    { id: 2, name: "Siti Nurhaliza", email: "siti@mcc.my", branch: "Selangor", status: "Active" },
    { id: 3, name: "Mohammad Zain", email: "zain@mcc.my", branch: "Penang", status: "Inactive" },
    { id: 4, name: "Fatimah Zahra", email: "fatimah@mcc.my", branch: "Johor", status: "Active" },
    { id: 5, name: "Abdullah Rashid", email: "rashid@mcc.my", branch: "Sabah", status: "Active" },
  ]

useEffect(() => {
    const fetchMembers = async () => {
      try {
        setIsLoading(true)
        const response = await apiCall(API_ENDPOINTS.memberships.members.list)
        if (response.status === "SUCCESS" && response.data) {
          setMembers(Array.isArray(response.data) ? response.data : mockMembers)
        } else {
          setMembers(mockMembers)
        }
      } catch (err) {
        setMembers(mockMembers)
      } finally {
        setIsLoading(false)
      }
    }

fetchMembers()
  }, [])

const branches = ["All", ...new Set(members.map((m) => m.branch))]

const filteredMembers = members.filter((member) => {
    const matchesSearch =
      member.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      member.email.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesBranch = branchFilter === "All" || member.branch === branchFilter
    return matchesSearch && matchesBranch
  })

const totalPages = Math.ceil(filteredMembers.length / pageSize)
  const startIndex = (currentPage - 1) * pageSize
  const paginatedMembers = filteredMembers.slice(startIndex, startIndex + pageSize)

const handleDownloadCard = async (memberId: number) => {
    try {
      const response = await fetch(API_ENDPOINTS.memberships.members.downloadCard(memberId), {
        method: "GET",
        headers: DEFAULT_HEADERS,
        credentials: "include",
      })

if (response.ok) {
        const blob = await response.blob()
        const url = window.URL.createObjectURL(blob)
        const a = document.createElement("a")
        a.href = url
        a.download = `membership-card-${memberId}.pdf`
        document.body.appendChild(a)
        a.click()
        window.URL.revokeObjectURL(url)
        document.body.removeChild(a)
      }
    } catch (err) {
      // Error downloading card
    }
  }

return (
    <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
      {/* Header */}
      <div className="p-6 border-b border-gray-200 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div className="flex-1 relative">
          <Search className="absolute left-3 top-3 w-5 h-5 text-gray-400" />
          <input
            type="text"
            placeholder="Search members..."
            value={searchTerm}
            onChange={(e) => {
              setSearchTerm(e.target.value)
              setCurrentPage(1)
            }}
            className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
          />
        </div>
        <select
          value={branchFilter}
          onChange={(e) => {
            setBranchFilter(e.target.value)
            setCurrentPage(1)
          }}
          className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
        >
          {branches.map((branch) => (
            <option key={branch} value={branch}>
              {branch === "All" ? "All Branches" : branch}
            </option>
          ))}
        </select>
        <button className="flex items-center gap-2 px-4 py-2 bg-[#CE1126] text-white rounded-lg hover:bg-red-700 transition-colors whitespace-nowrap">
          <Plus className="w-5 h-5" />
          Add Member
        </button>
      </div>

{/* Table */}
      <div className="overflow-x-auto">
        <table className="w-full">
          <thead className="bg-gray-50 border-b border-gray-200">
            <tr>
              <th className="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Name</th>
              <th className="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Email</th>
              <th className="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Branch</th>
              <th className="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Status</th>
              <th className="px-6 py-3 text-right text-xs font-bold text-gray-700 uppercase tracking-wider">Actions</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200">
            {paginatedMembers.map((member) => (
              <tr key={member.id} className="hover:bg-gray-50 transition-colors">
                <td className="px-6 py-4 text-sm font-medium text-gray-900">{member.name}</td>
                <td className="px-6 py-4 text-sm text-gray-600">{member.email}</td>
                <td className="px-6 py-4 text-sm text-gray-600">{member.branch}</td>
                <td className="px-6 py-4">
                  <span
                    className={`px-3 py-1 rounded-full text-xs font-medium ${
                      member.status === "Active" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
                    }`}
                  >
                    {member.status}
                  </span>
                </td>
                <td className="px-6 py-4 text-right">
                  <button className="p-2 text-gray-600 hover:text-[#003087] hover:bg-blue-50 rounded-lg transition-colors inline-block mr-2">
                    <Edit className="w-4 h-4" />
                  </button>
                  <button
                    onClick={() => handleDownloadCard(member.id)}
                    className="p-2 text-gray-600 hover:text-green-600 hover:bg-green-50 rounded-lg transition-colors inline-block mr-2"
                    title="Download Membership Card"
                  >
                    <Download className="w-4 h-4" />
                  </button>
                  <button className="p-2 text-gray-600 hover:text-[#CE1126] hover:bg-red-50 rounded-lg transition-colors inline-block">
                    <Trash2 className="w-4 h-4" />
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

<div className="px-6 py-4 border-t border-gray-200 flex flex-col sm:flex-row items-center justify-between gap-4">
        <div className="text-sm text-gray-600">
          Showing {filteredMembers.length === 0 ? 0 : startIndex + 1} to{" "}
          {Math.min(startIndex + pageSize, filteredMembers.length)} of {filteredMembers.length} members
        </div>
        <div className="flex items-center gap-4">
          <select
            value={pageSize}
            onChange={(e) => {
              setPageSize(Number(e.target.value))
              setCurrentPage(1)
            }}
            className="px-3 py-1 border border-gray-300 rounded text-sm"
          >
            <option value={10}>10 per page</option>
            <option value={25}>25 per page</option>
            <option value={50}>50 per page</option>
          </select>
          <div className="flex gap-2">
            <button
              onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
              disabled={currentPage === 1}
              className="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
            >
              <ChevronLeft className="w-4 h-4" />
            </button>
            <div className="flex items-center gap-1">
              {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => i + 1).map((page) => (
                <button
                  key={page}
                  onClick={() => setCurrentPage(page)}
                  className={`w-8 h-8 rounded-lg text-sm font-medium transition-colors ${
                    currentPage === page ? "bg-[#CE1126] text-white" : "border border-gray-300 hover:bg-gray-50"
                  }`}
                >
                  {page}
                </button>
              ))}
            </div>
            <button
              onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
              disabled={currentPage === totalPages}
              className="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
            >
              <ChevronRight className="w-4 h-4" />
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/profile/page.tsx" isMerged="true"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import { Save, AlertCircle, Upload } from "lucide-react"
import Link from "next/link"
import { API_ENDPOINTS } from "@/lib/api-config"

export default function ProfilePage() {
  const [formData, setFormData] = useState({
    name: "Admin User",
    email: "admin@mcc.org",
    phone: "+60123456789",
    role: "Administrator",
    bio: "",
    profileImage: "/placeholder.svg?height=120&width=120",
  })

const [errors, setErrors] = useState<Record<string, string>>({})
  const [loading, setLoading] = useState(false)
  const [fetchLoading, setFetchLoading] = useState(true)
  const [successMessage, setSuccessMessage] = useState("")
  const [errorMessage, setErrorMessage] = useState("")
  const [profileImageFile, setProfileImageFile] = useState<File | null>(null)
  const [imagePreview, setImagePreview] = useState<string | null>(null)

useEffect(() => {
    fetchProfileData()
  }, [])

const fetchProfileData = async () => {
    try {
      setFetchLoading(true)
      // Simulate fetching profile data
      const mockData = {
        name: "Admin User",
        email: "admin@mcc.org",
        phone: "+60123456789",
        role: "Administrator",
        bio: "System Administrator",
        profileImage: "/placeholder.svg?height=120&width=120",
      }
      setFormData(mockData)
    } catch (error) {
      setErrorMessage("Failed to load profile data")
    } finally {
      setFetchLoading(false)
    }
  }

const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      setProfileImageFile(file)
      const reader = new FileReader()
      reader.onloadend = () => {
        setImagePreview(reader.result as string)
      }
      reader.readAsDataURL(file)
    }
  }

const validateForm = () => {
    const newErrors: Record<string, string> = {}

if (!formData.name.trim()) {
      newErrors.name = "Name is required"
    }
    if (!formData.email.trim()) {
      newErrors.email = "Email is required"
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
      newErrors.email = "Invalid email format"
    }

setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

if (!validateForm()) {
      return
    }

try {
      setLoading(true)
      setErrorMessage("")
      setSuccessMessage("")

const formDataToSend = new FormData()
      formDataToSend.append("name", formData.name)
      formDataToSend.append("email", formData.email)
      formDataToSend.append("phone", formData.phone)
      formDataToSend.append("bio", formData.bio)

if (profileImageFile) {
        formDataToSend.append("profile_image", profileImageFile)
      }

const response = await fetch("/api/admin/profile", {
        method: "POST",
        headers: {
          Accept: "application/json",
          "X-Requested-With": "XMLHttpRequest",
        },
        credentials: "include",
        body: formDataToSend,
      })

if (!response.ok) {
        throw new Error("Failed to save profile")
      }

const data = await response.json()

if (data.status === "SUCCESS") {
        setSuccessMessage("Profile updated successfully!")
        setProfileImageFile(null)
        setImagePreview(null)
        await fetchProfileData()
      } else {
        setErrorMessage(data.message || "Failed to update profile")
      }
    } catch (error) {
      setErrorMessage("Failed to update profile. Please try again.")
    } finally {
      setLoading(false)
    }
  }

if (fetchLoading) {
    return (
      <div className="p-4 sm:p-6 space-y-6">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold text-gray-900">My Profile</h1>
            <p className="text-gray-600 mt-2">Update your personal information and profile picture</p>
          </div>
          <Link href="/admin">
            <button className="px-4 py-2 text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium">
              Back
            </button>
          </Link>
        </div>
        <div className="text-center py-8">
          <p className="text-gray-600">Loading profile data...</p>
        </div>
      </div>
    )
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">My Profile</h1>
          <p className="text-gray-600 mt-2">Update your personal information and profile picture</p>
        </div>
        <Link href="/admin">
          <button className="px-4 py-2 text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium">
            Back
          </button>
        </Link>
      </div>

<form onSubmit={handleSubmit} className="bg-white rounded-lg border border-gray-200 p-6 space-y-6 max-w-2xl">
        {/* Profile Image Section */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-4">Profile Picture</label>
          <div className="flex items-center gap-6">
            <div className="flex-shrink-0">
              <img
                src={imagePreview || formData.profileImage || "/placeholder.svg?height=120&width=120"}
                alt="Profile"
                className="w-24 h-24 rounded-lg object-cover border-2 border-gray-200"
              />
            </div>
            <div className="flex-1">
              <label className="flex items-center justify-center w-full px-4 py-2 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:border-[#003087] transition-colors">
                <div className="flex items-center gap-2">
                  <Upload className="w-5 h-5 text-gray-400" />
                  <span className="text-sm font-medium text-gray-600">Upload Image</span>
                </div>
                <input type="file" accept="image/*" onChange={handleImageChange} className="hidden" />
              </label>
              {profileImageFile && (
                <p className="text-sm text-green-600 mt-2">Selected: {profileImageFile.name}</p>
              )}
            </div>
          </div>
        </div>

{/* Name Field */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Full Name *</label>
          <input
            type="text"
            name="name"
            value={formData.name}
            onChange={handleChange}
            required
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
          />
          {errors.name && <p className="text-red-500 text-sm mt-1">{errors.name}</p>}
        </div>

{/* Email Field */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Email Address *</label>
          <input
            type="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
            required
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
          />
          {errors.email && <p className="text-red-500 text-sm mt-1">{errors.email}</p>}
        </div>

{/* Phone Field */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Phone Number</label>
          <input
            type="tel"
            name="phone"
            value={formData.phone}
            onChange={handleChange}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
          />
        </div>

{/* Role Field (Read-only) */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Role</label>
          <input
            type="text"
            value={formData.role}
            disabled
            className="w-full px-4 py-2 border border-gray-300 rounded-lg bg-gray-50 text-gray-600 cursor-not-allowed"
          />
        </div>

{/* Bio Field */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Bio</label>
          <textarea
            name="bio"
            value={formData.bio}
            onChange={handleChange}
            rows={4}
            placeholder="Tell us about yourself..."
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
          />
        </div>

{/* Submit Button */}
        <button
          type="submit"
          disabled={loading}
          className="flex items-center gap-2 px-6 py-2 bg-[#CE1126] text-white rounded-lg hover:bg-red-700 transition-colors font-medium text-sm disabled:opacity-50 disabled:cursor-not-allowed"
        >
          <Save className="w-5 h-5" />
          {loading ? "Saving..." : "Save Profile"}
        </button>
      </form>
    </div>
  )
}
[V0_FILE]typescript:file="app/api/admin/profile/route.ts" isMerged="true"
import { NextRequest, NextResponse } from "next/server"

export async function POST(request: NextRequest) {
  try {
    const formData = await request.formData()
    
    const name = formData.get("name") as string
    const email = formData.get("email") as string
    const phone = formData.get("phone") as string
    const bio = formData.get("bio") as string
    const profileImage = formData.get("profile_image") as File | null

// Validate required fields
    if (!name || !email) {
      return NextResponse.json(
        { status: "ERROR", message: "Name and email are required" },
        { status: 400 }
      )
    }

// Validate email format
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    if (!emailRegex.test(email)) {
      return NextResponse.json(
        { status: "ERROR", message: "Invalid email format" },
        { status: 400 }
      )
    }

// Handle file upload if present
    let profileImagePath = null
    if (profileImage) {
      // You can implement actual file upload logic here
      // For now, we'll store the file information
      const buffer = await profileImage.arrayBuffer()
      console.log(`Profile image uploaded: ${profileImage.name}, size: ${buffer.byteLength} bytes`)
      
      // In a real application, you would:
      // 1. Upload to cloud storage (S3, Azure Blob, etc.)
      // 2. Or save to server storage
      // 3. Return the path/URL
      profileImagePath = `/uploads/profile/${Date.now()}-${profileImage.name}`
    }

// Simulate saving to database
    const updatedProfile = {
      name,
      email,
      phone,
      bio,
      profileImage: profileImagePath,
      updatedAt: new Date().toISOString(),
    }

console.log("Profile updated:", updatedProfile)

return NextResponse.json(
      {
        status: "SUCCESS",
        message: "Profile updated successfully",
        data: updatedProfile,
      },
      { status: 200 }
    )
  } catch (error) {
    console.error("Error updating profile:", error)
    return NextResponse.json(
      { status: "ERROR", message: "Internal server error" },
      { status: 500 }
    )
  }
}

export async function GET(request: NextRequest) {
  try {
    // Simulate fetching user profile from database
    const userProfile = {
      name: "Admin User",
      email: "admin@mcc.org",
      phone: "+60123456789",
      role: "Administrator",
      bio: "System Administrator",
      profileImage: "/placeholder.svg?height=120&width=120",
      createdAt: new Date(Date.now() - 86400000 * 30).toISOString(), // 30 days ago
    }

return NextResponse.json(
      {
        status: "SUCCESS",
        data: userProfile,
      },
      { status: 200 }
    )
  } catch (error) {
    console.error("Error fetching profile:", error)
    return NextResponse.json(
      { status: "ERROR", message: "Internal server error" },
      { status: 500 }
    )
  }
}
[V0_FILE]typescript:file="app/api/admin/logo/route.ts" isMerged="true"
import { NextRequest, NextResponse } from 'next/server'
import fs from 'fs'
import path from 'path'

export async function POST(request: NextRequest) {
  try {
    const formData = await request.formData()
    const file = formData.get('logo') as File | null
    const portalName = formData.get('portalName') as string
    const portalSubtitle = formData.get('portalSubtitle') as string

// Validate that at least something is being updated
    if (!file && !portalName && !portalSubtitle) {
      return NextResponse.json(
        { status: 'ERROR', message: 'No updates provided' },
        { status: 400 }
      )
    }

let logoPath = '/mcc-logo.jfif'

// Handle logo upload if file is provided
    if (file) {
      // Validate file type
      if (!file.type.startsWith('image/')) {
        return NextResponse.json(
          { status: 'ERROR', message: 'File must be an image' },
          { status: 400 }
        )
      }

// Validate file size (5MB max)
      if (file.size > 5 * 1024 * 1024) {
        return NextResponse.json(
          { status: 'ERROR', message: 'File size must be less than 5MB' },
          { status: 400 }
        )
      }

// Convert file to buffer
      const bytes = await file.arrayBuffer()
      const buffer = Buffer.from(bytes)

// Determine file extension
      const ext = path.extname(file.name) || '.png'
      const fileName = `mcc-logo${ext}`
      const filePath = path.join(process.cwd(), 'public', fileName)

// Save file
      fs.writeFileSync(filePath, buffer)
      logoPath = `/${fileName}`

console.log('[v0] Logo uploaded successfully:', fileName)
    }

// Store portal settings in a simple JSON file (or you can use a database)
    const settingsPath = path.join(process.cwd(), 'public', 'portal-settings.json')
    const settings = {
      portalName: portalName || 'MCC Admin',
      portalSubtitle: portalSubtitle || 'Portal',
      logoPath: logoPath,
      updatedAt: new Date().toISOString(),
    }

fs.writeFileSync(settingsPath, JSON.stringify(settings, null, 2))
    console.log('[v0] Portal settings saved')

return NextResponse.json(
      {
        status: 'SUCCESS',
        message: 'Portal settings updated successfully',
        settings,
      },
      { status: 200 }
    )
  } catch (error) {
    console.error('[v0] Portal settings update error:', error)
    return NextResponse.json(
      { status: 'ERROR', message: 'Failed to update settings' },
      { status: 500 }
    )
  }
}

export async function GET(request: NextRequest) {
  try {
    const settingsPath = path.join(process.cwd(), 'public', 'portal-settings.json')

let settings = {
      portalName: 'MCC Admin',
      portalSubtitle: 'Portal',
      logoPath: '/mcc-logo.jfif',
    }

// Try to read existing settings
    if (fs.existsSync(settingsPath)) {
      const fileContent = fs.readFileSync(settingsPath, 'utf-8')
      settings = JSON.parse(fileContent)
    }

return NextResponse.json(
      {
        status: 'SUCCESS',
        settings,
      },
      { status: 200 }
    )
  } catch (error) {
    console.error('[v0] Get settings error:', error)
    return NextResponse.json(
      { status: 'ERROR', message: 'Failed to get settings' },
      { status: 500 }
    )
  }
}
[V0_FILE]typescriptreact:file="components/admin/sidebar.tsx" isMerged="true"
"use client"

import React from "react"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { useState, useRef } from "react"
import { Menu, X, ChevronRight, User, LogOut, Upload, AlertCircle } from "lucide-react"
import { ADMIN_MENU_ITEMS } from "@/lib/admin-menu"

export function AdminSidebar() {
  const pathname = usePathname()
  const [isOpen, setIsOpen] = useState(false)
  const [showLogoModal, setShowLogoModal] = useState(false)
  const [logoFile, setLogoFile] = useState<File | null>(null)
  const [logoPreview, setLogoPreview] = useState<string | null>(null)
  const [uploadingLogo, setUploadingLogo] = useState(false)
  const [logoMessage, setLogoMessage] = useState("")
  const fileInputRef = useRef<HTMLInputElement>(null)
  const [currentLogo, setCurrentLogo] = useState("/mcc-logo.jfif")
  const [portalName, setPortalName] = useState("MCC Admin")
  const [portalSubtitle, setPortalSubtitle] = useState("Portal")
  const [editPortalName, setEditPortalName] = useState("MCC Admin")
  const [editPortalSubtitle, setEditPortalSubtitle] = useState("Portal")

const isActive = (href: string) => {
    if (href === "/admin") {
      return pathname === "/admin"
    }
    return pathname.startsWith(href)
  }

const handleLogoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      if (file.size > 5 * 1024 * 1024) {
        setLogoMessage("File size must be less than 5MB")
        return
      }
      setLogoFile(file)
      const reader = new FileReader()
      reader.onloadend = () => {
        setLogoPreview(reader.result as string)
      }
      reader.readAsDataURL(file)
      setLogoMessage("")
    }
  }

const handleUploadLogo = async () => {
    if (!logoFile && portalName === editPortalName && portalSubtitle === editPortalSubtitle) return

try {
      setUploadingLogo(true)
      setLogoMessage("")

const formData = new FormData()
      if (logoFile) {
        formData.append("logo", logoFile)
      }
      formData.append("portalName", editPortalName)
      formData.append("portalSubtitle", editPortalSubtitle)

const response = await fetch("/api/admin/logo", {
        method: "POST",
        body: formData,
      })

const data = await response.json()

if (data.status === "SUCCESS" || response.ok) {
        if (logoFile) {
          setCurrentLogo(logoPreview || currentLogo)
        }
        setPortalName(editPortalName)
        setPortalSubtitle(editPortalSubtitle)
        setLogoFile(null)
        setLogoPreview(null)
        setShowLogoModal(false)
        setLogoMessage("Portal settings updated successfully!")
        setTimeout(() => setLogoMessage(""), 3000)
      } else {
        setLogoMessage(data.message || "Failed to update settings")
      }
    } catch (error) {
      setLogoMessage("Failed to update settings. Please try again.")
    } finally {
      setUploadingLogo(false)
    }
  }

return (
    <>
      {/* Mobile toggle button - Menu icon on left */}
      <button
        onClick={() => setIsOpen(!isOpen)}
        className={`fixed top-4 left-4 z-50 md:hidden p-2 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors ${
          isOpen ? "hidden" : "block"
        }`}
        aria-label="Toggle sidebar"
      >
        <Menu className="w-6 h-6 text-gray-900" />
      </button>

{/* Sidebar backdrop for mobile */}
      {isOpen && (
        <div
          className="fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden"
          onClick={() => setIsOpen(false)}
          role="presentation"
        />
      )}

{/* Sidebar */}
      <aside
        className={`fixed left-0 top-0 h-screen w-64 bg-gradient-to-b from-[#003087] to-[#001f5c] text-white shadow-lg transform transition-transform duration-300 ease-in-out z-40 overflow-y-auto md:relative md:translate-x-0 ${
          isOpen ? "translate-x-0" : "-translate-x-full"
        }`}
      >
        {/* Logo section with close button on right */}
        <div className="p-6 border-b border-blue-400 border-opacity-30 sticky top-0 bg-gradient-to-b from-[#003087] to-[#001f5c] flex items-center justify-between group">
          <button
            onClick={() => setShowLogoModal(true)}
            className="flex items-center gap-3 flex-1 rounded-lg hover:bg-blue-600 hover:bg-opacity-40 p-1 transition-colors"
            title="Click to update logo"
          >
            <div className="relative">
              <img src={currentLogo || "/placeholder.svg"} alt="MCC Logo" className="w-10 h-10 flex-shrink-0 rounded-lg object-contain" />
              <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 rounded-lg flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all">
                <Upload className="w-4 h-4 text-white" />
              </div>
            </div>
            <div className="min-w-0">
              <h1 className="text-lg font-bold truncate">{portalName}</h1>
              <p className="text-xs text-blue-200 truncate">{portalSubtitle}</p>
            </div>
          </button>
          {/* Close button on right side - Mobile only */}
          <button
            onClick={() => setIsOpen(false)}
            className="md:hidden p-1 hover:bg-blue-600 rounded-lg transition-colors flex-shrink-0"
            aria-label="Close sidebar"
          >
            <X className="w-6 h-6 text-white" />
          </button>
        </div>

{/* Navigation menu */}
        <nav className="py-4">
          <ul className="space-y-1 px-3">
            {ADMIN_MENU_ITEMS.map((item) => {
              const Icon = item.icon
              const active = isActive(item.href)

return (
                <li key={item.href}>
                  <Link
                    href={item.href}
                    onClick={() => setIsOpen(false)}
                    title={item.description}
                    className={`flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-all group ${
                      active
                        ? "bg-[#CE1126] text-white shadow-lg"
                        : "text-blue-100 hover:bg-blue-600 hover:bg-opacity-50"
                    }`}
                  >
                    <Icon className="w-5 h-5 flex-shrink-0" />
                    <span className="flex-1 truncate">{item.label}</span>
                    {active && <ChevronRight className="w-4 h-4 flex-shrink-0" />}
                  </Link>
                </li>
              )
            })}
          </ul>
        </nav>

{/* Sidebar footer with user profile */}
        <div className="p-4 border-t border-blue-400 border-opacity-30 space-y-3 mt-auto">
          {/* User Profile Section */}
          <div className="bg-blue-700 bg-opacity-50 rounded-lg p-3 space-y-2">
            <div className="flex items-center gap-2">
              <img 
                src="/placeholder.svg?height=40&width=40" 
                alt="Profile" 
                className="w-9 h-9 rounded-full object-cover border border-blue-400"
              />
              <div className="min-w-0 flex-1">
                <p className="text-sm font-semibold text-white truncate">Admin User</p>
                <p className="text-xs text-blue-200 truncate">Administrator</p>
              </div>
            </div>
            
            {/* Profile Actions */}
            <div className="space-y-1 pt-2">
              <Link
                href="/admin/profile"
                onClick={() => setIsOpen(false)}
                className="flex items-center gap-2 px-3 py-2 rounded-lg text-blue-100 hover:bg-blue-600 hover:text-white transition-colors text-sm"
              >
                <User className="w-4 h-4 flex-shrink-0" />
                <span>My Profile</span>
              </Link>
              <button
                className="w-full flex items-center gap-2 px-3 py-2 rounded-lg text-blue-100 hover:bg-red-600 hover:text-white transition-colors text-sm"
                title="Logout"
              >
                <LogOut className="w-4 h-4 flex-shrink-0" />
                <span>Logout</span>
              </button>
            </div>
          </div>

<p className="text-xs text-blue-200 px-2 truncate">Malaysian Ceylonese Congress</p>
          <div className="h-1 bg-gradient-to-r from-[#CE1126] to-[#003087] rounded-full"></div>
        </div>
      </aside>

{/* Logo Upload Modal - Centered Box */}
      {showLogoModal && (
        <>
          {/* Backdrop overlay */}
          <div
            className="fixed inset-0 bg-black bg-opacity-40 z-40 flex items-center justify-center p-4"
            onClick={() => {
              setShowLogoModal(false)
              setLogoFile(null)
              setLogoPreview(null)
              setLogoMessage("")
            }}
          />
          {/* Modal Box */}
          <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
            <div className="bg-white rounded-lg shadow-2xl max-w-md w-full max-h-[90vh] overflow-y-auto">
                <div className="p-6 space-y-4 flex flex-col">
                <div className="flex items-center justify-between flex-shrink-0">
                  <h2 className="text-xl font-bold text-gray-900">Portal Settings</h2>
                  <button
                    onClick={() => {
                      setShowLogoModal(false)
                      setLogoFile(null)
                      setLogoPreview(null)
                      setLogoMessage("")
                      setEditPortalName(portalName)
                      setEditPortalSubtitle(portalSubtitle)
                    }}
                    className="p-1 hover:bg-gray-100 rounded transition-colors"
                  >
                    <X className="w-5 h-5 text-gray-600" />
                  </button>
                </div>

{logoMessage && (
                  <div
                    className={`p-3 rounded-lg flex items-start gap-2 ${
                      logoMessage.includes("successfully")
                        ? "bg-green-50 border border-green-200"
                        : "bg-red-50 border border-red-200"
                    }`}
                  >
                    <AlertCircle
                      className={`w-5 h-5 flex-shrink-0 mt-0.5 ${
                        logoMessage.includes("successfully") ? "text-green-600" : "text-red-600"
                      }`}
                    />
                    <p
                      className={`text-sm ${
                        logoMessage.includes("successfully") ? "text-green-800" : "text-red-800"
                      }`}
                    >
                      {logoMessage}
                    </p>
                  </div>
                )}

<div className="space-y-4 flex-1 overflow-y-auto">
                  {/* Portal Name Section */}
                  <div className="space-y-3 pb-4 border-b">
                    <h3 className="text-sm font-semibold text-gray-900">Portal Name</h3>
                    <div>
                      <label className="block text-xs font-medium text-gray-600 mb-1">Main Title</label>
                      <input
                        type="text"
                        value={editPortalName}
                        onChange={(e) => setEditPortalName(e.target.value)}
                        className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#003087] focus:border-transparent"
                        placeholder="e.g., MCC Admin"
                      />
                    </div>
                    <div>
                      <label className="block text-xs font-medium text-gray-600 mb-1">Subtitle</label>
                      <input
                        type="text"
                        value={editPortalSubtitle}
                        onChange={(e) => setEditPortalSubtitle(e.target.value)}
                        className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#003087] focus:border-transparent"
                        placeholder="e.g., Portal"
                      />
                    </div>
                  </div>

{/* Logo Preview */}
                  <div className="flex justify-center pt-2">
                    <img
                      src={logoPreview || currentLogo}
                      alt="Logo preview"
                      className="w-24 h-24 object-contain rounded-lg border-2 border-gray-200 p-2"
                    />
                  </div>

{/* File Input */}
                  <label className="flex flex-col items-center justify-center w-full p-4 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:border-[#003087] hover:bg-blue-50 transition-colors">
                    <div className="flex flex-col items-center justify-center pt-2 pb-4">
                      <Upload className="w-6 h-6 text-gray-400 mb-2" />
                      <p className="text-sm font-medium text-gray-600">Click to upload logo</p>
                      <p className="text-xs text-gray-500">PNG, JPG (Max 5MB)</p>
                    </div>
                    <input
                      ref={fileInputRef}
                      type="file"
                      accept="image/*"
                      onChange={handleLogoChange}
                      className="hidden"
                    />
                  </label>

{logoFile && (
                    <p className="text-sm text-green-600 text-center">Selected: {logoFile.name}</p>
                  )}
                </div>

{/* Action Buttons */}
                <div className="flex gap-3 pt-4 border-t flex-shrink-0">
                  <button
                    onClick={() => {
                      setShowLogoModal(false)
                      setLogoFile(null)
                      setLogoPreview(null)
                      setLogoMessage("")
                    }}
                    className="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors font-medium"
                  >
                    Cancel
                  </button>
                  <button
                    onClick={handleUploadLogo}
                    disabled={!logoFile && portalName === editPortalName && portalSubtitle === editPortalSubtitle || uploadingLogo}
                    className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-[#003087] text-white rounded-lg hover:bg-[#002060] transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    <Upload className="w-4 h-4" />
                    {uploadingLogo ? "Saving..." : "Save Settings"}
                </button>
              </div>
              </div>
            </div>
          </div>
        </>
      )}
    </>
  )
}
[V0_FILE]typescriptreact:file="components/admin/documents/documents-list.tsx"
"use client"

import { FileText, Download, Trash2, Plus, Upload, Search, ChevronLeft, ChevronRight } from "lucide-react"
import { useState, useEffect } from "react"
import Link from "next/link"
import { API_ENDPOINTS, DEFAULT_HEADERS } from "@/lib/api-config"

interface Document {
  id: number
  title: string
  category: string
  description: string
  file: string
  file_size: number
  display_order: number
  status: string
  created_at: string
}

const mockDocuments: Document[] = [
  {
    id: 1,
    title: "Annual Reports",
    category: "Reports",
    description: "Party annual performance reports",
    file: "/media/documents/annual-report.pdf",
    file_size: 2.4,
    display_order: 3,
    status: "ACTIVE",
    created_at: "2024-01-15T00:00:00Z",
  },
  {
    id: 2,
    title: "Party Constitution",
    category: "Constitution",
    description: "Official constitution document",
    file: "/media/documents/constitution.pdf",
    file_size: 1.8,
    display_order: 1,
    status: "ACTIVE",
    created_at: "2024-01-10T00:00:00Z",
  },
  {
    id: 3,
    title: "Policy Documents",
    category: "Policies",
    description: "Campaign related documents",
    file: "/media/documents/policies.pdf",
    file_size: 0.956,
    display_order: 2,
    status: "ACTIVE",
    created_at: "2024-01-05T00:00:00Z",
  },
]

export function DocumentsList() {
  const [documents, setDocuments] = useState<Document[]>(mockDocuments)
  const [searchTerm, setSearchTerm] = useState("")
  const [currentPage, setCurrentPage] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState("")

useEffect(() => {
    const fetchDocuments = async () => {
      try {
        setLoading(true)
        const response = await fetch(API_ENDPOINTS.documents.list, {
          method: "GET",
          headers: DEFAULT_HEADERS,
          credentials: "include",
        })

if (!response.ok) {
          throw new Error("Failed to fetch documents")
        }

const result = await response.json()

const documentsList = Array.isArray(result) ? result : result.data || result.documents || []
        setDocuments(documentsList.length > 0 ? documentsList : mockDocuments)
        setError("")
      } catch (err) {
        setError("Unable to connect to server. Using sample data.")
        setDocuments(mockDocuments)
      } finally {
        setLoading(false)
      }
    }

fetchDocuments()
  }, [])

const filteredDocuments = documents.filter(
    (doc) =>
      doc.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      doc.category.toLowerCase().includes(searchTerm.toLowerCase()),
  )

const sortedDocuments = [...filteredDocuments].sort((a, b) => a.display_order - b.display_order)

const totalPages = Math.ceil(sortedDocuments.length / pageSize)
  const startIndex = (currentPage - 1) * pageSize
  const paginatedDocuments = sortedDocuments.slice(startIndex, startIndex + pageSize)

const handleDelete = async (id: number) => {
    if (!confirm("Are you sure you want to delete this document?")) return

try {
      const response = await fetch(`${API_ENDPOINTS.documents.list}/${id}`, {
        method: "DELETE",
        headers: {
          "Content-Type": "application/json",
          "X-Requested-With": "XMLHttpRequest",
        },
        credentials: "include",
      })

if (response.ok) {
        setDocuments(documents.filter((d) => d.id !== id))
      }
    } catch (err) {
      // Error deleting document
    }
  }

return (
    <div className="space-y-6">
      {/* Upload section */}
      <div className="bg-white border border-dashed border-[#003087] rounded-lg p-8">
        <div className="flex flex-col items-center justify-center gap-4">
          <Upload className="w-12 h-12 text-[#003087]" />
          <div className="text-center">
            <h3 className="text-lg font-bold text-gray-900">Upload Document</h3>
            <p className="text-gray-600 mt-2">Add new documents and resources</p>
          </div>
          <Link href="/admin/public-page/documents/add">
            <button className="flex items-center gap-2 px-6 py-2 bg-[#CE1126] text-white rounded-lg hover:bg-red-700 transition-colors mt-4">
              <Plus className="w-5 h-5" />
              Add Document
            </button>
          </Link>
        </div>
      </div>

<div className="flex-1 relative">
        <Search className="absolute left-3 top-3 w-5 h-5 text-gray-400" />
        <input
          type="text"
          placeholder="Search documents..."
          value={searchTerm}
          onChange={(e) => {
            setSearchTerm(e.target.value)
            setCurrentPage(1)
          }}
          className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
        />
      </div>

{/* Documents table */}
      <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead className="bg-gray-50 border-b border-gray-200">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Title</th>
                <th className="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
                  Category
                </th>
                <th className="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Size</th>
                <th className="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Status</th>
                <th className="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Order</th>
                <th className="px-6 py-3 text-right text-xs font-bold text-gray-700 uppercase tracking-wider">
                  Actions
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200">
              {paginatedDocuments.map((doc) => (
                <tr key={doc.id} className="hover:bg-gray-50 transition-colors">
                  <td className="px-6 py-4">
                    <div className="flex items-center gap-3">
                      <FileText className="w-5 h-5 text-red-600" />
                      <span className="font-medium text-gray-900">{doc.title}</span>
                    </div>
                  </td>
                  <td className="px-6 py-4 text-sm text-gray-600">{doc.category}</td>
                  <td className="px-6 py-4 text-sm text-gray-600">{doc.file_size} MB</td>
                  <td className="px-6 py-4 text-sm">
                    <span
                      className={`inline-block px-2 py-1 rounded-full text-xs font-medium ${
                        doc.status === "ACTIVE" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
                      }`}
                    >
                      {doc.status}
                    </span>
                  </td>
                  <td className="px-6 py-4 text-sm text-gray-600">{doc.display_order}</td>
                  <td className="px-6 py-4 text-right">
                    <a
                      href={doc.file}
                      download
                      className="p-2 text-gray-600 hover:text-[#003087] hover:bg-blue-50 rounded-lg transition-colors inline-block mr-2"
                    >
                      <Download className="w-4 h-4" />
                    </a>
                    <button
                      onClick={() => handleDelete(doc.id)}
                      className="p-2 text-gray-600 hover:text-[#CE1126] hover:bg-red-50 rounded-lg transition-colors inline-block"
                    >
                      <Trash2 className="w-4 h-4" />
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

<div className="px-6 py-4 border-t border-gray-200 flex flex-col sm:flex-row items-center justify-between gap-4">
          <div className="text-sm text-gray-600">
            Showing {sortedDocuments.length === 0 ? 0 : startIndex + 1} to{" "}
            {Math.min(startIndex + pageSize, sortedDocuments.length)} of {sortedDocuments.length} documents
          </div>
          <div className="flex items-center gap-4">
            <select
              value={pageSize}
              onChange={(e) => {
                setPageSize(Number(e.target.value))
                setCurrentPage(1)
              }}
              className="px-3 py-1 border border-gray-300 rounded text-sm"
            >
              <option value={10}>10 per page</option>
              <option value={25}>25 per page</option>
              <option value={50}>50 per page</option>
            </select>
            <div className="flex gap-2">
              <button
                onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
                disabled={currentPage === 1}
                className="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                <ChevronLeft className="w-4 h-4" />
              </button>
              <div className="flex items-center gap-1">
                {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => i + 1).map((page) => (
                  <button
                    key={page}
                    onClick={() => setCurrentPage(page)}
                    className={`w-8 h-8 rounded-lg text-sm font-medium transition-colors ${
                      currentPage === page ? "bg-[#CE1126] text-white" : "border border-gray-300 hover:bg-gray-50"
                    }`}
                  >
                    {page}
                  </button>
                ))}
              </div>
              <button
                onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
                disabled={currentPage === totalPages}
                className="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                <ChevronRight className="w-4 h-4" />
              </button>
            </div>
          </div>
        </div>
      </div>

{error && (
        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
          <p className="text-sm text-yellow-800">{error}</p>
        </div>
      )}
    </div>
  )
}10f:Td65d8,[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
import { redirect } from "next/navigation"

export default function Home() {
  redirect("/admin")
}
[V0_FILE]typescriptreact:file="app/admin/page.tsx" isMerged="true"
import { DashboardStats } from "@/components/admin/dashboard/stats"
import { DashboardCharts } from "@/components/admin/dashboard/charts"
import { RecentActivity } from "@/components/admin/dashboard/recent-activity"

export default function AdminDashboard() {
  return (
    <div className="p-4 sm:p-6 space-y-6">
      <div>
        <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
        <p className="text-gray-600 mt-2">Welcome back to MCC Admin Panel</p>
      </div>

<DashboardStats />
      <DashboardCharts />
      <RecentActivity />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/members/page.tsx" isMerged="true"
import { MembersTable } from "@/components/admin/members/members-table"

export default function MembersPage() {
  return (
    <div className="p-4 sm:p-6">
      <div className="mb-6">
        <h1 className="text-3xl font-bold text-gray-900">Members Management</h1>
        <p className="text-gray-600 mt-2">Manage party members and their information</p>
      </div>
      <MembersTable />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/news/page.tsx" isMerged="true"
import { NewsList } from "@/components/admin/news/news-list"

export default function NewsPage() {
  return (
    <div className="p-4 sm:p-6">
      <div className="mb-6">
        <h1 className="text-3xl font-bold text-gray-900">News & Press Releases</h1>
        <p className="text-gray-600 mt-2">Manage news articles and press releases</p>
      </div>
      <NewsList />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/events/page.tsx" isMerged="true"
import { EventsList } from "@/components/admin/events/events-list"

export default function EventsPage() {
  return (
    <div className="p-4 sm:p-6">
      <div className="mb-6">
        <h1 className="text-3xl font-bold text-gray-900">Events Management</h1>
        <p className="text-gray-600 mt-2">Create and manage MCC events</p>
      </div>
      <EventsList />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/branches/page.tsx" isMerged="true"
import { BranchesList } from "@/components/admin/branches/branches-list"

export default function BranchesPage() {
  return (
    <div className="p-4 sm:p-6">
      <div className="mb-6">
        <h1 className="text-3xl font-bold text-gray-900">Branches Management</h1>
        <p className="text-gray-600 mt-2">Manage branch locations and information</p>
      </div>
      <BranchesList />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/leadership/page.tsx" isMerged="true"
import Link from "next/link"
import { ArrowLeft } from "lucide-react"
import { LeadershipList } from "@/components/admin/leadership/leadership-list"

export default function LeadershipPage() {
  return (
    <div className="p-4 sm:p-6">
      <div className="flex items-center gap-3 mb-6">
        <Link href="/admin/public-page">
          <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors">
            <ArrowLeft className="w-5 h-5 text-gray-600" />
          </button>
        </Link>
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Leadership Management</h1>
          <p className="text-gray-600 mt-2">Manage party leaders and positions</p>
        </div>
      </div>
      <LeadershipList />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/gallery/page.tsx" isMerged="true"
import { GalleryManagement } from "@/components/admin/gallery/gallery-management"

export default function GalleryPage() {
  return (
    <div className="p-4 sm:p-6">
      <div className="mb-6">
        <h1 className="text-3xl font-bold text-gray-900">Gallery Management</h1>
        <p className="text-gray-600 mt-2">Manage photos and media files</p>
      </div>
      <GalleryManagement />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/documents/page.tsx" isMerged="true"
import { DocumentsList } from "@/components/admin/documents/documents-list"

export default function DocumentsPage() {
  return (
    <div className="p-4 sm:p-6">
      <div className="mb-6">
        <h1 className="text-3xl font-bold text-gray-900">Documents Management</h1>
        <p className="text-gray-600 mt-2">Upload and manage documents</p>
      </div>
      <DocumentsList />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/users/page.tsx" isMerged="true"
import { UsersList } from "@/components/admin/users/users-list"

export default function UsersPage() {
  return (
    <div className="p-4 sm:p-6">
      <div className="mb-6">
        <h1 className="text-3xl font-bold text-gray-900">Users & Permissions</h1>
        <p className="text-gray-600 mt-2">Manage admin users and their permissions</p>
      </div>
      <UsersList />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/admin.css" isMerged="true"
/* MCC Admin Panel Styles */
:root {
  --mcc-red: #ce1126;
  --mcc-blue: #003087;
  --mcc-light-gray: #f3f4f6;
  --mcc-dark-gray: #1f2937;
  --mcc-border: #e5e7eb;
}

/* Smooth transitions */
* {
  transition-property: background-color, border-color, color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--mcc-light-gray);
}

::-webkit-scrollbar-thumb {
  background: var(--mcc-blue);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--mcc-red);
}
[V0_FILE]typescriptreact:file="components/admin/news/news-list.tsx" isQuickEdit="true" isMerged="true"
"use client"
import { Edit, Trash2, Plus, Eye, Search, ChevronLeft, ChevronRight } from "lucide-react"
import { useState } from "react"

const mockNews = [
  { id: 1, title: "MCC Launches New Community Initiative", date: "2024-01-15", status: "Published", views: 234 },
  { id: 2, title: "Annual Conference Announcement", date: "2024-01-10", status: "Published", views: 567 },
  { id: 3, title: "Youth Program Expansion", date: "2024-01-05", status: "Draft", views: 0 },
  { id: 4, title: "Partnership with International Bodies", date: "2023-12-28", status: "Published", views: 892 },
  { id: 5, title: "New Membership Guidelines Released", date: "2023-12-20", status: "Published", views: 450 },
  { id: 6, title: "Cultural Event Planning Begins", date: "2023-12-15", status: "Draft", views: 0 },
  { id: 7, title: "Financial Report Q4 2023", date: "2023-12-10", status: "Published", views: 320 },
  { id: 8, title: "Leadership Workshop Scheduled", date: "2023-12-05", status: "Published", views: 210 },
]

export function NewsList() {
  const [searchTerm, setSearchTerm] = useState("")
  const [statusFilter, setStatusFilter] = useState<"All" | "Published" | "Draft">("All")
  const [currentPage, setCurrentPage] = useState(1)
  const [pageSize, setPageSize] = useState(10)

const filteredNews = mockNews.filter((item) => {
    const matchesSearch = item.title.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesStatus = statusFilter === "All" || item.status === statusFilter
    return matchesSearch && matchesStatus
  })

const totalPages = Math.ceil(filteredNews.length / pageSize)
  const startIndex = (currentPage - 1) * pageSize
  const paginatedNews = filteredNews.slice(startIndex, startIndex + pageSize)

return (
    <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
      <div className="p-6 border-b border-gray-200 flex flex-col sm:flex-row gap-4 items-start sm:items-center sm:justify-between">
        <div className="flex-1 relative">
          <Search className="absolute left-3 top-3 w-5 h-5 text-gray-400" />
          <input
            type="text"
            placeholder="Search articles..."
            value={searchTerm}
            onChange={(e) => {
              setSearchTerm(e.target.value)
              setCurrentPage(1)
            }}
            className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
          />
        </div>
        <select
          value={statusFilter}
          onChange={(e) => {
            setStatusFilter(e.target.value as "All" | "Published" | "Draft")
            setCurrentPage(1)
          }}
          className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
        >
          <option value="All">All Status</option>
          <option value="Published">Published</option>
          <option value="Draft">Draft</option>
        </select>
        <button className="flex items-center gap-2 px-4 py-2 bg-[#CE1126] text-white rounded-lg hover:bg-red-700 transition-colors whitespace-nowrap">
          <Plus className="w-5 h-5" />
          Add Article
        </button>
      </div>

<div className="divide-y divide-gray-200">
        {paginatedNews.map((item) => (
          <div
            key={item.id}
            className="p-6 hover:bg-gray-50 transition-colors flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4"
          >
            <div className="flex-1 min-w-0">
              <h4 className="font-bold text-gray-900">{item.title}</h4>
              <div className="flex flex-wrap gap-4 mt-2 text-sm text-gray-600">
                <span>{item.date}</span>
                <span
                  className={`px-2 py-1 rounded-full text-xs font-medium ${
                    item.status === "Published" ? "bg-green-100 text-green-800" : "bg-yellow-100 text-yellow-800"
                  }`}
                >
                  {item.status}
                </span>
                <span className="flex items-center gap-1">
                  <Eye className="w-4 h-4" />
                  {item.views} views
                </span>
              </div>
            </div>
            <div className="flex gap-2">
              <button className="p-2 text-gray-600 hover:text-[#003087] hover:bg-blue-50 rounded-lg transition-colors">
                <Edit className="w-4 h-4" />
              </button>
              <button className="p-2 text-gray-600 hover:text-[#CE1126] hover:bg-red-50 rounded-lg transition-colors">
                <Trash2 className="w-4 h-4" />
              </button>
            </div>
          </div>
        ))}
      </div>

<div className="px-6 py-4 border-t border-gray-200 flex flex-col sm:flex-row items-center justify-between gap-4">
        <div className="text-sm text-gray-600">
          Showing {filteredNews.length === 0 ? 0 : startIndex + 1} to{" "}
          {Math.min(startIndex + pageSize, filteredNews.length)} of {filteredNews.length} articles
        </div>
        <div className="flex items-center gap-4">
          <select
            value={pageSize}
            onChange={(e) => {
              setPageSize(Number(e.target.value))
              setCurrentPage(1)
            }}
            className="px-3 py-1 border border-gray-300 rounded text-sm"
          >
            <option value={10}>10 per page</option>
            <option value={25}>25 per page</option>
            <option value={50}>50 per page</option>
          </select>
          <div className="flex gap-2">
            <button
              onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
              disabled={currentPage === 1}
              className="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
            >
              <ChevronLeft className="w-4 h-4" />
            </button>
            <div className="flex items-center gap-1">
              {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => i + 1).map((page) => (
                <button
                  key={page}
                  onClick={() => setCurrentPage(page)}
                  className={`w-8 h-8 rounded-lg text-sm font-medium transition-colors ${
                    currentPage === page ? "bg-[#CE1126] text-white" : "border border-gray-300 hover:bg-gray-50"
                  }`}
                >
                  {page}
                </button>
              ))}
            </div>
            <button
              onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
              disabled={currentPage === totalPages}
              className="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
            >
              <ChevronRight className="w-4 h-4" />
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/users/users-list.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { Edit, Trash2, Plus, Shield, Search, ChevronLeft, ChevronRight } from "lucide-react"
import { useState } from "react"

const mockUsers = [
  { id: 1, name: "Admin User 1", email: "admin1@mcc.my", role: "Super Admin", status: "Active" },
  { id: 2, name: "Admin User 2", email: "admin2@mcc.my", role: "Editor", status: "Active" },
  { id: 3, name: "Admin User 3", email: "admin3@mcc.my", role: "Moderator", status: "Inactive" },
  { id: 4, name: "Admin User 4", email: "admin4@mcc.my", role: "Viewer", status: "Active" },
  { id: 5, name: "Admin User 5", email: "admin5@mcc.my", role: "Editor", status: "Active" },
  { id: 6, name: "Admin User 6", email: "admin6@mcc.my", role: "Moderator", status: "Inactive" },
  { id: 7, name: "Admin User 7", email: "admin7@mcc.my", role: "Super Admin", status: "Active" },
  { id: 8, name: "Admin User 8", email: "admin8@mcc.my", role: "Viewer", status: "Active" },
]

export function UsersList() {
  const [searchTerm, setSearchTerm] = useState("")
  const [statusFilter, setStatusFilter] = useState<"All" | "Active" | "Inactive">("All")
  const [currentPage, setCurrentPage] = useState(1)
  const [itemsPerPage, setItemsPerPage] = useState(10)

const filteredUsers = mockUsers.filter((user) => {
    const matchesSearch =
      user.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      user.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
      user.role.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesStatus = statusFilter === "All" || user.status === statusFilter
    return matchesSearch && matchesStatus
  })

const totalPages = Math.ceil(filteredUsers.length / itemsPerPage)
  const startIndex = (currentPage - 1) * itemsPerPage
  const paginatedUsers = filteredUsers.slice(startIndex, startIndex + itemsPerPage)

return (
    <div className="space-y-6">
      <div className="flex flex-col sm:flex-row gap-4">
        <div className="flex-1 relative">
          <Search className="absolute left-3 top-3 w-5 h-5 text-gray-400" />
          <input
            type="text"
            placeholder="Search by name, email, or role..."
            value={searchTerm}
            onChange={(e) => {
              setSearchTerm(e.target.value)
              setCurrentPage(1)
            }}
            className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
          />
        </div>
        <select
          value={statusFilter}
          onChange={(e) => {
            setStatusFilter(e.target.value as "All" | "Active" | "Inactive")
            setCurrentPage(1)
          }}
          className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#003087]"
        >
          <option value="All">All Status</option>
          <option value="Active">Active</option>
          <option value="Inactive">Inactive</option>
        </select>
        <button className="flex items-center gap-2 px-4 py-2 bg-[#CE1126] text-white rounded-lg hover:bg-red-700 transition-colors whitespace-nowrap">
          <Plus className="w-5 h-5" />
          Add User
        </button>
      </div>

<div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead className="bg-gray-50 border-b border-gray-200">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Name</th>
                <th className="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Email</th>
                <th className="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Role</th>
                <th className="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Status</th>
                <th className="px-6 py-3 text-right text-xs font-bold text-gray-700 uppercase tracking-wider">
                  Actions
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200">
              {paginatedUsers.map((user) => (
                <tr key={user.id} className="hover:bg-gray-50 transition-colors">
                  <td className="px-6 py-4 font-medium text-gray-900">{user.name}</td>
                  <td className="px-6 py-4 text-sm text-gray-600">{user.email}</td>
                  <td className="px-6 py-4">
                    <div className="flex items-center gap-2">
                      <Shield className="w-4 h-4 text-[#003087]" />
                      <span className="text-sm font-medium text-gray-900">{user.role}</span>
                    </div>
                  </td>
                  <td className="px-6 py-4">
                    <span
                      className={`px-3 py-1 rounded-full text-xs font-medium ${
                        user.status === "Active" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
                      }`}
                    >
                      {user.status}
                    </span>
                  </td>
                  <td className="px-6 py-4 text-right">
                    <button className="p-2 text-gray-600 hover:text-[#003087] hover:bg-blue-50 rounded-lg transition-colors inline-block mr-2">
                      <Edit className="w-4 h-4" />
                    </button>
                    <button className="p-2 text-gray-600 hover:text-[#CE1126] hover:bg-red-50 rounded-lg transition-colors inline-block">
                      <Trash2 className="w-4 h-4" />
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

<div className="px-6 py-4 border-t border-gray-200 flex flex-col sm:flex-row items-center justify-between gap-4">
          <div className="text-sm text-gray-600">
            Showing {filteredUsers.length === 0 ? 0 : startIndex + 1} to{" "}
            {Math.min(startIndex + itemsPerPage, filteredUsers.length)} of {filteredUsers.length} users
          </div>
          <div className="flex items-center gap-4">
            <select
              value={itemsPerPage}
              onChange={(e) => {
                setItemsPerPage(Number(e.target.value))
                setCurrentPage(1)
              }}
              className="px-3 py-1 border border-gray-300 rounded text-sm"
            >
              <option value={10}>10 per page</option>
              <option value={25}>25 per page</option>
              <option value={50}>50 per page</option>
            </select>
            <div className="flex gap-2">
              <button
                onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
                disabled={currentPage === 1}
                className="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                <ChevronLeft className="w-4 h-4" />
              </button>
              <div className="flex items-center gap-1">
                {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
                  <button
                    key={page}
                    onClick={() => setCurrentPage(page)}
                    className={`w-8 h-8 rounded-lg text-sm font-medium transition-colors ${
                      currentPage === page ? "bg-[#CE1126] text-white" : "border border-gray-300 hover:bg-gray-50"
                    }`}
                  >
                    {page}
                  </button>
                ))}
              </div>
              <button
                onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
                disabled={currentPage === totalPages}
                className="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                <ChevronRight className="w-4 h-4" />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Geist, Geist_Mono } from "next/font/google"
import { Analytics } from "@vercel/analytics/next"
import "./globals.css"

const _geist = Geist({ subsets: ["latin"] })
const _geistMono = Geist_Mono({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "MCC Admin Panel - Malaysian Ceylonese Congress",
  description: "Admin dashboard for Malaysian Ceylonese Congress website management",
  generator: "v0.app",
  icons: {
    icon: [
      {
        url: "/icon-light-32x32.png",
        media: "(prefers-color-scheme: light)",
      },
      {
        url: "/icon-dark-32x32.png",
        media: "(prefers-color-scheme: dark)",
      },
      {
        url: "/icon.svg",
        type: "image/svg+xml",
      },
    ],
    apple: "/apple-icon.png",
  },
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className={`font-sans antialiased`}>
        {children}
        <Analytics />
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/globals.css" isQuickEdit="true" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --font-sans: "Geist", "Geist Fallback";
  --font-mono: "Geist Mono", "Geist Mono Fallback";
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* MCC Admin Panel Custom Colors */
:root {
  --mcc-red: #ce1126;
  --mcc-blue: #003087;
}
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint ."
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "16.0.10",
    "next-themes": "^0.4.6",
    "react": "19.2.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.2.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^1.1.2",
    "zod": "3.25.76"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]typescriptreact:file="app/admin/memberships/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/media-resources/page.tsx" isMerged="true"
"use client"

import Link from "next/link"
import { Card, CardContent } from "@/components/ui/card"
import { ImageIcon, Newspaper } from "lucide-react"

export default function MediaResourcesPage() {
  const sections = [
    {
      id: 1,
      title: "Photo/Video Gallery",
      description: "Manage photos and videos for the MCC website",
      icon: ImageIcon,
      href: "/admin/media-resources/photo-gallery",
      color: "bg-blue-100 text-blue-700",
    },
    {
      id: 2,
      title: "News",
      description: "Create and manage news articles and press releases",
      icon: Newspaper,
      href: "/admin/media-resources/news",
      color: "bg-green-100 text-green-700",
    },
  ]

return (
    <div className="p-4 sm:p-6 space-y-6">
      <div>
        <h1 className="text-3xl font-bold text-gray-900">Media Resources</h1>
        <p className="text-gray-600 mt-2">Manage media content for your organization</p>
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {sections.map((section) => {
          const Icon = section.icon
          return (
            <Link key={section.id} href={section.href}>
              <Card className="hover:shadow-lg transition-shadow cursor-pointer h-full">
                <CardContent className="pt-6">
                  <div className="flex items-start gap-4">
                    <div className={`p-3 rounded-lg ${section.color}`}>
                      <Icon className="w-8 h-8" />
                    </div>
                    <div className="flex-1">
                      <h2 className="text-xl font-semibold text-gray-900">{section.title}</h2>
                      <p className="text-gray-600 mt-2">{section.description}</p>
                      <div className="mt-4">
                        <span className="inline-block px-3 py-1 bg-gray-100 text-gray-700 text-sm rounded-full">
                          Click to manage →
                        </span>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </Link>
          )
        })}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/election-corner/page.tsx" isMerged="true"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Plus, Vote, Calendar, Users, TrendingUp } from "lucide-react"

export default function ElectionCornerPage() {
  const elections = [
    {
      id: 1,
      title: "National General Election 2024",
      type: "General Election",
      startDate: "2024-12-15",
      endDate: "2024-12-20",
      status: "completed",
      candidates: 28,
      voters: 7840,
      turnout: "94.2%",
    },
    {
      id: 2,
      title: "Branch Committee Elections",
      type: "Committee Elections",
      startDate: "2024-11-10",
      endDate: "2024-11-15",
      status: "completed",
      candidates: 42,
      voters: 6200,
      turnout: "88.5%",
    },
    {
      id: 3,
      title: "Youth Wing Leadership 2025",
      type: "Youth Election",
      startDate: "2025-01-20",
      endDate: "2025-01-25",
      status: "upcoming",
      candidates: 15,
      voters: 2100,
      turnout: "0%",
    },
  ]

const getStatusColor = (status: string) => {
    switch (status) {
      case "completed":
        return "bg-green-100 text-green-700"
      case "upcoming":
        return "bg-blue-100 text-blue-700"
      case "ongoing":
        return "bg-amber-100 text-amber-700"
      default:
        return "bg-gray-100 text-gray-700"
    }
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Election Corner</h1>
          <p className="text-gray-600 mt-2">Manage elections and voting records</p>
        </div>
        <button className="flex items-center gap-2 bg-[#CE1126] text-white px-6 py-3 rounded-lg hover:bg-red-700 transition-colors font-medium">
          <Plus className="w-5 h-5" />
          New Election
        </button>
      </div>

<div className="grid gap-6">
        {elections.map((election) => (
          <Card key={election.id} className="hover:shadow-lg transition-shadow">
            <CardHeader className="pb-4">
              <div className="flex items-start justify-between flex-wrap gap-4">
                <div className="flex-1">
                  <div className="flex items-center gap-2">
                    <CardTitle className="flex items-center gap-2">
                      <Vote className="w-5 h-5 text-[#CE1126]" />
                      {election.title}
                    </CardTitle>
                    <span
                      className={`px-3 py-1 rounded-full text-xs font-semibold capitalize ${getStatusColor(election.status)}`}
                    >
                      {election.status}
                    </span>
                  </div>
                  <p className="text-sm text-gray-600 mt-2">{election.type}</p>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
                <div>
                  <p className="text-sm text-gray-600 flex items-center gap-1">
                    <Calendar className="w-4 h-4" /> Duration
                  </p>
                  <p className="text-sm font-medium text-gray-900 mt-1">
                    {election.startDate} to {election.endDate}
                  </p>
                </div>
                <div>
                  <p className="text-sm text-gray-600 flex items-center gap-1">
                    <Users className="w-4 h-4" /> Candidates
                  </p>
                  <p className="text-lg font-semibold text-gray-900">{election.candidates}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-600 flex items-center gap-1">
                    <Vote className="w-4 h-4" /> Voters
                  </p>
                  <p className="text-lg font-semibold text-gray-900">{election.voters}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-600 flex items-center gap-1">
                    <TrendingUp className="w-4 h-4" /> Turnout
                  </p>
                  <p className="text-lg font-semibold text-[#CE1126]">{election.turnout}</p>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/layout.tsx" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { AdminSidebar } from "@/components/admin/sidebar"
import { AdminHeader } from "@/components/admin/header"
import "@/app/admin/admin.css"

export const metadata: Metadata = {
  title: "MCC Admin Panel",
  description: "Malaysian Ceylonese Congress Admin Dashboard",
}

export default function AdminLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="flex h-screen bg-gray-50">
      <AdminSidebar />
      <div className="flex-1 flex flex-col overflow-hidden md:ml-0">
        <AdminHeader />
        <main className="flex-1 overflow-y-auto overflow-x-hidden pt-2 md:pt-0">{children}</main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/header.tsx" isMerged="true"
"use client"

import { Bell, User, LogOut, Settings } from "lucide-react"
import { useState } from "react"

export function AdminHeader() {
  const [isOpen, setIsOpen] = useState(false)

return (
    <header className="bg-white border-b border-gray-200 shadow-sm sticky top-0 z-30">
      <div className="flex items-center justify-between h-16 px-4 sm:px-6 md:px-8 gap-4">
        {/* Left side - space for mobile menu button */}
        <div className="w-10 md:hidden"></div>

{/* Right side - User menu and notifications */}
        <div className="flex items-center gap-2 sm:gap-4 ml-auto">
          {/* Notifications */}
          <button
            className="relative p-2 text-gray-600 hover:text-[#003087] hover:bg-gray-100 rounded-lg transition-colors flex-shrink-0"
            aria-label="Notifications"
          >
            <Bell className="w-5 h-5" />
            <span className="absolute top-1 right-1 w-2 h-2 bg-[#CE1126] rounded-full"></span>
          </button>

{/* User menu */}
          <div className="relative">
            <button
              onClick={() => setIsOpen(!isOpen)}
              className="flex items-center gap-2 p-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors flex-shrink-0"
              aria-label="User menu"
            >
              <div className="w-8 h-8 bg-gradient-to-br from-[#CE1126] to-[#003087] rounded-full flex items-center justify-center text-white text-sm font-bold flex-shrink-0">
                A
              </div>
              <span className="hidden sm:inline text-sm font-medium whitespace-nowrap">Admin</span>
            </button>

{/* Dropdown menu */}
            {isOpen && (
              <div className="absolute right-0 mt-2 w-48 bg-white border border-gray-200 rounded-lg shadow-lg py-2 z-50">
                <button className="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2">
                  <User className="w-4 h-4" />
                  Profile
                </button>
                <button className="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2">
                  <Settings className="w-4 h-4" />
                  Settings
                </button>
                <hr className="my-2" />
                <button className="w-full px-4 py-2 text-left text-sm text-red-600 hover:bg-red-50 flex items-center gap-2">
                  <LogOut className="w-4 h-4" />
                  Logout
                </button>
              </div>
            )}
          </div>
        </div>
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="components/admin/branches/branch-view-modal.tsx" isMerged="true"
"use client"

import { X, MapPin, Users, Phone, Mail, Calendar, User, MapPinIcon } from "lucide-react"

interface BranchViewModalProps {
  branch: Branch
  onClose: () => void
}

export default function BranchViewModal({ branch, onClose }: BranchViewModalProps) {
  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 z-40 flex items-center justify-center p-4">
      <div className="bg-white rounded-lg shadow-xl w-full max-w-2xl">
        <div className="bg-[#CE1126] text-white px-6 py-4 flex items-center justify-between rounded-t-lg">
          <h2 className="text-2xl font-bold">Branch Details</h2>
          <button onClick={onClose} className="p-2 hover:bg-red-700 rounded-lg transition-colors">
            <X className="w-6 h-6" />
          </button>
        </div>

<div className="p-6 space-y-6">
          <div className="border-b pb-6">
            <div className="flex items-center gap-3 mb-2">
              <MapPin className="w-6 h-6 text-[#CE1126]" />
              <h3 className="text-2xl font-bold text-gray-900">{branch.name}</h3>
            </div>
            <p className="text-gray-600 ml-9">{branch.location}</p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="flex gap-4">
              <div className="flex-shrink-0">
                <div className="flex items-center justify-center h-12 w-12 rounded-lg bg-blue-100">
                  <Users className="w-6 h-6 text-blue-600" />
                </div>
              </div>
              <div>
                <p className="text-sm font-medium text-gray-500">Total Members</p>
                <p className="text-2xl font-bold text-gray-900">{branch.members.toLocaleString()}</p>
              </div>
            </div>

<div className="flex gap-4">
              <div className="flex-shrink-0">
                <div className="flex items-center justify-center h-12 w-12 rounded-lg bg-green-100">
                  <Calendar className="w-6 h-6 text-green-600" />
                </div>
              </div>
              <div>
                <p className="text-sm font-medium text-gray-500">Established</p>
                <p className="text-2xl font-bold text-gray-900">{branch.established}</p>
              </div>
            </div>

<div className="flex gap-4">
              <div className="flex-shrink-0">
                <div className="flex items-center justify-center h-12 w-12 rounded-lg bg-purple-100">
                  <Phone className="w-6 h-6 text-purple-600" />
                </div>
              </div>
              <div>
                <p className="text-sm font-medium text-gray-500">Phone</p>
                <p className="text-lg font-mono text-gray-900">{branch.phone}</p>
              </div>
            </div>

<div className="flex gap-4">
              <div className="flex-shrink-0">
                <div className="flex items-center justify-center h-12 w-12 rounded-lg bg-yellow-100">
                  <Mail className="w-6 h-6 text-yellow-600" />
                </div>
              </div>
              <div>
                <p className="text-sm font-medium text-gray-500">Email</p>
                <p className="text-lg font-mono text-gray-900">{branch.email}</p>
              </div>
            </div>

{branch.manager && (
              <div className="flex gap-4">
                <div className="flex-shrink-0">
                  <div className="flex items-center justify-center h-12 w-12 rounded-lg bg-red-100">
                    <User className="w-6 h-6 text-red-600" />
                  </div>
                </div>
                <div>
                  <p className="text-sm font-medium text-gray-500">Branch Manager</p>
                  <p className="text-lg font-semibold text-gray-900">{branch.manager}</p>
                </div>
              </div>
            )}

{branch.city && (
              <div className="flex gap-4">
                <div className="flex-shrink-0">
                  <div className="flex items-center justify-center h-12 w-12 rounded-lg bg-indigo-100">
                    <MapPinIcon className="w-6 h-6 text-indigo-600" />
                  </div>
                </div>
                <div>
                  <p className="text-sm font-medium text-gray-500">City</p>
                  <p className="text-lg font-semibold text-gray-900">{branch.city}</p>
                </div>
              </div>
            )}
          </div>

{branch.address && (
            <div className="border-t pt-6">
              <p className="text-sm font-medium text-gray-500 mb-2">Full Address</p>
              <p className="text-gray-900 leading-relaxed">
                {branch.address}
                {branch.state && `, ${branch.state}`}
                {branch.zipCode && ` ${branch.zipCode}`}
              </p>
            </div>
          )}

<div className="flex gap-3 pt-4 border-t">
            <button
              onClick={onClose}
              className="flex-1 bg-gray-200 text-gray-800 px-6 py-3 rounded-lg hover:bg-gray-300 transition-colors font-medium"
            >
              Close
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/branch/add/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"
import BranchForm from "@/components/admin/branches/branch-form"

export default function AddBranchPage() {
  const router = useRouter()
  const [branches, setBranches] = useState<Branch[]>([])

const handleSubmit = (data: Omit<Branch, "id">) => {
    const newBranch: Branch = {
      ...data,
      id: Math.max(...branches.map((b) => b.id || 0), 0) + 1,
    }
    setBranches([...branches, newBranch])
    router.push("/admin/branch")
  }

return (
    <div className="p-4 sm:p-6">
      <div className="mb-6">
        <Link
          href="/admin/branch"
          className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 font-medium mb-6"
        >
          <ArrowLeft className="w-5 h-5" />
          Back to Branches
        </Link>
        <h1 className="text-3xl font-bold text-gray-900">Add New Branch</h1>
        <p className="text-gray-600 mt-2">Fill in the details to create a new branch</p>
      </div>

<div className="bg-white rounded-lg shadow-lg p-6">
        <BranchForm onSubmit={handleSubmit} onCancel={() => router.push("/admin/branch")} />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/branch/edit/[id]/page.tsx" isMerged="true"
"use client"
import { useRouter } from "next/navigation"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"
import BranchForm from "@/components/admin/branches/branch-form"

export default function EditBranchPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const branchId = Number.parseInt(params.id)

// Mock branch data - replace with API call
  const mockBranch: Branch = {
    id: branchId,
    name: "Kuala Lumpur Main Branch",
    location: "Kuala Lumpur, Federal Territory",
    members: 2450,
    phone: "+60 3-2142-3456",
    email: "kl@mcc.org.my",
    established: "1986",
    address: "123 Merdeka Street",
    city: "Kuala Lumpur",
    state: "Federal Territory",
    zipCode: "50050",
    manager: "Dato Ahmad bin Abdullah",
  }

const handleSubmit = (data: Omit<Branch, "id">) => {
    // Handle update logic here
    router.push("/admin/branch")
  }

return (
    <div className="p-4 sm:p-6">
      <div className="mb-6">
        <Link
          href="/admin/branch"
          className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 font-medium mb-6"
        >
          <ArrowLeft className="w-5 h-5" />
          Back to Branches
        </Link>
        <h1 className="text-3xl font-bold text-gray-900">Edit Branch</h1>
        <p className="text-gray-600 mt-2">Update branch information</p>
      </div>

<div className="bg-white rounded-lg shadow-lg p-6">
        <BranchForm branch={mockBranch} onSubmit={handleSubmit} onCancel={() => router.push("/admin/branch")} />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/committees/edit/[id]/page.tsx" isMerged="true"
"use client"

import { useRouter } from "next/navigation"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"
import CommitteeForm from "@/components/admin/committees/committee-form"

export default function EditCommitteePage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const committeeId = Number.parseInt(params.id)

// Mock committee data - replace with API call
  const mockCommittee: Committee = {
    id: committeeId,
    name: "Executive Committee",
    description: "Oversees overall administration and strategic planning",
    members: 15,
    chair: "Datuk S. Arokiasamy",
    meetings: "Monthly",
    foundedYear: "1985",
    vice_chair: "Mr. R. Sivakumar",
    secretary: "Ms. Anjali Sharma",
    budget: "RM 500,000",
  }

const handleSubmit = (data: Omit<Committee, "id">) => {
    // Handle update logic here
    router.push("/admin/committees")
  }

return (
    <div className="p-4 sm:p-6">
      <div className="mb-6">
        <Link
          href="/admin/committees"
          className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 font-medium mb-6"
        >
          <ArrowLeft className="w-5 h-5" />
          Back to Committees
        </Link>
        <h1 className="text-3xl font-bold text-gray-900">Edit Committee</h1>
        <p className="text-gray-600 mt-2">Update committee information</p>
      </div>

<div className="bg-white rounded-lg shadow-lg p-6">
        <CommitteeForm
          committee={mockCommittee}
          onSubmit={handleSubmit}
          onCancel={() => router.push("/admin/committees")}
        />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/memberships/masterfile/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/memberships/masterfile/page.tsx" isQuickEdit="true" isMerged="true"
import MembershipMasterfileClient from "./members-client"

export default async function MembershipMasterfilePage() {
  const members = [
    {
      id: 1,
      name: "Ahmad Abdullah",
      email: "ahmad@mcc.org.my",
      phone: "+60 12-345-6789",
      membershipType: "Ordinary Member",
      branch: "Kuala Lumpur",
      joinDate: "2023-05-15",
      status: "active",
    },
    {
      id: 2,
      name: "Siti Azizah",
      email: "siti@mcc.org.my",
      phone: "+60 11-987-6543",
      membershipType: "Life Member",
      branch: "Penang",
      joinDate: "2022-03-10",
      status: "active",
    },
    {
      id: 3,
      name: "Raj Kumar",
      email: "raj@mcc.org.my",
      phone: "+60 10-234-5678",
      membershipType: "Student Member",
      branch: "Kuala Lumpur",
      joinDate: "2024-09-20",
      status: "active",
    },
  ]

return <MembershipMasterfileClient initialMembers={members} />
}
[V0_FILE]jpg:file="public/official-engagement-malaysia.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/official-engagement-malaysia-eQMYBjgV3kW1TifDwgwzFdZRCv8Z22.jpg" isMerged="true"
[V0_FILE]png:file="public/community-service.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/community-service-1HKasF2O17Fqs4xTT8kdBVGTlbn9Oe.png" isMerged="true"
[V0_FILE]jpg:file="public/checking-news.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/checking-news-desGyyXJknU7fyTWroqHeNCMkNUMz4.jpg" isMerged="true"
[V0_FILE]jpg:file="public/risks-malaysia.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/risks-malaysia-4Udo17lMndH7x2RmO9VIBfazmrTjKH.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/admin/public-page/page.tsx" isMerged="true"
"use client"
import Link from "next/link"
import { Card, CardContent } from "@/components/ui/card"
import { Users, FileText } from "lucide-react"

export default function PublicPagePage() {
  const sections = [
    {
      id: "team",
      title: "Leadership",
      description: "Manage team members and leadership",
      icon: Users,
      href: "/admin/public-page/team",
      count: 2,
    },
    {
      id: "documents",
      title: "Documents & Literature",
      description: "Manage documents and literature resources",
      icon: FileText,
      href: "/admin/public-page/documents",
      count: 3,
    },
  ]

return (
    <div className="p-4 sm:p-6 space-y-6">
      <div>
        <h1 className="text-3xl font-bold text-gray-900">Public Page Management</h1>
        <p className="text-gray-600 mt-2">Manage team, documents, and public content</p>
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {sections.map((section) => {
          const Icon = section.icon
          return (
            <Link key={section.id} href={section.href}>
              <Card className="hover:shadow-lg transition-shadow cursor-pointer h-full">
                <CardContent className="pt-6">
                  <div className="flex items-start justify-between">
                    <div className="flex-1">
                      <div className="flex items-center gap-3 mb-2">
                        <div className="p-3 bg-[#CE1126] bg-opacity-10 rounded-lg">
                          <Icon className="w-6 h-6 text-[#CE1126]" />
                        </div>
                        <h3 className="font-semibold text-gray-900 text-lg">{section.title}</h3>
                      </div>
                      <p className="text-sm text-gray-600 mb-4">{section.description}</p>
                      <div className="text-2xl font-bold text-gray-900">{section.count}</div>
                      <p className="text-xs text-gray-500">Total items</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </Link>
          )
        })}
      </div>
    </div>
  )
}
[V0_FILE]jpg:file="public/aravind.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/aravind-brMHOxP7Msv3tdM62UEirV8q2ZOsCS.jpg" isMerged="true"
[V0_FILE]jpg:file="public/senthil.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/senthil-3274LTwDIx54B92YNqe1R2rVRw4TNB.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/admin/contact/page.tsx" isQuickEdit="true" isMerged="true"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Mail, Phone, MapPin, Clock, FileText } from "lucide-react"
import Link from "next/link"

export default function ContactPage() {
  const contacts = [
    {
      id: 1,
      name: "Main Office",
      address: "Jln Tun Ismail, 50480 Kuala Lumpur",
      phone: "+60 3-4108-9888",
      email: "info@mcc.org.my",
      hours: "Monday - Friday: 9AM - 5PM",
    },
    {
      id: 2,
      name: "Penang Office",
      address: "Lebuh Penang, 10200 George Town, Penang",
      phone: "+60 4-262-3456",
      email: "penang@mcc.org.my",
      hours: "Monday - Friday: 9AM - 5PM",
    },
    {
      id: 3,
      name: "Johor Office",
      address: "Jln Sultan Ismail, 80000 Johor Bahru",
      phone: "+60 7-223-5678",
      email: "johor@mcc.org.my",
      hours: "Monday - Friday: 9AM - 5PM",
    },
  ]

const contacts_list = [
    {
      id: 1,
      name: "President",
      person: "Datuk S. Arokiasamy",
      phone: "+60 3-4108-9999",
      email: "president@mcc.org.my",
    },
    {
      id: 2,
      name: "Vice President",
      person: "Mr. K. Veerasingam",
      phone: "+60 3-4108-9998",
      email: "vp@mcc.org.my",
    },
    {
      id: 3,
      name: "General Secretary",
      person: "Mr. S. Ramu",
      phone: "+60 3-4108-9997",
      email: "secretary@mcc.org.my",
    },
    {
      id: 4,
      name: "Treasurer",
      person: "Mr. V. Subramaniam",
      phone: "+60 3-4108-9996",
      email: "treasurer@mcc.org.my",
    },
  ]

const sections = [
    {
      id: "info",
      title: "Contact Information",
      description: "Manage office locations, addresses, and contact details",
      icon: Phone,
      href: "/admin/contact/info",
    },
    {
      id: "submissions",
      title: "Form Submissions",
      description: "View and manage contact form submissions",
      icon: FileText,
      href: "/admin/contact/form-submissions",
    },
  ]

return (
    <div className="p-4 sm:p-6 space-y-8">
      {/* Header */}
      <div>
        <h1 className="text-3xl font-bold text-gray-900">Contact Management</h1>
        <p className="text-gray-600 mt-2">Manage contact information and form submissions</p>
      </div>

{/* Navigation Cards */}
      <div className="grid gap-6 sm:grid-cols-1 lg:grid-cols-2">
        {sections.map((section) => {
          const Icon = section.icon
          return (
            <Link key={section.id} href={section.href}>
              <Card className="hover:shadow-lg hover:border-[#CE1126] transition-all cursor-pointer h-full">
                <CardContent className="pt-6">
                  <div className="flex items-start gap-4">
                    <div className="p-3 bg-[#CE1126] bg-opacity-10 rounded-lg">
                      <Icon className="w-6 h-6 text-[#CE1126]" />
                    </div>
                    <div>
                      <h2 className="text-xl font-semibold text-gray-900">{section.title}</h2>
                      <p className="text-gray-600 text-sm mt-1">{section.description}</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </Link>
          )
        })}
      </div>

{/* Office Locations */}
      <div>
        <h2 className="text-2xl font-bold text-gray-900 mb-4">Office Locations</h2>
        <div className="grid gap-6 sm:grid-cols-1 lg:grid-cols-2">
          {contacts.map((contact) => (
            <Card key={contact.id} className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <MapPin className="w-5 h-5 text-[#CE1126]" />
                  {contact.name}
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="flex items-start gap-2">
                  <MapPin className="w-4 h-4 text-gray-400 mt-1" />
                  <p className="text-sm text-gray-700">{contact.address}</p>
                </div>
                <div className="flex items-center gap-2">
                  <Phone className="w-4 h-4 text-gray-400" />
                  <p className="text-sm font-mono text-gray-700">{contact.phone}</p>
                </div>
                <div className="flex items-center gap-2">
                  <Mail className="w-4 h-4 text-gray-400" />
                  <p className="text-sm font-mono text-gray-700">{contact.email}</p>
                </div>
                <div className="flex items-center gap-2">
                  <Clock className="w-4 h-4 text-gray-400" />
                  <p className="text-sm text-gray-700">{contact.hours}</p>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

{/* Key Contacts */}
      <div>
        <h2 className="text-2xl font-bold text-gray-900 mb-4">Key Contacts</h2>
        <div className="grid gap-4">
          {contacts_list.map((contact) => (
            <Card key={contact.id} className="hover:shadow-lg transition-shadow">
              <CardContent className="pt-6">
                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                  <div>
                    <p className="text-sm text-gray-600">{contact.name}</p>
                    <p className="font-semibold text-gray-900 mt-1">{contact.person}</p>
                  </div>
                  <div className="flex flex-col sm:flex-row gap-4 text-sm">
                    <div className="flex items-center gap-1 text-gray-600">
                      <Phone className="w-4 h-4" />
                      <span className="font-mono">{contact.phone}</span>
                    </div>
                    <div className="flex items-center gap-1 text-gray-600">
                      <Mail className="w-4 h-4" />
                      <span className="font-mono">{contact.email}</span>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/users-roles/users/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/users-roles/permissions/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { ArrowLeft, Lock } from "lucide-react"
import Link from "next/link"

export default function PermissionsPage() {
  const [permissions] = useState([
    { id: 1, name: "View Dashboard", category: "Dashboard", description: "Access to view dashboard" },
    { id: 2, name: "Edit Dashboard", category: "Dashboard", description: "Ability to edit dashboard widgets" },
    { id: 3, name: "View Branches", category: "Branch Management", description: "Can view branch information" },
    { id: 4, name: "Create Branch", category: "Branch Management", description: "Can create new branches" },
    { id: 5, name: "Edit Branch", category: "Branch Management", description: "Can edit branch details" },
    { id: 6, name: "Delete Branch", category: "Branch Management", description: "Can delete branches" },
    { id: 7, name: "View Members", category: "Member Management", description: "Can view member information" },
    { id: 8, name: "Create Member", category: "Member Management", description: "Can add new members" },
    { id: 9, name: "Edit Member", category: "Member Management", description: "Can edit member details" },
    { id: 10, name: "Delete Member", category: "Member Management", description: "Can delete members" },
    { id: 11, name: "Manage Media", category: "Media Resources", description: "Can upload and manage media" },
    { id: 12, name: "Manage Users", category: "User Management", description: "Can create and manage users" },
  ])

const groupedPermissions = permissions.reduce(
    (acc, perm) => {
      if (!acc[perm.category]) acc[perm.category] = []
      acc[perm.category].push(perm)
      return acc
    },
    {} as Record<string, typeof permissions>,
  )

return (
    <div className="p-4 sm:p-6 space-y-6">
      <div>
        <Link
          href="/admin/users-roles"
          className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 font-medium mb-4"
        >
          <ArrowLeft className="w-5 h-5" />
          Back to Users & Roles
        </Link>
        <h1 className="text-3xl font-bold text-gray-900">System Permissions</h1>
        <p className="text-gray-600 mt-2">View all available system permissions</p>
      </div>

{/* Permissions by Category */}
      <div className="space-y-8">
        {Object.entries(groupedPermissions).map(([category, perms]) => (
          <div key={category}>
            <h2 className="text-2xl font-bold text-gray-900 mb-4 flex items-center gap-2">
              <Lock className="w-6 h-6 text-[#CE1126]" />
              {category}
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {perms.map((perm) => (
                <Card key={perm.id}>
                  <CardContent className="pt-6">
                    <h3 className="font-semibold text-gray-900">{perm.name}</h3>
                    <p className="text-sm text-gray-600 mt-2">{perm.description}</p>
                    <div className="mt-4">
                      <span className="inline-block px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-xs font-medium">
                        {category}
                      </span>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        ))}
      </div>

{/* Summary */}
      <Card className="bg-blue-50 border-blue-200">
        <CardContent className="pt-6">
          <h3 className="font-semibold text-blue-900 mb-2">Permission Summary</h3>
          <p className="text-sm text-blue-800">
            Total Permissions: <span className="font-bold">{permissions.length}</span>
          </p>
          <p className="text-sm text-blue-800 mt-1">
            These permissions are assigned to roles, which are then assigned to users to control their access to the
            admin panel.
          </p>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/users-roles/users/page.tsx" isMerged="true"
import UsersClient from "@/components/admin/users-roles/users-client"

export default function UsersPage() {
  return <UsersClient />
}
[V0_FILE]typescriptreact:file="app/admin/branch/view/[id]/page.tsx" isMerged="true"
"use client"

import { useParams } from "next/navigation"
import Link from "next/link"
import { ArrowLeft, MapPin, Users, Phone, Mail, Calendar, User, MapPinIcon } from "lucide-react"

export default function BranchViewPage() {
  const params = useParams()
  const branchId = Number(params.id)

// Mock data - in real app this would be fetched
  const branches: Branch[] = [
    {
      id: 1,
      name: "Kuala Lumpur Main Branch",
      location: "Kuala Lumpur, Federal Territory",
      members: 2450,
      phone: "+60 3-2142-3456",
      email: "kl@mcc.org.my",
      established: "1986",
      address: "123 Merdeka Street",
      city: "Kuala Lumpur",
      state: "Federal Territory",
      zipCode: "50050",
      manager: "Dato Ahmad bin Abdullah",
    },
    {
      id: 2,
      name: "Selangor Branch",
      location: "Selangor",
      members: 1890,
      phone: "+60 3-7957-1234",
      email: "selangor@mcc.org.my",
      established: "1990",
      address: "456 Shah Alam Road",
      city: "Shah Alam",
      state: "Selangor",
      zipCode: "40000",
      manager: "Tuan Haji Muhammad",
    },
  ]

const branch = branches.find((b) => b.id === branchId)

if (!branch) {
    return (
      <div className="p-4 sm:p-6">
        <Link href="/admin/branch">
          <button className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 font-medium mb-4">
            <ArrowLeft className="w-5 h-5" />
            Back to Branches
          </button>
        </Link>
        <p className="text-gray-500">Branch not found</p>
      </div>
    )
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      <Link href="/admin/branch">
        <button className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 font-medium mb-4">
          <ArrowLeft className="w-5 h-5" />
          Back to Branches
        </button>
      </Link>

<div className="bg-white rounded-lg shadow-lg p-6 sm:p-8">
        <div className="border-b pb-6 mb-6">
          <div className="flex items-center gap-3 mb-2">
            <MapPin className="w-6 h-6 text-[#CE1126]" />
            <h1 className="text-3xl font-bold text-gray-900">{branch.name}</h1>
          </div>
          <p className="text-gray-600 ml-9">{branch.location}</p>
        </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
          <div className="flex gap-4">
            <div className="flex-shrink-0">
              <div className="flex items-center justify-center h-12 w-12 rounded-lg bg-blue-100">
                <Users className="w-6 h-6 text-blue-600" />
              </div>
            </div>
            <div>
              <p className="text-sm font-medium text-gray-500">Total Members</p>
              <p className="text-2xl font-bold text-gray-900">{branch.members.toLocaleString()}</p>
            </div>
          </div>

<div className="flex gap-4">
            <div className="flex-shrink-0">
              <div className="flex items-center justify-center h-12 w-12 rounded-lg bg-green-100">
                <Calendar className="w-6 h-6 text-green-600" />
              </div>
            </div>
            <div>
              <p className="text-sm font-medium text-gray-500">Established</p>
              <p className="text-2xl font-bold text-gray-900">{branch.established}</p>
            </div>
          </div>

<div className="flex gap-4">
            <div className="flex-shrink-0">
              <div className="flex items-center justify-center h-12 w-12 rounded-lg bg-purple-100">
                <Phone className="w-6 h-6 text-purple-600" />
              </div>
            </div>
            <div>
              <p className="text-sm font-medium text-gray-500">Phone</p>
              <p className="text-lg font-mono text-gray-900">{branch.phone}</p>
            </div>
          </div>

<div className="flex gap-4">
            <div className="flex-shrink-0">
              <div className="flex items-center justify-center h-12 w-12 rounded-lg bg-yellow-100">
                <Mail className="w-6 h-6 text-yellow-600" />
              </div>
            </div>
            <div>
              <p className="text-sm font-medium text-gray-500">Email</p>
              <p className="text-lg font-mono text-gray-900">{branch.email}</p>
            </div>
          </div>

{branch.manager && (
            <div className="flex gap-4">
              <div className="flex-shrink-0">
                <div className="flex items-center justify-center h-12 w-12 rounded-lg bg-red-100">
                  <User className="w-6 h-6 text-red-600" />
                </div>
              </div>
              <div>
                <p className="text-sm font-medium text-gray-500">Branch Manager</p>
                <p className="text-lg font-semibold text-gray-900">{branch.manager}</p>
              </div>
            </div>
          )}

{branch.city && (
            <div className="flex gap-4">
              <div className="flex-shrink-0">
                <div className="flex items-center justify-center h-12 w-12 rounded-lg bg-indigo-100">
                  <MapPinIcon className="w-6 h-6 text-indigo-600" />
                </div>
              </div>
              <div>
                <p className="text-sm font-medium text-gray-500">City</p>
                <p className="text-lg font-semibold text-gray-900">{branch.city}</p>
              </div>
            </div>
          )}
        </div>

{branch.address && (
          <div className="border-t pt-6">
            <p className="text-sm font-medium text-gray-500 mb-2">Full Address</p>
            <p className="text-gray-900 leading-relaxed">
              {branch.address}
              {branch.state && `, ${branch.state}`}
              {branch.zipCode && ` ${branch.zipCode}`}
            </p>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/contact/info/view/[id]/page.tsx" isMerged="true"
"use client"

import { useParams } from "next/navigation"
import Link from "next/link"
import { ArrowLeft, Phone, Mail, MapPin } from "lucide-react"

interface ContactInfo {
  id: number
  title: string
  phone: string
  email: string
  address: string
  googleMapsUrl?: string
  displayOrder: number
  status: "Active" | "Inactive"
}

export default function ContactInfoViewPage() {
  const params = useParams()
  const contactId = Number(params.id)

// Mock data
  const contacts: ContactInfo[] = [
    {
      id: 1,
      title: "Head Office",
      phone: "+1 (302) 208 2666",
      email: "info@myowninc.com",
      address: "Suite 8 The Green #19578, Dover, DE 19901",
      googleMapsUrl: "https://maps.google.com/embed?pb=...",
      displayOrder: 0,
      status: "Active",
    },
    {
      id: 2,
      title: "Branch Office",
      phone: "+91 44 2850 5233",
      email: "info@myowntravelleisure.com",
      address: "G-14/608, V.O.C street Desk#473 Perungudi, Kottiyam",
      googleMapsUrl: "https://maps.google.com/embed?pb=...",
      displayOrder: 1,
      status: "Active",
    },
  ]

const contact = contacts.find((c) => c.id === contactId)

if (!contact) {
    return (
      <div className="p-4 sm:p-6">
        <Link href="/admin/contact/info">
          <button className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 font-medium mb-4">
            <ArrowLeft className="w-5 h-5" />
            Back to Contact Information
          </button>
        </Link>
        <p className="text-gray-500">Contact information not found</p>
      </div>
    )
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      <Link href="/admin/contact/info">
        <button className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 font-medium mb-4">
          <ArrowLeft className="w-5 h-5" />
          Back to Contact Information
        </button>
      </Link>

<div className="bg-white rounded-lg shadow-lg overflow-hidden">
        <div className="bg-[#CE1126] text-white px-6 py-4">
          <h1 className="text-2xl font-bold">{contact.title}</h1>
        </div>

<div className="p-6 sm:p-8 space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="flex gap-4">
              <div className="flex-shrink-0">
                <div className="flex items-center justify-center h-12 w-12 rounded-lg bg-purple-100">
                  <Phone className="w-6 h-6 text-purple-600" />
                </div>
              </div>
              <div>
                <p className="text-sm font-medium text-gray-500">Phone</p>
                <p className="text-lg font-semibold text-gray-900">{contact.phone}</p>
              </div>
            </div>

<div className="flex gap-4">
              <div className="flex-shrink-0">
                <div className="flex items-center justify-center h-12 w-12 rounded-lg bg-blue-100">
                  <Mail className="w-6 h-6 text-blue-600" />
                </div>
              </div>
              <div>
                <p className="text-sm font-medium text-gray-500">Email</p>
                <p className="text-lg font-semibold text-gray-900">{contact.email}</p>
              </div>
            </div>
          </div>

<div className="border-t pt-6">
            <div className="flex gap-4">
              <div className="flex-shrink-0">
                <div className="flex items-center justify-center h-12 w-12 rounded-lg bg-red-100">
                  <MapPin className="w-6 h-6 text-red-600" />
                </div>
              </div>
              <div>
                <p className="text-sm font-medium text-gray-500 mb-2">Address</p>
                <p className="text-gray-900 leading-relaxed">{contact.address}</p>
              </div>
            </div>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 border-t pt-6">
            <div>
              <p className="text-sm text-gray-600 font-medium mb-2">Status</p>
              <span
                className={`inline-block px-3 py-1 rounded-full text-sm font-medium ${
                  contact.status === "Active" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
                }`}
              >
                {contact.status}
              </span>
            </div>
            <div>
              <p className="text-sm text-gray-600 font-medium mb-2">Display Order</p>
              <p className="text-gray-900">{contact.displayOrder}</p>
            </div>
          </div>

{contact.googleMapsUrl && (
            <div className="border-t pt-6">
              <p className="text-sm font-medium text-gray-500 mb-2">Google Maps URL</p>
              <p className="text-xs text-gray-600 break-all">{contact.googleMapsUrl}</p>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/public-page/team/view/[id]/page.tsx" isMerged="true"
"use client"
import Link from "next/link"
import { ArrowLeft, Edit2 } from "lucide-react"

interface TeamMember {
  id: number
  name: string
  position: string
  email: string
  phone: string
  photo: string
  bio: string
  status: "Active" | "Inactive"
}

const mockMembers: TeamMember[] = [
  {
    id: 1,
    name: "Aravind Subramanian",
    position: "Committee President",
    email: "aravind@mcc.org.my",
    phone: "+60 3-2142-3456",
    photo: "/aravind.jpg",
    bio: "Experienced leader with 15 years in community development",
    status: "Active",
  },
  {
    id: 2,
    name: "Senthil Kumar",
    position: "Vice President",
    email: "senthil@mcc.org.my",
    phone: "+60 3-2142-3457",
    photo: "/senthil.jpg",
    bio: "Dedicated professional focused on member engagement",
    status: "Active",
  },
]

export default function TeamViewPage({ params }: { params: { id: string } }) {
  const member = mockMembers.find((m) => m.id === Number.parseInt(params.id))

if (!member) {
    return (
      <div className="p-6">
        <Link href="/admin/public-page/team">
          <button className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 font-medium mb-4">
            <ArrowLeft className="w-5 h-5" />
            Back to Team
          </button>
        </Link>
        <p className="text-gray-600">Team member not found.</p>
      </div>
    )
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      <Link href="/admin/public-page/team">
        <button className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 font-medium">
          <ArrowLeft className="w-5 h-5" />
          Back to Team
        </button>
      </Link>

<div className="bg-white rounded-lg p-6 sm:p-8">
        <div className="flex flex-col sm:flex-row gap-6">
          <img
            src={member.photo || "/placeholder.svg"}
            alt={member.name}
            className="w-40 h-40 rounded-lg object-cover"
          />
          <div className="flex-1 space-y-4">
            <div>
              <h1 className="text-3xl font-bold text-gray-900">{member.name}</h1>
              <p className="text-lg text-[#CE1126] font-medium mt-1">{member.position}</p>
            </div>

<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div>
                <label className="text-sm font-medium text-gray-600">Email</label>
                <p className="text-gray-900 mt-1">{member.email}</p>
              </div>
              <div>
                <label className="text-sm font-medium text-gray-600">Phone</label>
                <p className="text-gray-900 mt-1">{member.phone}</p>
              </div>
              <div>
                <label className="text-sm font-medium text-gray-600">Status</label>
                <span
                  className={`inline-block px-3 py-1 rounded-full text-sm font-medium mt-1 ${
                    member.status === "Active" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
                  }`}
                >
                  {member.status}
                </span>
              </div>
            </div>

<div>
              <label className="text-sm font-medium text-gray-600">Bio</label>
              <p className="text-gray-900 mt-2 leading-relaxed">{member.bio}</p>
            </div>

<div className="flex gap-2 pt-4 border-t border-gray-200">
              <Link href={`/admin/public-page/team/edit/${member.id}`}>
                <button className="flex items-center gap-2 bg-amber-100 text-amber-700 px-4 py-2 rounded-lg hover:bg-amber-200 transition font-medium">
                  <Edit2 className="w-4 h-4" />
                  Edit
                </button>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/public-page/documents/view/[id]/page.tsx" isMerged="true"
"use client"

import Link from "next/link"
import { ArrowLeft, Edit2, FileText } from "lucide-react"

interface Document {
  id: number
  title: string
  category: string
  description: string
  fileName: string
  fileSize: string
  status: "Active" | "Inactive"
  order: number
}

const mockDocuments: Document[] = [
  {
    id: 1,
    title: "Annual Reports",
    category: "Reports",
    description: "Party annual performance reports, Financial reports, Activity summaries",
    fileName: "MCC_Document.pdf",
    fileSize: "0.01 MB",
    status: "Active",
    order: 3,
  },
  {
    id: 2,
    title: "Party Constitution/Charter",
    category: "Constitution",
    description: "Official constitution document (PDF), Vision, mission, core values, Code of conduct",
    fileName: "MCC_Document.pdf",
    fileSize: "0.01 MB",
    status: "Active",
    order: 1,
  },
]

export default function DocumentViewPage({ params }: { params: { id: string } }) {
  const document = mockDocuments.find((d) => d.id === Number.parseInt(params.id))

if (!document) {
    return (
      <div className="p-6">
        <Link href="/admin/public-page/documents">
          <button className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 font-medium mb-4">
            <ArrowLeft className="w-5 h-5" />
            Back to Documents
          </button>
        </Link>
        <p className="text-gray-600">Document not found.</p>
      </div>
    )
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      <Link href="/admin/public-page/documents">
        <button className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 font-medium">
          <ArrowLeft className="w-5 h-5" />
          Back to Documents
        </button>
      </Link>

<div className="bg-white rounded-lg p-6 sm:p-8 space-y-6">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">{document.title}</h1>
          <p className="text-gray-600 mt-2">{document.category}</p>
        </div>

<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
          <div>
            <label className="text-sm font-medium text-gray-600">Description</label>
            <p className="text-gray-900 mt-2 leading-relaxed">{document.description}</p>
          </div>
          <div className="space-y-4">
            <div>
              <label className="text-sm font-medium text-gray-600">File</label>
              <div className="flex items-center gap-2 mt-2">
                <FileText className="w-5 h-5 text-gray-600" />
                <span className="text-gray-900">{document.fileName}</span>
              </div>
            </div>
            <div>
              <label className="text-sm font-medium text-gray-600">File Size</label>
              <p className="text-gray-900 mt-2">{document.fileSize}</p>
            </div>
            <div>
              <label className="text-sm font-medium text-gray-600">Display Order</label>
              <p className="text-gray-900 mt-2">{document.order}</p>
            </div>
            <div>
              <label className="text-sm font-medium text-gray-600">Status</label>
              <span
                className={`inline-block px-3 py-1 rounded-full text-sm font-medium mt-2 ${
                  document.status === "Active" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
                }`}
              >
                {document.status}
              </span>
            </div>
          </div>
        </div>

<div className="flex gap-2 pt-6 border-t border-gray-200">
          <Link href={`/admin/public-page/documents/edit/${document.id}`}>
            <button className="flex items-center gap-2 bg-amber-100 text-amber-700 px-4 py-2 rounded-lg hover:bg-amber-200 transition font-medium">
              <Edit2 className="w-4 h-4" />
              Edit
            </button>
          </Link>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/users-roles/users/view/[id]/page.tsx" isMerged="true"
"use client"

import Link from "next/link"
import { ArrowLeft, Edit2 } from "lucide-react"

interface User {
  id: number
  firstName: string
  lastName: string
  email: string
  phone: string
  role: string
  status: string
  lastLogin: string
}

const mockUsers: User[] = [
  {
    id: 1,
    firstName: "Datuk S.",
    lastName: "Arokiasamy",
    email: "president@mcc.org.my",
    phone: "+60-3-1234-5678",
    role: "Admin",
    status: "Active",
    lastLogin: "02 Jan 2026",
  },
  {
    id: 2,
    firstName: "Mr. K.",
    lastName: "Veerasingam",
    email: "vp@mcc.org.my",
    phone: "+60-3-1234-5679",
    role: "Editor",
    status: "Active",
    lastLogin: "01 Jan 2026",
  },
  {
    id: 3,
    firstName: "Ms. Priya",
    lastName: "Devi",
    email: "content@mcc.org.my",
    phone: "+60-3-1234-5680",
    role: "Content Manager",
    status: "Active",
    lastLogin: "31 Dec 2025",
  },
]

export default function UserViewPage({ params }: { params: { id: string } }) {
  const user = mockUsers.find((u) => u.id === Number.parseInt(params.id))

if (!user) {
    return (
      <div className="p-6">
        <Link href="/admin/users-roles/users">
          <button className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 font-medium mb-4">
            <ArrowLeft className="w-5 h-5" />
            Back to Users
          </button>
        </Link>
        <p className="text-gray-600">User not found.</p>
      </div>
    )
  }

return (
    <div className="p-4 sm:p-6 space-y-6">
      <Link href="/admin/users-roles/users">
        <button className="flex items-center gap-2 text-[#CE1126] hover:text-red-700 font-medium">
          <ArrowLeft className="w-5 h-5" />
          Back to Users
        </button>
      </Link>

<div className="bg-white rounded-lg p-6 sm:p-8 space-y-6">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">
            {user.firstName} {user.lastName}
          </h1>
          <p className="text-gray-600 mt-2">User ID: #{user.id}</p>
        </div>

<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
          <div>
            <label className="text-sm font-medium text-gray-600">Email</label>
            <p className="text-gray-900 mt-2">{user.email}</p>
          </div>
          <div>
            <label className="text-sm font-medium text-gray-600">Phone</label>
            <p className="text-gray-900 mt-2">{user.phone}</p>
          </div>
          <div>
            <label className="text-sm font-medium text-gray-600">Role</label>
            <span className="inline-block px-3 py-1 bg-blue-100 text-blue-800 rounded text-sm font-medium mt-2">
              {user.role}
            </span>
          </div>
          <div>
            <label className="text-sm font-medium text-gray-600">Status</label>
            <span className="inline-block px-3 py-1 bg-green-100 text-green-800 rounded text-sm font-medium mt-2">
              {user.status}
            </span>
          </div>
          <div>
            <label className="text-sm font-medium text-gray-600">Last Login</label>
            <p className="text-gray-900 mt-2">{user.lastLogin}</p>
          </div>
        </div>

<div className="flex gap-2 pt-6 border-t border-gray-200">
          <Link href={`/admin/users-roles/users/edit/${user.id}`}>
            <button className="flex items-center gap-2 bg-amber-100 text-amber-700 px-4 py-2 rounded-lg hover:bg-amber-200 transition font-medium">
              <Edit2 className="w-4 h-4" />
              Edit
            </button>
          </Link>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/memberships/masterfile/add/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { ArrowLeft } from "lucide-react"
import Link from "next/link"
import { useState } from "react"
import { useRouter } from "next/navigation"

export default function AddMemberPage() {
  const router = useRouter()
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
    idNumber: "",
    membershipType: "Ordinary Member",
    branch: "Kuala Lumpur",
    address: "",
    city: "",
    state: "",
    zipCode: "",
    joinDate: new Date().toISOString().split("T")[0],
    status: "active",
  })

const [errors, setErrors] = useState<Record<string, string>>({})

const validateForm = () => {
    const newErrors: Record<string, string> = {}
    if (!formData.name.trim()) newErrors.name = "Name is required"
    if (!formData.email.trim()) newErrors.email = "Email is required"
    if (!formData.phone.trim()) newErrors.phone = "Phone is required"
    if (!formData.idNumber.trim()) newErrors.idNumber = "ID Number is required"
    setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (validateForm()) {
      console.log("Adding member:", formData)
      router.push("/admin/memberships/masterfile")
    }
  }

{/* Form */}
      <div className="bg-white rounded-lg border border-gray-200 p-6">
        <form onSubmit={handleSubmit} className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {/* Personal Information */}
            <div className="md:col-span-2">
              <h2 className="text-lg font-semibold text-gray-900 mb-4">Personal Information</h2>
            </div>

<div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Full Name *</label>
              <input
                type="text"
                value={formData.name}
                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
                placeholder="e.g., Ahmad Abdullah"
              />
              {errors.name && <p className="text-red-500 text-sm mt-1">{errors.name}</p>}
            </div>

<div>
              <label className="block text-sm font-medium text-gray-700 mb-2">ID Number *</label>
              <input
                type="text"
                value={formData.idNumber}
                onChange={(e) => setFormData({ ...formData, idNumber: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
                placeholder="e.g., 123456-78-9012"
              />
              {errors.idNumber && <p className="text-red-500 text-sm mt-1">{errors.idNumber}</p>}
            </div>

<div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Email Address *</label>
              <input
                type="email"
                value={formData.email}
                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
                placeholder="e.g., ahmad@email.com"
              />
              {errors.email && <p className="text-red-500 text-sm mt-1">{errors.email}</p>}
            </div>

<div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Phone Number *</label>
              <input
                type="tel"
                value={formData.phone}
                onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#CE1126] focus:border-transparent"
                placeholder="e.g., +60 12-345-6789"
              />
              {errors.phone && <p className="text-red-500 text-sm mt-1">{errors.phone}</p>}
            </div>