Refactor: Update Tenant PWA headers and tabs to use Playfair Display and Tamagui components

resources/js/admin/mobile/components/MobileShell.tsx

@@ -143,7 +143,7 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
   const EventContextPill = () => {
     if (!effectiveActive || isEventsIndex || isCompactHeader) {
        return (
-         <Text fontSize="$md" fontWeight="800" fontFamily="$display" color="white">
+         <Text fontSize="$md" fontWeight="700" fontFamily="$display" color="white">
             {pageTitle}
          </Text>
        );
@@ -153,7 +153,14 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
 
     if (!canSwitchEvents) {
        return (
-         <Text fontSize="$sm" fontWeight="800" color="white" numberOfLines={1} ellipsizeMode="tail">
+         <Text 
+            fontSize="$lg" 
+            fontWeight="700" 
+            fontFamily="$display" 
+            color="white" 
+            numberOfLines={1} 
+            ellipsizeMode="tail"
+         >
             {displayName}
          </Text>
        );

resources/js/admin/mobile/components/Primitives.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { YStack, XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
 import { Pressable } from '@tamagui/react-native-web-lite';
-import { ADMIN_GRADIENTS, useAdminTheme } from '../theme';
+import { Tabs, Separator } from 'tamagui';
+import { useAdminTheme } from '../theme';
 import { withAlpha } from './colors';
 
 export function MobileCard({
@@ -161,7 +162,7 @@ export function KpiTile({
   note?: string;
   color?: string;
 }) {
-  const { surfaceMuted, textStrong, textMuted, primary, accentSoft } = useAdminTheme();
+  const { textStrong, textMuted, primary, accentSoft } = useAdminTheme();
   const iconBg = color ? withAlpha(color, 0.12) : accentSoft;
   const iconColor = color || primary;
 
@@ -207,7 +208,7 @@ export function KpiStrip({
     note?: string;
   }>
 }) {
-  const { glassSurface, border, textStrong, textMuted, primary, accentSoft } = useAdminTheme();
+  const { glassSurface, border, textStrong, textMuted, primary } = useAdminTheme();
 
   return (
     <YStack
@@ -402,3 +403,63 @@ export function FloatingActionButton({
     </Pressable>
   );
 }
+
+export function ContentTabs({
+  value,
+  onValueChange,
+  tabs,
+  header,
+}: {
+  value: string;
+  onValueChange: (val: string) => void;
+  tabs: { value: string; label: string; content: React.ReactNode }[];
+  header?: React.ReactNode;
+}) {
+  const { border, muted, primary } = useAdminTheme();
+
+  return (
+    <Tabs
+      defaultValue={value}
+      value={value}
+      onValueChange={onValueChange}
+      orientation="horizontal"
+      flexDirection="column"
+      borderRadius="$4"
+      borderWidth={1}
+      borderColor={border}
+      overflow="hidden"
+    >
+      <Tabs.List separator={<Separator vertical />} disablePassBorderRadius="bottom" backgroundColor="$surface">
+        {tabs.map((tab) => (
+          <Tabs.Tab
+            key={tab.value}
+            value={tab.value}
+            flex={1}
+            unstyled
+            paddingVertical="$3"
+            alignItems="center"
+            justifyContent="center"
+            backgroundColor={value === tab.value ? primary : 'transparent'}
+            hoverStyle={{ backgroundColor: value === tab.value ? primary : '$backgroundHover' }}
+          >
+            <Text
+              fontSize="$sm"
+              fontWeight={value === tab.value ? '700' : '500'}
+              color={value === tab.value ? '#fff' : muted}
+            >
+              {tab.label}
+            </Text>
+          </Tabs.Tab>
+        ))}
+      </Tabs.List>
+
+      {header}
+
+      {tabs.map((tab) => (
+        <Tabs.Content key={tab.value} value={tab.value}>
+          {tab.content}
+        </Tabs.Content>
+      ))}
+    </Tabs>
+  );
+}

resources/js/admin/mobile/components/Scaffold.tsx

@@ -55,7 +55,7 @@ export function MobileScaffold({ title, onBack, rightSlot, children, footer }: M
             <Text />
           )}
         </XStack>
-        <Text fontSize="$lg" fontWeight="800" color={text}>
+        <Text fontSize="$lg" fontWeight="700" fontFamily="$display" color={text}>
           {title}
         </Text>
         <XStack minWidth={40} justifyContent="flex-end">