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>
2025-11-27 01:43:20 -05:00
commit 2e111364a2
567 changed files with 96410 additions and 0 deletions
--- a/frontend/src/components/LanguageSelector.tsx
+++ b/frontend/src/components/LanguageSelector.tsx
@@ -0,0 +1,111 @@
+/**
+ * Language Selector Component
+ * Dropdown for selecting the application language
+ */
+
+import React, { useState, useRef, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Globe, Check, ChevronDown } from 'lucide-react';
+import { supportedLanguages, SupportedLanguage } from '../i18n';
+
+interface LanguageSelectorProps {
+  variant?: 'dropdown' | 'inline';
+  showFlag?: boolean;
+  className?: string;
+}
+
+const LanguageSelector: React.FC<LanguageSelectorProps> = ({
+  variant = 'dropdown',
+  showFlag = true,
+  className = '',
+}) => {
+  const { i18n } = useTranslation();
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const currentLanguage = supportedLanguages.find(
+    (lang) => lang.code === i18n.language
+  ) || supportedLanguages[0];
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const handleLanguageChange = (code: SupportedLanguage) => {
+    i18n.changeLanguage(code);
+    setIsOpen(false);
+  };
+
+  if (variant === 'inline') {
+    return (
+      <div className={`flex flex-wrap gap-2 ${className}`}>
+        {supportedLanguages.map((lang) => (
+          <button
+            key={lang.code}
+            onClick={() => handleLanguageChange(lang.code)}
+            className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
+              i18n.language === lang.code
+                ? 'bg-brand-600 text-white'
+                : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'
+            }`}
+          >
+            {showFlag && <span className="mr-1.5">{lang.flag}</span>}
+            {lang.name}
+          </button>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div ref={dropdownRef} className={`relative ${className}`}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-brand-500 transition-colors"
+        aria-expanded={isOpen}
+        aria-haspopup="listbox"
+      >
+        <Globe className="w-4 h-4" />
+        {showFlag && <span>{currentLanguage.flag}</span>}
+        <span className="hidden sm:inline">{currentLanguage.name}</span>
+        <ChevronDown className={`w-4 h-4 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+      </button>
+
+      {isOpen && (
+        <div className="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-50 py-1 animate-in fade-in slide-in-from-top-2">
+          <ul role="listbox" aria-label="Select language">
+            {supportedLanguages.map((lang) => (
+              <li key={lang.code}>
+                <button
+                  onClick={() => handleLanguageChange(lang.code)}
+                  className={`w-full flex items-center gap-3 px-4 py-2 text-sm text-left transition-colors ${
+                    i18n.language === lang.code
+                      ? 'bg-brand-50 dark:bg-brand-900/20 text-brand-700 dark:text-brand-300'
+                      : 'text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'
+                  }`}
+                  role="option"
+                  aria-selected={i18n.language === lang.code}
+                >
+                  <span className="text-lg">{lang.flag}</span>
+                  <span className="flex-1">{lang.name}</span>
+                  {i18n.language === lang.code && (
+                    <Check className="w-4 h-4 text-brand-600 dark:text-brand-400" />
+                  )}
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default LanguageSelector;