website refactor

apps/website/ui/GoalCard.tsx

@@ -4,10 +4,13 @@ import { Text } from './Text';
 
 export interface GoalCardProps {
   title: string;
-  current: number;
-  target: number;
-  unit: string;
+  current?: number;
+  target?: number;
+  unit?: string;
   icon: string;
+  goalLabel?: string;
+  currentValue?: number;
+  maxValue?: number;
 }
 
 export const GoalCard = ({ 
@@ -15,9 +18,15 @@ export const GoalCard = ({
   current, 
   target, 
   unit, 
-  icon 
+  icon,
+  goalLabel,
+  currentValue,
+  maxValue
 }: GoalCardProps) => {
-  const percentage = Math.min(Math.max((current / target) * 100, 0), 100);
+  const finalCurrent = currentValue ?? current ?? 0;
+  const finalTarget = maxValue ?? target ?? 100;
+  const finalUnit = goalLabel ?? unit ?? '';
+  const percentage = Math.min(Math.max((finalCurrent / finalTarget) * 100, 0), 100);
 
   return (
     <Card variant="default">
@@ -25,7 +34,7 @@ export const GoalCard = ({
         <Text size="2xl">{icon}</Text>
         <Box>
           <Text weight="bold" variant="high">{title}</Text>
-          <Text size="sm" variant="low">{unit}</Text>
+          <Text size="sm" variant="low">{finalUnit}</Text>
         </Box>
       </Box>
       
@@ -40,7 +49,7 @@ export const GoalCard = ({
       </Box>
       
       <Text size="xs" variant="low">
-        {current} / {target} {unit}
+        {finalCurrent} / {finalTarget} {finalUnit}
       </Text>
     </Card>
   );