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

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

@@ -0,0 +1,112 @@
+import React from 'react';
+import { Button } from './ui/button';
+import { cn } from '../lib/utils';
+
+export interface QuickFilter {
+  value: string;
+  label: string;
+  group?: string; // Optional group for multi-select within same group
+}
+
+interface QuickFiltersBaseProps {
+  label?: string;
+  filters: QuickFilter[];
+  allFilterValue?: string;
+  groupDividerAfter?: string;
+}
+
+interface QuickFiltersSingleProps extends QuickFiltersBaseProps {
+  activeFilter: string;
+  onFilterChange: (filter: string) => void;
+  activeFilters?: never;
+  multiSelect?: false;
+}
+
+interface QuickFiltersMultiProps extends QuickFiltersBaseProps {
+  activeFilters: string[];
+  onFilterChange: (filters: string[]) => void;
+  activeFilter?: never;
+  multiSelect: true;
+}
+
+type QuickFiltersProps = QuickFiltersSingleProps | QuickFiltersMultiProps;
+
+export const QuickFilters: React.FC<QuickFiltersProps> = (props) => {
+  const {
+    label = 'Quick Filters:',
+    filters,
+    allFilterValue = 'all',
+    groupDividerAfter,
+  } = props;
+
+  const isMultiSelect = props.multiSelect === true;
+
+  // Normalize to array for internal logic
+  const activeFiltersArray = isMultiSelect 
+    ? props.activeFilters 
+    : [props.activeFilter];
+
+  const handleFilterClick = (filterValue: string) => {
+    if (isMultiSelect) {
+      const filter = filters.find(f => f.value === filterValue);
+      const filterGroup = filter?.group;
+
+      if (activeFiltersArray.includes(filterValue)) {
+        // Remove the filter
+        const newFilters = activeFiltersArray.filter(f => f !== filterValue);
+        props.onFilterChange(newFilters.length === 0 ? [allFilterValue] : newFilters);
+      } else {
+        // Add the filter - if it has a group, remove others in same group first
+        let newFilters = activeFiltersArray.filter(f => f !== allFilterValue);
+        
+        if (filterGroup) {
+          // Remove any other filter in the same group
+          const sameGroupFilters = filters.filter(f => f.group === filterGroup).map(f => f.value);
+          newFilters = newFilters.filter(f => !sameGroupFilters.includes(f));
+        }
+        
+        newFilters.push(filterValue);
+        props.onFilterChange(newFilters);
+      }
+    } else {
+      // Single select - toggle behavior: clicking active filter resets to 'all'
+      const newValue = props.activeFilter === filterValue ? allFilterValue : filterValue;
+      props.onFilterChange(newValue);
+    }
+  };
+
+  const isAllActive = isMultiSelect
+    ? activeFiltersArray.length === 0 || (activeFiltersArray.length === 1 && activeFiltersArray[0] === allFilterValue)
+    : props.activeFilter === allFilterValue;
+
+  return (
+    <div className="flex flex-wrap items-center gap-2 min-w-0">
+      <span className="text-label-secondary text-[13px] font-medium whitespace-nowrap">
+        {label}
+      </span>
+      {filters.map((filter) => {
+        const isActive = !isAllActive && activeFiltersArray.includes(filter.value);
+        return (
+          <React.Fragment key={filter.value}>
+            <Button
+              variant={isActive ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => handleFilterClick(filter.value)}
+              className={cn(
+                "text-[11px] font-mono rounded-full px-3 whitespace-nowrap min-w-0 h-8 border",
+                isActive 
+                  ? "bg-fill-primary hover:bg-fill-primary/90 active:bg-fill-primary/80 border-transparent" 
+                  : "border-border-primary"
+              )}
+            >
+              {filter.label}
+            </Button>
+            {groupDividerAfter === filter.value && (
+              <div className="w-px h-5 bg-border-primary mx-1 flex-shrink-0" />
+            )}
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+};

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

@@ -0,0 +1,410 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { supabase } from '@/integrations/supabase/client';
+import { useNotify } from '../hooks/useNotify';
+import { format, addDays, getDay } from 'date-fns';
+import { cn } from '../lib/utils';
+import { Button } from './ui/button';
+import { IconArrowLeft, IconArrowRight, IconChevronRight } from '../../icons';
+import { Badge } from './ui/badge';
+import { useProvider } from '@/contexts/ProviderContext';
+import LoadingSpinner from './LoadingSpinner';
+
+interface Product {
+  id: string;
+  name: string;
+  type: string;
+  duration: number | null;
+  capacity: number | null;
+  daily_times: string[] | null;
+  // JSON type from database
+  day_availability: unknown;
+  is_daily_availability: boolean | null;
+  zone_id: string | null;
+  resource_id: string | null;
+}
+
+interface Resource {
+  id: string;
+  name: string;
+  max_capacity: number;
+  instances: number;
+  zone_id: string;
+}
+
+interface Flow {
+  id: string;
+  type: 'booking' | 'enquiry';
+  reference_number: string;
+  customer_name: string;
+  activity_name: string;
+  booking_date: string;
+  booking_time_start: string;
+  booking_time_end: string | null;
+  status: string;
+  total_amount: number;
+}
+
+interface OpeningHour {
+  day_of_week: number;
+  is_open: boolean;
+  open_time: string;
+  close_time: string;
+}
+
+interface SessionSlot {
+  productId: string;
+  productName: string;
+  startTime: string;
+  endTime: string;
+  capacity: number;
+  bookedCount: number;
+  bookings: Flow[];
+}
+
+type SessionStatus = 'upcoming' | 'in_progress' | 'finished';
+
+// Get session status based on current time
+const getSessionStatus = (startTime: string, endTime: string, targetDate: Date): SessionStatus => {
+  const now = new Date();
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  
+  const targetDay = new Date(targetDate);
+  targetDay.setHours(0, 0, 0, 0);
+  
+  // If target date is in the past, session is finished
+  if (targetDay < today) {
+    return 'finished';
+  }
+  
+  // If target date is in the future, session is upcoming
+  if (targetDay > today) {
+    return 'upcoming';
+  }
+  
+  // Target date is today - check times
+  const currentMinutes = now.getHours() * 60 + now.getMinutes();
+  const startMinutes = parseTimeToMinutes(startTime);
+  const endMinutes = parseTimeToMinutes(endTime);
+  
+  if (currentMinutes >= endMinutes) {
+    return 'finished';
+  }
+  
+  if (currentMinutes >= startMinutes) {
+    return 'in_progress';
+  }
+  
+  return 'upcoming';
+};
+
+interface ScheduleViewProps {
+  providerId: string;
+  onSessionClick?: (session: SessionSlot, dateDisplay: string, dateFormatted: string) => void;
+}
+
+// Parse time string to minutes from midnight
+const parseTimeToMinutes = (timeStr: string): number => {
+  const [hour, minute] = timeStr.split(':').map(Number);
+  return hour * 60 + minute;
+};
+
+// Format minutes to time string
+const formatMinutesToTime = (minutes: number): string => {
+  const hour = Math.floor(minutes / 60) % 24;
+  const min = minutes % 60;
+  return `${hour.toString().padStart(2, '0')}:${min.toString().padStart(2, '0')}`;
+};
+
+export const ScheduleView: React.FC<ScheduleViewProps> = ({ providerId, onSessionClick }) => {
+  const { provider } = useProvider();
+  const { showError } = useNotify();
+  const [products, setProducts] = useState<Product[]>([]);
+  const [resources, setResources] = useState<Resource[]>([]);
+  const [flows, setFlows] = useState<Flow[]>([]);
+  const [openingHours, setOpeningHours] = useState<OpeningHour[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [dayOffset, setDayOffset] = useState(0);
+
+  // Calculate target date
+  const targetDate = addDays(new Date(), dayOffset);
+  const formattedDate = format(targetDate, 'yyyy-MM-dd');
+  const displayDate = format(targetDate, 'EEEE, d MMMM yyyy');
+  const dayOfWeek = getDay(targetDate);
+
+  // Get opening hours for this day
+  const todaysHours = openingHours.find((h) => h.day_of_week === dayOfWeek);
+  const isOpen = todaysHours?.is_open ?? false;
+
+  useEffect(() => {
+    fetchData();
+  }, [providerId, formattedDate]);
+
+  const fetchData = async () => {
+    setIsLoading(true);
+    try {
+      // Fetch opening hours
+      const { data: hoursData, error: hoursError } = await supabase
+        .from('provider_opening_hours')
+        .select('*')
+        .eq('provider_id', providerId);
+
+      if (hoursError) throw hoursError;
+      setOpeningHours(hoursData || []);
+
+      // Fetch products (activities) for this provider with fixed session availability
+      const { data: productsData, error: productsError } = await supabase
+        .from('products')
+        .select('*')
+        .eq('provider_id', providerId)
+        .eq('status', 'active')
+        .eq('type', 'activity');
+
+      if (productsError) throw productsError;
+      setProducts(productsData || []);
+
+      // Fetch zones for this provider to get resources
+      const { data: zonesData, error: zonesError } = await supabase
+        .from('zones')
+        .select('id')
+        .eq('provider_id', providerId)
+        .eq('status', 'active');
+
+      if (zonesError) throw zonesError;
+
+      // Fetch resources for all zones
+      if (zonesData && zonesData.length > 0) {
+        const zoneIds = zonesData.map(z => z.id);
+        const { data: resourcesData, error: resourcesError } = await supabase
+          .from('resources')
+          .select('id, name, max_capacity, instances, zone_id')
+          .in('zone_id', zoneIds);
+
+        if (resourcesError) throw resourcesError;
+        setResources(resourcesData || []);
+      } else {
+        setResources([]);
+      }
+
+      // Fetch flows for the selected date
+      const { data: flowsData, error: flowsError } = await supabase
+        .from('bookings')
+        .select('*')
+        .eq('provider_id', providerId)
+        .eq('booking_date', formattedDate)
+        .order('booking_time_start');
+
+      if (flowsError) throw flowsError;
+      setFlows(flowsData || []);
+    } catch (error) {
+      console.error('Error fetching schedule data:', error);
+      showError('Failed to load schedule data');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Build sessions from products
+  const sessions = useMemo(() => {
+    const sessionList: SessionSlot[] = [];
+
+    products.forEach((product) => {
+      // Check if product has daily times
+      if (!product.daily_times || product.daily_times.length === 0) return;
+
+      // Check if product is available on this day of week
+      if (!product.is_daily_availability && product.day_availability) {
+        const dayAvailability = product.day_availability as { day: number; enabled: boolean }[];
+        if (Array.isArray(dayAvailability)) {
+          const dayConfig = dayAvailability.find((d) => d.day === dayOfWeek);
+          if (!dayConfig?.enabled) return;
+        }
+      }
+
+      // Get capacity from linked resource (instances × max_capacity), fallback to product capacity
+      let sessionCapacity = product.capacity || 0;
+      if (product.resource_id) {
+        const linkedResource = resources.find(r => r.id === product.resource_id);
+        if (linkedResource) {
+          // Total capacity = number of instances × capacity per instance
+          sessionCapacity = linkedResource.instances * linkedResource.max_capacity;
+        }
+      }
+
+      // Create a session for each daily time
+      product.daily_times.forEach((startTime) => {
+        const startMinutes = parseTimeToMinutes(startTime);
+        const durationMinutes = product.duration || 60;
+        const endMinutes = startMinutes + durationMinutes;
+        const endTime = formatMinutesToTime(endMinutes);
+
+        // Count bookings for this session
+        const sessionBookings = flows.filter((flow) => {
+          const flowStart = flow.booking_time_start.slice(0, 5);
+          return (
+            flow.activity_name === product.name &&
+            flowStart === startTime &&
+            flow.status === 'active'
+          );
+        });
+
+        sessionList.push({
+          productId: product.id,
+          productName: product.name,
+          startTime,
+          endTime,
+          capacity: sessionCapacity,
+          bookedCount: sessionBookings.length,
+          bookings: sessionBookings,
+        });
+      });
+    });
+
+    // Sort by start time
+    sessionList.sort((a, b) => {
+      const aMinutes = parseTimeToMinutes(a.startTime);
+      const bMinutes = parseTimeToMinutes(b.startTime);
+      return aMinutes - bMinutes;
+    });
+
+    return sessionList;
+  }, [products, flows, resources, dayOfWeek]);
+
+  // Day pagination handlers
+  const handlePrevDay = () => setDayOffset((prev) => prev - 1);
+  const handleNextDay = () => setDayOffset((prev) => prev + 1);
+
+  // Get capacity badge color
+  const getCapacityColor = (booked: number, total: number) => {
+    if (total === 0) return 'bg-surface-secondary text-label-tertiary border-border-primary';
+    const percentage = (booked / total) * 100;
+    if (percentage >= 100) return 'bg-surface-status-error text-label-status-error border-border-status-error';
+    if (percentage >= 80) return 'bg-surface-status-warning text-label-status-warning border-border-status-warning';
+    if (percentage >= 50) return 'bg-surface-status-info text-label-status-info border-border-status-info';
+    return 'bg-surface-status-success text-label-status-success border-border-status-success';
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <LoadingSpinner size="sm" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-4 w-full min-w-0">
+      {/* Header with Date and Day Pagination */}
+      <div className="flex items-center justify-between">
+        <div className="flex flex-col gap-1">
+          <div className="text-label-primary text-lg font-semibold">{displayDate}</div>
+          {!isOpen && (
+            <span className="text-label-status-error text-sm">Closed</span>
+          )}
+        </div>
+        {/* Day Pagination Controls */}
+        <div className="flex items-center gap-2">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={handlePrevDay}
+            className="h-8 w-8 rounded-full bg-surface-action-soft hover:bg-surface-action-soft-hover text-fill-action"
+          >
+            <IconArrowLeft className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={handleNextDay}
+            className="h-8 w-8 rounded-full bg-surface-action-soft hover:bg-surface-action-soft-hover text-fill-action"
+          >
+            <IconArrowRight className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Opening & Closing Times */}
+      {isOpen && todaysHours && (
+        <div className="flex items-center gap-2 text-sm text-label-tertiary">
+          <span>Opens: {todaysHours.open_time.slice(0, 5)}</span>
+          <span>•</span>
+          <span>Closes: {todaysHours.close_time.slice(0, 5)}</span>
+        </div>
+      )}
+
+      {/* Sessions List */}
+      <div className="flex flex-col gap-2">
+        {sessions.length === 0 ? (
+          <div className="text-center py-12 text-label-tertiary">
+            <p className="text-lg font-medium mb-2">No sessions scheduled</p>
+            <p className="text-sm">
+              Add activities with fixed session times to see them here.
+            </p>
+          </div>
+        ) : (
+          sessions.map((session, index) => {
+              const status = getSessionStatus(session.startTime, session.endTime, targetDate);
+              
+              return (
+                <button
+                  key={`${session.productId}-${session.startTime}-${index}`}
+                  onClick={() => onSessionClick?.(session, displayDate, formattedDate)}
+                  className={cn(
+                    'flex items-center justify-between p-4 rounded-lg border border-border-primary',
+                    'hover:bg-surface-secondary transition-colors text-left w-full',
+                    'focus:outline-none focus:ring-2 focus:ring-fill-highlight focus:ring-offset-2',
+                    status === 'finished' ? 'bg-surface-secondary opacity-60' : 'bg-surface-primary'
+                  )}
+                >
+                  <div className="flex flex-col gap-1">
+                    <div className="flex items-center gap-2">
+                      <span className={cn(
+                        "text-label-primary font-medium text-base",
+                        status === 'finished' && "text-label-tertiary"
+                      )}>
+                        {session.productName}
+                      </span>
+                      {status === 'in_progress' && (
+                        <Badge className="bg-surface-status-success text-label-status-success border-border-status-success text-xs px-2 py-0.5">
+                          In Progress
+                        </Badge>
+                      )}
+                      {status === 'finished' && (
+                        <Badge className="bg-surface-secondary text-label-tertiary border-border-primary text-xs px-2 py-0.5">
+                          Finished
+                        </Badge>
+                      )}
+                    </div>
+                    <span className={cn(
+                      "text-label-tertiary text-sm",
+                      status === 'finished' && "text-label-quaternary"
+                    )}>
+                      {session.startTime} - {session.endTime}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <Badge
+                      className={cn(
+                        'text-sm font-medium px-3 py-1',
+                        status === 'finished' 
+                          ? 'bg-surface-secondary text-label-tertiary border-border-primary'
+                          : getCapacityColor(session.bookedCount, session.capacity)
+                      )}
+                    >
+                      {session.bookedCount}/{session.capacity} spaces
+                    </Badge>
+                    <IconChevronRight className={cn(
+                      "h-5 w-5",
+                      status === 'finished' ? "text-label-quaternary" : "text-label-tertiary"
+                    )} />
+                  </div>
+                </button>
+              );
+            })
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ScheduleView;

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

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+const ScrollToTop = () => {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+};
+
+export default ScrollToTop;

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { cn } from '../lib/utils';
+import { useUser } from '@/contexts/UserContext';
+
+export interface SecondaryNavItem {
+  label: string;
+  to: string;
+  roles?: string[]; // Optional: only show to users with these roles
+}
+
+interface SecondaryNavProps {
+  items: SecondaryNavItem[];
+}
+
+const SecondaryNav: React.FC<SecondaryNavProps> = ({ items }) => {
+  const { primaryRole } = useUser();
+  
+  // Filter items based on user role
+  const visibleItems = items.filter(item => {
+    if (!item.roles || item.roles.length === 0) {
+      return true; // Show items without role restrictions
+    }
+    // Check if user has any of the required roles
+    return primaryRole && item.roles.includes(primaryRole);
+  });
+  
+  return (
+    <nav className="flex items-start gap-6 self-stretch pt-2 pb-0 pl-2 max-sm:pt-2 max-sm:pb-0">
+      {visibleItems.map((item) => (
+        <NavLink 
+          key={item.to}
+          to={item.to}
+          end
+          className={({ isActive }) => cn(
+            "flex flex-col items-center gap-4 relative group",
+            isActive && "[&>span]:text-label-primary [&>div]:bg-fill-primary [&>div]:w-full"
+          )}
+        >
+          <span className="text-label-secondary text-[15px] font-semibold leading-[18px] group-hover:text-label-action transition-colors">
+            {item.label}
+          </span>
+          <div className="w-px h-0.5 self-center bg-transparent rounded-[3px] group-hover:bg-fill-action group-hover:w-1/2 transition-all" />
+        </NavLink>
+      ))}
+    </nav>
+  );
+};
+
+export default SecondaryNav;