mdares/MIS-Contro-Tower
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finalish MVP

Browse Source
This commit is contained in:
mdares
2026-01-05 16:36:00 +00:00
parent 538b06bd4b
commit ea92b32618
19 changed files with 2289 additions and 701 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
components/layout/Sidebar.tsx
View File

@@ -3,17 +3,61 @@
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { BarChart3, LayoutGrid, LogOut, Settings, Wrench } from "lucide-react";
import { useI18n } from "@/lib/i18n/useI18n";
const THEME_COOKIE = "mis_theme";
const SunIcon = ({ className }: { className?: string }) => (
<svg
className={className}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.6"
strokeLinecap="round"
strokeLinejoin="round"
aria-hidden="true"
>
<circle cx="12" cy="12" r="4" />
<path d="M12 2v2" />
<path d="M12 20v2" />
<path d="M4.93 4.93l1.41 1.41" />
<path d="M17.66 17.66l1.41 1.41" />
<path d="M2 12h2" />
<path d="M20 12h2" />
<path d="M4.93 19.07l1.41-1.41" />
<path d="M17.66 6.34l1.41-1.41" />
</svg>
);
const MoonIcon = ({ className }: { className?: string }) => (
<svg
className={className}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.6"
strokeLinecap="round"
strokeLinejoin="round"
aria-hidden="true"
>
<path d="M21 12.5A8.5 8.5 0 0 1 11.5 3a8.5 8.5 0 1 0 9.5 9.5z" />
</svg>
);
const items = [
{ href: "/overview", label: "Overview", icon: "🏠" },
{ href: "/machines", label: "Machines", icon: "🏭" },
{ href: "/reports", label: "Reports", icon: "📊" },
{ href: "/settings", label: "Settings", icon: "⚙️" },
];
{ href: "/overview", labelKey: "nav.overview", icon: LayoutGrid },
{ href: "/machines", labelKey: "nav.machines", icon: Wrench },
{ href: "/reports", labelKey: "nav.reports", icon: BarChart3 },
{ href: "/settings", labelKey: "nav.settings", icon: Settings },
] as const;
export function Sidebar() {
const pathname = usePathname();
const router = useRouter();
const { locale, setLocale, t } = useI18n();
const [theme, setTheme] = useState<"dark" | "light">("dark");
const [me, setMe] = useState<{
user?: { name?: string | null; email?: string | null };
org?: { name?: string | null };
@@ -39,22 +83,42 @@ export function Sidebar() {
};
}, []);
useEffect(() => {
const current = document.documentElement.getAttribute("data-theme");
if (current === "light" || current === "dark") {
setTheme(current);
}
}, []);
function applyTheme(next: "light" | "dark") {
document.documentElement.setAttribute("data-theme", next);
document.cookie = `${THEME_COOKIE}=${next}; Path=/; Max-Age=31536000; SameSite=Lax`;
setTheme(next);
}
function toggleTheme() {
applyTheme(theme === "light" ? "dark" : "light");
}
async function onLogout() {
await fetch("/api/logout", { method: "POST" });
router.push("/login");
router.refresh();
}
const roleKey = (me?.membership?.role || "MEMBER").toLowerCase();
return (
<aside className="hidden md:flex h-screen w-64 flex-col border-r border-white/10 bg-black/40">
<aside className="relative z-20 hidden md:flex h-screen w-64 flex-col border-r border-white/10 bg-black/40">
<div className="px-5 py-4">
<div className="text-white font-semibold tracking-wide">MIS</div>
<div className="text-xs text-zinc-500">Control Tower</div>
<div className="text-white font-semibold tracking-wide">{t("sidebar.productTitle")}</div>
<div className="text-xs text-zinc-500">{t("sidebar.productSubtitle")}</div>
</div>
<nav className="px-3 py-2 flex-1 space-y-1">
{items.map((it) => {
const active = pathname === it.href || pathname.startsWith(it.href + "/");
const Icon = it.icon;
return (
<Link
key={it.href}
@@ -66,8 +130,8 @@ export function Sidebar() {
: "text-zinc-300 hover:bg-white/5 hover:text-white",
].join(" ")}
>
<span className="text-lg">{it.icon}</span>
<span>{it.label}</span>
<Icon className="h-4 w-4" />
<span>{t(it.labelKey)}</span>
</Link>
);
})}
@@ -75,9 +139,52 @@ export function Sidebar() {
<div className="px-5 py-4 border-t border-white/10 space-y-3">
<div>
<div className="text-sm text-white">{me?.user?.name || me?.user?.email || "User"}</div>
<div className="text-sm text-white">
{me?.user?.name || me?.user?.email || t("sidebar.userFallback")}
</div>
<div className="text-xs text-zinc-500">
{me?.org?.name ? `${me.org.name} - ${me?.membership?.role || "MEMBER"}` : "Loading..."}
{me?.org?.name
? `${me.org.name} - ${t(`sidebar.role.${roleKey}`)}`
: t("sidebar.loadingOrg")}
</div>
</div>
<div
className="pointer-events-auto flex items-center justify-between gap-3 rounded-xl border border-white/10 bg-white/5 px-3 py-2"
title={t("sidebar.themeTooltip")}
>
<button
type="button"
onClick={toggleTheme}
aria-label={theme === "light" ? t("sidebar.switchToDark") : t("sidebar.switchToLight")}
className="flex h-8 w-8 items-center justify-center rounded-full border border-white/10 bg-black/30 text-white hover:bg-white/10 transition"
>
{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]">
<button
type="button"
onClick={() => {
setLocale("en");
router.refresh();
}}
aria-pressed={locale === "en"}
className={locale === "en" ? "text-white" : "text-zinc-400 hover:text-white"}
>
EN
</button>
<span className="text-zinc-500">|</span>
<button
type="button"
onClick={() => {
setLocale("es-MX");
router.refresh();
}}
aria-pressed={locale === "es-MX"}
className={locale === "es-MX" ? "text-white" : "text-zinc-400 hover:text-white"}
>
ES
</button>
</div>
</div>
@@ -85,7 +192,10 @@ export function Sidebar() {
onClick={onLogout}
className="w-full rounded-xl border border-white/10 bg-white/5 px-3 py-2 text-sm text-zinc-200 hover:bg-white/10"
>
🚪 Logout
<span className="flex items-center justify-center gap-2">
<LogOut className="h-4 w-4" />
{t("sidebar.logout")}
</span>
</button>
</div>
</aside>