Store locations of expenses

package.json

@@ -37,6 +37,8 @@
     "content-disposition": "^0.5.4",
     "dayjs": "^1.11.10",
     "embla-carousel-react": "^8.0.0-rc21",
+    "leaflet": "^1.9.4",
+    "leaflet-defaulticon-compatibility": "^0.1.2",
     "lucide-react": "^0.290.0",
     "nanoid": "^5.0.4",
     "next": "^14.2.3",
@@ -50,6 +52,7 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.47.0",
     "react-intersection-observer": "^9.8.0",
+    "react-leaflet": "^4.2.1",
     "sharp": "^0.33.2",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7",
@@ -61,6 +64,7 @@
   "devDependencies": {
     "@total-typescript/ts-reset": "^0.5.1",
     "@types/content-disposition": "^0.5.8",
+    "@types/leaflet": "^1.9.12",
     "@types/node": "^20",
     "@types/pg": "^8.10.9",
     "@types/react": "^18.2.48",

prisma/migrations/20240618134226_add_location/migration.sql

@@ -0,0 +1,11 @@
+-- CreateTable
+CREATE TABLE "Point" (
+    "id" TEXT NOT NULL,
+    "latitude" DOUBLE PRECISION NOT NULL,
+    "longitude" DOUBLE PRECISION NOT NULL,
+
+    CONSTRAINT "Point_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "Point" ADD CONSTRAINT "Point_id_fkey" FOREIGN KEY ("id") REFERENCES "Expense"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

prisma/migrations/20240619112134_alter_point_add_on_delete_cascade/migration.sql

@@ -0,0 +1,5 @@
+-- DropForeignKey
+ALTER TABLE "Point" DROP CONSTRAINT "Point_id_fkey";
+
+-- AddForeignKey
+ALTER TABLE "Point" ADD CONSTRAINT "Point_id_fkey" FOREIGN KEY ("id") REFERENCES "Expense"("id") ON DELETE CASCADE ON UPDATE CASCADE;

prisma/schema.prisma

@@ -54,6 +54,14 @@ model Expense {
   createdAt       DateTime          @default(now())
   documents       ExpenseDocument[]
   notes           String?
+  location        Point?
+}
+
+model Point {
+  id        String   @id
+  latitude  Float
+  longitude Float
+  Expense   Expense? @relation(fields: [id], references: [id], onDelete: Cascade)
 }
 
 model ExpenseDocument {

src/components/expense-form.tsx

@@ -45,12 +45,13 @@ import { cn } from '@/lib/utils'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Save } from 'lucide-react'
 import Link from 'next/link'
-import { useSearchParams } from 'next/navigation'
+import { ReadonlyURLSearchParams, useSearchParams } from 'next/navigation'
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { match } from 'ts-pattern'
 import { DeletePopup } from './delete-popup'
 import { extractCategoryFromTitle } from './expense-form-actions'
+import { ExpenseLocationInput } from './expense-location-input'
 import { Textarea } from './ui/textarea'
 
 export type Props = {
@@ -146,6 +147,17 @@ async function persistDefaultSplittingOptions(
   }
 }
 
+function getLocationFromSearchParams(
+  searchParams: ReadonlyURLSearchParams,
+): ExpenseFormValues['location'] {
+  return searchParams.get('latitude') && searchParams.get('longitude')
+    ? {
+        latitude: Number(searchParams.get('latitude')),
+        longitude: Number(searchParams.get('longitude')),
+      }
+    : null
+}
+
 export function ExpenseForm({
   group,
   expense,
@@ -184,6 +196,7 @@ export function ExpenseForm({
           isReimbursement: expense.isReimbursement,
           documents: expense.documents,
           notes: expense.notes ?? '',
+          location: expense.location,
         }
       : searchParams.get('reimbursement')
       ? {
@@ -207,6 +220,7 @@ export function ExpenseForm({
           saveDefaultSplittingOptions: false,
           documents: [],
           notes: '',
+          location: getLocationFromSearchParams(searchParams),
         }
       : {
           title: searchParams.get('title') ?? '',
@@ -234,6 +248,7 @@ export function ExpenseForm({
               ]
             : [],
           notes: '',
+          location: getLocationFromSearchParams(searchParams),
         },
   })
   const [isCategoryLoading, setCategoryLoading] = useState(false)
@@ -698,6 +713,31 @@ export function ExpenseForm({
           </CardContent>
         </Card>
 
+        <Card className="mt-4">
+          <CardHeader>
+            <CardTitle className="flex justify-between">
+              <span>Location</span>
+            </CardTitle>
+            <CardDescription>Where was the {sExpense} made?</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField
+              control={form.control}
+              name="location"
+              render={({ field }) => {
+                return (
+                  <FormItem>
+                    <ExpenseLocationInput
+                      location={field.value}
+                      updateLocation={field.onChange}
+                    />
+                  </FormItem>
+                )
+              }}
+            />
+          </CardContent>
+        </Card>
+
         {runtimeFeatureFlags.enableExpenseDocuments && (
           <Card className="mt-4">
             <CardHeader>

src/components/expense-location-input.tsx

@@ -0,0 +1,68 @@
+import { useToast } from '@/components/ui/use-toast'
+import { ExpenseFormValues } from '@/lib/schemas'
+import { LocateFixed, MapPinOff } from 'lucide-react'
+import { AsyncButton } from './async-button'
+import { Map } from './map'
+import { Button } from './ui/button'
+
+type Props = {
+  location: ExpenseFormValues['location']
+  updateLocation: (location: ExpenseFormValues['location']) => void
+}
+
+export function ExpenseLocationInput({ location, updateLocation }: Props) {
+  const { toast } = useToast()
+
+  async function getCoordinates(): Promise<GeolocationPosition> {
+    return new Promise(function (resolve, reject) {
+      navigator.geolocation.getCurrentPosition(resolve, reject)
+    })
+  }
+
+  async function setCoordinates(): Promise<undefined> {
+    try {
+      const { latitude, longitude } = (await getCoordinates()).coords
+      updateLocation({ latitude, longitude })
+    } catch (error) {
+      console.error(error)
+      toast({
+        title: 'Error while determining location',
+        description:
+          'Something wrong happened when determining your current location. Please approve potential authorisation dialogues or try again later.',
+        variant: 'destructive',
+      })
+    }
+  }
+
+  function unsetCoordinates() {
+    updateLocation(null)
+  }
+
+  return (
+    <>
+      <Map location={location} updateLocation={updateLocation} />
+      <div className="flex gap-2">
+        <AsyncButton
+          type="button"
+          variant="secondary"
+          loadingContent="Getting location…"
+          action={setCoordinates}
+        >
+          <LocateFixed className="w-4 h-4 mr-2" />
+          Locate me
+        </AsyncButton>
+        {location && (
+          <Button
+            size="default"
+            variant="outline"
+            type="button"
+            onClick={unsetCoordinates}
+          >
+            <MapPinOff className="w-4 h-4 mr-2" />
+            Remove location
+          </Button>
+        )}
+      </div>
+    </>
+  )
+}

src/components/map/index.ts

@@ -0,0 +1,9 @@
+import dynamic from 'next/dynamic'
+
+// This is necessary for using react-leaflet with Next.js
+// see: https://github.com/PaulLeCam/react-leaflet/issues/956#issuecomment-1057881284
+const Map = dynamic(() => import('./map-component'), {
+  ssr: false,
+})
+
+export { Map }