Initial commit - Dutchie dispensary scraper

frontend/src/components/Layout.tsx

@@ -0,0 +1,212 @@
+import { ReactNode } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useAuthStore } from '../store/authStore';
+import {
+  LayoutDashboard,
+  Store,
+  Building2,
+  FolderOpen,
+  Package,
+  Target,
+  TrendingUp,
+  Wrench,
+  Activity,
+  Shield,
+  FileText,
+  Settings,
+  LogOut,
+  CheckCircle,
+  Key
+} from 'lucide-react';
+
+interface LayoutProps {
+  children: ReactNode;
+}
+
+interface NavLinkProps {
+  to: string;
+  icon: ReactNode;
+  label: string;
+  isActive: boolean;
+}
+
+function NavLink({ to, icon, label, isActive }: NavLinkProps) {
+  return (
+    <a
+      href={to}
+      className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
+        isActive
+          ? 'bg-blue-50 text-blue-600'
+          : 'text-gray-700 hover:bg-gray-50'
+      }`}
+    >
+      <span className="flex-shrink-0">{icon}</span>
+      <span>{label}</span>
+    </a>
+  );
+}
+
+interface NavSectionProps {
+  title: string;
+  children: ReactNode;
+}
+
+function NavSection({ title, children }: NavSectionProps) {
+  return (
+    <div className="space-y-1">
+      <div className="px-3 mb-2">
+        <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider">
+          {title}
+        </h3>
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export function Layout({ children }: LayoutProps) {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { user, logout } = useAuthStore();
+
+  const handleLogout = () => {
+    logout();
+    navigate('/login');
+  };
+
+  const isActive = (path: string, exact = true) => {
+    if (exact) {
+      return location.pathname === path;
+    }
+    return location.pathname.startsWith(path);
+  };
+
+  return (
+    <div className="flex min-h-screen bg-gray-50">
+      {/* Sidebar */}
+      <div
+        className="w-64 bg-white border-r border-gray-200 flex flex-col"
+        style={{
+          position: 'sticky',
+          top: 0,
+          height: '100vh',
+          overflowY: 'auto'
+        }}
+      >
+        {/* Logo/Brand */}
+        <div className="px-6 py-5 border-b border-gray-200">
+          <h1 className="text-lg font-semibold text-gray-900">Dutchie Analytics</h1>
+          <p className="text-xs text-gray-500 mt-0.5">{user?.email}</p>
+        </div>
+
+        {/* Navigation */}
+        <nav className="flex-1 px-3 py-4 space-y-6">
+          <NavSection title="Main">
+            <NavLink
+              to="/"
+              icon={<LayoutDashboard className="w-4 h-4" />}
+              label="Dashboard"
+              isActive={isActive('/', true)}
+            />
+            <NavLink
+              to="/dispensaries"
+              icon={<Building2 className="w-4 h-4" />}
+              label="Dispensaries"
+              isActive={isActive('/dispensaries')}
+            />
+            <NavLink
+              to="/categories"
+              icon={<FolderOpen className="w-4 h-4" />}
+              label="Categories"
+              isActive={isActive('/categories')}
+            />
+            <NavLink
+              to="/products"
+              icon={<Package className="w-4 h-4" />}
+              label="Products"
+              isActive={isActive('/products')}
+            />
+            <NavLink
+              to="/campaigns"
+              icon={<Target className="w-4 h-4" />}
+              label="Campaigns"
+              isActive={isActive('/campaigns')}
+            />
+            <NavLink
+              to="/analytics"
+              icon={<TrendingUp className="w-4 h-4" />}
+              label="Analytics"
+              isActive={isActive('/analytics')}
+            />
+          </NavSection>
+
+          <NavSection title="Scraper">
+            <NavLink
+              to="/scraper-tools"
+              icon={<Wrench className="w-4 h-4" />}
+              label="Tools"
+              isActive={isActive('/scraper-tools')}
+            />
+            <NavLink
+              to="/scraper-monitor"
+              icon={<Activity className="w-4 h-4" />}
+              label="Monitor"
+              isActive={isActive('/scraper-monitor')}
+            />
+          </NavSection>
+
+          <NavSection title="System">
+            <NavLink
+              to="/changes"
+              icon={<CheckCircle className="w-4 h-4" />}
+              label="Change Approval"
+              isActive={isActive('/changes')}
+            />
+            <NavLink
+              to="/api-permissions"
+              icon={<Key className="w-4 h-4" />}
+              label="API Permissions"
+              isActive={isActive('/api-permissions')}
+            />
+            <NavLink
+              to="/proxies"
+              icon={<Shield className="w-4 h-4" />}
+              label="Proxies"
+              isActive={isActive('/proxies')}
+            />
+            <NavLink
+              to="/logs"
+              icon={<FileText className="w-4 h-4" />}
+              label="Logs"
+              isActive={isActive('/logs')}
+            />
+            <NavLink
+              to="/settings"
+              icon={<Settings className="w-4 h-4" />}
+              label="Settings"
+              isActive={isActive('/settings')}
+            />
+          </NavSection>
+        </nav>
+
+        {/* Logout */}
+        <div className="px-3 py-4 border-t border-gray-200">
+          <button
+            onClick={handleLogout}
+            className="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-red-600 hover:bg-red-50 transition-colors"
+          >
+            <LogOut className="w-4 h-4" />
+            <span>Logout</span>
+          </button>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="flex-1 overflow-y-auto">
+        <div className="max-w-7xl mx-auto px-8 py-8">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}