first implementation of tamagui mobile pages

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>
+  );
+}