Update Airport admin page

.env

@@ -10,7 +10,7 @@ NGINX_INTERNAL_HOST=host.docker.internal
 
 POSTGRES_HOST=localhost
 POSTGRES_USER=aviation
-POSTGRES_PASSWORD=CHANGEME
+POSTGRES_PASSWORD=changeme
 POSTGRES_NAME=aviation
 POSTGRES_PORT=5432
 
@@ -19,7 +19,7 @@ REDIS_PORT=6379
 
 MINIO_HOST=localhost
 MINIO_ROOT_USER=aviation
-MINIO_ROOT_PASSWORD=CHANGEME
+MINIO_ROOT_PASSWORD=changeme
 MINIO_BUCKET=aviation
 MINIO_PROTOCOL=http
 MINIO_PORT=9000
@@ -41,6 +41,6 @@ __VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS:${NGINX_HOST}
 
 ENVIRONMENT=development
 ADMIN_EMAIL=admin@example.com
-ADMIN_PASSWORD=CHANGEME
+ADMIN_PASSWORD=changeme
 
 AVIATION_WEATHER_URL=https://aviationweather.gov/api/data

api/src/main.rs

@@ -36,7 +36,7 @@ async fn main() -> Result<(), Box<dyn std::error::Error>> {
       log::debug!("Creating default administrator");
       let password = admin_password.unwrap();
       let password_hash = hash(&password)?;
-      if email == "admin@example.com" || password == "CHANGEME" {
+      if email == "admin@example.com" || password == "changeme" {
         log::warn!(
           "Default admin credentials are in use, update the ADMIN_EMAIL and ADMIN_PASSWORD."
         );

bruno/Users/Login.bru

@@ -13,6 +13,6 @@ post {
 body:json {
   {
     "email": "admin@example.com",
-    "password": "CHANGEME"
+    "password": "changeme"
   }
 }

ui/package-lock.json

@@ -8,11 +8,12 @@
       "name": "aviation-ui",
       "version": "0.1.0",
       "dependencies": {
-        "@mantine/core": "^7.17.2",
+        "@mantine/core": "^8.0.0",
-        "@mantine/form": "^7.17.2",
+        "@mantine/dropzone": "^8.0.0",
-        "@mantine/hooks": "^7.17.2",
+        "@mantine/form": "^8.0.0",
-        "@mantine/modals": "^7.17.2",
+        "@mantine/hooks": "^8.0.0",
-        "@mantine/notifications": "^7.17.2",
+        "@mantine/modals": "^8.0.0",
+        "@mantine/notifications": "^8.0.0",
         "@tabler/icons-react": "^3.31.0",
         "d3": "^7.9.0",
         "js-cookie": "^3.0.5",
@@ -1106,28 +1107,43 @@
       }
     },
     "node_modules/@mantine/core": {
-      "version": "7.17.2",
+      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/@mantine/core/-/core-7.17.2.tgz",
+      "resolved": "https://registry.npmjs.org/@mantine/core/-/core-8.0.0.tgz",
-      "integrity": "sha512-R6MYhitJ0JEgrhadd31Nw9FhRaQwDHjXUs5YIlitKH/fTOz9gKSxKjzmNng3bEBQCcbEDOkZj3FRcBgTUh/F0Q==",
+      "integrity": "sha512-TskeJS2/+DbmUe85fXDoUAyErkSvR4YlbUl8MLqhjFBJUqwc72ZrLynmN13wuKtlVPakDYYjq4/IEDMReh3CYA==",
       "license": "MIT",
       "dependencies": {
         "@floating-ui/react": "^0.26.28",
         "clsx": "^2.1.1",
         "react-number-format": "^5.4.3",
         "react-remove-scroll": "^2.6.2",
-        "react-textarea-autosize": "8.5.6",
+        "react-textarea-autosize": "8.5.9",
         "type-fest": "^4.27.0"
       },
       "peerDependencies": {
-        "@mantine/hooks": "7.17.2",
+        "@mantine/hooks": "8.0.0",
+        "react": "^18.x || ^19.x",
+        "react-dom": "^18.x || ^19.x"
+      }
+    },
+    "node_modules/@mantine/dropzone": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@mantine/dropzone/-/dropzone-8.0.0.tgz",
+      "integrity": "sha512-eSQbYg0M6MuvPvCJuiM3HKJufcNRqjjwaa157tXRGV7iUPfzXxdF1EMP1osljXRjMEGH/A+CiDN3eCsNTzt53A==",
+      "license": "MIT",
+      "dependencies": {
+        "react-dropzone-esm": "15.2.0"
+      },
+      "peerDependencies": {
+        "@mantine/core": "8.0.0",
+        "@mantine/hooks": "8.0.0",
         "react": "^18.x || ^19.x",
         "react-dom": "^18.x || ^19.x"
       }
     },
     "node_modules/@mantine/form": {
-      "version": "7.17.2",
+      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/@mantine/form/-/form-7.17.2.tgz",
+      "resolved": "https://registry.npmjs.org/@mantine/form/-/form-8.0.0.tgz",
-      "integrity": "sha512-MxZPKXXhaZ7M1ZJOpS2wifhh186DMvNjcXa2bP04Tp9TdvTlbLAJZxKjZkQnGGgt8Atsf6/3gdeJMfG704Km6g==",
+      "integrity": "sha512-ErbbEFMEiRsK2Rn0jmFE5ohNJXHSMSbuJsL2vDUVsbIaXo6svw6ockw1WWGdiU8oEGqxM6Pd618yI9cJWNHF3g==",
       "license": "MIT",
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
@@ -1138,46 +1154,46 @@
       }
     },
     "node_modules/@mantine/hooks": {
-      "version": "7.17.2",
+      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-7.17.2.tgz",
+      "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-8.0.0.tgz",
-      "integrity": "sha512-tbErVcGZu0E4dSmE6N0k6Tv1y9R3SQmmQgwqorcc+guEgKMdamc36lucZGlJnSGUmGj+WLUgELkEQ0asdfYBDA==",
+      "integrity": "sha512-hrcgZMHUPsgu+VBfUVcJOqMG7Qi+AshYjFyc/qo0Cz8TEhqWmD0I1yJW+qj4sDTTDWRQC6kvI5c1h+87/9MvoA==",
       "license": "MIT",
       "peerDependencies": {
         "react": "^18.x || ^19.x"
       }
     },
     "node_modules/@mantine/modals": {
-      "version": "7.17.2",
+      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/@mantine/modals/-/modals-7.17.2.tgz",
+      "resolved": "https://registry.npmjs.org/@mantine/modals/-/modals-8.0.0.tgz",
-      "integrity": "sha512-Ms8MYLJCZcxRnGfIQr4riGK2g5mpklxiEAU84vbptoAlQ2d5Iqu+CQ0XpDfamCQl/ltmPmYJYkrq52zhQWIS3w==",
+      "integrity": "sha512-yki3KzW9Pykf6hVSezWjeHC0FCiYD3mK2r2Sn6qE0ag+EeXZs1cbrqpjZHYov2rh6j0xzW2jnaoVbKEqYw1vUQ==",
       "license": "MIT",
       "peerDependencies": {
-        "@mantine/core": "7.17.2",
+        "@mantine/core": "8.0.0",
-        "@mantine/hooks": "7.17.2",
+        "@mantine/hooks": "8.0.0",
         "react": "^18.x || ^19.x",
         "react-dom": "^18.x || ^19.x"
       }
     },
     "node_modules/@mantine/notifications": {
-      "version": "7.17.2",
+      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-7.17.2.tgz",
+      "resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-8.0.0.tgz",
-      "integrity": "sha512-vg0L8cmihz0ODg4WJ9MAyK06WPt/6g67ksIUFxd4F8RfdJbIMLTsNG9yWoSfuhtXenUg717KaA917IWLjDSaqw==",
+      "integrity": "sha512-sWldvQmq4YJsknHURBNKkc3CAU0qDb0LuQGKIZGxqFlwEiXNIAI8mtfr7stgzVx+mteVW1g+HBb7FaZp07jRxQ==",
       "license": "MIT",
       "dependencies": {
-        "@mantine/store": "7.17.2",
+        "@mantine/store": "8.0.0",
         "react-transition-group": "4.4.5"
       },
       "peerDependencies": {
-        "@mantine/core": "7.17.2",
+        "@mantine/core": "8.0.0",
-        "@mantine/hooks": "7.17.2",
+        "@mantine/hooks": "8.0.0",
         "react": "^18.x || ^19.x",
         "react-dom": "^18.x || ^19.x"
       }
     },
     "node_modules/@mantine/store": {
-      "version": "7.17.2",
+      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/@mantine/store/-/store-7.17.2.tgz",
+      "resolved": "https://registry.npmjs.org/@mantine/store/-/store-8.0.0.tgz",
-      "integrity": "sha512-UoMUYQK/z58hMueCkpDIXc49gPgrVO/zcpb0k+B7MFU51EIUiFzHLxLFBmWrgCAM6rzJORqN8JjyCd/PB9j4aw==",
+      "integrity": "sha512-42RWCsXMNuhpX+d/hwr5aHj+HWyi5ltbc0R0xdiUnAmqSB7CHbWxDDLh4+DbmqPrN9pTeYvpPGp3v/CG2vuGBg==",
       "license": "MIT",
       "peerDependencies": {
         "react": "^18.x || ^19.x"
@@ -4286,6 +4302,21 @@
         "react": "^19.0.0"
       }
     },
+    "node_modules/react-dropzone-esm": {
+      "version": "15.2.0",
+      "resolved": "https://registry.npmjs.org/react-dropzone-esm/-/react-dropzone-esm-15.2.0.tgz",
+      "integrity": "sha512-pPwR8xWVL+tFLnbAb8KVH5f6Vtl397tck8dINkZ1cPMxHWH+l9dFmIgRWgbh7V7jbjIcuKXCsVrXbhQz68+dVA==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">= 10.13"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8 || 18.0.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -4420,9 +4451,9 @@
       }
     },
     "node_modules/react-textarea-autosize": {
-      "version": "8.5.6",
+      "version": "8.5.9",
-      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.5.6.tgz",
+      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.5.9.tgz",
-      "integrity": "sha512-aT3ioKXMa8f6zHYGebhbdMD2L00tKeRX1zuVuDx9YQK/JLLRSaSxq3ugECEmUB9z2kvk6bFSIoRHLkkUv0RJiw==",
+      "integrity": "sha512-U1DGlIQN5AwgjTyOEnI1oCcMuEr1pv1qOtklB2l4nyMGbHzWrI0eFsYK0zos2YWqAolJyG0IWJaqWmWj5ETh0A==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.20.13",

ui/package.json

@@ -11,11 +11,12 @@
     "format": "prettier --write src"
   },
   "dependencies": {
-    "@mantine/core": "^7.17.2",
+    "@mantine/core": "^8.0.0",
-    "@mantine/form": "^7.17.2",
+    "@mantine/dropzone": "^8.0.0",
-    "@mantine/hooks": "^7.17.2",
+    "@mantine/form": "^8.0.0",
-    "@mantine/modals": "^7.17.2",
+    "@mantine/hooks": "^8.0.0",
-    "@mantine/notifications": "^7.17.2",
+    "@mantine/modals": "^8.0.0",
+    "@mantine/notifications": "^8.0.0",
     "@tabler/icons-react": "^3.31.0",
     "d3": "^7.9.0",
     "js-cookie": "^3.0.5",

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}
     </>
   );
 }

ui/src/lib/account.types.ts

@@ -6,7 +6,7 @@ export interface RegisterUser {
 }
 
 export interface User {
-  email: string;
+  email_verified: boolean;
   role: string;
   first_name: string;
   last_name: string;

ui/src/lib/airport.ts

@@ -1,5 +1,5 @@
 import { Airport, AirportCategory, Bounds, GetAirportsResponse } from '@lib/airport.types.ts';
-import { getRequest } from '@lib/index.ts';
+import { getRequest, postRequest } from '@lib/index.ts';
 
 const defaultLimit = import.meta.env.VITE_DEFAULT_LIMIT || 150;
 
@@ -40,3 +40,12 @@ export async function getAirports({
   });
   return response?.json() || { data: [] };
 }
+
+export async function importAirports(data: FormData) {
+  const response = await postRequest('airports/import', data, {
+    type: 'form'
+  });
+  if (!response.ok) {
+    throw new Error('Upload failed');
+  }
+}