firebase-os 1.1.4 → 1.1.6

package/src/components/DashboardNav.tsx

@@ -0,0 +1,281 @@
+import { Link, useLocation } from 'react-router-dom';
+import { useAuth } from '../lib/AuthContext';
+import { Users, Settings, Mail, HelpCircle, User as UserIcon, HardDrive, Palette, Layers, FormInput, MoreVertical } from 'lucide-react';
+import { useState, useRef, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import * as IconoirIcons from 'iconoir-react';
+import { collection, onSnapshot, doc } from 'firebase/firestore';
+import { db } from '../lib/firebase';
+import type { OrderItem } from '../configs/pages/tabOrders.config';
+import { parseOrderItems, defaultTabOrder } from '../configs/pages/tabOrders.config';
+
+interface TabItem {
+  id: string;
+  path: string;
+  label: string;
+  icon: any;
+  roles: string[];
+  exact?: boolean;
+}
+
+// System tab definitions — fallback when Firestore has no override record
+const systemTabDefaults: Record<string, Omit<TabItem, 'id'>> = {
+  pages:       { path: '/pages',       label: 'Pages',       icon: Layers,     roles: ['admin'] },
+  forms:       { path: '/forms',       label: 'Forms',       icon: FormInput,  roles: ['admin'] },
+  drive:       { path: '/drive',       label: 'Drive',       icon: HardDrive,  roles: ['admin', 'user', 'editor', 'guest'] },
+  users:       { path: '/users',       label: 'Users',       icon: Users,      roles: ['admin'] },
+  theme:       { path: '/theme',       label: 'Theme',       icon: Palette,    roles: ['admin'] },
+  submissions: { path: '/submissions', label: 'Submissions', icon: Mail,       roles: ['admin'] },
+  requests:    { path: '/requests',    label: 'Requests',    icon: HelpCircle, roles: ['admin'] },
+  settings:    { path: '/settings',    label: 'Settings',    icon: Settings,   roles: ['admin'] },
+  profile:     { path: '/profile',     label: 'Profile',     icon: UserIcon,   roles: ['admin', 'user', 'editor', 'guest'] },
+  support:     { path: '/support',     label: 'Support',     icon: HelpCircle, roles: ['user', 'editor', 'guest'] },
+};
+
+export function DashboardNav({ customTabs = [] }: { customTabs?: Omit<TabItem, 'id'>[] }) {
+  const { pathname } = useLocation();
+  const { userRole } = useAuth();
+  const [moreOpen, setMoreOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Firestore: tab overrides (label / icon / role customisation) — NOT visibility
+  const [tabOverrides, setTabOverrides] = useState<Record<string, any>>({});
+  // Firestore: tab order + hidden flags (single source of truth for visibility)
+  const [tabOrder, setTabOrder] = useState<OrderItem[]>(defaultTabOrder);
+
+  useEffect(() => {
+    const unsubTabs = onSnapshot(collection(db, 'sys_tabs'), (snap) => {
+      const overrides: Record<string, any> = {};
+      snap.forEach(d => { overrides[d.id] = d.data(); });
+      setTabOverrides(overrides);
+    });
+
+    const unsubOrder = onSnapshot(doc(db, 'sys_configs', 'tab_order'), (d) => {
+      setTabOrder(
+        d.exists() && Array.isArray(d.data().order)
+          ? parseOrderItems(d.data().order)
+          : defaultTabOrder
+      );
+    });
+
+    return () => { unsubTabs(); unsubOrder(); };
+  }, []);
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setMoreOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  // Build the ordered, visibility-filtered tab list
+  const buildTabs = (): TabItem[] => {
+    // Build a map of all known tab definitions
+    const tabMap: Record<string, TabItem> = {};
+
+    // 1. Start from system defaults
+    Object.entries(systemTabDefaults).forEach(([id, def]) => {
+      tabMap[id] = { id, ...def, exact: true };
+    });
+
+    // 2. Merge Firestore overrides (label / icon / roles — not visibility)
+    Object.entries(tabOverrides).forEach(([id, override]) => {
+      const existing = tabMap[id];
+
+      let icon = existing?.icon ?? Layers;
+      if (override?.iconName) {
+        const cleanName = override.iconName.trim();
+        const cap = cleanName.charAt(0).toUpperCase() + cleanName.slice(1);
+        if ((IconoirIcons as any)[cap]) icon = (IconoirIcons as any)[cap];
+        else if ((IconoirIcons as any)[cleanName]) icon = (IconoirIcons as any)[cleanName];
+      }
+
+      let roles = existing?.roles ?? ['admin'];
+      if (override?.pageType === 'admin')   roles = ['admin'];
+      else if (override?.pageType === 'shared')  roles = ['admin', 'editor', 'user'];
+      else if (override?.pageType === 'private') roles = ['user'];
+      else if (override?.pageType === 'public')  roles = ['admin', 'user', 'editor', 'guest'];
+
+      const path = override?.route
+        ? (override.route.startsWith('/') ? override.route : '/' + override.route)
+        : existing?.path ?? '/' + id;
+
+      const label = override?.tabName || override?.pageTitle || override?.pageName || existing?.label || id;
+
+      tabMap[id] = { id, path, label, icon, roles, exact: true };
+    });
+
+    // 3. Iterate tabOrder — include only non-hidden items
+    const ordered: TabItem[] = [];
+    const placed = new Set<string>();
+
+    tabOrder.forEach(orderItem => {
+      if (orderItem.hidden) return;          // hidden → skip
+      if (tabMap[orderItem.id]) {
+        ordered.push(tabMap[orderItem.id]);
+        placed.add(orderItem.id);
+      }
+    });
+
+    // 4. Insert custom/new tabs at the beginning (before 'pages') — admin/shared tabs show first
+    const newTabs: TabItem[] = [];
+    Object.keys(tabOverrides).forEach(id => {
+      if (!placed.has(id) && !tabOrder.some(o => o.id === id) && tabMap[id]) {
+        newTabs.push(tabMap[id]);
+      }
+    });
+    if (newTabs.length > 0) {
+      ordered.unshift(...newTabs);
+    }
+
+    return ordered;
+  };
+
+  const allSystemTabs = buildTabs();
+
+  // Append prop-passed custom tabs (always visible)
+  const allTabs = [
+    ...allSystemTabs,
+    ...customTabs.map(t => ({ ...t, id: t.path })),
+  ].filter(t => {
+    return t.roles.includes(userRole || 'guest');
+  });
+
+  // ── Responsive overflow: measure real tab widths via hidden row ────────────
+  const navRef = useRef<HTMLDivElement>(null);
+  const measureRef = useRef<HTMLDivElement>(null);
+  const [maxVisible, setMaxVisible] = useState(allTabs.length);
+  // Stable key to force re-measure when tabs change
+  const tabKey = allTabs.map(t => t.id + t.label).join('|');
+
+  useEffect(() => {
+    const measure = () => {
+      const nav = navRef.current;
+      const measureRow = measureRef.current;
+      if (!nav || !measureRow) return;
+
+      const containerWidth = nav.clientWidth;
+      const moreButtonWidth = 52;
+      const gap = 40; // gap-10 = 2.5rem ≈ 40px
+      const tabEls = measureRow.querySelectorAll<HTMLElement>('[data-measure-tab]');
+      if (tabEls.length === 0) { setMaxVisible(allTabs.length); return; }
+
+      // Check if ALL tabs fit (no overflow button needed)
+      let checkWidth = 0;
+      let allFit = true;
+      for (let i = 0; i < tabEls.length; i++) {
+        checkWidth += tabEls[i].offsetWidth + (i > 0 ? gap : 0);
+        if (checkWidth > containerWidth) { allFit = false; break; }
+      }
+      if (allFit) { setMaxVisible(allTabs.length); return; }
+
+      // Not all fit — find how many fit WITH the more button
+      let totalWidth = 0;
+      let fitCount = 0;
+      for (let i = 0; i < tabEls.length; i++) {
+        const tabWidth = tabEls[i].offsetWidth;
+        const neededWidth = totalWidth + tabWidth + (i > 0 ? gap : 0);
+        if (neededWidth + moreButtonWidth > containerWidth) break;
+        totalWidth = neededWidth;
+        fitCount++;
+      }
+      setMaxVisible(Math.max(fitCount, 1));
+    };
+
+    const raf = requestAnimationFrame(measure);
+    if (typeof ResizeObserver === 'undefined') return () => cancelAnimationFrame(raf);
+    const ro = new ResizeObserver(() => requestAnimationFrame(measure));
+    if (navRef.current) ro.observe(navRef.current);
+    return () => { cancelAnimationFrame(raf); ro.disconnect(); };
+  }, [tabKey, allTabs.length]);
+
+  const visibleTabs = allTabs.slice(0, maxVisible);
+  const hiddenTabs  = allTabs.slice(maxVisible);
+
+  const isActive = (tab: TabItem) =>
+    tab.exact ? pathname === tab.path : pathname.startsWith(tab.path);
+
+  const isMoreActive = hiddenTabs.some(t => isActive(t));
+
+  return (
+    <>
+      {/* Hidden measurement row — renders all tabs off-screen for width calculation */}
+      <div
+        ref={measureRef}
+        aria-hidden="true"
+        className="flex items-center gap-6 md:gap-10 whitespace-nowrap px-1"
+        style={{ position: 'fixed', top: -9999, left: 0, right: 0, visibility: 'hidden', height: 0, overflow: 'hidden', pointerEvents: 'none' }}
+      >
+        {allTabs.map(tab => {
+          const Icon = tab.icon;
+          return (
+            <span key={tab.path || tab.id} data-measure-tab className="flex items-center gap-2 text-[14.5px] font-semibold shrink-0 pb-3">
+              <Icon className="w-[18px] h-[18px]" />
+              {tab.label}
+            </span>
+          );
+        })}
+      </div>
+
+      {/* Visible nav */}
+      <div ref={navRef} className="w-full flex items-center gap-6 md:gap-10 mb-8 border-b border-[var(--panel-border)] px-1 whitespace-nowrap relative">
+        {visibleTabs.map(tab => {
+          const active = isActive(tab);
+          const Icon = tab.icon;
+          return (
+            <Link
+              key={tab.path || tab.id}
+              to={tab.path || '/'}
+              className={`flex items-center gap-2 text-[14.5px] font-semibold transition-all duration-300 pb-3 -mb-[1px] border-b-2 shrink-0 ${active ? 'text-accent border-accent' : 'text-foreground/50 hover:text-foreground/80 border-transparent'}`}
+            >
+              <Icon className="w-[18px] h-[18px]" />
+              {tab.label}
+            </Link>
+          );
+        })}
+
+        {hiddenTabs.length > 0 && (
+          <div className="relative shrink-0 ml-auto" ref={dropdownRef}>
+            <button
+              onClick={() => setMoreOpen(!moreOpen)}
+              className={`flex items-center justify-center transition-all duration-300 pb-3 -mb-[1px] border-b-2 cursor-pointer ${isMoreActive ? 'text-accent border-accent' : 'text-foreground/50 hover:text-foreground/80 border-transparent'}`}
+              title="More items"
+            >
+              <MoreVertical className="w-5 h-5" />
+            </button>
+
+            <AnimatePresence>
+              {moreOpen && (
+                <motion.div
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: 10 }}
+                  className="absolute top-[100%] right-0 mt-2 min-w-[200px] bg-background/95 backdrop-blur-xl border border-[var(--panel-border)] rounded-2xl shadow-xl z-50 flex flex-col py-2 overflow-hidden"
+                >
+                  {hiddenTabs.map(tab => {
+                    const active = isActive(tab);
+                    const Icon = tab.icon;
+                    return (
+                      <Link
+                        key={tab.path || tab.id}
+                        to={tab.path || '/'}
+                        onClick={() => setMoreOpen(false)}
+                        className={`flex items-center gap-3 px-5 py-3 text-[14px] font-medium transition-colors ${active ? 'text-accent bg-accent/5' : 'text-foreground/70 hover:text-foreground hover:bg-foreground/5'}`}
+                      >
+                        <Icon className="w-4 h-4" />
+                        {tab.label}
+                      </Link>
+                    );
+                  })}
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}

package/src/components/Input.test.tsx

@@ -0,0 +1,33 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Input } from '../components/Input';
+
+describe('Input Component', () => {
+  it('renders correctly with default props', () => {
+    render(<Input placeholder="Test Input" />);
+    const inputElement = screen.getByPlaceholderText('Test Input');
+    expect(inputElement).toBeInTheDocument();
+  });
+
+  it('handles onChange events', () => {
+    const handleChange = vi.fn();
+    render(<Input placeholder="Type here" onChange={handleChange} />);
+    const inputElement = screen.getByPlaceholderText('Type here');
+    
+    fireEvent.change(inputElement, { target: { value: 'hello' } });
+    expect(handleChange).toHaveBeenCalled();
+  });
+
+  it('renders with label if provided', () => {
+    render(<Input label="Username" id="username-id" />);
+    const labelElement = screen.getByText('Username');
+    expect(labelElement).toBeInTheDocument();
+  });
+
+  it('displays error message when error prop is passed', () => {
+    render(<Input error="This field is required" />);
+    const errorElement = screen.getByText('This field is required');
+    expect(errorElement).toBeInTheDocument();
+    expect(errorElement).toHaveClass('text-red-500');
+  });
+});

package/src/components/Input.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  currencySymbol?: string;
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, label, error, currencySymbol, type, ...props }, ref) => {
+    const isCurrency = type === 'currency';
+    return (
+      <div className="flex flex-col w-full relative">
+        {label && (
+          <label className="text-[13px] font-medium text-foreground/50 select-none mb-1.5 ml-1">
+            {label}
+          </label>
+        )}
+        <div className="relative flex items-center">
+          {isCurrency && currencySymbol && (
+            <span className="absolute left-4 font-extrabold text-foreground z-10 pointer-events-none text-[15px]">
+              {currencySymbol}
+            </span>
+          )}
+          <input
+            ref={ref}
+            type={isCurrency ? 'number' : type}
+            className={cn(
+              'block h-12 w-full text-[15px] text-foreground py-2',
+              isCurrency && currencySymbol ? 'pl-8 pr-4' : 'px-4',
+              'transition-all duration-300 placeholder:text-foreground/40',
+              'focus:outline-none focus:border-accent glow-focus',
+              'disabled:cursor-not-allowed disabled:opacity-50 glass-panel',
+              error && 'border-red-500/50 focus:border-red-500/50',
+              className
+            )}
+            style={{ borderRadius: 'var(--input-radius, 0.75rem)' }}
+            {...props}
+          />
+        </div>
+        {error && (
+          <motion.p
+            initial={{ opacity: 0, y: -5 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="text-xs text-red-500 font-medium"
+          >
+            {error}
+          </motion.p>
+        )}
+      </div>
+    );
+  }
+);
+Input.displayName = 'Input';