Initial commit: SmoothSchedule multi-tenant scheduling platform

This commit includes:
- Django backend with multi-tenancy (django-tenants)
- React + TypeScript frontend with Vite
- Platform administration API with role-based access control
- Authentication system with token-based auth
- Quick login dev tools for testing different user roles
- CORS and CSRF configuration for local development
- Docker development environment setup

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/components/Schedule/PendingSidebar.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { useDraggable } from '@dnd-kit/core';
+import { Clock, GripVertical } from 'lucide-react';
+import { clsx } from 'clsx';
+
+export interface PendingAppointment {
+    id: number;
+    customerName: string;
+    serviceName: string;
+    durationMinutes: number;
+}
+
+interface PendingItemProps {
+    appointment: PendingAppointment;
+}
+
+const PendingItem: React.FC<PendingItemProps> = ({ appointment }) => {
+    const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+        id: `pending-${appointment.id}`,
+        data: {
+            type: 'pending',
+            duration: appointment.durationMinutes,
+            title: appointment.customerName // Pass title for the new event
+        },
+    });
+
+    return (
+        <div
+            ref={setNodeRef}
+            {...listeners}
+            {...attributes}
+            className={clsx(
+                "p-3 bg-white border border-l-4 border-gray-200 border-l-orange-400 rounded shadow-sm cursor-grab hover:shadow-md transition-all mb-2",
+                isDragging ? "opacity-50" : ""
+            )}
+        >
+            <div className="flex items-start justify-between">
+                <div>
+                    <p className="font-semibold text-sm text-gray-900">{appointment.customerName}</p>
+                    <p className="text-xs text-gray-500">{appointment.serviceName}</p>
+                </div>
+                <GripVertical size={14} className="text-gray-400" />
+            </div>
+            <div className="mt-2 flex items-center gap-1 text-xs text-gray-400">
+                <Clock size={10} />
+                <span>{appointment.durationMinutes} min</span>
+            </div>
+        </div>
+    );
+};
+
+interface PendingSidebarProps {
+    appointments: PendingAppointment[];
+}
+
+const PendingSidebar: React.FC<PendingSidebarProps> = ({ appointments }) => {
+    return (
+        <div className="w-64 bg-gray-50 border-r border-gray-200 flex flex-col h-full shrink-0">
+            <div className="p-4 border-b border-gray-200 bg-gray-100">
+                <h3 className="text-xs font-bold text-gray-500 uppercase tracking-wider flex items-center gap-2">
+                    <Clock size={12} /> Pending Requests ({appointments.length})
+                </h3>
+            </div>
+            <div className="p-4 overflow-y-auto flex-1">
+                {appointments.length === 0 ? (
+                    <div className="text-xs text-gray-400 italic text-center py-4">No pending requests</div>
+                ) : (
+                    appointments.map(apt => (
+                        <PendingItem key={apt.id} appointment={apt} />
+                    ))
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default PendingSidebar;