328 lines
8.8 KiB
TypeScript
328 lines
8.8 KiB
TypeScript
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 { withAlpha } from './colors';
|
|
|
|
export function MobileCard({
|
|
children,
|
|
className,
|
|
style,
|
|
...rest
|
|
}: React.ComponentProps<typeof YStack>) {
|
|
const { surface, border, shadow, glassSurface, glassBorder, glassShadow } = useAdminTheme();
|
|
return (
|
|
<YStack
|
|
className={['admin-fade-up', className].filter(Boolean).join(' ')}
|
|
backgroundColor={glassSurface ?? surface}
|
|
borderRadius={20}
|
|
borderWidth={2}
|
|
borderColor={glassBorder ?? border}
|
|
shadowColor={glassShadow ?? shadow}
|
|
shadowOpacity={0.16}
|
|
shadowRadius={16}
|
|
shadowOffset={{ width: 0, height: 10 }}
|
|
padding="$3.5"
|
|
space="$2"
|
|
style={{
|
|
...style,
|
|
}}
|
|
{...rest}
|
|
>
|
|
{children}
|
|
</YStack>
|
|
);
|
|
}
|
|
|
|
export function PillBadge({
|
|
tone = 'muted',
|
|
children,
|
|
}: {
|
|
tone?: 'success' | 'warning' | 'danger' | 'muted';
|
|
children: React.ReactNode;
|
|
}) {
|
|
const { theme } = useAdminTheme();
|
|
const palette: Record<typeof tone, { bg: string; text: string; border: string }> = {
|
|
success: {
|
|
bg: String(theme.backgroundStrong?.val ?? '#ecfdf3'),
|
|
text: String(theme.green10?.val ?? '#047857'),
|
|
border: String(theme.green6?.val ?? '#bbf7d0'),
|
|
},
|
|
warning: {
|
|
bg: String(theme.yellow3?.val ?? '#fffbeb'),
|
|
text: String(theme.yellow11?.val ?? '#92400e'),
|
|
border: String(theme.yellow6?.val ?? '#fef3c7'),
|
|
},
|
|
danger: {
|
|
bg: String(theme.red3?.val ?? '#FEE2E2'),
|
|
text: String(theme.red11?.val ?? '#B91C1C'),
|
|
border: String(theme.red6?.val ?? '#FCA5A5'),
|
|
},
|
|
muted: {
|
|
bg: String(theme.gray3?.val ?? '#f3f4f6'),
|
|
text: String(theme.gray11?.val ?? '#374151'),
|
|
border: String(theme.gray6?.val ?? '#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',
|
|
fullWidth = true,
|
|
disabled = false,
|
|
loading = false,
|
|
style,
|
|
iconLeft,
|
|
iconRight,
|
|
}: {
|
|
label: string;
|
|
onPress: () => void;
|
|
tone?: 'primary' | 'ghost' | 'danger';
|
|
fullWidth?: boolean;
|
|
disabled?: boolean;
|
|
loading?: boolean;
|
|
style?: any;
|
|
iconLeft?: React.ReactNode;
|
|
iconRight?: React.ReactNode;
|
|
}) {
|
|
const { primary, surface, border, text, danger, glassSurfaceStrong } = useAdminTheme();
|
|
const isPrimary = tone === 'primary';
|
|
const isDanger = tone === 'danger';
|
|
const isDisabled = disabled || loading;
|
|
const backgroundColor = isDanger ? danger : isPrimary ? primary : glassSurfaceStrong ?? surface;
|
|
const borderColor = isPrimary || isDanger ? 'transparent' : border;
|
|
const labelColor = isPrimary || isDanger ? 'white' : text;
|
|
const primaryStyle = isPrimary
|
|
? {
|
|
boxShadow: `0 18px 28px ${withAlpha(primary, 0.4)}`,
|
|
}
|
|
: undefined;
|
|
return (
|
|
<Pressable
|
|
onPress={isDisabled ? undefined : onPress}
|
|
disabled={isDisabled}
|
|
style={{
|
|
width: fullWidth ? '100%' : undefined,
|
|
flex: fullWidth ? undefined : 1,
|
|
opacity: isDisabled ? 0.6 : 1,
|
|
...style,
|
|
}}
|
|
>
|
|
<XStack
|
|
height={52}
|
|
borderRadius={18}
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
backgroundColor={backgroundColor}
|
|
borderWidth={isPrimary || isDanger ? 0 : 2}
|
|
borderColor={borderColor}
|
|
space="$2"
|
|
style={primaryStyle}
|
|
>
|
|
{iconLeft}
|
|
<Text fontSize="$sm" fontWeight="800" color={labelColor}>
|
|
{label}
|
|
</Text>
|
|
{iconRight}
|
|
</XStack>
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
export function KpiTile({
|
|
icon: IconCmp,
|
|
label,
|
|
value,
|
|
note,
|
|
}: {
|
|
icon: React.ComponentType<{ size?: number; color?: string }>;
|
|
label: string;
|
|
value: string | number;
|
|
note?: string;
|
|
}) {
|
|
const { accentSoft, primary, text } = useAdminTheme();
|
|
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={accentSoft}
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
>
|
|
<IconCmp size={16} color={primary} />
|
|
</XStack>
|
|
<Text fontSize="$xs" color={text}>
|
|
{label}
|
|
</Text>
|
|
</XStack>
|
|
<Text fontSize="$xl" fontWeight="800" color={text}>
|
|
{value}
|
|
</Text>
|
|
{note ? (
|
|
<Text fontSize="$xs" color={text} opacity={0.7}>
|
|
{note}
|
|
</Text>
|
|
) : null}
|
|
</MobileCard>
|
|
);
|
|
}
|
|
|
|
export function SkeletonCard({ height = 80 }: { height?: number }) {
|
|
return (
|
|
<MobileCard className="mobile-skeleton" height={height} />
|
|
);
|
|
}
|
|
|
|
export function ActionTile({
|
|
icon: IconCmp,
|
|
label,
|
|
note,
|
|
noteTone = 'muted',
|
|
color,
|
|
onPress,
|
|
disabled = false,
|
|
variant = 'grid',
|
|
delayMs = 0,
|
|
}: {
|
|
icon: React.ComponentType<{ size?: number; color?: string }>;
|
|
label: string;
|
|
note?: string;
|
|
noteTone?: 'warning' | 'muted';
|
|
color: string;
|
|
onPress?: () => void;
|
|
disabled?: boolean;
|
|
variant?: 'grid' | 'cluster';
|
|
delayMs?: number;
|
|
}) {
|
|
const { textStrong, glassSurface, muted, warningText } = useAdminTheme();
|
|
const noteColor = noteTone === 'warning' ? warningText : muted;
|
|
const isCluster = variant === 'cluster';
|
|
const backgroundColor = withAlpha(color, 0.12);
|
|
const borderColor = withAlpha(color, 0.4);
|
|
const shadowColor = withAlpha(color, 0.35);
|
|
const iconShadow = withAlpha(color, 0.5);
|
|
const tileStyle = {
|
|
...(delayMs ? { animationDelay: `${delayMs}ms` } : {}),
|
|
backgroundImage: `linear-gradient(135deg, ${backgroundColor}, ${withAlpha(color, 0.08)})`,
|
|
boxShadow: isCluster ? `0 12px 18px ${shadowColor}` : `0 20px 30px ${shadowColor}`,
|
|
};
|
|
return (
|
|
<Pressable
|
|
onPress={disabled ? undefined : onPress}
|
|
style={{
|
|
width: isCluster ? '100%' : '48%',
|
|
flex: isCluster ? 1 : undefined,
|
|
marginBottom: isCluster ? 0 : 12,
|
|
opacity: disabled ? 0.5 : 1,
|
|
}}
|
|
disabled={disabled}
|
|
>
|
|
<YStack
|
|
className="admin-fade-up"
|
|
style={tileStyle}
|
|
borderRadius={isCluster ? 14 : 16}
|
|
padding="$3"
|
|
space="$2.5"
|
|
backgroundColor={glassSurface ?? backgroundColor}
|
|
borderWidth={2}
|
|
borderColor={borderColor}
|
|
minHeight={120}
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
>
|
|
<XStack
|
|
width={44}
|
|
height={44}
|
|
borderRadius={14}
|
|
backgroundColor={color}
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
style={{ boxShadow: `0 6px 14px ${iconShadow}` }}
|
|
>
|
|
<IconCmp size={18} color="white" />
|
|
</XStack>
|
|
<Text fontSize="$sm" fontWeight="800" color={textStrong} textAlign="center">
|
|
{label}
|
|
</Text>
|
|
{note ? (
|
|
<Text fontSize="$xs" fontWeight="700" color={noteColor} textAlign="center">
|
|
{note}
|
|
</Text>
|
|
) : null}
|
|
</YStack>
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
export function FloatingActionButton({
|
|
onPress,
|
|
label,
|
|
icon: IconCmp,
|
|
}: {
|
|
onPress: () => void;
|
|
label: string;
|
|
icon: React.ComponentType<{ size?: number; color?: string }>;
|
|
}) {
|
|
const { primary, shadow } = useAdminTheme();
|
|
const [pressed, setPressed] = React.useState(false);
|
|
return (
|
|
<Pressable
|
|
onPress={onPress}
|
|
onPressIn={() => setPressed(true)}
|
|
onPressOut={() => setPressed(false)}
|
|
onPointerLeave={() => setPressed(false)}
|
|
style={{
|
|
position: 'fixed',
|
|
right: 18,
|
|
bottom: 'calc(env(safe-area-inset-bottom, 0px) + 96px)',
|
|
zIndex: 60,
|
|
transform: pressed ? 'scale(0.96)' : 'scale(1)',
|
|
opacity: pressed ? 0.92 : 1,
|
|
transition: 'transform 140ms ease, opacity 140ms ease',
|
|
}}
|
|
aria-label={label}
|
|
>
|
|
<XStack
|
|
height={56}
|
|
paddingHorizontal="$4"
|
|
borderRadius={999}
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
space="$2"
|
|
backgroundColor={primary}
|
|
shadowColor={shadow}
|
|
shadowOpacity={0.2}
|
|
shadowRadius={16}
|
|
shadowOffset={{ width: 0, height: 8 }}
|
|
>
|
|
<IconCmp size={18} color="white" />
|
|
<Text fontSize="$sm" fontWeight="800" color="white">
|
|
{label}
|
|
</Text>
|
|
</XStack>
|
|
</Pressable>
|
|
);
|
|
}
|