Frontend

2026-02-19 18:14:19 +07:00
parent d09c21a41f
commit 9d4cc8bfed
29 changed files with 8582 additions and 1 deletions
@@ -0,0 +1,39 @@
+export default function Header() {
+  return (
+    <header className="sticky top-0 z-40 flex w-full bg-white drop-shadow-1 dark:bg-boxdark dark:drop-shadow-none">
+      <div className="flex grow items-center justify-between px-4 py-4 shadow-2 md:px-6 2xl:px-11">
+        
+        {/* Search Bar (Hiasan) */}
+        <div className="hidden sm:block">
+          <form action="#" method="POST">
+            <div className="relative">
+              <input
+                type="text"
+                placeholder="Type to search..."
+                className="w-full bg-transparent pl-9 pr-4 font-medium focus:outline-none xl:w-125"
+              />
+            </div>
+          </form>
+        </div>
+
+        {/* User Area */}
+        <div className="flex items-center gap-3 2xsm:gap-7">
+          <div className="flex items-center gap-4">
+            <span className="hidden text-right lg:block">
+              <span className="block text-sm font-medium text-black ">
+                Valentino Heman
+              </span>
+              <span className="block text-xs font-medium">Mahasiswa</span>
+            </span>
+            
+            {/* Avatar Bulat */}
+            <div className="h-10 w-10 rounded-full bg-slate-300 overflow-hidden">
+               {/* Nanti bisa diisi Image */}
+               <div className="flex items-center justify-center h-full text-slate-600 font-bold">VH</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}
@@ -0,0 +1,104 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { LayoutDashboard, BookOpen, PlusCircle, Calendar, MonitorPlay } from "lucide-react"; // Icon
+
+export default function Sidebar() {
+  const pathname = usePathname();
+
+  // Helper untuk mengecek apakah menu sedang aktif
+  const isActive = (path: string) => pathname === path;
+
+  return (
+    <aside className="hidden lg:flex flex-col w-72 h-screen overflow-y-hidden bg-slate-900 text-white duration-300 ease-linear dark:bg-slate-900 border-r border-slate-800">
+      {/* --- LOGO AREA --- */}
+      <div className="flex items-center justify-center gap-2 px-6 py-5.5 lg:py-6.5 border-b border-slate-800">
+        <div className="text-2xl font-bold text-yellow-500">S-CLASS</div>
+        <div className="text-xs text-gray-400 font-medium">Admin Panel</div>
+      </div>
+
+      {/* --- MENU LIST --- */}
+      <div className="no-scrollbar flex flex-col overflow-y-auto duration-300 ease-linear">
+        <nav className="mt-5 px-4 py-4 lg:mt-9 lg:px-6">
+          
+          {/* GROUP: MENU UTAMA */}
+          <div>
+            <h3 className="mb-4 ml-4 text-sm font-semibold text-gray-400">MENU</h3>
+            
+            <ul className="mb-6 flex flex-col gap-1.5">
+              
+              {/* Dashboard */}
+              <li>
+                <Link
+                  href="/dashboard"
+                  className={`group relative flex items-center gap-2.5 rounded-sm px-4 py-2 font-medium duration-300 ease-in-out hover:bg-slate-700 ${
+                    isActive("/dashboard") ? "bg-slate-700 text-white" : "text-gray-300"
+                  }`}
+                >
+                  <LayoutDashboard size={18} />
+                  Dashboard
+                </Link>
+              </li>
+
+              {/* GROUP: ROOMS */}
+              <li className="mt-4 mb-2 ml-4 text-xs font-medium text-gray-500 uppercase">ROOMS</li>
+              
+              <li>
+                <Link
+                  href="/dashboard/rooms"
+                  className={`group relative flex items-center gap-2.5 rounded-sm px-4 py-2 font-medium duration-300 ease-in-out hover:bg-slate-700 ${
+                    isActive("/dashboard/rooms") ? "bg-slate-700 text-white" : "text-gray-300"
+                  }`}
+                >
+                  <MonitorPlay size={18} />
+                  View Rooms
+                </Link>
+              </li>
+
+              {/* GROUP: BOOKING */}
+              <li className="mt-4 mb-2 ml-4 text-xs font-medium text-gray-500 uppercase">BOOKINGS</li>
+
+              <li>
+                <Link
+                  href="/dashboard/bookings"
+                  className={`group relative flex items-center gap-2.5 rounded-sm px-4 py-2 font-medium duration-300 ease-in-out hover:bg-slate-700 ${
+                    isActive("/dashboard/bookings") ? "bg-slate-700 text-white" : "text-gray-300"
+                  }`}
+                >
+                  <BookOpen size={18} />
+                  View Booking
+                </Link>
+              </li>
+
+              <li>
+                <Link
+                  href="/dashboard/bookings/add"
+                  className={`group relative flex items-center gap-2.5 rounded-sm px-4 py-2 font-medium duration-300 ease-in-out hover:bg-slate-700 ${
+                    isActive("/dashboard/bookings/add") ? "bg-slate-700 text-white" : "text-gray-300"
+                  }`}
+                >
+                  <PlusCircle size={18} />
+                  Add Booking
+                </Link>
+              </li>
+
+              <li>
+                <Link
+                  href="/dashboard/bookings/calendar"
+                  className={`group relative flex items-center gap-2.5 rounded-sm px-4 py-2 font-medium duration-300 ease-in-out hover:bg-slate-700 ${
+                    isActive("/dashboard/bookings/calendar") ? "bg-slate-700 text-white" : "text-gray-300"
+                  }`}
+                >
+                  <Calendar size={18} />
+                  Calendar View
+                </Link>
+              </li>
+
+            </ul>
+          </div>
+        </nav>
+      </div>
+    </aside>
+  );
+}