mylegal-stage-law/src/routes/settings.tsx

import { createFileRoute, Link, useLocation } from "@tanstack/react-router";
import { ProtectedLayout } from "@/components/protected-layout";
import { PageContainer, PageHeader } from "@/components/app-shell";
import { Outlet } from "@tanstack/react-router";
import { useAuth } from "@/lib/auth";
import { cn } from "@/lib/utils";

export const Route = createFileRoute("/settings")({
  component: SettingsLayout,
});

const TABS = [
  { to: "/settings/profile", label: "My profile", anyone: true },
  { to: "/settings", label: "Company", exact: true },
  { to: "/settings/fees", label: "Fee schedule" },
  { to: "/settings/custom-fields", label: "Custom case fields" },
  { to: "/settings/client-fields", label: "Custom client fields" },
  { to: "/settings/form-templates", label: "Form templates" },
  { to: "/settings/workflow", label: "Collections workflow" },
  { to: "/settings/workflows", label: "Task workflows" },
  { to: "/settings/smtp", label: "Email (SMTP)" },
  { to: "/settings/imap", label: "Email (IMAP)" },
  { to: "/settings/import", label: "CSV import" },
];

function SettingsLayout() {
  const location = useLocation();
  const { isAdmin } = useAuth();
  const visibleTabs = TABS.filter((t) => t.anyone || isAdmin);
  return (
    <ProtectedLayout>
      <PageContainer>
        <PageHeader
          title="Settings"
          description="Configure firm-wide information and billing defaults."
        />
        <div className="flex gap-1 border-b mb-6 overflow-x-auto">
          {visibleTabs.map((t) => {
            const active = t.exact
              ? location.pathname === t.to
              : location.pathname.startsWith(t.to);
            return (
              <Link
                key={t.to}
                to={t.to}
                className={cn(
                  "px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors",
                  active
                    ? "border-primary text-foreground"
                    : "border-transparent text-muted-foreground hover:text-foreground",
                )}
              >
                {t.label}
              </Link>
            );
          })}
        </div>
        <Outlet />
      </PageContainer>
    </ProtectedLayout>
  );
}