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>
+  )
+}

pages/admin/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
-import Link from 'next/link'
+import BookingTable from '../../components/bookingTable'
 import Layout from '../../components/layout'
-import { daysFormatFrontend } from '../../helpers/date'
 
 import { getServerSideRecentBookings } from '../../lib/getServerSideProps'
 
@@ -21,51 +20,7 @@ function AdminRecentBookings({ bookings }) {
   return (
     <Layout>
       {bookings.map((booking: any) => (
-        <div
+        <BookingTable key={booking.uuid} booking={booking} />
-          key={booking.uuid}
-          className="mb-6 bg-white 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).toLocaleString()}
-            </p>
-          </div>
-          <div className="border-t border-gray-200">
-            <dl>
-              <div className="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">
-                  Buchungszeitraum
-                </dt>
-                <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
-                  {daysFormatFrontend(booking.days)}
-                </dd>
-              </div>
-              <div className="bg-white 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">Bucher</dt>
-                <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
-                  {booking.name}
-                </dd>
-              </div>
-              <div className="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">Email</dt>
-                <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
-                  {booking.email}
-                </dd>
-              </div>
-              <div className="bg-white 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">Status</dt>
-                <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
-                  {booking.status}
-                </dd>
-              </div>
-            </dl>
-          </div>
-        </div>
       ))}
     </Layout>
   )