@omniradiology/omnirad 0.1.3

package/components/dashboard/SupabaseIntegrationPanel.tsx

@@ -0,0 +1,345 @@
+"use client"
+
+import * as React from "react"
+import { Card, CardContent, CardHeader, CardTitle, Input, Label, Button } from "@/components/ui/basic"
+import { Cloud, CheckCircle, XCircle, AlertTriangle, Loader2, Save, Eye, EyeOff, Copy, Check, ChevronDown, ChevronUp, Database, ExternalLink } from "lucide-react"
+import { resetSupabaseClient } from "@/lib/supabase"
+
+interface SupabaseIntegrationPanelProps {
+    supabaseUrl: string
+    supabaseAnonKey: string
+    onConfigChange: (field: string, value: string) => void
+    onSave: () => Promise<void>
+}
+
+type ConnectionStatus = "idle" | "testing" | "connected" | "error" | "schema-missing"
+
+// The consolidated SQL for Supabase setup
+const SETUP_SQL = `-- ═══════════════════════════════════════════════════════════════════
+-- OmniRad — Supabase Cloud Sync Setup
+-- Run this in your Supabase SQL Editor (supabase.com → SQL Editor)
+-- ═══════════════════════════════════════════════════════════════════
+
+-- 1. Reports Table
+CREATE TABLE IF NOT EXISTS public.reports (
+  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
+  created_at TIMESTAMPTZ DEFAULT timezone('utc'::text, now()) NOT NULL,
+  patient_id TEXT,
+  patient_name TEXT,
+  modality TEXT,
+  urgency TEXT,
+  report_status TEXT DEFAULT 'Pending',
+  report_data JSONB NOT NULL,
+  pacs_study_uid TEXT,
+  pacs_series_uid TEXT,
+  pacs_source TEXT
+);
+
+ALTER TABLE public.reports ENABLE ROW LEVEL SECURITY;
+CREATE POLICY "reports_all_access" ON public.reports
+  FOR ALL USING (true) WITH CHECK (true);
+
+-- 2. Patients Table
+CREATE TABLE IF NOT EXISTS public.patients (
+  id TEXT PRIMARY KEY,
+  patient_id_number TEXT,
+  patient_name TEXT NOT NULL,
+  date_of_birth TEXT,
+  gender TEXT,
+  contact_info TEXT,
+  notes TEXT,
+  created_at TIMESTAMPTZ DEFAULT timezone('utc'::text, now()) NOT NULL,
+  updated_at TIMESTAMPTZ
+);
+
+ALTER TABLE public.patients ENABLE ROW LEVEL SECURITY;
+CREATE POLICY "patients_all_access" ON public.patients
+  FOR ALL USING (true) WITH CHECK (true);`
+
+export function SupabaseIntegrationPanel({
+    supabaseUrl,
+    supabaseAnonKey,
+    onConfigChange,
+    onSave,
+}: SupabaseIntegrationPanelProps) {
+    const [showKey, setShowKey] = React.useState(false)
+    const [connectionStatus, setConnectionStatus] = React.useState<ConnectionStatus>("idle")
+    const [connectionMessage, setConnectionMessage] = React.useState("")
+    const [reportCount, setReportCount] = React.useState<number | null>(null)
+    const [patientsTableExists, setPatientsTableExists] = React.useState(false)
+    const [isSaving, setIsSaving] = React.useState(false)
+    const [saved, setSaved] = React.useState(false)
+    const [showSql, setShowSql] = React.useState(false)
+    const [copied, setCopied] = React.useState(false)
+
+    // Auto-test on mount if credentials exist
+    React.useEffect(() => {
+        if (supabaseUrl?.trim() && supabaseAnonKey?.trim()) {
+            testConnection(true)
+        }
+    }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+    const testConnection = async (silent = false) => {
+        if (!supabaseUrl?.trim() || !supabaseAnonKey?.trim()) {
+            setConnectionStatus("error")
+            setConnectionMessage("Enter both Project URL and Anon Key first.")
+            return
+        }
+
+        setConnectionStatus("testing")
+        setConnectionMessage("Testing connection...")
+
+        try {
+            const res = await fetch("/api/settings/test-supabase", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                    supabaseUrl: supabaseUrl.trim(),
+                    supabaseAnonKey: supabaseAnonKey.trim(),
+                }),
+            })
+
+            const data = await res.json()
+
+            if (data.success && data.connected) {
+                if (!data.reportsTableExists) {
+                    setConnectionStatus("schema-missing")
+                    setConnectionMessage(data.message || "Connected, but tables are missing. Run the SQL setup.")
+                    setReportCount(null)
+                    setPatientsTableExists(false)
+                } else {
+                    setConnectionStatus("connected")
+                    setConnectionMessage(data.message || "Connected!")
+                    setReportCount(data.reportCount ?? 0)
+                    setPatientsTableExists(data.patientsTableExists ?? false)
+                }
+            } else {
+                setConnectionStatus("error")
+                setConnectionMessage(data.error || "Connection failed.")
+                setReportCount(null)
+                setPatientsTableExists(false)
+            }
+        } catch (err) {
+            setConnectionStatus("error")
+            setConnectionMessage(`Network error: ${err instanceof Error ? err.message : "Unknown"}`)
+            setReportCount(null)
+            setPatientsTableExists(false)
+        }
+    }
+
+    const handleSave = async () => {
+        setIsSaving(true)
+        try {
+            await onSave()
+            // Reset the cached Supabase client so new credentials take effect immediately
+            resetSupabaseClient()
+            setSaved(true)
+            setTimeout(() => setSaved(false), 2500)
+            // Re-test after save
+            if (supabaseUrl?.trim() && supabaseAnonKey?.trim()) {
+                setTimeout(() => testConnection(true), 500)
+            } else {
+                setConnectionStatus("idle")
+                setConnectionMessage("")
+                setReportCount(null)
+            }
+        } finally {
+            setIsSaving(false)
+        }
+    }
+
+    const handleCopySql = async () => {
+        try {
+            await navigator.clipboard.writeText(SETUP_SQL)
+            setCopied(true)
+            setTimeout(() => setCopied(false), 2000)
+        } catch {
+            // Fallback for non-HTTPS contexts
+            const ta = document.createElement("textarea")
+            ta.value = SETUP_SQL
+            document.body.appendChild(ta)
+            ta.select()
+            document.execCommand("copy")
+            document.body.removeChild(ta)
+            setCopied(true)
+            setTimeout(() => setCopied(false), 2000)
+        }
+    }
+
+    const statusIcon = () => {
+        switch (connectionStatus) {
+            case "testing":
+                return <Loader2 size={18} className="animate-spin text-blue-400" />
+            case "connected":
+                return <CheckCircle size={18} className="text-green-500" />
+            case "error":
+                return <XCircle size={18} className="text-red-500" />
+            case "schema-missing":
+                return <AlertTriangle size={18} className="text-yellow-500" />
+            default:
+                return <Cloud size={18} className="text-text-muted" />
+        }
+    }
+
+    const statusColor = () => {
+        switch (connectionStatus) {
+            case "connected": return "border-green-500/30 bg-green-950/10"
+            case "error": return "border-red-500/30 bg-red-950/10"
+            case "schema-missing": return "border-yellow-500/30 bg-yellow-950/10"
+            case "testing": return "border-blue-500/30 bg-blue-950/10"
+            default: return "border-border-primary bg-bg-panel/50"
+        }
+    }
+
+    const isConfigured = supabaseUrl?.trim() && supabaseAnonKey?.trim()
+
+    return (
+        <Card className="bg-bg-surface border-border-primary">
+            <CardHeader>
+                <CardTitle className="text-text-heading flex items-center gap-2">
+                    <Cloud size={20} className="text-emerald-500" />
+                    Supabase Cloud Sync
+                </CardTitle>
+                <p className="text-sm text-text-secondary">
+                    Sync reports to the cloud for cross-device access. Images are auto-stripped before upload to save bandwidth.
+                </p>
+            </CardHeader>
+            <CardContent className="space-y-5">
+                {/* Connection Status Banner */}
+                {connectionStatus !== "idle" && (
+                    <div className={`flex items-center gap-3 px-4 py-3 rounded-lg border transition-all duration-300 ${statusColor()}`}>
+                        {statusIcon()}
+                        <div className="flex-1 min-w-0">
+                            <p className="text-sm font-medium text-text-primary truncate">{connectionMessage}</p>
+                            {connectionStatus === "connected" && reportCount !== null && (
+                                <div className="flex items-center gap-3 mt-1">
+                                    <span className="text-xs text-text-muted flex items-center gap-1">
+                                        <Database size={12} />
+                                        {reportCount} report{reportCount !== 1 ? "s" : ""} synced
+                                    </span>
+                                    {!patientsTableExists && (
+                                        <span className="text-xs text-yellow-500">• Patients table missing</span>
+                                    )}
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                )}
+
+                {/* Project URL */}
+                <div>
+                    <Label htmlFor="supabaseUrl" className="text-text-primary">
+                        Supabase Project URL *
+                    </Label>
+                    <Input
+                        id="supabaseUrl"
+                        type="url"
+                        placeholder="https://your-project.supabase.co"
+                        value={supabaseUrl}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => onConfigChange("supabaseUrl", e.target.value)}
+                        className="mt-1 bg-bg-panel border-border-primary text-text-primary placeholder-text-muted"
+                    />
+                    <p className="text-xs text-text-muted mt-1">
+                        Find this at <span className="text-text-secondary">Supabase Dashboard → Settings → API → Project URL</span>
+                    </p>
+                </div>
+
+                {/* Anon Key */}
+                <div>
+                    <Label htmlFor="supabaseAnonKey" className="text-text-primary">
+                        Anon Public Key *
+                    </Label>
+                    <div className="relative mt-1">
+                        <Input
+                            id="supabaseAnonKey"
+                            type={showKey ? "text" : "password"}
+                            placeholder="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
+                            value={supabaseAnonKey}
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => onConfigChange("supabaseAnonKey", e.target.value)}
+                            className="bg-bg-panel border-border-primary text-text-primary placeholder-text-muted pr-10"
+                        />
+                        <button
+                            type="button"
+                            onClick={() => setShowKey(!showKey)}
+                            className="absolute right-3 top-1/2 -translate-y-1/2 text-text-muted hover:text-text-primary transition-colors"
+                            title={showKey ? "Hide key" : "Show key"}
+                        >
+                            {showKey ? <EyeOff size={16} /> : <Eye size={16} />}
+                        </button>
+                    </div>
+                    <p className="text-xs text-text-muted mt-1">
+                        Find this at <span className="text-text-secondary">Supabase Dashboard → Settings → API → anon public key</span>
+                    </p>
+                </div>
+
+                {/* Action Buttons */}
+                <div className="flex gap-3">
+                    <Button
+                        onClick={() => testConnection()}
+                        disabled={connectionStatus === "testing" || !isConfigured}
+                        variant="outline"
+                        className="flex-1 gap-2 border-border-primary text-text-primary hover:bg-white/5"
+                    >
+                        {connectionStatus === "testing" ? (
+                            <Loader2 size={16} className="animate-spin" />
+                        ) : (
+                            <Cloud size={16} />
+                        )}
+                        {connectionStatus === "testing" ? "Testing..." : "Test Connection"}
+                    </Button>
+                    <Button
+                        onClick={handleSave}
+                        disabled={isSaving}
+                        className="flex-1 bg-primary-main hover:bg-primary-hover text-white gap-2"
+                    >
+                        {saved ? <Check size={16} /> : <Save size={16} />}
+                        {isSaving ? "Saving..." : saved ? "Saved!" : "Save"}
+                    </Button>
+                </div>
+
+                {/* SQL Setup Section */}
+                <div className="border-t border-border-primary pt-4">
+                    <button
+                        onClick={() => setShowSql(!showSql)}
+                        className="flex items-center gap-2 text-sm font-medium text-text-secondary hover:text-text-primary transition-colors w-full text-left"
+                    >
+                        <Database size={16} className="text-emerald-500" />
+                        <span className="flex-1">Database Setup SQL</span>
+                        {showSql ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+                    </button>
+                    <p className="text-xs text-text-muted mt-1">
+                        Run this SQL once in your Supabase SQL Editor to create the required tables.
+                    </p>
+
+                    {showSql && (
+                        <div className="mt-3 space-y-2">
+                            <div className="flex justify-between items-center">
+                                <a
+                                    href="https://supabase.com/dashboard"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="text-xs text-emerald-500 hover:text-emerald-400 flex items-center gap-1 transition-colors"
+                                >
+                                    Open Supabase Dashboard
+                                    <ExternalLink size={12} />
+                                </a>
+                                <Button
+                                    size="sm"
+                                    variant="outline"
+                                    onClick={handleCopySql}
+                                    className="h-7 px-2.5 text-xs gap-1.5 border-border-primary text-text-secondary hover:text-text-primary hover:bg-white/5"
+                                >
+                                    {copied ? <Check size={12} className="text-green-500" /> : <Copy size={12} />}
+                                    {copied ? "Copied!" : "Copy SQL"}
+                                </Button>
+                            </div>
+                            <pre className="text-xs bg-bg-primary border border-border-primary rounded-lg p-4 overflow-x-auto max-h-[300px] overflow-y-auto text-text-secondary font-mono leading-relaxed">
+                                {SETUP_SQL}
+                            </pre>
+                        </div>
+                    )}
+                </div>
+            </CardContent>
+        </Card>
+    )
+}

package/components/dashboard/UserManagementPanel.tsx

@@ -0,0 +1,272 @@
+"use client";
+
+import * as React from "react";
+import { Card, CardHeader, CardTitle, CardContent, Button, Input, Label, Badge } from "@/components/ui/basic";
+import { Trash2, UserPlus } from "lucide-react";
+
+interface DbUser {
+    id: string;
+    fullName: string;
+    username: string;
+    email: string;
+    role: "Admin" | "User";
+    createdAt: string;
+}
+
+export function UserManagementPanel() {
+    const [users, setUsers] = React.useState<DbUser[]>([]);
+    const [isLoading, setIsLoading] = React.useState(true);
+    const [isAdmin, setIsAdmin] = React.useState(false);
+    
+    // Form state
+    const [newUser, setNewUser] = React.useState({
+        fullName: "",
+        username: "",
+        email: "",
+        password: "",
+        role: "User" as const
+    });
+
+    const [error, setError] = React.useState("");
+
+    React.useEffect(() => {
+        // First check if current user is admin visually (API will also block them)
+        fetch('/api/auth/me')
+            .then(res => res.json())
+            .then(me => {
+                if (me.role === 'Admin') {
+                    setIsAdmin(true);
+                    loadUsers();
+                } else {
+                    setIsAdmin(false);
+                    setIsLoading(false);
+                }
+            })
+            .catch(() => setIsLoading(false));
+    }, []);
+
+    const loadUsers = () => {
+        fetch('/api/auth/users')
+            .then(res => res.json())
+            .then(data => {
+                if (Array.isArray(data)) setUsers(data);
+                setIsLoading(false);
+            })
+            .catch(e => {
+                console.error("Error loading users:", e);
+                setIsLoading(false);
+            });
+    };
+
+    const handleAddUser = async () => {
+        setError("");
+        if (!newUser.fullName || !newUser.username || !newUser.password || !newUser.email) {
+            setError("All fields are required.");
+            return;
+        }
+
+        try {
+            const res = await fetch('/api/auth/users', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(newUser),
+            });
+            const data = await res.json();
+            
+            if (!res.ok) throw new Error(data.error);
+            
+            setNewUser({ fullName: "", username: "", email: "", password: "", role: "User" });
+            loadUsers();
+        } catch (err: any) {
+            setError(err.message);
+        }
+    };
+
+    const handleRemoveUser = async (id: string, role: string) => {
+        if (role === 'Admin') {
+            const adminCount = users.filter(u => u.role === 'Admin').length;
+            if (adminCount <= 1) {
+                alert("Cannot delete the last Admin account.");
+                return;
+            }
+        }
+
+        if (confirm("Are you sure you want to completely remove this user account?")) {
+            try {
+                const res = await fetch(`/api/auth/users?id=${encodeURIComponent(id)}`, { method: 'DELETE' });
+                if (res.ok) {
+                    loadUsers();
+                } else {
+                    const data = await res.json();
+                    alert(data.error || "Failed to remove user");
+                }
+            } catch (e) {
+                console.error(e);
+            }
+        }
+    };
+
+    const toggleRole = async (user: DbUser) => {
+        const newRole = user.role === 'Admin' ? 'User' : 'Admin';
+
+        if (user.role === 'Admin') {
+            const adminCount = users.filter(u => u.role === 'Admin').length;
+            if (adminCount <= 1) {
+                alert("Cannot demote the last Admin account.");
+                return;
+            }
+        }
+
+        try {
+            const res = await fetch('/api/auth/users', {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ id: user.id, role: newRole }),
+            });
+            if (res.ok) {
+                loadUsers();
+            }
+        } catch (e) {
+            console.error(e);
+        }
+    };
+
+    if (isLoading) return null;
+    if (!isAdmin) return null; // Hide panel entirely if not admin
+
+    return (
+        <Card className="bg-bg-surface border-border-primary">
+            <CardHeader>
+                <CardTitle>User Management</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-6">
+
+                {/* Add User Form */}
+                <div className="bg-bg-panel/30 p-6 rounded-xl border border-border-primary space-y-6 shadow-sm">
+                    <div className="flex items-center justify-between border-b border-border-primary/50 pb-4">
+                        <div>
+                            <h3 className="text-lg font-semibold text-text-heading">Create New User</h3>
+                            <p className="text-sm text-text-muted mt-1">Add a new team member to OmniRad and assign their permissions.</p>
+                        </div>
+                        <div className="p-3 bg-primary/10 rounded-full hidden sm:block">
+                            <UserPlus size={24} className="text-primary" />
+                        </div>
+                    </div>
+                    
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-5">
+                        <div className="space-y-2">
+                            <Label className="text-text-secondary text-xs uppercase tracking-wider font-semibold">Full Name</Label>
+                            <Input
+                                value={newUser.fullName}
+                                onChange={(e) => setNewUser({ ...newUser, fullName: e.target.value })}
+                                placeholder="Jane Doe"
+                                className="h-10 bg-bg-surface"
+                            />
+                        </div>
+                        <div className="space-y-2">
+                            <Label className="text-text-secondary text-xs uppercase tracking-wider font-semibold">Username</Label>
+                            <Input
+                                value={newUser.username}
+                                onChange={(e) => setNewUser({ ...newUser, username: e.target.value.toLowerCase().replace(/\s/g, '') })}
+                                placeholder="janed"
+                                className="h-10 bg-bg-surface font-mono text-sm"
+                            />
+                        </div>
+                        <div className="space-y-2">
+                            <Label className="text-text-secondary text-xs uppercase tracking-wider font-semibold">Email Address</Label>
+                            <Input
+                                type="email"
+                                value={newUser.email}
+                                onChange={(e) => setNewUser({ ...newUser, email: e.target.value })}
+                                placeholder="jane@example.com"
+                                className="h-10 bg-bg-surface"
+                            />
+                        </div>
+                        <div className="space-y-2">
+                            <Label className="text-text-secondary text-xs uppercase tracking-wider font-semibold">Temporary Password</Label>
+                            <Input
+                                type="text"
+                                value={newUser.password}
+                                onChange={(e) => setNewUser({ ...newUser, password: e.target.value })}
+                                placeholder="Secure temporary password"
+                                className="h-10 bg-bg-surface"
+                            />
+                        </div>
+                        <div className="space-y-2 md:col-span-2">
+                            <Label className="text-text-secondary text-xs uppercase tracking-wider font-semibold">Role Access</Label>
+                            <select
+                                className="flex h-10 w-full md:w-1/2 rounded-md border border-border-primary bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-primary shadow-sm"
+                                value={newUser.role}
+                                onChange={(e) => setNewUser({ ...newUser, role: e.target.value as any })}
+                            >
+                                <option value="User">User</option>
+                                <option value="Admin">Admin</option>
+                            </select>
+                        </div>
+                    </div>
+                    
+                    <div className="flex flex-col sm:flex-row items-center justify-between pt-4 border-t border-border-primary/50 gap-4 mt-2">
+                        <div className="text-red-500 text-sm font-medium">{error}</div>
+                        <Button onClick={handleAddUser} className="bg-primary hover:bg-primary-hover text-white h-10 px-8 w-full sm:w-auto shadow-md">
+                            <UserPlus size={16} className="mr-2" /> Create User
+                        </Button>
+                    </div>
+                </div>
+
+                {/* Users List */}
+                <div className="rounded-md border border-border-primary overflow-hidden">
+                    <table className="w-full text-sm text-left">
+                        <thead className="bg-bg-panel text-text-secondary border-b border-border-primary">
+                            <tr>
+                                <th className="px-4 py-3 font-medium">Name</th>
+                                <th className="px-4 py-3 font-medium">Username</th>
+                                <th className="px-4 py-3 font-medium">Role</th>
+                                <th className="px-4 py-3 font-medium text-right">Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody className="divide-y divide-border-primary">
+                            {users.length === 0 && (
+                                <tr>
+                                    <td colSpan={4} className="px-4 py-8 text-center text-text-muted">No users found.</td>
+                                </tr>
+                            )}
+                            {users.map((user) => (
+                                <tr key={user.id} className="hover:bg-bg-panel/30 transition-colors">
+                                    <td className="px-4 py-3">
+                                        <div className="font-medium text-text-heading">{user.fullName}</div>
+                                        <div className="text-xs text-text-muted">{user.email}</div>
+                                    </td>
+                                    <td className="px-4 py-3">
+                                        <div className="text-text-primary font-mono text-xs">@{user.username}</div>
+                                    </td>
+                                    <td className="px-4 py-3">
+                                        <button 
+                                            onClick={() => toggleRole(user)}
+                                            className="focus:outline-none hover:opacity-80 transition-opacity"
+                                            title="Click to toggle role"
+                                        >
+                                            <Badge variant="outline" className={`text-text-primary border-border-primary ${user.role === 'Admin' ? 'bg-primary/20 text-primary-hover border-primary/30' : ''}`}>
+                                                {user.role}
+                                            </Badge>
+                                        </button>
+                                    </td>
+                                    <td className="px-4 py-3 text-right">
+                                        <Button
+                                            variant="ghost"
+                                            size="sm"
+                                            className="text-red-500 hover:text-red-400 hover:bg-red-950/20"
+                                            onClick={() => handleRemoveUser(user.id, user.role)}
+                                            title="Revoke Access / Delete"
+                                        >
+                                            <Trash2 size={16} />
+                                        </Button>
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            </CardContent>
+        </Card>
+    )
+}

package/components/layout/ClientLayout.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { Sidebar } from "@/components/layout/Sidebar";
+import { Header } from "@/components/layout/Header";
+
+export default function ClientLayout({ children }: { children: React.ReactNode }) {
+    const pathname = usePathname();
+    const isAuthPage = pathname?.startsWith('/login') || pathname?.startsWith('/setup');
+    const isSettingsPage = pathname?.startsWith('/settings');
+
+    if (isAuthPage) {
+        return (
+            <main className="flex-1 w-full h-full overflow-auto bg-bg-secondary">
+                {children}
+            </main>
+        );
+    }
+
+    if (isSettingsPage) {
+        return (
+            <main className="flex-1 w-full h-full overflow-hidden bg-bg-primary">
+                {children}
+            </main>
+        );
+    }
+
+    return (
+        <>
+            <Header />
+            <div className="hidden md:block z-50">
+                <Sidebar />
+            </div>
+            <main className="flex-1 md:ml-20 h-full overflow-auto relative w-full">
+                {children}
+            </main>
+        </>
+    );
+}

package/components/layout/Header.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import { Menu, Activity } from 'lucide-react';
+import { Button } from '@/components/ui/basic';
+
+export function Header({ onMenuClick }: { onMenuClick?: () => void }) {
+    return (
+        <header className="h-16 border-b border-border-primary bg-bg-surface flex items-center px-4 justify-between md:hidden">
+            <div className="flex items-center gap-3">
+                <Button variant="ghost" size="icon" onClick={onMenuClick} className="text-text-primary">
+                    <Menu className="h-6 w-6" />
+                </Button>
+                <div className="flex items-center gap-2 text-primary">
+                    <Activity className="h-6 w-6" />
+                    <span className="text-lg font-bold text-text-heading tracking-tight">OmniRad</span>
+                </div>
+            </div>
+        </header>
+    );
+}