refactor: Standardize formatting and improve flash message handling in MainLayout

resources/js/Layouts/MainLayout.jsx

@@ -1,22 +1,24 @@
-import { Link, usePage } from '@inertiajs/react';
+import { Link, usePage } from "@inertiajs/react";
-import { useState } from 'react';
+import { useState } from "react";
 
 export default function MainLayout({ children }) {
     const [sidebarOpen, setSidebarOpen] = useState(true);
     const { url } = usePage();
 
     const menus = [
-        { name: 'Dashboard',   href: '/',            icon: '🏠' },
+        { name: "Dashboard", href: "/", icon: "🏠" },
-        { name: 'Buku',        href: '/buku',        icon: '📚' },
+        { name: "Buku", href: "/buku", icon: "📚" },
-        { name: 'Kategori',    href: '/kategori',    icon: '🏷️' },
+        { name: "Kategori", href: "/kategori", icon: "🏷️" },
-        { name: 'Anggota',     href: '/anggota',     icon: '👥' },
+        { name: "Anggota", href: "/anggota", icon: "👥" },
-        { name: 'Peminjaman',  href: '/peminjaman',  icon: '📋' },
+        { name: "Peminjaman", href: "/peminjaman", icon: "📋" },
     ];
 
     return (
         <div className="flex h-screen bg-gray-100">
             {/* Sidebar */}
-            <aside className={`${sidebarOpen ? 'w-64' : 'w-16'} bg-indigo-800 text-white transition-all duration-300 flex flex-col`}>
+            <aside
+                className={`${sidebarOpen ? "w-64" : "w-16"} bg-indigo-800 text-white transition-all duration-300 flex flex-col`}
+            >
                 <div className="flex items-center justify-between p-4 border-b border-indigo-700">
                     {sidebarOpen && (
                         <h1 className="text-xl font-bold">📖 Perpustakaanku</h1>
@@ -25,7 +27,7 @@ export default function MainLayout({ children }) {
                         onClick={() => setSidebarOpen(!sidebarOpen)}
                         className="p-1 rounded hover:bg-indigo-700"
                     >
-                        {sidebarOpen ? '◀' : '▶'}
+                        {sidebarOpen ? "◀" : "▶"}
                     </button>
                 </div>
                 <nav className="flex-1 p-2 space-y-1">
@@ -35,12 +37,14 @@ export default function MainLayout({ children }) {
                             href={menu.href}
                             className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
                                 url === menu.href
-                                    ? 'bg-indigo-600 text-white'
+                                    ? "bg-indigo-600 text-white"
-                                    : 'hover:bg-indigo-700 text-indigo-200'
+                                    : "hover:bg-indigo-700 text-indigo-200"
                             }`}
                         >
                             <span className="text-xl">{menu.icon}</span>
-                            {sidebarOpen && <span className="font-medium">{menu.name}</span>}
+                            {sidebarOpen && (
+                                <span className="font-medium">{menu.name}</span>
+                            )}
                         </Link>
                     ))}
                 </nav>
@@ -50,19 +54,25 @@ export default function MainLayout({ children }) {
             <div className="flex-1 flex flex-col overflow-hidden">
                 {/* Header */}
                 <header className="bg-white shadow-sm px-6 py-4 flex items-center justify-between">
-                    <h2 className="text-lg font-semibold text-gray-700">Sistem Perpustakaanku</h2>
+                    <h2 className="text-lg font-semibold text-gray-700">
-                    <span className="text-sm text-gray-500">📅 {new Date().toLocaleDateString('id-ID', {
+                        Sistem Perpustakaanku
-                        weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
+                    </h2>
-                    })}</span>
+                    <span className="text-sm text-gray-500">
+                        📅{" "}
+                        {new Date().toLocaleDateString("id-ID", {
+                            weekday: "long",
+                            year: "numeric",
+                            month: "long",
+                            day: "numeric",
+                        })}
+                    </span>
                 </header>
 
                 {/* Flash Message */}
                 <FlashMessage />
 
                 {/* Content */}
-                <main className="flex-1 overflow-y-auto p-6">
+                <main className="flex-1 overflow-y-auto p-6">{children}</main>
-                    {children}
-                </main>
             </div>
         </div>
     );
@@ -70,12 +80,23 @@ export default function MainLayout({ children }) {
 
 function FlashMessage() {
     const { flash } = usePage().props;
-    if (!flash?.success) return null;
+
+    if (!flash?.success && !flash?.error) return null;
 
     return (
-        <div className="mx-6 mt-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center gap-2">
+        <div className="mx-6 mt-4 space-y-2">
+            {flash?.success && (
+                <div className="p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center gap-2">
                     <span>✅</span>
                     <span>{flash.success}</span>
                 </div>
+            )}
+            {flash?.error && (
+                <div className="p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-center gap-2">
+                    <span>❌</span>
+                    <span>{flash.error}</span>
+                </div>
+            )}
+        </div>
     );
 }