further work on bills

db/bill.ts

@@ -1,5 +1,5 @@
 import * as mongoose from 'mongoose'
-import { BILL_STATUS, MILAGE_RATES } from './enums'
+import { BILL_STATUS, MILAGE_RATES, getMilageRateValue } from './enums'
 import { BookingDocument } from './booking'
 
 export interface AdditionalCosts {
@@ -15,7 +15,6 @@ export interface BillDocument
   milageEnd: number
   milage?: number
   rate: MILAGE_RATES
-  total: number
   status: BILL_STATUS
   additionalCosts: AdditionalCosts[]
 }
@@ -27,6 +26,7 @@ const BillSchema = new mongoose.Schema<BillDocument>(
     booking: {
       type: mongoose.Schema.Types.ObjectId,
       ref: 'Booking',
+      unique: true,
       required: true,
     },
     milageStart: {
@@ -57,7 +57,7 @@ const BillSchema = new mongoose.Schema<BillDocument>(
     rate: {
       type: String,
       enum: Object.values(MILAGE_RATES),
-      default: MILAGE_RATES.EXTERN_UP_TO_200,
+      default: MILAGE_RATES.EXTERN_LTE_200,
       required: true,
     },
     additionalCosts: [
@@ -66,17 +66,17 @@ const BillSchema = new mongoose.Schema<BillDocument>(
         value: { type: Number, required: true },
       },
     ],
-    total: {
-      type: Number,
-      required: true,
-    },
     status: {
       type: String,
       enum: Object.values(BILL_STATUS),
       default: BILL_STATUS.UNINVOICED,
     },
   },
-  { timestamps: true, collation: { locale: 'de', strength: 1 } }
+  {
+    timestamps: true,
+    toJSON: { virtuals: true, getters: true },
+    toObject: { virtuals: true, getters: true },
+  }
 )
 
 BillSchema.virtual('milage').get(function () {
@@ -87,7 +87,8 @@ BillSchema.virtual('milage').get(function () {
 BillSchema.virtual('total').get(function () {
   const bill = this as BillDocument
 
-  const milageCosts = bill.milage * bill.rate
+  const milageCosts =
+    Math.round(bill.milage * getMilageRateValue(bill.rate) * 100) / 100
   const additionalCostSum = bill.additionalCosts
     .map(({ value }) => value)
     .reduce((acc, value) => acc + value, 0)

db/enums.ts

@@ -12,12 +12,27 @@ export enum BILL_STATUS {
 }
 
 export enum MILAGE_RATES {
-  INTERN_UP_TO_200 = 0.37,
+  INTERN_LTE_200 = 'intern_lte_200_km',
-  INTERN_200_1000 = 0.22,
+  INTERN_200_1000 = 'intern_201_1000_km',
-  INTERN_1001_2000 = 0.15,
+  INTERN_1001_2000 = 'intern_1001_2000_km',
-  INTERN_OVER_2000 = 0.13,
+  INTERN_GTE_2001 = 'intern_gte_2001_km',
-  EXTERN_UP_TO_200 = 0.42,
+  EXTERN_LTE_200 = 'extern_lte_200_km',
-  EXTERN_200_1000 = 0.25,
+  EXTERN_200_1000 = 'extern_201_1000_km',
-  EXTERN_1001_2000 = 0.2,
+  EXTERN_1001_2000 = 'extern_1001_2000_km',
-  EXTERN_OVER_2000 = 0.18,
+  EXTERN_GTE_2001 = 'extern_gte_2001_km',
+}
+
+const rates = {
+  [MILAGE_RATES.INTERN_LTE_200]: 0.37,
+  [MILAGE_RATES.INTERN_200_1000]: 0.22,
+  [MILAGE_RATES.INTERN_1001_2000]: 0.15,
+  [MILAGE_RATES.INTERN_GTE_2001]: 0.13,
+  [MILAGE_RATES.EXTERN_LTE_200]: 0.42,
+  [MILAGE_RATES.EXTERN_200_1000]: 0.25,
+  [MILAGE_RATES.EXTERN_1001_2000]: 0.2,
+  [MILAGE_RATES.EXTERN_GTE_2001]: 0.18,
+}
+
+export function getMilageRateValue(milageRate: MILAGE_RATES): number {
+  return rates[milageRate]
 }

db/index.ts

@@ -86,12 +86,15 @@ export async function createBooking({
 
 export async function createBill(bookingUUID: string, billData: BillDocument) {
   await connect()
-  const bill = new Bill(billData)
-
   const booking = await getBookingByUUID(bookingUUID)
-  bill.booking = booking._id
+  const bill =
+    (await Bill.findOne({ booking: booking._id })) ||
+    new Bill({ booking: booking._id })
+
+  bill.set(billData)
 
   await bill.save()
   await bill.populate('booking').execPopulate()
+
   return bill.toJSON()
 }

pages/booking/[uuid]/bill.tsx

@@ -3,9 +3,13 @@ import React, { useEffect, useState } from 'react'
 import Footer from '../../../components/footer'
 import Header from '../../../components/header'
 import Input from '../../../components/wizard/input'
-import { BillDocument } from '../../../db/bill'
+import Bill, { AdditionalCosts, BillDocument } from '../../../db/bill'
 import { BookingDocument } from '../../../db/booking'
-import { BOOKING_STATUS, MILAGE_RATES } from '../../../db/enums'
+import {
+  BILL_STATUS,
+  MILAGE_RATES,
+  getMilageRateValue,
+} from '../../../db/enums'
 import { getBookingByUUID } from '../../../db/index'
 import { dateFormatFrontend } from '../../../helpers/date'
 
@@ -22,30 +26,64 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     res.end()
     return { props: {} }
   }
+  const bill =
+    (await Bill.findOne({ booking: booking._id })) ||
+    new Bill({ booking: booking._id })
 
   // TODO: hack, not sure why _id is not serilizable
   const bookingJSON = JSON.parse(JSON.stringify(booking.toJSON()))
+  const billJSON = JSON.parse(JSON.stringify(bill?.toJSON()))
   return {
-    props: { booking: bookingJSON },
+    props: { booking: bookingJSON, bill: billJSON },
   }
 }
 
-function getBookingStatus(booking: BookingDocument) {
+function getRateLabel(rate: MILAGE_RATES) {
-  switch (booking.status) {
+  switch (rate) {
-    case BOOKING_STATUS.REQUESTED:
+    case MILAGE_RATES.INTERN_LTE_200:
-      return 'In Bearbeitung'
+      return 'Intern bis zu 200km'
-    case BOOKING_STATUS.CONFIRMED:
+    case MILAGE_RATES.INTERN_200_1000:
-      return 'Best�tigt'
+      return 'Intern 200-1.000km'
-    case BOOKING_STATUS.REJECTED:
+    case MILAGE_RATES.INTERN_1001_2000:
-      return 'Abgewiesen'
+      return 'Intern 1.001-2.000km'
-    case BOOKING_STATUS.CANCELED:
+    case MILAGE_RATES.INTERN_GTE_2001:
-      return 'Storniert'
+      return 'Intern ab 2.001km'
+    case MILAGE_RATES.EXTERN_LTE_200:
+      return 'Extern bis zu 200km'
+    case MILAGE_RATES.EXTERN_200_1000:
+      return 'Extern 200-1.000km'
+    case MILAGE_RATES.EXTERN_1001_2000:
+      return 'Extern 1.001-2.000km'
+    case MILAGE_RATES.EXTERN_GTE_2001:
+      return 'Extern ab 2.001km'
     default:
-      return 'Unbekannt - bitte kontaktieren Sie uns!'
+      return 'Keine'
   }
 }
 
-async function saveBill(booking: BookingDocument, bill: BillDocument) {
+function getBillStatusLabel(status: BILL_STATUS) {
+  switch (status) {
+    case BILL_STATUS.UNINVOICED:
+      return 'Nicht gestellt'
+    case BILL_STATUS.INVOICED:
+      return 'Gestellt'
+    case BILL_STATUS.PAID:
+      return 'Bezahlt'
+    default:
+      return 'Unbekannt!!!'
+  }
+}
+
+async function saveBill(
+  booking: BookingDocument,
+  bill: {
+    milageStart: number
+    milageEnd: number
+    milage?: number
+    rate: MILAGE_RATES
+    additionalCosts?: AdditionalCosts[]
+  }
+) {
   const response = await fetch(`/api/booking/${booking.uuid}/bill/`, {
     method: 'POST',
     mode: 'cors',
@@ -60,21 +98,28 @@ async function saveBill(booking: BookingDocument, bill: BillDocument) {
   return response.json()
 }
 
-export default function Bill({
+export default function BillPage({
   booking: bookingProp,
+  bill: billProp,
 }: {
   booking: BookingDocument
+  bill: BillDocument
 }) {
   const [booking, setBooking] = useState(bookingProp)
-  const [milageStart, setMilageStart] = useState(0)
+  const [bill, setBill] = useState(billProp)
-  const [milageEnd, setMilageEnd] = useState(0)
+  const [milageStart, setMilageStart] = useState(bill.milageStart)
-  const [rate, setRate] = useState(MILAGE_RATES.EXTERN_UP_TO_200)
+  const [milageEnd, setMilageEnd] = useState(bill.milageEnd)
+  const [rate, setRate] = useState(bill.rate)
+  const [status, setStatus] = useState(bill.status)
   const milage =
     (0 < milageStart && milageStart < milageEnd && milageEnd - milageStart) || 0
-  const total = (milage && rate && milage * rate) || 0
+  const total =
+    Math.round(milage && rate && milage * getMilageRateValue(rate) * 100) /
+      100 || 0
 
   // in case the props change, update the internal state
   useEffect(() => setBooking(bookingProp), [bookingProp])
+  useEffect(() => setBill(billProp), [billProp])
 
   return (
     <div className="mx-3 flex flex-col min-h-screen">
@@ -89,14 +134,10 @@ export default function Bill({
               milageStart,
               milageEnd,
               milage,
-              total,
               rate: MILAGE_RATES[rate],
             })
           }}
         >
-          <div>
-            <strong>Buchungsstatus:</strong> {getBookingStatus(booking)}
-          </div>
           <div>
             <strong>Buchungszeitraum:</strong>{' '}
             {dateFormatFrontend(new Date(booking.startDate))} -{' '}
@@ -134,34 +175,50 @@ export default function Bill({
                   <select
                     className="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                     id="rate"
+                    value={rate}
                     onChange={(
                       e: React.ChangeEvent<React.ElementRef<'select'>>
-                    ) => setRate(Number(e.target.value))}
+                    ) => setRate(MILAGE_RATES[e.target.value])}
                   >
-                    <option value={MILAGE_RATES.INTERN_UP_TO_200}>
+                    {Object.values(MILAGE_RATES).map((rate) => {
-                      Intern bis 200 ({MILAGE_RATES.INTERN_UP_TO_200})
+                      return (
-                    </option>
+                        <option value={rate} key={rate}>
-                    <option value={MILAGE_RATES.INTERN_200_1000}>
+                          {getRateLabel(rate)} ({getMilageRateValue(rate)} EUR)
-                      Intern 200-1000 ({MILAGE_RATES.INTERN_200_1000})
+                        </option>
-                    </option>
+                      )
-                    <option value={MILAGE_RATES.INTERN_1001_2000}>
+                    })}
-                      Intern 1001-2000 ({MILAGE_RATES.INTERN_1001_2000})
+                  </select>
-                    </option>
+                  <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
-                    <option value={MILAGE_RATES.INTERN_OVER_2000}>
+                    <svg
-                      Intern ab 2001 ({MILAGE_RATES.INTERN_OVER_2000})
+                      className="fill-current h-4 w-4"
-                    </option>
+                      xmlns="http://www.w3.org/2000/svg"
-                    <option value={MILAGE_RATES.EXTERN_UP_TO_200}>
+                      viewBox="0 0 20 20"
-                      Extern bis 200 ({MILAGE_RATES.EXTERN_UP_TO_200})
+                    >
-                    </option>
+                      <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
-                    <option value={MILAGE_RATES.EXTERN_200_1000}>
+                    </svg>
-                      Extern 200-1000 ({MILAGE_RATES.EXTERN_200_1000})
+                  </div>
-                    </option>
+                </div>
-                    <option value={MILAGE_RATES.EXTERN_1001_2000}>
+              </div>
-                      Extern 1001-2000 ({MILAGE_RATES.EXTERN_1001_2000})
+            </div>
-                    </option>
+            <div className="fsw">
-                    <option value={MILAGE_RATES.EXTERN_OVER_2000}>
+              <div className="fs">
-                      Extern ab 2001 ({MILAGE_RATES.EXTERN_OVER_2000})
+                <label className="flabel">Status</label>
-                    </option>
+                <div className="relative">
+                  <select
+                    className="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
+                    id="rate"
+                    value={status}
+                    onChange={(
+                      e: React.ChangeEvent<React.ElementRef<'select'>>
+                    ) => setStatus(BILL_STATUS[e.target.value])}
+                  >
+                    {Object.values(BILL_STATUS).map((status) => {
+                      return (
+                        <option value={status} key={status}>
+                          {getBillStatusLabel(status)}
+                        </option>
+                      )
+                    })}
                   </select>
                   <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                     <svg