feat: Introduce job and service categorization for components, enhancing routing and display logic across the application

app/src/router/routes.tsx

@@ -1,6 +1,9 @@
 import { createBrowserRouter } from "react-router-dom"
 import { Dashboard } from "@/pages/Dashboard"
+import { ServiceDetailPage } from "@/pages/ServiceDetail"
+import { ScheduledDetailPage } from "@/pages/ScheduledDetail"
 import { ComponentDetailPage } from "@/pages/ComponentDetail"
+import { ComponentRedirect } from "@/pages/ComponentRedirect"
 import { NodeDetailPage } from "@/pages/NodeDetail"
 
 export const router = createBrowserRouter([
@@ -9,9 +12,21 @@ export const router = createBrowserRouter([
     element: <Dashboard />,
   },
   {
-    path: "/component/:name",
+    path: "/services/:name",
+    element: <ServiceDetailPage />,
+  },
+  {
+    path: "/jobs/:name",
+    element: <ScheduledDetailPage />,
+  },
+  {
+    path: "/components/:name",
     element: <ComponentDetailPage />,
   },
+  {
+    path: "/component/:name",
+    element: <ComponentRedirect />,
+  },
   {
     path: "/node/:hostname",
     element: <NodeDetailPage />,