show all booking data in admin table

components/bookingTable.tsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import Link from 'next/link'
+
+import { daysFormatFrontend } from '../helpers/date'
+import { BookingDocument } from '../db/booking'
+
+export default function BookingTable({
+  booking,
+}: {
+  booking: BookingDocument
+}) {
+  const data = [
+    { name: 'Status', value: booking.status },
+    { name: 'Buchungszeitraum', value: daysFormatFrontend(booking.days) },
+    { name: 'Organisation', value: booking.org },
+    {
+      name: 'Addresse',
+      value: (
+        <>
+          <div>{booking.street}</div>
+          <div>
+            {booking.zip} {booking.city}
+          </div>
+        </>
+      ),
+    },
+    {
+      name: 'Email',
+      value: (
+        <Link href={`mailto:${booking.email}`}>
+          <a className="link">{booking.email}</a>
+        </Link>
+      ),
+    },
+    { name: 'Zweck', value: booking.purpose },
+    { name: 'Ziel', value: booking.destination },
+  ]
+  return (
+    <div
+      key={booking.uuid}
+      className="mt-6 mb-6 bg-white border border-slate-100 shadow overflow-hidden sm:rounded-lg"
+    >
+      <div className="px-4 py-5 sm:px-6">
+        <h3 className="text-lg leading-6 font-medium text-gray-900">
+          <Link href={`/admin/bookings/${booking.uuid}`}>
+            <a className="link">Booking {booking.uuid}</a>
+          </Link>
+        </h3>
+        <p className="mt-1 max-w-2xl text-sm text-gray-500">
+          Last updated{' '}
+          {new Date(booking.updatedAt as string).toLocaleString(
+            new Intl.Locale('de')
+          )}
+        </p>
+      </div>
+      <div className="border-t border-gray-200">
+        <dl>
+          {data.map(({ name, value }, index) => (
+            <div
+              key={`${booking.uuid}-${name}`}
+              className={`${
+                index % 2 === 1 ? 'bg-white' : 'bg-gray-100'
+              } px-2 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6`}
+            >
+              <dt className="text-sm font-medium text-gray-500">{name}</dt>
+              <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                {value || 'n/a'}
+              </dd>
+            </div>
+          ))}
+        </dl>
+      </div>
+    </div>
+  )
+}