Füge eine Benutzerverwaltung hinzu, damit "Manage Treatments" und "Manage Bookings" nur für den Shop Inhaber zugänglich ist.

src/client/app.tsx

@@ -1,16 +1,39 @@
 import { useState } from "react";
+import { useAuth } from "@/client/components/auth-provider";
+import { LoginForm } from "@/client/components/login-form";
+import { UserProfile } from "@/client/components/user-profile";
 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 { user, isLoading, isOwner } = useAuth();
+  const [activeTab, setActiveTab] = useState<"booking" | "admin-treatments" | "admin-bookings" | "profile">("booking");
+
+  // Show loading spinner while checking authentication
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-pink-50 to-purple-50">
+        <div className="text-center">
+          <div className="text-6xl mb-4">💅</div>
+          <div className="text-lg text-gray-600">Lade...</div>
+        </div>
+      </div>
+    );
+  }
+
+  // Show login form if user is not authenticated and trying to access admin features
+  const needsAuth = !user && (activeTab === "admin-treatments" || activeTab === "admin-bookings" || activeTab === "profile");
+  if (needsAuth) {
+    return <LoginForm />;
+  }
 
   const tabs = [
-    { id: "booking", label: "Book Appointment", icon: "📅" },
-    { id: "admin-treatments", label: "Manage Treatments", icon: "💅" },
-    { id: "admin-bookings", label: "Manage Bookings", icon: "📋" },
+    { id: "booking", label: "Termin buchen", icon: "📅", requiresAuth: false },
+    { id: "admin-treatments", label: "Behandlungen verwalten", icon: "💅", requiresAuth: true },
+    { id: "admin-bookings", label: "Buchungen verwalten", icon: "📋", requiresAuth: true },
+    ...(user ? [{ id: "profile", label: "Profil", icon: "👤", requiresAuth: true }] : []),
   ] as const;
 
   return (
@@ -28,6 +51,19 @@ function App() {
                 <p className="text-sm text-gray-600">Professional Nail Design & Care</p>
               </div>
             </div>
+            
+            {user && (
+              <div className="flex items-center space-x-4">
+                <span className="text-sm text-gray-600">
+                  Willkommen, {user.username}
+                </span>
+                {isOwner && (
+                  <span className="bg-pink-100 text-pink-800 px-2 py-1 rounded-full text-xs font-medium">
+                    Inhaber
+                  </span>
+                )}
+              </div>
+            )}
           </div>
         </div>
       </header>
@@ -36,20 +72,44 @@ function App() {
       <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) => (
+            {tabs.map((tab) => {
+              // Hide admin tabs for non-owners
+              if (tab.requiresAuth && !isOwner && tab.id !== "profile") {
+                return null;
+              }
+              
+              return (
+                <button
+                  key={tab.id}
+                  onClick={() => {
+                    if (tab.requiresAuth && !user) {
+                      // This will trigger the login form
+                      setActiveTab(tab.id as any);
+                    } else {
+                      setActiveTab(tab.id as any);
+                    }
+                  }}
+                  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>
+              );
+            })}
+            
+            {!user && (
               <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"
-                }`}
+                onClick={() => setActiveTab("profile")} // This will trigger login
+                className="py-4 px-1 border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 font-medium text-sm flex items-center space-x-2"
               >
-                <span>{tab.icon}</span>
-                <span>{tab.label}</span>
+                <span>🔑</span>
+                <span>Inhaber Login</span>
               </button>
-            ))}
+            )}
           </div>
         </div>
       </nav>
@@ -60,44 +120,58 @@ function App() {
           <div>
             <div className="text-center mb-8">
               <h2 className="text-3xl font-bold text-gray-900 mb-4">
-                Book Your Perfect Nail Treatment
+                Buchen Sie Ihre perfekte Nagelbehandlung
               </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.
+                Erleben Sie professionelle Nagelpflege mit unseren Experten. 
+                Wählen Sie aus unserem breiten Angebot an Behandlungen und buchen Sie noch heute Ihren Termin.
               </p>
             </div>
             <BookingForm />
           </div>
         )}
 
-        {activeTab === "admin-treatments" && (
+        {activeTab === "admin-treatments" && isOwner && (
           <div>
             <div className="text-center mb-8">
               <h2 className="text-3xl font-bold text-gray-900 mb-4">
-                Treatment Management
+                Behandlungen verwalten
               </h2>
               <p className="text-lg text-gray-600">
-                Add, edit, and manage your nail treatment services.
+                Hinzufügen, bearbeiten und verwalten Sie Ihre Nagelbehandlungen.
               </p>
             </div>
             <AdminTreatments />
           </div>
         )}
 
-        {activeTab === "admin-bookings" && (
+        {activeTab === "admin-bookings" && isOwner && (
           <div>
             <div className="text-center mb-8">
               <h2 className="text-3xl font-bold text-gray-900 mb-4">
-                Booking Management
+                Buchungen verwalten
               </h2>
               <p className="text-lg text-gray-600">
-                View and manage customer appointments and bookings.
+                Sehen und verwalten Sie Kundentermine und Buchungen.
               </p>
             </div>
             <AdminBookings />
           </div>
         )}
+
+        {activeTab === "profile" && user && (
+          <div>
+            <div className="text-center mb-8">
+              <h2 className="text-3xl font-bold text-gray-900 mb-4">
+                Benutzerprofil
+              </h2>
+              <p className="text-lg text-gray-600">
+                Verwalten Sie Ihre Kontoinformationen und Einstellungen.
+              </p>
+            </div>
+            <UserProfile />
+          </div>
+        )}
       </main>
 
       {/* Footer */}