refactor(drinks-machine): modularize backend and fix 20ml calibration

Author: bert27

client/src/App.tsx

@@ -22,7 +22,7 @@ export const App: React.FC = () => {
                 <Route path="/" element={<CarPage />} />
                 <Route path="/irrigation" element={<Irrigation />} />
                 <Route path="/drinks" element={<DrinksPage />} />
-                <Route path="/drinks/:tabRouter" element={<DrinksPage />} />
+                <Route path="/drinks/:tabId" element={<DrinksPage />} />
                 <Route path="*" element={<Irrigation />} />
               </Routes>
             </main>

client/src/pages/car/hooks/use-robot-dashboard.ts

@@ -3,9 +3,15 @@ import { IDashboardState, IRobotSendStatus } from '../models/model';
 import { useRemoteControl } from '@/context/remote-control-context';
 import { ROBOT_CONFIG } from '../config/robot-config';
 
+// Incoming data from WebSocket might have different keys than our internal model
+interface RobotTelemetryPayload extends Partial<IRobotSendStatus> {
+    giroscopeValues?: number[];
+    giroscope?: string;
+}
+
 type DashboardAction =
-    | { type: 'UPDATE_ROBOT_DATA'; payload: Partial<IRobotSendStatus> }
-    | { type: 'SYNC_REMOTE_DATA'; payload: any }
+    | { type: 'UPDATE_ROBOT_DATA'; payload: RobotTelemetryPayload }
+    | { type: 'SYNC_REMOTE_DATA'; payload: any } // Remote data structure is complex, keeping any or could use IRemoteControlReceiveStatus
     | { type: 'SET_ROBOT_ORIENTATION'; payload: { pitch: number; roll: number } }
     | { type: 'TOGGLE_LED_MOCK' };
 
@@ -30,10 +36,8 @@ const dashboardReducer = (state: IDashboardState, action: DashboardAction): IDas
                 robot: {
                     ...state.robot,
                     ...action.payload,
-                    // If the payload has giroscopeValues, we map it to robotGyroscopeValues
-                    //@ts-ignore
+                    // Map legacy keys if present
                     robotGyroscopeValues: action.payload.giroscopeValues ?? action.payload.robotGyroscopeValues ?? state.robot.robotGyroscopeValues,
-                    //@ts-ignore
                     robotGyroscope: action.payload.giroscope ?? action.payload.robotGyroscope ?? state.robot.robotGyroscope,
                 }
             };
@@ -61,7 +65,7 @@ export const useRobotDashboard = (isMock: boolean) => {
     const { remoteState } = useRemoteControl();
     const [dashboardState, dispatch] = useReducer(dashboardReducer, initialState);
 
-    const updateRobotTelemetry = (data: any) => {
+    const updateRobotTelemetry = (data: RobotTelemetryPayload) => {
         dispatch({ type: 'UPDATE_ROBOT_DATA', payload: data });
     };
 

client/src/pages/drinks/hooks/use-drinks-page.ts

@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 import { ICocktail, TabType } from "@/pages/drinks/models/drinks-model";
 import { drinksService } from "@/pages/drinks/services/drinks.service";
+import { useNavigate, useParams } from "react-router-dom";
 
 // Sub-hooks
 import { useCocktails } from "./use-cocktails";
@@ -10,7 +11,19 @@ import { useSocketSync } from "./use-socket-sync";
 import { isSimulationMode } from "@/utils/simulation";
 
 export const useDrinksPage = () => {
-  const [activeTab, setActiveTab] = useState<TabType>("drinks");
+  const navigate = useNavigate();
+  const { tabId } = useParams<{ tabId: string }>();
+
+  // Map URL param to TabType (defaults to 'drinks')
+  const getTabFromUrl = (): TabType => {
+    switch (tabId) {
+      case 'cocktails-config': return 'config';
+      case 'pumps-config': return 'manual';
+      default: return 'drinks';
+    }
+  };
+
+  const activeTab = getTabFromUrl();
   const [selectedCocktailForConfirm, setSelectedCocktailForConfirm] = useState<ICocktail | null>(null);
 
   // Simulation Mode Detection
@@ -65,7 +78,16 @@ export const useDrinksPage = () => {
   }, [isMock]);
 
   const handleTabChange = (tab: TabType) => {
-    setActiveTab(tab);
+    switch (tab) {
+      case 'config':
+        navigate('/drinks/cocktails-config');
+        break;
+      case 'manual':
+        navigate('/drinks/pumps-config');
+        break;
+      default:
+        navigate('/drinks');
+    }
   };
 
   const sendCommand = async (direction: string) => {

client/src/pages/drinks/pages/cocktails-config-tab/cocktails-config-tab-page.tsx

@@ -76,7 +76,7 @@ export const CocktailsConfigTabPage: React.FC<ICocktailsConfigTabPageProps> = ({
             <Dialog open={isResetDialogOpen} onClose={() => setIsResetDialogOpen(false)}>
                 <DialogTitle>{t('drinks.config.resetConfirmTitle')}</DialogTitle>
                 <DialogContent>
-                    <DialogContentText>
+                    <DialogContentText sx={{ color: "var(--text-main)" }}>
                         {t('drinks.config.resetConfirmText')}
                     </DialogContentText>
                 </DialogContent>

client/src/pages/drinks/pages/pumps-config-tab/components/cards/pump-config-card.tsx

@@ -52,7 +52,7 @@ export const PumpConfigCard: React.FC<PumpConfigCardProps> = ({ bottle, onUpdate
                 <WaterDropIcon sx={{ color: "var(--accent)" }} />
                 <Box>
                     <Typography className="tech-text" sx={{ color: "var(--accent)", fontWeight: 700, fontSize: "0.9rem" }}>
-                        {bottle.title}
+                        {t(`drinks.pumps.${bottle.title.toLowerCase().replace(" ", "_")}`, { defaultValue: bottle.title })}
                     </Typography>
                     <Typography sx={{ color: "var(--text-muted)", fontSize: "0.75rem" }}>
                         {t(`drinks.liquids.${bottle.liquid.toLowerCase()}`, { defaultValue: bottle.liquid })}
@@ -100,7 +100,7 @@ export const PumpConfigCard: React.FC<PumpConfigCardProps> = ({ bottle, onUpdate
             <Box>
                 <Box display="flex" justifyContent="space-between" alignItems="center" mb={1}>
                     <Typography className="tech-text" sx={{ fontSize: "0.8rem", color: "var(--text-muted)" }}>
-                        {t('drinks.config.time')}
+                        {t('drinks.config.time')} (Sec / 20ml)
                     </Typography>
                     <Typography sx={{ color: "var(--accent)", fontWeight: 700 }}>
                         {time.toFixed(1)}s