Upgrade VZE to NextJS

app/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

app/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

app/.nvmrc

@@ -0,0 +1 @@
+20

app/README.md

@@ -0,0 +1,116 @@
+**This** is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Quick start
+
+1. Start your database and graphql engine
+
+2. Use the `env_template` to configure the local environment variables. These can be copied from your existing VZE `.env` file, by replacing `REACT_APP_` with `NEXT_PUBLIC_` in the variable name:
+
+```shell
+# run this cmd and then edit .env.local as needed
+cp -n env_template .env.local
+```
+
+3. Activate your `node` environment (`v20` is required):
+
+```shell
+nvm use
+```
+
+4. Install node packages
+
+```
+npm install
+```
+
+5. Start the development server
+
+```shell
+npm run dev
+```
+
+6. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+## This app vs the old VZE
+
+- Create-React-App ➡️ NextJS
+- Javascript ➡️ Typescript
+- CoreUI + reactstrap ➡️ react-bootstrap
+- Apollo Client ➡️ SWR + graphql-request
+
+## Working features
+
+- Crashes list
+  - filter by preset date range
+  - filter by custom date range
+  - filter using search input and selecting a field to search on
+  - reset filters
+  - filters are preserved (in local storage) when refreshing the page or navigating back to it
+  - advanced search filter menu toggle shows a badge with how many fitlers are applied
+  - expandable filter toggle menu with working filter switch groups
+  - paginate through search results
+  - loading spinner apperas in pagination controls when fetching data
+  - sortable table columns with icon indicating sort direction
+- Crash details page
+  - Crash map: crash map displays crash location with nearmap aerials
+  - Crash map: ability to edit crash location  
+  - Crash diagram: diagrams render
+  - Crash diagram: info alert shows when no diagram is available and is temp record
+  - Crash diagram: danger alert shows when no diagram is available and is not temp record
+  - Crash narrative: loads normally and is scrollable for long narratives
+  - Crash data card: click field to edit
+  - Crash data card: cannot save unless field is edited
+  - Crash data card: use cancel button to exit edit mode and restore initial value
+  - Crash data card: use `enter` key to save edits
+  - Crash data card: edit a field with lookup values
+  - Crash data card: edit a text input
+  - Crash data card: edit a number input
+  - Crash data card: nullify a value (e.g. street name) by clearing its input and saving it
+  - Related records - units: click field to edit it
+  - Related records - people: todo
+  - Related records - chargs: todo
+  - Change log: change log works normally with details modal. But it is not collapseable (yet).
+- Sidebar
+  - is exapandable and open/closed state is preserved in localstorage
+
+
+## Todo
+
+- permissions-based features:
+  - side nav
+  - field editing
+  - etc. see <Can/> component from VZE
+- crash details
+  - crash injury widgets
+  - swap addresses
+  - people table
+    - name edit component
+  - charges table
+  - notes
+  - recommendations
+  - misc column editing + placement
+  - Crash map: show coordinates and enable editing by tying into input
+  - crash diagram: zoom/tilt control
+  - Change log: collapseable
+- table
+  - advanced filters: test them and add "Other" unit type filter
+  - export
+  - record counts
+- Top nav component
+  - app logo
+  - navigration crash search
+  - profile menu with signout
+- locations
+- location details
+- create crash record
+- upload non-cr3
+- dashboard
+
+- users
+  - user list
+  - add/edit/delete uers
+  - copy user emails
+- login page: make it look nice
+- versioned localstorage
+- error boundary (see Moped's for reference)
+- map geocoder (technically an enhancement vis a vis current state)

app/app/crashes/[record_locator]/page.tsx

@@ -0,0 +1,143 @@
+"use client";
+import { useCallback } from "react";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+import Card from "react-bootstrap/Card";
+import CrashMapCard from "@/components/CrashMapCard";
+import { GET_CRASH, UPDATE_CRASH } from "@/queries/crash";
+import { UPDATE_UNIT } from "@/queries/unit";
+import { useQuery } from "@/utils/graphql";
+import AppBreadCrumb from "@/components/AppBreadCrumb";
+import CrashHeader from "@/components/CrashHeader";
+import CrashDiagramCard from "@/components/CrashDiagramCard";
+import DataCard from "@/components/DataCard";
+import RelatedRecordTable from "@/components/RelatedRecordTable";
+import ChangeLog from "@/components/ChangeLog";
+import { crashDataCards } from "@/configs/crashDataCard";
+import { unitRelatedRecordCols } from "@/configs/unitRelatedRecordTable";
+import { Crash } from "@/types/types";
+
+export default function CrashDetailsPage({
+  params,
+}: {
+  params: { record_locator: string };
+}) {
+  const recordLocator = params.record_locator;
+
+  const { data, refetch, isValidating } = useQuery<{
+    crashes: Crash[];
+  }>({
+    query: recordLocator ? GET_CRASH : null,
+    variables: { recordLocator },
+  });
+
+  const onSaveCallback = useCallback(async () => {
+    await refetch();
+  }, [refetch]);
+
+  if (!data || !data?.crashes?.[0]) {
+    // todo: 404 page
+    // todo: loading spinner (would be nice to use a spinner inside cards)
+    return;
+  }
+
+  const crash = data.crashes[0];
+
+  return (
+    <>
+      <AppBreadCrumb />
+      <CrashHeader crash={crash} />
+      <Row>
+        <Col sm={12} md={6} lg={4} className="mb-3">
+          <CrashMapCard
+            savedLatitude={crash.latitude}
+            savedLongitude={crash.longitude}
+            crashId={crash.id}
+            onSaveCallback={onSaveCallback}
+            mutation={UPDATE_CRASH}
+          />
+        </Col>
+        <Col sm={12} md={6} lg={4} className="mb-3">
+          <CrashDiagramCard crash={crash} />
+        </Col>
+        <Col sm={12} md={6} lg={4} className="mb-3">
+          <Card>
+            <Card.Header>Narrative</Card.Header>
+            <Card.Body className="crash-header-card-body">
+              <Card.Text>{crash.investigator_narrative || ""}</Card.Text>
+            </Card.Body>
+          </Card>
+        </Col>
+      </Row>
+      <Row>
+        <Col sm={12} md={6} lg={4} className="mb-3">
+          <DataCard<Crash>
+            record={crash}
+            isValidating={isValidating}
+            title="Summary"
+            columns={crashDataCards.summary}
+            mutation={UPDATE_CRASH}
+            onSaveCallback={onSaveCallback}
+          />
+        </Col>
+        <Col sm={12} md={6} lg={4} className="mb-3">
+          <DataCard<Crash>
+            record={crash}
+            isValidating={isValidating}
+            title="Flags"
+            columns={crashDataCards.flags}
+            mutation={UPDATE_CRASH}
+            onSaveCallback={onSaveCallback}
+          />
+        </Col>
+        <Col sm={12} md={6} lg={4} className="mb-3">
+          <DataCard<Crash>
+            record={crash}
+            isValidating={isValidating}
+            title="Other"
+            columns={crashDataCards.other}
+            mutation={UPDATE_CRASH}
+            onSaveCallback={onSaveCallback}
+          />
+        </Col>
+      </Row>
+      <Row>
+        <Col sm={12} md={6} lg={4} className="mb-3">
+          <DataCard<Crash>
+            record={crash}
+            isValidating={isValidating}
+            title="Primary address"
+            columns={crashDataCards.address}
+            mutation={UPDATE_CRASH}
+            onSaveCallback={onSaveCallback}
+          />
+        </Col>
+        <Col sm={12} md={6} lg={4} className="mb-3">
+          <DataCard<Crash>
+            record={crash}
+            isValidating={isValidating}
+            title="Secondary address"
+            columns={crashDataCards.address_secondary}
+            mutation={UPDATE_CRASH}
+            onSaveCallback={onSaveCallback}
+          />
+        </Col>
+      </Row>
+      <Row>
+        <Col sm={12} className="mb-3">
+          <RelatedRecordTable
+            records={crash.units}
+            isValidating={isValidating}
+            title="Units"
+            columns={unitRelatedRecordCols}
+            mutation={UPDATE_UNIT}
+            onSaveCallback={onSaveCallback}
+          />
+        </Col>
+      </Row>
+      <Row className="mb-5">
+        <Col>{crash && <ChangeLog logs={crash.change_logs} />}</Col>
+      </Row>
+    </>
+  );
+}

app/app/crashes/page.tsx

@@ -0,0 +1,25 @@
+"use client";
+import Card from "react-bootstrap/Card";
+import AppBreadCrumb from "@/components/AppBreadCrumb";
+import { crashesListViewColumns } from "@/configs/crashesListViewColumns";
+import { crashesListViewQueryConfig } from "@/configs/crashesListViewTable";
+import TableWrapper from "@/components/TableWrapper";
+const localStorageKey = "crashesListViewQueryConfig";
+
+export default function Crashes() {
+  return (
+    <>
+      <AppBreadCrumb />
+      <Card className="mx-3 mb-3">
+        <Card.Header className="fs-5 fw-bold">Crashes</Card.Header>
+        <Card.Body>
+          <TableWrapper
+            columns={crashesListViewColumns}
+            initialQueryConfig={crashesListViewQueryConfig}
+            localStorageKey={localStorageKey}
+          />
+        </Card.Body>
+      </Card>
+    </>
+  );
+}

app/app/dashboard/page.tsx

@@ -0,0 +1,4 @@
+export default function Dashboard() {
+    return <h1>This is the dashboard page</h1>;
+  }
+

app/app/layout.tsx

@@ -0,0 +1,25 @@
+import "../styles/global.scss";
+import AuthProvider from "@/contexts/Auth";
+import SidebarLayout from "@/components/SidebarLayout";
+
+/**
+ * The root layout for the whole app
+ * 
+ * todo: metadata
+ */
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    // <Html lang="en" style={{fontSize: "14px"}} data-bs-theme="dark">
+    <html lang="en" style={{ fontSize: "14px" }}>
+      <AuthProvider>
+        <body>
+          <SidebarLayout>{children}</SidebarLayout>
+        </body>
+      </AuthProvider>
+    </html>
+  );
+}

app/app/locations/page.tsx

@@ -0,0 +1,4 @@
+export default function Locations() {
+    return <h1>This is the locations page</h1>;
+  }
+

app/app/page.tsx

@@ -0,0 +1,5 @@
+// this page redirects to /crashes
+// todo: what should go here
+export default function Page() {
+  return <p> hello</p>;
+}