update
This commit is contained in:
Joyce
@@ -16,6 +16,11 @@ import {
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from '@/components/ui/popover';
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetTrigger,
|
||||
} from '@/components/ui/sheet';
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
@@ -62,8 +67,8 @@ interface SettingsState {
|
||||
const defaultSettings: SettingsState = {
|
||||
showPartialAvailability: false,
|
||||
displayTimezone: getUserTimezone(),
|
||||
showSecondaryTimezone: false,
|
||||
secondaryTimezone: 'America/Toronto', // Company timezone as default secondary
|
||||
showSecondaryTimezone: true,
|
||||
secondaryTimezone: 'America/Montreal', // Company timezone as default secondary
|
||||
};
|
||||
|
||||
function apiToParticipant(p: ParticipantAPI): Participant {
|
||||
@@ -90,7 +95,7 @@ const Index = ({ defaultTab = 'schedule' }: IndexProps) => {
|
||||
const [availabilitySlots, setAvailabilitySlots] = useState<TimeSlot[]>([]);
|
||||
const [selectedSlot, setSelectedSlot] = useState<TimeSlot | null>(null);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [useRedesign, setUseRedesign] = useState(false);
|
||||
const [useRedesign, setUseRedesign] = useState(true);
|
||||
const [settings, setSettings] = useState<SettingsState>(defaultSettings);
|
||||
const [weekOffset, setWeekOffset] = useState(0);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
@@ -316,110 +321,111 @@ const Index = ({ defaultTab = 'schedule' }: IndexProps) => {
|
||||
>
|
||||
<RefreshCw className={`w-5 h-5 ${isSyncing ? 'animate-spin' : ''}`} />
|
||||
</Button>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Sheet>
|
||||
<SheetTrigger asChild>
|
||||
<Button variant="ghost" size="icon">
|
||||
<Settings className="w-5 h-5" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-80" align="end">
|
||||
<div className="space-y-4">
|
||||
<h4 className="font-medium">Settings</h4>
|
||||
|
||||
<div className="flex items-center justify-between gap-4 pb-4 border-b border-border">
|
||||
<Label htmlFor="use-redesign" className="text-sm cursor-pointer font-medium text-primary">
|
||||
Try New Design
|
||||
</Label>
|
||||
<Switch
|
||||
id="use-redesign"
|
||||
checked={useRedesign}
|
||||
onCheckedChange={setUseRedesign}
|
||||
/>
|
||||
</SheetTrigger>
|
||||
<SheetContent side="right" className="w-[300px] sm:w-[350px]">
|
||||
<div className="space-y-6 py-4">
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-semibold text-lg tracking-tight">Settings</h4>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Configure your calendar preferences.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<Label htmlFor="partial-availability" className="text-sm cursor-pointer">
|
||||
Show partial availability
|
||||
</Label>
|
||||
<Switch
|
||||
id="partial-availability"
|
||||
checked={settings.showPartialAvailability}
|
||||
onCheckedChange={(checked) =>
|
||||
setSettings((prev) => ({ ...prev, showPartialAvailability: checked }))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
When enabled, shows time slots where only some participants are available.
|
||||
</p>
|
||||
|
||||
<div className="border-t border-border pt-4">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<Label htmlFor="secondary-timezone" className="text-sm cursor-pointer">
|
||||
Show secondary timezone
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between gap-4 pb-4 border-b border-border">
|
||||
<Label htmlFor="use-redesign" className="text-sm cursor-pointer font-medium text-primary">
|
||||
Try New Design
|
||||
</Label>
|
||||
<Switch
|
||||
id="secondary-timezone"
|
||||
checked={settings.showSecondaryTimezone}
|
||||
id="use-redesign"
|
||||
checked={useRedesign}
|
||||
onCheckedChange={setUseRedesign}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="space-y-0.5">
|
||||
<Label htmlFor="partial-availability" className="text-sm font-medium cursor-pointer">
|
||||
Partial Availability
|
||||
</Label>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Show slots where some are busy
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
id="partial-availability"
|
||||
checked={settings.showPartialAvailability}
|
||||
onCheckedChange={(checked) =>
|
||||
setSettings((prev) => ({ ...prev, showSecondaryTimezone: checked }))
|
||||
setSettings((prev) => ({ ...prev, showPartialAvailability: checked }))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
{settings.showSecondaryTimezone && (
|
||||
<div className="mt-3">
|
||||
<Label className="text-xs text-muted-foreground mb-2 block">
|
||||
Secondary timezone
|
||||
|
||||
<div className="border-t border-border pt-4 space-y-4">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<Label htmlFor="secondary-timezone" className="text-sm cursor-pointer">
|
||||
Show secondary timezone
|
||||
</Label>
|
||||
<TimezoneSelector
|
||||
value={settings.secondaryTimezone}
|
||||
onChange={(tz) => setSettings((prev) => ({ ...prev, secondaryTimezone: tz }))}
|
||||
<Switch
|
||||
id="secondary-timezone"
|
||||
checked={settings.showSecondaryTimezone}
|
||||
onCheckedChange={(checked) =>
|
||||
setSettings((prev) => ({ ...prev, showSecondaryTimezone: checked }))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<p className="text-xs text-muted-foreground mt-2">
|
||||
Display times in two timezones side by side.
|
||||
</p>
|
||||
</div>
|
||||
{settings.showSecondaryTimezone && (
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs text-muted-foreground block">
|
||||
Secondary timezone
|
||||
</Label>
|
||||
<TimezoneSelector
|
||||
value={settings.secondaryTimezone}
|
||||
onChange={(tz) => setSettings((prev) => ({ ...prev, secondaryTimezone: tz }))}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-border pt-4">
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
className="w-full"
|
||||
>
|
||||
Clear All Bookings
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Clear all bookings?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
This will remove all scheduled meetings from the system.
|
||||
This action cannot be undone. Calendar invites already
|
||||
sent will not be affected.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={handleClearBookings}
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
<div className="border-t border-border pt-4">
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
className="w-full"
|
||||
>
|
||||
Clear All
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
<p className="text-xs text-muted-foreground mt-2">
|
||||
Remove all scheduled meetings from the system.
|
||||
</p>
|
||||
Clear All Bookings
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Clear all bookings?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
This will remove all scheduled meetings. This cannot be undone.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={handleClearBookings}
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
>
|
||||
Clear All
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</div>
|
||||
<h2 className="text-3xl font-bold text-foreground mb-2">
|
||||
Schedule a Meeting
|
||||
@@ -482,7 +488,7 @@ const Index = ({ defaultTab = 'schedule' }: IndexProps) => {
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</main>
|
||||
</main >
|
||||
|
||||
<ScheduleModal
|
||||
isOpen={isModalOpen}
|
||||
@@ -495,7 +501,7 @@ const Index = ({ defaultTab = 'schedule' }: IndexProps) => {
|
||||
displayTimezone={settings.displayTimezone}
|
||||
onSuccess={loadAvailability}
|
||||
/>
|
||||
</div>
|
||||
</div >
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user