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

package/src/v2/shadcn/_reference/ai/parseInteractiveBlocks.ts

@@ -1,142 +0,0 @@
-/**
- * Parses AI chat message content into segments of plain text and interactive blocks.
- *
- * Interactive blocks are delimited by :::interactive:<type> … ::: markers.
- * Supported types: radio-select, user-card, action-buttons
- */
-
-export type RadioOption = {
-  value: string;
-  label: string;
-  description?: string;
-};
-
-export type RadioSelectBlock = {
-  type: 'radio-select';
-  field: string;
-  options: RadioOption[];
-};
-
-export type UserCardBlock = {
-  type: 'user-card';
-  firstName: string;
-  lastName: string;
-  email: string;
-  role: string;
-  roleLabel?: string;
-  providerName?: string;
-  companyName?: string;
-};
-
-export type ActionButton = {
-  label: string;
-  action: string;
-  variant: 'primary' | 'ghost' | 'cancel' | 'destructive';
-  data?: Record<string, any>;
-};
-
-export type ActionButtonsBlock = {
-  type: 'action-buttons';
-  buttons: ActionButton[];
-};
-
-export type QuickAction = {
-  label: string;
-  action: string;
-  type?: 'message' | 'date-picker';
-};
-
-export type QuickActionsBlock = {
-  type: 'quick-actions';
-  actions: QuickAction[];
-};
-
-export type EntityCardItem = {
-  id: string;
-  name: string;
-  subtitle?: string;
-  badge?: string;
-  entityType: 'customer' | 'user' | 'provider' | 'company';
-  providerId?: string;
-  providerType?: 'venue' | 'promoter';
-};
-
-export type EntityCardBlock = {
-  type: 'entity-card';
-  items: EntityCardItem[];
-};
-
-export type InteractiveBlock = RadioSelectBlock | UserCardBlock | ActionButtonsBlock | QuickActionsBlock | EntityCardBlock;
-
-export type MessageSegment =
-  | { kind: 'text'; content: string }
-  | { kind: 'interactive'; block: InteractiveBlock };
-
-const BLOCK_REGEX = /:::interactive:([\w-]+)\n([\s\S]*?)\n:::/g;
-
-export function parseMessageContent(content: string): MessageSegment[] {
-  const segments: MessageSegment[] = [];
-  let lastIndex = 0;
-
-  for (const match of content.matchAll(BLOCK_REGEX)) {
-    const beforeText = content.slice(lastIndex, match.index);
-    if (beforeText.trim()) {
-      segments.push({ kind: 'text', content: beforeText.trim() });
-    }
-
-    const blockType = match[1];
-    const blockJson = match[2].trim();
-
-    try {
-      const parsed = JSON.parse(blockJson);
-
-      switch (blockType) {
-        case 'radio-select':
-          segments.push({
-            kind: 'interactive',
-            block: { type: 'radio-select', field: parsed.field, options: parsed.options } as RadioSelectBlock,
-          });
-          break;
-        case 'user-card':
-          segments.push({
-            kind: 'interactive',
-            block: { type: 'user-card', ...parsed } as UserCardBlock,
-          });
-          break;
-        case 'action-buttons':
-          segments.push({
-            kind: 'interactive',
-            block: { type: 'action-buttons', buttons: Array.isArray(parsed) ? parsed : parsed.buttons } as ActionButtonsBlock,
-          });
-          break;
-        case 'quick-actions':
-          segments.push({
-            kind: 'interactive',
-            block: { type: 'quick-actions', actions: Array.isArray(parsed) ? parsed : parsed.actions } as QuickActionsBlock,
-          });
-          break;
-        case 'entity-card':
-          segments.push({
-            kind: 'interactive',
-            block: { type: 'entity-card', items: Array.isArray(parsed) ? parsed : parsed.items } as EntityCardBlock,
-          });
-          break;
-        default:
-          // Unknown block type – render as text
-          segments.push({ kind: 'text', content: match[0] });
-      }
-    } catch {
-      // Invalid JSON – render as text
-      segments.push({ kind: 'text', content: match[0] });
-    }
-
-    lastIndex = (match.index ?? 0) + match[0].length;
-  }
-
-  const trailing = content.slice(lastIndex);
-  if (trailing.trim()) {
-    segments.push({ kind: 'text', content: trailing.trim() });
-  }
-
-  return segments.length > 0 ? segments : [{ kind: 'text', content }];
-}

package/src/v2/shadcn/_reference/auth/AuthLayout.tsx

@@ -1,55 +0,0 @@
-import React from 'react';
-import { AuthBackgroundGraphic } from '../../../../icons';
-import { BookedLogoNew } from '../logos/BookedLogoNew';
-
-interface AuthLayoutProps {
-  badgeLabel: string;
-  icon: React.ReactNode;
-  title: string;
-  subtitle: string;
-  children: React.ReactNode;
-}
-
-export const AuthLayout: React.FC<AuthLayoutProps> = ({
-  badgeLabel,
-  icon,
-  title,
-  subtitle,
-  children
-}) => {
-  return (
-    <>
-      <AuthBackgroundGraphic className="fixed top-0 left-0 w-[489px] h-[588px] pointer-events-none z-0" />
-      
-      <main className="shadow-lg self-center min-h-[400px] w-[846px] max-w-[calc(100%-32px)] md:max-w-[calc(100%-64px)] overflow-hidden bg-surface-primary mt-20 rounded-2xl max-md:mt-10 relative z-10">
-        {/* Header with logo and badge */}
-        <div className="flex items-center justify-between p-4 border-b border-border-primary">
-          <BookedLogoNew className="h-6" />
-          <div className="inline-flex justify-center items-center gap-2 border px-2 py-1 rounded-3xl border-colour-overlay bg-surface-tertiary">
-            <span className="text-label-primary text-[10px] font-mono font-medium leading-[13px] whitespace-nowrap">
-              {badgeLabel}
-            </span>
-          </div>
-        </div>
-        
-        <div className="pt-[42px] max-md:pt-5 pb-6 px-[42px] max-md:px-5">
-          <section className="flex w-full gap-16 max-md:gap-8 flex-wrap max-md:max-w-full relative z-10">
-            <div className="min-w-60 text-neutral-600 flex-1 shrink basis-[0%] max-w-[260px]">
-              <div className="w-full">
-                {icon}
-                <h1 className="text-label-primary text-[32px] font-bold leading-none mt-2">
-                  {title}
-                </h1>
-                <p className="text-label-secondary text-lg font-normal leading-none mt-2 max-md:mt-1">
-                  {subtitle}
-                </p>
-              </div>
-            </div>
-            
-            {children}
-          </section>
-        </div>
-      </main>
-    </>
-  );
-};

package/src/v2/shadcn/_reference/auth/CreatePasswordForm.tsx

@@ -1,285 +0,0 @@
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Button } from '../ui/button';
-import { Label } from '../ui/label';
-import { Input } from '../ui/input';
-import { useNotify } from '../../hooks/useNotify';
-import { useNavigate } from 'react-router-dom';
-import IconTick from '@/assets/Icon_Tick.svg';
-import IconCross from '@/assets/Icon_Cross.svg';
-import { supabase } from '@/integrations/supabase/client';
-
-export const CreatePasswordForm: React.FC = () => {
-  const [password, setPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [showError, setShowError] = useState(false);
-  const navigate = useNavigate();
-  const { showSuccess, showError: showNotifyError } = useNotify();
-  const { t } = useTranslation(['Design', 'User', 'Validation']);
-  
-  // Password strength calculation
-  const hasNumber = /\d/.test(password);
-  const hasCapital = /[A-Z]/.test(password);
-  const hasMinLength = password.length >= 8;
-  
-  const criteriaCount = [hasNumber, hasCapital, hasMinLength].filter(Boolean).length;
-  const allCriteriaMet = hasNumber && hasCapital && hasMinLength;
-  
-  // Strength bar color and width
-  const getStrengthColor = () => {
-    if (password.length === 0) return 'transparent';
-    if (criteriaCount <= 1) return 'var(--red-600)';
-    if (criteriaCount === 2) return 'var(--orange-500)';
-    return 'var(--green-600)';
-  };
-  
-  const getStrengthWidth = () => {
-    if (password.length === 0) return '0%';
-    if (criteriaCount <= 1) return '33%';
-    if (criteriaCount === 2) return '66%';
-    return '100%';
-  };
-  
-  const getStrengthLabel = () => {
-    if (password.length === 0) return '';
-    if (criteriaCount <= 1) return t('passwordStrengthWeak');
-    if (criteriaCount === 2) return t('passwordStrengthMedium');
-    return t('passwordStrengthStrong');
-  };
-  
-  // Password match validation
-  const passwordsMatch = password === confirmPassword && confirmPassword.length > 0;
-  const showMatchIndicator = confirmPassword.length > 0;
-  
-  const onSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    
-    if (!allCriteriaMet) {
-      setShowError(true);
-      showNotifyError(t('pleaseMeetAllPasswordRequirements', { ns: 'Validation' }));
-      return;
-    }
-    
-    if (!passwordsMatch) {
-      setShowError(true);
-      showNotifyError(t('passwordsDoNotMatch', { ns: 'Validation' }));
-      return;
-    }
-
-    setShowError(false);
-    setIsSubmitting(true);
-    try {
-      const { error } = await supabase.auth.updateUser({
-        password: password,
-      });
-
-      if (error) {
-        showNotifyError(t('updateFailed', { ns: 'User' }), error.message);
-        return;
-      }
-
-      // Clear force_password_reset flag and update password_last_changed_at
-      const { data: { user: currentUser } } = await supabase.auth.getUser();
-      if (currentUser) {
-        const { error: profileError } = await supabase
-          .from('profiles')
-          .update({
-            force_password_reset: false,
-            password_last_changed_at: new Date().toISOString()
-          })
-          .eq('id', currentUser.id);
-
-        if (profileError) {
-          console.error('Error updating profile:', profileError);
-        }
-      }
-
-      showSuccess(t('passwordUpdatedSuccessfully', { ns: 'User' }));
-
-      // Get user's primary role and assignments to determine dashboard
-      const { data: { user } } = await supabase.auth.getUser();
-      if (!user) {
-        showNotifyError(t('authenticationFailed', { ns: 'User' }));
-        navigate('/auth');
-        return;
-      }
-
-      const { data: primaryRole, error: roleError } = await supabase
-        .rpc('get_user_primary_role', { _user_id: user.id });
-
-      if (roleError) {
-        console.error('Error fetching role:', roleError);
-        showNotifyError(t('failedToDeterminePermissions', { ns: 'User' }));
-        navigate('/auth');
-        return;
-      }
-
-      // Super admins and system admins go to admin dashboard
-      if (primaryRole === 'super_admin' || primaryRole === 'system_admin') {
-        navigate('/admin');
-        return;
-      }
-
-      // For other roles, check their assignments
-      // First check for company assignments
-      const { data: companyAssignments } = await supabase
-        .from('user_companies')
-        .select('company_id')
-        .eq('user_id', user.id)
-        .limit(1);
-
-      if (companyAssignments && companyAssignments.length > 0) {
-        const companyId = companyAssignments[0].company_id;
-        navigate(`/company/${companyId}`);
-        return;
-      }
-
-      // Then check for provider assignments
-      const { data: providerAssignments } = await supabase
-        .from('user_providers')
-        .select('provider_id')
-        .eq('user_id', user.id)
-        .limit(1);
-
-      if (providerAssignments && providerAssignments.length > 0) {
-        const providerId = providerAssignments[0].provider_id;
-        
-        // Fetch provider details to get the friendly ID and type
-        const { data: provider } = await supabase
-          .from('providers')
-          .select('venue_id, type')
-          .eq('id', providerId)
-          .single();
-        
-        if (provider) {
-          const providerType = provider.type === 'venue' ? 'venue' : 'promoter';
-          const friendlyId = provider.venue_id || '01';
-          navigate(`/${providerType}/${friendlyId}`);
-          return;
-        }
-      }
-
-      // No assignments found - show error
-      showNotifyError(t('noDashboardAccess', { ns: 'User' }));
-      navigate('/auth');
-    } catch (error) {
-      showNotifyError(t('unexpectedError', { ns: 'User' }));
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  return (
-    <form onSubmit={onSubmit} className="flex min-w-60 flex-col items-stretch flex-1 shrink basis-[0%] max-md:max-w-full">
-      <div className="mb-6">
-        <p className="text-label-primary text-[15px] font-semibold leading-[1.4] mb-2">
-          {t('passwordsMustContain')}
-        </p>
-        <ul className="text-label-primary text-[15px] font-normal leading-[1.6] list-none pl-0 space-y-1">
-          <li className="flex items-center gap-2">
-            <img 
-              src={hasNumber ? IconTick : IconCross} 
-              alt="" 
-              className="w-4 h-4"
-            />
-            {t('passwordAtLeastOneNumber')}
-          </li>
-          <li className="flex items-center gap-2">
-            <img 
-              src={hasCapital ? IconTick : IconCross} 
-              alt="" 
-              className="w-4 h-4"
-            />
-            {t('passwordAtLeastOneCapital')}
-          </li>
-          <li className="flex items-center gap-2">
-            <img 
-              src={hasMinLength ? IconTick : IconCross} 
-              alt="" 
-              className="w-4 h-4"
-            />
-            {t('passwordAtLeastEightChars')}
-          </li>
-        </ul>
-      </div>
-
-      <div className="mb-4">
-        <Label htmlFor="password" className="text-label-primary text-[15px] font-semibold leading-[1.4] mb-2 block">
-          {t('password')}
-        </Label>
-        <Input
-          id="password"
-          type="password"
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-          className="border-stroke-primary bg-surface-primary text-label-primary"
-          
-        />
-        
-        {password.length > 0 && (
-          <div className="mt-2">
-            <div className="flex items-center justify-between mb-1">
-              <span className="text-label-secondary text-xs">{t('passwordStrength')}</span>
-              <span className="text-label-secondary text-xs">{getStrengthLabel()}</span>
-            </div>
-            <div className="h-1 bg-neutral-100 rounded-full overflow-hidden">
-              <div 
-                className="h-full transition-all duration-300"
-                style={{ 
-                  width: getStrengthWidth(),
-                  backgroundColor: getStrengthColor()
-                }}
-              />
-            </div>
-          </div>
-        )}
-      </div>
-
-      <div className="mb-6">
-        <Label htmlFor="confirmPassword" className="text-label-primary text-[15px] font-semibold leading-[1.4] mb-2 block">
-          {t('confirmPassword')}
-        </Label>
-        <Input
-          id="confirmPassword"
-          type="password"
-          value={confirmPassword}
-          onChange={(e) => setConfirmPassword(e.target.value)}
-          className="border-stroke-primary bg-surface-primary text-label-primary"
-          
-        />
-        
-        {showMatchIndicator && (
-          <div className="flex items-center gap-2 mt-2">
-            <img 
-              src={passwordsMatch ? IconTick : IconCross} 
-              alt="" 
-              className="w-4 h-4"
-            />
-            <span className={passwordsMatch ? 'text-feedback-success' : 'text-feedback-error'} style={{ fontSize: '13px' }}>
-              {passwordsMatch ? t('passwordsMatch') : t('passwordsDoNotMatch')}
-            </span>
-          </div>
-        )}
-      </div>
-      
-      <Button
-        type="submit"
-        disabled={isSubmitting}
-        size="lg"
-        className="min-w-[150px] w-fit"
-      >
-        {isSubmitting ? t('updatingPassword') : t('updatePassword')}
-      </Button>
-      
-      <Button
-        type="button"
-        variant="link"
-        onClick={() => navigate('/auth/reset-password')}
-        className="mt-4 p-0 h-auto"
-      >
-        {t('resetPasswordInstead')}
-      </Button>
-    </form>
-  );
-};

package/src/v2/shadcn/_reference/auth/CreatePasswordPanel.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { CreatePasswordForm } from './CreatePasswordForm';
-import { AuthLayout } from './AuthLayout';
-import { IconUser } from '../../../icons';
-export const CreatePasswordPanel: React.FC = () => {
-  const { t } = useTranslation(['User']);
-  return (
-    <AuthLayout
-      badgeLabel={t('createNewPassword')}
-      icon={
-        <IconUser className="w-16 h-16 text-fill-primary" />
-      }
-      title={t('createNewPassword')}
-      subtitle={t('createNewPasswordSubtitle')}
-    >
-      <CreatePasswordForm />
-    </AuthLayout>
-  );
-};

package/src/v2/shadcn/_reference/auth/LoginFooter.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
-
-export const LoginFooter: React.FC = () => {
-  const navigate = useNavigate();
-  const location = useLocation();
-  const isLoginPage = location.pathname === '/auth' || location.pathname === '/auth/';
-
-  if (!isLoginPage) {
-    return null;
-  }
-
-  return null;
-};