Fix dashboard link and set up proper linking to avoid page reloads

inventory/src/App.tsx

@@ -51,22 +51,8 @@ function App() {
       <Toaster richColors position="top-center" />
       <Routes>
         <Route path="/login" element={<Login />} />
-        <Route
-          path="/"
-          element={
-            isLoggedIn ? (
-              <Navigate to="/dashboard" replace />
-            ) : (
-              <Navigate to="/login" replace />
-            )
-          }
-        />
-        <Route
-          path="*"
-          element={
-            isLoggedIn ? (
-              <MainLayout>
-                <Routes>
+        {isLoggedIn ? (
+          <Route element={<MainLayout />}>
             <Route path="/" element={<Dashboard />} />
             <Route path="/products" element={<Products />} />
             <Route path="/import" element={<Import />} />
@@ -74,13 +60,11 @@ function App() {
             <Route path="/purchase-orders" element={<PurchaseOrders />} />
             <Route path="/analytics" element={<Analytics />} />
             <Route path="/settings" element={<Settings />} />
-                </Routes>
-              </MainLayout>
+            <Route path="*" element={<Navigate to="/" replace />} />
+          </Route>
         ) : (
-              <Navigate to="/login" replace />
-            )
-          }
-        />
+          <Route path="*" element={<Navigate to="/login" replace />} />
+        )}
       </Routes>
     </QueryClientProvider>
   );

inventory/src/components/layout/AppSidebar.tsx

@@ -20,7 +20,7 @@ import {
   SidebarMenuItem,
   SidebarSeparator,
 } from "@/components/ui/sidebar";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useLocation, useNavigate, Link } from "react-router-dom";
 
 const items = [
   {
@@ -86,12 +86,12 @@ export function AppSidebar() {
                       tooltip={item.title}
                       isActive={isActive}
                     >
-                      <a href={item.url}>
+                      <Link to={item.url}>
                         <item.icon className="h-4 w-4" />
                         <span className="group-data-[collapsible=icon]:hidden">
                           {item.title}
                         </span>
-                      </a>
+                      </Link>
                     </SidebarMenuButton>
                   </SidebarMenuItem>
                 );
@@ -110,12 +110,12 @@ export function AppSidebar() {
                   tooltip="Settings"
                   isActive={location.pathname === "/settings"}
                 >
-                  <a href="/settings">
+                  <Link to="/settings">
                     <Settings className="h-4 w-4" />
                     <span className="group-data-[collapsible=icon]:hidden">
                       Settings
                     </span>
-                  </a>
+                  </Link>
                 </SidebarMenuButton>
               </SidebarMenuItem>
             </SidebarMenu>

inventory/src/components/layout/MainLayout.tsx

@@ -1,11 +1,8 @@
 import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
 import { AppSidebar } from "./AppSidebar";
+import { Outlet } from "react-router-dom";
 
-interface MainLayoutProps {
-  children: React.ReactNode;
-}
-
-export function MainLayout({ children }: MainLayoutProps) {
+export function MainLayout() {
   return (
     <SidebarProvider defaultOpen>
       <div className="flex min-h-screen w-full pr-2">
@@ -15,7 +12,7 @@ export function MainLayout({ children }: MainLayoutProps) {
             <SidebarTrigger />
           </div>
           <div className="overflow-auto h-[calc(100vh-3.5rem)] max-w-[1500px]">
-            {children}
+            <Outlet />
           </div>
         </main>
       </div>