Group flight list by date

web/app/routes/logbook.flights.$id/route.tsx

@@ -1,13 +1,12 @@
-import { LogItem, VerticalLogItem } from "@/ui/display/log-item";
+import { VerticalLogItem } from "@/ui/display/log-item";
 import ErrorDisplay from "@/ui/error-display";
 import { client } from "@/util/api";
 import {
   Center,
   Container,
-  Divider,
   Grid,
   Loader,
-  ScrollAreaAutosize,
+  ScrollArea,
   Stack,
   Title,
 } from "@mantine/core";
@@ -26,8 +25,8 @@ export default function Flight() {
   const log = flight.data;
 
   return (
-    <Container>
+    // <Container>
-      <Stack>
+    <Stack h="calc(100vh-95px)">
       {flight.isError ? (
         <Center h="calc(100vh - 95px)">
           <ErrorDisplay error="Error Fetching Flight" />
@@ -41,7 +40,7 @@ export default function Flight() {
           <Title order={3} py="lg" style={{ textAlign: "center" }}>
             Flight Log
           </Title>
-            <ScrollAreaAutosize mah="calc(100vh - 95px - 110px)" m="0" p="0">
+          <ScrollArea h="calc(100vh - 95px - 110px)" m="0" p="0">
             <Container h="100%">
               <Grid justify="center">
                 <Grid.Col span={6}>
@@ -250,7 +249,7 @@ export default function Flight() {
                 ) : null}
               </Grid>
             </Container>
-            </ScrollAreaAutosize>
+          </ScrollArea>
         </>
       ) : (
         <Center h="calc(100vh - 95px)">
@@ -258,6 +257,6 @@ export default function Flight() {
         </Center>
       )}
     </Stack>
-    </Container>
+    // </Container>
   );
 }

web/app/routes/logbook.flights.new/route.tsx

@@ -86,7 +86,6 @@ export default function NewFlight() {
     mutationFn: async (values: FlightFormSchema) => {
       const newFlight = flightCreateHelper(values);
       const res = await client.post("/flights", newFlight);
-      console.log(res);
       return res.data;
     },
     retry: (failureCount, error: AxiosError) => {

web/app/routes/logbook.flights/flights-list.tsx

@@ -8,30 +8,24 @@ import {
   Stack,
   Loader,
   Center,
-  Divider,
   Badge,
+  Group,
+  Divider,
 } from "@mantine/core";
+import { randomId } from "@mantine/hooks";
 import { Link, useLocation, useNavigate } from "@remix-run/react";
-import { IconPlus } from "@tabler/icons-react";
+import {
+  IconArrowRightTail,
+  IconPlaneTilt,
+  IconPlus,
+} from "@tabler/icons-react";
 import { UseQueryResult, useQuery } from "@tanstack/react-query";
 
 function useFlights() {
   const flights = useQuery({
     queryKey: ["flights-list"],
-    queryFn: async () => {
+    queryFn: async () =>
-      const res = await client.get(`/flights`);
+      await client.get(`/flights/by-date`).then((res) => res.data),
-      const groupedFlights: { [date: string]: FlightConciseSchema[] } = {};
-      res.data.map((log: FlightConciseSchema) => {
-        const dateStr = log.date;
-
-        if (!groupedFlights[dateStr]) {
-          groupedFlights[dateStr] = [];
-        }
-
-        groupedFlights[dateStr].push(log);
-      });
-      return groupedFlights;
-    },
   });
 
   return flights;
@@ -41,42 +35,128 @@ function FlightsListDisplay({
   flights,
   page,
 }: {
-  flights: UseQueryResult<{ [date: string]: FlightConciseSchema[] }>;
+  flights: UseQueryResult<{
+    [year: string]: {
+      [month: string]: { [day: string]: FlightConciseSchema[] };
+    };
+  }>;
   page: string;
 }) {
+  const monthNames = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
+
   return (
     <>
       {flights.data ? (
-        Object.entries(flights.data).map(([date, logs], index: number) => (
+        Object.entries(flights.data).map(([year, months]) => (
           <>
-            <Text key={date} mt="md" mb="xs" fw={700}>
-              {date}
-            </Text>
-            <Divider key={date + index} />
-            {logs.map((flight: FlightConciseSchema) => (
             <NavLink
-                key={flight.id}
+              key={randomId()}
+              label={`-- ${year} --`}
+              fw={700}
+              style={{ textAlign: "center" }}
+              defaultOpened
+              childrenOffset={0}
+            >
+              <>
+                <Divider />
+                {Object.entries(months).map(([month, days]) => (
+                  <NavLink
+                    key={randomId()}
+                    label={monthNames[Number(month) - 1]}
+                    fw={500}
+                    style={{ textAlign: "center" }}
+                    defaultOpened
+                  >
+                    <Divider />
+                    {Object.entries(days).map(([, logs]) => (
+                      <>
+                        {logs.map((flight: FlightConciseSchema) => (
+                          <>
+                            <NavLink
+                              key={randomId()}
                               component={Link}
                               to={`/logbook/flights/${flight.id}`}
-                label={`${
+                              label={
-                  !(flight.waypoint_from || flight.waypoint_to)
+                                <Group>
-                    ? "No Route"
+                                  <Badge
-                    : ""
+                                    color="gray"
-                }${flight.waypoint_from ? flight.waypoint_from : ""} ${
+                                    size="lg"
-                  flight.waypoint_to ? flight.waypoint_to : ""
+                                    radius="sm"
-                }`}
+                                    px="xs"
-                description={`${flight.date}`}
+                                  >
+                                    {flight.date}
+                                  </Badge>
+                                  <Text fw={500}>
+                                    {`${Number(flight.time_total).toFixed(
+                                      1
+                                    )} hr`}
+                                  </Text>
+                                  {flight.waypoint_from ||
+                                  flight.waypoint_to ? (
+                                    <Text>/</Text>
+                                  ) : null}
+                                  <Group gap="xs">
+                                    {flight.waypoint_from ? (
+                                      <Text>{flight.waypoint_from}</Text>
+                                    ) : (
+                                      ""
+                                    )}
+                                    {flight.waypoint_from &&
+                                    flight.waypoint_to ? (
+                                      <IconArrowRightTail />
+                                    ) : null}
+                                    {flight.waypoint_to ? (
+                                      <Text>{flight.waypoint_to}</Text>
+                                    ) : (
+                                      ""
+                                    )}
+                                  </Group>
+                                </Group>
+                              }
+                              description={
+                                <Text lineClamp={1}>
+                                  {flight.comments
+                                    ? flight.comments
+                                    : "(No Comment)"}
+                                </Text>
+                              }
                               rightSection={
                                 flight.aircraft ? (
-                    <Badge key={"aircraft" + index} color="gray">
+                                  <Badge
+                                    key={randomId()}
+                                    leftSection={<IconPlaneTilt size="1rem" />}
+                                    color="gray"
+                                    size="lg"
+                                  >
                                     {flight.aircraft}
                                   </Badge>
                                 ) : null
                               }
                               active={page === flight.id}
                             />
+                            <Divider />
+                          </>
                         ))}
                       </>
+                    ))}
+                  </NavLink>
+                ))}
+              </>
+            </NavLink>
+          </>
         ))
       ) : flights.isLoading ? (
         <Center h="calc(100vh - 95px - 50px)">

web/app/routes/logbook.flights/route.tsx

@@ -1,22 +1,22 @@
-import { Divider, Grid, Container, ScrollAreaAutosize } from "@mantine/core";
+import { Divider, Grid, Container, ScrollArea } from "@mantine/core";
 import { Outlet } from "@remix-run/react";
 import { FlightsList } from "./flights-list";
 
 export default function FlightsLayout() {
   return (
     <>
-      <Grid h="100%" visibleFrom="md">
+      <Grid h="100%" visibleFrom="lg">
-        <Grid.Col span={3}>
+        <Grid.Col span={4}>
           <FlightsList />
         </Grid.Col>
         <Divider orientation="vertical" m="sm" />
         <Grid.Col span="auto">
-          <ScrollAreaAutosize mah="calc(100vh - 95px)">
+          <ScrollArea.Autosize mah="calc(100vh - 95px)">
             <Outlet />
-          </ScrollAreaAutosize>
+          </ScrollArea.Autosize>
         </Grid.Col>
       </Grid>
-      <Container hiddenFrom="md">
+      <Container hiddenFrom="lg" style={{ paddingLeft: 0, paddingRight: 0 }}>
         <Outlet />
       </Container>
     </>

web/app/ui/display/log-item.tsx

@@ -40,7 +40,7 @@ export function VerticalLogItem({
 
   return (
     <Card>
-      <Stack gap="xs" align="center">
+      <Stack gap="xs" align="center" h="100%">
         <Text c="dimmed" style={{ textalign: "center" }}>
           {label}
         </Text>

web/app/ui/nav/app-shell.tsx

@@ -19,7 +19,7 @@ export function TailfinAppShell({ children }: { children: React.ReactNode }) {
   return (
     <AppShell
       header={{ height: 60 }}
-      navbar={{ width: 300, breakpoint: "sm", collapsed: { mobile: !opened } }}
+      navbar={{ width: 300, breakpoint: "xl", collapsed: { mobile: !opened } }}
       padding="md"
     >
       <AppShell.Header>
@@ -28,7 +28,7 @@ export function TailfinAppShell({ children }: { children: React.ReactNode }) {
             <Burger
               opened={opened}
               onClick={toggle}
-              hiddenFrom="sm"
+              hiddenFrom="xl"
               size="sm"
             />
           </Group>
@@ -44,7 +44,7 @@ export function TailfinAppShell({ children }: { children: React.ReactNode }) {
         </Group>
       </AppShell.Header>
       <AppShell.Navbar>
-        <Navbar />
+        <Navbar opened={opened} toggle={toggle} />
       </AppShell.Navbar>
       <AppShell.Main>{children}</AppShell.Main>
     </AppShell>

web/app/ui/nav/navbar.tsx

@@ -8,7 +8,13 @@ import {
   IconUser,
 } from "@tabler/icons-react";
 
-export default function Navbar() {
+export default function Navbar({
+  opened,
+  toggle,
+}: {
+  opened: boolean;
+  toggle: () => void;
+}) {
   const location = useLocation();
   const page = location.pathname.split("/")[2];
 
@@ -24,6 +30,7 @@ export default function Navbar() {
           label="Dashboard"
           leftSection={<IconPlaneDeparture />}
           active={page == null}
+          onClick={() => (opened ? toggle() : null)}
         />
         <NavLink
           p="md"
@@ -32,6 +39,7 @@ export default function Navbar() {
           label="Flights"
           leftSection={<IconBook2 />}
           active={page === "flights"}
+          onClick={() => (opened ? toggle() : null)}
         />
       </Stack>
       <Stack gap="0">

web/app/util/api.ts

@@ -27,7 +27,6 @@ client.interceptors.request.use(
         error.config.headers.Authorization = `Bearer ${newAccessToken}`;
         return client(error.config);
       } catch (err) {
-        console.log("ERRORRRRRRRRRRRRRR");
         clearUser();
         window.location.href = "/login";
       }