Added emergency, jobinfo and beginner admin page

src/App.tsx

@@ -1,38 +1,38 @@
 // src/App.tsx
 
-import { Calendar, FileText, Home as HomeIcon, Leaf, Map, ShieldAlert } from 'lucide-react';
-import { Link, Route, BrowserRouter as Router, Routes, useLocation } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';
+import { Calendar, FileText, Home as HomeIcon, Map, Leaf, Briefcase, LifeBuoy, Lock } from 'lucide-react';
 
-import { Documents } from './pages/Documents';
-import { FAQ } from './pages/FAQ';
 import { Home } from './pages/Home';
 import { JobInfo } from './pages/JobInfo';
+import { FAQ } from './pages/FAQ';
+import { Documents } from './pages/Documents';
 import { Schedule } from './pages/Schedule';
+import { Emergency } from './pages/Emergency';
+import { Admin } from './pages/admin/AdminDashboard';
 
-const Admin = () => <div className="p-6"><h2>Admin Dashboard (Kräver pinkod)</h2></div>;
-
-const NavItem = ({ to, icon: Icon, label }: { to: string, icon: any, label: string }) => {
+const NavItem = ({ to, icon: Icon, label, className = "" }: { to: string, icon: any, label: string, className?: string }) => {
   const location = useLocation();
   const isActive = location.pathname === to;
   return (
     <Link
       to={to}
-      className={`flex items-center px-4 py-3 whitespace-nowrap text-sm font-bold transition-all border-b-[3px] ${isActive
+      className={`flex flex-col items-center justify-center px-4 py-2 min-w-18 transition-colors border-b-[3px] ${className} ${isActive
         ? 'border-gold text-gold bg-ebony/30'
         : 'border-transparent text-eggshell/80 hover:text-eggshell hover:bg-eggshell/5'
         }`}
     >
-      <Icon size={18} className="mr-2" strokeWidth={isActive ? 2.5 : 2} />
-      {label}
+      <Icon size={20} className="mb-1" strokeWidth={isActive ? 2.5 : 2} />
+      <span className="text-[10px] font-bold uppercase tracking-wider">{label}</span>
     </Link>
   );
 };
 
 function AppContent() {
   return (
-    <div className="min-h-screen bg-eggshell font-sans text-ebony selection:bg-gold selection:text-ebony">
+    <div className="min-h-screen bg-eggshell font-sans text-ebony selection:bg-gold selection:text-ebony pb-10">
 
-      {/* Creative, vibrant header using only your colors */}
+      {/* Header & Navigation */}
       <header className="sticky top-0 z-50 bg-ebony shadow-md">
         <div className="max-w-5xl mx-auto">
           {/* App Title Bar */}
@@ -46,10 +46,12 @@ function AppContent() {
           {/* Scrollable Tab Navigation */}
           <nav className="flex overflow-x-auto scrollbar-hide border-t border-eggshell/10">
             <NavItem to="/" icon={HomeIcon} label="Hem" />
-            <NavItem to="/faq" icon={Map} label="FAQ" />
             <NavItem to="/schedule" icon={Calendar} label="Schema" />
-            <NavItem to="/documents" icon={FileText} label="Info & Dok" />
-            <NavItem to="/admin" icon={ShieldAlert} label="Admin" />
+            <NavItem to="/faq" icon={Map} label="FAQ" />
+            <NavItem to="/info" icon={Briefcase} label="Info" />
+            <NavItem to="/documents" icon={FileText} label="Filer" />
+            <NavItem to="/emergency" icon={LifeBuoy} label="Nödläge" className='text-emergency' />
+            <NavItem to="/admin" icon={Lock} label="Admin" className="md:ml-auto" />
           </nav>
         </div>
       </header>
@@ -62,6 +64,7 @@ function AppContent() {
           <Route path="/faq" element={<FAQ />} />
           <Route path="/documents" element={<Documents />} />
           <Route path="/schedule" element={<Schedule />} />
+          <Route path="/emergency" element={<Emergency />} />
           <Route path="/admin" element={<Admin />} />
         </Routes>
       </main>