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

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

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

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

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