feat(config): add base of configuration

src/App.tsx

@@ -10,6 +10,7 @@ import { NotFound } from './Pages/NotFound';
 import { AuthForm } from './Components/AuthForm';
 
 const Robot3DViewer = lazy(() => import('./Pages/Robot3DViewer').then(module => ({ default: module.default })));
+const Configuration = lazy(() => import('./Pages/Configuration').then(module => ({ default: module.default })));
 
 function App() {
     const localPassword: string | undefined = import.meta.env.VITE_LOCAL_PASSWORD;
@@ -103,6 +104,11 @@ function App() {
                             <Robot3DViewer />
                         </Suspense>
                     } />
+                    <Route path="/configuration" element={
+                        <Suspense fallback={<Spin size="large" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }} />}>
+                            <Configuration />
+                        </Suspense>
+                    } />
                     <Route path="/stream" element={<Stream />} />
                     <Route path="*" element={<NotFound />} />
                 </Routes>

src/Components/JointCategory.tsx

@@ -22,17 +22,8 @@ export const JointCategory: React.FC<JointCategoryProps> = React.memo(({
     showDegrees
 }) => {
     const categoryColor = useMemo(() => {
-        switch (category) {
-            case 'Head': return '#ff6b6b';
-            case 'Left Hand': return '#4ecdc4';
-            case 'Right Hand': return '#45b7d1';
-            case 'Left Arm': return '#96ceb4';
-            case 'Right Arm': return '#feca57';
-            case 'Torso': return '#ff9ff3';
-            case 'Base': return '#a55eea';
-            default: return '#74b9ff';
-        }
-    }, [category]);
+        return '#' + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0');
+    }, []);
 
     const handleResetCategory = useCallback(() => {
         onResetCategory(category);

src/Components/JointControl.tsx

@@ -1,7 +1,8 @@
 import React, { useMemo, useCallback, useState, useEffect } from 'react';
 import { Card, Slider, InputNumber, Typography, Space, Tag } from 'antd';
 import type { JointControlState } from '../Constants/robotTypes';
-import { UrdfParser } from '../Utils/urdfParser.utils.ts';
+
+import { radianToDegree, degreeToRadian } from "../Utils/math.utils.ts";
 
 const { Text } = Typography;
 
@@ -41,14 +42,14 @@ export const JointControl: React.FC<JointControlProps> = React.memo(({
 
   const displayValues = useMemo(() => {
     const getDisplayValue = (radians: number): number => {
-      return showDegrees ? Math.round(UrdfParser.radiansToDegrees(radians) * 100) / 100 : Math.round(radians * 1000) / 1000;
+      return showDegrees ? Math.round(radianToDegree(radians) * 100) / 100 : Math.round(radians * 1000) / 1000;
     };
 
     const getDisplayRange = (): [number, number] => {
       if (showDegrees) {
         return [
-          Math.round(UrdfParser.radiansToDegrees(joint.minValue) * 100) / 100,
-          Math.round(UrdfParser.radiansToDegrees(joint.maxValue) * 100) / 100
+          Math.round(radianToDegree(joint.minValue) * 100) / 100,
+          Math.round(radianToDegree(joint.maxValue) * 100) / 100
         ];
       }
       return [
@@ -64,7 +65,7 @@ export const JointControl: React.FC<JointControlProps> = React.memo(({
   }, [joint.minValue, joint.maxValue, localValue, showDegrees]);
 
   const convertInputValue = useCallback((displayValue: number): number => {
-    return showDegrees ? UrdfParser.degreesToRadians(displayValue) : displayValue;
+    return showDegrees ? degreeToRadian(displayValue) : displayValue;
   }, [showDegrees]);
 
   const { minDisplay, maxDisplay, currentDisplay } = displayValues;

src/Components/Navigation.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { Button, Space } from 'antd';
-import { EyeOutlined, ControlOutlined, CameraOutlined } from '@ant-design/icons';
+import { EyeOutlined, ControlOutlined, CameraOutlined, SettingOutlined } from '@ant-design/icons';
 
 const navigationItems = [
     { to: '/', label: 'CONTROL', icon: <ControlOutlined /> },
+    { to: '/configuration', label: 'CONFIGURATION', icon: <SettingOutlined />},
     { to: '/3d-viewer', label: '3D VIEW', icon: <EyeOutlined /> },
     { to: '/stream', label: 'STREAM', icon: <CameraOutlined /> }
 ];

src/Components/PoseManager.tsx

@@ -27,8 +27,7 @@ const { Text, Title } = Typography;
 
 interface PoseManagerProps {
   joints: JointControlState[];
-  onLoadPose: (joints: Record<string, number>, categoryOrder?: string[]) => void;
-  categoryOrder?: string[];
+  onLoadPose: (joints: Record<string, number>) => void;
 }
 
 const PRESET_POSE_NAMES = [
@@ -42,7 +41,7 @@ const PRESET_POSE_NAMES = [
   'Custom Pose'
 ];
 
-export const PoseManager: React.FC<PoseManagerProps> = ({ joints, onLoadPose, categoryOrder }) => {
+export const PoseManager: React.FC<PoseManagerProps> = ({ joints, onLoadPose }) => {
   const [saveModalVisible, setSaveModalVisible] = useState(false);
   const [loadModalVisible, setLoadModalVisible] = useState(false);
   const [poseName, setPoseName] = useState('');
@@ -79,7 +78,7 @@ export const PoseManager: React.FC<PoseManagerProps> = ({ joints, onLoadPose, ca
 
     setLoading(true);
     try {
-      const savedPose = await storageService.savePose(poseName.trim(), joints, categoryOrder);
+      const savedPose = await storageService.savePose(poseName.trim(), joints);
       message.success(`Pose "${savedPose.name}" saved successfully`);
       setPoseName('');
       setSaveModalVisible(false);
@@ -90,16 +89,15 @@ export const PoseManager: React.FC<PoseManagerProps> = ({ joints, onLoadPose, ca
     } finally {
       setLoading(false);
     }
-  }, [poseName, joints, categoryOrder, loadSavedPoses]);
+  }, [poseName, joints, loadSavedPoses]);
 
   const handleLoadPose = useCallback(async (poseId: string) => {
     setLoading(true);
     try {
       const pose = await storageService.loadPose(poseId);
       if (pose) {
-        onLoadPose(pose.joints, pose.categoryOrder);
-        const layoutInfo = pose.categoryOrder ? ' and layout' : '';
-        message.success(`Pose "${pose.name}"${layoutInfo} loaded successfully`);
+        onLoadPose(pose.joints);
+        message.success(`Pose "${pose.name}" loaded successfully`);
         setLoadModalVisible(false);
       } else {
         message.error('Pose not found');
@@ -183,11 +181,10 @@ export const PoseManager: React.FC<PoseManagerProps> = ({ joints, onLoadPose, ca
       >
                 <Space direction="vertical" style={{ width: '100%' }} size="large">
           <Text style={{ color: '#fff' }}>
-            Enter a name for your pose. This will save the current position of all {joints.length} joints{categoryOrder ? ' and the current category layout' : ''}.
+            Enter a name for your pose. This will save the current position of all {joints.length} joints.
             <br />
             <Text style={{ color: '#888', fontSize: '12px' }}>
               You can save multiple poses with different names. Duplicate names will automatically get a number suffix.
-              {categoryOrder && ' Layout includes category arrangement for easy restoration.'}
             </Text>
           </Text>
 
@@ -333,11 +330,6 @@ export const PoseManager: React.FC<PoseManagerProps> = ({ joints, onLoadPose, ca
                       </Space>
                       <Text style={{ color: '#888' }}>
                         {getJointCount(pose.joints)} joints stored
-                        {pose.categoryOrder && (
-                          <span style={{ color: '#00ff41', marginLeft: 8 }}>
-                            + layout
-                          </span>
-                        )}
                       </Text>
                     </Space>
                   }

src/Constants/robotTypes.ts

@@ -33,14 +33,15 @@ export interface JointControlState {
   minValue: number;
   maxValue: number;
   type: Joint['type'];
-  category: string;
+  category: string | undefined;
+  inverted?: boolean;
+  restValue?: number;
 }
 
-export type JointCategory =
-  | 'Head'
-  | 'Left Hand'
-  | 'Right Hand'
-  | 'Left Arm'
-  | 'Right Arm'
-  | 'Torso'
-  | 'Base';
+export interface JointConfiguration {
+  category?: string;
+  minValue?: number;
+  maxValue?: number;
+  inverted?: boolean;
+  restValue?: number;
+}