I´d like to create a booking platform for a beauty shop (nail design). the customer shall be able to book a treatment. an admin backend is needed to manage articles and their durations.

2025-09-29 18:01:00 +02:00
parent a4ecf845bf
commit 63a402b3ad
9 changed files with 1068 additions and 27 deletions
--- a/src/client/app.tsx
+++ b/src/client/app.tsx
@@ -1,14 +1,115 @@
-function App() {
-  return (
-    <div className="min-h-screen w-full max-w-4xl mx-auto p-4">
-      {/* Replace this placeholder content with your app components */}
-      <div className="text-center mt-72">
-        <h1 className="text-2xl mb-4 opacity-50">
-          Building your new project...
-        </h1>
-      </div>
-    </div>
-  );
-}
-
-export default App;
+import { useState } from "react";
+import { BookingForm } from "@/client/components/booking-form";
+import { AdminTreatments } from "@/client/components/admin-treatments";
+import { AdminBookings } from "@/client/components/admin-bookings";
+import { InitialDataLoader } from "@/client/components/initial-data-loader";
+
+function App() {
+  const [activeTab, setActiveTab] = useState<"booking" | "admin-treatments" | "admin-bookings">("booking");
+
+  const tabs = [
+    { id: "booking", label: "Book Appointment", icon: "📅" },
+    { id: "admin-treatments", label: "Manage Treatments", icon: "💅" },
+    { id: "admin-bookings", label: "Manage Bookings", icon: "📋" },
+  ] as const;
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-pink-50 to-purple-50">
+      <InitialDataLoader />
+      
+      {/* Header */}
+      <header className="bg-white shadow-sm border-b border-pink-100">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center py-6">
+            <div className="flex items-center space-x-3">
+              <div className="text-3xl">💅</div>
+              <div>
+                <h1 className="text-2xl font-bold text-gray-900">Bella Nails Studio</h1>
+                <p className="text-sm text-gray-600">Professional Nail Design & Care</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* Navigation */}
+      <nav className="bg-white shadow-sm">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex space-x-8">
+            {tabs.map((tab) => (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={`py-4 px-1 border-b-2 font-medium text-sm flex items-center space-x-2 ${
+                  activeTab === tab.id
+                    ? "border-pink-500 text-pink-600"
+                    : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
+                }`}
+              >
+                <span>{tab.icon}</span>
+                <span>{tab.label}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+      </nav>
+
+      {/* Main Content */}
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {activeTab === "booking" && (
+          <div>
+            <div className="text-center mb-8">
+              <h2 className="text-3xl font-bold text-gray-900 mb-4">
+                Book Your Perfect Nail Treatment
+              </h2>
+              <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+                Experience professional nail care with our expert technicians. 
+                Choose from our wide range of treatments and book your appointment today.
+              </p>
+            </div>
+            <BookingForm />
+          </div>
+        )}
+
+        {activeTab === "admin-treatments" && (
+          <div>
+            <div className="text-center mb-8">
+              <h2 className="text-3xl font-bold text-gray-900 mb-4">
+                Treatment Management
+              </h2>
+              <p className="text-lg text-gray-600">
+                Add, edit, and manage your nail treatment services.
+              </p>
+            </div>
+            <AdminTreatments />
+          </div>
+        )}
+
+        {activeTab === "admin-bookings" && (
+          <div>
+            <div className="text-center mb-8">
+              <h2 className="text-3xl font-bold text-gray-900 mb-4">
+                Booking Management
+              </h2>
+              <p className="text-lg text-gray-600">
+                View and manage customer appointments and bookings.
+              </p>
+            </div>
+            <AdminBookings />
+          </div>
+        )}
+      </main>
+
+      {/* Footer */}
+      <footer className="bg-white border-t border-pink-100 mt-16">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+          <div className="text-center text-gray-600">
+            <p>&copy; 2024 Bella Nails Studio. Professional nail care services.</p>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}
+
+export default App;