add an admin overview page

2026-03-03 14:37:13 +01:00 · 2020-11-23 23:49:13 +01:00
parent c7cd252506
commit 4db3eadaeb
2 changed files with 118 additions and 1 deletions
--- a/pages/admin/index.tsx
+++ b/pages/admin/index.tsx
@@ -0,0 +1,91 @@
+import React from 'react'
+import Head from 'next/head'
+import Link from 'next/link'
+import Footer from '../../components/footer'
+import Header from '../../components/header'
+import { daysFormatFrontend } from '../../helpers/date'
+import withSession, { isAdminSession, redirectToLogin } from '../../lib/session'
+
+import { getServerSideRecentBookings } from '../../lib/getServerSideProps'
+
+export const getServerSideProps = withSession(async (context) => {
+  const { req, res } = context
+
+  const adminUser = isAdminSession(req)
+
+  if (!adminUser) {
+    redirectToLogin(req, res)
+    return { props: {} }
+  }
+
+  const serverSideRecentBookingProps = await getServerSideRecentBookings()
+  return {
+    props: {
+      ...serverSideRecentBookingProps.props,
+      user: adminUser,
+    },
+  }
+})
+
+export default function AdminRecentBookings({ bookings }) {
+  return (
+    <>
+      <Head>
+        <title>Pfadi Bussle Admin</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <Header label="Pfadi Bussle Buchungsliste" />
+      <main className="main py-3">
+        {bookings.map((booking: any) => (
+          <div
+            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/booking/${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).toLocaleTimeString()}
+              </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.booker.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.booker.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>
+        ))}
+      </main>
+      <Footer />
+    </>
+  )
+}