From 8fd9d401b1a638aa34428a9685adf4bffd356f06 Mon Sep 17 00:00:00 2001
From: Stedoss <29103029+Stedoss@users.noreply.github.com>
Date: Mon, 27 Jul 2026 23:45:04 +0100
Subject: [PATCH] Cleanup table view and add title to table

---
 .../src/routes/missions.tsx                       | 15 ++++++++++-----
 src/mission-control-client/src/utils/dateUtils.ts |  5 +++++
 2 files changed, 15 insertions(+), 5 deletions(-)
 create mode 100644 src/mission-control-client/src/utils/dateUtils.ts

diff --git a/src/mission-control-client/src/routes/missions.tsx b/src/mission-control-client/src/routes/missions.tsx
index 10a45ea..9c7325b 100644
--- a/src/mission-control-client/src/routes/missions.tsx
+++ b/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}
diff --git a/src/mission-control-client/src/utils/dateUtils.ts b/src/mission-control-client/src/utils/dateUtils.ts
new file mode 100644
index 0000000..185d0b6
--- /dev/null
+++ b/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();
+}
\ No newline at end of file