Mobile friendly, lint correction, typescript error clear

components/layout/AppShell.tsx

@@ -2,20 +2,20 @@
 
 import { useEffect, useState } from "react";
 import { Menu } from "lucide-react";
-import { usePathname } from "next/navigation";
 import { Sidebar } from "@/components/layout/Sidebar";
 import { UtilityControls } from "@/components/layout/UtilityControls";
 import { useI18n } from "@/lib/i18n/useI18n";
 
-export function AppShell({ children }: { children: React.ReactNode }) {
+export function AppShell({
+  children,
+  initialTheme,
+}: {
+  children: React.ReactNode;
+  initialTheme?: "dark" | "light";
+}) {
   const { t } = useI18n();
-  const pathname = usePathname();
   const [drawerOpen, setDrawerOpen] = useState(false);
 
-  useEffect(() => {
-    setDrawerOpen(false);
-  }, [pathname]);
-
   useEffect(() => {
     if (!drawerOpen) return;
     const onKey = (event: KeyboardEvent) => {
@@ -34,7 +34,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
       <div className="flex min-h-screen">
         <Sidebar />
         <div className="flex min-h-screen flex-1 flex-col">
-          <header className="sticky top-0 z-30 flex h-14 items-center justify-between border-b border-white/10 bg-black/20 px-4 backdrop-blur">
+          <header className="sticky top-0 z-30 flex min-h-[3.5rem] flex-wrap items-center justify-between gap-3 border-b border-white/10 bg-black/20 px-4 py-2 backdrop-blur">
             <div className="flex items-center gap-3">
               <button
                 type="button"
@@ -48,7 +48,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
                 {t("sidebar.productTitle")}
               </div>
             </div>
-            <UtilityControls />
+            <UtilityControls initialTheme={initialTheme} />
           </header>
           <main className="flex-1">{children}</main>
         </div>

components/layout/Sidebar.tsx

@@ -2,17 +2,26 @@
 
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
-import { BarChart3, Bell, LayoutGrid, LogOut, Settings, Wrench, X } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { BarChart3, Bell, DollarSign, LayoutGrid, LogOut, Settings, Wrench, X } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
 import { useI18n } from "@/lib/i18n/useI18n";
 
-const items = [
+type NavItem = {
+  href: string;
+  labelKey: string;
+  icon: LucideIcon;
+  ownerOnly?: boolean;
+};
+
+const items: NavItem[] = [
   { href: "/overview", labelKey: "nav.overview", icon: LayoutGrid },
   { href: "/machines", labelKey: "nav.machines", icon: Wrench },
   { href: "/reports", labelKey: "nav.reports", icon: BarChart3 },
   { href: "/alerts", labelKey: "nav.alerts", icon: Bell },
+  { href: "/financial", labelKey: "nav.financial", icon: DollarSign, ownerOnly: true },
   { href: "/settings", labelKey: "nav.settings", icon: Settings },
-] as const;
+];
 
 type SidebarProps = {
   variant?: "desktop" | "drawer";
@@ -57,6 +66,14 @@ export function Sidebar({ variant = "desktop", onNavigate, onClose }: SidebarPro
   }
 
   const roleKey = (me?.membership?.role || "MEMBER").toLowerCase();
+  const isOwner = roleKey === "owner";
+  const visibleItems = useMemo(() => items.filter((it) => !it.ownerOnly || isOwner), [isOwner]);
+
+  useEffect(() => {
+    visibleItems.forEach((it) => {
+      router.prefetch(it.href);
+    });
+  }, [router, visibleItems]);
   const shellClass = [
     "relative z-20 flex flex-col border-r border-white/10 bg-black/40",
     variant === "desktop" ? "hidden md:flex h-screen w-64" : "flex h-full w-72 max-w-[85vw]",
@@ -82,13 +99,14 @@ export function Sidebar({ variant = "desktop", onNavigate, onClose }: SidebarPro
       </div>
 
       <nav className="px-3 py-2 flex-1 space-y-1">
-        {items.map((it) => {
+        {visibleItems.map((it) => {
           const active = pathname === it.href || pathname.startsWith(it.href + "/");
           const Icon = it.icon;
           return (
             <Link
               key={it.href}
               href={it.href}
+              onMouseEnter={() => router.prefetch(it.href)}
               onClick={onNavigate}
               className={[
                 "flex items-center gap-3 rounded-xl px-3 py-2 text-sm transition",

components/layout/UtilityControls.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { useI18n } from "@/lib/i18n/useI18n";
 
@@ -46,19 +46,13 @@ const MoonIcon = ({ className }: { className?: string }) => (
 
 type UtilityControlsProps = {
   className?: string;
+  initialTheme?: "dark" | "light";
 };
 
-export function UtilityControls({ className }: UtilityControlsProps) {
+export function UtilityControls({ className, initialTheme = "dark" }: UtilityControlsProps) {
   const router = useRouter();
   const { locale, setLocale, t } = useI18n();
-  const [theme, setTheme] = useState<"dark" | "light">("dark");
-
-  useEffect(() => {
-    const current = document.documentElement.getAttribute("data-theme");
-    if (current === "light" || current === "dark") {
-      setTheme(current);
-    }
-  }, []);
+  const [theme, setTheme] = useState<"dark" | "light">(initialTheme);
 
   function applyTheme(next: "light" | "dark") {
     document.documentElement.setAttribute("data-theme", next);
@@ -78,7 +72,7 @@ export function UtilityControls({ className }: UtilityControlsProps) {
   return (
     <div
       className={[
-        "pointer-events-auto flex items-center gap-3 rounded-xl border border-white/10 bg-white/5 px-3 py-2",
+        "pointer-events-auto flex flex-wrap items-center gap-2 rounded-xl border border-white/10 bg-white/5 px-2 py-1 sm:gap-3 sm:px-3 sm:py-2",
         className ?? "",
       ].join(" ")}
       title={t("sidebar.themeTooltip")}
@@ -91,7 +85,7 @@ export function UtilityControls({ className }: UtilityControlsProps) {
       >
         {theme === "light" ? <SunIcon className="h-4 w-4" /> : <MoonIcon className="h-4 w-4" />}
       </button>
-      <div className="flex items-center gap-2 text-[11px] font-semibold tracking-[0.2em]">
+      <div className="flex items-center gap-2 text-[10px] font-semibold tracking-[0.2em] sm:text-[11px]">
         <button
           type="button"
           onClick={() => switchLocale("en")}