prettier all the things

2026-03-03 06:27:11 +01:00 · 2022-02-19 23:18:49 +01:00
parent 4b918af23e
commit 9886cf29d2
28 changed files with 433 additions and 428 deletions
--- a/components/book/dateSelect.tsx
+++ b/components/book/dateSelect.tsx
@@ -19,34 +19,34 @@ export default function DateSelect() {
          onChange={onChange}
          className="my-6 max-w-lg"
        />
-        </InputWrapper>
-        <div className="flex flex-wrap -mx-3 mb-2">
-          <div className="w-full md:w-2/5 px-3 mb-2 md:mb-0">
-            <Input
-              label="Von"
-              type="date"
-              className=""
-              name="startDate"
-              value={startDate || ''}
-              onChange={onChangeEvent}
-              min={today}
-              required
-            />
-          </div>
-          <div className="w-full md:w-2/5 px-3 mb-2 md:mb-0">
-            <Input
-              required
-              label="Bis"
-              type="date"
-              className=""
-              name="endDate"
-              value={endDate || ''}
-              placeholder="Von"
-              onChange={onChangeEvent}
-              min={startDate || today}
-            />
-          </div>
+      </InputWrapper>
+      <div className="flex flex-wrap -mx-3 mb-2">
+        <div className="w-full md:w-2/5 px-3 mb-2 md:mb-0">
+          <Input
+            label="Von"
+            type="date"
+            className=""
+            name="startDate"
+            value={startDate || ''}
+            onChange={onChangeEvent}
+            min={today}
+            required
+          />
        </div>
+        <div className="w-full md:w-2/5 px-3 mb-2 md:mb-0">
+          <Input
+            required
+            label="Bis"
+            type="date"
+            className=""
+            name="endDate"
+            value={endDate || ''}
+            placeholder="Von"
+            onChange={onChangeEvent}
+            min={startDate || today}
+          />
+        </div>
+      </div>
    </>
  )
 }
--- a/components/book/index.tsx
+++ b/components/book/index.tsx
@@ -22,7 +22,10 @@ function BookForm() {
        {dataStoredLoaded && (
          <p className="mb-6 info-message">
            Buchungsdaten wurden aus Deinem Browser geladen und vorausgefüllt.{' '}
-            <a className="font-medium text-blue-400 underline cursor-pointer hover:text-blue-600" onClick={forgetData}>
+            <a
+              className="font-medium text-blue-400 underline cursor-pointer hover:text-blue-600"
+              onClick={forgetData}
+            >
              Daten wieder vergessen
            </a>
          </p>
--- a/components/denied.tsx
+++ b/components/denied.tsx
@@ -9,7 +9,10 @@ export default function Denied() {
          onClick={(e) => {
            e.preventDefault()
            signIn()
-          }}>Melde dich an um diese Seite zu sehen.</a>
+          }}
+        >
+          Melde dich an um diese Seite zu sehen.
+        </a>
      </p>
    </>
  )
--- a/components/input.tsx
+++ b/components/input.tsx
@@ -7,10 +7,18 @@ type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
 }

 export default function Input(props: InputProps) {
-  const { label, name, required, type = 'text', className = "", ...rest } = props
+  const {
+    label,
+    name,
+    required,
+    type = 'text',
+    className = '',
+    ...rest
+  } = props

-  const defaultClasses = "appearance-none bg-gray-50 text-gray-500 border rounded py-2 px-3 mb-3 leading-tight disabled:bg-gray-200 disabled:cursor-not-allowed focus: outline-none focus:bg-white w-full"
-  const classes = `${defaultClasses} ${className}`;
+  const defaultClasses =
+    'appearance-none bg-gray-50 text-gray-500 border rounded py-2 px-3 mb-3 leading-tight disabled:bg-gray-200 disabled:cursor-not-allowed focus: outline-none focus:bg-white w-full'
+  const classes = `${defaultClasses} ${className}`

  return (
    <InputWrapper label={label} name={name} required={required}>
--- a/components/inputWrapper.tsx
+++ b/components/inputWrapper.tsx
@@ -13,7 +13,10 @@ export default function Input(props: {
    <>
      <div className="flex flex-wrap -mx-3 mb-2">
        <div className="w-full px-3 mb-2">
-          <label className="block uppercase tracking-wide text-gray-500 text-xs font-bold mb-2" htmlFor={name}>
+          <label
+            className="block uppercase tracking-wide text-gray-500 text-xs font-bold mb-2"
+            htmlFor={name}
+          >
            {label} {required && <Required />}
          </label>
          {children}
--- a/components/mdComponents.tsx
+++ b/components/mdComponents.tsx
@@ -1,32 +1,36 @@
 const H1 = (props: any) => (
-    <h1
-      className="pb-2 mt-6 mb-4 text-4xl font-semibold leading-tight border-b"
-      {...props}
-    />
-  )
+  <h1
+    className="pb-2 mt-6 mb-4 text-4xl font-semibold leading-tight border-b"
+    {...props}
+  />
+)
 const H2 = (props: any) => (
-    <h2
-      className="pb-2 mt-6 mb-4 text-2xl font-semibold leading-tight border-b"
-      {...props}
-    />
-  )
+  <h2
+    className="pb-2 mt-6 mb-4 text-2xl font-semibold leading-tight border-b"
+    {...props}
+  />
+)
 const H3 = (props: any) => (
-    <h3 className="mt-6 mb-4 text-lg font-semibold leading-snug" {...props} />
-  )
+  <h3 className="mt-6 mb-4 text-lg font-semibold leading-snug" {...props} />
+)
 const H4 = (props: any) => (
-    <h4 className="mt-6 mb-4 text-base font-semibold leading-none" {...props} />
-  )
+  <h4 className="mt-6 mb-4 text-base font-semibold leading-none" {...props} />
+)
 const H5 = (props: any) => (
-    <h5 className="mt-6 mb-4 text-sm font-semibold leading-tight" {...props} />
-  )
+  <h5 className="mt-6 mb-4 text-sm font-semibold leading-tight" {...props} />
+)
 const H6 = (props: any) => (
-    <h6
-      className="mt-6 mb-4 text-sm font-semibold leading-tight text-gray-600"
-      {...props}
-    />
-  )
-const UL = (props: any) => <ul className="pl-8 text-base list-disc" {...props} />
-const OL = (props: any) => <ol className="pl-8 text-base list-decimal" {...props} />
+  <h6
+    className="mt-6 mb-4 text-sm font-semibold leading-tight text-gray-600"
+    {...props}
+  />
+)
+const UL = (props: any) => (
+  <ul className="pl-8 text-base list-disc" {...props} />
+)
+const OL = (props: any) => (
+  <ol className="pl-8 text-base list-decimal" {...props} />
+)

 const MdComponents = {
  h1: H1,
@@ -39,4 +43,4 @@ const MdComponents = {
  ol: OL,
 }

-export default MdComponents;
+export default MdComponents
--- a/components/navigation.tsx
+++ b/components/navigation.tsx
@@ -5,7 +5,6 @@ import { useSession } from 'next-auth/react'

 import User from './user'

-
 const pathNameLabelMap = {
  '/login': 'Login',
  '/admin': 'Buchungsübersicht',
@@ -21,7 +20,7 @@ function getPathNameMap(route: string) {
 }

 export default function Navigation() {
-  const { data, status } = useSession();
+  const { data, status } = useSession()
  const router = useRouter()

  const pathname = router.pathname
--- a/components/user.tsx
+++ b/components/user.tsx
@@ -1,11 +1,10 @@
 import { useSession, signOut } from 'next-auth/react'

-
 export default function User() {
-  const { data, status } = useSession();
+  const { data, status } = useSession()

  if (status === 'loading' || !data?.user?.email) {
-    return null;
+    return null
  }

  return (
--- a/context/book.tsx
+++ b/context/book.tsx
@@ -34,9 +34,8 @@ type BookAction = {
  payload?: any
 }

-export const BookContext: React.Context<BookProvider> = React.createContext<
-  BookProvider
->(null)
+export const BookContext: React.Context<BookProvider> =
+  React.createContext<BookProvider>(null)

 export const ACTIONS = {
  SET_FORM_DATA: 'setFormData',
--- a/db/booking.ts
+++ b/db/booking.ts
@@ -22,8 +22,8 @@ export type Booking = {
  purpose?: string
  org?: string
  destination?: string
-  days?: string[],
-  calendarEventId: string,
+  days?: string[]
+  calendarEventId: string
 }

 export type BookingDocument = Booking &
@@ -128,37 +128,43 @@ BookingSchema.pre('save', async function (next: () => void): Promise<void> {

  if (!booking.calendarEventId) {
    // create calendar event before saving to database
-    await createCalendarEvent(booking);
-  } else if ([BOOKING_STATUS.CANCELED, BOOKING_STATUS.REJECTED].includes(booking.status)) {
+    await createCalendarEvent(booking)
+  } else if (
+    [BOOKING_STATUS.CANCELED, BOOKING_STATUS.REJECTED].includes(booking.status)
+  ) {
    // event has been canceled or rejected, delete calendar event again to free up the slot
-    await deleteCalendarEvent(booking);
+    await deleteCalendarEvent(booking)
  }

-  next();
-});
-
-BookingSchema.static('findBookedDays', async function (
-  uuidsToIngore: string[] = []
-): Promise<string[]> {
-  const model = this as BookingModel
-  const now = nowInTz()
-  const bookedDays = await model
-    .find(
-      {
-        status: { $in: [BOOKING_STATUS.REQUESTED, BOOKING_STATUS.CONFIRMED] },
-        uuid: { $nin: uuidsToIngore },
-        // dateFormatBackend uses YYYY-MM-DD, which is startOfDay anyway
-        endDate: { $gt: dateFormatBackend(now) },
-      },
-      'days'
-    )
-    .exec()
-
-  return bookedDays
-    .map((b) => b.days)
-    .flat()
-    .sort()
+  next()
 })

+BookingSchema.static(
+  'findBookedDays',
+  async function (uuidsToIngore: string[] = []): Promise<string[]> {
+    const model = this as BookingModel
+    const now = nowInTz()
+    const bookedDays = await model
+      .find(
+        {
+          status: { $in: [BOOKING_STATUS.REQUESTED, BOOKING_STATUS.CONFIRMED] },
+          uuid: { $nin: uuidsToIngore },
+          // dateFormatBackend uses YYYY-MM-DD, which is startOfDay anyway
+          endDate: { $gt: dateFormatBackend(now) },
+        },
+        'days'
+      )
+      .exec()
+
+    return bookedDays
+      .map((b) => b.days)
+      .flat()
+      .sort()
+  }
+)
+
 export default (mongoose.models.Booking ||
-  mongoose.model<BookingDocument, BookingModel>('Booking', BookingSchema)) as BookingModel
+  mongoose.model<BookingDocument, BookingModel>(
+    'Booking',
+    BookingSchema
+  )) as BookingModel
--- a/db/index.ts
+++ b/db/index.ts
@@ -5,7 +5,7 @@ import { BOOKING_STATUS } from './enums'

 let connectedPromise: Promise<mongoose.Mongoose>

-export const MONGO_URI = process.env.MONGO_URI;
+export const MONGO_URI = process.env.MONGO_URI

 export const MONGODB_OPTIONS = {
  useCreateIndex: true,
@@ -45,7 +45,9 @@ export async function getBookings({
  return await BookingModel.find({
    status: { $in: status },
    startDate: { $gte: startDateGreaterThan },
-  }).sort({ startDate: -1 }).exec()
+  })
+    .sort({ startDate: -1 })
+    .exec()
 }

 export async function createBooking({
--- a/helpers/ical.ts
+++ b/helpers/ical.ts
@@ -39,23 +39,26 @@ Buchungs-Link: ${getBaseURL()}/bookings/${booking.uuid}
 }

 export function generateBookedCalendar(bookings: Booking[]): string {
-  const events = bookings.map((booking): {
-    productId: string
-    calName: string
-    start: [number, number, number]
-    startOutputType: 'local' | 'utc'
-    duration: { days: number }
-    title: string
-    description: string
-    status: EventStatus
-  } => ({
-    productId: 'app.vercel.pfadi-bussle/ics',
-    calName: 'Pfadi-Bussle Buchungen',
-    start: convertDay(booking.days[0]),
-    startOutputType: 'local',
-    duration: { days: booking.days.length },
-    title: `Buchung ${booking.name}`,
-    description: `Name: ${booking.name}
+  const events = bookings.map(
+    (
+      booking
+    ): {
+      productId: string
+      calName: string
+      start: [number, number, number]
+      startOutputType: 'local' | 'utc'
+      duration: { days: number }
+      title: string
+      description: string
+      status: EventStatus
+    } => ({
+      productId: 'app.vercel.pfadi-bussle/ics',
+      calName: 'Pfadi-Bussle Buchungen',
+      start: convertDay(booking.days[0]),
+      startOutputType: 'local',
+      duration: { days: booking.days.length },
+      title: `Buchung ${booking.name}`,
+      description: `Name: ${booking.name}
 Zeitraum: ${daysFormatFrontend(booking.days)}

 Email: ${booking.email}
@@ -63,11 +66,12 @@ Telefon: ${booking.phone}

 Link: ${getBaseURL()}/admin/bookings/${booking.uuid}
 `,
-    status:
-      booking.status === BOOKING_STATUS.CONFIRMED
-        ? ('CONFIRMED' as EventStatus)
-        : ('TENTATIVE' as EventStatus),
-  }))
+      status:
+        booking.status === BOOKING_STATUS.CONFIRMED
+          ? ('CONFIRMED' as EventStatus)
+          : ('TENTATIVE' as EventStatus),
+    })
+  )

  const { error, value } = createEvents(events)

--- a/lib/getServerSideProps.ts
+++ b/lib/getServerSideProps.ts
@@ -14,23 +14,22 @@ export type ServerSideRecentBooking = {
  }
 }

-export const getServerSideRecentBookings = async (): Promise<
-  ServerSideRecentBooking
-> => {
-  const bookings = await getBookings({
-    startDateGreaterThan: startOfYear(nowInTz()).toISOString(),
-  })
+export const getServerSideRecentBookings =
+  async (): Promise<ServerSideRecentBooking> => {
+    const bookings = await getBookings({
+      startDateGreaterThan: startOfYear(nowInTz()).toISOString(),
+    })

-  // TODO: hack, not sure why _id is not serilizable
-  const bookingsJSON = JSON.parse(
-    JSON.stringify(bookings.map((b) => b.toJSON()))
-  ) as object[]
-  return {
-    props: {
-      bookings: bookingsJSON,
-    },
+    // TODO: hack, not sure why _id is not serilizable
+    const bookingsJSON = JSON.parse(
+      JSON.stringify(bookings.map((b) => b.toJSON()))
+    ) as object[]
+    return {
+      props: {
+        bookings: bookingsJSON,
+      },
+    }
  }
-}

 export const getServerSideBooking = async (
  context: any
--- a/lib/googlecalendar.ts
+++ b/lib/googlecalendar.ts
@@ -1,46 +1,44 @@
+import { google } from 'googleapis'
+import { Booking } from '../db/booking'

-import {google} from 'googleapis';
-import { Booking } from '../db/booking';
-
-const keyFile = process.env.GOOGLE_SERVICE_ACCOUNT_KEY_FILE;
-const calendarId = process.env.GOOGLE_CALENDAR_ID;
+const keyFile = process.env.GOOGLE_SERVICE_ACCOUNT_KEY_FILE
+const calendarId = process.env.GOOGLE_CALENDAR_ID

 const auth = new google.auth.GoogleAuth({
  keyFile,
  scopes: [
    'https://www.googleapis.com/auth/calendar',
-    'https://www.googleapis.com/auth/calendar.readonly'
+    'https://www.googleapis.com/auth/calendar.readonly',
  ],
-});
+})

 const calendar = google.calendar({
  version: 'v3',
  auth,
-});
+})

 export async function getNewEvents() {
  const { data } = await calendar.events.list({
    calendarId,
-    timeMin: new Date().toISOString()}
-  );
+    timeMin: new Date().toISOString(),
+  })

-  return data.items;
+  return data.items
 }

-function getSummary(booking: Partial<Booking>) : string {
-  let summary = "";
+function getSummary(booking: Partial<Booking>): string {
+  let summary = ''

  if (booking.org) {
-    summary += `${booking.org} - `;
+    summary += `${booking.org} - `
  }

-  summary += booking.name;
+  summary += booking.name

-  return summary;
+  return summary
 }

-export async function createCalendarEvent(booking : Booking) : Promise<Booking> {
-
+export async function createCalendarEvent(booking: Booking): Promise<Booking> {
  const response = await calendar.events.insert({
    auth,
    calendarId,
@@ -49,12 +47,12 @@ export async function createCalendarEvent(booking : Booking) : Promise<Booking>
      // description,
      start: { date: booking.startDate },
      end: { date: booking.endDate },
-    }
-  });
+    },
+  })

-  booking.calendarEventId = response.data.id;
+  booking.calendarEventId = response.data.id

-  return booking;
+  return booking
 }

 export async function deleteCalendarEvent(booking: Booking) {
@@ -62,9 +60,9 @@ export async function deleteCalendarEvent(booking: Booking) {
    auth,
    calendarId,
    eventId: booking.calendarEventId,
-  });
+  })

-  booking.calendarEventId = null;
+  booking.calendarEventId = null
 }

 //export async function patchCalendarEvent(booking: { calendarEventId: string } & Partial<Booking> ) : Promise<Booking> {
@@ -76,4 +74,3 @@ export async function deleteCalendarEvent(booking: Booking) {
 //
 //  return booking;
 //}
-
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,6 +1,6 @@
-import { useEffect } from 'react';
+import { useEffect } from 'react'

-import { useSession, signIn, SessionProvider } from "next-auth/react"
+import { useSession, signIn, SessionProvider } from 'next-auth/react'
 import '../styles/index.css'

 function Auth({ children }) {
@@ -21,8 +21,10 @@ function Auth({ children }) {
  return <div>Loading...</div>
 }

-export default function MyApp({ Component, pageProps: { session, ...pageProps } }) {
-
+export default function MyApp({
+  Component,
+  pageProps: { session, ...pageProps },
+}) {
  return (
    <div className="flex flex-col min-h-screen">
      <SessionProvider session={session}>
@@ -37,4 +39,3 @@ export default function MyApp({ Component, pageProps: { session, ...pageProps }
    </div>
  )
 }
-
--- a/pages/admin/bookings/[uuid]/bill.tsx
+++ b/pages/admin/bookings/[uuid]/bill.tsx
@@ -18,7 +18,7 @@ export const getServerSideProps = async (context) => {
      ...serverSideBookingProps.props,
      milageMax,
    },
-  };
+  }
 }

 const milageTarifOptions = Object.values(MILAGE_TARIFS).map((tarif) => {
@@ -134,135 +134,133 @@ function BookingBillPage({

  return (
    <Layout>
-        {booking && (
-          <form className="w-full" onSubmit={onSubmit}>
-            <div>
-              <strong>Buchungszeitraum:</strong>{' '}
-              {daysFormatFrontend(booking.days)}
-            </div>
-            <div>
-              <strong>Bucher:</strong> {booking.name}
-            </div>
-            <div>
-              <strong>Buchungsstatus:</strong>{' '}
-              {getBookingStatus(booking.status)}
-            </div>
-            <div>
-              <Input
-                label="Anfangskilometer"
-                name="milageStart"
-                required
-                value={milageStart}
-                type="number"
-                onChange={(e: React.ChangeEvent<React.ElementRef<'input'>>) =>
-                  setMilageStart(Number(e.target.value))
-                }
-              />
-              <Input
-                label="Endkilometer"
-                name="milageEnd"
-                required
-                value={milageEnd}
-                type="number"
-                onChange={(e: React.ChangeEvent<React.ElementRef<'input'>>) =>
-                  setMilageEnd(Number(e.target.value))
-                }
-              />
-              <Input label="Gefahren" name="milage" readOnly value={milage} />
-              <Select
-                label="Rate"
-                name="tarif"
-                value={tarif}
-                onChange={(e) => setTarif(e.target.value as MILAGE_TARIFS)}
-              >
-                {milageTarifOptions}
-              </Select>
-              <div className="mb-3">
-                <button
-                  className="ibtn btn-gray mr-3"
-                  onClick={onAddAdditionalCost}
-                  title="Zusätzliche Kosten hinzufügen"
-                >
-                  +
-                </button>
-                <label className="flabel inline">Zusätzliche Kosten</label>
-              </div>
-              {additionalCosts.map((_, index) => {
-                return (
-                  <>
-                    <div className="mb-3" key={`label${index}`}>
-                      <button
-                        className="ibtn btn-gray mr-3"
-                        onClick={(event) =>
-                          onRemoveAdditionalCost(event, index)
-                        }
-                        title="Entfernen"
-                      >
-                        -
-                      </button>
-                      <label className="flabel inline">{`Kostenpunkt ${index + 1
-                        }`}</label>
-                    </div>
-                    <div className="ml-10 mb-3" key={`input{index}`}>
-                      <Input
-                        label={`Name`}
-                        name={`additionalCostName${index}`}
-                        key={`additionalCostName${index}`}
-                        value={additionalCosts[index].name}
-                        onChange={(event) => {
-                          const newAdditonalCosts = [...additionalCosts]
-                          newAdditonalCosts[index] = {
-                            value: newAdditonalCosts[index].value,
-                            name: event.target.value,
-                          }
-                          setAdditionalCosts(newAdditonalCosts)
-                        }}
-                      />
-                      <Input
-                        label={`Betrag`}
-                        name={`additionalCostValue${index}`}
-                        key={`additionalCostValue${index}`}
-                        value={additionalCosts[index].value}
-                        type="number"
-                        onChange={(event) => {
-                          const newAdditonalCosts = [...additionalCosts]
-                          newAdditonalCosts[index] = {
-                            name: newAdditonalCosts[index].name,
-                            value: Number(event.target.value),
-                          }
-                          setAdditionalCosts(newAdditonalCosts)
-                        }}
-                      />
-                    </div>
-                  </>
-                )
-              })}
-              <Input label="Summe" name="total" readOnly value={total} />
-            </div>
+      {booking && (
+        <form className="w-full" onSubmit={onSubmit}>
+          <div>
+            <strong>Buchungszeitraum:</strong>{' '}
+            {daysFormatFrontend(booking.days)}
+          </div>
+          <div>
+            <strong>Bucher:</strong> {booking.name}
+          </div>
+          <div>
+            <strong>Buchungsstatus:</strong> {getBookingStatus(booking.status)}
+          </div>
+          <div>
+            <Input
+              label="Anfangskilometer"
+              name="milageStart"
+              required
+              value={milageStart}
+              type="number"
+              onChange={(e: React.ChangeEvent<React.ElementRef<'input'>>) =>
+                setMilageStart(Number(e.target.value))
+              }
+            />
+            <Input
+              label="Endkilometer"
+              name="milageEnd"
+              required
+              value={milageEnd}
+              type="number"
+              onChange={(e: React.ChangeEvent<React.ElementRef<'input'>>) =>
+                setMilageEnd(Number(e.target.value))
+              }
+            />
+            <Input label="Gefahren" name="milage" readOnly value={milage} />
            <Select
-              label="Status"
-              name={status}
-              value={status}
-              onChange={(e) => setStatus(e.target.value as BILL_STATUS)}
+              label="Rate"
+              name="tarif"
+              value={tarif}
+              onChange={(e) => setTarif(e.target.value as MILAGE_TARIFS)}
            >
-              {billStatusOptions}
+              {milageTarifOptions}
            </Select>
-            {storingError && (
-              <div className="error-message flex-grow mt-6">{storingError}</div>
-            )}
-            <button
-              type="submit"
-              className="btn btn-blue mt-3"
-              disabled={storingInProgress}
-            >
-              Rechnung {!!booking.bill ? 'Updaten' : 'Erstellen'}
-            </button>
-          </form>
-        )}
+            <div className="mb-3">
+              <button
+                className="ibtn btn-gray mr-3"
+                onClick={onAddAdditionalCost}
+                title="Zusätzliche Kosten hinzufügen"
+              >
+                +
+              </button>
+              <label className="flabel inline">Zusätzliche Kosten</label>
+            </div>
+            {additionalCosts.map((_, index) => {
+              return (
+                <>
+                  <div className="mb-3" key={`label${index}`}>
+                    <button
+                      className="ibtn btn-gray mr-3"
+                      onClick={(event) => onRemoveAdditionalCost(event, index)}
+                      title="Entfernen"
+                    >
+                      -
+                    </button>
+                    <label className="flabel inline">{`Kostenpunkt ${
+                      index + 1
+                    }`}</label>
+                  </div>
+                  <div className="ml-10 mb-3" key={`input{index}`}>
+                    <Input
+                      label={`Name`}
+                      name={`additionalCostName${index}`}
+                      key={`additionalCostName${index}`}
+                      value={additionalCosts[index].name}
+                      onChange={(event) => {
+                        const newAdditonalCosts = [...additionalCosts]
+                        newAdditonalCosts[index] = {
+                          value: newAdditonalCosts[index].value,
+                          name: event.target.value,
+                        }
+                        setAdditionalCosts(newAdditonalCosts)
+                      }}
+                    />
+                    <Input
+                      label={`Betrag`}
+                      name={`additionalCostValue${index}`}
+                      key={`additionalCostValue${index}`}
+                      value={additionalCosts[index].value}
+                      type="number"
+                      onChange={(event) => {
+                        const newAdditonalCosts = [...additionalCosts]
+                        newAdditonalCosts[index] = {
+                          name: newAdditonalCosts[index].name,
+                          value: Number(event.target.value),
+                        }
+                        setAdditionalCosts(newAdditonalCosts)
+                      }}
+                    />
+                  </div>
+                </>
+              )
+            })}
+            <Input label="Summe" name="total" readOnly value={total} />
+          </div>
+          <Select
+            label="Status"
+            name={status}
+            value={status}
+            onChange={(e) => setStatus(e.target.value as BILL_STATUS)}
+          >
+            {billStatusOptions}
+          </Select>
+          {storingError && (
+            <div className="error-message flex-grow mt-6">{storingError}</div>
+          )}
+          <button
+            type="submit"
+            className="btn btn-blue mt-3"
+            disabled={storingInProgress}
+          >
+            Rechnung {!!booking.bill ? 'Updaten' : 'Erstellen'}
+          </button>
+        </form>
+      )}
    </Layout>
  )
 }

-BookingBillPage.auth = true;
+BookingBillPage.auth = true

-export default BookingBillPage;
+export default BookingBillPage
--- a/pages/admin/bookings/[uuid]/index.tsx
+++ b/pages/admin/bookings/[uuid]/index.tsx
@@ -9,13 +9,9 @@ import { getBookingStatus, patchBooking } from '../../../../helpers/booking'
 import { daysFormatFrontend } from '../../../../helpers/date'
 import { BOOKING_STATUS } from '../../../../db/enums'

-export const getServerSideProps = getServerSideBooking;
+export const getServerSideProps = getServerSideBooking

-function ShowBookingAdmin({
-  booking: bookingProp,
-}: {
-  booking: Booking
-}) {
+function ShowBookingAdmin({ booking: bookingProp }: { booking: Booking }) {
  const router = useRouter()
  const [booking, setBooking] = useState(bookingProp)
  const [storingBooking, setStoringBooking] = useState(false)
@@ -41,43 +37,43 @@ function ShowBookingAdmin({

  return (
    <Layout>
-        <h2 className="text-3xl">Buchung {booking.uuid}</h2>
-        <Calendar start={booking.startDate} end={booking.endDate} />
-        <div>
-          <strong>Buchungszeitraum:</strong> {daysFormatFrontend(booking.days)}
-        </div>
-        <div>
-          <strong>Bucher:</strong> {booking.name}
-        </div>
-        <div>
-          <strong>Buchungsstatus:</strong> {getBookingStatus(booking.status)}
-        </div>
-        {storingBookingError && (
-          <div className="error-message flex-grow">{storingBookingError}</div>
-        )}
-        <div className="my-6">
-          <button
-            onClick={() => onStoreBooking(true)}
-            className="btn btn-blue"
-            disabled={storingBooking}
-          >
-            Buchung Bestätigen
-          </button>
-          <button
-            onClick={() => onStoreBooking(false)}
-            className="btn btn-red"
-            disabled={storingBooking}
-          >
-            Buchung Abweisen
-          </button>
-          <Link href={`${router.asPath}/bill`}>
-            <a className="btn btn-gray">Rechnung</a>
-          </Link>
-        </div>
+      <h2 className="text-3xl">Buchung {booking.uuid}</h2>
+      <Calendar start={booking.startDate} end={booking.endDate} />
+      <div>
+        <strong>Buchungszeitraum:</strong> {daysFormatFrontend(booking.days)}
+      </div>
+      <div>
+        <strong>Bucher:</strong> {booking.name}
+      </div>
+      <div>
+        <strong>Buchungsstatus:</strong> {getBookingStatus(booking.status)}
+      </div>
+      {storingBookingError && (
+        <div className="error-message flex-grow">{storingBookingError}</div>
+      )}
+      <div className="my-6">
+        <button
+          onClick={() => onStoreBooking(true)}
+          className="btn btn-blue"
+          disabled={storingBooking}
+        >
+          Buchung Bestätigen
+        </button>
+        <button
+          onClick={() => onStoreBooking(false)}
+          className="btn btn-red"
+          disabled={storingBooking}
+        >
+          Buchung Abweisen
+        </button>
+        <Link href={`${router.asPath}/bill`}>
+          <a className="btn btn-gray">Rechnung</a>
+        </Link>
+      </div>
    </Layout>
  )
 }

-ShowBookingAdmin.auth = true;
+ShowBookingAdmin.auth = true

-export default ShowBookingAdmin;
+export default ShowBookingAdmin
--- a/pages/admin/index.tsx
+++ b/pages/admin/index.tsx
@@ -1,20 +1,20 @@
 import React from 'react'
 import Link from 'next/link'
 import { useSession } from 'next-auth/react'
-import Layout from '../../components/layout';
-import Denied from '../../components/denied';
+import Layout from '../../components/layout'
+import Denied from '../../components/denied'
 import { daysFormatFrontend } from '../../helpers/date'

 import { getServerSideRecentBookings } from '../../lib/getServerSideProps'

-export const getServerSideProps = getServerSideRecentBookings;
+export const getServerSideProps = getServerSideRecentBookings

 function AdminRecentBookings({ bookings }) {
-  const { data: session, status}  = useSession();
+  const { data: session, status } = useSession()

-  if (typeof window !== 'undefined' && status === "loading") return null;
+  if (typeof window !== 'undefined' && status === 'loading') return null

-  if (!bookings) return null;
+  if (!bookings) return null

  return (
    <Layout>
@@ -71,4 +71,4 @@ function AdminRecentBookings({ bookings }) {

 AdminRecentBookings.auth = true

-export default AdminRecentBookings;
+export default AdminRecentBookings
--- a/pages/api/auth/[...nextauth].ts
+++ b/pages/api/auth/[...nextauth].ts
@@ -1,20 +1,20 @@
 import { NextApiRequest, NextApiResponse } from 'next'
-import NextAuth from "next-auth"
-import EmailProvider from "next-auth/providers/email"
+import NextAuth from 'next-auth'
+import EmailProvider from 'next-auth/providers/email'

-import { MongoDBAdapter } from "@next-auth/mongodb-adapter"
-import { MONGO_URI, MONGODB_OPTIONS } from "../../../db"
-import { MongoClient } from "mongodb";
+import { MongoDBAdapter } from '@next-auth/mongodb-adapter'
+import { MONGO_URI, MONGODB_OPTIONS } from '../../../db'
+import { MongoClient } from 'mongodb'

-let client: MongoClient;
+let client: MongoClient

 async function getMongoClient() {
  if (!client) {
-    client = new MongoClient(MONGO_URI, MONGODB_OPTIONS);
-    await client.connect();
+    client = new MongoClient(MONGO_URI, MONGODB_OPTIONS)
+    await client.connect()
  }

-  return client;
+  return client
 }

 export default async function auth(req: NextApiRequest, res: NextApiResponse) {
@@ -24,17 +24,15 @@ export default async function auth(req: NextApiRequest, res: NextApiResponse) {
    providers: [
      EmailProvider({
        server: {
-          host: "smtp.sendgrid.net",
+          host: 'smtp.sendgrid.net',
          port: 587,
          auth: {
-            user: "apikey",
+            user: 'apikey',
            pass: process.env.SENDGRID_API_KEY,
          },
        },
-        from: process.env.FROM_EMAIL
+        from: process.env.FROM_EMAIL,
      }),
    ],
  })
 }
-
-
--- a/pages/api/bookings/[uuid]/bill.ts
+++ b/pages/api/bookings/[uuid]/bill.ts
@@ -2,7 +2,6 @@ import { Bill } from '../../../../db/bill'
 import { createBill, patchBill } from '../../../../db/index'

 export default async function billHandler(req, res): Promise<void> {
-
  const {
    method,
    query: { uuid: uuids },
--- a/pages/bookings/[uuid]/index.tsx
+++ b/pages/bookings/[uuid]/index.tsx
@@ -41,28 +41,28 @@ export default function ShowBooking({

  return (
    <Layout>
-        <div>
-          <strong>Buchungsstatus:</strong> {getBookingStatus(booking.status)}
+      <div>
+        <strong>Buchungsstatus:</strong> {getBookingStatus(booking.status)}
+      </div>
+      <div>
+        <strong>Buchungszeitraum:</strong> {daysFormatFrontend(booking.days)}
+      </div>
+      {storingBookingError && (
+        <div className="error-message flex-grow">{storingBookingError}</div>
+      )}
+      {[BOOKING_STATUS.CONFIRMED, BOOKING_STATUS.REQUESTED].includes(
+        booking.status
+      ) && (
+        <div className="my-6">
+          <button
+            onClick={onCancelBooking}
+            className="btn btn-red"
+            disabled={storingBooking}
+          >
+            Buchung Stornieren
+          </button>
        </div>
-        <div>
-          <strong>Buchungszeitraum:</strong> {daysFormatFrontend(booking.days)}
-        </div>
-        {storingBookingError && (
-          <div className="error-message flex-grow">{storingBookingError}</div>
-        )}
-        {[BOOKING_STATUS.CONFIRMED, BOOKING_STATUS.REQUESTED].includes(
-          booking.status
-        ) && (
-          <div className="my-6">
-            <button
-              onClick={onCancelBooking}
-              className="btn btn-red"
-              disabled={storingBooking}
-            >
-              Buchung Stornieren
-            </button>
-          </div>
-        )}
-      </Layout>
+      )}
+    </Layout>
  )
 }
--- a/pages/bookings/[uuid]/stored.tsx
+++ b/pages/bookings/[uuid]/stored.tsx
@@ -20,37 +20,38 @@ export default function ShowBookingStored({ booking }: { booking: Booking }) {

  return (
    <Layout>
-        <h3 className="thanks mb-3 mt-6 text-lg">Vielen Dank für die Buchungsanfrage</h3>
-        <p className="mb-6">
-          Nach Prüfung bestätigen wir die Buchung zeitnah per E-Mail.
-        </p>
-        <p>
-          Den{' '}
-          <Link href={`/bookings/${booking.uuid}`}>
-            <a className="link underline">Link</a>
-          </Link>{' '}
-          zur Buchung schicken wir Dir auch per E-Mail. Dort kann die Buchung
-          auch jederzeit storniert werden.
-        </p>
-        {!storedBookingData && !bookingDataStored && (
-          <div className="mt-6">
-            <p>
-              Sollen deine Buchungsdaten für die nächste Buchung in{' '}
-              <strong>deinem Browser</strong> gespeichert werden?
-            </p>
-            <button onClick={store} className="mt-3 ml-0 btn btn-blue">
-              Ja, bitte speichern
-            </button>
-          </div>
-        )}
-        {bookingDataStored === true && (
-          <div className="mt-6">
-            <p className="info-message">
-              Ok, deine Buchungsdaten wurden für die nächste Buchung
-              gespeichert.
-            </p>
-          </div>
-        )}
-        </Layout>
+      <h3 className="thanks mb-3 mt-6 text-lg">
+        Vielen Dank für die Buchungsanfrage
+      </h3>
+      <p className="mb-6">
+        Nach Prüfung bestätigen wir die Buchung zeitnah per E-Mail.
+      </p>
+      <p>
+        Den{' '}
+        <Link href={`/bookings/${booking.uuid}`}>
+          <a className="link underline">Link</a>
+        </Link>{' '}
+        zur Buchung schicken wir Dir auch per E-Mail. Dort kann die Buchung auch
+        jederzeit storniert werden.
+      </p>
+      {!storedBookingData && !bookingDataStored && (
+        <div className="mt-6">
+          <p>
+            Sollen deine Buchungsdaten für die nächste Buchung in{' '}
+            <strong>deinem Browser</strong> gespeichert werden?
+          </p>
+          <button onClick={store} className="mt-3 ml-0 btn btn-blue">
+            Ja, bitte speichern
+          </button>
+        </div>
+      )}
+      {bookingDataStored === true && (
+        <div className="mt-6">
+          <p className="info-message">
+            Ok, deine Buchungsdaten wurden für die nächste Buchung gespeichert.
+          </p>
+        </div>
+      )}
+    </Layout>
  )
 }
--- a/pages/impressum.tsx
+++ b/pages/impressum.tsx
@@ -10,7 +10,7 @@ import Layout from '../components/layout'
 export default function TermsPage({ source }) {
  return (
    <Layout>
-      <MDXRemote {...source} components={{...mdComponents}} />
+      <MDXRemote {...source} components={{ ...mdComponents }} />
    </Layout>
  )
 }
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -4,7 +4,6 @@ import Layout from '../components/layout'
 export default function Home() {
  const hello = 'fooo'

-
  return (
    <Layout>
      <div className="mt-6 sm:text-center">
--- a/pages/privacy.tsx
+++ b/pages/privacy.tsx
@@ -9,7 +9,7 @@ export default function TermsPage({ source }) {
  return (
    <Layout>
      <div className="text-gray-700">
-        <MDXRemote {...source} components={{...mdComponents}}/>
+        <MDXRemote {...source} components={{ ...mdComponents }} />
      </div>
    </Layout>
  )
--- a/pages/terms.tsx
+++ b/pages/terms.tsx
@@ -10,8 +10,8 @@ import Layout from '../components/layout'
 export default function TermsPage({ source }) {
  return (
    <Layout>
-      <div className="text-gray-700" >
-        <MDXRemote {...source} components={{...mdComponents}} />
+      <div className="text-gray-700">
+        <MDXRemote {...source} components={{ ...mdComponents }} />
      </div>
    </Layout>
  )
--- a/renovate.json
+++ b/renovate.json
@@ -1,8 +1,5 @@
 {
-  "extends": [
-    "config:base",
-    ":dependencyDashboard"
-  ],
+  "extends": ["config:base", ":dependencyDashboard"],
  "schedule": "every weekend",
  "packageRules": [
    {
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,11 +1,7 @@
 {
  "compilerOptions": {
    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
@@ -20,12 +16,6 @@
    "jsx": "preserve",
    "incremental": true
  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
 }