@licklist/design 0.78.5-dev.92 → 0.78.5-dev.94

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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,82 @@
+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

@@ -0,0 +1,97 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,121 @@
+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;