admin login fixed.

apps/admin/src/app/dashboard/companies/[id]/page.tsx

@@ -207,6 +207,17 @@ const STATUS_COLORS: Record<string, string> = {
 const INPUT_CLASS = 'mt-1 w-full rounded-xl border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 outline-none focus:border-emerald-500'
 const LABEL_CLASS = 'text-xs font-medium uppercase tracking-wide text-zinc-500'
 
+const COMPANY_TABS = [
+  { id: 'company', label: 'Company' },
+  { id: 'subscription', label: 'Subscription' },
+  { id: 'publicProfile', label: 'Public profile' },
+  { id: 'legalProfile', label: 'Legal profile' },
+  { id: 'operations', label: 'Operations & finance' },
+  { id: 'activity', label: 'Activity' },
+] as const
+
+type CompanyTabId = (typeof COMPANY_TABS)[number]['id']
+
 function toDateInput(value: string | null | undefined) {
   return value ? new Date(value).toISOString().slice(0, 10) : ''
 }
@@ -318,6 +329,7 @@ export default function AdminCompanyDetailPage() {
   const [saving, setSaving] = useState(false)
   const [savedMessage, setSavedMessage] = useState<string | null>(null)
   const [deleteConfirm, setDeleteConfirm] = useState(false)
+  const [activeTab, setActiveTab] = useState<CompanyTabId>('company')
 
   async function fetchData() {
     try {
@@ -566,8 +578,40 @@ export default function AdminCompanyDetailPage() {
         ))}
       </div>
 
-      <div className="grid gap-6 xl:grid-cols-2">
-        <section className="panel p-6">
+      <div className="space-y-6">
+        <div className="overflow-x-auto border-b border-zinc-800">
+          <div className="flex min-w-max gap-1" role="tablist" aria-label="Company detail subjects">
+            {COMPANY_TABS.map((tab) => {
+              const selected = activeTab === tab.id
+              return (
+                <button
+                  key={tab.id}
+                  type="button"
+                  role="tab"
+                  aria-selected={selected}
+                  aria-controls={`company-tab-${tab.id}`}
+                  id={`company-tab-trigger-${tab.id}`}
+                  onClick={() => setActiveTab(tab.id)}
+                  className={`rounded-t-xl px-4 py-3 text-sm font-semibold transition-colors ${
+                    selected
+                      ? 'bg-zinc-800 text-white'
+                      : 'text-zinc-500 hover:bg-zinc-900 hover:text-zinc-200'
+                  }`}
+                >
+                  {tab.label}
+                </button>
+              )
+            })}
+          </div>
+        </div>
+
+        <section
+          id="company-tab-company"
+          role="tabpanel"
+          aria-labelledby="company-tab-trigger-company"
+          hidden={activeTab !== 'company'}
+          className="panel p-6"
+        >
           <h2 className="text-base font-semibold">Company</h2>
           <div className="mt-4 grid gap-4 md:grid-cols-2">
             <label>
@@ -597,7 +641,13 @@ export default function AdminCompanyDetailPage() {
           </div>
         </section>
 
-        <section className="panel p-6">
+        <section
+          id="company-tab-subscription"
+          role="tabpanel"
+          aria-labelledby="company-tab-trigger-subscription"
+          hidden={activeTab !== 'subscription'}
+          className="panel p-6"
+        >
           <h2 className="text-base font-semibold">Subscription</h2>
           <div className="mt-4 grid gap-4 md:grid-cols-2">
             <label>
@@ -663,7 +713,13 @@ export default function AdminCompanyDetailPage() {
           </div>
         </section>
 
-        <section className="panel p-6">
+        <section
+          id="company-tab-publicProfile"
+          role="tabpanel"
+          aria-labelledby="company-tab-trigger-publicProfile"
+          hidden={activeTab !== 'publicProfile'}
+          className="panel p-6"
+        >
           <h2 className="text-base font-semibold">Brand and public profile</h2>
           <div className="mt-4 grid gap-4 md:grid-cols-2">
             <label>
@@ -729,7 +785,13 @@ export default function AdminCompanyDetailPage() {
           </div>
         </section>
 
-        <section className="panel p-6">
+        <section
+          id="company-tab-legalProfile"
+          role="tabpanel"
+          aria-labelledby="company-tab-trigger-legalProfile"
+          hidden={activeTab !== 'legalProfile'}
+          className="panel p-6"
+        >
           <h2 className="text-base font-semibold">Company legal profile</h2>
           <div className="mt-4 grid gap-6">
             <div className="grid gap-4 md:grid-cols-2">
@@ -817,7 +879,13 @@ export default function AdminCompanyDetailPage() {
           </div>
         </section>
 
-        <section className="panel p-6">
+        <section
+          id="company-tab-operations"
+          role="tabpanel"
+          aria-labelledby="company-tab-trigger-operations"
+          hidden={activeTab !== 'operations'}
+          className="panel p-6"
+        >
           <h2 className="text-base font-semibold">Operations and finance</h2>
           <div className="mt-4 grid gap-6">
             <div className="grid gap-4 md:grid-cols-2">
@@ -915,7 +983,13 @@ export default function AdminCompanyDetailPage() {
         </section>
       </div>
 
-      <div className="grid gap-6 lg:grid-cols-2">
+      <div
+        id="company-tab-activity"
+        role="tabpanel"
+        aria-labelledby="company-tab-trigger-activity"
+        hidden={activeTab !== 'activity'}
+        className="grid gap-6 lg:grid-cols-2"
+      >
         <div className="space-y-4">
           <div className="panel p-6 space-y-4">
             <h2 className="text-base font-semibold">Company actions</h2>