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

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

@@ -0,0 +1,688 @@
+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>
+  );
+};