fixes, theming, branding
This commit is contained in:
mikicvi
@@ -17,6 +17,12 @@ interface Setting {
|
||||
}
|
||||
|
||||
interface SettingsData {
|
||||
// Club/Brand Settings
|
||||
club_name: string;
|
||||
sport_name: string;
|
||||
app_title: string;
|
||||
app_description: string;
|
||||
// Booking Settings
|
||||
booking_window_days: string;
|
||||
max_booking_duration_hours: string;
|
||||
min_booking_duration_minutes: string;
|
||||
@@ -30,6 +36,12 @@ interface SettingsData {
|
||||
|
||||
export function AdminSettingsManagement() {
|
||||
const [settings, setSettings] = useState<SettingsData>({
|
||||
// Club/Brand Settings
|
||||
club_name: 'TT Club',
|
||||
sport_name: 'Table Tennis',
|
||||
app_title: 'Table Tennis Booking System',
|
||||
app_description: 'Book your table tennis court slots with ease',
|
||||
// Booking Settings
|
||||
booking_window_days: '7',
|
||||
max_booking_duration_hours: '2',
|
||||
min_booking_duration_minutes: '30',
|
||||
@@ -38,7 +50,7 @@ export function AdminSettingsManagement() {
|
||||
allow_weekend_bookings: 'true',
|
||||
max_bookings_per_user_per_hour_per_day: '1',
|
||||
allow_booking_modifications: 'true',
|
||||
booking_modification_hours_before: '2',
|
||||
booking_modification_hours_before: '1',
|
||||
});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
@@ -54,6 +66,12 @@ export function AdminSettingsManagement() {
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
const settingsMap: SettingsData = {
|
||||
// Club/Brand Settings
|
||||
club_name: 'TT Club',
|
||||
sport_name: 'Table Tennis',
|
||||
app_title: 'Table Tennis Booking System',
|
||||
app_description: 'Book your table tennis court slots with ease',
|
||||
// Booking Settings
|
||||
booking_window_days: '7',
|
||||
max_booking_duration_hours: '2',
|
||||
min_booking_duration_minutes: '30',
|
||||
@@ -62,10 +80,8 @@ export function AdminSettingsManagement() {
|
||||
allow_weekend_bookings: 'true',
|
||||
max_bookings_per_user_per_hour_per_day: '1',
|
||||
allow_booking_modifications: 'true',
|
||||
booking_modification_hours_before: '2',
|
||||
};
|
||||
|
||||
// Map the settings array to our object
|
||||
booking_modification_hours_before: '1',
|
||||
}; // Map the settings array to our object
|
||||
data.settings?.forEach((setting: Setting) => {
|
||||
if (setting.key in settingsMap) {
|
||||
settingsMap[setting.key as keyof SettingsData] = setting.value;
|
||||
@@ -189,139 +205,205 @@ export function AdminSettingsManagement() {
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className='space-y-6'>
|
||||
<div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
|
||||
{/* Booking Window */}
|
||||
<div className='space-y-2'>
|
||||
<Label htmlFor='booking_window_days'>Booking Window (days)</Label>
|
||||
<Input
|
||||
id='booking_window_days'
|
||||
type='number'
|
||||
min='1'
|
||||
max='30'
|
||||
value={settings.booking_window_days}
|
||||
onChange={(e) => updateSetting('booking_window_days', e.target.value)}
|
||||
/>
|
||||
<p className='text-sm text-gray-500'>How many days in advance users can book</p>
|
||||
</div>
|
||||
{/* Club/Brand Configuration Section */}
|
||||
<div>
|
||||
<h3 className='text-lg font-medium mb-4'>Club & Branding</h3>
|
||||
<div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
|
||||
{/* Club Name */}
|
||||
<div className='space-y-2'>
|
||||
<Label htmlFor='club_name'>Club Name</Label>
|
||||
<Input
|
||||
id='club_name'
|
||||
type='text'
|
||||
placeholder='e.g., Downtown TT Club'
|
||||
value={settings.club_name}
|
||||
onChange={(e) => updateSetting('club_name', e.target.value)}
|
||||
/>
|
||||
<p className='text-sm text-gray-500'>The name of your club or organization</p>
|
||||
</div>
|
||||
|
||||
{/* Max Duration */}
|
||||
<div className='space-y-2'>
|
||||
<Label htmlFor='max_booking_duration_hours'>Max Booking Duration (hours)</Label>
|
||||
<Input
|
||||
id='max_booking_duration_hours'
|
||||
type='number'
|
||||
min='0.5'
|
||||
max='8'
|
||||
step='0.5'
|
||||
value={settings.max_booking_duration_hours}
|
||||
onChange={(e) => updateSetting('max_booking_duration_hours', e.target.value)}
|
||||
/>
|
||||
<p className='text-sm text-gray-500'>Maximum hours per booking session</p>
|
||||
</div>
|
||||
{/* Sport Name */}
|
||||
<div className='space-y-2'>
|
||||
<Label htmlFor='sport_name'>Sport Name</Label>
|
||||
<Input
|
||||
id='sport_name'
|
||||
type='text'
|
||||
placeholder='e.g., Table Tennis, Ping Pong, Badminton'
|
||||
value={settings.sport_name}
|
||||
onChange={(e) => updateSetting('sport_name', e.target.value)}
|
||||
/>
|
||||
<p className='text-sm text-gray-500'>The sport played at your facility</p>
|
||||
</div>
|
||||
|
||||
{/* Min Duration */}
|
||||
<div className='space-y-2'>
|
||||
<Label htmlFor='min_booking_duration_minutes'>Min Booking Duration (minutes)</Label>
|
||||
<Input
|
||||
id='min_booking_duration_minutes'
|
||||
type='number'
|
||||
min='15'
|
||||
max='120'
|
||||
step='15'
|
||||
value={settings.min_booking_duration_minutes}
|
||||
onChange={(e) => updateSetting('min_booking_duration_minutes', e.target.value)}
|
||||
/>
|
||||
<p className='text-sm text-gray-500'>Minimum minutes per booking session</p>
|
||||
</div>
|
||||
{/* App Title */}
|
||||
<div className='space-y-2'>
|
||||
<Label htmlFor='app_title'>Application Title</Label>
|
||||
<Input
|
||||
id='app_title'
|
||||
type='text'
|
||||
placeholder='e.g., Downtown TT Booking'
|
||||
value={settings.app_title}
|
||||
onChange={(e) => updateSetting('app_title', e.target.value)}
|
||||
/>
|
||||
<p className='text-sm text-gray-500'>Main title shown in browser and app header</p>
|
||||
</div>
|
||||
|
||||
{/* Start Time */}
|
||||
<div className='space-y-2'>
|
||||
<Label htmlFor='booking_start_time'>Daily Start Time</Label>
|
||||
<Input
|
||||
id='booking_start_time'
|
||||
type='time'
|
||||
value={settings.booking_start_time}
|
||||
onChange={(e) => updateSetting('booking_start_time', e.target.value)}
|
||||
/>
|
||||
<p className='text-sm text-gray-500'>When courts open for booking each day</p>
|
||||
{/* App Description */}
|
||||
<div className='space-y-2'>
|
||||
<Label htmlFor='app_description'>Application Description</Label>
|
||||
<Input
|
||||
id='app_description'
|
||||
type='text'
|
||||
placeholder='e.g., Book your court slots with ease'
|
||||
value={settings.app_description}
|
||||
onChange={(e) => updateSetting('app_description', e.target.value)}
|
||||
/>
|
||||
<p className='text-sm text-gray-500'>Short description for login/register pages</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* End Time */}
|
||||
<div className='space-y-2'>
|
||||
<Label htmlFor='booking_end_time'>Daily End Time</Label>
|
||||
<Input
|
||||
id='booking_end_time'
|
||||
type='time'
|
||||
value={settings.booking_end_time}
|
||||
onChange={(e) => updateSetting('booking_end_time', e.target.value)}
|
||||
/>
|
||||
<p className='text-sm text-gray-500'>When courts close for booking each day</p>
|
||||
</div>
|
||||
{/* Booking Configuration Section */}
|
||||
<div>
|
||||
<h3 className='text-lg font-medium mb-4'>Booking Configuration</h3>
|
||||
<div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
|
||||
{/* Booking Window */}
|
||||
<div className='space-y-2'>
|
||||
<Label htmlFor='booking_window_days'>Booking Window (days)</Label>
|
||||
<Input
|
||||
id='booking_window_days'
|
||||
type='number'
|
||||
min='1'
|
||||
max='30'
|
||||
value={settings.booking_window_days}
|
||||
onChange={(e) => updateSetting('booking_window_days', e.target.value)}
|
||||
/>
|
||||
<p className='text-sm text-gray-500'>How many days in advance users can book</p>
|
||||
</div>
|
||||
|
||||
{/* Booking Restrictions */}
|
||||
<div className='space-y-2'>
|
||||
<Label htmlFor='max_bookings_per_user_per_hour_per_day'>Max Bookings per User per Hour</Label>
|
||||
<Input
|
||||
id='max_bookings_per_user_per_hour_per_day'
|
||||
type='number'
|
||||
min='1'
|
||||
max='5'
|
||||
value={settings.max_bookings_per_user_per_hour_per_day}
|
||||
onChange={(e) => updateSetting('max_bookings_per_user_per_hour_per_day', e.target.value)}
|
||||
/>
|
||||
<p className='text-sm text-gray-500'>Maximum bookings per user per hour on the same day</p>
|
||||
</div>
|
||||
{/* Max Duration */}
|
||||
<div className='space-y-2'>
|
||||
<Label htmlFor='max_booking_duration_hours'>Max Booking Duration (hours)</Label>
|
||||
<Input
|
||||
id='max_booking_duration_hours'
|
||||
type='number'
|
||||
min='0.5'
|
||||
max='8'
|
||||
step='0.5'
|
||||
value={settings.max_booking_duration_hours}
|
||||
onChange={(e) => updateSetting('max_booking_duration_hours', e.target.value)}
|
||||
/>
|
||||
<p className='text-sm text-gray-500'>Maximum hours per booking session</p>
|
||||
</div>
|
||||
|
||||
{/* Booking Modification Settings */}
|
||||
<div className='space-y-2'>
|
||||
<div className='flex items-center space-x-2'>
|
||||
<Switch
|
||||
id='allow_booking_modifications'
|
||||
checked={settings.allow_booking_modifications === 'true'}
|
||||
onCheckedChange={(checked: boolean) =>
|
||||
updateSetting('allow_booking_modifications', checked.toString())
|
||||
{/* Min Duration */}
|
||||
<div className='space-y-2'>
|
||||
<Label htmlFor='min_booking_duration_minutes'>Min Booking Duration (minutes)</Label>
|
||||
<Input
|
||||
id='min_booking_duration_minutes'
|
||||
type='number'
|
||||
min='15'
|
||||
max='120'
|
||||
step='15'
|
||||
value={settings.min_booking_duration_minutes}
|
||||
onChange={(e) => updateSetting('min_booking_duration_minutes', e.target.value)}
|
||||
/>
|
||||
<p className='text-sm text-gray-500'>Minimum minutes per booking session</p>
|
||||
</div>
|
||||
|
||||
{/* Start Time */}
|
||||
<div className='space-y-2'>
|
||||
<Label htmlFor='booking_start_time'>Daily Start Time</Label>
|
||||
<Input
|
||||
id='booking_start_time'
|
||||
type='time'
|
||||
value={settings.booking_start_time}
|
||||
onChange={(e) => updateSetting('booking_start_time', e.target.value)}
|
||||
/>
|
||||
<p className='text-sm text-gray-500'>When courts open for booking each day</p>
|
||||
</div>
|
||||
|
||||
{/* End Time */}
|
||||
<div className='space-y-2'>
|
||||
<Label htmlFor='booking_end_time'>Daily End Time</Label>
|
||||
<Input
|
||||
id='booking_end_time'
|
||||
type='time'
|
||||
value={settings.booking_end_time}
|
||||
onChange={(e) => updateSetting('booking_end_time', e.target.value)}
|
||||
/>
|
||||
<p className='text-sm text-gray-500'>When courts close for booking each day</p>
|
||||
</div>
|
||||
|
||||
{/* Booking Restrictions */}
|
||||
<div className='space-y-2'>
|
||||
<Label htmlFor='max_bookings_per_user_per_hour_per_day'>
|
||||
Max Bookings per User per Hour
|
||||
</Label>
|
||||
<Input
|
||||
id='max_bookings_per_user_per_hour_per_day'
|
||||
type='number'
|
||||
min='1'
|
||||
max='5'
|
||||
value={settings.max_bookings_per_user_per_hour_per_day}
|
||||
onChange={(e) =>
|
||||
updateSetting('max_bookings_per_user_per_hour_per_day', e.target.value)
|
||||
}
|
||||
/>
|
||||
<Label htmlFor='allow_booking_modifications'>Allow Booking Modifications</Label>
|
||||
<p className='text-sm text-gray-500'>Maximum bookings per user per hour on the same day</p>
|
||||
</div>
|
||||
<p className='text-sm text-gray-500'>Whether users can edit or cancel their bookings</p>
|
||||
</div>
|
||||
|
||||
{/* Modification Time Restriction */}
|
||||
<div className='space-y-2'>
|
||||
<Label htmlFor='booking_modification_hours_before'>
|
||||
Modification Time Limit (hours before session)
|
||||
</Label>
|
||||
<Input
|
||||
id='booking_modification_hours_before'
|
||||
type='number'
|
||||
min='0.5'
|
||||
max='48'
|
||||
step='0.5'
|
||||
value={settings.booking_modification_hours_before}
|
||||
onChange={(e) => updateSetting('booking_modification_hours_before', e.target.value)}
|
||||
disabled={settings.allow_booking_modifications !== 'true'}
|
||||
/>
|
||||
<p className='text-sm text-gray-500'>
|
||||
{settings.allow_booking_modifications === 'true'
|
||||
? 'How many hours before a session users can still modify bookings'
|
||||
: 'Enable booking modifications to configure this setting'}
|
||||
</p>
|
||||
</div>
|
||||
{/* Booking Modification Settings */}
|
||||
<div className='space-y-2'>
|
||||
<div className='flex items-center space-x-2'>
|
||||
<Switch
|
||||
id='allow_booking_modifications'
|
||||
checked={settings.allow_booking_modifications === 'true'}
|
||||
onCheckedChange={(checked: boolean) =>
|
||||
updateSetting('allow_booking_modifications', checked.toString())
|
||||
}
|
||||
/>
|
||||
<Label htmlFor='allow_booking_modifications'>Allow Booking Modifications</Label>
|
||||
</div>
|
||||
<p className='text-sm text-gray-500'>Whether users can edit or cancel their bookings</p>
|
||||
</div>
|
||||
|
||||
{/* Weekend Bookings */}
|
||||
<div className='space-y-2'>
|
||||
<div className='flex items-center space-x-2'>
|
||||
<Switch
|
||||
id='allow_weekend_bookings'
|
||||
checked={settings.allow_weekend_bookings === 'true'}
|
||||
onCheckedChange={(checked: boolean) =>
|
||||
updateSetting('allow_weekend_bookings', checked.toString())
|
||||
}
|
||||
{/* Modification Time Restriction */}
|
||||
<div className='space-y-2'>
|
||||
<Label htmlFor='booking_modification_hours_before'>
|
||||
Modification Time Limit (hours before session)
|
||||
</Label>
|
||||
<Input
|
||||
id='booking_modification_hours_before'
|
||||
type='number'
|
||||
min='0.5'
|
||||
max='48'
|
||||
step='0.5'
|
||||
value={settings.booking_modification_hours_before}
|
||||
onChange={(e) => updateSetting('booking_modification_hours_before', e.target.value)}
|
||||
disabled={settings.allow_booking_modifications !== 'true'}
|
||||
/>
|
||||
<Label htmlFor='allow_weekend_bookings'>Allow Weekend Bookings</Label>
|
||||
<p className='text-sm text-gray-500'>
|
||||
{settings.allow_booking_modifications === 'true'
|
||||
? 'How many hours before a session users can still modify bookings'
|
||||
: 'Enable booking modifications to configure this setting'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Weekend Bookings */}
|
||||
<div className='space-y-2'>
|
||||
<div className='flex items-center space-x-2'>
|
||||
<Switch
|
||||
id='allow_weekend_bookings'
|
||||
checked={settings.allow_weekend_bookings === 'true'}
|
||||
onCheckedChange={(checked: boolean) =>
|
||||
updateSetting('allow_weekend_bookings', checked.toString())
|
||||
}
|
||||
/>
|
||||
<Label htmlFor='allow_weekend_bookings'>Allow Weekend Bookings</Label>
|
||||
</div>
|
||||
<p className='text-sm text-gray-500'>Whether users can book courts on weekends</p>
|
||||
</div>
|
||||
<p className='text-sm text-gray-500'>Whether users can book courts on weekends</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user