Cleanup table view and add title to table

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

@@ -1,4 +1,5 @@
 import {
+  ActionIcon,
   Alert,
   Button,
   Group,
@@ -16,7 +17,6 @@ import {
 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 { useState } from 'react';
@@ -28,6 +28,8 @@ import {
 import { createMission, listMissions, type Mission } from '../api/missions';
 import { MissionLaunchStatusBadge } from '../components/MissionLaunchStatusBadge';
 import { MissionStatusBadge } from '../components/MissionStatusBadge';
+import { IconChevronDown, IconChevronRight } from '@tabler/icons-react';
+import { toReadableDateTime } from '../utils/dateUtils';
 
 export const Route = createFileRoute('/missions')({
   component: MissionsPage,
@@ -227,9 +229,9 @@ function MissionsTableRow({ mission }: { mission: Mission }) {
     <>
       <Table.Tr key={mission.id}>
         <Table.Td>
-          <Button onClick={() => setExpanded((expanded) => !expanded)}>
-            a
-          </Button>
+          <ActionIcon onClick={() => setExpanded((expanded) => !expanded)}>
+            {expanded ? <IconChevronDown /> : <IconChevronRight />}
+          </ActionIcon>
         </Table.Td>
         <Table.Td>{mission.name}</Table.Td>
         <Table.Td>
@@ -245,6 +247,9 @@ function MissionsTableRow({ mission }: { mission: Mission }) {
         <>
           <Table.Tr>
             <Table.Td colSpan={12}>
+              <h3>
+                Launches
+              </h3>
               <Table>
                 <Table.Thead>
                   <Table.Tr>
@@ -255,7 +260,7 @@ function MissionsTableRow({ mission }: { mission: Mission }) {
                 <Table.Tbody>
                   {mission.missionLaunches.map((missionLaunch) => (
                     <Table.Tr>
-                      <Table.Td>{missionLaunch.scheduledFor}</Table.Td>
+                      <Table.Td>{toReadableDateTime(missionLaunch.scheduledFor)}</Table.Td>
                       <Table.Td>
                         <MissionLaunchStatusBadge
                           status={missionLaunch.status}

src/mission-control-client/src/utils/dateUtils.ts

@@ -0,0 +1,5 @@
+export function toReadableDateTime(dateTime: string) {
+    const date = new Date(dateTime);
+
+    return date.toLocaleString();
+}