Initial commit of Balout Pastry admin dashboards.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-11 22:30:59 +04:30 · 2026-08-02 17:23:00 +03:30
commit af11d96fd0
103 changed files with 14651 additions and 0 deletions
@@ -0,0 +1,146 @@
+import { useEffect, useId, useRef, useState } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import { ChevronDown, LogOut } from 'lucide-react'
+import { clearSession, getSession } from '../lib/auth'
+import { logout } from '../lib/authApi'
+import { navSections } from '../lib/nav'
+import logo from '../images/Logo-balout-256.png'
+import styles from './Header.module.css'
+
+type HeaderProps = {
+  showLogout?: boolean
+}
+
+export function Header({ showLogout = true }: HeaderProps) {
+  const navigate = useNavigate()
+  const session = getSession()
+  const [openId, setOpenId] = useState<string | null>(null)
+  const navRef = useRef<HTMLElement>(null)
+  const navLabelId = useId()
+
+  useEffect(() => {
+    function handlePointerDown(event: MouseEvent) {
+      if (!navRef.current?.contains(event.target as Node)) {
+        setOpenId(null)
+      }
+    }
+
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === 'Escape') setOpenId(null)
+    }
+
+    document.addEventListener('mousedown', handlePointerDown)
+    document.addEventListener('keydown', handleKeyDown)
+    return () => {
+      document.removeEventListener('mousedown', handlePointerDown)
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [])
+
+  async function handleLogout() {
+    try {
+      await logout()
+    } catch {
+      clearSession()
+    }
+    navigate('/login')
+  }
+
+  function toggleSection(id: string) {
+    setOpenId((current) => (current === id ? null : id))
+  }
+
+  return (
+    <header className={styles.header}>
+      <div className={styles.inner}>
+        <Link to="/" className={styles.brand} onClick={() => setOpenId(null)}>
+          <img src={logo} alt="بلوط" className={styles.logo} />
+        </Link>
+
+        <nav
+          ref={navRef}
+          className={styles.nav}
+          aria-labelledby={navLabelId}
+        >
+          <span id={navLabelId} className={styles.srOnly}>
+            منوی اصلی
+          </span>
+          <ul className={styles.navList}>
+            {navSections.map((section) => {
+              const Icon = section.icon
+              const isOpen = openId === section.id
+              const hasDropdown = section.items.length > 0
+
+              return (
+                <li key={section.id} className={styles.navItem}>
+                  {hasDropdown ? (
+                    <>
+                      <button
+                        type="button"
+                        className={`${styles.navTrigger} ${isOpen ? styles.navTriggerOpen : ''}`}
+                        aria-expanded={isOpen}
+                        aria-haspopup="menu"
+                        onClick={() => toggleSection(section.id)}
+                      >
+                        <Icon size={18} strokeWidth={1.75} />
+                        <span>{section.title}</span>
+                        <ChevronDown
+                          size={16}
+                          strokeWidth={1.75}
+                          className={`${styles.chevron} ${isOpen ? styles.chevronOpen : ''}`}
+                        />
+                      </button>
+
+                      {isOpen && (
+                        <ul className={styles.dropdown} role="menu">
+                          {section.items.map((item) => (
+                            <li key={item.href} role="none">
+                              <Link
+                                to={item.href}
+                                role="menuitem"
+                                className={styles.dropdownLink}
+                                onClick={() => setOpenId(null)}
+                              >
+                                {item.label}
+                              </Link>
+                            </li>
+                          ))}
+                        </ul>
+                      )}
+                    </>
+                  ) : (
+                    <Link
+                      to={section.href}
+                      className={styles.navTrigger}
+                      onClick={() => setOpenId(null)}
+                    >
+                      <Icon size={18} strokeWidth={1.75} />
+                      <span>{section.title}</span>
+                    </Link>
+                  )}
+                </li>
+              )
+            })}
+          </ul>
+        </nav>
+
+        {showLogout && (
+          <div className={styles.actions}>
+            {session && (
+              <span className={styles.userName}>{session.user.name}</span>
+            )}
+            <button
+              type="button"
+              className={styles.logoutBtn}
+              onClick={handleLogout}
+              aria-label="خروج"
+            >
+              <LogOut size={18} strokeWidth={1.75} />
+              <span>خروج</span>
+            </button>
+          </div>
+        )}
+      </div>
+    </header>
+  )
+}