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

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

@@ -0,0 +1,201 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';
+import { useNotify } from '../../hooks/useNotify';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '@/contexts/AuthContext';
+import { supabase } from '@/integrations/supabase/client';
+
+const loginSchema = z.object({
+  email: z.string().email('Invalid email address'),
+  password: z.string().min(1, 'Password is required'),
+});
+
+type LoginFormData = z.infer<typeof loginSchema>;
+
+export const LoginForm: React.FC = () => {
+  const navigate = useNavigate();
+  const { signIn } = useAuth();
+  const { showSuccess, showError } = useNotify();
+  const { t } = useTranslation(['Design']);
+  const form = useForm<LoginFormData>({
+    resolver: zodResolver(loginSchema),
+    defaultValues: {
+      email: '',
+      password: '',
+    },
+  });
+
+  const onSubmit = async (data: LoginFormData) => {
+    try {
+      // Standard password-based login
+      const { error } = await signIn(data.email, data.password);
+      
+      if (error) {
+        showError('Sign in failed', error.message || 'Failed to sign in');
+        return;
+      }
+      
+      // Get user's primary role and assignments to determine dashboard
+      const { data: { user } } = await supabase.auth.getUser();
+      if (!user) {
+        showError('Authentication failed');
+        return;
+      }
+
+      // Check if user is suspended
+      const { data: profile } = await supabase
+        .from('profiles')
+        .select('status')
+        .eq('id', user.id)
+        .single();
+
+      if (profile?.status === 'suspended') {
+        // Log them out immediately
+        await supabase.auth.signOut();
+        showError('Account Suspended', 'Your account has been suspended. Please contact your administrator or account manager for assistance.');
+        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);
+        showError('Failed to determine user permissions');
+        return;
+      }
+
+      console.log('Primary role fetched:', primaryRole);
+
+      // Super admins and system admins go to admin dashboard
+      if (primaryRole === 'super_admin' || primaryRole === 'system_admin') {
+        showSuccess('Welcome back, 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;
+        showSuccess('Welcome back!');
+        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';
+          showSuccess('Welcome back!');
+          navigate(`/${providerType}/${friendlyId}`);
+          return;
+        }
+      }
+
+      // No assignments found - show error
+      showError('No dashboard access configured. Please contact your administrator.');
+      console.error('User has role but no company/provider assignments');
+    } catch (error) {
+      console.error('Login error:', error);
+      showError('An unexpected error occurred');
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form 
+        onSubmit={form.handleSubmit(onSubmit)} 
+        className="flex min-w-60 flex-col items-stretch flex-1 shrink basis-[0%] max-md:max-w-full"
+      >
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem className="mb-4">
+              <FormLabel className="text-label-primary text-[15px] font-semibold leading-[1.4]">
+                {t('emailAddress')}
+              </FormLabel>
+              <FormControl>
+                <Input
+                  type="email"
+                  placeholder=""
+                  className="border-stroke-primary bg-surface-primary text-label-primary"
+                  autoComplete="email"
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage className="text-feedback-error text-sm" />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="password"
+          render={({ field }) => (
+            <FormItem className="mb-6">
+              <FormLabel className="text-label-primary text-[15px] font-semibold leading-[1.4]">
+                {t('password')}
+              </FormLabel>
+              <FormControl>
+                <Input
+                  type="password"
+                  placeholder=""
+                  className="border-stroke-primary bg-surface-primary text-label-primary"
+                  autoComplete="current-password"
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage className="text-feedback-error text-sm" />
+              <button
+                type="button"
+                onClick={() => navigate('/auth/reset-password')}
+                className="text-label-action text-[15px] font-normal underline mt-2 inline-block"
+              >
+                {t('forgotPassword')}
+              </button>
+            </FormItem>
+          )}
+        />
+
+        <Button
+          type="submit"
+          disabled={form.formState.isSubmitting}
+          size="lg"
+          className="min-w-[150px] w-fit"
+        >
+          {form.formState.isSubmitting ? t('signingIn') : t('signIn')}
+        </Button>
+      </form>
+    </Form>
+  );
+};

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

@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import { LoginForm } from './LoginForm';
+import { AuthLayout } from './AuthLayout';
+import { IconLogin } from '../../../icons';
+import { Alert, AlertDescription } from '../ui/alert';
+
+export const LoginPanel: React.FC = () => {
+  const location = useLocation();
+  const [showSuspendedAlert, setShowSuspendedAlert] = useState(false);
+
+  useEffect(() => {
+    // Check if user was redirected due to suspension
+    const params = new URLSearchParams(location.search);
+    if (params.get('suspended') === 'true') {
+      setShowSuspendedAlert(true);
+    }
+  }, [location]);
+
+  return (
+    <AuthLayout
+      badgeLabel="Log in"
+      icon={
+        <IconLogin className="w-16 h-16 text-fill-primary" />
+      }
+      title="Log in"
+      subtitle="Access your account."
+    >
+      {showSuspendedAlert && (
+        <Alert className="mb-4 border-status-error bg-status-error/10">
+          <AlertDescription className="text-label-primary text-sm">
+            Your account has been suspended. Please contact your administrator or account manager for assistance.
+          </AlertDescription>
+        </Alert>
+      )}
+      <LoginForm />
+    </AuthLayout>
+  );
+};

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

@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+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 { supabase } from '@/integrations/supabase/client';
+
+export const ResetPasswordForm: React.FC = () => {
+  const [email, setEmail] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const navigate = useNavigate();
+  const { showSuccess, showError } = useNotify();
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!email) {
+      showError('Please enter your email address');
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      const { error } = await supabase.auth.resetPasswordForEmail(email, {
+        redirectTo: `${window.location.origin}/auth/create-password`,
+      });
+
+      if (error) {
+        showError('Reset failed', error.message || 'Failed to send reset email');
+        return;
+      }
+
+      showSuccess('Password reset email sent!', 'Check your inbox.');
+      navigate('/auth/verify-email');
+    } catch (error) {
+      showError('An unexpected error occurred');
+    } 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">
+      {/* Info text */}
+      <div className="mb-6">
+        <p className="text-label-primary text-base leading-[1.4]">
+          Password reset instructions will be sent to your email address.
+        </p>
+      </div>
+
+      <div className="mb-6">
+        <Label htmlFor="email" className="text-label-primary text-[15px] font-semibold leading-[1.4] mb-2 block">
+          Email Address
+        </Label>
+        <Input
+          id="email"
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          className="border-stroke-primary bg-surface-primary text-label-primary"
+          
+          autoComplete="email"
+        />
+      </div>
+      
+      <Button
+        type="submit"
+        disabled={isSubmitting}
+        size="lg"
+        className="mb-4 min-w-[150px] w-fit"
+      >
+        {isSubmitting ? 'Sending...' : 'Reset Password'}
+      </Button>
+
+      <p className="text-label-primary text-[15px] font-normal mb-2">
+        Already got an account?{' '}
+        <button
+          type="button"
+          onClick={() => navigate('/auth')}
+          className="text-label-action font-normal underline"
+        >
+          Log in
+        </button>
+        <span className="text-label-primary">.</span>
+      </p>
+
+      <p className="text-label-primary text-[15px] font-normal">
+        For further support{' '}
+        <a 
+          href="mailto:support@booked.it"
+          className="text-label-action font-normal underline"
+        >
+          contact us
+        </a>
+        <span className="text-label-primary">.</span>
+      </p>
+    </form>
+  );
+};

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ResetPasswordForm } from './ResetPasswordForm';
+import { AuthLayout } from './AuthLayout';
+import { IconUpdate } from '../../../icons';
+export const ResetPasswordPanel: React.FC = () => {
+  return (
+    <AuthLayout
+      badgeLabel="Reset Password"
+      icon={
+        <IconUpdate className="w-16 h-16 text-fill-primary" />
+      }
+      title="Reset Password"
+      subtitle="Regain access to your account."
+    >
+      <ResetPasswordForm />
+    </AuthLayout>
+  );
+};

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

@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from 'react';
+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';
+
+export const VerifyEmailForm: React.FC = () => {
+  const [code, setCode] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const navigate = useNavigate();
+  const { showSuccess, showError } = useNotify();
+
+  // Add dummy test code on mount for testing
+  useEffect(() => {
+    const testCode = '123456';
+    setCode(testCode);
+  }, []);
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!code || code.length !== 6) {
+      showError('Please enter a valid 6-digit code');
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      // Simulate verification
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      showSuccess('Email verified successfully!');
+      navigate('/auth/create-password');
+    } catch (error) {
+      showError('Verification failed. Please try again.');
+    } 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">
+          <Label htmlFor="code" className="text-label-primary text-[15px] font-semibold leading-[1.4] mb-2 block">
+            Verification Code
+          </Label>
+          <p className="text-label-secondary text-sm mb-4">
+            We've sent a 6-digit code to your email. Please enter it below.
+          </p>
+          <div className="flex gap-2 w-full">
+            {[0, 1, 2, 3, 4, 5].map((index) => (
+              <Input
+                key={index}
+                type="text"
+                maxLength={1}
+                className="flex-1 h-16 text-center text-2xl border-stroke-primary bg-surface-primary text-label-primary font-semibold"
+                value={code[index] || ''}
+                onChange={(e) => {
+                  const newCode = code.split('');
+                  newCode[index] = e.target.value;
+                  setCode(newCode.join(''));
+                  
+                  // Auto-focus next input
+                  if (e.target.value && index < 5) {
+                    const nextInput = e.target.parentElement?.children[index + 1] as HTMLInputElement;
+                    nextInput?.focus();
+                  }
+                }}
+                onKeyDown={(e) => {
+                  // Handle backspace
+                  if (e.key === 'Backspace' && !code[index] && index > 0) {
+                    const prevInput = e.currentTarget.parentElement?.children[index - 1] as HTMLInputElement;
+                    prevInput?.focus();
+                  }
+                }}
+              />
+            ))}
+          </div>
+        </div>
+        
+        <Button
+          type="submit"
+          disabled={isSubmitting || code.length !== 6}
+          size="lg"
+          className="mt-2 min-w-[150px] w-fit"
+        >
+          {isSubmitting ? 'Verifying...' : 'Verify Code'}
+        </Button>
+      </form>
+    </>
+  );
+};

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { VerifyEmailForm } from './VerifyEmailForm';
+import { AuthLayout } from './AuthLayout';
+import { IconMail } from '../../../icons';
+export const VerifyEmailPanel: React.FC = () => {
+  return (
+    <AuthLayout
+      badgeLabel="Verify email"
+      icon={
+        <IconMail className="w-16 h-16 text-fill-primary" />
+      }
+      title="Verify email"
+      subtitle="Check your inbox for verification."
+    >
+      <VerifyEmailForm />
+    </AuthLayout>
+  );
+};

package/src/v2/shadcn/_reference/email/EmailAttachment.tsx

@@ -0,0 +1,117 @@
+import React, { useRef, useState } from 'react';
+import { IconUpload, IconCross } from '../../../icons';
+
+interface AttachedFile {
+  name: string;
+  size: number;
+  file: File;
+}
+
+interface EmailAttachmentProps {
+  files: AttachedFile[];
+  onChange: (files: AttachedFile[]) => void;
+}
+
+const formatFileSize = (bytes: number) => {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+
+const EmailAttachment: React.FC<EmailAttachmentProps> = ({ files, onChange }) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const addFiles = (fileList: FileList | File[]) => {
+    const selectedFiles = Array.from(fileList);
+    const newFiles: AttachedFile[] = selectedFiles.map(f => ({
+      name: f.name,
+      size: f.size,
+      file: f,
+    }));
+    onChange([...files, ...newFiles]);
+  };
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) addFiles(e.target.files);
+    if (inputRef.current) inputRef.current.value = '';
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+    if (e.dataTransfer.files.length) addFiles(e.dataTransfer.files);
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+  };
+
+  const removeFile = (index: number) => {
+    onChange(files.filter((_, i) => i !== index));
+  };
+
+  return (
+    <div className="flex flex-col gap-3">
+      <h2 className="text-label-primary text-lg font-semibold">Attachments</h2>
+
+      {files.length > 0 && (
+        <div className="flex flex-col gap-2">
+          {files.map((file, index) => (
+            <div
+              key={index}
+              className="flex items-center justify-between gap-3 p-3 border border-border-primary rounded-lg"
+            >
+              <div className="flex flex-col gap-0.5 min-w-0">
+                <span className="text-label-primary text-sm font-medium truncate">{file.name}</span>
+                <span className="text-label-secondary text-xs">{formatFileSize(file.size)}</span>
+              </div>
+              <button
+                type="button"
+                onClick={() => removeFile(index)}
+                className="flex-shrink-0 p-1 hover:bg-surface-secondary rounded transition-colors"
+              >
+                <IconCross size={16} className="fill-fill-secondary" />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <input
+        ref={inputRef}
+        type="file"
+        onChange={handleFileSelect}
+        className="hidden"
+        multiple
+      />
+
+      <div
+        onDrop={handleDrop}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onClick={() => inputRef.current?.click()}
+        className={`flex flex-col items-center justify-center gap-2 p-8 border-2 border-dashed rounded-lg cursor-pointer transition-colors ${
+          isDragging
+            ? 'border-border-action bg-surface-action-soft'
+            : 'border-border-primary hover:border-border-action hover:bg-surface-action-soft'
+        }`}
+      >
+        <IconUpload size={24} className="fill-fill-secondary" />
+        <div className="flex flex-col items-center gap-0.5">
+          <span className="text-label-primary text-sm font-medium">Drag File to Upload</span>
+          <span className="text-label-action text-sm font-medium">Browse Files</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export type { AttachedFile };
+export default EmailAttachment;

package/src/v2/shadcn/_reference/email/EmailAutomation.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { Input } from '../ui/input';
+import { Label } from '../ui/label';
+import { Button } from '../ui/button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
+import { IconPlus } from '../../../icons';
+
+export interface AutomationPeriod {
+  value: string;
+  unit: string;
+}
+
+interface EmailAutomationProps {
+  periods: AutomationPeriod[];
+  onChange: (periods: AutomationPeriod[]) => void;
+}
+
+const EmailAutomation: React.FC<EmailAutomationProps> = ({ periods, onChange }) => {
+  const addPeriod = () => {
+    onChange([...periods, { value: '', unit: 'hours-before' }]);
+  };
+
+  const removePeriod = (index: number) => {
+    onChange(periods.filter((_, i) => i !== index));
+  };
+
+  const updatePeriod = (index: number, field: 'value' | 'unit', val: string) => {
+    const updated = [...periods];
+    updated[index] = { ...updated[index], [field]: val };
+    onChange(updated);
+  };
+
+  return (
+    <div className="flex flex-col gap-3">
+      <h2 className="text-label-primary text-lg font-semibold">Automation</h2>
+      <div className="flex flex-col gap-4">
+        {periods.map((period, index) => (
+          <div key={index} className="flex flex-col gap-3 p-4 border border-border-primary rounded-lg bg-surface-primary">
+            <div className="flex items-center justify-between">
+              <Label className="mb-0">Send Message</Label>
+              {periods.length > 1 && (
+                <button
+                  type="button"
+                  onClick={() => removePeriod(index)}
+                  className="text-label-danger text-xs font-medium hover:underline"
+                >
+                  Remove
+                </button>
+              )}
+            </div>
+            <div className="flex items-center gap-3">
+              <Input
+                type="number"
+                value={period.value}
+                onChange={(e) => updatePeriod(index, 'value', e.target.value)}
+                className="w-24"
+              />
+              <Select
+                value={period.unit}
+                onValueChange={(val) => updatePeriod(index, 'unit', val)}
+              >
+                <SelectTrigger className="w-[200px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="hours-before">Hours Before Booking</SelectItem>
+                  <SelectItem value="days-before">Days Before Booking</SelectItem>
+                  <SelectItem value="hours-after">Hours After Booking</SelectItem>
+                  <SelectItem value="days-after">Days After Booking</SelectItem>
+                  <SelectItem value="immediately">Immediately</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <p className="text-label-secondary text-xs">When do you want the message to be sent?</p>
+          </div>
+        ))}
+      </div>
+      <Button
+        type="button"
+        variant="ghost"
+        withIcon
+        onClick={addPeriod}
+        className="self-start"
+      >
+        <IconPlus size={16} className="fill-current" />
+        Add Automation Period
+      </Button>
+    </div>
+  );
+};
+
+export default EmailAutomation;