feat: Add admin calendar and improve availability management

- Add admin calendar component with booking overview and status management
- Implement treatment-specific availability slots with automatic duration
- Enhance availability management with better UI and error handling
- Move admin credentials to .env configuration
- Add .env.example with all required environment variables
- Update README.md with comprehensive setup guide including PowerShell password hash generation
- Improve slot deletion with proper error handling and user feedback
- Add toast notifications for better UX

src/client/app.tsx

@@ -5,12 +5,13 @@ 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 { AdminCalendar } from "@/client/components/admin-calendar";
 import { InitialDataLoader } from "@/client/components/initial-data-loader";
 import { AdminAvailability } from "@/client/components/admin-availability";
 
 function App() {
   const { user, isLoading, isOwner } = useAuth();
-  const [activeTab, setActiveTab] = useState<"booking" | "admin-treatments" | "admin-bookings" | "admin-availability" | "profile">("booking");
+  const [activeTab, setActiveTab] = useState<"booking" | "admin-treatments" | "admin-bookings" | "admin-calendar" | "admin-availability" | "profile">("booking");
 
   // Show loading spinner while checking authentication
   if (isLoading) {
@@ -29,7 +30,7 @@ function App() {
   }
 
   // Show login form if user is not authenticated and trying to access admin features
-  const needsAuth = !user && (activeTab === "admin-treatments" || activeTab === "admin-bookings" || activeTab === "admin-availability" || activeTab === "profile");
+  const needsAuth = !user && (activeTab === "admin-treatments" || activeTab === "admin-bookings" || activeTab === "admin-calendar" || activeTab === "admin-availability" || activeTab === "profile");
   if (needsAuth) {
     return <LoginForm />;
   }
@@ -38,6 +39,7 @@ function App() {
     { 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 },
+    { id: "admin-calendar", label: "Kalender", icon: "📆", requiresAuth: true },
     { id: "admin-availability", label: "Verfügbarkeiten", icon: "⏰", requiresAuth: true },
     ...(user ? [{ id: "profile", label: "Profil", icon: "👤", requiresAuth: true }] : []),
   ] as const;
@@ -169,6 +171,20 @@ function App() {
           </div>
         )}
 
+        {activeTab === "admin-calendar" && isOwner && (
+          <div>
+            <div className="text-center mb-8">
+              <h2 className="text-3xl font-bold text-gray-900 mb-4">
+                Kalender - Bevorstehende Buchungen
+              </h2>
+              <p className="text-lg text-gray-600">
+                Übersichtliche Darstellung aller bevorstehenden Termine im Kalenderformat.
+              </p>
+            </div>
+            <AdminCalendar />
+          </div>
+        )}
+
         {activeTab === "admin-availability" && isOwner && (
           <div>
             <div className="text-center mb-8">