Initial commit: Meshkee dashboards monorepo.

Includes business, customer, and super-admin apps with shared packages and production deploy scripts. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-22 13:48:53 +03:30
commit f566387c61
509 changed files with 62690 additions and 0 deletions
@@ -0,0 +1,152 @@
+import { useEffect, useRef, useState } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import { Menu, Bell, MessageSquare, ChevronDown, User, Settings, KeyRound, LogOut } from 'lucide-react'
+import { PasswordResetModal } from '@meshkee/dashboard-ui'
+import { useAuth } from '../context/AuthContext'
+import { changePassword } from '../services/authService'
+import styles from './Header.module.css'
+
+const profileMenuItems = [
+  { icon: User, label: 'Profile', to: '/profile' },
+  { icon: Settings, label: 'Setting', to: '/settings' },
+]
+
+export function Header() {
+  const navigate = useNavigate()
+  const { user, logout } = useAuth()
+  const [menuOpen, setMenuOpen] = useState(false)
+  const [passwordModalOpen, setPasswordModalOpen] = useState(false)
+  const menuRef = useRef<HTMLDivElement>(null)
+
+  const displayName =
+    [user?.firstName, user?.lastName].filter(Boolean).join(' ') || user?.cellNumber || 'User'
+  const roleLabel =
+    user?.roleLabel ??
+    (user?.isSuperAdmin || user?.roles.includes('super_admin')
+      ? 'Super Admin'
+      : user?.businesses[0]?.isOwner
+        ? 'Business Owner'
+        : user?.businesses[0]?.teamRole ?? 'Staff')
+
+  useEffect(() => {
+    if (!menuOpen) return
+
+    function handleClickOutside(e: MouseEvent) {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setMenuOpen(false)
+      }
+    }
+
+    function handleEscape(e: KeyboardEvent) {
+      if (e.key === 'Escape') setMenuOpen(false)
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    document.addEventListener('keydown', handleEscape)
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+      document.removeEventListener('keydown', handleEscape)
+    }
+  }, [menuOpen])
+
+  function handleLogout() {
+    logout()
+    setMenuOpen(false)
+    navigate('/login')
+  }
+
+  function openPasswordModal() {
+    setMenuOpen(false)
+    setPasswordModalOpen(true)
+  }
+
+  return (
+    <>
+      <header className={styles.header}>
+        <div className={styles.left}>
+          <button className={styles.menuBtn} aria-label="Toggle menu">
+            <Menu size={22} />
+          </button>
+          <h1 className={styles.title}>Admin Dashboard</h1>
+        </div>
+
+        <div className={styles.right}>
+          <button className={styles.iconBtn} aria-label="Messages">
+            <MessageSquare size={20} />
+            <span className={styles.badge}>5</span>
+          </button>
+
+          <button className={styles.iconBtn} aria-label="Notifications">
+            <Bell size={20} />
+            <span className={styles.badge}>3</span>
+          </button>
+
+          <div className={styles.profileWrap} ref={menuRef}>
+            <button
+              type="button"
+              className={`${styles.profile} ${menuOpen ? styles.profileOpen : ''}`}
+              onClick={() => setMenuOpen((open) => !open)}
+              aria-expanded={menuOpen}
+              aria-haspopup="menu"
+            >
+              <img
+                src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(displayName)}`}
+                alt={displayName}
+                className={styles.avatar}
+              />
+              <div className={styles.profileInfo}>
+                <span className={styles.name}>{displayName}</span>
+                <span className={styles.role}>{roleLabel}</span>
+              </div>
+              <ChevronDown
+                size={16}
+                className={`${styles.chevron} ${menuOpen ? styles.chevronOpen : ''}`}
+              />
+            </button>
+
+            {menuOpen && (
+              <div className={styles.dropdown} role="menu">
+                {profileMenuItems.map(({ icon: Icon, label, to }) => (
+                  <Link
+                    key={label}
+                    to={to}
+                    className={styles.dropdownItem}
+                    role="menuitem"
+                    onClick={() => setMenuOpen(false)}
+                  >
+                    <Icon size={16} />
+                    <span>{label}</span>
+                  </Link>
+                ))}
+                <button
+                  type="button"
+                  className={styles.dropdownItem}
+                  role="menuitem"
+                  onClick={openPasswordModal}
+                >
+                  <KeyRound size={16} />
+                  <span>Change password</span>
+                </button>
+                <button
+                  type="button"
+                  className={styles.dropdownItem}
+                  role="menuitem"
+                  onClick={handleLogout}
+                >
+                  <LogOut size={16} />
+                  <span>Logout</span>
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      </header>
+
+      <PasswordResetModal
+        open={passwordModalOpen}
+        onClose={() => setPasswordModalOpen(false)}
+        onChangePassword={changePassword}
+      />
+    </>
+  )
+}