Feat: add utilities page with state and time conversion tools

package.json

@@ -17,6 +17,7 @@
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tabs": "^1.1.2",
     "@radix-ui/react-toast": "^1.1.5",
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/react-table": "^8.11.2",

pyproject.toml

@@ -13,16 +13,16 @@ classifiers = [
 ]
 dependencies = [
   "litestar[jinja,jwt,redis,structlog]>=2.8.3",
-  "advanced-alchemy[uuid]>=0.29.0",
+  "advanced-alchemy[uuid]>=0.20.0,<0.29.0",
   "python-dotenv>=1.0.0",
   "passlib[argon2]>=1.7.4",
-  "litestar-saq>=0.1.3",
   "litestar-vite[nodeenv]>=0.1.21",
   "litestar-granian>=0.1.4",
   "pandas>=2.2.3",
   "esa-godot>=1.9.0",
   "croniter>=5.0.1",
   "fsspec>=2024.10.0",
+  "litestar-saq>=0.4.0",
 ]
 description = "Flight dynamics application based on GODOT."
 keywords = ["litestar", "sqlalchemy", "alembic", "fullstack", "api", "asgi", "litestar", "vite", "spa"]

resources/App.tsx

@@ -19,6 +19,7 @@ import { UserNav } from "@/components/user-nav"
 import { Outlet } from "react-router-dom"
 import GroundStationPage from "@/pages/ground-station/GroundStation"
 import OrbitPage from "@/pages/orbit/Orbit"
+import UtilPage from "@/pages/utilities/Utilities"
 
 const App: React.FC = () => {
   const navigate = useNavigate()
@@ -57,6 +58,7 @@ const App: React.FC = () => {
             <Route path="satellites" element={<SatellitesPage />} />
             <Route path="ground-stations" element={<GroundStationPage />} />
             <Route path="orbits" element={<OrbitPage />} />
+            <Route path="utils" element={<UtilPage />} />
           </Route>
         </Route>
 

resources/components/main-nav.tsx

@@ -26,6 +26,10 @@ const navItems = [
     title: "Orbits",
     href: "/orbits",
   },
+  {
+    title: "Utils",
+    href: "/utils",
+  }
 ]
 
 export function MainNav({

resources/components/ui/tabs.tsx

@@ -0,0 +1,53 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent } 

resources/pages/state-conversion/StateConversionForm.tsx

@@ -0,0 +1,32 @@
+import { z } from "zod";
+import { convertState } from "@/services/state-conversion";
+import { StateType } from "@/types/state-conversion";
+
+const formSchema = z.object({
+  fromState: z.enum(["Cart", "Kep", "Circ"] as const),
+  toState: z.enum(["Cart", "Kep", "Circ"] as const),
+  stateValues: z.array(z.number()).length(6),
+});
+
+const StateConversionForm = () => {
+  const onSubmit = async (data: z.infer<typeof formSchema>) => {
+    try {
+      const result = await convertState({
+        fromState: data.fromState,
+        toState: data.toState,
+        state: data.stateValues,
+      });
+      setResult(result.state);
+      toast.success("State converted successfully");
+    } catch (error) {
+      console.error("Conversion error:", error);
+      toast.error(error instanceof Error ? error.message : "Failed to convert state");
+    }
+  };
+
+  return (
+    // ... rest of the component ...
+  );
+};
+
+export default StateConversionForm;

resources/pages/utilities/Utilities.tsx

@@ -0,0 +1,53 @@
+import MainLayout from "@/layouts/MainLayout";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { StateConversionForm } from "./components/state-conversion-form";
+import { TimeConversionForm } from "./components/time-conversion-form";
+
+export default function UtilitiesPage() {
+  return (
+    <MainLayout
+      title="Utilities"
+      description="Various orbital mechanics and mission analysis tools"
+      keywords="Utilities, Tools, State Conversion, Time Conversion"
+    >
+      <div className="container mx-auto py-8 space-y-8">
+        <div className="flex justify-between items-center">
+          <h1 className="text-2xl font-bold">Utilities</h1>
+        </div>
+
+        <Tabs defaultValue="state-conversion" className="w-full">
+          <TabsList>
+            <TabsTrigger value="state-conversion">State Conversion</TabsTrigger>
+            <TabsTrigger value="time-conversion">Time Conversion</TabsTrigger>
+            {/* Add more TabsTriggers for future utilities */}
+          </TabsList>
+
+          <TabsContent value="state-conversion">
+            <Card>
+              <CardHeader>
+                <CardTitle>State Conversion</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <StateConversionForm />
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value="time-conversion">
+            <Card>
+              <CardHeader>
+                <CardTitle>Time Conversion</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <TimeConversionForm />
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          {/* Add more TabsContent sections for future utilities */}
+        </Tabs>
+      </div>
+    </MainLayout>
+  );
+}