first implementation of tamagui mobile pages

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

@@ -0,0 +1,78 @@
+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 { Home, CheckSquare, Bell, User } from 'lucide-react';
+import { useTheme } from '@tamagui/core';
+import { useTranslation } from 'react-i18next';
+import { useAlertsBadge } from '../hooks/useAlertsBadge';
+
+export type NavKey = 'events' | 'tasks' | 'alerts' | 'profile';
+
+export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate: (key: NavKey) => void }) {
+  const { t } = useTranslation('mobile');
+  const theme = useTheme();
+  const { count: alertCount } = useAlertsBadge();
+  const items: Array<{ key: NavKey; icon: React.ComponentType<{ size?: number; color?: string }>; label: string }> = [
+    { key: 'events', icon: Home, label: t('nav.events', 'Events') },
+    { key: 'tasks', icon: CheckSquare, label: t('nav.tasks', 'Tasks') },
+    { key: 'alerts', icon: Bell, label: t('nav.alerts', 'Alerts') },
+    { key: 'profile', icon: User, label: t('nav.profile', 'Profile') },
+  ];
+
+  return (
+    <YStack
+      position="fixed"
+      bottom={0}
+      left={0}
+      right={0}
+      backgroundColor="white"
+      borderTopWidth={1}
+      borderColor="#e5e7eb"
+      paddingVertical="$2"
+      paddingHorizontal="$4"
+      zIndex={50}
+      shadowColor="#0f172a"
+      shadowOpacity={0.08}
+      shadowRadius={12}
+      shadowOffset={{ width: 0, height: -4 }}
+      // allow for safe-area inset on modern phones
+      style={{ paddingBottom: 'max(env(safe-area-inset-bottom, 0px), 8px)' }}
+    >
+      <XStack justifyContent="space-between" alignItems="center">
+        {items.map((item) => {
+          const activeState = item.key === active;
+          const IconCmp = item.icon;
+          return (
+            <Pressable key={item.key} onPress={() => onNavigate(item.key)}>
+              <YStack alignItems="center" space="$1" position="relative">
+                <IconCmp size={20} color={activeState ? String(theme.primary?.val ?? '#007AFF') : '#94a3b8'} />
+                <Text fontSize="$xs" color={activeState ? '$primary' : '#6b7280'}>
+                  {item.label}
+                </Text>
+                {item.key === 'alerts' && alertCount > 0 ? (
+                  <XStack
+                    position="absolute"
+                    top={-6}
+                    right={-12}
+                    minWidth={18}
+                    height={18}
+                    paddingHorizontal={6}
+                    borderRadius={999}
+                    backgroundColor="#ef4444"
+                    alignItems="center"
+                    justifyContent="center"
+                  >
+                    <Text fontSize={10} color="white" fontWeight="700">
+                      {alertCount > 9 ? '9+' : alertCount}
+                    </Text>
+                  </XStack>
+                ) : null}
+              </YStack>
+            </Pressable>
+          );
+        })}
+      </XStack>
+    </YStack>
+  );
+}

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

@@ -0,0 +1,144 @@
+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 { useTheme } from '@tamagui/core';
+
+export function MobileCard({ children, ...rest }: React.ComponentProps<typeof YStack>) {
+  return (
+    <YStack
+      backgroundColor="white"
+      borderRadius={16}
+      borderWidth={1}
+      borderColor="#e5e7eb"
+      shadowColor="#0f172a"
+      shadowOpacity={0.06}
+      shadowRadius={12}
+      shadowOffset={{ width: 0, height: 8 }}
+      padding="$3.5"
+      space="$2"
+      {...rest}
+    >
+      {children}
+    </YStack>
+  );
+}
+
+export function PillBadge({
+  tone = 'muted',
+  children,
+}: {
+  tone?: 'success' | 'warning' | 'muted';
+  children: React.ReactNode;
+}) {
+  const palette: Record<typeof tone, { bg: string; text: string; border: string }> = {
+    success: { bg: '#ecfdf3', text: '#047857', border: '#bbf7d0' },
+    warning: { bg: '#fffbeb', text: '#92400e', border: '#fef3c7' },
+    muted: { bg: '#f3f4f6', text: '#374151', border: '#e5e7eb' },
+  };
+  const colors = palette[tone] ?? palette.muted;
+  return (
+    <XStack
+      alignItems="center"
+      paddingHorizontal="$3"
+      paddingVertical="$1.5"
+      borderRadius={999}
+      borderWidth={1}
+      backgroundColor={colors.bg}
+      borderColor={colors.border}
+    >
+      <Text fontSize="$xs" fontWeight="700" color={colors.text}>
+        {children}
+      </Text>
+    </XStack>
+  );
+}
+
+export function CTAButton({
+  label,
+  onPress,
+  tone = 'primary',
+}: {
+  label: string;
+  onPress: () => void;
+  tone?: 'primary' | 'ghost';
+}) {
+  const theme = useTheme();
+  const isPrimary = tone === 'primary';
+  return (
+    <Pressable onPress={onPress} style={{ width: '100%' }}>
+      <XStack
+        height={56}
+        borderRadius={14}
+        alignItems="center"
+        justifyContent="center"
+        backgroundColor={isPrimary ? String(theme.primary?.val ?? '#007AFF') : 'white'}
+        borderWidth={isPrimary ? 0 : 1}
+        borderColor={isPrimary ? 'transparent' : '#e5e7eb'}
+      >
+        <Text fontSize="$sm" fontWeight="800" color={isPrimary ? 'white' : '#111827'}>
+          {label}
+        </Text>
+      </XStack>
+    </Pressable>
+  );
+}
+
+export function KpiTile({
+  icon: IconCmp,
+  label,
+  value,
+}: {
+  icon: React.ComponentType<{ size?: number; color?: string }>;
+  label: string;
+  value: string | number;
+}) {
+  return (
+    <MobileCard borderRadius={14} padding="$3" width="32%" minWidth={110} alignItems="flex-start">
+      <XStack alignItems="center" space="$2">
+        <XStack width={32} height={32} borderRadius={12} backgroundColor="#e5f0ff" alignItems="center" justifyContent="center">
+          <IconCmp size={16} color="#2563eb" />
+        </XStack>
+        <Text fontSize="$xs" color="#111827">
+          {label}
+        </Text>
+      </XStack>
+      <Text fontSize="$xl" fontWeight="800" color="#111827">
+        {value}
+      </Text>
+    </MobileCard>
+  );
+}
+
+export function ActionTile({
+  icon: IconCmp,
+  label,
+  color,
+  onPress,
+}: {
+  icon: React.ComponentType<{ size?: number; color?: string }>;
+  label: string;
+  color: string;
+  onPress: () => void;
+}) {
+  return (
+    <Pressable onPress={onPress} style={{ width: '48%' }}>
+      <YStack
+        borderRadius={16}
+        padding="$3"
+        space="$2"
+        backgroundColor={`${color}22`}
+        borderWidth={1}
+        borderColor={`${color}55`}
+        minHeight={110}
+      >
+        <XStack width={38} height={38} borderRadius={12} backgroundColor={color} alignItems="center" justifyContent="center">
+          <IconCmp size={18} color="white" />
+        </XStack>
+        <Text fontSize="$sm" fontWeight="700" color="#111827">
+          {label}
+        </Text>
+      </YStack>
+    </Pressable>
+  );
+}

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

@@ -0,0 +1,59 @@
+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 { ChevronLeft } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+type MobileScaffoldProps = {
+  title: string;
+  onBack?: () => void;
+  rightSlot?: React.ReactNode;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+};
+
+export function MobileScaffold({ title, onBack, rightSlot, children, footer }: MobileScaffoldProps) {
+  const { t } = useTranslation('mobile');
+  return (
+    <YStack backgroundColor="#f7f8fb" minHeight="100vh">
+      <XStack
+        alignItems="center"
+        justifyContent="space-between"
+        paddingHorizontal="$4"
+        paddingTop="$4"
+        paddingBottom="$3"
+        backgroundColor="white"
+        borderBottomWidth={1}
+        borderColor="#e5e7eb"
+      >
+        <XStack alignItems="center" space="$2">
+          {onBack ? (
+            <Pressable onPress={onBack}>
+              <XStack alignItems="center" space="$1.5">
+                <ChevronLeft size={18} color="#007AFF" />
+                <Text fontSize="$sm" color="#007AFF" fontWeight="600">
+                  {t('actions.back', 'Back')}
+                </Text>
+              </XStack>
+            </Pressable>
+          ) : (
+            <Text />
+          )}
+        </XStack>
+        <Text fontSize="$lg" fontWeight="800" color="#111827">
+          {title}
+        </Text>
+        <XStack minWidth={40} justifyContent="flex-end">
+          {rightSlot ?? null}
+        </XStack>
+      </XStack>
+
+      <YStack flex={1} padding="$4" space="$3" paddingBottom={footer ? '$14' : '$5'}>
+        {children}
+      </YStack>
+
+      {footer ? <YStack>{footer}</YStack> : null}
+    </YStack>
+  );
+}

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

@@ -0,0 +1,55 @@
+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 { useTranslation } from 'react-i18next';
+
+type SheetProps = {
+  open: boolean;
+  title: string;
+  onClose: () => void;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  /** Optional bottom offset so content sits above the bottom nav/safe-area. */
+  bottomOffsetPx?: number;
+};
+
+export function MobileSheet({ open, title, onClose, children, footer, bottomOffsetPx = 88 }: SheetProps) {
+  const { t } = useTranslation('mobile');
+  if (!open) return null;
+  return (
+    <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 backdrop-blur-sm">
+      <YStack
+        width="100%"
+        maxWidth={520}
+        borderTopLeftRadius={24}
+        borderTopRightRadius={24}
+        backgroundColor="white"
+        padding="$4"
+        paddingBottom="$7"
+        space="$3"
+        shadowColor="#0f172a"
+        shadowOpacity={0.12}
+        shadowRadius={18}
+        shadowOffset={{ width: 0, height: -8 }}
+        maxHeight="82vh"
+        overflow="auto"
+        // keep sheet above bottom nav / safe area
+        style={{ marginBottom: `max(env(safe-area-inset-bottom, 0px), ${bottomOffsetPx}px)` }}
+      >
+        <XStack alignItems="center" justifyContent="space-between">
+          <Text fontSize="$md" fontWeight="800" color="#111827">
+            {title}
+          </Text>
+          <Pressable onPress={onClose}>
+            <Text fontSize="$md" color="#6b7280">
+              {t('actions.close', 'Close')}
+            </Text>
+          </Pressable>
+        </XStack>
+        {children}
+        {footer ? footer : null}
+      </YStack>
+    </div>
+  );
+}

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { SizableText as Text } from '@tamagui/text';
+import { XStack } from '@tamagui/stacks';
+
+export function Tag({ label, color = '#e5e7eb' }: { label: string; color?: string }) {
+  return (
+    <XStack
+      alignItems="center"
+      paddingHorizontal="$2"
+      paddingVertical={2}
+      borderRadius={999}
+      backgroundColor={`${color}22`}
+      borderWidth={1}
+      borderColor={`${color}55`}
+      alignSelf="flex-start"
+    >
+      <Text fontSize={11} fontWeight="600" color="#111827">
+        {label}
+      </Text>
+    </XStack>
+  );
+}