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-08-11 22:30:58 +04:30 · 2026-07-22 13:48:53 +03:30
commit f566387c61
509 changed files with 62690 additions and 0 deletions
@@ -0,0 +1,133 @@
+import { useEffect, useRef, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Menu, Bell, MessageSquare, ChevronDown, User, KeyRound, LogOut } from 'lucide-react'
+import { PasswordResetModal } from '@meshkee/dashboard-ui'
+import { useAuth } from '../context/AuthContext'
+import { changePassword } from '../services/profileService'
+import styles from './Header.module.css'
+
+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 ||
+    'Super Admin'
+
+  const avatarSeed = encodeURIComponent(user?.cellNumber ?? 'admin')
+
+  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()
+    navigate('/login')
+  }
+
+  function openPasswordModal() {
+    setMenuOpen(false)
+    setPasswordModalOpen(true)
+  }
+
+  const profileMenuItems = [
+    { icon: User, label: 'Profile', action: () => { setMenuOpen(false); navigate('/profile') } },
+    { icon: KeyRound, label: 'Password reset', action: openPasswordModal },
+    { icon: LogOut, label: 'Logout', action: handleLogout },
+  ]
+
+  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}>Super 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}
+              data-card-hover
+              data-card-hover-active={menuOpen ? 'true' : undefined}
+              onClick={() => setMenuOpen((open) => !open)}
+              aria-expanded={menuOpen}
+              aria-haspopup="menu"
+            >
+              <img
+                src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${avatarSeed}`}
+                alt={displayName}
+                className={styles.avatar}
+              />
+              <div className={styles.profileInfo}>
+                <span className={styles.name}>{displayName}</span>
+                <span className={styles.role}>Super Administrator</span>
+              </div>
+              <ChevronDown
+                size={16}
+                className={`${styles.chevron} ${menuOpen ? styles.chevronOpen : ''}`}
+              />
+            </button>
+
+            {menuOpen && (
+              <div className={styles.dropdown} role="menu">
+                {profileMenuItems.map(({ icon: Icon, label, action }) => (
+                  <button
+                    key={label}
+                    type="button"
+                    className={styles.dropdownItem}
+                    role="menuitem"
+                    onClick={action}
+                  >
+                    <Icon size={16} />
+                    <span>{label}</span>
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </header>
+
+      <PasswordResetModal
+        open={passwordModalOpen}
+        onClose={() => setPasswordModalOpen(false)}
+        onChangePassword={changePassword}
+      />
+    </>
+  )
+}