Add ability to show and create mission launches

src/mission-control-client/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@mantine/core": "^8.3.18",
+        "@mantine/dates": "^8.3.18",
         "@mantine/form": "^8.3.18",
         "@mantine/hooks": "^8.3.18",
         "@mantine/notifications": "^8.3.18",
@@ -16,6 +17,7 @@
         "@tanstack/react-query": "^5.101.3",
         "@tanstack/react-router": "^1.170.18",
         "axios": "^1.18.1",
+        "dayjs": "^1.11.21",
         "react": "^19.2.7",
         "react-dom": "^19.2.7"
       },
@@ -1384,6 +1386,22 @@
         "react-dom": "^18.x || ^19.x"
       }
     },
+    "node_modules/@mantine/dates": {
+      "version": "8.3.18",
+      "resolved": "https://registry.npmjs.org/@mantine/dates/-/dates-8.3.18.tgz",
+      "integrity": "sha512-FHx5teJOhupI0gO2o5evtVYQEdqOjayOkLRhEQfB5Nc5DvcysfPfmNILGkc1Nrp9ZQeQWKLT9qr+CkcCXwHOaw==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "peerDependencies": {
+        "@mantine/core": "8.3.18",
+        "@mantine/hooks": "8.3.18",
+        "dayjs": ">=1.0.0",
+        "react": "^18.x || ^19.x",
+        "react-dom": "^18.x || ^19.x"
+      }
+    },
     "node_modules/@mantine/form": {
       "version": "8.3.18",
       "resolved": "https://registry.npmjs.org/@mantine/form/-/form-8.3.18.tgz",
@@ -3199,6 +3217,12 @@
         "node": ">=18"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.21",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.21.tgz",
+      "integrity": "sha512-98IT+HOahAisibz/yjKbzuOBwYcjJ7BCLPzARyHiyEBmRz4fatF+KPJszEHXsGYjUG234aH/cOjW1wwTbKUZlA==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",

src/mission-control-client/package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@mantine/core": "^8.3.18",
+    "@mantine/dates": "^8.3.18",
     "@mantine/form": "^8.3.18",
     "@mantine/hooks": "^8.3.18",
     "@mantine/notifications": "^8.3.18",
@@ -23,6 +24,7 @@
     "@tanstack/react-query": "^5.101.3",
     "@tanstack/react-router": "^1.170.18",
     "axios": "^1.18.1",
+    "dayjs": "^1.11.21",
     "react": "^19.2.7",
     "react-dom": "^19.2.7"
   },

src/mission-control-client/src/api/missionLaunches.ts

@@ -0,0 +1,34 @@
+import { apiClient } from './client';
+
+export const MissionLaunchStatuses = [
+  'Pending',
+  'Delayed',
+  'Launching',
+  'Launched',
+  'Cancelled',
+] as const;
+
+export type MissionLaunchStatus = (typeof MissionLaunchStatuses)[number];
+
+export type MissionLaunch = {
+  id: string;
+  scheduledFor: string;
+  status: MissionLaunchStatus;
+  createdAt: string;
+};
+
+export type CreateMissionLaunchRequest = {
+  missionId: string;
+  scheduledFor: string;
+  status: MissionLaunchStatus;
+};
+
+export async function createMissionLaunch(
+  request: CreateMissionLaunchRequest,
+): Promise<MissionLaunch> {
+  const response = await apiClient.post<MissionLaunch>(
+    `/missions/${request.missionId}/launch`,
+    request,
+  );
+  return response.data;
+}

src/mission-control-client/src/api/missions.ts

@@ -1,4 +1,5 @@
 import { apiClient } from './client';
+import type { MissionLaunch } from './missionLaunches';
 
 export type MissionStatus = 'Planned' | 'Active' | 'Completed';
 
@@ -8,6 +9,7 @@ export type Mission = {
   description: string | null;
   status: MissionStatus;
   createdAt: string;
+  missionLaunch: MissionLaunch | null;
 };
 
 export type CreateMissionRequest = {

src/mission-control-client/src/components/MissionLaunchStatusBadge.tsx

@@ -0,0 +1,18 @@
+import { Badge } from '@mantine/core';
+import type { MissionLaunchStatus } from '../api/missionLaunches';
+
+const statusColors: Record<MissionLaunchStatus, string> = {
+  Pending: 'blue',
+  Delayed: 'orange',
+  Launching: 'green',
+  Launched: 'gray',
+  Cancelled: 'black',
+};
+
+export function MissionLaunchStatusBadge({
+  status,
+}: {
+  status: MissionLaunchStatus;
+}) {
+  return <Badge color={statusColors[status]}>{status}</Badge>;
+}

src/mission-control-client/src/main.tsx

@@ -1,5 +1,6 @@
 import '@mantine/core/styles.css';
 import '@mantine/notifications/styles.css';
+import '@mantine/dates/styles.css';
 import { MantineProvider } from '@mantine/core';
 import { Notifications } from '@mantine/notifications';
 import { QueryClientProvider } from '@tanstack/react-query';

src/mission-control-client/src/routes/missions.tsx

@@ -4,6 +4,8 @@ import {
   Group,
   Loader,
   Paper,
+  Popover,
+  Select,
   Stack,
   Table,
   Text,
@@ -11,11 +13,20 @@ import {
   TextInput,
   Title,
 } from '@mantine/core';
+import { DateTimePicker } from '@mantine/dates';
 import { useForm } from '@mantine/form';
 import { notifications } from '@mantine/notifications';
+import { IconPlus } from '@tabler/icons-react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
-import { createMission, listMissions } from '../api/missions';
+import { useState } from 'react';
+import {
+  createMissionLaunch,
+  MissionLaunchStatuses,
+  type MissionLaunchStatus,
+} from '../api/missionLaunches';
+import { createMission, listMissions, type Mission } from '../api/missions';
+import { MissionLaunchStatusBadge } from '../components/MissionLaunchStatusBadge';
 import { MissionStatusBadge } from '../components/MissionStatusBadge';
 
 export const Route = createFileRoute('/missions')({
@@ -97,6 +108,81 @@ function CreateMissionForm() {
   );
 }
 
+function CreateMissionLaunchForm({ missionId }: { missionId: string }) {
+  const queryClient = useQueryClient();
+
+  const form = useForm({
+    mode: 'uncontrolled',
+    initialValues: { scheduledFor: '', status: '' },
+    validate: {
+      scheduledFor: (value) =>
+        value.length === 0 ? 'Scheduled For is required' : null,
+      status: (value) =>
+        value.trim().length === 0 ? 'Status is required' : null,
+    },
+  });
+
+  const createMissionLaunchMutation = useMutation({
+    mutationFn: createMissionLaunch,
+    onSuccess: () => {
+      notifications.show({
+        title: 'Mission launch created',
+        message: `Mission Launch created!`,
+        color: 'green',
+      });
+      form.reset();
+      return queryClient.invalidateQueries({ queryKey: ['missions'] });
+    },
+    onError: () =>
+      notifications.show({
+        title: 'Something went wrong',
+        message: 'The mission launch could not be created.',
+        color: 'red',
+      }),
+  });
+
+  return (
+    <Paper withBorder p="md">
+      <form
+        onSubmit={form.onSubmit((values) =>
+          createMissionLaunchMutation.mutate({
+            missionId,
+            scheduledFor: new Date(values.scheduledFor).toISOString(),
+            status: values.status as MissionLaunchStatus,
+          }),
+        )}
+      >
+        <Stack>
+          <DateTimePicker
+            label="Scheduled For"
+            placeholder="Orbital Bloom"
+            withAsterisk
+            key={form.key('scheduledFor')}
+            popoverProps={{ withinPortal: false }}
+            {...form.getInputProps('scheduledFor')}
+          />
+          <Select
+            label="Status"
+            placeholder="Select status"
+            key={form.key('status')}
+            data={MissionLaunchStatuses}
+            comboboxProps={{ withinPortal: false }}
+            {...form.getInputProps('status')}
+          ></Select>
+          <Group justify="flex-end">
+            <Button
+              type="submit"
+              loading={createMissionLaunchMutation.isPending}
+            >
+              Create launch
+            </Button>
+          </Group>
+        </Stack>
+      </form>
+    </Paper>
+  );
+}
+
 function MissionsTable() {
   const missionsQuery = useQuery({
     queryKey: ['missions'],
@@ -119,6 +205,7 @@ function MissionsTable() {
     <Table highlightOnHover>
       <Table.Thead>
         <Table.Tr>
+          <Table.Th></Table.Th>
           <Table.Th>Name</Table.Th>
           <Table.Th>Description</Table.Th>
           <Table.Th>Status</Table.Th>
@@ -126,7 +213,24 @@ function MissionsTable() {
       </Table.Thead>
       <Table.Tbody>
         {missionsQuery.data.map((mission) => (
+          <MissionsTableRow mission={mission} />
+        ))}
+      </Table.Tbody>
+    </Table>
+  );
+}
+
+function MissionsTableRow({ mission }: { mission: Mission }) {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <>
       <Table.Tr key={mission.id}>
+        <Table.Td>
+          <Button onClick={() => setExpanded((expanded) => !expanded)}>
+            a
+          </Button>
+        </Table.Td>
         <Table.Td>{mission.name}</Table.Td>
         <Table.Td>
           <Text size="sm" c="dimmed">
@@ -137,8 +241,42 @@ function MissionsTable() {
           <MissionStatusBadge status={mission.status} />
         </Table.Td>
       </Table.Tr>
-        ))}
+      {expanded === true ? (
+        <>
+          <Table.Tr>
+            <Table.Td colSpan={12}>
+              <Table highlightOnHover>
+                <Table.Thead>
+                  <Table.Tr>
+                    <Table.Th>Scheduled For</Table.Th>
+                    <Table.Th>Status</Table.Th>
+                  </Table.Tr>
+                </Table.Thead>
+                <Table.Tbody>
+                  <Table.Td>{mission.missionLaunch?.scheduledFor}</Table.Td>
+                  <Table.Td>
+                    <MissionLaunchStatusBadge
+                      status={mission.missionLaunch?.status ?? 'Cancelled'}
+                    />
+                  </Table.Td>
                 </Table.Tbody>
               </Table>
+            </Table.Td>
+          </Table.Tr>
+          <Table.Tr>
+            <Table.Td colSpan={12}>
+              <Popover width={400} position="bottom" withArrow shadow="md">
+                <Popover.Target>
+                  <Button variant="default">Create new Launch</Button>
+                </Popover.Target>
+                <Popover.Dropdown>
+                  <CreateMissionLaunchForm missionId={mission.id} />
+                </Popover.Dropdown>
+              </Popover>
+            </Table.Td>
+          </Table.Tr>
+        </>
+      ) : null}
+    </>
   );
 }