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

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

@@ -1,27 +0,0 @@
-import React from 'react';
-import { IconFlows } from '../../icons';
-
-/**
- * Flows General Settings - informational content only.
- * Flows are always required, no toggle needed.
- */
-const FlowsGeneralSettings: React.FC = () => {
-  return (
-    <div className="flex flex-col gap-4 w-full">
-      <div className="flex items-start gap-4 p-4 border border-border-primary rounded-lg bg-surface-secondary">
-        <IconFlows size={48} className="fill-fill-primary flex-shrink-0" />
-        <div className="flex flex-col gap-1">
-          <span className="text-label-primary font-medium text-base">
-            Flows Configuration
-          </span>
-          <p className="text-label-secondary text-sm">
-            Configure booking flows and diary settings for your venue. 
-            Manage how bookings are displayed and processed through the flows dashboard.
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default FlowsGeneralSettings;

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

@@ -1,33 +0,0 @@
-import React from 'react';
-import { useLocation } from 'react-router-dom';
-import SidebarLabelCustomization from './SidebarLabelCustomization';
-import { Notification } from './NotificationBanner';
-
-interface GeneralSettingsProps {
-  onShowNotification: (notification: Notification) => void;
-}
-
-const GeneralSettings: React.FC<GeneralSettingsProps> = ({ onShowNotification }) => {
-  const location = useLocation();
-  
-  // Determine context
-  const isCompanyContext = location.pathname.startsWith('/company');
-  const isProviderContext = location.pathname.includes('/venue/') || location.pathname.includes('/promoter/');
-  const showLabelCustomization = isCompanyContext || isProviderContext;
-
-  return (
-    <div className="flex flex-col items-start self-stretch">
-      {showLabelCustomization && (
-        <div className="flex flex-col gap-2 w-full py-4">
-          <h2 className="text-label-primary text-xl font-semibold">Navigation</h2>
-          <SidebarLabelCustomization 
-            type={isProviderContext ? 'provider' : 'company'} 
-            onShowNotification={onShowNotification}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default GeneralSettings;

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

@@ -1,82 +0,0 @@
-import React from 'react';
-import { supabase } from '@/integrations/supabase/client';
-import { useNotify } from '../hooks/useNotify';
-import { useUserRole } from '../hooks/useUserRole';
-import { IconProducts } from '../../icons';
-import FeatureToggle from './FeatureToggle';
-
-interface InventoryGeneralSettingsProps {
-  /** 'provider' uses ProviderContext, 'company' uses CompanyContext */
-  entityType: 'provider' | 'company';
-  /** The entity object (provider or company) */
-  entity: { id: string; inventory_enabled?: boolean | null } | null;
-  /** Callback to optimistically update the entity */
-  onUpdate: (updates: { inventory_enabled: boolean }) => void;
-}
-
-const InventoryGeneralSettings: React.FC<InventoryGeneralSettingsProps> = ({
-  entityType,
-  entity,
-  onUpdate,
-}) => {
-  const { hasRole, isLoading: isRoleLoading } = useUserRole();
-  const { showSuccess, showError } = useNotify();
-
-  const inventoryEnabled = entity?.inventory_enabled === true;
-  
-  // Only super_admin and system_admin can toggle features
-  const canToggleFeature = hasRole('super_admin') || hasRole('system_admin');
-
-  const tableName = entityType === 'provider' ? 'providers' : 'companies';
-  const entityLabel = entityType === 'provider' ? 'venue' : 'company';
-
-  const handleInventoryToggle = async (checked: boolean) => {
-    if (!entity || !canToggleFeature) return;
-
-    // Optimistically update context immediately
-    onUpdate({ inventory_enabled: checked });
-    
-    try {
-      const { error } = await supabase
-        .from(tableName)
-        .update({ inventory_enabled: checked })
-        .eq('id', entity.id);
-
-      if (error) throw error;
-
-      showSuccess(`Inventory ${checked ? 'enabled' : 'disabled'}`);
-    } catch (error) {
-      // Revert on error
-      onUpdate({ inventory_enabled: !checked });
-      console.error('Error updating inventory setting:', error);
-      showError('Failed to update inventory setting');
-    }
-  };
-
-  const title = inventoryEnabled ? 'Inventory Enabled' : 'Inventory Disabled';
-  const description = inventoryEnabled
-    ? entityType === 'provider'
-      ? 'Manage your products and activities for this venue.'
-      : 'Manage shared products and activities across all venues in this company.'
-    : entityType === 'provider'
-      ? 'Inventory is currently disabled. Enable to manage products and activities for your venue.'
-      : 'Inventory is currently disabled. Enable to manage shared products and activities for your company.';
-
-  // Don't show lock state until we know the user's role
-  const showLocked = !isRoleLoading && !canToggleFeature;
-
-  return (
-    <div className="flex flex-col gap-4 w-full">
-      <FeatureToggle
-        icon={<IconProducts size={48} className="fill-fill-primary" />}
-        title={title}
-        description={description}
-        enabled={inventoryEnabled}
-        onToggle={handleInventoryToggle}
-        isLocked={showLocked}
-      />
-    </div>
-  );
-};
-
-export default InventoryGeneralSettings;

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

@@ -1,97 +0,0 @@
-import React from 'react';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
-import { AVAILABLE_LANGUAGES, getLanguageLabel } from '@/i18n';
-import { useAppSettings } from '@/contexts/AppSettingsContext';
-import { IconGlobe } from '../../icons';
-import { supabase } from '@/integrations/supabase/client';
-import { Notification } from './NotificationBanner';
-
-interface LanguageSelectorProps {
-  type: 'provider' | 'company';
-  entityId: string;
-  currentLanguage: string;
-  onLanguageChange: (language: string) => void;
-  onShowNotification: (notification: Notification) => void;
-}
-
-const LanguageSelector: React.FC<LanguageSelectorProps> = ({
-  type,
-  entityId,
-  currentLanguage,
-  onLanguageChange,
-  onShowNotification,
-}) => {
-  const { settings } = useAppSettings();
-
-  // Only show languages that are enabled globally
-  const availableLanguages = AVAILABLE_LANGUAGES.filter(
-    lang => settings.supportedLanguages.includes(lang.code)
-  );
-
-  // If translation is not enabled globally, don't show the selector
-  if (!settings.languageTranslationEnabled) {
-    return (
-      <div className="flex flex-col gap-2 w-full">
-        <h3 className="text-label-primary text-base font-semibold leading-[1.2rem]">Language Settings</h3>
-        <div className="flex items-center gap-3 p-3 border border-border-primary rounded-lg bg-surface-secondary">
-          <IconGlobe size={20} className="text-fill-secondary flex-shrink-0" />
-          <span className="text-label-secondary text-sm">
-            Language translation is currently disabled. Contact your administrator to enable it.
-          </span>
-        </div>
-      </div>
-    );
-  }
-
-  const handleChange = async (newLanguage: string) => {
-    const table = type === 'provider' ? 'providers' : 'companies';
-    
-    try {
-      const { error } = await supabase
-        .from(table)
-        .update({ language: newLanguage } as any)
-        .eq('id', entityId);
-
-      if (error) throw error;
-
-      onLanguageChange(newLanguage);
-      onShowNotification({
-        type: 'success',
-        title: 'Language Updated',
-        message: `Dashboard language has been set to ${getLanguageLabel(newLanguage)}.`,
-      });
-    } catch (error) {
-      console.error('Error updating language:', error);
-      onShowNotification({
-        type: 'error',
-        title: 'Update Failed',
-        message: 'An error occurred while updating the language setting.',
-      });
-    }
-  };
-
-  return (
-    <div className="flex flex-col gap-2 w-full">
-      <h3 className="text-label-primary text-base font-semibold leading-[1.2rem]">Language Settings</h3>
-      <p className="text-label-secondary text-sm">
-        Set the display language for this dashboard. Admin users will always see the interface in English.
-      </p>
-      <div className="max-w-xs">
-        <Select value={currentLanguage} onValueChange={handleChange}>
-          <SelectTrigger className="bg-surface-secondary border-border-primary">
-            <SelectValue placeholder="Select Language" />
-          </SelectTrigger>
-          <SelectContent>
-            {availableLanguages.map((lang) => (
-              <SelectItem key={lang.code} value={lang.code}>
-                {lang.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-    </div>
-  );
-};
-
-export default LanguageSelector;

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

@@ -1,25 +0,0 @@
-import React from 'react';
-import LoadingSpinner from './LoadingSpinner';
-
-interface LoadingScreenProps {
-  message?: string;
-  size?: 'sm' | 'md' | 'lg' | 'xl';
-}
-
-const LoadingScreen: React.FC<LoadingScreenProps> = ({ 
-  message = 'Loading...', 
-  size = 'lg' 
-}) => {
-  return (
-    <div className="flex flex-col items-center justify-center flex-1 self-stretch gap-4 animate-fade-in py-12">
-      <LoadingSpinner size={size} />
-      {message && (
-        <p className="text-label-secondary text-sm font-medium animate-pulse">
-          {message}
-        </p>
-      )}
-    </div>
-  );
-};
-
-export default LoadingScreen;

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

@@ -1,41 +0,0 @@
-import React from 'react';
-import { DotLottieReact } from '@lottiefiles/dotlottie-react';
-import { useTheme } from './ThemeProvider';
-import loaderDark from '@/assets/Loader_Dark.lottie';
-import loaderLight from '@/assets/Loader_Light.lottie';
-
-interface LoadingSpinnerProps {
-  size?: 'sm' | 'md' | 'lg' | 'xl';
-  className?: string;
-}
-
-const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({ 
-  size = 'md', 
-  className = '' 
-}) => {
-  const { theme } = useTheme();
-  
-  const sizeClasses = {
-    sm: 'w-16 h-16',
-    md: 'w-24 h-24',
-    lg: 'w-32 h-32',
-    xl: 'w-48 h-48'
-  };
-
-  // Use dark loader for dark theme, light loader for light theme
-  const loaderSrc = theme === 'dark' ? loaderDark : loaderLight;
-
-  return (
-    <div className={`flex items-center justify-center ${className}`}>
-      <div className={sizeClasses[size]}>
-        <DotLottieReact
-          src={loaderSrc}
-          loop
-          autoplay
-        />
-      </div>
-    </div>
-  );
-};
-
-export default LoadingSpinner;

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

@@ -1,121 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { supabase } from '@/integrations/supabase/client';
-import { useNavigate } from 'react-router-dom';
-
-interface ManagedClient {
-  id: string;
-  name: string;
-  type: 'company' | 'venue' | 'promoter';
-  friendly_id: string;
-  avatar_url: string | null;
-}
-
-interface ManagedClientsListProps {
-  userId: string;
-}
-
-const ManagedClientsList: React.FC<ManagedClientsListProps> = ({ userId }) => {
-  const [clients, setClients] = useState<ManagedClient[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    const fetchClients = async () => {
-      setIsLoading(true);
-      try {
-        const [companiesRes, providersRes] = await Promise.all([
-          supabase
-            .from('companies')
-            .select('id, name, company_id, avatar_url')
-            .eq('account_manager_id', userId),
-          supabase
-            .from('providers')
-            .select('id, name, type, venue_id, avatar_url')
-            .eq('account_manager_id', userId),
-        ]);
-
-        const items: ManagedClient[] = [];
-
-        if (companiesRes.data) {
-          items.push(...companiesRes.data.map(c => ({
-            id: c.id,
-            name: c.name,
-            type: 'company' as const,
-            friendly_id: c.company_id || c.id.slice(0, 8),
-            avatar_url: c.avatar_url,
-          })));
-        }
-
-        if (providersRes.data) {
-          items.push(...providersRes.data.map(p => ({
-            id: p.id,
-            name: p.name,
-            type: (p.type === 'promoter' ? 'promoter' : 'venue') as ManagedClient['type'],
-            friendly_id: p.venue_id || p.id.slice(0, 8),
-            avatar_url: p.avatar_url,
-          })));
-        }
-
-        setClients(items);
-      } catch (error) {
-        console.error('Error fetching managed clients:', error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchClients();
-  }, [userId]);
-
-  if (isLoading || clients.length === 0) return null;
-
-  const typeLabel = (type: ManagedClient['type']) =>
-    type === 'company' ? 'Company' : type === 'venue' ? 'Venue' : 'Promoter';
-
-  const handleClick = (client: ManagedClient) => {
-    if (client.type === 'company') {
-      navigate(`/admin/companies/${client.id}`);
-    } else {
-      navigate(`/admin/providers/${client.id}`);
-    }
-  };
-
-  return (
-    <div className="flex flex-col gap-4 p-6 bg-surface-primary border border-border-primary rounded-lg">
-      <h2 className="text-label-primary text-lg font-semibold">Managed Clients</h2>
-      <p className="text-label-secondary text-sm">
-        {clients.length} {clients.length === 1 ? 'client' : 'clients'} assigned to this account manager.
-      </p>
-      <div className="flex flex-col gap-2">
-        {clients.map(client => (
-          <button
-            key={`${client.type}-${client.id}`}
-            type="button"
-            onClick={() => handleClick(client)}
-            className="flex items-center gap-3 p-4 bg-surface-secondary border border-border-primary rounded-lg text-left w-full hover:bg-surface-primary-hover transition-colors"
-          >
-            <div className="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 overflow-hidden bg-fill-secondary/20 border border-border-primary">
-              {client.avatar_url ? (
-                <img src={client.avatar_url} alt={client.name} className="w-full h-full object-cover" />
-              ) : (
-                <span className="text-label-secondary font-bold text-sm">
-                  {client.name[0]?.toUpperCase() || '?'}
-                </span>
-              )}
-            </div>
-            <div className="flex flex-col gap-0.5 flex-1">
-              <span className="text-label-primary font-medium text-sm">{client.name}</span>
-              <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">
-                  {typeLabel(client.type)} ID: {client.friendly_id}
-                </span>
-              </div>
-            </div>
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default ManagedClientsList;