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

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

@@ -1,258 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Button } from './ui/button';
-import { Checkbox } from './ui/checkbox';
-import { Input } from './ui/input';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
-import { supabase } from '@/integrations/supabase/client';
-import { useNotify } from '../hooks/useNotify';
-import { useAuth } from '@/contexts/AuthContext';
-import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from './ui/alert-dialog';
-
-interface SecuritySettingsProps {
-  entityType: 'admin' | 'company' | 'provider';
-  entityId?: string;
-}
-
-const SecuritySettings: React.FC<SecuritySettingsProps> = ({ entityType, entityId }) => {
-  const { user } = useAuth();
-  const { showSuccess, showError } = useNotify();
-  const [enabled, setEnabled] = useState(false);
-  const [interval, setInterval] = useState<string>('');
-  const [unit, setUnit] = useState<string>('days');
-  const [isLoading, setIsLoading] = useState(true);
-  const [isSaving, setIsSaving] = useState(false);
-  const [showGlobalResetDialog, setShowGlobalResetDialog] = useState(false);
-  const [isGlobalResetLoading, setIsGlobalResetLoading] = useState(false);
-  const [isSuperAdmin, setIsSuperAdmin] = useState(false);
-
-  useEffect(() => {
-    checkUserRole();
-    fetchPasswordPolicy();
-  }, [entityType, entityId]);
-
-  const checkUserRole = async () => {
-    if (!user) return;
-
-    const { data: roles } = await supabase
-      .from('user_roles')
-      .select('role')
-      .eq('user_id', user.id);
-
-    const userRoles = roles?.map(r => r.role) || [];
-    setIsSuperAdmin(userRoles.includes('super_admin'));
-  };
-
-  const fetchPasswordPolicy = async () => {
-    try {
-      setIsLoading(true);
-      
-      const { data, error } = await supabase
-        .from('password_policies')
-        .select('*')
-        .eq('entity_type', entityType)
-        .eq('entity_id', entityId || null)
-        .maybeSingle();
-
-      if (error && error.code !== 'PGRST116') {
-        console.error('Error fetching password policy:', error);
-        return;
-      }
-
-      if (data) {
-        setEnabled(data.enabled);
-        setInterval(data.reset_interval?.toString() || '');
-        setUnit(data.reset_interval_unit || 'days');
-      }
-    } catch (error) {
-      console.error('Error fetching password policy:', error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleSave = async () => {
-    if (enabled && (!interval || parseInt(interval) <= 0)) {
-      showError('Please enter a valid interval');
-      return;
-    }
-
-    try {
-      setIsSaving(true);
-
-      const policyData = {
-        entity_type: entityType,
-        entity_id: entityId || null,
-        enabled,
-        reset_interval: enabled ? parseInt(interval) : null,
-        reset_interval_unit: enabled ? unit as 'days' | 'weeks' | 'months' | 'years' : null,
-      };
-
-      // Check if policy exists
-      const { data: existingPolicy } = await supabase
-        .from('password_policies')
-        .select('id')
-        .eq('entity_type', entityType)
-        .eq('entity_id', entityId || null)
-        .maybeSingle();
-
-      let error;
-      if (existingPolicy) {
-        // Update existing policy
-        const result = await supabase
-          .from('password_policies')
-          .update(policyData)
-          .eq('id', existingPolicy.id);
-        error = result.error;
-      } else {
-        // Insert new policy
-        const result = await supabase
-          .from('password_policies')
-          .insert([policyData]);
-        error = result.error;
-      }
-
-      if (error) throw error;
-
-      showSuccess('Password policy saved successfully');
-    } catch (error) {
-      console.error('Error saving password policy:', error);
-      showError('Failed to save password policy');
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  const handleGlobalPasswordReset = async () => {
-    try {
-      setIsGlobalResetLoading(true);
-
-      const { data, error } = await supabase.functions.invoke('global-password-reset', {
-        body: {}
-      });
-
-      if (error) throw error;
-
-      showSuccess('Global password reset triggered', `${data.affectedUsers} users will be required to reset their password on next login`);
-      setShowGlobalResetDialog(false);
-    } catch (error) {
-      console.error('Error triggering global password reset:', error);
-      showError('Failed to trigger global password reset');
-    } finally {
-      setIsGlobalResetLoading(false);
-    }
-  };
-
-  if (isLoading) {
-    return <div className="text-label-secondary">Loading security settings...</div>;
-  }
-
-  return (
-    <div className="flex flex-col gap-6">
-      <div className="flex flex-col gap-4">
-        <h3 className="text-label-primary text-lg font-semibold">Password Reset Policy</h3>
-        
-        <div className="flex items-center gap-3">
-          <Checkbox 
-            id="requirePasswordReset"
-            checked={enabled}
-            onCheckedChange={(checked) => setEnabled(checked as boolean)}
-          />
-          <label 
-            htmlFor="requirePasswordReset"
-            className="text-label-primary text-sm font-normal cursor-pointer"
-          >
-            Require periodic password reset
-          </label>
-        </div>
-
-        {enabled && (
-          <div className="flex flex-col gap-2 ml-8">
-            <label className="text-label-primary text-sm font-medium">
-              Reset password every
-            </label>
-            <div className="flex gap-3 items-center">
-              <Input
-                type="number"
-                min="1"
-                value={interval}
-                onChange={(e) => setInterval(e.target.value)}
-                className="w-24"
-                
-              />
-              <Select value={unit} onValueChange={setUnit}>
-                <SelectTrigger className="w-32">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="days">Days</SelectItem>
-                  <SelectItem value="weeks">Weeks</SelectItem>
-                  <SelectItem value="months">Months</SelectItem>
-                  <SelectItem value="years">Years</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-            {entityType === 'admin' && (
-              <p className="text-label-secondary text-xs">
-                This policy applies to system admins and super admins only
-              </p>
-            )}
-            {entityType === 'provider' && (
-              <p className="text-label-secondary text-xs">
-                This overrides the company-level policy for this provider
-              </p>
-            )}
-          </div>
-        )}
-
-        <div className="flex gap-3 mt-2">
-          <Button onClick={handleSave} disabled={isSaving}>
-            {isSaving ? 'Saving...' : 'Save'}
-          </Button>
-        </div>
-      </div>
-
-      {entityType === 'admin' && isSuperAdmin && (
-        <div className="flex flex-col gap-4 pt-6 border-t border-border-primary">
-          <h3 className="text-label-primary text-lg font-semibold">Global Password Reset</h3>
-          <p className="text-label-secondary text-sm">
-            Force all users across the entire system to reset their password on next login
-          </p>
-          <div>
-            <Button 
-              variant="destructive" 
-              onClick={() => setShowGlobalResetDialog(true)}
-            >
-              Trigger Global Password Reset
-            </Button>
-          </div>
-        </div>
-      )}
-
-      <AlertDialog open={showGlobalResetDialog} onOpenChange={setShowGlobalResetDialog}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Trigger Global Password Reset?</AlertDialogTitle>
-            <AlertDialogDescription>
-              This will require ALL users across the entire system to reset their password on next login. 
-              This action cannot be undone. Are you sure you want to proceed?
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <Button variant="ghost" onClick={() => setShowGlobalResetDialog(false)}>
-              Cancel
-            </Button>
-            <Button 
-              variant="destructive" 
-              onClick={handleGlobalPasswordReset}
-              disabled={isGlobalResetLoading}
-            >
-              {isGlobalResetLoading ? 'Processing...' : 'Yes, Reset All Passwords'}
-            </Button>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </div>
-  );
-};
-
-export default SecuritySettings;

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

@@ -1,294 +0,0 @@
-import React, { useState, useMemo } from 'react';
-import { Button } from './ui/button';
-import { Badge } from './ui/badge';
-import { Input } from './ui/input';
-import { IconArrowLeft, IconPlusThick } from '../../icons';
-import { cn } from '../lib/utils';
-
-interface Flow {
-  id: string;
-  type: 'booking' | 'enquiry';
-  reference_number: string;
-  customer_name: string;
-  customer_email?: string | null;
-  activity_name: string;
-  booking_date: string;
-  booking_time_start: string;
-  booking_time_end: string | null;
-  status: string;
-  total_amount: number;
-}
-
-interface SessionSlot {
-  productId: string;
-  productName: string;
-  startTime: string;
-  endTime: string;
-  capacity: number;
-  bookedCount: number;
-  bookings: Flow[];
-}
-
-interface SessionDetailViewProps {
-  session: SessionSlot;
-  date: string;
-  dateFormatted: string; // yyyy-MM-dd format for date comparison
-  onBack: () => void;
-  onAddToSession?: () => void;
-}
-
-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',
-};
-
-type SessionStatus = 'upcoming' | 'in_progress' | 'finished';
-
-// Parse time string to minutes from midnight
-const parseTimeToMinutes = (timeStr: string): number => {
-  const [hour, minute] = timeStr.split(':').map(Number);
-  return hour * 60 + minute;
-};
-
-// Get session status based on current time
-const getSessionStatus = (startTime: string, endTime: string, dateFormatted: string): SessionStatus => {
-  const now = new Date();
-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
-  
-  const targetDay = new Date(dateFormatted);
-  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';
-};
-
-const formatStatus = (status: string): string => {
-  return status
-    .split('_')
-    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(' ');
-};
-
-export const SessionDetailView: React.FC<SessionDetailViewProps> = ({
-  session,
-  date,
-  dateFormatted,
-  onBack,
-  onAddToSession,
-}) => {
-  const [searchQuery, setSearchQuery] = useState('');
-  
-  // Get session status
-  const sessionStatus = useMemo(() => {
-    return getSessionStatus(session.startTime, session.endTime, dateFormatted);
-  }, [session.startTime, session.endTime, dateFormatted]);
-
-  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';
-  };
-
-  // Filter bookings based on search query
-  const filteredBookings = useMemo(() => {
-    if (!searchQuery) return session.bookings;
-    const search = searchQuery.toLowerCase();
-    return session.bookings.filter((booking) =>
-      booking.reference_number.toLowerCase().includes(search) ||
-      booking.customer_name.toLowerCase().includes(search) ||
-      booking.customer_email?.toLowerCase().includes(search)
-    );
-  }, [session.bookings, searchQuery]);
-
-  // Calculate available spaces - capacity minus booked count
-  const availableSpaces = session.capacity - session.bookedCount;
-
-  // Check if session is in the past
-  const isSessionInPast = useMemo(() => {
-    const now = new Date();
-    const [hours, minutes] = session.endTime.split(':').map(Number);
-    const sessionEnd = new Date(dateFormatted);
-    sessionEnd.setHours(hours, minutes, 0, 0);
-    return sessionEnd < now;
-  }, [dateFormatted, session.endTime]);
-
-  // Can add to session only if not in the past and has available spaces
-  const canAddToSession = onAddToSession && availableSpaces > 0 && !isSessionInPast;
-
-  return (
-    <div className="flex flex-col gap-4 w-full min-w-0">
-      {/* Back Button - Standard pattern */}
-      <Button
-        variant="ghost"
-        withIcon
-        onClick={onBack}
-        className="text-label-action hover:bg-surface-action-soft w-fit"
-      >
-        <IconArrowLeft className="fill-current" />
-        Back
-      </Button>
-
-      {/* Session Info */}
-      <div className="flex flex-col gap-1">
-        <div className="flex items-center gap-2">
-          <h1 className={cn(
-            "text-xl font-semibold",
-            sessionStatus === 'finished' ? "text-label-tertiary" : "text-label-primary"
-          )}>
-            {session.productName}
-          </h1>
-          {sessionStatus === '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>
-          )}
-          {sessionStatus === '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-sm",
-          sessionStatus === 'finished' ? "text-label-quaternary" : "text-label-tertiary"
-        )}>
-          {date} • {session.startTime} - {session.endTime}
-        </span>
-      </div>
-
-      {/* Capacity Summary */}
-      <div className="flex items-center gap-4 p-4 rounded-lg border border-border-primary bg-surface-secondary">
-        <div className="flex flex-col gap-1">
-          <span className="text-label-tertiary text-sm">Session Capacity</span>
-          <Badge
-            className={cn(
-              'text-sm font-medium px-3 py-1 w-fit',
-              getCapacityColor(session.bookedCount, session.capacity)
-            )}
-          >
-            {session.bookedCount}/{session.capacity} spaces booked
-          </Badge>
-        </div>
-        <div className="flex flex-col gap-1 ml-auto">
-          <span className="text-label-tertiary text-sm">Available</span>
-          <span className="text-label-primary text-lg font-semibold">
-            {availableSpaces} {availableSpaces === 1 ? 'space' : 'spaces'}
-          </span>
-        </div>
-      </div>
-
-      {/* Add to Session Button - hidden for past sessions */}
-      {canAddToSession && (
-        <Button onClick={onAddToSession} withIcon className="w-fit">
-          <IconPlusThick className="w-4 h-4 text-white" />
-          Add to Session
-        </Button>
-      )}
-
-      {/* Bookings List */}
-      <div className="flex flex-col gap-3">
-        <div className="flex items-center justify-between">
-          <h3 className="text-label-primary font-medium">
-            Bookings ({session.bookings.length})
-          </h3>
-        </div>
-
-        {/* Search Input */}
-        {session.bookings.length > 0 && (
-          <Input
-            placeholder="Search by name, email, or reference"
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="max-w-md"
-          />
-        )}
-
-        {session.bookings.length === 0 ? (
-          <div className="text-center py-8 text-label-tertiary border border-border-primary rounded-lg bg-surface-primary">
-            <p className="text-sm">No bookings for this session yet.</p>
-          </div>
-        ) : filteredBookings.length === 0 ? (
-          <div className="text-center py-8 text-label-tertiary border border-border-primary rounded-lg bg-surface-primary">
-            <p className="text-sm">No bookings match your search.</p>
-          </div>
-        ) : (
-          <div className="flex flex-col gap-2">
-            {filteredBookings.map((booking) => (
-              <div
-                key={booking.id}
-                className="flex items-center justify-between p-4 rounded-lg border border-border-primary bg-surface-primary"
-              >
-                <div className="flex flex-col gap-1">
-                  <div className="flex items-center gap-2">
-                    <Badge
-                      variant="outline"
-                      className={cn(
-                        'text-[10px] font-mono font-bold px-2 py-0.5 rounded-full border w-fit',
-                        booking.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'
-                      )}
-                    >
-                      {booking.type === 'booking' ? 'BKG' : 'ENQ'}
-                    </Badge>
-                    <span className="text-label-primary font-medium">
-                      #{booking.reference_number}
-                    </span>
-                  </div>
-                  <span className="text-label-primary text-sm">
-                    {booking.customer_name}
-                  </span>
-                </div>
-                <div className="flex items-center gap-4">
-                  <span className="text-label-primary font-medium">
-                    £{booking.total_amount.toFixed(2)}
-                  </span>
-                  <Badge
-                    className={cn(
-                      'text-xs px-2 py-1',
-                      statusColors[booking.status] || statusColors.active
-                    )}
-                  >
-                    {formatStatus(booking.status)}
-                  </Badge>
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default SessionDetailView;

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

@@ -1,14 +0,0 @@
-import React from 'react';
-import UnifiedSidebar from './shared/UnifiedSidebar';
-import { useProviderSafe } from '@/contexts/ProviderContext';
-
-const Sidebar: React.FC = () => {
-  // Safely get provider context (returns null if not in ProviderProvider)
-  const context = useProviderSafe();
-  const provider = context?.provider || null;
-  const isLoadingProvider = context?.isLoading || false;
-
-  return <UnifiedSidebar destination="provider" provider={provider} isLoadingProvider={isLoadingProvider} />;
-};
-
-export default Sidebar;

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

@@ -1,30 +0,0 @@
-import React from 'react';
-import { useSidebar } from '@/contexts/SidebarContext';
-import { SimulationBanner } from './SimulationBanner';
-import DashboardFooter from './DashboardFooter';
-
-interface SidebarAwareLayoutProps {
-  children: React.ReactNode;
-  className?: string;
-  showFooter?: boolean;
-}
-
-export const SidebarAwareLayout: React.FC<SidebarAwareLayoutProps> = ({ children, className = '', showFooter = true }) => {
-  const { collapsed } = useSidebar();
-  
-  return (
-    <main 
-      className={`flex flex-col items-start gap-2 flex-1 w-full min-w-0 px-4 max-sm:ml-0 max-sm:mr-0 max-sm:px-4 min-h-[calc(100vh-48px)] transition-all duration-300 overflow-x-hidden justify-between ${
-        collapsed 
-          ? 'sm:ml-[72px] sm:rtl:ml-0 sm:rtl:mr-[72px]' 
-          : 'sm:ml-[268px] sm:rtl:ml-0 sm:rtl:mr-[268px]'
-      } ${className}`}
-    >
-      <SimulationBanner />
-      <div className="w-full min-w-0 max-w-full flex-1">
-        {children}
-      </div>
-      {showFooter && <DashboardFooter />}
-    </main>
-  );
-};