Change Audiens

components/ui/Navbar.tsx

@@ -1,11 +1,12 @@
 'use client';
 
 import { ThemeToggle } from '@/components/theme-toggle';
-import { Menu, PanelLeftClose, PanelLeft } from 'lucide-react';
+import { Menu, PanelLeftClose, PanelLeft, LogOut } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
 import SidebarContent from '@/components/ui/SidebarContent';
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 
 interface NavbarProps {
   onSidebarToggle: () => void;
@@ -13,6 +14,22 @@ interface NavbarProps {
 }
 
 const Navbar = ({ onSidebarToggle, isSidebarCollapsed }: NavbarProps) => {
+  const router = useRouter();
+
+  const handleLogout = async () => {
+    try {
+      const response = await fetch('/api/auth/logout', {
+        method: 'POST',
+      });
+
+      if (response.ok) {
+        router.push('/');
+      }
+    } catch (error) {
+      console.error('Logout error:', error);
+    }
+  };
+
   return (
     <div className="bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b py-2 px-5 flex justify-between items-center z-30 sticky top-0">
       <div className="flex items-center gap-2">
@@ -48,7 +65,7 @@ const Navbar = ({ onSidebarToggle, isSidebarCollapsed }: NavbarProps) => {
           </Button>
         </div>
         
-        <Link href="/" className="flex items-center text-lg font-semibold hover:text-primary transition-colors">
+        <Link href="/dashboard" className="flex items-center text-lg font-semibold hover:text-primary transition-colors">
           <img src="/podif-icon.png" alt="PODIF Logo" className="h-6 w-auto mr-2" />
           PODIF
         </Link>
@@ -56,6 +73,15 @@ const Navbar = ({ onSidebarToggle, isSidebarCollapsed }: NavbarProps) => {
 
       <div className="flex items-center gap-4">
         <ThemeToggle />
+        <Button 
+          variant="outline" 
+          size="icon" 
+          onClick={handleLogout}
+          title="Logout"
+        >
+          <LogOut className="h-5 w-5" />
+          <span className="sr-only">Logout</span>
+        </Button>
       </div>
     </div>
   );

components/ui/SidebarContent.tsx

@@ -27,7 +27,7 @@ const SidebarContent = () => {
     <Command className="bg-background h-full">
       <CommandList className="overflow-visible">
         <CommandGroup heading="Dashboard PODIF" className="mt-2">      
-          <Link href="/" className="w-full no-underline cursor-pointer">
+          <Link href="/dashboard" className="w-full no-underline cursor-pointer">
             <CommandItem className="py-2 px-3 hover:bg-accent hover:text-accent-foreground rounded-md flex items-center transition-colors cursor-pointer">
               <Home className="h-4 w-4" />
               <span>Dashboard</span>
@@ -46,23 +46,23 @@ const SidebarContent = () => {
                 </AccordionTrigger>
                 <AccordionContent>
                   <div className="pl-6 flex flex-col space-y-1">
-                    <Link href="/mahasiswa/total" className="py-2 px-3 hover:bg-accent hover:text-accent-foreground rounded-md flex items-center transition-colors">
+                    <Link href="/dashboard/mahasiswa/total" className="py-2 px-3 hover:bg-accent hover:text-accent-foreground rounded-md flex items-center transition-colors">
                       <Users className="mr-2 h-4 w-4" />
                       <span>Mahasiswa Total</span>
                     </Link>
-                    <Link href="/mahasiswa/status" className="py-2 px-3 hover:bg-accent hover:text-accent-foreground rounded-md flex items-center transition-colors">
+                    <Link href="/dashboard/mahasiswa/status" className="py-2 px-3 hover:bg-accent hover:text-accent-foreground rounded-md flex items-center transition-colors">
                       <GraduationCap className="mr-2 h-4 w-4" />
                       <span>Mahasiswa Status</span>
                     </Link>
-                    <Link href="/mahasiswa/lulustepatwaktu" className="py-2 px-3 hover:bg-accent hover:text-accent-foreground rounded-md flex items-center transition-colors">
+                    <Link href="/dashboard/mahasiswa/lulustepatwaktu" className="py-2 px-3 hover:bg-accent hover:text-accent-foreground rounded-md flex items-center transition-colors">
                       <Clock className="mr-2 h-4 w-4" />
                       <span>Mahasiswa Lulus Tepat Waktu</span>
                     </Link>
-                    <Link href="/mahasiswa/beasiswa" className="py-2 px-3 hover:bg-accent hover:text-accent-foreground rounded-md flex items-center transition-colors">
+                    <Link href="/dashboard/mahasiswa/beasiswa" className="py-2 px-3 hover:bg-accent hover:text-accent-foreground rounded-md flex items-center transition-colors">
                       <BookOpen className="mr-2 h-4 w-4" />
                       <span>Mahasiswa Beasiswa</span>
                     </Link>
-                    <Link href="/mahasiswa/berprestasi" className="py-2 px-3 hover:bg-accent hover:text-accent-foreground rounded-md flex items-center transition-colors">
+                    <Link href="/dashboard/mahasiswa/berprestasi" className="py-2 px-3 hover:bg-accent hover:text-accent-foreground rounded-md flex items-center transition-colors">
                       <Award className="mr-2 h-4 w-4" />
                       <span>Mahasiswa Berprestasi</span>
                     </Link>
@@ -74,7 +74,7 @@ const SidebarContent = () => {
         </CommandGroup>
         <CommandSeparator />
         <CommandGroup heading="Data Diri">
-          <Link href="/mahasiswa/profile" className="w-full no-underline cursor-pointer" style={{ cursor: 'pointer' }}>
+          <Link href="/dashboard/mahasiswa/profile" className="w-full no-underline cursor-pointer" style={{ cursor: 'pointer' }}>
             <CommandItem className="py-2 px-3 hover:bg-accent hover:text-accent-foreground rounded-md flex items-center transition-colors cursor-pointer">
               <User className="h-4 w-4" />
               <span>Profile</span>

components/ui/alert.tsx

@@ -0,0 +1,66 @@
+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 px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }