Update Airport admin page

ui/src/components/Administration.tsx

@@ -1,6 +1,8 @@
 import { Header } from '@components/Header';
 import { Navigate } from 'react-router';
 import { useUserContext } from '@components/context/UserContext.tsx';
+import { AirportTable } from '@components/AirportTable';
+import { AirportDrop } from '@components/AirportDrop';
 
 export function Administration() {
   const { user } = useUserContext();
@@ -12,7 +14,8 @@ export function Administration() {
   return (
     <>
       <Header />
-      Todo: administration {user?.email}
+      <AirportTable />
+      <AirportDrop />
     </>
   );
 }

ui/src/components/AirportDrop/AirportDrop.module.css

@@ -0,0 +1,28 @@
+.wrapper {
+  position: relative;
+  margin-bottom: 30px;
+}
+
+.dropzone {
+  border-width: 1px;
+  padding-bottom: 50px;
+  color: var(--mantine-color-bright);
+}
+
+.icon {
+  color: light-dark(var(--mantine-color-gray-4), var(--mantine-color-white));
+}
+
+.control {
+  position: absolute;
+  width: 250px;
+  left: calc(50% - 125px);
+  bottom: -20px;
+}
+
+.description {
+  text-align: center;
+  font-size: var(--mantine-font-size-sm);
+  color: var(--mantine-color-dimmed);
+  margin-top: var(--mantine-spacing-xs);
+}

ui/src/components/AirportDrop/index.tsx

@@ -0,0 +1,69 @@
+import { useRef, useState } from 'react';
+import { IconCloudUpload, IconDownload, IconX } from '@tabler/icons-react';
+import { Button, Group, Text, useMantineTheme } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import classes from './AirportDrop.module.css';
+import { importAirports } from '@lib/airport.ts';
+
+export function AirportDrop() {
+  const theme = useMantineTheme();
+  const openRef = useRef<() => void>(null);
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <div className={classes.wrapper}>
+      <Dropzone
+        loading={loading}
+        openRef={openRef}
+        onDrop={async (files) => {
+          if (files.length === 0) return;
+          setLoading(true);
+          try {
+            const formData = new FormData();
+            files.forEach(file => {
+              formData.append('files', file, file.name);
+            })
+            await importAirports(formData);
+          } catch (error) {
+            console.error('Upload error:', error);
+          } finally {
+            setLoading(false);
+          }
+        }}
+        className={classes.dropzone}
+        radius="md"
+        accept={['application/JSON']}
+        maxSize={30 * 1024 ** 2}
+      >
+        <div style={{ pointerEvents: 'none' }}>
+          <Group justify="center">
+            <Dropzone.Accept>
+              <IconDownload size={50} color={theme.colors.blue[6]} stroke={1.5} />
+            </Dropzone.Accept>
+            <Dropzone.Reject>
+              <IconX size={50} color={theme.colors.red[6]} stroke={1.5} />
+            </Dropzone.Reject>
+            <Dropzone.Idle>
+              <IconCloudUpload size={50} stroke={1.5} className={classes.icon} />
+            </Dropzone.Idle>
+          </Group>
+
+          <Text ta="center" fw={700} fz="lg" mt="xl">
+            <Dropzone.Accept>Drop files here</Dropzone.Accept>
+            <Dropzone.Reject>Json file less than 30mb</Dropzone.Reject>
+            <Dropzone.Idle>Upload JSON</Dropzone.Idle>
+          </Text>
+
+          <Text className={classes.description}>
+            Drag&apos;n&apos;drop files here to upload. We can accept only <i>.json</i> files that
+            are less than 30mb in size.
+          </Text>
+        </div>
+      </Dropzone>
+
+      <Button className={classes.control} size="md" radius="xl" onClick={() => openRef.current?.()}>
+        Select files
+      </Button>
+    </div>
+  );
+}

ui/src/components/AirportTable/AirportTable.module.css

@@ -0,0 +1,19 @@
+.header {
+  position: sticky;
+  top: 0;
+  background-color: var(--mantine-color-body);
+  transition: box-shadow 150ms ease;
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-bottom: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-3));
+  }
+}
+
+.scrolled {
+  box-shadow: var(--mantine-shadow-sm);
+}

ui/src/components/AirportTable/index.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react';
+import cx from 'clsx';
+import { Center, Pagination, ScrollArea, Table } from '@mantine/core';
+import classes from './AirportTable.module.css';
+import { getAirports } from '@lib/airport.ts';
+import { Airport } from '@lib/airport.types.ts';
+
+export function AirportTable() {
+  const [data, setData] = useState<Airport[]>([]);
+  const [page, setPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const limit = 1000;
+    getAirports({ page, limit }).then(r => {
+      setData(r.data);
+      setTotalPages(r.total / r.data.length);
+    });
+  },[page]);
+
+  const rows = data.map((row, idx) => (
+    <Table.Tr key={idx}>
+      <Table.Td>{row.name}</Table.Td>
+      <Table.Td>{row.icao}</Table.Td>
+      <Table.Td>{row.latitude}</Table.Td>
+      <Table.Td>{row.longitude}</Table.Td>
+    </Table.Tr>
+  ));
+
+  return (
+    <>
+      <ScrollArea h={300} onScrollPositionChange={({ y }) => setScrolled(y !== 0)}>
+        <Table miw={700}>
+          <Table.Thead className={cx(classes.header, { [classes.scrolled]: scrolled })}>
+            <Table.Tr>
+              <Table.Th>Name</Table.Th>
+              <Table.Th>ICAO</Table.Th>
+              <Table.Th>Latitude</Table.Th>
+              <Table.Th>Longitude</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>{rows}</Table.Tbody>
+        </Table>
+      </ScrollArea>
+      <Center mt="sm">
+        <Pagination
+          value={page}
+          onChange={setPage}
+          total={totalPages}
+          siblings={1}
+          boundaries={1}
+        />
+      </Center>
+    </>
+  );
+}

ui/src/components/Profile.tsx

@@ -12,7 +12,7 @@ export function Profile() {
   return (
     <>
       <Header />
-      Todo: profile {user?.email}
+      Todo: profile {user?.first_name}
     </>
   );
 }