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/pages/platform/PlatformBusinesses.tsx

@@ -0,0 +1,158 @@
+
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Search, Filter, MoreHorizontal, Eye, ShieldCheck, Ban } from 'lucide-react';
+import { User } from '../../types';
+import { useBusinesses } from '../../hooks/usePlatform';
+
+interface PlatformBusinessesProps {
+  onMasquerade: (targetUser: User) => void;
+}
+
+const PlatformBusinesses: React.FC<PlatformBusinessesProps> = ({ onMasquerade }) => {
+  const { t } = useTranslation();
+  const [searchTerm, setSearchTerm] = useState('');
+  const { data: businesses, isLoading, error } = useBusinesses();
+
+  const filteredBusinesses = (businesses || []).filter(b =>
+    b.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    b.subdomain.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const handleLoginAs = (business: any) => {
+    // Use the owner data from the API response
+    if (business.owner) {
+      const targetOwner: User = {
+        id: business.owner.id.toString(),
+        username: business.owner.username,
+        name: business.owner.name,
+        email: business.owner.email,
+        role: business.owner.role,
+        business_id: business.id.toString(),
+        business_subdomain: business.subdomain,
+        is_active: true,
+        is_staff: false,
+        is_superuser: false,
+      };
+      onMasquerade(targetOwner);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="text-gray-500 dark:text-gray-400">{t('common.loading')}</div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="text-red-500">{t('errors.generic')}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+        <div>
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('platform.businesses')}</h2>
+          <p className="text-gray-500 dark:text-gray-400">{t('platform.businessesDescription')}</p>
+        </div>
+        <button className="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 font-medium shadow-sm">
+          {t('platform.addNewTenant')}
+        </button>
+      </div>
+
+      <div className="flex items-center gap-4 bg-white dark:bg-gray-800 p-4 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} />
+          <input
+            type="text"
+            placeholder={t('platform.searchBusinesses')}
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="w-full pl-10 pr-4 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
+          />
+        </div>
+        <button className="flex items-center gap-2 px-4 py-2 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 border border-gray-200 dark:border-gray-600">
+          <Filter size={16} /> {t('common.filter')}
+        </button>
+      </div>
+
+      <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden">
+        <table className="w-full text-sm text-left">
+          <thead className="text-xs text-gray-500 dark:text-gray-400 uppercase bg-gray-50 dark:bg-gray-900/50 border-b border-gray-200 dark:border-gray-700">
+            <tr>
+              <th className="px-6 py-4 font-medium">{t('platform.businessName')}</th>
+              <th className="px-6 py-4 font-medium">{t('platform.subdomain')}</th>
+              <th className="px-6 py-4 font-medium">{t('platform.plan')}</th>
+              <th className="px-6 py-4 font-medium">{t('platform.status')}</th>
+              <th className="px-6 py-4 font-medium">{t('platform.joined')}</th>
+              <th className="px-6 py-4 font-medium text-right">{t('common.actions')}</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-100 dark:divide-gray-700">
+            {filteredBusinesses.map((biz) => {
+              const tierDisplay = biz.tier.charAt(0).toUpperCase() + biz.tier.slice(1).toLowerCase();
+              const statusDisplay = biz.is_active ? 'Active' : 'Inactive';
+
+              return (
+                <tr key={biz.id} className="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
+                  <td className="px-6 py-4 font-medium text-gray-900 dark:text-white">
+                    <div className="flex items-center gap-3">
+                      <div className="w-8 h-8 rounded bg-gray-100 dark:bg-gray-700 flex items-center justify-center font-bold text-xs text-indigo-600">
+                          {biz.name.substring(0, 2).toUpperCase()}
+                      </div>
+                      {biz.name}
+                    </div>
+                  </td>
+                  <td className="px-6 py-4 text-gray-500 dark:text-gray-400 font-mono text-xs">
+                    {biz.subdomain}.smoothschedule.com
+                  </td>
+                  <td className="px-6 py-4">
+                    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
+                      ${biz.tier === 'ENTERPRISE' ? 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300' :
+                        biz.tier === 'BUSINESS' ? 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300' :
+                        biz.tier === 'PROFESSIONAL' ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300' :
+                        'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'}
+                    `}>
+                      {tierDisplay}
+                    </span>
+                  </td>
+                  <td className="px-6 py-4">
+                     <div className="flex items-center gap-2">
+                      {biz.is_active && <ShieldCheck size={16} className="text-green-500" />}
+                      {!biz.is_active && <Ban size={16} className="text-red-500" />}
+                      <span className="text-gray-700 dark:text-gray-300">{statusDisplay}</span>
+                     </div>
+                  </td>
+                  <td className="px-6 py-4 text-gray-500 dark:text-gray-400">
+                    {new Date(biz.created_at).toLocaleDateString()}
+                  </td>
+                  <td className="px-6 py-4 text-right">
+                    <button
+                      onClick={() => handleLoginAs(biz)}
+                      className="text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300 font-medium text-xs inline-flex items-center gap-1 px-3 py-1 border border-indigo-200 dark:border-indigo-800 rounded-lg hover:bg-indigo-50 dark:hover:bg-indigo-900/30 transition-colors mr-2"
+                      disabled={!biz.owner}
+                      title={!biz.owner ? 'No owner assigned' : `Masquerade as ${biz.owner.name}`}
+                    >
+                      <Eye size={14} /> {t('platform.masquerade')}
+                    </button>
+                    <button className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
+                      <MoreHorizontal size={18} />
+                    </button>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default PlatformBusinesses;

frontend/src/pages/platform/PlatformDashboard.tsx

@@ -0,0 +1,96 @@
+
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { PLATFORM_METRICS } from '../../mockData';
+import { TrendingUp, TrendingDown, Minus, Users, DollarSign, Activity, AlertCircle } from 'lucide-react';
+import { ResponsiveContainer, AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';
+
+const data = [
+  { name: 'Jan', mrr: 340000 },
+  { name: 'Feb', mrr: 355000 },
+  { name: 'Mar', mrr: 370000 },
+  { name: 'Apr', mrr: 365000 },
+  { name: 'May', mrr: 390000 },
+  { name: 'Jun', mrr: 410000 },
+  { name: 'Jul', mrr: 425900 },
+];
+
+const PlatformDashboard: React.FC = () => {
+  const { t } = useTranslation();
+  const getColorClass = (color: string) => {
+    switch(color) {
+      case 'blue': return 'text-blue-600 bg-blue-50 dark:bg-blue-900/20 dark:text-blue-400';
+      case 'green': return 'text-green-600 bg-green-50 dark:bg-green-900/20 dark:text-green-400';
+      case 'purple': return 'text-purple-600 bg-purple-50 dark:bg-purple-900/20 dark:text-purple-400';
+      case 'orange': return 'text-orange-600 bg-orange-50 dark:bg-orange-900/20 dark:text-orange-400';
+      default: return 'text-gray-600 bg-gray-50';
+    }
+  };
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('platform.overview')}</h2>
+        <p className="text-gray-500 dark:text-gray-400">{t('platform.overviewDescription')}</p>
+      </div>
+
+      {/* Metrics Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        {PLATFORM_METRICS.map((metric, idx) => (
+          <div key={idx} className="bg-white dark:bg-gray-800 p-6 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
+            <div className="flex items-center justify-between mb-4">
+              <p className="text-sm font-medium text-gray-500 dark:text-gray-400">{metric.label}</p>
+              <span className={`p-2 rounded-lg ${getColorClass(metric.color)}`}>
+                {metric.label.includes('Revenue') ? <DollarSign size={16} /> : 
+                 metric.label.includes('Active') ? <Users size={16} /> :
+                 metric.label.includes('Churn') ? <AlertCircle size={16} /> : <Activity size={16} />}
+              </span>
+            </div>
+            <div className="flex items-baseline gap-3">
+              <h3 className="text-2xl font-bold text-gray-900 dark:text-white">{metric.value}</h3>
+              <span className={`flex items-center text-xs font-medium px-2 py-0.5 rounded-full ${
+                metric.trend === 'up' ? 'text-green-700 bg-green-50 dark:bg-green-900/30 dark:text-green-400' : 
+                'text-red-700 bg-red-50 dark:bg-red-900/30 dark:text-red-400'
+              }`}>
+                {metric.trend === 'up' ? <TrendingUp size={12} className="mr-1"/> : <TrendingDown size={12} className="mr-1"/>}
+                {metric.change}
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* MRR Chart */}
+      <div className="bg-white dark:bg-gray-800 p-6 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
+        <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-6">{t('platform.mrrGrowth')}</h3>
+        <div className="h-80">
+          <ResponsiveContainer width="100%" height="100%">
+            <AreaChart data={data}>
+              <defs>
+                <linearGradient id="colorMrr" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor="#6366f1" stopOpacity={0.3}/>
+                  <stop offset="95%" stopColor="#6366f1" stopOpacity={0}/>
+                </linearGradient>
+              </defs>
+              <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#374151" strokeOpacity={0.1} />
+              <XAxis dataKey="name" axisLine={false} tickLine={false} tick={{ fill: '#9CA3AF' }} />
+              <YAxis axisLine={false} tickLine={false} tickFormatter={(val) => `$${val/1000}k`} tick={{ fill: '#9CA3AF' }} />
+              <Tooltip 
+                contentStyle={{ 
+                    backgroundColor: '#1F2937',
+                    border: 'none',
+                    borderRadius: '8px',
+                    color: '#fff'
+                }}
+                formatter={(val: number) => [`$${val.toLocaleString()}`, 'MRR']}
+              />
+              <Area type="monotone" dataKey="mrr" stroke="#6366f1" fillOpacity={1} fill="url(#colorMrr)" strokeWidth={3} />
+            </AreaChart>
+          </ResponsiveContainer>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PlatformDashboard;

frontend/src/pages/platform/PlatformSupport.tsx

@@ -0,0 +1,68 @@
+
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { SUPPORT_TICKETS } from '../../mockData';
+import { Ticket as TicketIcon, AlertCircle, CheckCircle2, Clock } from 'lucide-react';
+
+const PlatformSupport: React.FC = () => {
+  const { t } = useTranslation();
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+        <div>
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('platform.supportTickets')}</h2>
+          <p className="text-gray-500 dark:text-gray-400">{t('platform.supportDescription')}</p>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 gap-4">
+        {SUPPORT_TICKETS.map((ticket) => (
+            <div key={ticket.id} className="bg-white dark:bg-gray-800 p-4 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-md transition-shadow cursor-pointer">
+                <div className="flex items-start justify-between">
+                    <div className="flex items-start gap-4">
+                        <div className={`p-2 rounded-lg shrink-0 ${
+                            ticket.priority === 'High' || ticket.priority === 'Critical' ? 'bg-red-100 text-red-600 dark:bg-red-900/20 dark:text-red-400' :
+                            ticket.priority === 'Medium' ? 'bg-orange-100 text-orange-600 dark:bg-orange-900/20 dark:text-orange-400' :
+                            'bg-blue-100 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400'
+                        }`}>
+                            <TicketIcon size={20} />
+                        </div>
+                        <div>
+                            <div className="flex items-center gap-2 mb-1">
+                                <h3 className="font-semibold text-gray-900 dark:text-white">{ticket.subject}</h3>
+                                <span className="text-xs px-2 py-0.5 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 border border-gray-200 dark:border-gray-600">
+                                    {ticket.id}
+                                </span>
+                            </div>
+                            <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">{t('platform.reportedBy')} <span className="font-medium text-gray-900 dark:text-white">{ticket.businessName}</span></p>
+                            <div className="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-400">
+                                <span className="flex items-center gap-1">
+                                    <Clock size={12} /> {ticket.createdAt.toLocaleDateString()}
+                                </span>
+                                <span className={`flex items-center gap-1 font-medium ${
+                                    ticket.status === 'Open' ? 'text-green-600' :
+                                    ticket.status === 'In Progress' ? 'text-blue-600' : 'text-gray-500'
+                                }`}>
+                                    {ticket.status === 'Open' && <AlertCircle size={12} />}
+                                    {ticket.status === 'Resolved' && <CheckCircle2 size={12} />}
+                                    {ticket.status}
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="text-right">
+                        <span className={`inline-block px-2 py-1 rounded text-xs font-medium ${
+                             ticket.priority === 'High' ? 'bg-red-50 text-red-700 dark:bg-red-900/30' : 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300'
+                        }`}>
+                            {ticket.priority} {t('platform.priority')}
+                        </span>
+                    </div>
+                </div>
+            </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default PlatformSupport;

frontend/src/pages/platform/PlatformUsers.tsx

@@ -0,0 +1,163 @@
+
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Search, Filter, Eye, Shield, User as UserIcon } from 'lucide-react';
+import { User } from '../../types';
+import { usePlatformUsers } from '../../hooks/usePlatform';
+
+interface PlatformUsersProps {
+  onMasquerade: (targetUser: User) => void;
+}
+
+const PlatformUsers: React.FC<PlatformUsersProps> = ({ onMasquerade }) => {
+  const { t } = useTranslation();
+  const [searchTerm, setSearchTerm] = useState('');
+  const [roleFilter, setRoleFilter] = useState<string>('all');
+  const { data: users, isLoading, error } = usePlatformUsers();
+
+  const filteredUsers = (users || []).filter(u => {
+    const matchesSearch = (u.name || '').toLowerCase().includes(searchTerm.toLowerCase()) ||
+                          u.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                          u.username.toLowerCase().includes(searchTerm.toLowerCase());
+    const matchesRole = roleFilter === 'all' || u.role === roleFilter;
+    return matchesSearch && matchesRole;
+  });
+
+  const getRoleBadgeColor = (role: string) => {
+    switch(role) {
+        case 'superuser': return 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300';
+        case 'platform_manager':
+        case 'platform_support': return 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300';
+        case 'owner': return 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300';
+        case 'staff': return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300';
+        case 'customer': return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300';
+        default: return 'bg-gray-100 text-gray-800';
+    }
+  };
+
+  const handleMasquerade = (platformUser: any) => {
+    // Convert platform user to User type for masquerade
+    const targetUser: User = {
+      id: platformUser.id.toString(),
+      username: platformUser.username,
+      name: platformUser.name || platformUser.username,
+      email: platformUser.email,
+      role: platformUser.role || 'customer',
+      business_id: platformUser.business?.toString() || null,
+      business_subdomain: platformUser.business_subdomain || null,
+      is_active: platformUser.is_active,
+      is_staff: platformUser.is_staff,
+      is_superuser: platformUser.is_superuser,
+    };
+    onMasquerade(targetUser);
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="text-gray-500 dark:text-gray-400">{t('common.loading')}</div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="text-red-500">{t('errors.generic')}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+        <div>
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('platform.userDirectory')}</h2>
+          <p className="text-gray-500 dark:text-gray-400">{t('platform.userDirectoryDescription')}</p>
+        </div>
+      </div>
+
+      <div className="flex flex-col sm:flex-row gap-4 bg-white dark:bg-gray-800 p-4 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} />
+          <input
+            type="text"
+            placeholder={t('platform.searchUsers')}
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="w-full pl-10 pr-4 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:text-white"
+          />
+        </div>
+        <select 
+            value={roleFilter}
+            onChange={(e) => setRoleFilter(e.target.value)}
+            className="px-4 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 text-gray-700 dark:text-gray-200"
+        >
+            <option value="all">{t('platform.allRoles')}</option>
+            <option value="superuser">{t('platform.roles.superuser')}</option>
+            <option value="platform_manager">{t('platform.roles.platformManager')}</option>
+            <option value="owner">{t('platform.roles.businessOwner')}</option>
+            <option value="staff">{t('platform.roles.staff')}</option>
+            <option value="customer">{t('platform.roles.customer')}</option>
+        </select>
+      </div>
+
+      <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden">
+        <table className="w-full text-sm text-left">
+          <thead className="text-xs text-gray-500 dark:text-gray-400 uppercase bg-gray-50 dark:bg-gray-900/50 border-b border-gray-200 dark:border-gray-700">
+            <tr>
+              <th className="px-6 py-4 font-medium">{t('platform.user')}</th>
+              <th className="px-6 py-4 font-medium">{t('platform.role')}</th>
+              <th className="px-6 py-4 font-medium">{t('platform.email')}</th>
+              <th className="px-6 py-4 font-medium text-right">{t('common.actions')}</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-100 dark:divide-gray-700">
+            {filteredUsers.map((u) => (
+              <tr key={u.id} className="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
+                <td className="px-6 py-4 font-medium text-gray-900 dark:text-white">
+                  <div className="flex items-center gap-3">
+                    <div className="w-8 h-8 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center text-indigo-600 dark:text-indigo-300 font-semibold text-sm">
+                      {(u.name || u.username).charAt(0).toUpperCase()}
+                    </div>
+                    <div>
+                      <div>{u.name || u.username}</div>
+                      {u.business_name && (
+                        <div className="text-xs text-gray-500 dark:text-gray-400">{u.business_name}</div>
+                      )}
+                    </div>
+                  </div>
+                </td>
+                <td className="px-6 py-4">
+                  <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium capitalize ${getRoleBadgeColor(u.role || 'customer')}`}>
+                    {(u.role || 'customer').replace(/_/g, ' ')}
+                  </span>
+                </td>
+                <td className="px-6 py-4 text-gray-500 dark:text-gray-400 font-mono text-xs">
+                  {u.email}
+                </td>
+                <td className="px-6 py-4 text-right">
+                  <button
+                    onClick={() => handleMasquerade(u)}
+                    className="text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300 font-medium text-xs inline-flex items-center gap-1 px-3 py-1 border border-indigo-200 dark:border-indigo-800 rounded-lg hover:bg-indigo-50 dark:hover:bg-indigo-900/30 transition-colors"
+                    disabled={u.is_superuser}
+                    title={u.is_superuser ? 'Cannot masquerade as superuser' : `Masquerade as ${u.name || u.username}`}
+                  >
+                    <Eye size={14} /> {t('platform.masquerade')}
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        {filteredUsers.length === 0 && (
+            <div className="p-8 text-center text-gray-500 dark:text-gray-400">
+                {t('platform.noUsersFound')}
+            </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default PlatformUsers;