410b46a896
- Add TimeBlock approval status with manager approval workflow - Create core mixins for staff permission restrictions (DenyStaffWritePermission, etc.) - Add StaffDashboard page for staff-specific views - Refactor MyAvailability page for time block management - Update field mobile status machine and views - Add per-user permission overrides via JSONField - Document core mixins and permission system in CLAUDE.md 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
534 lines
22 KiB
TypeScript
534 lines
22 KiB
TypeScript
/**
|
|
* My Availability Page
|
|
*
|
|
* Staff-facing page to view and manage their own time blocks.
|
|
* Uses the same UI as TimeBlocks but locked to the staff's own resource.
|
|
* Shows business-level blocks (read-only) and personal blocks (editable).
|
|
*/
|
|
|
|
import React, { useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useOutletContext } from 'react-router-dom';
|
|
import {
|
|
TimeBlockListItem,
|
|
BlockType,
|
|
RecurrenceType,
|
|
User,
|
|
} from '../types';
|
|
import {
|
|
useMyBlocks,
|
|
useCreateTimeBlock,
|
|
useUpdateTimeBlock,
|
|
useDeleteTimeBlock,
|
|
useToggleTimeBlock,
|
|
useHolidays,
|
|
} from '../hooks/useTimeBlocks';
|
|
import Portal from '../components/Portal';
|
|
import YearlyBlockCalendar from '../components/time-blocks/YearlyBlockCalendar';
|
|
import TimeBlockCreatorModal from '../components/time-blocks/TimeBlockCreatorModal';
|
|
import {
|
|
Calendar,
|
|
Building2,
|
|
User as UserIcon,
|
|
Plus,
|
|
Pencil,
|
|
Trash2,
|
|
AlertTriangle,
|
|
Clock,
|
|
CalendarDays,
|
|
Ban,
|
|
AlertCircle,
|
|
Power,
|
|
PowerOff,
|
|
Info,
|
|
CheckCircle,
|
|
XCircle,
|
|
HourglassIcon,
|
|
} from 'lucide-react';
|
|
|
|
type AvailabilityTab = 'blocks' | 'calendar';
|
|
|
|
const RECURRENCE_TYPE_LABELS: Record<RecurrenceType, string> = {
|
|
NONE: 'One-time',
|
|
WEEKLY: 'Weekly',
|
|
MONTHLY: 'Monthly',
|
|
YEARLY: 'Yearly',
|
|
HOLIDAY: 'Holiday',
|
|
};
|
|
|
|
const BLOCK_TYPE_LABELS: Record<BlockType, string> = {
|
|
HARD: 'Hard Block',
|
|
SOFT: 'Soft Block',
|
|
};
|
|
|
|
interface MyAvailabilityProps {
|
|
user?: User;
|
|
}
|
|
|
|
const MyAvailability: React.FC<MyAvailabilityProps> = (props) => {
|
|
const { t } = useTranslation();
|
|
const contextUser = useOutletContext<{ user?: User }>()?.user;
|
|
const user = props.user || contextUser;
|
|
|
|
const [activeTab, setActiveTab] = useState<AvailabilityTab>('blocks');
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [editingBlock, setEditingBlock] = useState<TimeBlockListItem | null>(null);
|
|
const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
|
|
|
|
// Fetch data
|
|
const { data: myBlocksData, isLoading } = useMyBlocks();
|
|
const { data: holidays = [] } = useHolidays('US');
|
|
|
|
// Mutations
|
|
const createBlock = useCreateTimeBlock();
|
|
const updateBlock = useUpdateTimeBlock();
|
|
const deleteBlock = useDeleteTimeBlock();
|
|
const toggleBlock = useToggleTimeBlock();
|
|
|
|
// Modal handlers
|
|
const openCreateModal = () => {
|
|
setEditingBlock(null);
|
|
setIsModalOpen(true);
|
|
};
|
|
|
|
const openEditModal = (block: TimeBlockListItem) => {
|
|
setEditingBlock(block);
|
|
setIsModalOpen(true);
|
|
};
|
|
|
|
const closeModal = () => {
|
|
setIsModalOpen(false);
|
|
setEditingBlock(null);
|
|
};
|
|
|
|
const handleDelete = async (id: string) => {
|
|
try {
|
|
await deleteBlock.mutateAsync(id);
|
|
setDeleteConfirmId(null);
|
|
} catch (error) {
|
|
console.error('Failed to delete time block:', error);
|
|
}
|
|
};
|
|
|
|
const handleToggle = async (id: string) => {
|
|
try {
|
|
await toggleBlock.mutateAsync(id);
|
|
} catch (error) {
|
|
console.error('Failed to toggle time block:', error);
|
|
}
|
|
};
|
|
|
|
// Render block type badge
|
|
const renderBlockTypeBadge = (type: BlockType) => (
|
|
<span
|
|
className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${
|
|
type === 'HARD'
|
|
? 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300'
|
|
: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300'
|
|
}`}
|
|
>
|
|
{type === 'HARD' ? <Ban size={12} className="mr-1" /> : <AlertCircle size={12} className="mr-1" />}
|
|
{BLOCK_TYPE_LABELS[type]}
|
|
</span>
|
|
);
|
|
|
|
// Render recurrence badge
|
|
const renderRecurrenceBadge = (type: RecurrenceType) => (
|
|
<span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300">
|
|
{type === 'HOLIDAY' ? (
|
|
<CalendarDays size={12} className="mr-1" />
|
|
) : type === 'NONE' ? (
|
|
<Clock size={12} className="mr-1" />
|
|
) : (
|
|
<Calendar size={12} className="mr-1" />
|
|
)}
|
|
{RECURRENCE_TYPE_LABELS[type]}
|
|
</span>
|
|
);
|
|
|
|
// Render approval status badge
|
|
const renderApprovalBadge = (status: string | undefined) => {
|
|
if (!status || status === 'APPROVED') {
|
|
return (
|
|
<span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
|
|
<CheckCircle size={12} className="mr-1" />
|
|
{t('myAvailability.approved', 'Approved')}
|
|
</span>
|
|
);
|
|
}
|
|
if (status === 'PENDING') {
|
|
return (
|
|
<span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300">
|
|
<HourglassIcon size={12} className="mr-1" />
|
|
{t('myAvailability.pending', 'Pending Review')}
|
|
</span>
|
|
);
|
|
}
|
|
if (status === 'DENIED') {
|
|
return (
|
|
<span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300">
|
|
<XCircle size={12} className="mr-1" />
|
|
{t('myAvailability.denied', 'Denied')}
|
|
</span>
|
|
);
|
|
}
|
|
return null;
|
|
};
|
|
|
|
// Handle no linked resource
|
|
if (!isLoading && !myBlocksData?.resource_id) {
|
|
return (
|
|
<div className="space-y-6 p-6">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">
|
|
{t('myAvailability.title', 'My Availability')}
|
|
</h1>
|
|
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
|
{t('myAvailability.subtitle', 'Manage your time off and unavailability')}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="text-center py-12 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
|
|
<AlertTriangle size={48} className="mx-auto text-yellow-500 mb-4" />
|
|
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
|
|
{t('myAvailability.noResource', 'No Resource Linked')}
|
|
</h3>
|
|
<p className="text-gray-500 dark:text-gray-400 max-w-md mx-auto">
|
|
{t('myAvailability.noResourceDesc', 'Your account is not linked to a resource. Please contact your manager to set up your availability.')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Create a mock resource for the modal
|
|
const staffResource = myBlocksData?.resource_id ? {
|
|
id: myBlocksData.resource_id,
|
|
name: myBlocksData.resource_name || 'My Resource',
|
|
} : null;
|
|
|
|
return (
|
|
<div className="space-y-6 p-6">
|
|
{/* Header */}
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">
|
|
{t('myAvailability.title', 'My Availability')}
|
|
</h1>
|
|
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
|
{t('myAvailability.subtitle', 'Manage your time off and unavailability')}
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={openCreateModal}
|
|
className="flex items-center gap-2 px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors"
|
|
>
|
|
<Plus size={18} />
|
|
{t('myAvailability.addBlock', 'Block Time')}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Approval Required Banner */}
|
|
{myBlocksData?.can_self_approve === false && (
|
|
<div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-4">
|
|
<div className="flex items-start gap-3">
|
|
<HourglassIcon size={20} className="text-amber-600 dark:text-amber-400 mt-0.5" />
|
|
<div>
|
|
<h3 className="font-medium text-amber-900 dark:text-amber-100">
|
|
{t('myAvailability.approvalRequired', 'Approval Required')}
|
|
</h3>
|
|
<p className="text-sm text-amber-700 dark:text-amber-300 mt-1">
|
|
{t('myAvailability.approvalRequiredInfo', 'Your time off requests require manager or owner approval. New blocks will show as "Pending Review" until approved.')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Business Blocks Info Banner */}
|
|
{myBlocksData?.business_blocks && myBlocksData.business_blocks.length > 0 && (
|
|
<div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
|
|
<div className="flex items-start gap-3">
|
|
<Building2 size={20} className="text-blue-600 dark:text-blue-400 mt-0.5" />
|
|
<div>
|
|
<h3 className="font-medium text-blue-900 dark:text-blue-100">
|
|
{t('myAvailability.businessBlocks', 'Business Closures')}
|
|
</h3>
|
|
<p className="text-sm text-blue-700 dark:text-blue-300 mt-1">
|
|
{t('myAvailability.businessBlocksInfo', 'These blocks are set by your business and apply to everyone:')}
|
|
</p>
|
|
<div className="mt-2 flex flex-wrap gap-2">
|
|
{myBlocksData.business_blocks.map((block) => (
|
|
<span
|
|
key={block.id}
|
|
className="inline-flex items-center gap-1 px-2 py-1 bg-blue-100 dark:bg-blue-800/50 text-blue-800 dark:text-blue-200 rounded text-sm"
|
|
>
|
|
{block.title}
|
|
{renderRecurrenceBadge(block.recurrence_type)}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Tabs */}
|
|
<div className="border-b border-gray-200 dark:border-gray-700">
|
|
<nav className="flex gap-1" aria-label="Availability tabs">
|
|
<button
|
|
onClick={() => setActiveTab('blocks')}
|
|
className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
|
|
activeTab === 'blocks'
|
|
? 'border-brand-500 text-brand-600 dark:text-brand-400'
|
|
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
|
|
}`}
|
|
>
|
|
<UserIcon size={18} />
|
|
{t('myAvailability.myBlocksTab', 'My Time Blocks')}
|
|
{myBlocksData?.my_blocks && myBlocksData.my_blocks.length > 0 && (
|
|
<span className="bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded-full text-xs">
|
|
{myBlocksData.my_blocks.length}
|
|
</span>
|
|
)}
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('calendar')}
|
|
className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
|
|
activeTab === 'calendar'
|
|
? 'border-brand-500 text-brand-600 dark:text-brand-400'
|
|
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
|
|
}`}
|
|
>
|
|
<CalendarDays size={18} />
|
|
{t('myAvailability.calendarTab', 'Yearly View')}
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
|
|
{/* Tab Content */}
|
|
{isLoading ? (
|
|
<div className="flex justify-center py-12">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-brand-500"></div>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{activeTab === 'blocks' && (
|
|
<>
|
|
{/* Resource Info Banner */}
|
|
<div className="bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg p-4">
|
|
<p className="text-sm text-purple-800 dark:text-purple-300 flex items-center gap-2">
|
|
<UserIcon size={16} />
|
|
{t('myAvailability.resourceInfo', 'Managing blocks for:')}
|
|
<span className="font-semibold">{myBlocksData?.resource_name}</span>
|
|
</p>
|
|
</div>
|
|
|
|
{/* My Blocks List */}
|
|
{myBlocksData?.my_blocks && myBlocksData.my_blocks.length === 0 ? (
|
|
<div className="text-center py-12 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
|
|
<Calendar size={48} className="mx-auto text-gray-400 mb-4" />
|
|
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
|
|
{t('myAvailability.noBlocks', 'No Time Blocks')}
|
|
</h3>
|
|
<p className="text-gray-500 dark:text-gray-400 mb-4">
|
|
{t('myAvailability.noBlocksDesc', 'Add time blocks for vacations, lunch breaks, or any time you need off.')}
|
|
</p>
|
|
<button
|
|
onClick={openCreateModal}
|
|
className="inline-flex items-center gap-2 px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors"
|
|
>
|
|
<Plus size={18} />
|
|
{t('myAvailability.addFirstBlock', 'Add First Block')}
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
|
|
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
|
<thead className="bg-gray-50 dark:bg-gray-900/50">
|
|
<tr>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
|
{t('myAvailability.titleCol', 'Title')}
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
|
{t('myAvailability.typeCol', 'Type')}
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
|
{t('myAvailability.patternCol', 'Pattern')}
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
|
{t('myAvailability.statusCol', 'Status')}
|
|
</th>
|
|
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
|
{t('myAvailability.actionsCol', 'Actions')}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-200 dark:divide-gray-700">
|
|
{myBlocksData?.my_blocks.map((block) => (
|
|
<tr key={block.id} className={`hover:bg-gray-50 dark:hover:bg-gray-700/50 ${!block.is_active ? 'opacity-50' : ''}`}>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<div className="flex items-center gap-2">
|
|
<span className={`font-medium ${block.is_active ? 'text-gray-900 dark:text-white' : 'text-gray-500 dark:text-gray-400 line-through'}`}>
|
|
{block.title}
|
|
</span>
|
|
{!block.is_active && (
|
|
<span className="px-2 py-0.5 text-xs font-medium bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400 rounded">
|
|
Inactive
|
|
</span>
|
|
)}
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
{renderBlockTypeBadge(block.block_type)}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<div className="flex items-center gap-2">
|
|
{renderRecurrenceBadge(block.recurrence_type)}
|
|
{block.pattern_display && (
|
|
<span className="text-sm text-gray-500 dark:text-gray-400">
|
|
{block.pattern_display}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<div className="flex flex-col gap-1">
|
|
{renderApprovalBadge((block as any).approval_status)}
|
|
{(block as any).review_notes && (
|
|
<span className="text-xs text-gray-500 dark:text-gray-400 italic">
|
|
"{(block as any).review_notes}"
|
|
</span>
|
|
)}
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-right">
|
|
<div className="flex items-center justify-end gap-2">
|
|
<button
|
|
onClick={() => handleToggle(block.id)}
|
|
className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
|
|
title={block.is_active ? 'Deactivate' : 'Activate'}
|
|
>
|
|
{block.is_active ? <Power size={16} /> : <PowerOff size={16} />}
|
|
</button>
|
|
<button
|
|
onClick={() => openEditModal(block)}
|
|
className="p-2 text-gray-400 hover:text-blue-600"
|
|
title="Edit"
|
|
>
|
|
<Pencil size={16} />
|
|
</button>
|
|
<button
|
|
onClick={() => setDeleteConfirmId(block.id)}
|
|
className="p-2 text-gray-400 hover:text-red-600"
|
|
title="Delete"
|
|
>
|
|
<Trash2 size={16} />
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{activeTab === 'calendar' && (
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
|
|
<YearlyBlockCalendar
|
|
resourceId={myBlocksData?.resource_id}
|
|
onBlockClick={(blockId) => {
|
|
// Find the block and open edit modal if it's my block
|
|
const block = myBlocksData?.my_blocks.find(b => b.id === blockId);
|
|
if (block) {
|
|
openEditModal(block);
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Create/Edit Modal - Using TimeBlockCreatorModal in staff mode */}
|
|
<TimeBlockCreatorModal
|
|
isOpen={isModalOpen}
|
|
onClose={closeModal}
|
|
onSubmit={async (data) => {
|
|
try {
|
|
if (editingBlock) {
|
|
await updateBlock.mutateAsync({ id: editingBlock.id, updates: data });
|
|
} else {
|
|
// Handle array of blocks (multiple holidays)
|
|
const blocks = Array.isArray(data) ? data : [data];
|
|
for (const block of blocks) {
|
|
await createBlock.mutateAsync(block);
|
|
}
|
|
}
|
|
closeModal();
|
|
} catch (error) {
|
|
console.error('Failed to save time block:', error);
|
|
}
|
|
}}
|
|
isSubmitting={createBlock.isPending || updateBlock.isPending}
|
|
editingBlock={editingBlock}
|
|
holidays={holidays}
|
|
resources={staffResource ? [staffResource as any] : []}
|
|
isResourceLevel={true}
|
|
staffMode={true}
|
|
staffResourceId={myBlocksData?.resource_id}
|
|
/>
|
|
|
|
{/* Delete Confirmation Modal */}
|
|
{deleteConfirmId && (
|
|
<Portal>
|
|
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
|
|
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-md w-full p-6">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="p-3 bg-red-100 dark:bg-red-900/30 rounded-full">
|
|
<AlertTriangle size={24} className="text-red-600 dark:text-red-400" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
|
|
{t('myAvailability.deleteConfirmTitle', 'Delete Time Block?')}
|
|
</h3>
|
|
<p className="text-sm text-gray-500 dark:text-gray-400">
|
|
{t('myAvailability.deleteConfirmDesc', 'This action cannot be undone.')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-end gap-3">
|
|
<button
|
|
onClick={() => setDeleteConfirmId(null)}
|
|
className="px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors"
|
|
>
|
|
{t('common.cancel', 'Cancel')}
|
|
</button>
|
|
<button
|
|
onClick={() => handleDelete(deleteConfirmId)}
|
|
className="px-4 py-2 bg-red-600 text-white hover:bg-red-700 rounded-lg transition-colors disabled:opacity-50"
|
|
disabled={deleteBlock.isPending}
|
|
>
|
|
{deleteBlock.isPending ? (
|
|
<span className="flex items-center gap-2">
|
|
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
|
|
{t('common.deleting', 'Deleting...')}
|
|
</span>
|
|
) : (
|
|
t('common.delete', 'Delete')
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Portal>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MyAvailability;
|