@licklist/design 0.78.5-dev.106 → 0.78.5-dev.107

package/src/v2/shadcn/_reference/UserPanel.tsx

@@ -1,472 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import LoadingSpinner from './LoadingSpinner';
-import { useNavigate, useLocation } from 'react-router-dom';
-import { IconCross } from '../../icons';
-import userIcon from '@/assets/Icon_User.svg';
-import settingsIcon from '@/assets/Icon_Settings.svg';
-import simulationIcon from '@/assets/Icon_Simulation.svg';
-import crossIcon from '@/assets/Icon_Cross.svg';
-import logoutIcon from '@/assets/Icon_Logout.svg';
-import { supabase } from '@/integrations/supabase/client';
-import { formatUserId } from '@/lib/userUtils';
-import { useAuth } from '@/contexts/AuthContext';
-import { useUser } from '@/contexts/UserContext';
-import { useSimulation } from '@/contexts/SimulationContext';
-import { useUserRole, AppRole } from '../hooks/useUserRole';
-import { Switch } from './ui/switch';
-import { RadioGroup, RadioGroupItem } from './ui/radio-group';
-import { Input } from './ui/input';
-import { Label } from './ui/label';
-
-interface UserPanelProps {
-  isOpen: boolean;
-  onClose: () => void;
-  userName: string;
-}
-
-export const UserPanel: React.FC<UserPanelProps> = ({ 
-  isOpen, 
-  onClose
-}) => {
-  const navigate = useNavigate();
-  const location = useLocation();
-  const { signOut } = useAuth();
-  const { profile } = useUser();
-  const { primaryRole, roleWeight } = useUserRole();
-  const simulation = useSimulation();
-  const [userRole, setUserRole] = useState<string>('');
-  const [selectedSimulation, setSelectedSimulation] = useState<string>('none');
-  const [userIdSearch, setUserIdSearch] = useState<string>('');
-  const [actualRoleWeight, setActualRoleWeight] = useState<number>(0);
-  const [searchResults, setSearchResults] = useState<Array<{
-    id: string;
-    fullName: string | null;
-    email: string | null;
-    userNumber: number | null;
-    role: string;
-    roleWeight: number;
-  }>>([]);
-  const [isSearching, setIsSearching] = useState(false);
-  const [simulatedUserNumber, setSimulatedUserNumber] = useState<number | null>(null);
-  const [simulatedUserName, setSimulatedUserName] = useState<string | null>(null);
-
-  const displayName = profile?.fullName || 'User';
-  const firstName = profile?.firstName || 'User';
-  const initials = profile?.initials || 'U';
-  const email = profile?.email || '';
-  const userNumber = profile?.userNumber || null;
-  const avatarUrl = profile?.avatarUrl || null;
-
-  // Fetch user role data on mount
-  useEffect(() => {
-    const fetchUserRole = async () => {
-      try {
-        const { data: { user } } = await supabase.auth.getUser();
-        
-        if (user) {
-          // Fetch user's primary role
-          const { data: roleData } = await supabase
-            .rpc('get_user_primary_role', { _user_id: user.id });
-
-          if (roleData) {
-            // Format role name for display
-            const formattedRole = (roleData as string)
-                .split('_')
-                .map((word: string) => word.charAt(0).toUpperCase() + word.slice(1))
-                .join(' ');
-            setUserRole(formattedRole);
-          }
-
-          // Fetch user's ACTUAL max role weight (not simulated)
-          const { data: weightData } = await supabase
-            .rpc('get_user_max_role_weight', { _user_id: user.id });
-          
-          if (weightData !== null) {
-            setActualRoleWeight(weightData);
-          }
-        }
-      } catch (error) {
-        console.error('Error fetching user role:', error);
-      }
-    };
-
-    fetchUserRole();
-  }, []);
-
-  // Sync simulation state with actual simulation status
-  useEffect(() => {
-    if (simulation.isSimulating) {
-      if (simulation.simulatedUserId) {
-        setSelectedSimulation('simulate-user');
-        // Fetch simulated user's details for local display
-        const fetchSimulatedUserDetails = async () => {
-          const { data } = await supabase
-            .from('profiles')
-            .select('user_number, full_name')
-            .eq('id', simulation.simulatedUserId)
-            .maybeSingle();
-          
-          if (data) {
-            setSimulatedUserNumber(data.user_number);
-            setSimulatedUserName(data.full_name);
-          }
-        };
-        fetchSimulatedUserDetails();
-      } else if (simulation.simulatedRole) {
-        setSelectedSimulation(simulation.simulatedRole);
-      }
-    } else {
-      setSelectedSimulation('none');
-      setSimulatedUserNumber(null);
-      setSimulatedUserName(null);
-    }
-  }, [simulation.isSimulating, simulation.simulatedRole, simulation.simulatedUserId]);
-
-  // Role weights mapping
-  const roleWeights: Record<AppRole, number> = {
-    super_admin: 999,
-    system_admin: 500,
-    admin: 200,
-    manager: 100,
-    operations: 50,
-    staff: 25,
-    viewer: 10,
-    desk: 10,
-    customer: 0,
-  };
-
-  // Get available roles for simulation (lower weight than user's ACTUAL role, not simulated)
-  const getAvailableRoles = (): AppRole[] => {
-    if (!actualRoleWeight) return [];
-    return (Object.keys(roleWeights) as AppRole[]).filter(
-      role => role !== 'customer' && roleWeights[role] < actualRoleWeight
-    );
-  };
-
-  const handleSimulationChange = (value: string) => {
-    setSelectedSimulation(value);
-    
-    if (value === 'none') {
-      simulation.stopSimulation();
-      setUserIdSearch('');
-      setSearchResults([]);
-      setSimulatedUserNumber(null);
-      setSimulatedUserName(null);
-    } else if (value === 'simulate-user') {
-      setUserIdSearch('');
-      setSearchResults([]);
-    } else {
-      const weight = roleWeights[value as AppRole];
-      simulation.startSimulation(value as AppRole, weight);
-      setUserIdSearch('');
-      setSearchResults([]);
-      setSimulatedUserNumber(null);
-      setSimulatedUserName(null);
-    }
-  };
-
-  const handleUserIdSearch = async (searchTerm: string) => {
-    if (!searchTerm.trim()) {
-      setSearchResults([]);
-      return;
-    }
-
-    setIsSearching(true);
-    try {
-      // Search by user_number, user ID, name, or email
-      const { data: profiles, error } = await supabase
-        .from('profiles')
-        .select('id, full_name, email, user_number')
-        .or(
-          /^\d+$/.test(searchTerm)
-            ? `user_number.eq.${parseInt(searchTerm)},id.ilike.%${searchTerm}%,full_name.ilike.%${searchTerm}%,email.ilike.%${searchTerm}%`
-            : `id.ilike.%${searchTerm}%,full_name.ilike.%${searchTerm}%,email.ilike.%${searchTerm}%`
-        )
-        .limit(10);
-
-      if (error) {
-        console.error('Error searching users:', error);
-        setSearchResults([]);
-        return;
-      }
-
-      console.log('Search results:', profiles);
-
-      if (profiles && profiles.length > 0) {
-        // Fetch roles for each user
-        const usersWithRoles = await Promise.all(
-          profiles.map(async (profile) => {
-            const { data: roleData } = await supabase
-              .rpc('get_user_primary_role', { _user_id: profile.id });
-            
-            const { data: weightData } = await supabase
-              .rpc('get_user_max_role_weight', { _user_id: profile.id });
-
-            return {
-              id: profile.id,
-              fullName: profile.full_name,
-              email: profile.email,
-              userNumber: profile.user_number,
-              role: roleData || 'customer',
-              roleWeight: weightData || 0,
-            };
-          })
-        );
-
-        console.log('Users with roles:', usersWithRoles);
-        setSearchResults(usersWithRoles);
-      } else {
-        console.log('No profiles found');
-        setSearchResults([]);
-      }
-    } catch (error) {
-      console.error('Error searching users:', error);
-      setSearchResults([]);
-    } finally {
-      setIsSearching(false);
-    }
-  };
-
-  const handleSelectUser = (user: typeof searchResults[0]) => {
-    setUserIdSearch('');
-    setSearchResults([]);
-    simulation.startSimulation(user.role as AppRole, user.roleWeight, user.id);
-  };
-
-  if (!isOpen) return null;
-
-  return (
-    <>
-      {/* Overlay */}
-      <div 
-        className="fixed inset-0 z-40 animate-fade-in"
-        style={{ backgroundColor: 'var(--overlay-curtain)' }}
-        onClick={onClose}
-      />
-      
-      {/* Panel */}
-      <div 
-        className="fixed right-0 top-0 h-screen w-full sm:w-[320px] bg-surface-primary shadow-xl z-50 animate-slide-in-right"
-        onClick={(e) => e.stopPropagation()}
-      >
-        {/* Header */}
-        <div className="flex items-center justify-between p-4 border-b border-border-primary">
-          <div className="flex items-center gap-2">
-            <div className="w-8 h-8 relative flex items-center justify-center flex-shrink-0 overflow-hidden rounded-full">
-              {avatarUrl ? (
-                <img src={avatarUrl} alt="Profile" className="w-full h-full object-cover" />
-              ) : (
-                <>
-                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" className="absolute">
-                    <circle cx="16" cy="16" r="15" className="fill-fill-secondary stroke-fill-secondary" fillOpacity="0.2" strokeWidth="2" />
-                  </svg>
-                  <div className="text-[10px] font-extrabold leading-[8px] text-label-secondary relative mt-0.5">
-                    {initials}
-                  </div>
-                </>
-              )}
-            </div>
-            <div className="flex flex-col gap-0.5">
-              <h2 className="text-sm font-semibold text-label-primary">Hey {firstName}</h2>
-              {email && (
-                <span className="text-label-secondary text-xs leading-3">{email}</span>
-              )}
-            </div>
-          </div>
-          <button
-            onClick={onClose}
-            className="p-2 rounded-lg hover:bg-surface-primary-hover transition-colors flex-shrink-0 flex items-center justify-center"
-            aria-label="Close user menu"
-          >
-            <IconCross className="w-5 h-5 text-label-secondary" />
-          </button>
-        </div>
-
-        {/* Menu Items */}
-        <div className="flex flex-col flex-1 p-2 gap-1 pb-0">
-          <button
-            onClick={() => {
-              navigate('/profile');
-              onClose();
-            }}
-            className="flex items-center gap-2 w-full p-2 rounded-lg hover:bg-surface-primary-hover active:bg-surface-primary-pressed transition-colors text-label-primary outline-none text-left"
-          >
-            <img src={userIcon} alt="" className="w-5 h-5" />
-            <span className="text-[13px] font-medium leading-4">Profile</span>
-          </button>
-          <button
-            onClick={() => {
-              navigate('/user-settings', { state: { returnTo: location.pathname } });
-              onClose();
-            }}
-            className="flex items-center gap-2 w-full p-2 rounded-lg hover:bg-surface-primary-hover active:bg-surface-primary-pressed transition-colors text-label-primary outline-none text-left"
-          >
-            <img src={settingsIcon} alt="" className="w-5 h-5" />
-            <span className="text-[13px] font-medium leading-4">User Settings</span>
-          </button>
-        </div>
-
-        {/* Simulation Section - Only for System Admin (500) and Super Admin (999) */}
-        {simulation.canAccessSimulation && (
-          <div className="p-2 pt-1">
-            <div className="space-y-3 pt-3 pb-3">
-              <div className="flex items-center gap-2 px-2">
-                <img src={simulationIcon} alt="" className="w-5 h-5" />
-                <Label className="text-[13px] font-medium leading-4 text-label-primary">
-                  Role / User Simulation
-                </Label>
-              </div>
-
-              <RadioGroup value={selectedSimulation} onValueChange={handleSimulationChange}>
-                <div className="space-y-2 pl-2">
-                  {/* No Simulation Option */}
-                  <div className="flex items-center space-x-2">
-                    <RadioGroupItem value="none" id="sim-none" />
-                    <Label
-                      htmlFor="sim-none"
-                      className="text-sm text-label-primary cursor-pointer font-normal"
-                    >
-                      No Simulation
-                    </Label>
-                  </div>
-
-                  {/* Available Role Options */}
-                  {getAvailableRoles().map((role) => (
-                    <div key={role} className="flex items-center space-x-2">
-                      <RadioGroupItem value={role} id={`role-${role}`} />
-                      <Label
-                        htmlFor={`role-${role}`}
-                        className="text-sm text-label-primary cursor-pointer font-normal"
-                      >
-                        {role.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')}
-                      </Label>
-                    </div>
-                  ))}
-
-                  {/* Simulate User Option */}
-                  <div className="flex items-center space-x-2">
-                    <RadioGroupItem value="simulate-user" id="sim-user" />
-                    <Label
-                      htmlFor="sim-user"
-                      className="text-sm text-label-primary cursor-pointer font-normal"
-                    >
-                      Simulate user
-                    </Label>
-                  </div>
-
-                  {/* Show simulated user card when a user is being simulated */}
-                  {simulation.isSimulating && simulation.simulatedUserId && simulatedUserName && (
-                    <div className="mt-2 bg-surface-status-info text-label-status-info pl-4 pr-2 py-2 flex items-center justify-between gap-3 rounded-lg border border-border-status-info">
-                      <div className="flex items-center gap-3 flex-1 min-w-0">
-                        <div className="relative flex items-center justify-center w-5 h-5">
-                          <div className="absolute inset-0 bg-surface-primary rounded-full animate-soft-pulse scale-150" />
-                          <img src={simulationIcon} alt="" className="relative w-4 h-4 z-10" />
-                        </div>
-                        <div className="flex flex-col gap-0.5 flex-1 min-w-0">
-                          <span className="text-xs font-semibold truncate">
-                            {simulatedUserName}
-                          </span>
-                          <span className="text-[10px] font-mono opacity-70 truncate">
-                            {simulation.simulatedRole?.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')} • User #{simulatedUserNumber?.toString().padStart(2, '0') || 'N/A'}
-                          </span>
-                        </div>
-                      </div>
-                      <button
-                        onClick={() => simulation.stopSimulation()}
-                        className="p-1 hover:bg-surface-primary/20 rounded transition-colors flex-shrink-0 self-center"
-                        aria-label="Stop simulation"
-                      >
-                        <img src={crossIcon} alt="" className="w-3 h-3" />
-                      </button>
-                    </div>
-                  )}
-                </div>
-              </RadioGroup>
-
-              {/* User Search - Show when "Simulate user" is selected AND no user is currently simulated */}
-              {selectedSimulation === 'simulate-user' && !(simulation.isSimulating && simulation.simulatedUserId) && (
-                <div className="space-y-2 pl-2">
-                  <div className="relative">
-                    <Input
-                      type="text"
-                      
-                      value={userIdSearch}
-                      onChange={(e) => {
-                        setUserIdSearch(e.target.value);
-                        handleUserIdSearch(e.target.value);
-                      }}
-                      className="w-full"
-                      autoComplete="off"
-                      data-lpignore="true"
-                      data-form-type="other"
-                    />
-                    {isSearching && (
-                      <div className="absolute right-3 top-1/2 -translate-y-1/2">
-                        <LoadingSpinner size="sm" className="w-4 h-4" />
-                      </div>
-                    )}
-                  </div>
-                  
-                  {searchResults.length > 0 && (
-                    <div className="mt-2 bg-surface-secondary rounded-lg border border-border-primary max-h-[200px] overflow-y-auto">
-                      {searchResults.map((user) => (
-                        <button
-                          key={user.id}
-                          onClick={() => handleSelectUser(user)}
-                          className="w-full p-3 text-left hover:bg-surface-primary-hover transition-colors border-b border-border-primary last:border-b-0"
-                        >
-                          <div className="flex items-center justify-between gap-3">
-                            <div className="flex-1 min-w-0">
-                              <div className="flex items-center gap-2 mb-1">
-                                <span className="text-xs font-mono font-semibold text-label-tertiary">
-                                  User: {user.userNumber?.toString().padStart(2, '0') || 'N/A'}
-                                </span>
-                                <span className="text-xs px-1.5 py-0.5 rounded bg-surface-tertiary text-label-tertiary font-medium">
-                                  {user.role.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')}
-                                </span>
-                              </div>
-                              <div className="text-sm font-medium text-label-primary truncate">
-                                {user.fullName || 'No name'}
-                              </div>
-                              <div className="text-xs text-label-secondary truncate">
-                                {user.email || 'No email'}
-                              </div>
-                            </div>
-                          </div>
-                        </button>
-                      ))}
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-          </div>
-        )}
-
-        {/* Logout */}
-        <div className="p-2 pt-1">
-          <button
-            onClick={async () => {
-              await signOut();
-              navigate('/auth');
-              onClose();
-            }}
-            className="flex items-center gap-2 w-full p-2 rounded-lg hover:bg-surface-primary-hover active:bg-surface-primary-pressed transition-colors text-label-primary outline-none text-left"
-          >
-            <img src={logoutIcon} alt="" className="w-5 h-5" />
-            <span className="text-[13px] font-medium leading-4">Log out</span>
-          </button>
-        </div>
-
-        {/* Footer with User ID and Role */}
-        <div className="p-4 border-t border-primary mt-auto">
-          <div className="flex justify-center items-center gap-2 bg-surface-tertiary px-2 py-1 rounded-lg w-fit">
-            <span className="text-label-secondary text-[10px] leading-3 font-mono font-semibold whitespace-nowrap">
-              User: {userNumber ? String(userNumber).padStart(2, '0') : 'N/A'}{userRole ? ` - ${userRole}` : ''}
-            </span>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};