Refine analytics page and i18n

resources/js/admin/mobile/EventAnalyticsPage.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from '@tanstack/react-query';
-import { BarChart2, TrendingUp, Users, ListTodo, Lock, Trophy, Calendar } from 'lucide-react';
+import { TrendingUp, ListTodo, Lock, Trophy } from 'lucide-react';
 import { YStack, XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
 import { format, parseISO } from 'date-fns';
@@ -13,6 +13,7 @@ import { MobileCard, CTAButton, SkeletonCard } from './components/Primitives';
 import { getEventAnalytics, EventAnalytics } from '../api';
 import { ApiError } from '../lib/apiError';
 import { useAdminTheme } from './theme';
+import { resolveMaxCount } from './lib/analytics';
 import { adminPath } from '../constants';
 
 export default function MobileEventAnalyticsPage() {
@@ -99,7 +100,8 @@ export default function MobileEventAnalyticsPage() {
   const hasTasks = tasks.length > 0;
 
   // Prepare chart data
-  const maxCount = Math.max(...timeline.map((p) => p.count), 1);
+  const maxTimelineCount = resolveMaxCount(timeline.map((point) => point.count));
+  const maxTaskCount = resolveMaxCount(tasks.map((task) => task.count));
 
   return (
     <MobileShell
@@ -121,7 +123,7 @@ export default function MobileEventAnalyticsPage() {
             <YStack height={180} justifyContent="flex-end" space="$2">
               <XStack alignItems="flex-end" justifyContent="space-between" height={150} gap="$1">
                 {timeline.map((point, index) => {
-                  const heightPercent = (point.count / maxCount) * 100;
+                  const heightPercent = (point.count / maxTimelineCount) * 100;
                   const date = parseISO(point.timestamp);
                   // Show label every 3rd point or if few points
                   const showLabel = timeline.length < 8 || index % 3 === 0;
@@ -138,7 +140,7 @@ export default function MobileEventAnalyticsPage() {
                       />
                       {showLabel && (
                         <Text fontSize={10} color={muted} numberOfLines={1}>
-                          {format(date, 'HH:mm')}
+                          {format(date, 'HH:mm', { locale: dateLocale })}
                         </Text>
                       )}
                     </YStack>
@@ -212,7 +214,6 @@ export default function MobileEventAnalyticsPage() {
           {hasTasks ? (
             <YStack space="$3">
               {tasks.map((task) => {
-                 const maxTaskCount = Math.max(...tasks.map(t => t.count), 1);
                  const percent = (task.count / maxTaskCount) * 100;
                  return (
                   <YStack key={task.task_id} space="$1">