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

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

@@ -0,0 +1,472 @@
+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>
+    </>
+  );
+};