initial

App.tsx

@@ -0,0 +1,60 @@
+import { useState } from "react";
+import { Dashboard } from "./components/Dashboard";
+import { Inventory } from "./components/Inventory";
+import { ProtocolChecker } from "./components/ProtocolChecker";
+import { 
+  LayoutDashboard, 
+  Package, 
+  FileCheck
+} from "lucide-react";
+import logo from "figma:asset/e1cc93b8a3ca5c34482c2d8ace21b3610ba98443.png";
+
+type Tab = "dashboard" | "inventory" | "protocol";
+
+export default function App() {
+  const [activeTab, setActiveTab] = useState<Tab>("dashboard");
+
+  const navItems = [
+    { id: "dashboard" as Tab, label: "Dashboard", icon: LayoutDashboard },
+    { id: "inventory" as Tab, label: "Inventory", icon: Package },
+    { id: "protocol" as Tab, label: "Protocol Checker", icon: FileCheck },
+  ];
+
+  return (
+    <div className="flex h-screen bg-secondary">
+      {/* Sidebar */}
+      <aside className="w-64 bg-card border-r border-border flex flex-col">
+        <div className="p-6 border-b border-border flex items-center justify-center">
+          <img src={logo} alt="labwise" className="h-10" />
+        </div>
+        
+        <nav className="flex-1 p-4">
+          {navItems.map((item) => {
+            const Icon = item.icon;
+            return (
+              <button
+                key={item.id}
+                onClick={() => setActiveTab(item.id)}
+                className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg mb-2 transition-colors ${
+                  activeTab === item.id
+                    ? "bg-accent text-primary"
+                    : "text-muted-foreground hover:bg-muted"
+                }`}
+              >
+                <Icon className="w-5 h-5" />
+                <span>{item.label}</span>
+              </button>
+            );
+          })}
+        </nav>
+      </aside>
+
+      {/* Main Content */}
+      <main className="flex-1 overflow-auto">
+        {activeTab === "dashboard" && <Dashboard setActiveTab={setActiveTab} />}
+        {activeTab === "inventory" && <Inventory />}
+        {activeTab === "protocol" && <ProtocolChecker />}
+      </main>
+    </div>
+  );
+}