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

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

@@ -1,688 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useLocation, useNavigate, useParams } from 'react-router-dom';
-import { IconUpdate, IconListView, IconGridView, IconCalendar, IconPlusThick } from '../../icons';
-import { Button } from './ui/button';
-import { Input } from './ui/input';
-import { FlowCard } from './FlowCard';
-import { DataTable } from './tables';
-import { ColumnConfig, RowAction } from './tables/types';
-import { Badge } from './ui/badge';
-import { supabase } from '@/integrations/supabase/client';
-import LoadingSpinner from './LoadingSpinner';
-import { useNotify } from '../hooks/useNotify';
-import EmptyState from './EmptyState';
-import { BookingsIcon } from './emptyStateIcons';
-import { QuickFilters } from './QuickFilters';
-import { DiaryView } from './DiaryView';
-import { ScheduleView } from './ScheduleView';
-import { SessionDetailView } from './SessionDetailView';
-import { QuickAddPanel } from './QuickAddPanel';
-import { useProviderSafe } from '@/contexts/ProviderContext';
-import { format, addDays } from 'date-fns';
-
-interface Flow {
-  id: string;
-  type: 'booking' | 'enquiry';
-  reference_number: string;
-  created_at: string;
-  customer_name: string;
-  customer_email: string | null;
-  total_amount: number;
-  net_amount: number;
-  activity_name: string;
-  booking_date: string;
-  booking_time_start: string;
-  booking_time_end: string | null;
-  status: string;
-  tags: string[];
-}
-
-interface FlowsContentProps {
-  providerId?: string;
-  companyId?: string;
-  showDiaryView?: boolean;
-  showScheduleView?: boolean;
-  onSessionDetailChange?: (isViewingDetail: boolean) => void;
-  onAddFlow?: () => void;
-}
-
-interface Zone {
-  id: string;
-  name: string;
-}
-
-interface SessionSlot {
-  productId: string;
-  productName: string;
-  startTime: string;
-  endTime: string;
-  capacity: number;
-  bookedCount: number;
-  bookings: Flow[];
-}
-
-type ViewMode = 'list' | 'grid' | 'diary' | 'schedule';
-type FilterType = 'all' | 'bookings' | 'enquiries' | 'made_today' | 'for_today';
-type DiaryFilterType = 'today' | 'tomorrow';
-type ZoneFilterType = 'all' | string;
-
-const statusColors: Record<string, string> = {
-  active: 'bg-surface-status-success text-label-status-success border-border-status-success',
-  cancelled: 'bg-surface-status-error text-label-status-error border-border-status-error',
-  declined: 'bg-surface-status-error text-label-status-error border-border-status-error',
-  initial_contact: 'bg-surface-status-info text-label-status-info border-border-status-info',
-  action_required: 'bg-surface-status-warning text-label-status-warning border-border-status-warning',
-  ready_to_convert: 'bg-surface-status-success text-label-status-success border-border-status-success',
-};
-
-const formatStatus = (status: string): string => {
-  return status
-    .split('_')
-    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(' ');
-};
-
-export const FlowsContent: React.FC<FlowsContentProps> = ({ 
-  providerId, 
-  companyId, 
-  showDiaryView = true,
-  showScheduleView = false,
-  onSessionDetailChange,
-  onAddFlow,
-}) => {
-  const location = useLocation();
-  const navigate = useNavigate();
-  const { showSuccess, showError, showInfo } = useNotify();
-  const { companyId: urlCompanyId, providerId: urlProviderId } = useParams<{ companyId?: string; providerId?: string }>();
-  const providerContext = useProviderSafe();
-  const provider = providerContext?.provider ?? null;
-  const navigationState = location.state as { preserveDiaryView?: boolean; preserveView?: string } | null;
-  
-  // Initialize viewMode as null until provider loads
-  const [viewMode, setViewMode] = useState<ViewMode | null>(null);
-  
-  // Session detail state for schedule view
-  const [selectedSession, setSelectedSession] = useState<SessionSlot | null>(null);
-  const [sessionDate, setSessionDate] = useState<string>('');
-  const [sessionDateFormatted, setSessionDateFormatted] = useState<string>(''); // yyyy-MM-dd format for QuickAddPanel
-  
-  // Quick Add Panel state for schedule
-  const [isQuickAddOpen, setIsQuickAddOpen] = useState(false);
-  
-  // Track if user has manually changed the view this session
-  const sessionViewKey = `flowsViewMode-${providerId}`;
-
-  // Set viewMode once provider is loaded
-  useEffect(() => {
-    if (provider && viewMode === null) {
-      // First check navigation state for preserveView (returning from flow detail)
-      if (navigationState?.preserveView && ['list', 'grid', 'diary', 'schedule'].includes(navigationState.preserveView)) {
-        const preservedView = navigationState.preserveView as ViewMode;
-        if (preservedView === 'diary' && !showDiaryView) {
-          setViewMode(provider.default_flows_view || 'list');
-        } else if (preservedView === 'schedule' && !showScheduleView) {
-          setViewMode(provider.default_flows_view || 'list');
-        } else {
-          setViewMode(preservedView);
-        }
-        return;
-      }
-      
-      // Check navigation state (for returning from AddFlow with diary)
-      if (navigationState?.preserveDiaryView && showDiaryView) {
-        setViewMode('diary');
-        return;
-      }
-      
-      // Check for session-stored view (user's manual selection during this session)
-      const sessionView = sessionStorage.getItem(sessionViewKey) as ViewMode | null;
-      if (sessionView && ['list', 'grid', 'diary', 'schedule'].includes(sessionView)) {
-        // Validate diary is enabled if that's the stored view
-        if (sessionView === 'diary' && !showDiaryView) {
-          setViewMode(provider.default_flows_view || 'list');
-        } else if (sessionView === 'schedule' && !showScheduleView) {
-          setViewMode(provider.default_flows_view || 'list');
-        } else {
-          setViewMode(sessionView);
-        }
-        return;
-      }
-      
-      // Use provider's default view setting (first load of session)
-      const defaultView = provider.default_flows_view || 'list';
-      
-      // Only use diary/schedule if it's enabled for this view
-      if (defaultView === 'diary' && !showDiaryView) {
-        setViewMode('list');
-      } else if (defaultView === 'schedule' && !showScheduleView) {
-        setViewMode('list');
-      } else {
-        setViewMode(defaultView);
-      }
-    }
-  }, [provider, viewMode, navigationState?.preserveDiaryView, navigationState?.preserveView, showDiaryView, showScheduleView, sessionViewKey]);
-
-  // Persist view changes to sessionStorage (for navigation within session)
-  useEffect(() => {
-    if (viewMode) {
-      sessionStorage.setItem(sessionViewKey, viewMode);
-    }
-  }, [viewMode, sessionViewKey]);
-
-  // Clean up old localStorage preference (migrating to sessionStorage)
-  useEffect(() => {
-    localStorage.removeItem('flowsViewMode');
-  }, []);
-
-  const [activeFilters, setActiveFilters] = useState<string[]>(['all']);
-  const [diaryFilter, setDiaryFilter] = useState<DiaryFilterType>('today');
-  const [zoneFilter, setZoneFilter] = useState<ZoneFilterType>('all');
-  const [zones, setZones] = useState<Zone[]>([]);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [flows, setFlows] = useState<Flow[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-
-  // Clear the navigation state after using it
-  useEffect(() => {
-    if (navigationState?.preserveDiaryView) {
-      window.history.replaceState({}, document.title);
-    }
-  }, [navigationState]);
-
-  // Fetch zones for the provider
-  useEffect(() => {
-    if (providerId) {
-      fetchZones();
-    }
-  }, [providerId]);
-
-  const fetchZones = async () => {
-    try {
-      const { data, error } = await supabase
-        .from('zones')
-        .select('id, name')
-        .eq('provider_id', providerId)
-        .eq('status', 'active')
-        .order('display_order');
-
-      if (error) throw error;
-      setZones(data || []);
-    } catch (error) {
-      console.error('Error fetching zones:', error);
-    }
-  };
-
-  useEffect(() => {
-    fetchFlows();
-  }, [providerId, companyId, activeFilters]);
-
-  const fetchFlows = async () => {
-    setIsLoading(true);
-    try {
-      let query = supabase
-        .from('bookings')
-        .select('*')
-        .order('created_at', { ascending: false });
-
-      // CRITICAL: Filter by provider or company to avoid loading ALL flows
-      if (providerId) {
-        query = query.eq('provider_id', providerId);
-      } else if (companyId) {
-        // For company-level flows, get provider IDs first then filter
-        const { data: companyProviders } = await supabase
-          .from('providers')
-          .select('id')
-          .eq('company_id', companyId);
-        
-        if (companyProviders && companyProviders.length > 0) {
-          const providerIds = companyProviders.map(p => p.id);
-          query = query.in('provider_id', providerIds);
-        } else {
-          // No providers in company, no bookings to show
-          setFlows([]);
-          setIsLoading(false);
-          return;
-        }
-      }
-
-      const today = new Date().toISOString().split('T')[0];
-      const isAllActive = activeFilters.length === 0 || (activeFilters.length === 1 && activeFilters[0] === 'all');
-
-      if (!isAllActive) {
-        // Type group filter
-        if (activeFilters.includes('bookings')) {
-          query = query.eq('type', 'booking');
-        } else if (activeFilters.includes('enquiries')) {
-          query = query.eq('type', 'enquiry');
-        }
-
-        // Date group filter
-        if (activeFilters.includes('made_today')) {
-          query = query.gte('created_at', `${today}T00:00:00`);
-        } else if (activeFilters.includes('for_today')) {
-          query = query.eq('booking_date', today);
-        }
-      }
-
-      // Limit results for performance
-      query = query.limit(500);
-
-      const { data, error } = await query;
-
-      if (error) throw error;
-      setFlows(data || []);
-    } catch (error) {
-      console.error('Error fetching flows:', error);
-      showError('Failed to load flows');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const filteredFlows = flows.filter(flow => {
-    if (!searchQuery) return true;
-    const search = searchQuery.toLowerCase();
-    return (
-      flow.reference_number.toLowerCase().includes(search) ||
-      flow.customer_name.toLowerCase().includes(search) ||
-      flow.customer_email?.toLowerCase().includes(search)
-    );
-  });
-
-  const formatTime = (start: string, end: string | null) => {
-    const startTime = start.slice(0, 5); // HH:mm
-    const endTime = end ? end.slice(0, 5) : '';
-    return endTime ? `${startTime} - ${endTime}` : startTime;
-  };
-
-  // Navigate to flow detail page
-  const handleFlowClick = (flowId: string) => {
-    const providerType = provider?.type === 'venue' ? 'venue' : 'promoter';
-    const currentView = viewMode || 'list';
-    
-    // Build the URL based on context
-    if (urlCompanyId && urlProviderId) {
-      // Provider within company context
-      navigate(`/company/${urlCompanyId}/${providerType}/${urlProviderId}/bookings/${flowId}`, {
-        state: { fromView: currentView }
-      });
-    } else if (urlProviderId) {
-      // Direct provider context
-      navigate(`/${providerType}/${urlProviderId}/bookings/${flowId}`, {
-        state: { fromView: currentView }
-      });
-    } else if (companyId) {
-      // Company-level bookings
-      navigate(`/company/${companyId}/bookings/${flowId}`, {
-        state: { fromView: currentView }
-      });
-    }
-  };
-
-  const formatDate = (date: string) => {
-    return new Date(date).toLocaleDateString('en-GB');
-  };
-
-  // Handle session click from ScheduleView
-  const handleSessionClick = (session: SessionSlot, dateDisplay: string, dateFormatted: string) => {
-    setSessionDate(dateDisplay);
-    setSessionDateFormatted(dateFormatted);
-    setSelectedSession(session);
-    onSessionDetailChange?.(true);
-  };
-
-  const handleBackFromSession = () => {
-    setSelectedSession(null);
-    onSessionDetailChange?.(false);
-  };
-
-  // Handle add to session from SessionDetailView
-  const handleAddToSession = () => {
-    setIsQuickAddOpen(true);
-  };
-
-  const handleQuickAddSuccess = () => {
-    // Refresh flows data
-    fetchFlows();
-    // Close quick add panel
-    setIsQuickAddOpen(false);
-  };
-
-  const columns: ColumnConfig<Flow>[] = [
-    {
-      label: 'Reference',
-      width: 'w-[160px] min-w-[160px]',
-      render: (row: Flow) => (
-        <div className="flex flex-col gap-1">
-          <Badge 
-            variant="outline" 
-            className={`text-[10px] font-mono font-bold px-2 py-0.5 rounded-full border w-fit ${
-              row.type === 'booking' 
-                ? 'bg-blue-50 dark:bg-blue-950/30 text-blue-600 dark:text-blue-400 border-blue-200 dark:border-blue-800' 
-                : 'bg-orange-50 dark:bg-orange-950/30 text-orange-600 dark:text-orange-400 border-orange-200 dark:border-orange-800'
-            }`}
-          >
-            {row.type === 'booking' ? 'BKG' : 'ENQ'}
-          </Badge>
-          <span className="text-label-primary text-sm font-semibold">
-            #{row.reference_number}
-          </span>
-          <span className="text-label-tertiary text-xs">
-            {formatDate(row.created_at)}
-          </span>
-        </div>
-      ),
-    },
-    {
-      label: 'Customer',
-      width: 'flex-1 min-w-0',
-      render: (row: Flow) => (
-        <div className="flex flex-col gap-1 min-w-0">
-          <span className="text-label-primary text-sm font-medium truncate">
-            {row.customer_name}
-          </span>
-          <span className="text-label-tertiary text-xs truncate">
-            {row.customer_email}
-          </span>
-          {row.tags.length > 0 && (
-            <div className="flex flex-wrap gap-1 mt-1">
-              {row.tags.slice(0, 2).map((tag, index) => (
-                <Badge key={index} variant="outline" className="text-[10px] px-1.5 py-0 rounded-full">
-                  {tag}
-                </Badge>
-              ))}
-              {row.tags.length > 2 && (
-                <Badge variant="outline" className="text-[10px] px-1.5 py-0 rounded-full">
-                  +{row.tags.length - 2}
-                </Badge>
-              )}
-            </div>
-          )}
-        </div>
-      ),
-    },
-    {
-      label: 'Activity',
-      width: 'flex-1 min-w-0',
-      render: (row: Flow) => (
-        <div className="flex flex-col gap-0.5 min-w-0">
-          <span className="text-label-primary text-sm font-medium truncate">
-            {row.activity_name}
-          </span>
-          <span className="text-label-tertiary text-xs">
-            {formatDate(row.booking_date)} • {formatTime(row.booking_time_start, row.booking_time_end)}
-          </span>
-        </div>
-      ),
-    },
-    {
-      label: 'Revenue',
-      width: 'w-[100px] min-w-[100px]',
-      render: (row: Flow) => (
-        <div className="flex flex-col gap-0.5">
-          <span className="text-label-primary text-sm font-semibold">
-            £{row.total_amount.toFixed(2)}
-          </span>
-          <span className="text-label-tertiary text-xs">
-            Net: £{row.net_amount.toFixed(2)}
-          </span>
-        </div>
-      ),
-    },
-    {
-      label: 'Status',
-      width: 'w-[120px] min-w-[120px]',
-      render: (row: Flow) => (
-        <Badge className={`${statusColors[row.status] || statusColors.active} text-xs px-2 py-1`}>
-          {formatStatus(row.status)}
-        </Badge>
-      ),
-    },
-  ];
-
-  const rowActions = (flow: Flow): RowAction<Flow>[] => [
-    {
-      label: 'Edit',
-      onClick: (flow) => {
-        console.log('Edit flow:', flow);
-        showInfo('Edit flow functionality coming soon');
-      },
-    },
-    {
-      label: 'Delete',
-      onClick: (flow) => {
-        console.log('Delete flow:', flow);
-        showInfo('Delete flow functionality coming soon');
-      },
-      variant: 'danger',
-    },
-  ];
-
-  // Show loading while waiting for provider to load and set viewMode
-  if (isLoading || viewMode === null) {
-    return (
-      <div className="flex items-center justify-center py-12">
-        <LoadingSpinner size="sm" />
-      </div>
-    );
-  }
-
-  if (flows.length === 0 && (activeFilters.length === 0 || (activeFilters.length === 1 && activeFilters[0] === 'all')) && !searchQuery) {
-    return (
-      <EmptyState
-        icon={<BookingsIcon />}
-        title="You have no bookings"
-        description="Bookings and enquiries will appear here."
-      />
-    );
-  }
-
-  // If viewing session detail from schedule
-  if (viewMode === 'schedule' && selectedSession) {
-    return (
-      <>
-        <SessionDetailView
-          session={selectedSession}
-          date={sessionDate}
-          dateFormatted={sessionDateFormatted}
-          onBack={handleBackFromSession}
-          onAddToSession={handleAddToSession}
-        />
-        {/* Quick Add Panel for schedule sessions */}
-        {providerId && (
-          <QuickAddPanel
-            isOpen={isQuickAddOpen}
-            onClose={() => setIsQuickAddOpen(false)}
-            onSuccess={handleQuickAddSuccess}
-            providerId={providerId}
-            providerType={provider?.type || 'venue'}
-            prefilledDate={sessionDateFormatted}
-            prefilledTime={selectedSession.startTime}
-            prefilledZoneName={selectedSession.productName}
-          />
-        )}
-      </>
-    );
-  }
-
-  return (
-    <div className="flex flex-col gap-4 w-full min-w-0">
-      {/* View Mode Toggle */}
-      <div className="flex items-center justify-between w-full">
-        <div className="flex items-center gap-1 bg-surface-primary rounded-full p-1 border border-border-primary w-fit max-sm:w-full">
-          <Button
-            variant="ghost"
-            size="sm"
-            withIcon
-            onClick={() => setViewMode('list')}
-            className={`h-8 rounded-full border-0 max-sm:flex-1 ${viewMode === 'list' ? 'bg-fill-primary text-label-white hover:bg-fill-primary hover:text-label-white' : 'hover:bg-surface-secondary'}`}
-          >
-            <IconListView className="w-4 h-4" />
-            List
-          </Button>
-          <Button
-            variant="ghost"
-            size="sm"
-            withIcon
-            onClick={() => setViewMode('grid')}
-            className={`h-8 rounded-full border-0 max-sm:flex-1 ${viewMode === 'grid' ? 'bg-fill-primary text-label-white hover:bg-fill-primary hover:text-label-white' : 'hover:bg-surface-secondary'}`}
-          >
-            <IconGridView className="w-4 h-4" />
-            Grid
-          </Button>
-          {showDiaryView && (
-            <Button
-              variant="ghost"
-              size="sm"
-              withIcon
-              onClick={() => setViewMode('diary')}
-              className={`h-8 rounded-full border-0 max-sm:flex-1 ${viewMode === 'diary' ? 'bg-fill-primary text-label-white hover:bg-fill-primary hover:text-label-white' : 'hover:bg-surface-secondary'}`}
-            >
-              <IconCalendar className="w-4 h-4" />
-              Diary
-            </Button>
-          )}
-          {showScheduleView && (
-            <Button
-              variant="ghost"
-              size="sm"
-              withIcon
-              onClick={() => setViewMode('schedule')}
-              className={`h-8 rounded-full border-0 max-sm:flex-1 ${viewMode === 'schedule' ? 'bg-fill-primary text-label-white hover:bg-fill-primary hover:text-label-white' : 'hover:bg-surface-secondary'}`}
-            >
-              <IconCalendar className="w-4 h-4" />
-              Schedule
-            </Button>
-          )}
-        </div>
-      </div>
-
-      {/* Search and Controls - Hidden in diary/schedule view */}
-      {viewMode !== 'diary' && viewMode !== 'schedule' && (
-        <div className="flex flex-col gap-3">
-          {/* Search Input */}
-          <div className="flex flex-col gap-1 min-w-0 w-full sm:max-w-[480px] max-sm:w-full">
-            <label className="text-label-primary text-[13px] font-medium">Search</label>
-            <Input
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-            />
-            <span className="text-label-secondary text-[11px] font-normal">
-              Search by name, email or reference number.
-            </span>
-          </div>
-
-          {/* Quick Filters with Refresh */}
-          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between w-full">
-            <QuickFilters
-              filters={[
-                { value: 'bookings', label: 'Bookings', group: 'type' },
-                { value: 'enquiries', label: 'Enquiries', group: 'type' },
-                { value: 'made_today', label: 'Made Today', group: 'date' },
-                { value: 'for_today', label: 'For Today', group: 'date' },
-              ]}
-              activeFilters={activeFilters}
-              onFilterChange={setActiveFilters}
-              multiSelect
-              groupDividerAfter="enquiries"
-            />
-            <div className="flex gap-2 flex-shrink-0 max-sm:self-start">
-              {onAddFlow && (
-                <Button variant="ghost" size="sm" withIcon onClick={onAddFlow}>
-                  <IconPlusThick className="w-4 h-4" />
-                  New Flow
-                </Button>
-              )}
-              <Button variant="ghost" size="sm" withIcon onClick={fetchFlows}>
-                <IconUpdate className="w-4 h-4" />
-                Refresh
-              </Button>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Refresh - mobile only, for diary/schedule views */}
-      {(viewMode === 'diary' || viewMode === 'schedule') && (
-        <div className="flex justify-end">
-          <Button variant="ghost" size="sm" withIcon onClick={fetchFlows}>
-            <IconUpdate className="w-4 h-4" />
-            Refresh
-          </Button>
-        </div>
-      )}
-
-      {/* Content */}
-      {viewMode === 'diary' ? (
-        <div className="w-full min-w-0">
-          {providerId ? (
-            <DiaryView 
-              providerId={providerId} 
-              selectedDate={diaryFilter} 
-              selectedZoneId={zoneFilter !== 'all' ? zoneFilter : undefined}
-              zoneFilters={zones}
-              onZoneFilterChange={(filter) => setZoneFilter(filter as ZoneFilterType)}
-              onFlowClick={handleFlowClick}
-            />
-          ) : (
-            <div className="text-center py-12 text-label-tertiary">
-              Diary view is only available at the provider level.
-            </div>
-          )}
-        </div>
-      ) : viewMode === 'schedule' ? (
-        <div className="w-full min-w-0">
-          {providerId ? (
-            <ScheduleView 
-              providerId={providerId}
-              onSessionClick={handleSessionClick}
-            />
-          ) : (
-            <div className="text-center py-12 text-label-tertiary">
-              Schedule view is only available at the provider level.
-            </div>
-          )}
-        </div>
-      ) : filteredFlows.length === 0 ? (
-        <div className="text-center py-12 text-label-tertiary">
-          No bookings found matching your search.
-        </div>
-      ) : (
-        <>
-          {viewMode === 'grid' && (
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-              {filteredFlows.map((flow) => (
-                <FlowCard
-                  key={flow.id}
-                  id={flow.id}
-                  type={flow.type}
-                  referenceNumber={flow.reference_number}
-                  date={flow.created_at}
-                  customerName={flow.customer_name}
-                  customerEmail={flow.customer_email || ''}
-                  totalAmount={flow.total_amount}
-                  netAmount={flow.net_amount}
-                  activityName={flow.activity_name}
-                  bookingTime={`${formatDate(flow.booking_date)} • ${formatTime(flow.booking_time_start, flow.booking_time_end)}`}
-                  status={flow.status}
-                  tags={flow.tags}
-                  onClick={handleFlowClick}
-                />
-              ))}
-            </div>
-          )}
-
-          {viewMode === 'list' && (
-            <DataTable<Flow>
-              data={filteredFlows}
-              columns={columns}
-              keyExtractor={(flow) => flow.id}
-              rowActions={rowActions}
-              onRowClick={(flow) => handleFlowClick(flow.id)}
-            />
-          )}
-        </>
-      )}
-    </div>
-  );
-};