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

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

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

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

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

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