[V0_FILE]markdown:file="README.md" isMerged="true" # SIPINJAM app build *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/rius-projects-71c87303/v0-sipinjam-app-build) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/cICZ5gCEd07) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/rius-projects-71c87303/v0-sipinjam-app-build](https://vercel.com/rius-projects-71c87303/v0-sipinjam-app-build)** ## Build your app Continue building your app on: **[https://v0.app/chat/cICZ5gCEd07](https://v0.app/chat/cICZ5gCEd07)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 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/admin/bookings/loading.tsx" isMerged="true" import { Skeleton } from "@/components/ui/skeleton" export default function AdminBookingsLoading() { return (

{[1, 2, 3].map((i) => ( ))}

) } [V0_FILE]typescriptreact:file="app/admin/dashboard/page.tsx" isMerged="true" import { StatsCards } from "@/components/admin/stats-cards" import { PendingCarousel } from "@/components/admin/pending-carousel" import { QuickActions } from "@/components/admin/quick-actions" export default function AdminDashboard() { return (

Dashboard Admin

Selamat datang di Portal Admin SIPINJAM

) } [V0_FILE]typescriptreact:file="app/admin/equipment/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/admin/equipment/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Plus, Search, Filter } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { EquipmentFormModal } from "@/components/admin/equipment-form-modal" import { EquipmentCard } from "@/components/user/equipment-card" import { ScheduleCalendar } from "@/components/admin/schedule-calendar" import { toast } from "sonner" import type { Equipment, Booking } from "@/lib/types" import { mockEquipment, mockBookings } from "@/lib/mock-data" export default function EquipmentManagementPage() { const [equipment, setEquipment] = useState([]) const [bookings, setBookings] = useState([]) const [searchQuery, setSearchQuery] = useState("") const [statusFilter, setStatusFilter] = useState("all") const [categoryFilter, setCategoryFilter] = useState("all") const [isFormOpen, setIsFormOpen] = useState(false) const [selectedEquipment, setSelectedEquipment] = useState() const [viewSchedule, setViewSchedule] = useState(null) useEffect(() => { const savedEquipment = localStorage.getItem("sipinjam_equipment") const savedBookings = localStorage.getItem("sipinjam_bookings") if (savedEquipment) { setEquipment(JSON.parse(savedEquipment)) } else { setEquipment(mockEquipment) localStorage.setItem("sipinjam_equipment", JSON.stringify(mockEquipment)) } if (savedBookings) { setBookings(JSON.parse(savedBookings)) } else { setBookings(mockBookings) } }, []) const handleSaveEquipment = (equipmentData: Partial) => { let updatedEquipment: Equipment[] if (equipmentData.id) { // Update existing equipment updatedEquipment = equipment.map((item) => item.id === equipmentData.id ? ({ ...item, ...equipmentData } as Equipment) : item, ) toast.success("Barang berhasil diperbarui") } else { // Add new equipment const newEquipment: Equipment = { id: `eq-${Date.now()}`, name: equipmentData.name!, category: equipmentData.category!, quantity: equipmentData.quantity!, available: equipmentData.available!, status: equipmentData.status!, imageUrl: equipmentData.imageUrl || "/placeholder.svg", description: equipmentData.description!, } updatedEquipment = [...equipment, newEquipment] toast.success("Barang baru berhasil ditambahkan") } setEquipment(updatedEquipment) localStorage.setItem("sipinjam_equipment", JSON.stringify(updatedEquipment)) } const handleEditEquipment = (item: Equipment) => { setSelectedEquipment(item) setIsFormOpen(true) } const handleAddNew = () => { setSelectedEquipment(undefined) setIsFormOpen(true) } const filteredEquipment = equipment.filter((item) => { const matchesSearch = item.name.toLowerCase().includes(searchQuery.toLowerCase()) || item.category.toLowerCase().includes(searchQuery.toLowerCase()) const matchesStatus = statusFilter === "all" || item.status === statusFilter const matchesCategory = categoryFilter === "all" || item.category === categoryFilter return matchesSearch && matchesStatus && matchesCategory }) const categories = Array.from(new Set(equipment.map((e) => e.category))) const stats = { total: equipment.reduce((sum, item) => sum + item.quantity, 0), available: equipment.reduce((sum, item) => sum + item.available, 0), booked: equipment.reduce((sum, item) => sum + (item.quantity - item.available), 0), items: equipment.length, } if (viewSchedule) { return (

Jadwal Barang

Lihat jadwal peminjaman barang

) } return (

Kelola Barang

Kelola semua barang dalam sistem

{/* Stats */}

Total Unit

{stats.total}

Tersedia

{stats.available}

Dipinjam

{stats.booked}

Jenis Barang

{stats.items}

{/* Filters */}

setSearchQuery(e.target.value)} className="pl-9" />

{/* Equipment Grid */}

{filteredEquipment.map((item) => (

{}} />

))}

{filteredEquipment.length === 0 && (

Tidak ada barang ditemukan

)} setIsFormOpen(false)} equipment={selectedEquipment} onSave={handleSaveEquipment} />

) } [V0_FILE]typescriptreact:file="app/admin/layout.tsx" isMerged="true" "use client" import type React from "react" import { useEffect, useState } from "react" import { useRouter } from "next/navigation" import { AdminSidebar } from "@/components/layouts/admin-sidebar" import { UserAvatarDropdown } from "@/components/layouts/user-avatar-dropdown" import { Footer } from "@/components/layouts/footer" import { ThemeProvider } from "@/components/providers/theme-provider" import type { User } from "@/lib/types" export default function AdminLayout({ children, }: { children: React.ReactNode }) { const router = useRouter() const [user, setUser] = useState(null) const [isLoading, setIsLoading] = useState(true) useEffect(() => { const authData = localStorage.getItem("sipinjam_auth") if (!authData) { router.push("/login") return } try { const parsed = JSON.parse(authData) if (parsed.role !== "admin") { router.push("/login") return } setUser(parsed) } catch (error) { router.push("/login") } finally { setIsLoading(false) } }, [router]) if (isLoading) { return (

) } if (!user) { return null } return (

{/* Header */}

Admin Portal

{/* Main content */}

{children}

) } [V0_FILE]typescriptreact:file="app/admin/rooms/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/admin/rooms/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Plus, Search, Filter } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { RoomFormModal } from "@/components/admin/room-form-modal" import { RoomCard } from "@/components/user/room-card" import { ScheduleCalendar } from "@/components/admin/schedule-calendar" import { toast } from "sonner" import type { Room, Booking } from "@/lib/types" import { mockRooms, mockBookings } from "@/lib/mock-data" export default function RoomsManagementPage() { const [rooms, setRooms] = useState([]) const [bookings, setBookings] = useState([]) const [searchQuery, setSearchQuery] = useState("") const [statusFilter, setStatusFilter] = useState("all") const [buildingFilter, setBuildingFilter] = useState("all") const [isFormOpen, setIsFormOpen] = useState(false) const [selectedRoom, setSelectedRoom] = useState() const [viewSchedule, setViewSchedule] = useState(null) useEffect(() => { const savedRooms = localStorage.getItem("sipinjam_rooms") const savedBookings = localStorage.getItem("sipinjam_bookings") if (savedRooms) { setRooms(JSON.parse(savedRooms)) } else { setRooms(mockRooms) localStorage.setItem("sipinjam_rooms", JSON.stringify(mockRooms)) } if (savedBookings) { setBookings(JSON.parse(savedBookings)) } else { setBookings(mockBookings) } }, []) const handleSaveRoom = (roomData: Partial) => { let updatedRooms: Room[] if (roomData.id) { // Update existing room updatedRooms = rooms.map((room) => (room.id === roomData.id ? ({ ...room, ...roomData } as Room) : room)) toast.success("Ruangan berhasil diperbarui") } else { // Add new room const newRoom: Room = { id: `room-${Date.now()}`, name: roomData.name!, capacity: roomData.capacity!, facilities: roomData.facilities!, status: roomData.status!, imageUrl: roomData.imageUrl || "/placeholder.svg", building: roomData.building!, floor: roomData.floor!, } updatedRooms = [...rooms, newRoom] toast.success("Ruangan baru berhasil ditambahkan") } setRooms(updatedRooms) localStorage.setItem("sipinjam_rooms", JSON.stringify(updatedRooms)) } const handleEditRoom = (room: Room) => { setSelectedRoom(room) setIsFormOpen(true) } const handleAddNew = () => { setSelectedRoom(undefined) setIsFormOpen(true) } const filteredRooms = rooms.filter((room) => { const matchesSearch = room.name.toLowerCase().includes(searchQuery.toLowerCase()) || room.building.toLowerCase().includes(searchQuery.toLowerCase()) const matchesStatus = statusFilter === "all" || room.status === statusFilter const matchesBuilding = buildingFilter === "all" || room.building === buildingFilter return matchesSearch && matchesStatus && matchesBuilding }) const buildings = Array.from(new Set(rooms.map((r) => r.building))) const stats = { total: rooms.length, available: rooms.filter((r) => r.status === "available").length, booked: rooms.filter((r) => r.status === "booked").length, inUse: rooms.filter((r) => r.status === "in-use").length, } if (viewSchedule) { return (

Jadwal Ruangan

Lihat jadwal peminjaman ruangan

) } return (

Kelola Ruangan

Kelola semua ruangan dalam sistem

{/* Stats */}

Total Ruangan

{stats.total}

Tersedia

{stats.available}

Booking

{stats.booked}

Digunakan

{stats.inUse}

{/* Filters */}

setSearchQuery(e.target.value)} className="pl-9" />

{/* Room Grid */}

{filteredRooms.map((room) => (

{}} />

))}

{filteredRooms.length === 0 && (

Tidak ada ruangan ditemukan

)} setIsFormOpen(false)} room={selectedRoom} onSave={handleSaveRoom} />

) } [V0_FILE]typescriptreact:file="app/admin/settings/page.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { useRouter } from "next/navigation" import { getUserSession, setUserSession } from "@/lib/auth" import { AccountSettings } from "@/components/settings/account-settings" import type { User } from "@/lib/types" export default function AdminSettingsPage() { const router = useRouter() const [user, setUser] = useState(null) useEffect(() => { const currentUser = getUserSession() if (!currentUser || currentUser.role !== "admin") { router.push("/login") return } setUser(currentUser) }, [router]) const handleUpdateUser = (updatedUser: User) => { setUserSession(updatedUser) setUser(updatedUser) } if (!user) { return null } return (

Settings

Kelola informasi akun dan preferensi Anda

) } [V0_FILE]typescriptreact:file="app/admin/users/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import type { User, UserDeactivation } from "@/lib/types" import { mockUsers } from "@/lib/mock-data" import { UserTable } from "@/components/admin/user-table" import { UserFormModal } from "@/components/admin/user-form-modal" import { DeactivateUserModal } from "@/components/admin/deactivate-user-modal" import { toast } from "sonner" import { Users } from "lucide-react" export default function UsersPage() { const [users, setUsers] = useState([]) const [isFormOpen, setIsFormOpen] = useState(false) const [isDeactivateOpen, setIsDeactivateOpen] = useState(false) const [selectedUser, setSelectedUser] = useState(null) useEffect(() => { // Load users from localStorage or use mock data const savedUsers = localStorage.getItem("sipinjam_users") if (savedUsers) { const parsed = JSON.parse(savedUsers) // Convert date strings back to Date objects const usersWithDates = parsed.map((u: any) => ({ ...u, createdAt: new Date(u.createdAt), })) setUsers(usersWithDates) } else { setUsers(mockUsers) localStorage.setItem("sipinjam_users", JSON.stringify(mockUsers)) } }, []) const saveUsers = (updatedUsers: User[]) => { setUsers(updatedUsers) localStorage.setItem("sipinjam_users", JSON.stringify(updatedUsers)) } const handleAddNew = () => { setSelectedUser(null) setIsFormOpen(true) } const handleEdit = (user: User) => { setSelectedUser(user) setIsFormOpen(true) } const handleSave = (data: Partial) => { if (selectedUser) { // Edit existing user const updatedUsers = users.map((u) => (u.id === selectedUser.id ? { ...u, ...data } : u)) saveUsers(updatedUsers) } else { // Add new user const newUser: User = { id: `user-${Date.now()}`, name: data.name!, email: data.email!, role: data.role!, isActive: true, createdAt: new Date(), } saveUsers([...users, newUser]) } } const handleDeactivate = (user: User) => { setSelectedUser(user) setIsDeactivateOpen(true) } const handleDeactivateConfirm = (reason: string, duration?: number) => { if (!selectedUser) return // Save deactivation info const deactivation: UserDeactivation = { userId: selectedUser.id, reason, deactivatedBy: "admin-1", deactivatedAt: new Date(), duration, reactivateAt: duration ? new Date(Date.now() + duration * 24 * 60 * 60 * 1000) : undefined, } const deactivations = JSON.parse(localStorage.getItem("sipinjam_deactivations") || "[]") deactivations.push(deactivation) localStorage.setItem("sipinjam_deactivations", JSON.stringify(deactivations)) // Update user status const updatedUsers = users.map((u) => (u.id === selectedUser.id ? { ...u, isActive: false } : u)) saveUsers(updatedUsers) } const handleActivate = (user: User) => { const updatedUsers = users.map((u) => (u.id === user.id ? { ...u, isActive: true } : u)) saveUsers(updatedUsers) toast.success("User berhasil diaktifkan") } const handleDelete = (user: User) => { // Not implemented - typically would show confirmation dialog toast.info("Fitur hapus user belum diimplementasikan") } return (

Kelola User

Manajemen user dan hak akses sistem

setIsFormOpen(false)} user={selectedUser} onSave={handleSave} /> setIsDeactivateOpen(false)} user={selectedUser} onConfirm={handleDeactivateConfirm} />

) } [V0_FILE]typescriptreact:file="app/error.tsx" isMerged="true" "use client" import { useEffect } from "react" import { AlertCircle } from "lucide-react" import { Button } from "@/components/ui/button" export default function Error({ error, reset }: { error: Error & { digest?: string }; reset?: () => void }) { useEffect(() => { console.error("Application error:", error) }, [error]) return (

Terjadi Kesalahan

Maaf, terjadi kesalahan yang tidak terduga. Tim kami telah diberi tahu dan akan segera memperbaikinya.

) } [V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* User Theme - Blue Primary */ --user-primary-dark: #1e3a8a; --user-primary: #3b82f6; --user-primary-light: #60a5fa; --user-accent: #2563eb; --user-bg: #eff6ff; /* Admin Theme - Orange Primary */ --admin-primary-dark: #9a3412; --admin-primary: #f97316; --admin-primary-light: #fb923c; --admin-accent: #ea580c; --admin-bg: #fff7ed; /* Base Theme Variables */ --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.985 0 0); --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.985 0 0); --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; } /* Adding smooth transitions for theme changes */ * { transition-property: background-color, border-color, color, fill, stroke; transition-duration: 200ms; transition-timing-function: ease-in-out; } /* Adding scroll behavior */ html { scroll-behavior: smooth; } /* Custom scrollbar styling */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--muted); } ::-webkit-scrollbar-thumb { background: var(--muted-foreground); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--foreground); } } /* Adding animation utilities */ @layer utilities { .animate-fade-in { animation: fadeIn 0.3s ease-in-out; } .animate-slide-up { animation: slideUp 0.3s ease-in-out; } .animate-slide-down { animation: slideDown 0.3s ease-in-out; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slideDown { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } [V0_FILE]typescriptreact:file="app/login/page.tsx" isMerged="true" "use client" import { useState } from "react" import { LoginForm } from "@/components/auth/login-form" import { Building2, BookCheck } from "lucide-react" import type { UserRole } from "@/lib/types" export default function LoginPage() { const [selectedRole, setSelectedRole] = useState("user") return (

{/* Left Side - Pattern Background with Overlay */}

{/* Subtle overlay image */}

{/* Gradient Overlay - changes based on role */}

{/* Content Overlay */}

SIPINJAM

Sistem Informasi Peminjaman

Kelola Peminjaman dengan Mudah

Platform terpadu untuk peminjaman ruangan dan barang kampus. Proses cepat, transparan, dan efisien.

Booking online 24/7
Tracking status real-time
Riwayat peminjaman lengkap

{/* Right Side - Login Form */}

{/* Mobile Logo */}

SIPINJAM

Sistem Informasi Peminjaman

) } [V0_FILE]typescriptreact:file="app/not-found.tsx" isMerged="true" import { FileQuestion } from "lucide-react" import { Button } from "@/components/ui/button" import Link from "next/link" export default function NotFound() { return (

404 - Halaman Tidak Ditemukan

Maaf, halaman yang Anda cari tidak dapat ditemukan. Halaman mungkin telah dipindahkan atau dihapus.

) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { useEffect } from "react" import { useRouter } from "next/navigation" import { Loader2 } from "lucide-react" export default function Home() { const router = useRouter() useEffect(() => { // Immediate redirect to login router.replace("/login") }, [router]) // Show loading state while redirecting return (

Mengarahkan ke halaman login...

) } [V0_FILE]typescriptreact:file="app/user/dashboard/page.tsx" isMerged="true" import { HeroSection } from "@/components/user/hero-section" import { RulesSection } from "@/components/user/rules-section" import { RoomCarousel } from "@/components/user/room-carousel" import { EquipmentCarousel } from "@/components/user/equipment-carousel" export default function UserDashboard() { return (

) } [V0_FILE]typescriptreact:file="app/user/equipment/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/user/layout.tsx" isMerged="true" "use client" import type React from "react" import { useEffect, useState } from "react" import { useRouter } from "next/navigation" import { UserSidebar } from "@/components/layouts/user-sidebar" import { UserAvatarDropdown } from "@/components/layouts/user-avatar-dropdown" import { Footer } from "@/components/layouts/footer" import { ThemeProvider } from "@/components/providers/theme-provider" import type { User } from "@/lib/types" export default function UserLayout({ children, }: { children: React.ReactNode }) { const router = useRouter() const [user, setUser] = useState(null) const [isLoading, setIsLoading] = useState(true) useEffect(() => { const authData = localStorage.getItem("sipinjam_auth") if (!authData) { router.push("/login") return } try { const parsed = JSON.parse(authData) if (parsed.role !== "user") { router.push("/login") return } setUser(parsed) } catch (error) { router.push("/login") } finally { setIsLoading(false) } }, [router]) if (isLoading) { return (

) } if (!user) { return null } return (

{/* Header */}

User Portal

{/* Main content */}

{children}

) } [V0_FILE]typescriptreact:file="app/user/rooms/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/user/rules/page.tsx" isMerged="true" import { RulesList } from "@/components/user/rules-list" import { AcademicCalendar } from "@/components/user/academic-calendar" import { AlertTriangle, BookOpen } from "lucide-react" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" export default function RulesPage() { return (

Tata Tertib & Kalender

Peraturan peminjaman dan kalender akademik kampus

Informasi Penting Harap membaca dan memahami semua peraturan sebelum melakukan peminjaman. Pelanggaran akan dikenakan sanksi sesuai ketentuan yang berlaku.

Peraturan Peminjaman

Kalender Akademik

Sanksi Pelanggaran Pelanggaran berulang dapat mengakibatkan suspend atau blacklist permanen dari sistem peminjaman. Pastikan untuk mengembalikan barang tepat waktu dan dalam kondisi baik.

) } [V0_FILE]typescriptreact:file="app/user/settings/page.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { useRouter } from "next/navigation" import { getUserSession, setUserSession } from "@/lib/auth" import { AccountSettings } from "@/components/settings/account-settings" import type { User } from "@/lib/types" export default function UserSettingsPage() { const router = useRouter() const [user, setUser] = useState(null) useEffect(() => { const currentUser = getUserSession() if (!currentUser || currentUser.role !== "user") { router.push("/login") return } setUser(currentUser) }, [router]) const handleUpdateUser = (updatedUser: User) => { setUserSession(updatedUser) setUser(updatedUser) } if (!user) { return null } return (

Settings

Kelola informasi akun dan preferensi Anda

) } [V0_FILE]json:file="components.json" isMerged="true" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "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/admin/approval-modal.tsx" isMerged="true" "use client" import { useState } from "react" import { CheckCircle, XCircle, Loader2 } from "lucide-react" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter, } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { Label } from "@/components/ui/label" import type { Booking } from "@/lib/types" interface ApprovalModalProps { open: boolean onOpenChange: (open: boolean) => void booking: Booking | null onApprove: (bookingId: string, notes?: string) => void onReject: (bookingId: string, reason: string) => void } export function ApprovalModal({ open, onOpenChange, booking, onApprove, onReject }: ApprovalModalProps) { const [action, setAction] = useState<"approve" | "reject" | null>(null) const [notes, setNotes] = useState("") const [isLoading, setIsLoading] = useState(false) const handleSubmit = async () => { if (!booking || !action) return if (action === "reject" && !notes.trim()) { alert("Alasan penolakan harus diisi") return } setIsLoading(true) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)) if (action === "approve") { onApprove(booking.id, notes) } else { onReject(booking.id, notes) } setIsLoading(false) setAction(null) setNotes("") onOpenChange(false) } if (!booking) return null return (