ab:I[903690,["/chat-static/_next/static/immutable/chunks/25sy-cznq5gtk.js","/chat-static/_next/static/immutable/chunks/17kl369b79nmd.js","/chat-static/_next/static/immutable/chunks/3ipxm38dyyb9q.js","/chat-static/_next/static/immutable/chunks/25oa2-cd4babd.js","/chat-static/_next/static/immutable/chunks/1di_td8luy3gw.js","/chat-static/_next/static/immutable/chunks/0_zevym5bobxk.js","/chat-static/_next/static/immutable/chunks/0pa2o-879tgyz.js","/chat-static/_next/static/immutable/chunks/2iyogqj39terz.js","/chat-static/_next/static/immutable/chunks/0vmwjdmzo33vb.js","/chat-static/_next/static/immutable/chunks/3xsyi84us226z.js","/chat-static/_next/static/immutable/chunks/3sd5co-q3j6ji.js","/chat-static/_next/static/immutable/chunks/3b6rwng7jzw37.js","/chat-static/_next/static/immutable/chunks/454vo2w1h6da9.js","/chat-static/_next/static/immutable/chunks/0kpqqt3b70onu.js","/chat-static/_next/static/immutable/chunks/0i48amtc28pqy.js","/chat-static/_next/static/immutable/chunks/3q9baiox9oh9u.js","/chat-static/_next/static/immutable/chunks/17xddrdopbp9_.js","/chat-static/_next/static/immutable/chunks/2dh86ziq4bpa7.js","/chat-static/_next/static/immutable/chunks/33addp8wpisll.js","/chat-static/_next/static/immutable/chunks/0avdeadirr7ac.js","/chat-static/_next/static/immutable/chunks/421be_5xz_yit.js","/chat-static/_next/static/immutable/chunks/2gn4nsrh2z77a.js","/chat-static/_next/static/immutable/chunks/0nc47r7g497qp.js","/chat-static/_next/static/immutable/chunks/1o9d1-74u-xr7.js","/chat-static/_next/static/immutable/chunks/3svgy0zb87s57.js","/chat-static/_next/static/immutable/chunks/0dt5xmjm5355d.js","/chat-static/_next/static/immutable/chunks/1c3kqwyzatdha.js","/chat-static/_next/static/immutable/chunks/1afvjiubxi20p.js","/chat-static/_next/static/immutable/chunks/1efvyp5ys0qa_.js","/chat-static/_next/static/immutable/chunks/16p-wd29zwtcb.js","/chat-static/_next/static/immutable/chunks/19etlne9fpz8c.js","/chat-static/_next/static/immutable/chunks/25vs-yagbngt2.js","/chat-static/_next/static/immutable/chunks/3uz_m6bi6f-lg.js","/chat-static/_next/static/immutable/chunks/1ukuldvl_7ewm.js","/chat-static/_next/static/immutable/chunks/1j2pv-n41aow7.js","/chat-static/_next/static/immutable/chunks/3all0vilnb92m.js","/chat-static/_next/static/immutable/chunks/0v_w5d6uj-d1p.js","/chat-static/_next/static/immutable/chunks/216nuiz0k8ips.js","/chat-static/_next/static/immutable/chunks/2ktsmvnrpabs_.js","/chat-static/_next/static/immutable/chunks/29mrkgtzx_4wp.js","/chat-static/_next/static/immutable/chunks/04gkop25t1q10.js","/chat-static/_next/static/immutable/chunks/0i0qxxzro3chc.js","/chat-static/_next/static/immutable/chunks/3ozgp_g2qonep.js","/chat-static/_next/static/immutable/chunks/0wa14r29vk-50.js","/chat-static/_next/static/immutable/chunks/1_2vxq9xb046f.js","/chat-static/_next/static/immutable/chunks/2x0m84hlfqnp9.js","/chat-static/_next/static/immutable/chunks/1erht42aiso18.js","/chat-static/_next/static/immutable/chunks/33yhsbwlge-yd.js","/chat-static/_next/static/immutable/chunks/34-_dn6funmns.js","/chat-static/_next/static/immutable/chunks/30mwco_q1oioj.js","/chat-static/_next/static/immutable/chunks/2l-dnyr8c1i8w.js","/chat-static/_next/static/immutable/chunks/0b9ex5d30islg.js","/chat-static/_next/static/immutable/chunks/0aktln77chfqc.js","/chat-static/_next/static/immutable/chunks/0h3zc71pdnjom.js","/chat-static/_next/static/immutable/chunks/1cmyat5y1o107.js"],"ExplicitChatIdProvider"] ac:I[838238,["/chat-static/_next/static/immutable/chunks/25sy-cznq5gtk.js","/chat-static/_next/static/immutable/chunks/17kl369b79nmd.js","/chat-static/_next/static/immutable/chunks/3ipxm38dyyb9q.js","/chat-static/_next/static/immutable/chunks/25oa2-cd4babd.js","/chat-static/_next/static/immutable/chunks/1di_td8luy3gw.js","/chat-static/_next/static/immutable/chunks/0_zevym5bobxk.js","/chat-static/_next/static/immutable/chunks/0pa2o-879tgyz.js","/chat-static/_next/static/immutable/chunks/2iyogqj39terz.js","/chat-static/_next/static/immutable/chunks/0vmwjdmzo33vb.js","/chat-static/_next/static/immutable/chunks/3xsyi84us226z.js","/chat-static/_next/static/immutable/chunks/3sd5co-q3j6ji.js","/chat-static/_next/static/immutable/chunks/3b6rwng7jzw37.js","/chat-static/_next/static/immutable/chunks/454vo2w1h6da9.js","/chat-static/_next/static/immutable/chunks/0kpqqt3b70onu.js","/chat-static/_next/static/immutable/chunks/0i48amtc28pqy.js","/chat-static/_next/static/immutable/chunks/3q9baiox9oh9u.js","/chat-static/_next/static/immutable/chunks/17xddrdopbp9_.js","/chat-static/_next/static/immutable/chunks/2dh86ziq4bpa7.js","/chat-static/_next/static/immutable/chunks/33addp8wpisll.js","/chat-static/_next/static/immutable/chunks/0avdeadirr7ac.js","/chat-static/_next/static/immutable/chunks/421be_5xz_yit.js","/chat-static/_next/static/immutable/chunks/2gn4nsrh2z77a.js","/chat-static/_next/static/immutable/chunks/0nc47r7g497qp.js","/chat-static/_next/static/immutable/chunks/1o9d1-74u-xr7.js","/chat-static/_next/static/immutable/chunks/3svgy0zb87s57.js","/chat-static/_next/static/immutable/chunks/0dt5xmjm5355d.js","/chat-static/_next/static/immutable/chunks/1c3kqwyzatdha.js","/chat-static/_next/static/immutable/chunks/1afvjiubxi20p.js","/chat-static/_next/static/immutable/chunks/1efvyp5ys0qa_.js","/chat-static/_next/static/immutable/chunks/16p-wd29zwtcb.js","/chat-static/_next/static/immutable/chunks/19etlne9fpz8c.js","/chat-static/_next/static/immutable/chunks/25vs-yagbngt2.js","/chat-static/_next/static/immutable/chunks/3uz_m6bi6f-lg.js","/chat-static/_next/static/immutable/chunks/1ukuldvl_7ewm.js","/chat-static/_next/static/immutable/chunks/1j2pv-n41aow7.js","/chat-static/_next/static/immutable/chunks/3all0vilnb92m.js","/chat-static/_next/static/immutable/chunks/0v_w5d6uj-d1p.js","/chat-static/_next/static/immutable/chunks/216nuiz0k8ips.js","/chat-static/_next/static/immutable/chunks/2ktsmvnrpabs_.js","/chat-static/_next/static/immutable/chunks/29mrkgtzx_4wp.js","/chat-static/_next/static/immutable/chunks/04gkop25t1q10.js","/chat-static/_next/static/immutable/chunks/0i0qxxzro3chc.js","/chat-static/_next/static/immutable/chunks/3ozgp_g2qonep.js","/chat-static/_next/static/immutable/chunks/0wa14r29vk-50.js","/chat-static/_next/static/immutable/chunks/1_2vxq9xb046f.js","/chat-static/_next/static/immutable/chunks/2x0m84hlfqnp9.js","/chat-static/_next/static/immutable/chunks/1erht42aiso18.js","/chat-static/_next/static/immutable/chunks/33yhsbwlge-yd.js","/chat-static/_next/static/immutable/chunks/34-_dn6funmns.js","/chat-static/_next/static/immutable/chunks/30mwco_q1oioj.js","/chat-static/_next/static/immutable/chunks/2l-dnyr8c1i8w.js","/chat-static/_next/static/immutable/chunks/0b9ex5d30islg.js","/chat-static/_next/static/immutable/chunks/0aktln77chfqc.js","/chat-static/_next/static/immutable/chunks/0h3zc71pdnjom.js","/chat-static/_next/static/immutable/chunks/1cmyat5y1o107.js"],"SWRDataProvider"] ae:[] af:[["b_Ysc9vHpegyV",null],["b_X5urSAr7b8l",null],["b_8qnIy1yAAlv",null]] b0:[["b_Ysc9vHpegyV",{"templateVersionId":null,"templateCanonId":null}],["b_X5urSAr7b8l",{"templateVersionId":null,"templateCanonId":null}],["b_8qnIy1yAAlv",{"templateVersionId":null,"templateCanonId":null}]] b1:[["NnqOukNIupl","$D2025-07-08T14:52:14.554Z"],["b_nCtqyHm5O7G","$D2025-07-08T14:56:16.593Z"],["b_jJ3Jf1Hp5H8","$D2025-07-09T14:37:55.124Z"],["b_DU83s83ppfA","$D2025-07-09T14:37:58.558Z"],["b_Yh8xTH8zD43","$D2025-07-09T15:01:11.415Z"],["b_fVDMEWtFZIN","$D2025-07-09T15:12:46.944Z"],["b_9StGv1esHRS","$D2025-07-09T15:20:36.662Z"],["b_eLOiufnIH4n","$D2025-07-09T15:28:02.773Z"],["b_aybSl0qJbXr","$D2025-07-13T09:11:36.907Z"],["b_Y57K3cjKTsB","$D2025-07-13T12:28:14.458Z"],["b_Pz8uohFn0eo","$D2025-07-13T12:38:08.667Z"],["b_8IBCF3Fw8tU","$D2025-07-13T12:43:02.862Z"],["b_BWIhK4cNq2C","$D2025-07-13T13:04:27.363Z"],["b_zaEmPtJmKo2","$D2025-07-16T11:49:05.883Z"],["b_Uo1uuWKscaD","$D2025-07-16T12:18:42.300Z"],["b_a5QUHDuIn03","$D2025-07-16T12:25:40.633Z"],["b_7Sj3sQe9rc8","$D2025-07-16T12:30:23.579Z"],["b_Mm1p2bvEMrK","$D2025-07-16T12:35:54.665Z"],["b_5btz0EE5g9k","$D2025-07-16T12:41:33.565Z"],["b_Ggc0KIJenSj","$D2025-07-16T12:45:55.013Z"],["b_kpTRHMwWNo8","$D2025-07-16T12:48:55.849Z"],["b_R05Woeiod0D","$D2025-07-16T12:49:29.089Z"],["b_ByikIwdhsVz","$D2025-07-16T12:58:36.869Z"],["b_RiBsm9xzPjM","$D2025-07-16T13:01:03.989Z"],["b_NxYohOYnqFh","$D2025-07-16T13:18:13.142Z"],["b_I0QEokId6RZ","$D2025-07-17T04:11:25.295Z"],["b_G55Re8bv9YB","$D2025-07-30T04:10:42.230Z"],["b_rQKkbEkHGBl","$D2025-10-20T05:56:05.098Z"],["b_dG2ryRWtnzw","$D2025-10-20T06:08:53.585Z"],["b_rB5bZ6cTmjA","$D2025-10-20T06:26:17.576Z"],["b_BBpfPLibdBI","$D2025-10-20T06:32:06.002Z"],["b_ptI1pu6dPIV","$D2025-10-20T06:38:02.706Z"],["b_FM3MJzgYowJ","$D2025-10-20T06:44:27.557Z"],["b_iLxGg1kLq07","$D2025-10-20T06:57:11.269Z"],["b_zkPeY7AqW6W","$D2025-10-20T10:55:43.238Z"],["b_dL6s23zJlP1","$D2025-10-20T11:08:47.505Z"],["b_b9LbcBUE2r4","$D2025-10-20T11:10:02.560Z"],["b_OqiVZQYpN2a","$D2025-10-20T11:13:45.770Z"],["b_2zdZ99Opi3h","$D2025-10-20T11:41:25.025Z"],["b_Ysc9vHpegyV","$D2025-10-20T11:51:04.516Z"],["b_X5urSAr7b8l","$D2025-10-21T07:23:09.569Z"],["b_8qnIy1yAAlv","$D2025-10-21T07:32:51.163Z"]] b2:[["b_Ysc9vHpegyV",false],["b_X5urSAr7b8l",false],["b_8qnIy1yAAlv",false]] b3:[["b_Ysc9vHpegyV","$undefined"],["b_X5urSAr7b8l","$undefined"],["b_8qnIy1yAAlv","$undefined"]] b4:[["b_Ysc9vHpegyV",null],["b_X5urSAr7b8l",null],["b_8qnIy1yAAlv",null]] b5:[["b_Ysc9vHpegyV",true],["b_X5urSAr7b8l",true],["b_8qnIy1yAAlv",true]] b6:[["b_Ysc9vHpegyV",true],["b_X5urSAr7b8l",true],["b_8qnIy1yAAlv",true]] b7:[] b8:Ta1723,[V0_FILE]plaintext:file=".gitignore" isMerged="true" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" isMerged="true" # Simple login page dashboard ad *Automatically synced with your [v0.dev](https://v0.dev) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/abdulmuti12s-projects/v0-simple-login-page-dashboard-ad) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.dev-black?style=for-the-badge)](https://v0.dev/chat/projects/TSNW37InPtb) ## Overview This repository will stay in sync with your deployed chats on [v0.dev](https://v0.dev). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.dev](https://v0.dev). ## Deployment Your project is live at: **[https://vercel.com/abdulmuti12s-projects/v0-simple-login-page-dashboard-ad](https://vercel.com/abdulmuti12s-projects/v0-simple-login-page-dashboard-ad)** ## Build your app Continue building your app on: **[https://v0.dev/chat/projects/TSNW37InPtb](https://v0.dev/chat/projects/TSNW37InPtb)** ## How It Works 1. Create and modify your project using [v0.dev](https://v0.dev) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescriptreact:file="app/dashboard/account/loading.tsx" isMerged="true" import { Skeleton } from "@/components/ui/skeleton" import { Card, CardContent } from "@/components/ui/card" import { Separator } from "@/components/ui/separator" export default function AccountLoading() { return (

) } [V0_FILE]typescriptreact:file="app/dashboard/admin/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/dashboard/admin/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Plus, Search, Edit, Trash2, Users, UserCheck, Shield, ChevronLeft, ChevronRight, Eye, Calendar, Mail, User, Crown, Activity, CheckCircle, XCircle, X, } from "lucide-react" import { Alert, AlertDescription } from "@/components/ui/alert" interface AdminData { id: number name: string email: string role: string status: string last_login: string | null created_at: string updated_at: string password?: string // Add optional password field role_id?: string // Add optional role_id field } interface AdminDetailData { general: { id: number name: string email: string role: string status: string last_login: string | null created_at: string updated_at: string } } interface RoleData { id: number name: string } interface PaginationLink { url: string | null label: string active: boolean } interface ApiResponse { success: boolean message: string data: { data: AdminData[] current_page: number from: number last_page: number links: PaginationLink[] path: string per_page: number to: number total: number first_page_url: string last_page_url: string prev_page_url: string | null next_page_url: string | null } status: number } interface DetailApiResponse { success: boolean message: string data: AdminDetailData status: number } interface RoleApiResponse { success: boolean message: string data: RoleData[] status: number } interface CreateAdminResponse { success: boolean message: string data?: any status: number } interface ToastNotification { id: string type: "success" | "error" title: string message: string } export default function AdminPage() { const [admins, setAdmins] = useState([]) const [roles, setRoles] = useState([]) const [searchType, setSearchType] = useState<"name" | "email">("name") const [searchValue, setSearchValue] = useState("") const [currentPage, setCurrentPage] = useState(1) const [totalPages, setTotalPages] = useState(1) const [totalItems, setTotalItems] = useState(0) const [isLoading, setIsLoading] = useState(true) const [isSearching, setIsSearching] = useState(false) const [isAddDialogOpen, setIsAddDialogOpen] = useState(false) const [isEditDialogOpen, setIsEditDialogOpen] = useState(false) const [isDetailDialogOpen, setIsDetailDialogOpen] = useState(false) const [selectedAdmin, setSelectedAdmin] = useState(null) const [adminDetail, setAdminDetail] = useState(null) const [isLoadingDetail, setIsLoadingDetail] = useState(false) const [isLoadingRoles, setIsLoadingRoles] = useState(false) const [isCreatingAdmin, setIsCreatingAdmin] = useState(false) const [detailError, setDetailError] = useState("") const [roleError, setRoleError] = useState("") const [createMessage, setCreateMessage] = useState("") const [toasts, setToasts] = useState([]) const [newAdmin, setNewAdmin] = useState({ name: "", email: "", password: "", role_id: "", status: "Active", }) const router = useRouter() const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false) const [adminToDelete, setAdminToDelete] = useState(null) const [isEditingAdmin, setIsEditingAdmin] = useState(false) const [editMessage, setEditMessage] = useState("") // Toast notification functions const addToast = (type: "success" | "error", title: string, message: string) => { const id = Math.random().toString(36).substr(2, 9) const newToast: ToastNotification = { id, type, title, message } setToasts((prev) => [...prev, newToast]) // Auto remove toast after 5 seconds setTimeout(() => { removeToast(id) }, 5000) } const removeToast = (id: string) => { setToasts((prev) => prev.filter((toast) => toast.id !== id)) } // Fetch admins data from API const fetchAdmins = async (page = 1, type: "name" | "email" = "name", value = "") => { try { const token = localStorage.getItem("token") if (!token) { router.push("/login") return } setIsSearching(true) const params = new URLSearchParams() if (page > 1) params.append("page", page.toString()) if (value.trim()) { params.append(type, value.trim()) } const url = `${process.env.NEXT_PUBLIC_API_URL}/admins/admin${params.toString() ? `?${params.toString()}` : ""}` const response = await fetch(url, { method: "GET", headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json", }, }) const data: ApiResponse = await response.json() if (response.ok && data.success) { setAdmins(data.data.data) setCurrentPage(data.data.current_page) setTotalPages(data.data.last_page) setTotalItems(data.data.total) } else { // If API returns success: false, redirect to login localStorage.removeItem("token") router.push("/login") } } catch (error) { console.error("Admin API error:", error) // On network error, redirect to login localStorage.removeItem("token") router.push("/login") } finally { setIsLoading(false) setIsSearching(false) } } // Fetch roles data from API const fetchRoles = async () => { try { const token = localStorage.getItem("token") if (!token) { router.push("/login") return } setIsLoadingRoles(true) setRoleError("") const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/admins/get-role`, { method: "GET", headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json", }, }) const data: RoleApiResponse = await response.json() if (response.ok && data.success) { setRoles(data.data) } else { setRoleError(data.message || "Failed to load roles") } } catch (error) { console.error("Roles API error:", error) setRoleError("Network error occurred while loading roles") } finally { setIsLoadingRoles(false) } } // Fetch admin detail const fetchAdminDetail = async (adminId: number) => { try { const token = localStorage.getItem("token") if (!token) { router.push("/login") return } setIsLoadingDetail(true) setDetailError("") setAdminDetail(null) const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/admins/admin/${adminId}`, { method: "GET", headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json", }, }) const data: DetailApiResponse = await response.json() if (response.ok && data.success) { setAdminDetail(data.data) } else { setDetailError(data.message || "Failed to load admin details") } } catch (error) { console.error("Admin detail API error:", error) setDetailError("Network error occurred while loading admin details") } finally { setIsLoadingDetail(false) } } // Create new admin const createAdmin = async () => { try { const token = localStorage.getItem("token") if (!token) { setCreateMessage("Authentication token not found. Please login again.") router.push("/login") return } setIsCreatingAdmin(true) setCreateMessage("") // Debug: Log the request details console.log("Creating admin with token:", token ? "Token exists" : "No token") console.log("Request payload:", { name: newAdmin.name, email: newAdmin.email, status: newAdmin.status, password: newAdmin.password, role_id: Number.parseInt(newAdmin.role_id), }) const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/admins/admin`, { method: "POST", headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json", Accept: "application/json", }, body: JSON.stringify({ name: newAdmin.name, email: newAdmin.email, status: newAdmin.status, password: newAdmin.password, role_id: Number.parseInt(newAdmin.role_id), }), }) // Debug: Log response details console.log("Response status:", response.status) console.log("Response headers:", response.headers) const data: CreateAdminResponse = await response.json() console.log("Response data:", data) if (response.status === 401) { setCreateMessage("Authentication failed. Please login again.") localStorage.removeItem("token") router.push("/login") return } if (response.ok && data.success) { setCreateMessage("Admin created successfully!") // Reset form setNewAdmin({ name: "", email: "", password: "", role_id: "", status: "Active", }) // Refresh admin list fetchAdmins(currentPage, searchType, searchValue) // Close dialog after a short delay setTimeout(() => { setIsAddDialogOpen(false) setCreateMessage("") }, 2000) } else { setCreateMessage(data.message || `Failed to create admin (Status: ${response.status})`) } } catch (error) { console.error("Create admin API error:", error) setCreateMessage("Network error occurred while creating admin") } finally { setIsCreatingAdmin(false) } } // Handle view detail const handleViewDetail = (admin: AdminData) => { setSelectedAdmin(admin) setIsDetailDialogOpen(true) fetchAdminDetail(admin.id) } // Handle add dialog open const handleAddDialogOpen = (open: boolean) => { setIsAddDialogOpen(open) if (open) { fetchRoles() // Fetch roles when opening add dialog setCreateMessage("") } else { // Reset form when closing setNewAdmin({ name: "", email: "", password: "", role_id: "", status: "Active", }) setCreateMessage("") } } // Initial load useEffect(() => { fetchAdmins() }, []) // Handle search with debounce useEffect(() => { const timeoutId = setTimeout(() => { setCurrentPage(1) fetchAdmins(1, searchType, searchValue) }, 500) return () => clearTimeout(timeoutId) }, [searchValue, searchType]) // Handle pagination const handlePageChange = (page: number) => { setCurrentPage(page) fetchAdmins(page, searchType, searchValue) } // Handle search type change const handleSearchTypeChange = (type: "name" | "email") => { setSearchType(type) setSearchValue("") // Clear search value when changing type setCurrentPage(1) fetchAdmins(1, type, "") } // Handle search value change const handleSearchValueChange = (value: string) => { setSearchValue(value) } // Clear search const handleClearSearch = () => { setSearchValue("") setCurrentPage(1) fetchAdmins(1, searchType, "") } // Statistics based on current data const stats = [ { title: "Total Admins", value: totalItems.toString(), description: "All admin users", icon: Users, color: "text-blue-600", }, { title: "Active Admins", value: admins.filter((admin) => admin.status === "Active").length.toString(), description: "Currently active", icon: UserCheck, color: "text-green-600", }, { title: "Super Admins", value: admins.filter((admin) => admin.role === "Super Admin").length.toString(), description: "Highest privileges", icon: Shield, color: "text-purple-600", }, ] const handleAddAdmin = () => { if (newAdmin.name && newAdmin.email && newAdmin.password && newAdmin.role_id) { createAdmin() } else { setCreateMessage("Please fill in all required fields") } } // Update admin const updateAdmin = async (adminId: number) => { try { const token = localStorage.getItem("token") if (!token) { setEditMessage("Authentication token not found. Please login again.") router.push("/login") return } setIsEditingAdmin(true) setEditMessage("") if (!selectedAdmin) { setEditMessage("No admin selected for editing") return } const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/admins/admin/${adminId}`, { method: "PUT", headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json", Accept: "application/json", }, body: JSON.stringify({ name: selectedAdmin.name, email: selectedAdmin.email, status: selectedAdmin.status, password: selectedAdmin.password || "password", // Default password if not provided role_id: Number.parseInt(selectedAdmin.role_id || "1"), }), }) const data = await response.json() if (response.status === 401) { setEditMessage("Authentication failed. Please login again.") localStorage.removeItem("token") router.push("/login") return } if (response.ok && data.success) { // Show success toast addToast("success", "Admin Updated", `Admin "${selectedAdmin.name}" has been successfully updated.`) // Refresh admin list fetchAdmins(currentPage, searchType, searchValue) // Close dialog after a short delay setTimeout(() => { setIsEditDialogOpen(false) setSelectedAdmin(null) setEditMessage("") }, 1000) } else { setEditMessage(data.message || `Failed to update admin (Status: ${response.status})`) } } catch (error) { console.error("Update admin API error:", error) setEditMessage("Network error occurred while updating admin") } finally { setIsEditingAdmin(false) } } const handleEditAdmin = () => { if (selectedAdmin && selectedAdmin.name && selectedAdmin.email && selectedAdmin.role_id) { updateAdmin(selectedAdmin.id) } else { setEditMessage("Please fill in all required fields") } } // Delete admin const deleteAdmin = async (adminId: number, adminName: string) => { try { const token = localStorage.getItem("token") if (!token) { router.push("/login") return } const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/admins/admin/${adminId}`, { method: "DELETE", headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json", Accept: "application/json", }, }) const data = await response.json() if (response.status === 401) { localStorage.removeItem("token") router.push("/login") return } if (response.ok && data.success) { // Show success toast addToast("success", "Admin Deleted", `Admin "${adminName}" has been successfully deleted.`) // Refresh admin list after successful deletion fetchAdmins(currentPage, searchType, searchValue) } else { // Show error toast addToast("error", "Delete Failed", data.message || "Failed to delete admin. Please try again.") } } catch (error) { console.error("Delete admin API error:", error) // Show error toast for network errors addToast("error", "Network Error", "A network error occurred while deleting the admin. Please try again.") } } const handleDeleteAdmin = (admin: AdminData) => { setAdminToDelete(admin) setIsDeleteDialogOpen(true) } const confirmDeleteAdmin = () => { if (adminToDelete) { deleteAdmin(adminToDelete.id, adminToDelete.name) setIsDeleteDialogOpen(false) setAdminToDelete(null) } } const getStatusBadge = (status: string) => { return status === "Active" ? ( Active ) : ( Inactive ) } const getRoleBadge = (role: string) => { const colors = { "Super Admin": "bg-purple-100 text-purple-800", Admin: "bg-blue-100 text-blue-800", Moderator: "bg-orange-100 text-orange-800", Editor: "bg-green-100 text-green-800", } return ( {role} ) } const formatDate = (dateString: string) => { return new Date(dateString).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", }) } const formatDateTime = (dateString: string) => { return new Date(dateString).toLocaleString("en-US", { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", }) } const formatLastLogin = (lastLogin: string | null) => { if (!lastLogin) return "Never" return new Date(lastLogin).toLocaleString("en-US", { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", }) } if (isLoading) { return (

Admin Management

Loading admin data...

{[...Array(3)].map((_, index) => (

))}

) } return (

{/* Toast Notifications */}

{toasts.map((toast) => (

{toast.type === "success" ? ( ) : ( )}

{toast.title}

{toast.message}

))}

{/* Header */}

Admin Management

Manage admin users and their permissions

{/* Statistics */}

{stats.map((stat, index) => ( {stat.title}

{stat.value}

{stat.description}

))}

{/* Search and Table */}

Admin Users Showing {admins.length} of {totalItems} admin accounts

{/* Search Type Selector */} {/* Search Input */}

handleSearchValueChange(e.target.value)} className="pl-10 pr-10" disabled={isSearching} /> {isSearching && (

)} {searchValue && ( )}

{/* Search Info */} {searchValue && (

Searching for "{searchValue}" in {searchType} field {totalItems > 0 && ` - Found ${totalItems} result${totalItems > 1 ? "s" : ""}`}

)} Name Email Role Status Last Login Created Actions {admins.length > 0 ? ( admins.map((admin) => ( {admin.name} {admin.email} {getRoleBadge(admin.role)} {getStatusBadge(admin.status)} {formatLastLogin(admin.last_login)} {formatDate(admin.created_at)}

)) ) : ( {searchValue ? `No admins found matching "${searchValue}" in ${searchType} field.` : "No admin data available."} )}

{/* Pagination */} {totalPages > 1 && (

Showing {(currentPage - 1) * 10 + 1} to {Math.min(currentPage * 10, totalItems)} of {totalItems} results

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

)} {/* Detail Dialog */} {/* Edit Dialog */} {/* Delete Confirmation Dialog */}

) } [V0_FILE]typescriptreact:file="app/dashboard/brand/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/dashboard/layout.tsx" isMerged="true" "use client" import type React from "react" import { useEffect, useState } from "react" import { useRouter } from "next/navigation" import { SidebarProvider } from "@/components/ui/sidebar" import { AppSidebar } from "@/components/app-sidebar" import { DashboardHeader } from "@/components/dashboard-header" export default function DashboardLayout({ children, }: { children: React.ReactNode }) { const [isAuthenticated, setIsAuthenticated] = useState(false) const [isLoading, setIsLoading] = useState(true) const router = useRouter() useEffect(() => { const checkAuth = () => { try { const token = localStorage.getItem("token") if (!token) { router.push("/login") return } // Token exists, user is authenticated setIsAuthenticated(true) } catch (error) { console.error("Auth check error:", error) router.push("/login") } finally { setIsLoading(false) } } checkAuth() }, [router]) if (isLoading) { return (

Loading dashboard...

) } if (!isAuthenticated) { return null // Will redirect to login } return (

{children}

) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { useRouter } from "next/navigation" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Users, ShoppingBag, Package, Tag, Award, UserCheck } from "lucide-react" interface DashboardData { total_products: number total_categories: number total_brands: number total_customers: number total_admins: number total_role: number } export default function DashboardPage() { const [dashboardData, setDashboardData] = useState(null) const [isLoading, setIsLoading] = useState(true) const [error, setError] = useState("") const router = useRouter() useEffect(() => { const fetchDashboardData = async () => { try { const token = localStorage.getItem("token") if (!token) { router.push("/login") return } const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/admins/dashboard`, { method: "GET", headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json", }, }) const data = await response.json() if (response.ok && data.success) { setDashboardData(data.data) } else { // If API returns success: false or any error, redirect to login localStorage.removeItem("token") router.push("/login") } } catch (error) { console.error("Dashboard API error:", error) // On network error, also redirect to login localStorage.removeItem("token") router.push("/login") } finally { setIsLoading(false) } } fetchDashboardData() }, [router]) if (isLoading) { return (

Dashboard

Loading dashboard data...

{[...Array(6)].map((_, index) => (

))}

) } if (!dashboardData) { return null // Will redirect to login } const stats = [ { title: "Total Products", value: dashboardData.total_products.toString(), description: "All products in system", icon: Package, color: "text-blue-600", }, { title: "Total Categories", value: dashboardData.total_categories.toString(), description: "Product categories", icon: Tag, color: "text-green-600", }, { title: "Total Brands", value: dashboardData.total_brands.toString(), description: "Registered brands", icon: Award, color: "text-purple-600", }, { title: "Total Customers", value: dashboardData.total_customers.toString(), description: "Registered customers", icon: Users, color: "text-orange-600", }, { title: "Total Admins", value: dashboardData.total_admins.toString(), description: "Admin users", icon: UserCheck, color: "text-red-600", }, { title: "Total Roles", value: dashboardData.total_role.toString(), description: "User roles", icon: ShoppingBag, color: "text-indigo-600", }, ] return (

Dashboard

Welcome back! Here's what's happening with your admin panel.

{stats.map((stat, index) => ( {stat.title}

{stat.value}

{stat.description}

))}

System Overview Current system statistics

Products

{dashboardData.total_products}

Categories

{dashboardData.total_categories}

Brands

{dashboardData.total_brands}

User Management Users and roles overview

Customers

{dashboardData.total_customers}

Admins

{dashboardData.total_admins}

Roles

{dashboardData.total_role}

Manage Products

Add, edit, or remove products

Manage Categories

Organize product categories

Manage Users

Handle user accounts

) } [V0_FILE]typescriptreact:file="app/dashboard/product/loading.tsx" isMerged="true" import { Skeleton } from "@/components/ui/skeleton" export default function Loading() { return (

{[...Array(3)].map((_, i) => ( ))}

{[...Array(5)].map((_, i) => ( ))}

) } [V0_FILE]typescriptreact:file="app/dashboard/role/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/dashboard/role/page.tsx" isMerged="true" "use client" import { DialogTrigger } from "@/components/ui/dialog" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" import { Plus, Search, Edit, Trash2, Shield, UserCheck, ChevronLeft, ChevronRight, Eye, Calendar, Crown, CheckCircle, XCircle, X, Settings, } from "lucide-react" import { Alert, AlertDescription } from "@/components/ui/alert" interface RoleData { id: number name: string created_at: string updated_at: string } interface RoleDetailData { general: { id: number name: string created_at: string updated_at: string menu: { menu: Array<{ id: number name: string route: string }> } description?: string permissions?: string[] } } interface PaginationLink { url: string | null label: string active: boolean } interface ApiResponse { data: { data: RoleData[] } meta: { current_page: number from: number last_page: number links: PaginationLink[] path: string per_page: number to: number total: number } links: { first: string last: string prev: string | null next: string | null } } interface DetailApiResponse { success: boolean message: string data: RoleDetailData status: number } interface CreateRoleResponse { success: boolean message: string data?: any status: number } interface ToastNotification { id: string type: "success" | "error" title: string message: string } interface MenuItem { id: number name: string } export default function RolePage() { const [roles, setRoles] = useState([]) const [searchValue, setSearchValue] = useState("") const [currentPage, setCurrentPage] = useState(1) const [totalPages, setTotalPages] = useState(1) const [totalItems, setTotalItems] = useState(0) const [isLoading, setIsLoading] = useState(true) const [isSearching, setIsSearching] = useState(false) const [isAddDialogOpen, setIsAddDialogOpen] = useState(false) const [isEditDialogOpen, setIsEditDialogOpen] = useState(false) const [isDetailDialogOpen, setIsDetailDialogOpen] = useState(false) const [selectedRole, setSelectedRole] = useState(null) const [roleDetail, setRoleDetail] = useState(null) const [isLoadingDetail, setIsLoadingDetail] = useState(false) const [isCreatingRole, setIsCreatingRole] = useState(false) const [detailError, setDetailError] = useState("") const [createMessage, setCreateMessage] = useState("") const [toasts, setToasts] = useState([]) const [newRole, setNewRole] = useState({ name: "", }) const [apiError, setApiError] = useState("") const router = useRouter() const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false) const [roleToDelete, setRoleToDelete] = useState(null) const [isEditingRole, setIsEditingRole] = useState(false) const [editMessage, setEditMessage] = useState("") const [menuItems, setMenuItems] = useState([]) const [selectedMenus, setSelectedMenus] = useState([]) const [isLoadingMenus, setIsLoadingMenus] = useState(false) const [menuError, setMenuError] = useState("") const [editRoleData, setEditRoleData] = useState<{ name: string menus: Array<{ id: number name: string selected: boolean }> }>({ name: "", menus: [] }) const [selectedEditMenus, setSelectedEditMenus] = useState([]) const [isLoadingEditData, setIsLoadingEditData] = useState(false) // Toast notification functions const addToast = (type: "success" | "error", title: string, message: string) => { const id = Math.random().toString(36).substr(2, 9) const newToast: ToastNotification = { id, type, title, message } setToasts((prev) => [...prev, newToast]) // Auto remove toast after 5 seconds setTimeout(() => { removeToast(id) }, 5000) } const removeToast = (id: string) => { setToasts((prev) => prev.filter((toast) => toast.id !== id)) } // Fetch roles data from API const fetchRoles = async (page = 1, value = "") => { try { const token = localStorage.getItem("token") if (!token) { setApiError("No authentication token found. Please login.") setIsLoading(false) setIsSearching(false) return } setIsSearching(true) setApiError("") const params = new URLSearchParams() if (page > 1) params.append("page", page.toString()) if (value.trim()) { params.append("name", value.trim()) } const url = `${process.env.NEXT_PUBLIC_API_URL}/admins/role${params.toString() ? `?${params.toString()}` : ""}` console.log("Fetching roles from:", url) console.log("Using token:", token ? "Token exists" : "No token") const response = await fetch(url, { method: "GET", headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json", }, }) console.log("Response status:", response.status) console.log("Response headers:", Object.fromEntries(response.headers.entries())) // Only redirect to login if we get a 401 Unauthorized if (response.status === 401) { console.log("Unauthorized access, redirecting to login") localStorage.removeItem("token") router.push("/login") return } let responseData: any try { responseData = await response.json() console.log("API Response:", responseData) } catch (parseError) { console.error("Failed to parse JSON response:", parseError) setApiError(`Failed to parse server response. Status: ${response.status}`) setRoles([]) return } if (response.ok) { // Check if response has success field and it's false if (responseData.success === false) { setApiError(responseData.message || "API returned success: false") addToast("error", "Error", responseData.message || "Failed to fetch roles") setRoles([]) setCurrentPage(1) setTotalPages(1) setTotalItems(0) return } // Extract data from the correct structure if (responseData.data && responseData.data.data && Array.isArray(responseData.data.data)) { const rolesList = responseData.data.data setRoles(rolesList) setCurrentPage(responseData.meta.current_page) setTotalPages(responseData.meta.last_page) setTotalItems(responseData.meta.total) console.log("Roles loaded successfully:", rolesList.length, "roles") } else if (responseData.data && Array.isArray(responseData.data)) { // Fallback: if data is directly an array setRoles(responseData.data) setCurrentPage(1) setTotalPages(1) setTotalItems(responseData.data.length) console.log("Roles loaded (fallback):", responseData.data.length, "roles") } else { console.error("Unexpected API response structure:", responseData) setApiError( `Unexpected data format from server. Expected array of roles but got: ${typeof responseData.data}`, ) setRoles([]) } } else { // Handle error response const errorMessage = responseData?.message || `HTTP ${response.status}: ${response.statusText}` setApiError(errorMessage) addToast("error", "API Error", errorMessage) setRoles([]) console.error("API Error:", errorMessage) } } catch (error) { console.error("Network error:", error) const errorMessage = error instanceof Error ? error.message : "Unknown network error" setApiError(`Network error: ${errorMessage}`) addToast("error", "Network Error", "Failed to connect to server. Please check your connection.") setRoles([]) } finally { setIsLoading(false) setIsSearching(false) } } // Fetch role detail const fetchRoleDetail = async (roleId: number) => { try { const token = localStorage.getItem("token") if (!token) { router.push("/login") return } setIsLoadingDetail(true) setDetailError("") setRoleDetail(null) const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/admins/role/${roleId}`, { method: "GET", headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json", }, }) // Only redirect to login if we get a 401 Unauthorized if (response.status === 401) { localStorage.removeItem("token") router.push("/login") return } const data = await response.json() if (response.ok && data.success) { setRoleDetail(data.data) } else { setDetailError(data.message || "Failed to load role details") } } catch (error) { console.error("Role detail API error:", error) setDetailError("Network error occurred while loading role details") } finally { setIsLoadingDetail(false) } } // Create new role const fetchMenuItems = async () => { try { const token = localStorage.getItem("token") if (!token) { setMenuError("Authentication token not found. Please login again.") return } setIsLoadingMenus(true) setMenuError("") const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/admins/get-menu`, { method: "GET", headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json", }, }) if (response.status === 401) { setMenuError("Authentication failed. Please login again.") localStorage.removeItem("token") router.push("/login") return } const data = await response.json() if (response.ok && data.success) { setMenuItems(data.data) } else { setMenuError(data.message || "Failed to load menu items") } } catch (error) { console.error("Menu items API error:", error) setMenuError("Network error occurred while loading menu items") } finally { setIsLoadingMenus(false) } } const createRole = async () => { try { const token = localStorage.getItem("token") if (!token) { setCreateMessage("Authentication token not found. Please login again.") router.push("/login") return } setIsCreatingRole(true) setCreateMessage("") const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/admins/role`, { method: "POST", headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json", Accept: "application/json", }, body: JSON.stringify({ name: newRole.name, menus: selectedMenus, // Include selected menus }), }) const data = await response.json() if (response.status === 401) { setCreateMessage("Authentication failed. Please login again.") localStorage.removeItem("token") router.push("/login") return } if (response.ok && data.success) { // Show success toast addToast("success", "Role Created", `Role "${newRole.name}" has been successfully created.`) // Reset form setNewRole({ name: "", }) setSelectedMenus([]) // Refresh role list fetchRoles(currentPage, searchValue) // Close dialog after a short delay setTimeout(() => { setIsAddDialogOpen(false) setCreateMessage("") }, 2000) } else { setCreateMessage(data.message || `Failed to create role (Status: ${response.status})`) } } catch (error) { console.error("Create role API error:", error) setCreateMessage("Network error occurred while creating role") } finally { setIsCreatingRole(false) } } // Handle view detail const handleViewDetail = (role: RoleData) => { setSelectedRole(role) setIsDetailDialogOpen(true) fetchRoleDetail(role.id) } // Handle add dialog open const handleAddDialogOpen = (open: boolean) => { setIsAddDialogOpen(open) if (open) { fetchMenuItems() // Fetch menu items when opening add dialog setCreateMessage("") setSelectedMenus([]) // Reset selected menus } else { // Reset form when closing setNewRole({ name: "", }) setSelectedMenus([]) setCreateMessage("") } } // Initial load useEffect(() => { // Add a small delay to ensure the component is mounted const timer = setTimeout(() => { fetchRoles() }, 100) return () => clearTimeout(timer) }, []) // Handle search with debounce useEffect(() => { const timeoutId = setTimeout(() => { setCurrentPage(1) fetchRoles(1, searchValue) }, 500) return () => clearTimeout(timeoutId) }, [searchValue]) // Handle pagination const handlePageChange = (page: number) => { setCurrentPage(page) fetchRoles(page, searchValue) } // Handle search value change const handleSearchValueChange = (value: string) => { setSearchValue(value) } // Clear search const handleClearSearch = () => { setSearchValue("") setCurrentPage(1) fetchRoles(1, "") } // Statistics based on current data const stats = [ { title: "Total Roles", value: totalItems.toString(), description: "All system roles", icon: Shield, color: "text-purple-600", }, { title: "Active Roles", value: roles.length.toString(), description: "Currently active", icon: UserCheck, color: "text-green-600", }, { title: "Admin Roles", value: roles.filter((role) => role.name.toLowerCase().includes("admin")).length.toString(), description: "Administrative roles", icon: Crown, color: "text-blue-600", }, ] // Add a function to handle menu checkbox changes const handleMenuCheckboxChange = (menuId: number) => { setSelectedMenus((prev) => { if (prev.includes(menuId)) { return prev.filter((id) => id !== menuId) } else { return [...prev, menuId] } }) } const handleAddRole = () => { if (!newRole.name) { setCreateMessage("Please fill in the role name") return } if (selectedMenus.length === 0) { setCreateMessage("Please select at least one menu") return } createRole() } // Update role const fetchRoleForEdit = async (roleId: number) => { try { const token = localStorage.getItem("token") if (!token) { setEditMessage("Authentication token not found. Please login again.") router.push("/login") return } setIsLoadingEditData(true) setEditMessage("") const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/admins/get-edit-role/${roleId}`, { method: "GET", headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json", }, }) if (response.status === 401) { setEditMessage("Authentication failed. Please login again.") localStorage.removeItem("token") router.push("/login") return } const data = await response.json() if (response.ok && data.success) { setEditRoleData(data.data) // Set selected menus based on the response const initialSelectedMenus = data.data.menus.filter((menu) => menu.selected).map((menu) => menu.id) setSelectedEditMenus(initialSelectedMenus) } else { setEditMessage(data.message || `Failed to load role data (Status: ${response.status})`) } } catch (error) { console.error("Fetch role for edit API error:", error) setEditMessage("Network error occurred while loading role data") } finally { setIsLoadingEditData(false) } } // Add this function to handle menu checkbox changes in edit mode: const handleEditMenuCheckboxChange = (menuId: number) => { setSelectedEditMenus((prev) => { if (prev.includes(menuId)) { return prev.filter((id) => id !== menuId) } else { return [...prev, menuId] } }) } const updateRole = async (roleId: number) => { try { const token = localStorage.getItem("token") if (!token) { setEditMessage("Authentication token not found. Please login again.") router.push("/login") return } setIsEditingRole(true) setEditMessage("") if (!selectedRole) { setEditMessage("No role selected for editing") return } const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/admins/role/${roleId}`, { method: "POST", headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json", Accept: "application/json", }, body: JSON.stringify({ name: editRoleData.name, menus: selectedEditMenus, _method: "PUT", }), }) const data = await response.json() if (response.status === 401) { setEditMessage("Authentication failed. Please login again.") localStorage.removeItem("token") router.push("/login") return } if (response.ok && data.success) { // Show success toast addToast("success", "Role Updated", "Update Role Success") // Refresh role list fetchRoles(currentPage, searchValue) // Close dialog after a short delay setTimeout(() => { setIsEditDialogOpen(false) setSelectedRole(null) setEditMessage("") setEditRoleData({ name: "", menus: [] }) setSelectedEditMenus([]) }, 1000) } else { setEditMessage(data.message || `Failed to update role (Status: ${response.status})`) } } catch (error) { console.error("Update role API error:", error) setEditMessage("Network error occurred while updating role") } finally { setIsEditingRole(false) } } const handleEditRole = () => { if (selectedRole && editRoleData.name) { updateRole(selectedRole.id) } else { setEditMessage("Please fill in the role name") } } // Delete role const deleteRole = async (roleId: number, roleName: string) => { try { const token = localStorage.getItem("token") if (!token) { router.push("/login") return } const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/admins/role/${roleId}`, { method: "DELETE", headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json", Accept: "application/json", }, }) const data = await response.json() if (response.status === 401) { localStorage.removeItem("token") router.push("/login") return } if (response.ok && data.success) { // Show success toast addToast("success", "Role Deleted", `Role "${roleName}" has been successfully deleted.`) // Refresh role list after successful deletion fetchRoles(currentPage, searchValue) } else { // Show error toast addToast("error", "Delete Failed", data.message || "Failed to delete role. Please try again.") } } catch (error) { console.error("Delete role API error:", error) // Show error toast for network errors addToast("error", "Network Error", "A network error occurred while deleting the role. Please try again.") } } const handleDeleteRole = (role: RoleData) => { setRoleToDelete(role) setIsDeleteDialogOpen(true) } const confirmDeleteRole = () => { if (roleToDelete) { deleteRole(roleToDelete.id, roleToDelete.name) setIsDeleteDialogOpen(false) setRoleToDelete(null) } } const getRoleBadge = (roleName: string) => { const colors = { "Super Admin": "bg-purple-100 text-purple-800", Admin: "bg-blue-100 text-blue-800", Moderator: "bg-orange-100 text-orange-800", Editor: "bg-green-100 text-green-800", User: "bg-gray-100 text-gray-800", } return ( {roleName} ) } const formatDate = (dateString: string) => { return new Date(dateString).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", }) } const formatDateTime = (dateString: string) => { return new Date(dateString).toLocaleString("en-US", { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", }) } if (isLoading) { return (

Role Management

Loading role data...

{[...Array(3)].map((_, index) => (

))}

) } return (

{/* Toast Notifications */}

{toasts.map((toast) => (

{toast.type === "success" ? ( ) : ( )}

{toast.title}

{toast.message}

))}

{/* Header */}

Role Management

Manage system roles and permissions

{/* Statistics */}

{stats.map((stat, index) => ( {stat.title}

{stat.value}

{stat.description}

))}

{/* API Error Message */} {apiError && (

Error loading roles:

{apiError}

)} {/* Search and Table */}

System Roles Showing {roles.length} of {totalItems} roles

{/* Search Input */}

handleSearchValueChange(e.target.value)} className="pl-10 pr-10" disabled={isSearching} /> {isSearching && (

)} {searchValue && ( )}

{/* Search Info */} {searchValue && (

Searching for role name "{searchValue}" {totalItems > 0 && ` - Found ${totalItems} result${totalItems > 1 ? "s" : ""}`}

)} Role Name Created Updated Actions {roles.length > 0 ? ( roles.map((role) => (

{getRoleBadge(role.name)}

{formatDate(role.created_at)} {formatDate(role.updated_at)}

)) ) : ( {searchValue ? `No roles found with name matching "${searchValue}".` : "No role data available."} )}

{/* Pagination */} {totalPages > 1 && (

Showing {(currentPage - 1) * 10 + 1} to {Math.min(currentPage * 10, totalItems)} of {totalItems} results

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

)} {/* Detail Dialog */} {/* Edit Dialog */} {/* Delete Confirmation Dialog */}

) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; body { font-family: Arial, Helvetica, sans-serif; } @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Hide Next.js development indicator */ div[data-nextjs-toast] { display: none !important; } /* Hide the floating development panel */ div[style*="position: fixed"][style*="z-index: 9000"] { display: none !important; } /* Hide route announcer */ #__next-route-announcer { display: none !important; } [V0_FILE]typescriptreact:file="app/login/page.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import Image from "next/image" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardHeader } from "@/components/ui/card" import { Eye, EyeOff, Lock, Mail } from "lucide-react" export default function LoginPage() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [showPassword, setShowPassword] = useState(false) const [isLoading, setIsLoading] = useState(false) const [message, setMessage] = useState("") const router = useRouter() // Check if user is already logged in useEffect(() => { const token = localStorage.getItem("token") if (token) { // Token exists, redirect to dashboard router.push("/dashboard") } }, [router]) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setMessage("") try { const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/admins/login`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ email: email, password }), }) const data = await response.json() if (response.ok && data.success) { // Save token to localStorage localStorage.setItem("token", data.data.token) // Show success message setMessage(data.message || "Login berhasil!") // Redirect to dashboard setTimeout(() => { router.push("/dashboard") }, 1000) } else { // Show error message setMessage(data.message || "Login gagal") } } catch (error) { setMessage("Terjadi kesalahan. Silakan coba lagi.") } finally { setIsLoading(false) } } return (

{message && (

{message}

)}

setEmail(e.target.value)} className="pl-10 h-12 border-slate-200 focus:border-slate-400 focus:ring-slate-400" required disabled={isLoading} />

Password

setPassword(e.target.value)} className="pl-10 pr-10 h-12 border-slate-200 focus:border-slate-400 focus:ring-slate-400" required disabled={isLoading} />

) } [V0_FILE]json:file="components.json" isMerged="true" { "$schema": "https://ui.shadcn.com/schema.json", "style": "default", "rsc": true, "tsx": true, "tailwind": { "config": "tailwind.config.ts", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/dashboard-header.tsx" isMerged="true" "use client" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { SidebarTrigger } from "@/components/ui/sidebar" import { User, LogOut, Settings, Bell } from "lucide-react" export function DashboardHeader() { const router = useRouter() const handleLogout = () => { // Remove token from localStorage localStorage.removeItem("token") // Redirect to login page router.push("/login") } const handleAccountInfo = () => { router.push("/dashboard/account") } return (

Admin Dashboard

Admin User

admin@example.com

Account Information Settings Logout

) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/ui/alert.tsx" isMerged="true" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const alertVariants = cva( "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", { variants: { variant: { default: "bg-background text-foreground", destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", }, }, defaultVariants: { variant: "default", }, } ) const Alert = React.forwardRef< HTMLDivElement, React.HTMLAttributes & VariantProps >(({ className, variant, ...props }, ref) => (

)) Alert.displayName = "Alert" const AlertTitle = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

)) AlertTitle.displayName = "AlertTitle" const AlertDescription = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) AlertDescription.displayName = "AlertDescription" export { Alert, AlertTitle, AlertDescription } [V0_FILE]typescriptreact:file="components/ui/avatar.tsx" isMerged="true" "use client" import * as React from "react" import * as AvatarPrimitive from "@radix-ui/react-avatar" import { cn } from "@/lib/utils" const Avatar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Avatar.displayName = AvatarPrimitive.Root.displayName const AvatarImage = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarImage.displayName = AvatarPrimitive.Image.displayName const AvatarFallback = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName export { Avatar, AvatarImage, AvatarFallback } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, } ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return (
) } export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, } ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return ( ) } ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) Card.displayName = "Card" const CardHeader = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } [V0_FILE]typescriptreact:file="components/ui/dialog.tsx" isMerged="true" "use client" import * as React from "react" import * as DialogPrimitive from "@radix-ui/react-dialog" import { X } from "lucide-react" import { cn } from "@/lib/utils" const Dialog = DialogPrimitive.Root const DialogTrigger = DialogPrimitive.Trigger const DialogPortal = DialogPrimitive.Portal const DialogClose = DialogPrimitive.Close const DialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogOverlay.displayName = DialogPrimitive.Overlay.displayName const DialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} Close )) DialogContent.displayName = DialogPrimitive.Content.displayName const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => (
) DialogHeader.displayName = "DialogHeader" const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => (
) DialogFooter.displayName = "DialogFooter" const DialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogTitle.displayName = DialogPrimitive.Title.displayName const DialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogDescription.displayName = DialogPrimitive.Description.displayName export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, } [V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx" isMerged="true" "use client" import * as React from "react" import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" import { Check, ChevronRight, Circle } from "lucide-react" import { cn } from "@/lib/utils" const DropdownMenu = DropdownMenuPrimitive.Root const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger const DropdownMenuGroup = DropdownMenuPrimitive.Group const DropdownMenuPortal = DropdownMenuPrimitive.Portal const DropdownMenuSub = DropdownMenuPrimitive.Sub const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup const DropdownMenuSubTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, children, ...props }, ref) => ( {children} )) DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName const DropdownMenuSubContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName const DropdownMenuContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, sideOffset = 4, ...props }, ref) => ( )) DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName const DropdownMenuItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, ...props }, ref) => ( )) DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName const DropdownMenuCheckboxItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, checked, ...props }, ref) => ( {children} )) DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName const DropdownMenuRadioItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName const DropdownMenuLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, ...props }, ref) => ( )) DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName const DropdownMenuSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes) => { return ( ) } DropdownMenuShortcut.displayName = "DropdownMenuShortcut" export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, } [V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" const Input = React.forwardRef>( ({ className, type, ...props }, ref) => { return ( ) } ) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true" "use client" import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const labelVariants = cva( "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" ) const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } [V0_FILE]typescriptreact:file="components/ui/select.tsx" isMerged="true" "use client" import * as React from "react" import * as SelectPrimitive from "@radix-ui/react-select" import { Check, ChevronDown, ChevronUp } from "lucide-react" import { cn } from "@/lib/utils" const Select = SelectPrimitive.Root const SelectGroup = SelectPrimitive.Group const SelectValue = SelectPrimitive.Value const SelectTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( span]:line-clamp-1", className )} {...props} > {children} )) SelectTrigger.displayName = SelectPrimitive.Trigger.displayName const SelectScrollUpButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName const SelectScrollDownButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName const SelectContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, position = "popper", ...props }, ref) => ( {children} )) SelectContent.displayName = SelectPrimitive.Content.displayName const SelectLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectLabel.displayName = SelectPrimitive.Label.displayName const SelectItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) SelectItem.displayName = SelectPrimitive.Item.displayName const SelectSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectSeparator.displayName = SelectPrimitive.Separator.displayName export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, } [V0_FILE]typescriptreact:file="components/ui/separator.tsx" isMerged="true" "use client" import * as React from "react" import * as SeparatorPrimitive from "@radix-ui/react-separator" import { cn } from "@/lib/utils" const Separator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >( ( { className, orientation = "horizontal", decorative = true, ...props }, ref ) => ( ) ) Separator.displayName = SeparatorPrimitive.Root.displayName export { Separator } [V0_FILE]typescriptreact:file="components/ui/sheet.tsx" isMerged="true" "use client" import * as React from "react" import * as SheetPrimitive from "@radix-ui/react-dialog" import { cva, type VariantProps } from "class-variance-authority" import { X } from "lucide-react" import { cn } from "@/lib/utils" const Sheet = SheetPrimitive.Root const SheetTrigger = SheetPrimitive.Trigger const SheetClose = SheetPrimitive.Close const SheetPortal = SheetPrimitive.Portal const SheetOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SheetOverlay.displayName = SheetPrimitive.Overlay.displayName const sheetVariants = cva( "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500", { variants: { side: { top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top", bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom", left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm", right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm", }, }, defaultVariants: { side: "right", }, } ) interface SheetContentProps extends React.ComponentPropsWithoutRef, VariantProps {} const SheetContent = React.forwardRef< React.ElementRef, SheetContentProps >(({ side = "right", className, children, ...props }, ref) => ( {children} Close )) SheetContent.displayName = SheetPrimitive.Content.displayName const SheetHeader = ({ className, ...props }: React.HTMLAttributes) => (
) SheetHeader.displayName = "SheetHeader" const SheetFooter = ({ className, ...props }: React.HTMLAttributes) => (
) SheetFooter.displayName = "SheetFooter" const SheetTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SheetTitle.displayName = SheetPrimitive.Title.displayName const SheetDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SheetDescription.displayName = SheetPrimitive.Description.displayName export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, } [V0_FILE]typescriptreact:file="components/ui/sidebar.tsx" isMerged="true" "use client" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { VariantProps, cva } from "class-variance-authority" import { PanelLeft } from "lucide-react" import { useIsMobile } from "@/hooks/use-mobile" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Separator } from "@/components/ui/separator" import { Sheet, SheetContent } from "@/components/ui/sheet" import { Skeleton } from "@/components/ui/skeleton" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip" const SIDEBAR_COOKIE_NAME = "sidebar:state" const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7 const SIDEBAR_WIDTH = "16rem" const SIDEBAR_WIDTH_MOBILE = "18rem" const SIDEBAR_WIDTH_ICON = "3rem" const SIDEBAR_KEYBOARD_SHORTCUT = "b" type SidebarContext = { state: "expanded" | "collapsed" open: boolean setOpen: (open: boolean) => void openMobile: boolean setOpenMobile: (open: boolean) => void isMobile: boolean toggleSidebar: () => void } const SidebarContext = React.createContext(null) function useSidebar() { const context = React.useContext(SidebarContext) if (!context) { throw new Error("useSidebar must be used within a SidebarProvider.") } return context } const SidebarProvider = React.forwardRef< HTMLDivElement, React.ComponentProps<"div"> & { defaultOpen?: boolean open?: boolean onOpenChange?: (open: boolean) => void } >( ( { defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }, ref ) => { const isMobile = useIsMobile() const [openMobile, setOpenMobile] = React.useState(false) // This is the internal state of the sidebar. // We use openProp and setOpenProp for control from outside the component. const [_open, _setOpen] = React.useState(defaultOpen) const open = openProp ?? _open const setOpen = React.useCallback( (value: boolean | ((value: boolean) => boolean)) => { const openState = typeof value === "function" ? value(open) : value if (setOpenProp) { setOpenProp(openState) } else { _setOpen(openState) } // This sets the cookie to keep the sidebar state. document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}` }, [setOpenProp, open] ) // Helper to toggle the sidebar. const toggleSidebar = React.useCallback(() => { return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open) }, [isMobile, setOpen, setOpenMobile]) // Adds a keyboard shortcut to toggle the sidebar. React.useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if ( event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey) ) { event.preventDefault() toggleSidebar() } } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, [toggleSidebar]) // We add a state so that we can do data-state="expanded" or "collapsed". // This makes it easier to style the sidebar with Tailwind classes. const state = open ? "expanded" : "collapsed" const contextValue = React.useMemo( () => ({ state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, }), [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar] ) return (
{children}
) } ) SidebarProvider.displayName = "SidebarProvider" const Sidebar = React.forwardRef< HTMLDivElement, React.ComponentProps<"div"> & { side?: "left" | "right" variant?: "sidebar" | "floating" | "inset" collapsible?: "offcanvas" | "icon" | "none" } >( ( { side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }, ref ) => { const { isMobile, state, openMobile, setOpenMobile } = useSidebar() if (collapsible === "none") { return (
{children}
) } if (isMobile) { return (
{children}
) } return (
{/* This is what handles the sidebar gap on desktop */}

) } ) Sidebar.displayName = "Sidebar" const SidebarTrigger = React.forwardRef< React.ElementRef, React.ComponentProps >(({ className, onClick, ...props }, ref) => { const { toggleSidebar } = useSidebar() return ( ) }) SidebarTrigger.displayName = "SidebarTrigger" const SidebarRail = React.forwardRef< HTMLButtonElement, React.ComponentProps<"button"> >(({ className, ...props }, ref) => { const { toggleSidebar } = useSidebar() return (

Admin Management

Admin Management

{adminDetail.general.name}

Admin Information

Dashboard

Dashboard

Role Management

Role Management

{roleDetail.general.name}

Assigned Menus ({roleDetail.general.menu.menu.length})

Role Information

Admin Dashboard