stage 1 of oauth removal, switch to sanctum pat tokens

resources/js/admin/components/AdminLayout.tsx

@@ -19,6 +19,7 @@ import {
 } from 'lucide-react';
 import { LanguageSwitcher } from './LanguageSwitcher';
 import { registerApiErrorListener } from '../lib/apiError';
+import { getDashboardSummary, getEvents, getTenantPackagesOverview } from '../api';
 
 const navItems = [
   { to: ADMIN_HOME_PATH, labelKey: 'navigation.dashboard', icon: LayoutDashboard, end: true },
@@ -37,6 +38,39 @@ interface AdminLayoutProps {
 
 export function AdminLayout({ title, subtitle, actions, children }: AdminLayoutProps) {
   const { t } = useTranslation('common');
+  const prefetchedPathsRef = React.useRef<Set<string>>(new Set());
+
+  const prefetchers = React.useMemo(() => ({
+    [ADMIN_HOME_PATH]: () =>
+      Promise.all([
+        getDashboardSummary(),
+        getEvents(),
+        getTenantPackagesOverview(),
+      ]).then(() => undefined),
+    [ADMIN_EVENTS_PATH]: () => getEvents().then(() => undefined),
+    [ADMIN_ENGAGEMENT_PATH]: () => getEvents().then(() => undefined),
+    [ADMIN_BILLING_PATH]: () => getTenantPackagesOverview().then(() => undefined),
+    [ADMIN_SETTINGS_PATH]: () => Promise.resolve(),
+  }), []);
+
+  const triggerPrefetch = React.useCallback(
+    (path: string) => {
+      if (prefetchedPathsRef.current.has(path)) {
+        return;
+      }
+
+      const runner = prefetchers[path as keyof typeof prefetchers];
+      if (!runner) {
+        return;
+      }
+
+      prefetchedPathsRef.current.add(path);
+      Promise.resolve(runner()).catch(() => {
+        prefetchedPathsRef.current.delete(path);
+      });
+    },
+    [prefetchers],
+  );
 
   React.useEffect(() => {
     document.body.classList.add('tenant-admin-theme');
@@ -78,18 +112,21 @@ export function AdminLayout({ title, subtitle, actions, children }: AdminLayoutP
                 {actions}
               </div>
             </div>
-            <nav className="hidden items-center gap-2 border-t border-white/20 px-6 py-4 md:flex">
+            <nav className="hidden items-center gap-2 border-t border-slate-200/70 px-6 py-4 md:flex">
               {navItems.map(({ to, labelKey, icon: Icon, end }) => (
                 <NavLink
                   key={to}
                   to={to}
                   end={end}
+                  onPointerEnter={() => triggerPrefetch(to)}
+                  onFocus={() => triggerPrefetch(to)}
+                  onTouchStart={() => triggerPrefetch(to)}
                   className={({ isActive }) =>
                     cn(
-                      'flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition-all duration-200',
+                      'flex items-center gap-2 rounded-full px-4 py-2 text-sm font-semibold transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-300 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-slate-950',
                       isActive
-                        ? 'bg-gradient-to-r from-[#ff5f87] via-[#ec4899] to-[#6366f1] text-white shadow-lg shadow-rose-300/30'
-                        : 'bg-white/70 text-slate-600 hover:bg-white hover:text-slate-900'
+                        ? 'bg-rose-600 text-white shadow-md shadow-rose-400/30'
+                        : 'border border-slate-200/80 bg-white text-slate-700 hover:bg-rose-50/80 hover:text-rose-700'
                     )
                   }
                 >
@@ -101,7 +138,7 @@ export function AdminLayout({ title, subtitle, actions, children }: AdminLayoutP
           </div>
         </header>
 
-        <main className="relative z-10 mx-auto w-full max-w-6xl flex-1 px-4 pb-28 pt-6 sm:px-6">
+        <main className="relative z-10 mx-auto w-full max-w-6xl flex-1 px-4 pb-[calc(env(safe-area-inset-bottom,0)+6.5rem)] pt-6 sm:px-6 md:pb-16">
           <div className="grid gap-6">{children}</div>
         </main>
 
@@ -115,26 +152,35 @@ function TenantMobileNav({ items }: { items: typeof navItems }) {
   const { t } = useTranslation('common');
 
   return (
-    <nav className="sticky bottom-4 z-40 px-4 pb-2 md:hidden">
-      <div className="mx-auto flex w-full max-w-md items-center justify-around rounded-full border border-white/20 bg-white/90 p-2 text-slate-600 shadow-2xl shadow-rose-300/20 backdrop-blur-xl">
-        {items.map(({ to, labelKey, icon: Icon, end }) => (
-          <NavLink
-            key={to}
-            to={to}
-            end={end}
-            className={({ isActive }) =>
-              cn(
-                'flex flex-col items-center gap-1 rounded-full px-3 py-2 text-xs font-medium transition',
-                isActive
-                  ? 'bg-gradient-to-r from-[#ff5f87] via-[#ec4899] to-[#6366f1] text-white shadow-lg shadow-rose-300/30'
-                  : 'text-slate-600 hover:text-slate-900'
-              )
-            }
-          >
-            <Icon className="h-5 w-5" />
-            <span>{t(labelKey)}</span>
-          </NavLink>
-        ))}
+    <nav className="md:hidden" aria-label={t('navigation.mobile', { defaultValue: 'Tenant Navigation' })}>
+      <div
+        aria-hidden
+        className="pointer-events-none fixed inset-x-0 bottom-0 z-30 h-16 bg-gradient-to-t from-slate-950/35 via-transparent to-transparent dark:from-black/60"
+      />
+      <div className="fixed inset-x-0 bottom-0 z-40 border-t border-slate-200/80 bg-white/95 px-4 pb-[calc(env(safe-area-inset-bottom,0)+0.75rem)] pt-3 shadow-2xl shadow-rose-300/15 backdrop-blur supports-[backdrop-filter]:bg-white/90 dark:border-slate-800/70 dark:bg-slate-950/90">
+        <div className="mx-auto flex max-w-xl items-center justify-around gap-1">
+          {items.map(({ to, labelKey, icon: Icon, end }) => (
+            <NavLink
+              key={to}
+              to={to}
+              end={end}
+              onPointerEnter={() => triggerPrefetch(to)}
+              onFocus={() => triggerPrefetch(to)}
+              onTouchStart={() => triggerPrefetch(to)}
+              className={({ isActive }) =>
+                cn(
+                  'flex flex-col items-center gap-1 rounded-xl px-3 py-2 text-xs font-semibold text-slate-600 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-300 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:text-slate-300 dark:focus-visible:ring-offset-slate-950',
+                  isActive
+                    ? 'bg-rose-600 text-white shadow-md shadow-rose-400/25'
+                    : 'hover:text-rose-700 dark:hover:text-rose-200'
+                )
+              }
+            >
+              <Icon className="h-5 w-5" />
+              <span>{t(labelKey)}</span>
+            </NavLink>
+          ))}
+        </div>
       </div>
     </nav>
   );

resources/js/admin/components/tenant/hero-card.tsx

@@ -29,30 +29,31 @@ export function TenantHeroCard({
   return (
     <Card
       className={cn(
-        'relative overflow-hidden border border-white/15 bg-white/95 text-slate-900 shadow-2xl shadow-rose-400/10 backdrop-blur-xl',
-        'dark:border-white/10 dark:bg-slate-900/95 dark:text-slate-100',
+        'relative overflow-hidden border border-slate-200/80 bg-white text-slate-900 shadow-xl shadow-rose-200/30 backdrop-blur',
+        'dark:border-white/10 dark:bg-slate-950/90 dark:text-slate-100',
         className
       )}
     >
       <div
         aria-hidden
-        className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,_rgba(255,137,170,0.3),_transparent_60%),radial-gradient(ellipse_at_bottom,_rgba(99,102,241,0.3),_transparent_65%)] motion-safe:animate-[aurora_18s_ease-in-out_infinite]"
+        className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,_rgba(255,137,170,0.18),_transparent_55%),radial-gradient(ellipse_at_bottom,_rgba(99,102,241,0.16),_transparent_65%)] motion-safe:animate-[aurora_18s_ease-in-out_infinite] dark:hidden"
       />
-      <div aria-hidden className="absolute inset-0 bg-gradient-to-br from-slate-950/80 via-slate-900/20 to-transparent mix-blend-overlay" />
+      <div aria-hidden className="absolute inset-0 bg-gradient-to-br from-rose-50/70 via-white to-sky-50/70 dark:hidden" />
+      <div aria-hidden className="absolute inset-0 hidden bg-gradient-to-br from-slate-950/80 via-slate-900/20 to-transparent mix-blend-overlay dark:block" />
 
       <CardContent className="relative z-10 flex flex-col gap-8 px-6 py-8 lg:flex-row lg:items-start lg:justify-between lg:px-10 lg:py-12">
-        <div className="max-w-2xl space-y-6 text-white">
+        <div className="max-w-2xl space-y-6">
           {badge ? (
-            <span className="inline-flex items-center gap-2 rounded-full border border-white/40 bg-white/15 px-4 py-1 text-xs font-semibold uppercase tracking-[0.35em]">
+            <span className="inline-flex items-center gap-2 rounded-full border border-rose-100 bg-rose-50/80 px-4 py-1 text-xs font-semibold uppercase tracking-[0.35em] text-rose-600 dark:border-white/30 dark:bg-white/15 dark:text-white">
               {badge}
             </span>
           ) : null}
 
-          <div className="space-y-3">
-            <h1 className="font-display text-3xl tracking-tight sm:text-4xl">{title}</h1>
-            {description ? <p className="text-sm text-white/80 sm:text-base">{description}</p> : null}
+          <div className="space-y-3 text-slate-700 dark:text-slate-100">
+            <h1 className="font-display text-3xl font-semibold tracking-tight text-slate-900 dark:text-white sm:text-4xl">{title}</h1>
+            {description ? <p className="text-sm text-slate-600 dark:text-white/75 sm:text-base">{description}</p> : null}
             {supporting?.map((paragraph) => (
-              <p key={paragraph} className="text-sm text-white/75 sm:text-base">
+              <p key={paragraph} className="text-sm text-slate-600 dark:text-white/75 sm:text-base">
                 {paragraph}
               </p>
             ))}
@@ -60,7 +61,7 @@ export function TenantHeroCard({
           </div>
 
           {(primaryAction || secondaryAction) && (
-            <div className="flex flex-wrap gap-2">
+            <div className="flex flex-wrap gap-3">
               {primaryAction}
               {secondaryAction}
             </div>
@@ -72,3 +73,15 @@ export function TenantHeroCard({
     </Card>
   );
 }
+
+export const tenantHeroPrimaryButtonClass = cn(
+  'rounded-full bg-rose-600 px-6 text-sm font-semibold text-white shadow-md shadow-rose-400/30 transition-colors',
+  'hover:bg-rose-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-300 focus-visible:ring-offset-2 focus-visible:ring-offset-white',
+  'dark:focus-visible:ring-offset-slate-950'
+);
+
+export const tenantHeroSecondaryButtonClass = cn(
+  'rounded-full border border-slate-200/80 bg-white/95 px-6 text-sm font-semibold text-slate-700 shadow-sm transition-colors',
+  'hover:bg-rose-50 hover:text-rose-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-200 focus-visible:ring-offset-2 focus-visible:ring-offset-white',
+  'dark:border-white/20 dark:bg-white/10 dark:text-white dark:hover:bg-white/20 dark:focus-visible:ring-offset-slate-950'
+);

resources/js/admin/components/tenant/index.ts

@@ -1,6 +1,5 @@
-export { TenantHeroCard } from './hero-card';
+export { TenantHeroCard, tenantHeroPrimaryButtonClass, tenantHeroSecondaryButtonClass } from './hero-card';
 export { FrostedCard, FrostedSurface, frostedCardClass } from './frosted-surface';
 export { ChecklistRow } from './checklist-row';
 export type { ChecklistStep } from './onboarding-checklist-card';
 export { TenantOnboardingChecklistCard } from './onboarding-checklist-card';
-