feat: implement initial categories crud for human-in-the-loop norm builder

App.tsx

@@ -10,8 +10,10 @@ import { ReportDisplay } from './components/ReportDisplay';
 import { PrintableReport } from './components/PrintableReport';
 import { DownloadIcon, EyeIcon, CogIcon } from './components/Icons';
 import { ApiKeySetup } from './components/ApiKeySetup';
+import { AdminCategories } from './components/AdminCategories';
 
 const App: React.FC = () => {
+  const [viewMode, setViewMode] = useState<'analysis' | 'admin'>('analysis');
   const [file, setFile] = useState<File | null>(null);
   const [apiKey, setApiKey] = useState<string>('');
   const [endpoint, setEndpoint] = useState<string>('');
@@ -202,13 +204,22 @@ const App: React.FC = () => {
     <div className="min-h-screen">
       <div className="app-main-content">
         {isLoading && <Loader />}
-        <Header onReset={handleReset} onClearKey={handleClearKey} hasKey={hasKey} provider={provider} />
+        <Header 
+          onReset={handleReset} 
+          onClearKey={handleClearKey} 
+          hasKey={hasKey} 
+          provider={provider} 
+          onToggleAdmin={() => setViewMode(viewMode === 'admin' ? 'analysis' : 'admin')}
+          isAdminView={viewMode === 'admin'}
+        />
 
         <main className="container mx-auto p-4 sm:p-6 md:p-8 max-w-7xl">
         {!isConfigLoaded ? (
           <div className="flex justify-center items-center py-20">
             <span className="w-10 h-10 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></span>
           </div>
+        ) : viewMode === 'admin' ? (
+          <AdminCategories />
         ) : (!hasKey || showSetup) ? (
           <ApiKeySetup onKeySave={handleKeySave} onCancel={hasKey ? () => setShowSetup(false) : undefined} />
         ) : !reportsData ? (