Remove tach from aircraft

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

@@ -0,0 +1,321 @@
+import ErrorDisplay from "@/ui/error-display";
+import { useApi } from "@/util/api";
+import { AircraftFormSchema, AircraftSchema } from "@/util/types";
+import {
+  ActionIcon,
+  Button,
+  Card,
+  Center,
+  Container,
+  Group,
+  Loader,
+  Modal,
+  NumberInput,
+  ScrollArea,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { randomId, useDisclosure } from "@mantine/hooks";
+import { IconPencil, IconPlus, IconTrash, IconX } from "@tabler/icons-react";
+import {
+  UseQueryResult,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
+import { AxiosError } from "axios";
+import { useState } from "react";
+
+function useAircraft() {
+  const client = useApi();
+
+  const aircraft = useQuery({
+    queryKey: ["aircraft-list"],
+    queryFn: async () => await client.get(`/aircraft`).then((res) => res.data),
+  });
+
+  return aircraft;
+}
+
+function AircraftCard({ aircraft }: { aircraft: AircraftSchema }) {
+  const [deleteOpened, { open: openDelete, close: closeDelete }] =
+    useDisclosure(false);
+
+  const client = useApi();
+  const queryClient = useQueryClient();
+
+  const deleteAircraft = useMutation({
+    mutationFn: async () =>
+      await client.delete(`/aircraft/${aircraft.id}`).then((res) => res.data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["aircraft-list"] });
+    },
+  });
+
+  return (
+    <>
+      <Modal
+        opened={deleteOpened}
+        onClose={closeDelete}
+        title="Delete Aircraft?"
+        centered
+      >
+        <Stack>
+          <Text>
+            Are you sure you want to delete this aircraft? This action cannot be
+            undone.
+          </Text>
+          {deleteAircraft.isError ? (
+            <Text c="red" fw={700}>
+              {deleteAircraft.error.message}
+            </Text>
+          ) : null}
+          <Group justify="flex-end">
+            <Button color="red" onClick={() => deleteAircraft.mutate()}>
+              Delete
+            </Button>
+            <Button color="gray" onClick={closeDelete}>
+              Cancel
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+      <Card key={randomId()}>
+        <Stack>
+          <Group grow justify="space-between">
+            <Title order={4}>{aircraft.tail_no}</Title>
+            <Group justify="flex-end">
+              <ActionIcon variant="transparent">
+                <IconPencil />
+              </ActionIcon>
+              <ActionIcon
+                variant="transparent"
+                color="red"
+                onClick={openDelete}
+              >
+                <IconTrash />
+              </ActionIcon>
+            </Group>
+          </Group>
+          <Group>
+            <Text>{aircraft.make}</Text>
+            <Text>{aircraft.model}</Text>
+          </Group>
+          <Group>
+            <Text>{aircraft.aircraft_category}</Text>
+            <Text>/</Text>
+            <Text>{aircraft.aircraft_class}</Text>
+          </Group>
+          {aircraft.hobbs ? <Text>Hobbs: {aircraft.hobbs}</Text> : null}
+        </Stack>
+      </Card>
+    </>
+  );
+}
+
+function NewAircraftModal({
+  opened,
+  close,
+}: {
+  opened: boolean;
+  close: () => void;
+}) {
+  const newForm = useForm<AircraftFormSchema>({
+    initialValues: {
+      tail_no: "",
+      make: "",
+      model: "",
+      aircraft_category: "",
+      aircraft_class: "",
+      hobbs: 0.0,
+    },
+    validate: {
+      tail_no: (value) =>
+        value === null || value.trim() === ""
+          ? "Please enter a tail number"
+          : null,
+      make: (value) =>
+        value === null || value.trim() === "" ? "Please enter a make" : null,
+      model: (value) =>
+        value === null || value.trim() === "" ? "Please enter a model" : null,
+      aircraft_category: (value) =>
+        value === null || value.trim() === ""
+          ? "Please select a category"
+          : null,
+      aircraft_class: (value) =>
+        value === null || value.trim() === "" ? "Please select a class" : null,
+    },
+  });
+
+  const client = useApi();
+  const queryClient = useQueryClient();
+
+  const categories = useQuery({
+    queryKey: ["categories"],
+    queryFn: async () =>
+      await client.get(`/aircraft/categories`).then((res) => res.data),
+  });
+
+  const [category, setCategory] = useState("");
+  const [classSelection, setClassSelection] = useState("");
+
+  const classes = useQuery({
+    queryKey: ["classes", category],
+    queryFn: async () =>
+      await client
+        .get(`/aircraft/class?category=${category}`)
+        .then((res) => res.data),
+    enabled: !!category,
+  });
+
+  const addAircraft = useMutation({
+    mutationFn: async (values: AircraftFormSchema) => {
+      const newAircraft = values;
+      if (newAircraft) {
+        const res = await client.post("/aircraft", newAircraft);
+        return res.data;
+      }
+      throw new Error("Aircraft creation failed");
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["aircraft-list"] });
+      close();
+    },
+  });
+
+  return (
+    <Modal opened={opened} onClose={close} title="New Aircraft" centered>
+      <form onSubmit={newForm.onSubmit((values) => addAircraft.mutate(values))}>
+        <Container>
+          <Stack>
+            <TextInput
+              label="Tail Number"
+              withAsterisk
+              {...newForm.getInputProps("tail_no")}
+            />
+            <TextInput
+              label="Make"
+              {...newForm.getInputProps("make")}
+              withAsterisk
+            />
+            <TextInput
+              label="Model"
+              {...newForm.getInputProps("model")}
+              withAsterisk
+            />
+            <Select
+              {...newForm.getInputProps("aircraft_category")}
+              label="Category"
+              placeholder="Pick a value"
+              name="aircraft_category"
+              withAsterisk
+              data={
+                categories.isFetched && !categories.isError
+                  ? categories.data.categories
+                  : []
+              }
+              onChange={(_value, option) => {
+                setCategory(option.value);
+                setClassSelection("");
+                queryClient.invalidateQueries({
+                  queryKey: ["classes", option.value],
+                });
+                newForm.setFieldValue("aircraft_category", option.value);
+              }}
+            />
+            <Select
+              label="Class"
+              placeholder="Pick a value"
+              withAsterisk
+              data={
+                classes.isFetched && !classes.isError && classes.data
+                  ? classes.data.classes
+                  : []
+              }
+              value={classSelection}
+              {...newForm.getInputProps("aircraft_class")}
+            />
+            <NumberInput
+              label="Hobbs"
+              min={0.0}
+              suffix=" hrs"
+              decimalScale={1}
+              fixedDecimalScale
+              {...newForm.getInputProps("hobbs")}
+            />
+            <Group justify="flex-end">
+              {addAircraft.isError ? (
+                <Text c="red">
+                  {(addAircraft.error as AxiosError)?.response?.data?.detail ??
+                    "Error adding aircraft"}
+                </Text>
+              ) : addAircraft.isPending ? (
+                <Text c="yellow">Adding aircraft...</Text>
+              ) : null}
+              <Button
+                type="submit"
+                leftSection={<IconPencil />}
+                onClick={() => null}
+              >
+                Create
+              </Button>
+            </Group>
+          </Stack>
+        </Container>
+      </form>
+    </Modal>
+  );
+}
+
+export default function Aircraft() {
+  const aircraft: UseQueryResult<AircraftSchema[]> = useAircraft();
+
+  const [newOpened, { open: openNew, close: closeNew }] = useDisclosure(false);
+
+  return (
+    <>
+      <NewAircraftModal opened={newOpened} close={closeNew} />
+      <Container>
+        <Group justify="space-between" align="center" grow my="lg">
+          <Title order={2}>Aircraft</Title>
+          <Group justify="flex-end">
+            <Tooltip label="Add Aircraft">
+              <ActionIcon variant="subtle" onClick={openNew}>
+                <IconPlus />
+              </ActionIcon>
+            </Tooltip>
+          </Group>
+        </Group>
+        <ScrollArea h="calc(100vh - 95px - 75px)">
+          {aircraft.isLoading ? (
+            <Center h="calc(100vh - 95px - 75px)">
+              <Loader />
+            </Center>
+          ) : aircraft.isError ? (
+            <Center h="calc(100vh - 95px - 75px)">
+              <ErrorDisplay error={aircraft.error?.message} />
+            </Center>
+          ) : aircraft.data && aircraft.data.length === 0 ? (
+            <Center h="calc(100vh - 95px - 75px)">
+              <Stack align="center">
+                <IconX size="3rem" />
+                <Text c="dimmed">No Aircraft</Text>
+              </Stack>
+            </Center>
+          ) : (
+            <Stack justify="center">
+              {aircraft.data?.map((item) => (
+                <AircraftCard key={randomId()} aircraft={item} />
+              ))}
+            </Stack>
+          )}
+        </ScrollArea>
+      </Container>
+    </>
+  );
+}

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

@@ -88,11 +88,9 @@ export default function Flight() {
           ) : flight.data ? (
             <>
               <Group justify="space-between" px="xl">
-                <Group>
                 <Title order={2} py="lg" style={{ textAlign: "center" }}>
                   Flight Log
                 </Title>
-                </Group>
                 <Group>
                   <Tooltip
                     label="Edit Flight"
@@ -186,12 +184,8 @@ export default function Flight() {
                         ) : null}
                       </CollapsibleFieldset>
                     ) : null}
-                    {log.hobbs_start ||
-                    log.hobbs_end ||
-                    log.tach_start ||
-                    log.tach_end ? (
-                      <CollapsibleFieldset legend="Times" w="100%" mt="sm">
                     {log.hobbs_start || log.hobbs_end ? (
+                      <CollapsibleFieldset legend="Times" w="100%" mt="sm">
                         <Group grow>
                           <VerticalLogItem
                             label="Hobbs Start"
@@ -204,21 +198,6 @@ export default function Flight() {
                             hours
                           />
                         </Group>
-                        ) : null}
-                        {log.tach_start || log.tach_end ? (
-                          <Group grow mt="sm">
-                            <VerticalLogItem
-                              label="Tach Start"
-                              content={log.tach_start}
-                              hours
-                            />
-                            <VerticalLogItem
-                              label="Tach End"
-                              content={log.tach_end}
-                              hours
-                            />
-                          </Group>
-                        ) : null}
                       </CollapsibleFieldset>
                     ) : null}
                     {log.time_start ||

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

@@ -3,7 +3,6 @@ import { FlightFormSchema, flightCreateHelper } from "@/util/types";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useApi } from "@/util/api";
 import { useNavigate } from "@remix-run/react";
-import { AxiosError } from "axios";
 import FlightForm from "@/ui/form/flight-form";
 
 export default function NewFlight() {
@@ -21,9 +20,6 @@ export default function NewFlight() {
       }
       throw new Error("Flight creation failed");
     },
-    retry: (failureCount, error: AxiosError) => {
-      return !error || error.response?.status !== 401;
-    },
     onSuccess: async (data: { id: string }) => {
       await queryClient.invalidateQueries({ queryKey: ["flights-list"] });
       navigate(`/logbook/flights/${data.id}`);

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

@@ -31,11 +31,16 @@ export default function Me() {
       current_psk: string;
       new_psk: string;
       confirm_new_psk: string;
-    }) =>
+    }) => {
+      console.log({
+        current_password: values.current_psk,
+        new_password: values.new_psk,
+      });
       await client.put(`/users/me/password`, {
         current_password: values.current_psk,
         new_password: values.new_psk,
-      }),
+      });
+    },
   });
 
   const updatePskForm = useForm({
@@ -95,14 +100,16 @@ export default function Me() {
                 {...updatePskForm.getInputProps("current_psk")}
               />
               <PasswordInput
+                mt="sm"
                 label="New Password"
                 {...updatePskForm.getInputProps("new_psk")}
               />
               <PasswordInput
+                mt="sm"
                 label="Confirm New Password"
                 {...updatePskForm.getInputProps("confirm_new_psk")}
               />
-              <Group justify="flex-end" mt="md">
+              <Group justify="flex-end" mt="lg">
                 {updatePassword.isPending ? (
                   <Text>Updating...</Text>
                 ) : updatePassword.isError ? (

web/app/routes/logbook/route.tsx

@@ -1,7 +1,7 @@
 import { TailfinAppShell } from "@/ui/nav/app-shell";
 import { useAuth } from "@/util/auth";
 import type { MetaFunction } from "@remix-run/node";
-import { Outlet, useNavigate } from "@remix-run/react";
+import { Outlet, useLocation, useNavigate } from "@remix-run/react";
 import {
   QueryCache,
   QueryClient,
@@ -22,13 +22,15 @@ export default function Index() {
   const { user, loading } = useAuth();
   const navigate = useNavigate();
 
+  const location = useLocation();
+
   useEffect(() => {
     if (!loading && !user) {
       navigate("/login");
-    } else {
+    } else if (location.pathname === "/logbook") {
       navigate("/logbook/dashboard");
     }
-  }, [user, loading, navigate]);
+  }, [user, loading, navigate, location]);
 
   const [queryClient] = useState(
     () =>

web/app/ui/form/flight-form.tsx

@@ -50,8 +50,6 @@ export default function FlightForm({
 
       hobbs_start: null,
       hobbs_end: null,
-      tach_start: null,
-      tach_end: null,
 
       time_start: null,
       time_off: null,
@@ -124,10 +122,6 @@ export default function FlightForm({
               <HourInput form={form} field="hobbs_start" label="Hobbs Start" />
               <HourInput form={form} field="hobbs_end" label="Hobbs End" />
             </Group>
-            <Group justify="center" grow mt="md">
-              <HourInput form={form} field="tach_start" label="Tach Start" />
-              <HourInput form={form} field="tach_end" label="Tach End" />
-            </Group>
           </Fieldset>
 
           {/* Start/Stop */}

web/app/ui/nav/navbar.tsx

@@ -3,8 +3,9 @@ import { Stack, NavLink } from "@mantine/core";
 import { Link, useLocation } from "@remix-run/react";
 import {
   IconBook2,
+  IconDashboard,
   IconLogout,
-  IconPlaneDeparture,
+  IconPlaneTilt,
   IconUser,
 } from "@tabler/icons-react";
 
@@ -28,7 +29,7 @@ export default function Navbar({
           component={Link}
           to="/logbook/dashboard"
           label="Dashboard"
-          leftSection={<IconPlaneDeparture />}
+          leftSection={<IconDashboard />}
           active={page == "dashboard"}
           onClick={() => (opened ? toggle() : null)}
         />
@@ -41,6 +42,15 @@ export default function Navbar({
           active={page === "flights"}
           onClick={() => (opened ? toggle() : null)}
         />
+        <NavLink
+          p="md"
+          component={Link}
+          to="/logbook/aircraft"
+          label="Aircraft"
+          leftSection={<IconPlaneTilt />}
+          active={page === "aircraft"}
+          onClick={() => (opened ? toggle() : null)}
+        />
       </Stack>
       <Stack gap="0">
         <NavLink

web/app/util/types.ts

@@ -3,6 +3,8 @@ import utc from "dayjs/plugin/utc.js";
 
 dayjs.extend(utc);
 
+/* FLIGHTS */
+
 type FlightBaseSchema = {
   aircraft: string | null;
   waypoint_from: string | null;
@@ -11,8 +13,6 @@ type FlightBaseSchema = {
 
   hobbs_start: number | null;
   hobbs_end: number | null;
-  tach_start: number | null;
-  tach_end: number | null;
 
   time_total: number;
   time_pic: number;
@@ -96,8 +96,6 @@ const flightCreateHelper = (
       date: date.utc().startOf("day").toISOString(),
       hobbs_start: values.hobbs_start ? Number(values.hobbs_start) : null,
       hobbs_end: values.hobbs_end ? Number(values.hobbs_end) : null,
-      tach_start: values.tach_start ? Number(values.tach_start) : null,
-      tach_end: values.tach_end ? Number(values.tach_end) : null,
       time_start: date
         .utc()
         .hour(Math.floor((values.time_start ?? 0) / 100))
@@ -159,6 +157,30 @@ const flightEditHelper = (
   }
 };
 
+/* AIRCRAFT */
+
+type AircraftSchema = {
+  id: string;
+
+  tail_no: string;
+  make: string;
+  model: string;
+  aircraft_category: string;
+  aircraft_class: string;
+
+  hobbs: number;
+};
+
+type AircraftFormSchema = {
+  tail_no: string;
+  make: string;
+  model: string;
+  aircraft_category: string;
+  aircraft_class: string;
+
+  hobbs: number;
+};
+
 export {
   flightEditHelper,
   flightCreateHelper,
@@ -166,4 +188,6 @@ export {
   type FlightCreateSchema,
   type FlightDisplaySchema,
   type FlightConciseSchema,
+  type AircraftSchema,
+  type AircraftFormSchema,
 };