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

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

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

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

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

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