feat: Add comprehensive sandbox mode, public API system, and platform support
This commit adds major features for sandbox isolation, public API access, and platform support ticketing. ## Sandbox Mode - Add sandbox mode toggle for businesses to test features without affecting live data - Implement schema-based isolation for tenant data (appointments, resources, services) - Add is_sandbox field filtering for shared models (customers, staff, tickets) - Create sandbox middleware to detect and set sandbox mode from cookies - Add sandbox context and hooks for React frontend - Display sandbox banner when in test mode - Auto-reload page when switching between live/test modes - Prevent platform support tickets from being created in sandbox mode ## Public API System - Full REST API for external integrations with businesses - API token management with sandbox/live token separation - Test tokens (ss_test_*) show full plaintext for easy testing - Live tokens (ss_live_*) are hashed and secure - Security validation prevents live token plaintext storage - Comprehensive test suite for token security - Rate limiting and throttling per token - Webhook support for real-time event notifications - Scoped permissions system (read/write per resource type) - API documentation page with interactive examples - Token revocation with confirmation modal ## Platform Support - Dedicated support page for businesses to contact SmoothSchedule - View all platform support tickets in one place - Create new support tickets with simplified interface - Reply to existing tickets with conversation history - Platform tickets have no admin controls (no priority/category/assignee/status) - Internal notes hidden for platform tickets (business can't see them) - Quick help section with links to guides and API docs - Sandbox warning prevents ticket creation in test mode - Business ticketing retains full admin controls (priority, assignment, internal notes) ## UI/UX Improvements - Add notification dropdown with real-time updates - Staff permissions UI for ticket access control - Help dropdown in sidebar with Platform Guide, Ticketing Help, API Docs, and Support - Update sidebar "Contact Support" to "Support" with message icon - Fix navigation links to use React Router instead of anchor tags - Remove unused language translations (Japanese, Portuguese, Chinese) ## Technical Details - Sandbox middleware sets request.sandbox_mode from cookies - ViewSets filter data by is_sandbox field - API authentication via custom token auth class - WebSocket support for real-time ticket updates - Migration for sandbox fields on User, Tenant, and Ticket models - Comprehensive documentation in SANDBOX_MODE_IMPLEMENTATION.md 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
poduck
@@ -31,6 +31,7 @@ import {
|
||||
Power,
|
||||
} from 'lucide-react';
|
||||
import Portal from '../components/Portal';
|
||||
import StaffPermissions from '../components/StaffPermissions';
|
||||
|
||||
interface StaffProps {
|
||||
onMasquerade: (user: User) => void;
|
||||
@@ -535,222 +536,23 @@ const Staff: React.FC<StaffProps> = ({ onMasquerade, effectiveUser }) => {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Manager Permissions */}
|
||||
{/* Permissions - Using shared component */}
|
||||
{inviteRole === 'TENANT_MANAGER' && (
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300">
|
||||
{t('staff.managerPermissions', 'Manager Permissions')}
|
||||
</h4>
|
||||
|
||||
{/* Can Invite Staff */}
|
||||
<label className="flex items-start gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800 cursor-pointer hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={invitePermissions.can_invite_staff ?? false}
|
||||
onChange={(e) =>
|
||||
setInvitePermissions({ ...invitePermissions, can_invite_staff: e.target.checked })
|
||||
}
|
||||
className="w-4 h-4 mt-0.5 rounded border-gray-300 text-brand-600 focus:ring-brand-500"
|
||||
/>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{t('staff.canInviteStaff', 'Can invite new staff members')}
|
||||
</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{t('staff.canInviteStaffHint', 'Allow this manager to send invitations to new staff members')}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
{/* Can Manage Resources */}
|
||||
<label className="flex items-start gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800 cursor-pointer hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={invitePermissions.can_manage_resources ?? true}
|
||||
onChange={(e) =>
|
||||
setInvitePermissions({ ...invitePermissions, can_manage_resources: e.target.checked })
|
||||
}
|
||||
className="w-4 h-4 mt-0.5 rounded border-gray-300 text-brand-600 focus:ring-brand-500"
|
||||
/>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{t('staff.canManageResources', 'Can manage resources')}
|
||||
</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{t('staff.canManageResourcesHint', 'Create, edit, and delete bookable resources')}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
{/* Can Manage Services */}
|
||||
<label className="flex items-start gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800 cursor-pointer hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={invitePermissions.can_manage_services ?? true}
|
||||
onChange={(e) =>
|
||||
setInvitePermissions({ ...invitePermissions, can_manage_services: e.target.checked })
|
||||
}
|
||||
className="w-4 h-4 mt-0.5 rounded border-gray-300 text-brand-600 focus:ring-brand-500"
|
||||
/>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{t('staff.canManageServices', 'Can manage services')}
|
||||
</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{t('staff.canManageServicesHint', 'Create, edit, and delete service offerings')}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
{/* Can View Reports */}
|
||||
<label className="flex items-start gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800 cursor-pointer hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={invitePermissions.can_view_reports ?? true}
|
||||
onChange={(e) =>
|
||||
setInvitePermissions({ ...invitePermissions, can_view_reports: e.target.checked })
|
||||
}
|
||||
className="w-4 h-4 mt-0.5 rounded border-gray-300 text-brand-600 focus:ring-brand-500"
|
||||
/>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{t('staff.canViewReports', 'Can view reports')}
|
||||
</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{t('staff.canViewReportsHint', 'Access business analytics and financial reports')}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
{/* Can Access Settings */}
|
||||
<label className="flex items-start gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800 cursor-pointer hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={invitePermissions.can_access_settings ?? false}
|
||||
onChange={(e) =>
|
||||
setInvitePermissions({ ...invitePermissions, can_access_settings: e.target.checked })
|
||||
}
|
||||
className="w-4 h-4 mt-0.5 rounded border-gray-300 text-brand-600 focus:ring-brand-500"
|
||||
/>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{t('staff.canAccessSettings', 'Can access business settings')}
|
||||
</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{t('staff.canAccessSettingsHint', 'Modify business profile, branding, and configuration')}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
{/* Can Refund Payments */}
|
||||
<label className="flex items-start gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800 cursor-pointer hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={invitePermissions.can_refund_payments ?? false}
|
||||
onChange={(e) =>
|
||||
setInvitePermissions({ ...invitePermissions, can_refund_payments: e.target.checked })
|
||||
}
|
||||
className="w-4 h-4 mt-0.5 rounded border-gray-300 text-brand-600 focus:ring-brand-500"
|
||||
/>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{t('staff.canRefundPayments', 'Can refund payments')}
|
||||
</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{t('staff.canRefundPaymentsHint', 'Process refunds for customer payments')}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
{/* Can Access Tickets */}
|
||||
<label className="flex items-start gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800 cursor-pointer hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={invitePermissions.can_access_tickets ?? true}
|
||||
onChange={(e) =>
|
||||
setInvitePermissions({ ...invitePermissions, can_access_tickets: e.target.checked })
|
||||
}
|
||||
className="w-4 h-4 mt-0.5 rounded border-gray-300 text-brand-600 focus:ring-brand-500"
|
||||
/>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{t('staff.canAccessTickets', 'Can access support tickets')}
|
||||
</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{t('staff.canAccessTicketsHint', 'View and manage customer support tickets')}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<StaffPermissions
|
||||
role="manager"
|
||||
permissions={invitePermissions}
|
||||
onChange={setInvitePermissions}
|
||||
variant="invite"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Staff Permissions */}
|
||||
{inviteRole === 'TENANT_STAFF' && (
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300">
|
||||
{t('staff.staffPermissions', 'Staff Permissions')}
|
||||
</h4>
|
||||
|
||||
{/* Can View All Schedules */}
|
||||
<label className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg border border-gray-200 dark:border-gray-600 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={invitePermissions.can_view_all_schedules ?? false}
|
||||
onChange={(e) =>
|
||||
setInvitePermissions({ ...invitePermissions, can_view_all_schedules: e.target.checked })
|
||||
}
|
||||
className="w-4 h-4 mt-0.5 rounded border-gray-300 text-brand-600 focus:ring-brand-500"
|
||||
/>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{t('staff.canViewAllSchedules', 'Can view all schedules')}
|
||||
</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{t('staff.canViewAllSchedulesHint', 'View schedules of other staff members (otherwise only their own)')}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
{/* Can Manage Own Appointments */}
|
||||
<label className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg border border-gray-200 dark:border-gray-600 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={invitePermissions.can_manage_own_appointments ?? true}
|
||||
onChange={(e) =>
|
||||
setInvitePermissions({ ...invitePermissions, can_manage_own_appointments: e.target.checked })
|
||||
}
|
||||
className="w-4 h-4 mt-0.5 rounded border-gray-300 text-brand-600 focus:ring-brand-500"
|
||||
/>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{t('staff.canManageOwnAppointments', 'Can manage own appointments')}
|
||||
</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{t('staff.canManageOwnAppointmentsHint', 'Create, reschedule, and cancel their own appointments')}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
{/* Can Access Tickets */}
|
||||
<label className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg border border-gray-200 dark:border-gray-600 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={invitePermissions.can_access_tickets ?? false}
|
||||
onChange={(e) =>
|
||||
setInvitePermissions({ ...invitePermissions, can_access_tickets: e.target.checked })
|
||||
}
|
||||
className="w-4 h-4 mt-0.5 rounded border-gray-300 text-brand-600 focus:ring-brand-500"
|
||||
/>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{t('staff.canAccessTickets', 'Can access support tickets')}
|
||||
</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{t('staff.canAccessTicketsHint', 'View and manage customer support tickets')}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<StaffPermissions
|
||||
role="staff"
|
||||
permissions={invitePermissions}
|
||||
onChange={setInvitePermissions}
|
||||
variant="invite"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Make Bookable Option */}
|
||||
@@ -873,222 +675,23 @@ const Staff: React.FC<StaffProps> = ({ onMasquerade, effectiveUser }) => {
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Manager Permissions Section */}
|
||||
{/* Permissions - Using shared component */}
|
||||
{editingStaff.role === 'manager' && (
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300">
|
||||
{t('staff.managerPermissions', 'Manager Permissions')}
|
||||
</h4>
|
||||
|
||||
{/* Can Invite Staff */}
|
||||
<label className="flex items-start gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800 cursor-pointer hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={editPermissions.can_invite_staff ?? false}
|
||||
onChange={(e) =>
|
||||
setEditPermissions({ ...editPermissions, can_invite_staff: e.target.checked })
|
||||
}
|
||||
className="w-4 h-4 mt-0.5 rounded border-gray-300 text-brand-600 focus:ring-brand-500"
|
||||
/>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{t('staff.canInviteStaff', 'Can invite new staff members')}
|
||||
</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{t('staff.canInviteStaffHint', 'Allow this manager to send invitations to new staff members')}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
{/* Can Manage Resources */}
|
||||
<label className="flex items-start gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800 cursor-pointer hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={editPermissions.can_manage_resources ?? true}
|
||||
onChange={(e) =>
|
||||
setEditPermissions({ ...editPermissions, can_manage_resources: e.target.checked })
|
||||
}
|
||||
className="w-4 h-4 mt-0.5 rounded border-gray-300 text-brand-600 focus:ring-brand-500"
|
||||
/>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{t('staff.canManageResources', 'Can manage resources')}
|
||||
</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{t('staff.canManageResourcesHint', 'Create, edit, and delete bookable resources')}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
{/* Can Manage Services */}
|
||||
<label className="flex items-start gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800 cursor-pointer hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={editPermissions.can_manage_services ?? true}
|
||||
onChange={(e) =>
|
||||
setEditPermissions({ ...editPermissions, can_manage_services: e.target.checked })
|
||||
}
|
||||
className="w-4 h-4 mt-0.5 rounded border-gray-300 text-brand-600 focus:ring-brand-500"
|
||||
/>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{t('staff.canManageServices', 'Can manage services')}
|
||||
</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{t('staff.canManageServicesHint', 'Create, edit, and delete service offerings')}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
{/* Can View Reports */}
|
||||
<label className="flex items-start gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800 cursor-pointer hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={editPermissions.can_view_reports ?? true}
|
||||
onChange={(e) =>
|
||||
setEditPermissions({ ...editPermissions, can_view_reports: e.target.checked })
|
||||
}
|
||||
className="w-4 h-4 mt-0.5 rounded border-gray-300 text-brand-600 focus:ring-brand-500"
|
||||
/>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{t('staff.canViewReports', 'Can view reports')}
|
||||
</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{t('staff.canViewReportsHint', 'Access business analytics and financial reports')}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
{/* Can Access Settings */}
|
||||
<label className="flex items-start gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800 cursor-pointer hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={editPermissions.can_access_settings ?? false}
|
||||
onChange={(e) =>
|
||||
setEditPermissions({ ...editPermissions, can_access_settings: e.target.checked })
|
||||
}
|
||||
className="w-4 h-4 mt-0.5 rounded border-gray-300 text-brand-600 focus:ring-brand-500"
|
||||
/>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{t('staff.canAccessSettings', 'Can access business settings')}
|
||||
</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{t('staff.canAccessSettingsHint', 'Modify business profile, branding, and configuration')}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
{/* Can Refund Payments */}
|
||||
<label className="flex items-start gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800 cursor-pointer hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={editPermissions.can_refund_payments ?? false}
|
||||
onChange={(e) =>
|
||||
setEditPermissions({ ...editPermissions, can_refund_payments: e.target.checked })
|
||||
}
|
||||
className="w-4 h-4 mt-0.5 rounded border-gray-300 text-brand-600 focus:ring-brand-500"
|
||||
/>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{t('staff.canRefundPayments', 'Can refund payments')}
|
||||
</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{t('staff.canRefundPaymentsHint', 'Process refunds for customer payments')}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
{/* Can Access Tickets */}
|
||||
<label className="flex items-start gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800 cursor-pointer hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={editPermissions.can_access_tickets ?? true}
|
||||
onChange={(e) =>
|
||||
setEditPermissions({ ...editPermissions, can_access_tickets: e.target.checked })
|
||||
}
|
||||
className="w-4 h-4 mt-0.5 rounded border-gray-300 text-brand-600 focus:ring-brand-500"
|
||||
/>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{t('staff.canAccessTickets', 'Can access support tickets')}
|
||||
</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{t('staff.canAccessTicketsHint', 'View and manage customer support tickets')}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<StaffPermissions
|
||||
role="manager"
|
||||
permissions={editPermissions}
|
||||
onChange={setEditPermissions}
|
||||
variant="edit"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Staff Permissions Section (for non-managers) */}
|
||||
{editingStaff.role === 'staff' && (
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300">
|
||||
{t('staff.staffPermissions', 'Staff Permissions')}
|
||||
</h4>
|
||||
|
||||
{/* Can View Own Schedule Only */}
|
||||
<label className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg border border-gray-200 dark:border-gray-600 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={editPermissions.can_view_all_schedules ?? false}
|
||||
onChange={(e) =>
|
||||
setEditPermissions({ ...editPermissions, can_view_all_schedules: e.target.checked })
|
||||
}
|
||||
className="w-4 h-4 mt-0.5 rounded border-gray-300 text-brand-600 focus:ring-brand-500"
|
||||
/>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{t('staff.canViewAllSchedules', 'Can view all schedules')}
|
||||
</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{t('staff.canViewAllSchedulesHint', 'View schedules of other staff members (otherwise only their own)')}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
{/* Can Manage Own Appointments */}
|
||||
<label className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg border border-gray-200 dark:border-gray-600 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={editPermissions.can_manage_own_appointments ?? true}
|
||||
onChange={(e) =>
|
||||
setEditPermissions({ ...editPermissions, can_manage_own_appointments: e.target.checked })
|
||||
}
|
||||
className="w-4 h-4 mt-0.5 rounded border-gray-300 text-brand-600 focus:ring-brand-500"
|
||||
/>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{t('staff.canManageOwnAppointments', 'Can manage own appointments')}
|
||||
</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{t('staff.canManageOwnAppointmentsHint', 'Create, reschedule, and cancel their own appointments')}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
{/* Can Access Tickets */}
|
||||
<label className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg border border-gray-200 dark:border-gray-600 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={editPermissions.can_access_tickets ?? false}
|
||||
onChange={(e) =>
|
||||
setEditPermissions({ ...editPermissions, can_access_tickets: e.target.checked })
|
||||
}
|
||||
className="w-4 h-4 mt-0.5 rounded border-gray-300 text-brand-600 focus:ring-brand-500"
|
||||
/>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{t('staff.canAccessTickets', 'Can access support tickets')}
|
||||
</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{t('staff.canAccessTicketsHint', 'View and manage customer support tickets')}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<StaffPermissions
|
||||
role="staff"
|
||||
permissions={editPermissions}
|
||||
onChange={setEditPermissions}
|
||||
variant="edit"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* No permissions for owners */}
|
||||
|
||||
Reference in New Issue
Block a user