From 20e8f994a157d2fd0f6adeb1cb3dbb08725c4cac Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Fri, 12 Dec 2025 18:38:41 -0800
Subject: [PATCH]

---
 frontend/src/pages/BatchesPage.tsx  |  7 ++-
 frontend/src/pages/SettingsPage.tsx | 94 ++++++++++++++++-------------
 2 files changed, 57 insertions(+), 44 deletions(-)

diff --git a/frontend/src/pages/BatchesPage.tsx b/frontend/src/pages/BatchesPage.tsx
index 461ca09..4501013 100644
--- a/frontend/src/pages/BatchesPage.tsx
+++ b/frontend/src/pages/BatchesPage.tsx
@@ -42,8 +42,8 @@ function StageProgressMini({ currentStage }: { currentStage: string }) {
                 <div
                     key={stage}
                     className={`h-1 w-3 rounded-full ${i < currentIndex ? 'bg-success' :
-                            i === currentIndex ? 'bg-accent' :
-                                'bg-subtle'
+                        i === currentIndex ? 'bg-accent' :
+                            'bg-subtle'
                         }`}
                 />
             ))}
@@ -221,7 +221,8 @@ export default function BatchesPage() {
                 )}
                 {createTaskBatch && (
                     <CreateTaskModal
-                        batchContext={createTaskBatch}
+                        isOpen={true}
+                        initialBatchId={createTaskBatch.id}
                         onClose={() => setCreateTaskBatch(null)}
                         onSuccess={() => {
                             setCreateTaskBatch(null);
diff --git a/frontend/src/pages/SettingsPage.tsx b/frontend/src/pages/SettingsPage.tsx
index 6cb1b25..d7c549d 100644
--- a/frontend/src/pages/SettingsPage.tsx
+++ b/frontend/src/pages/SettingsPage.tsx
@@ -2,7 +2,8 @@ import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
     Settings, Shield, ChevronRight, Sun, Moon, Globe, Type,
-    Eye, Volume2, Bell, Minimize2, RotateCcw, Monitor
+    Eye, Volume2, Bell, Minimize2, RotateCcw, Monitor, Users,
+    ClipboardList, Layers, FileText
 } from 'lucide-react';
 import { usePreferences } from '../context/PreferencesContext';
 import { PageHeader } from '../components/ui/LinearPrimitives';
@@ -12,17 +13,30 @@ export default function SettingsPage() {
     const { t } = useTranslation();
     const { preferences, setPreference, resetPreferences } = usePreferences();
 
-    const sections = [
+    const adminSections = [
         {
-            title: t('settings.title'),
-            items: [
-                {
-                    label: 'Walkthrough Config',
-                    description: 'Manage questions and checkpoints',
-                    icon: Shield,
-                    action: () => navigate('/settings/walkthrough')
-                }
-            ]
+            label: 'Walkthrough Config',
+            description: 'Configure daily walkthrough questions',
+            icon: ClipboardList,
+            action: () => navigate('/settings/walkthrough')
+        },
+        {
+            label: 'Roles & Permissions',
+            description: 'Manage staff access levels',
+            icon: Shield,
+            action: () => navigate('/roles')
+        },
+        {
+            label: 'Task Templates',
+            description: 'Create reusable task templates',
+            icon: FileText,
+            action: () => navigate('/tasks/templates')
+        },
+        {
+            label: 'Layout Designer',
+            description: 'Design facility floor layouts',
+            icon: Layers,
+            action: () => navigate('/layout-designer')
         }
     ];
 
@@ -190,36 +204,34 @@ export default function SettingsPage() {
                 </div>
             </section>
 
-            {/* Admin Sections */}
-            {sections.map((section, idx) => (
-                <section key={idx} className="card overflow-hidden">
-                    <h2 className="text-xs font-medium text-tertiary uppercase tracking-wider p-4 border-b border-subtle">
-                        Admin
-                    </h2>
-                    {section.items.map((item, itemIdx) => {
-                        const Icon = item.icon;
-                        return (
-                            <button
-                                key={itemIdx}
-                                onClick={item.action}
-                                className={`
-                                    w-full flex items-center gap-4 p-4 hover:bg-tertiary transition-colors duration-fast text-left
-                                    ${itemIdx !== section.items.length - 1 ? 'border-b border-subtle' : ''}
-                                `}
-                            >
-                                <div className="w-9 h-9 rounded-md bg-accent-muted flex items-center justify-center text-accent">
-                                    <Icon size={18} />
-                                </div>
-                                <div className="flex-1">
-                                    <div className="text-sm font-medium text-primary">{item.label}</div>
-                                    <div className="text-xs text-tertiary">{item.description}</div>
-                                </div>
-                                <ChevronRight size={16} className="text-tertiary" />
-                            </button>
-                        );
-                    })}
-                </section>
-            ))}
+            {/* Admin Section */}
+            <section className="card overflow-hidden">
+                <h2 className="text-xs font-medium text-tertiary uppercase tracking-wider p-4 border-b border-subtle">
+                    Admin
+                </h2>
+                {adminSections.map((item, idx) => {
+                    const Icon = item.icon;
+                    return (
+                        <button
+                            key={idx}
+                            onClick={item.action}
+                            className={`
+                                w-full flex items-center gap-4 p-4 hover:bg-tertiary transition-colors duration-fast text-left
+                                ${idx !== adminSections.length - 1 ? 'border-b border-subtle' : ''}
+                            `}
+                        >
+                            <div className="w-9 h-9 rounded-md bg-accent-muted flex items-center justify-center text-accent">
+                                <Icon size={18} />
+                            </div>
+                            <div className="flex-1">
+                                <div className="text-sm font-medium text-primary">{item.label}</div>
+                                <div className="text-xs text-tertiary">{item.description}</div>
+                            </div>
+                            <ChevronRight size={16} className="text-tertiary" />
+                        </button>
+                    );
+                })}
+            </section>
 
             {/* Reset Button */}
             <button