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

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

@@ -1,251 +0,0 @@
-import React, { useState, useMemo, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { IconMail, IconCreateMessage } from '../../icons';
-import { useConfigurePrefix } from '@/layouts/ConfigurePageLayout';
-import { DataTable } from './tables/DataTable';
-import { ColumnConfig, RowAction } from './tables/types';
-import { QuickFilters } from './QuickFilters';
-import { Button } from './ui/button';
-import EmptyState from './EmptyState';
-import StatusBadge from './StatusBadge';
-import { useProviderSafe } from '@/contexts/ProviderContext';
-import { supabase } from '@/integrations/supabase/client';
-
-interface EmailTemplate {
-  id: string;
-  type: string;
-  name: string;
-  isDefault: boolean;
-  status: 'active' | 'disabled';
-}
-
-const AutomationsEmailSettings: React.FC = () => {
-  const navigate = useNavigate();
-  const prefix = useConfigurePrefix();
-  const providerCtx = useProviderSafe();
-  const providerId = providerCtx?.provider?.id;
-
-  const [filter, setFilter] = useState<string>('all');
-  const [templates, setTemplates] = useState<EmailTemplate[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-
-  // Fetch templates from database
-  useEffect(() => {
-    if (!providerId) {
-      setIsLoading(false);
-      return;
-    }
-
-    const fetchTemplates = async () => {
-      setIsLoading(true);
-      const { data, error } = await supabase
-        .from('email_templates')
-        .select('id, type, name, is_default, status')
-        .eq('provider_id', providerId)
-        .order('created_at', { ascending: true });
-
-      if (!error && data) {
-        setTemplates(data.map(t => ({
-          id: t.id,
-          type: t.type,
-          name: t.name,
-          isDefault: t.is_default,
-          status: t.status as 'active' | 'disabled',
-        })));
-      }
-      setIsLoading(false);
-    };
-
-    fetchTemplates();
-  }, [providerId]);
-
-  const handleSetDefault = async (item: EmailTemplate) => {
-    if (!providerId) return;
-
-    // Unset all defaults for this type, then set the new one
-    await supabase
-      .from('email_templates')
-      .update({ is_default: false })
-      .eq('provider_id', providerId)
-      .eq('type', item.type);
-
-    await supabase
-      .from('email_templates')
-      .update({ is_default: true })
-      .eq('id', item.id);
-
-    // Optimistic local update
-    setTemplates(prev => prev.map(t => {
-      if (t.type === item.type) {
-        return { ...t, isDefault: t.id === item.id };
-      }
-      return t;
-    }));
-  };
-
-  const handleToggleStatus = async (item: EmailTemplate) => {
-    const newStatus = item.status === 'active' ? 'disabled' : 'active';
-    await supabase
-      .from('email_templates')
-      .update({ status: newStatus })
-      .eq('id', item.id);
-
-    setTemplates(prev => prev.map(t =>
-      t.id === item.id ? { ...t, status: newStatus as 'active' | 'disabled' } : t
-    ));
-  };
-
-  const handleDelete = async (item: EmailTemplate) => {
-    await supabase
-      .from('email_templates')
-      .delete()
-      .eq('id', item.id);
-
-    setTemplates(prev => prev.filter(t => t.id !== item.id));
-  };
-
-  const handleDuplicate = async (item: EmailTemplate) => {
-    if (!providerId) return;
-
-    const { data } = await supabase
-      .from('email_templates')
-      .insert({
-        provider_id: providerId,
-        type: item.type,
-        name: `${item.name} (Clone)`,
-        is_default: false,
-        status: item.status,
-      })
-      .select('id, type, name, is_default, status')
-      .single();
-
-    if (data) {
-      setTemplates(prev => [...prev, {
-        id: data.id,
-        type: data.type,
-        name: data.name,
-        isDefault: data.is_default,
-        status: data.status as 'active' | 'disabled',
-      }]);
-    }
-  };
-
-  const filteredTemplates = useMemo(() => {
-    if (filter === 'all') return templates;
-    return templates.filter(t => t.status === filter);
-  }, [templates, filter]);
-
-  const filters = [
-    { value: 'active', label: 'Active' },
-    { value: 'disabled', label: 'Disabled' },
-  ];
-
-  const columns: ColumnConfig<EmailTemplate>[] = [
-    {
-      label: 'Template',
-      render: (item) => (
-        <div className="flex flex-col gap-0.5">
-          <span className="text-label-secondary text-[11px] font-mono leading-tight">
-            {item.type}
-          </span>
-          <span className="text-label-primary text-[13px] font-medium leading-4">
-            {item.name}
-          </span>
-        </div>
-      ),
-      width: 'flex-1',
-      className: '',
-    },
-    {
-      label: 'Status',
-      render: (item) => (
-        <div className="flex items-center gap-2 justify-end">
-          {item.isDefault && (
-            <span className="inline-flex justify-center items-center border border-colour-overlay bg-surface-secondary px-2 py-1 rounded-3xl text-label-primary text-[10px] font-mono font-medium leading-[13px]">
-              Default
-            </span>
-          )}
-          <StatusBadge status={item.status} />
-        </div>
-      ),
-      width: 'w-[160px]',
-      className: 'flex justify-end',
-      labelClassName: 'justify-end',
-    },
-  ];
-
-  const rowActions = (item: EmailTemplate): RowAction<EmailTemplate>[] => [
-    { label: 'Edit', onClick: () => navigate(`${prefix}/settings/automations/edit/${item.id}`) },
-    { label: item.status === 'active' ? 'Disable' : 'Enable', onClick: () => handleToggleStatus(item) },
-    { label: 'Duplicate', onClick: () => handleDuplicate(item) },
-    ...(!item.isDefault ? [{ label: 'Set as Default', onClick: () => handleSetDefault(item) }] : []),
-    ...(item.isDefault ? [] : [{ label: 'Delete', onClick: () => handleDelete(item), variant: 'danger' as const }]),
-  ];
-
-  const rowIcon = undefined;
-
-  if (isLoading) {
-    return null;
-  }
-
-  if (templates.length === 0) {
-    return (
-      <div className="flex flex-col gap-4 w-full">
-        <div className="flex justify-end">
-          <Button
-            variant="ghost"
-            withIcon
-            onClick={() => navigate(`${prefix}/settings/automations/create`)}
-          >
-            <IconCreateMessage size={20} className="fill-fill-secondary" />
-            Create Template
-          </Button>
-        </div>
-        <EmptyState
-          icon={<IconMail size={48} className="fill-fill-secondary" />}
-          title="No Email Templates"
-          description="Create email templates to automate your customer communications."
-        />
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-col gap-4 w-full">
-      <div className="flex items-center justify-between gap-4">
-        <QuickFilters
-          filters={filters}
-          activeFilter={filter}
-          onFilterChange={setFilter}
-        />
-        <Button
-          variant="ghost"
-          withIcon
-          onClick={() => navigate(`${prefix}/settings/automations/create`)}
-          className="flex-shrink-0"
-        >
-          <IconCreateMessage size={20} className="fill-fill-secondary" />
-          <span className="hidden sm:inline">Create Template</span>
-          <span className="sm:hidden">Create</span>
-        </Button>
-      </div>
-      <DataTable
-        data={filteredTemplates}
-        columns={columns}
-        keyExtractor={(item) => item.id}
-        rowActions={rowActions}
-        rowIcon={rowIcon}
-        onRowClick={(item) => navigate(`${prefix}/settings/automations/edit/${item.id}`)}
-        emptyState={
-          <EmptyState
-            icon={<IconMail size={48} className="fill-fill-secondary" />}
-            title="No Templates Found"
-            description="No templates match your current filters."
-          />
-        }
-      />
-    </div>
-  );
-};
-
-export default AutomationsEmailSettings;

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

@@ -1,150 +0,0 @@
-import { useState } from "react";
-import { supabase } from "@/integrations/supabase/client";
-import { IconArrowUp, IconUpload } from "../../icons";
-
-interface AvatarUploadProps {
-  userId: string;
-  currentAvatarUrl?: string | null;
-  onAvatarUpdate: (url: string | null) => void;
-  onError?: (message: string) => void;
-}
-
-export const AvatarUpload = ({ userId, currentAvatarUrl, onAvatarUpdate }: AvatarUploadProps) => {
-  const [isUploading, setIsUploading] = useState(false);
-
-  const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (!file) return;
-
-    try {
-      setIsUploading(true);
-      
-      // Delete old avatar if exists
-      if (currentAvatarUrl) {
-        const oldPath = currentAvatarUrl.split('/').pop();
-        if (oldPath) {
-          await supabase.storage.from('avatars').remove([`${userId}/${oldPath}`]);
-        }
-      }
-
-      // Upload new avatar
-      const fileExt = file.name.split('.').pop();
-      const fileName = `${Date.now()}.${fileExt}`;
-      const filePath = `${userId}/${fileName}`;
-
-      const { error: uploadError } = await supabase.storage
-        .from('avatars')
-        .upload(filePath, file);
-
-      if (uploadError) throw uploadError;
-
-      // Get public URL
-      const { data: { publicUrl } } = supabase.storage
-        .from('avatars')
-        .getPublicUrl(filePath);
-
-      // Update profile
-      const { error: updateError } = await supabase
-        .from('profiles')
-        .update({ avatar_url: publicUrl })
-        .eq('id', userId);
-
-      if (updateError) throw updateError;
-
-      onAvatarUpdate(publicUrl);
-    } catch (error) {
-      console.error('Error uploading avatar:', error);
-    } finally {
-      setIsUploading(false);
-    }
-  };
-
-  const handleDelete = async () => {
-    if (!currentAvatarUrl) return;
-
-    try {
-      setIsUploading(true);
-      
-      const path = currentAvatarUrl.split('/').pop();
-      if (path) {
-        await supabase.storage.from('avatars').remove([`${userId}/${path}`]);
-      }
-
-      const { error } = await supabase
-        .from('profiles')
-        .update({ avatar_url: null })
-        .eq('id', userId);
-
-      if (error) throw error;
-
-      onAvatarUpdate(null);
-    } catch (error) {
-      console.error('Error deleting avatar:', error);
-    } finally {
-      setIsUploading(false);
-    }
-  };
-
-  return (
-    <div className="flex items-start gap-6">
-      {/* Avatar Circle */}
-      <label className="cursor-pointer group flex-shrink-0">
-        <input
-          type="file"
-          accept="image/jpeg,image/png,image/webp"
-          onChange={handleFileSelect}
-          disabled={isUploading}
-          className="hidden"
-        />
-        <div className="w-[92px] h-[92px] rounded-full bg-surface-secondary border-2 border-border flex items-center justify-center overflow-hidden relative">
-          {currentAvatarUrl ? (
-            <>
-              <img src={currentAvatarUrl} alt="Profile" className="w-full h-full object-cover" />
-              <div className="absolute inset-0 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/60">
-                <IconUpload className="w-8 h-8 fill-white text-white" size={32} />
-              </div>
-            </>
-          ) : (
-            <IconArrowUp className="w-8 h-8 fill-fill-secondary" />
-          )}
-        </div>
-      </label>
-
-      {/* Text Content */}
-      <div className="flex-1 text-left">
-        <h3 className="text-label-primary text-lg font-semibold mb-2">
-          Upload a profile image
-        </h3>
-        <p className="text-label-secondary text-[15px] mb-4">
-          Images should be square and 1080px x 1080px as a JPEG, PNG, or WEBP file.
-        </p>
-
-        {/* Action Buttons */}
-        <div className="flex gap-4">
-          <label className="cursor-pointer">
-            <input
-              type="file"
-              accept="image/jpeg,image/png,image/webp"
-              onChange={handleFileSelect}
-              disabled={isUploading}
-              className="hidden"
-            />
-            <span className="text-actions-regular text-[15px] font-medium hover:underline transition-colors">
-              {currentAvatarUrl ? 'Replace' : 'Upload'}
-            </span>
-          </label>
-          
-          {currentAvatarUrl && (
-            <button
-              onClick={handleDelete}
-              disabled={isUploading}
-              className="text-label-danger text-[15px] font-medium hover:underline transition-colors disabled:opacity-50"
-            >
-              Delete
-            </button>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};

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

@@ -1,268 +0,0 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { format, startOfDay, endOfDay, startOfYear } from 'date-fns';
-import { supabase } from '@/integrations/supabase/client';
-import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
-import { ScrollArea } from './ui/scroll-area';
-
-interface BookingWithProvider {
-  id: string;
-  total_amount: number;
-  net_amount: number;
-  created_at: string;
-  provider: {
-    id: string;
-    name: string;
-    avatar_url: string | null;
-  } | null;
-}
-
-interface BookingsSummaryCardProps {
-  className?: string;
-}
-
-const CACHE_DURATION_MS = 5 * 60 * 1000; // 5 minutes
-
-const BookingsSummaryCard: React.FC<BookingsSummaryCardProps> = ({ className = '' }) => {
-  const [bookings, setBookings] = useState<BookingWithProvider[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [totalRevenue, setTotalRevenue] = useState(0);
-  const [totalFees, setTotalFees] = useState(0);
-  const [ytdRevenue, setYtdRevenue] = useState(0);
-  const [ytdFees, setYtdFees] = useState(0);
-  const lastFetchRef = useRef<number>(0);
-
-  const calculateTotals = useCallback((bookingsList: BookingWithProvider[]) => {
-    const revenue = bookingsList.reduce((sum, b) => sum + (b.total_amount || 0), 0);
-    const fees = bookingsList.reduce((sum, b) => sum + ((b.total_amount || 0) - (b.net_amount || 0)), 0);
-    setTotalRevenue(revenue);
-    setTotalFees(fees);
-  }, []);
-
-  const fetchYTDTotals = useCallback(async () => {
-    const today = new Date();
-    const yearStart = startOfYear(today).toISOString();
-    const dayEnd = endOfDay(today).toISOString();
-
-    const { data, error } = await supabase
-      .from('bookings')
-      .select('total_amount, net_amount')
-      .eq('type', 'booking')
-      .gte('created_at', yearStart)
-      .lte('created_at', dayEnd);
-
-    if (error) {
-      console.error('Error fetching YTD bookings:', error);
-      return;
-    }
-
-    const ytdRev = (data || []).reduce((sum, b) => sum + (b.total_amount || 0), 0);
-    const ytdFee = (data || []).reduce((sum, b) => sum + ((b.total_amount || 0) - (b.net_amount || 0)), 0);
-    setYtdRevenue(ytdRev);
-    setYtdFees(ytdFee);
-  }, []);
-
-  const fetchBookings = useCallback(async (force = false) => {
-    const now = Date.now();
-    
-    // Check cache unless forced
-    if (!force && lastFetchRef.current && (now - lastFetchRef.current) < CACHE_DURATION_MS) {
-      return;
-    }
-
-    setLoading(true);
-    
-    const today = new Date();
-    const dayStart = startOfDay(today).toISOString();
-    const dayEnd = endOfDay(today).toISOString();
-
-    const { data, error } = await supabase
-      .from('bookings')
-      .select(`
-        id,
-        total_amount,
-        net_amount,
-        created_at,
-        provider:providers(id, name, avatar_url)
-      `)
-      .eq('type', 'booking')
-      .gte('created_at', dayStart)
-      .lte('created_at', dayEnd)
-      .order('created_at', { ascending: false });
-
-    if (error) {
-      console.error('Error fetching bookings:', error);
-      setLoading(false);
-      return;
-    }
-
-    const typedData = (data || []) as BookingWithProvider[];
-    setBookings(typedData);
-    calculateTotals(typedData);
-    lastFetchRef.current = now;
-    setLoading(false);
-  }, [calculateTotals]);
-
-  // Initial fetch and interval refresh
-  useEffect(() => {
-    fetchBookings(true);
-    fetchYTDTotals();
-    
-    const interval = setInterval(() => {
-      fetchBookings(true);
-      fetchYTDTotals();
-    }, CACHE_DURATION_MS);
-
-    return () => clearInterval(interval);
-  }, [fetchBookings, fetchYTDTotals]);
-
-  // Real-time subscription for new bookings
-  useEffect(() => {
-    const channel = supabase
-      .channel('bookings-realtime')
-      .on(
-        'postgres_changes',
-        {
-          event: 'INSERT',
-          schema: 'public',
-          table: 'bookings',
-        },
-        async (payload) => {
-          const newBooking = payload.new as any;
-          
-          // Only process bookings from today
-          const today = new Date();
-          const bookingDate = new Date(newBooking.created_at);
-          if (bookingDate < startOfDay(today) || bookingDate > endOfDay(today)) {
-            return;
-          }
-          
-          // Only process bookings, not enquiries
-          if (newBooking.type !== 'booking') {
-            return;
-          }
-
-          // Fetch provider info for the new booking
-          const { data: providerData } = await supabase
-            .from('providers')
-            .select('id, name, avatar_url')
-            .eq('id', newBooking.provider_id)
-            .maybeSingle();
-
-          const bookingWithProvider: BookingWithProvider = {
-            id: newBooking.id,
-            total_amount: newBooking.total_amount,
-            net_amount: newBooking.net_amount,
-            created_at: newBooking.created_at,
-            provider: providerData,
-          };
-
-          setBookings(prev => {
-            const updated = [bookingWithProvider, ...prev];
-            calculateTotals(updated);
-            return updated;
-          });
-
-          // Update YTD totals
-          setYtdRevenue(prev => prev + (bookingWithProvider.total_amount || 0));
-          setYtdFees(prev => prev + ((bookingWithProvider.total_amount || 0) - (bookingWithProvider.net_amount || 0)));
-        }
-      )
-      .subscribe();
-
-    return () => {
-      supabase.removeChannel(channel);
-    };
-  }, [calculateTotals]);
-
-  const formatCurrency = (amount: number) => {
-    return new Intl.NumberFormat('en-GB', {
-      style: 'currency',
-      currency: 'GBP',
-    }).format(amount);
-  };
-
-  const getInitials = (name: string) => {
-    return name
-      .split(' ')
-      .map(n => n[0])
-      .join('')
-      .toUpperCase()
-      .slice(0, 2);
-  };
-
-  return (
-    <div className={`bg-surface-secondary rounded-xl border border-border-primary flex flex-col ${className}`}>
-      {/* Summary Header */}
-      <div className="p-4 border-b border-border-primary">
-        <div className="grid grid-cols-2 gap-4">
-          {/* Today's Metrics */}
-          <div>
-            <p className="text-label-secondary text-[11px] font-medium uppercase tracking-wide mb-1">Today</p>
-            <p className="text-label-primary text-2xl font-bold">{formatCurrency(totalRevenue)}</p>
-            <p className="text-label-secondary text-[12px] mt-1">
-              Fees: {formatCurrency(totalFees)}
-            </p>
-          </div>
-          {/* YTD Metrics */}
-          <div>
-            <p className="text-label-secondary text-[11px] font-medium uppercase tracking-wide mb-1">Year to Date</p>
-            <p className="text-label-primary text-2xl font-bold">{formatCurrency(ytdRevenue)}</p>
-            <p className="text-label-secondary text-[12px] mt-1">
-              Fees: {formatCurrency(ytdFees)}
-            </p>
-          </div>
-        </div>
-      </div>
-
-      {/* Bookings List */}
-      <ScrollArea className="flex-1 min-h-0">
-        <div className="p-2">
-          {loading && bookings.length === 0 ? (
-            <p className="text-label-secondary text-sm p-2">Loading bookings...</p>
-          ) : bookings.length === 0 ? (
-            <p className="text-label-secondary text-sm p-2">No bookings today</p>
-          ) : (
-            <div className="space-y-1">
-              {bookings.map((booking) => {
-                const fee = (booking.total_amount || 0) - (booking.net_amount || 0);
-                return (
-                  <div 
-                    key={booking.id} 
-                    className="flex items-center gap-3 p-2 rounded-lg hover:bg-surface-primary-hover transition-colors animate-fade-in"
-                  >
-                    <Avatar className="h-10 w-10 flex-shrink-0">
-                      <AvatarImage src={booking.provider?.avatar_url || undefined} />
-                      <AvatarFallback className="bg-surface-tertiary text-label-secondary text-xs">
-                        {booking.provider?.name ? getInitials(booking.provider.name) : '?'}
-                      </AvatarFallback>
-                    </Avatar>
-                    <div className="flex-1 min-w-0">
-                      <p className="text-label-primary text-sm font-semibold truncate">
-                        {booking.provider?.name || 'Unknown Provider'}
-                      </p>
-                      <p className="text-label-secondary text-xs">
-                        {format(new Date(booking.created_at), 'HH:mm')}
-                      </p>
-                    </div>
-                    <div className="text-right flex-shrink-0">
-                      <p className="text-label-primary text-sm font-semibold">
-                        {formatCurrency(booking.total_amount)}
-                      </p>
-                      {fee > 0 && (
-                        <p className="text-label-secondary text-[11px]">
-                          Fee: {formatCurrency(fee)}
-                        </p>
-                      )}
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          )}
-        </div>
-      </ScrollArea>
-    </div>
-  );
-};
-
-export default BookingsSummaryCard;