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
671
frontend/src/components/ApiTokensSection.tsx
Normal file
671
frontend/src/components/ApiTokensSection.tsx
Normal file
@@ -0,0 +1,671 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
Key,
|
||||
Plus,
|
||||
Copy,
|
||||
Check,
|
||||
Trash2,
|
||||
Eye,
|
||||
EyeOff,
|
||||
Clock,
|
||||
Shield,
|
||||
AlertTriangle,
|
||||
ExternalLink,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
X,
|
||||
} from 'lucide-react';
|
||||
import {
|
||||
useApiTokens,
|
||||
useCreateApiToken,
|
||||
useRevokeApiToken,
|
||||
useUpdateApiToken,
|
||||
API_SCOPES,
|
||||
SCOPE_PRESETS,
|
||||
APIToken,
|
||||
APITokenCreateResponse,
|
||||
} from '../hooks/useApiTokens';
|
||||
|
||||
interface NewTokenModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onTokenCreated: (token: APITokenCreateResponse) => void;
|
||||
}
|
||||
|
||||
const NewTokenModal: React.FC<NewTokenModalProps> = ({ isOpen, onClose, onTokenCreated }) => {
|
||||
const { t } = useTranslation();
|
||||
const [name, setName] = useState('');
|
||||
const [selectedScopes, setSelectedScopes] = useState<string[]>([]);
|
||||
const [expiresIn, setExpiresIn] = useState<string>('never');
|
||||
const [showAdvanced, setShowAdvanced] = useState(false);
|
||||
const createMutation = useCreateApiToken();
|
||||
|
||||
const handlePresetSelect = (presetKey: keyof typeof SCOPE_PRESETS) => {
|
||||
setSelectedScopes(SCOPE_PRESETS[presetKey].scopes);
|
||||
};
|
||||
|
||||
const toggleScope = (scope: string) => {
|
||||
setSelectedScopes(prev =>
|
||||
prev.includes(scope)
|
||||
? prev.filter(s => s !== scope)
|
||||
: [...prev, scope]
|
||||
);
|
||||
};
|
||||
|
||||
const calculateExpiryDate = (): string | null => {
|
||||
if (expiresIn === 'never') return null;
|
||||
const now = new Date();
|
||||
switch (expiresIn) {
|
||||
case '7d':
|
||||
now.setDate(now.getDate() + 7);
|
||||
break;
|
||||
case '30d':
|
||||
now.setDate(now.getDate() + 30);
|
||||
break;
|
||||
case '90d':
|
||||
now.setDate(now.getDate() + 90);
|
||||
break;
|
||||
case '1y':
|
||||
now.setFullYear(now.getFullYear() + 1);
|
||||
break;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
return now.toISOString();
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!name.trim() || selectedScopes.length === 0) return;
|
||||
|
||||
try {
|
||||
const result = await createMutation.mutateAsync({
|
||||
name: name.trim(),
|
||||
scopes: selectedScopes,
|
||||
expires_at: calculateExpiryDate(),
|
||||
});
|
||||
onTokenCreated(result);
|
||||
setName('');
|
||||
setSelectedScopes([]);
|
||||
setExpiresIn('never');
|
||||
} catch (error) {
|
||||
console.error('Failed to create token:', error);
|
||||
}
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
|
||||
<div className="p-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
Create API Token
|
||||
</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="p-6 space-y-6">
|
||||
{/* Token Name */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Token Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="e.g., Website Integration, Mobile App"
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-transparent"
|
||||
required
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
Choose a descriptive name to identify this token's purpose
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Scope Presets */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Permission Presets
|
||||
</label>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||||
{Object.entries(SCOPE_PRESETS).map(([key, preset]) => (
|
||||
<button
|
||||
key={key}
|
||||
type="button"
|
||||
onClick={() => handlePresetSelect(key as keyof typeof SCOPE_PRESETS)}
|
||||
className={`p-3 text-left border rounded-lg transition-colors ${
|
||||
JSON.stringify(selectedScopes.sort()) === JSON.stringify(preset.scopes.sort())
|
||||
? 'border-purple-500 bg-brand-50 dark:bg-brand-900/20'
|
||||
: 'border-gray-200 dark:border-gray-600 hover:border-purple-300 dark:hover:border-purple-700'
|
||||
}`}
|
||||
>
|
||||
<div className="font-medium text-gray-900 dark:text-white text-sm">
|
||||
{preset.label}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
{preset.description}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Advanced: Individual Scopes */}
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowAdvanced(!showAdvanced)}
|
||||
className="flex items-center gap-2 text-sm text-brand-600 dark:text-brand-400 hover:text-brand-700 dark:hover:text-brand-300"
|
||||
>
|
||||
{showAdvanced ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
|
||||
{showAdvanced ? 'Hide' : 'Show'} individual permissions
|
||||
</button>
|
||||
|
||||
{showAdvanced && (
|
||||
<div className="mt-3 p-4 bg-gray-50 dark:bg-gray-900 rounded-lg space-y-2">
|
||||
{API_SCOPES.map((scope) => (
|
||||
<label
|
||||
key={scope.value}
|
||||
className="flex items-start gap-3 p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedScopes.includes(scope.value)}
|
||||
onChange={() => toggleScope(scope.value)}
|
||||
className="mt-1 h-4 w-4 text-brand-600 border-gray-300 rounded focus:ring-brand-500"
|
||||
/>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{scope.label}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">
|
||||
{scope.description}
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Expiration */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Expiration
|
||||
</label>
|
||||
<select
|
||||
value={expiresIn}
|
||||
onChange={(e) => setExpiresIn(e.target.value)}
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-transparent"
|
||||
>
|
||||
<option value="never">Never expires</option>
|
||||
<option value="7d">7 days</option>
|
||||
<option value="30d">30 days</option>
|
||||
<option value="90d">90 days</option>
|
||||
<option value="1y">1 year</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Selected Scopes Summary */}
|
||||
{selectedScopes.length > 0 && (
|
||||
<div className="p-3 bg-brand-50 dark:bg-brand-900/20 rounded-lg">
|
||||
<div className="text-sm font-medium text-brand-700 dark:text-brand-300 mb-2">
|
||||
Selected permissions ({selectedScopes.length})
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{selectedScopes.map((scope) => (
|
||||
<span
|
||||
key={scope}
|
||||
className="px-2 py-0.5 text-xs bg-brand-100 dark:bg-brand-800 text-brand-700 dark:text-brand-300 rounded"
|
||||
>
|
||||
{scope}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!name.trim() || selectedScopes.length === 0 || createMutation.isPending}
|
||||
className="px-4 py-2 text-sm font-medium text-white bg-brand-600 hover:bg-brand-700 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
|
||||
>
|
||||
{createMutation.isPending ? (
|
||||
<>
|
||||
<span className="animate-spin">⏳</span>
|
||||
Creating...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Key size={16} />
|
||||
Create Token
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface TokenCreatedModalProps {
|
||||
token: APITokenCreateResponse | null;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const TokenCreatedModal: React.FC<TokenCreatedModalProps> = ({ token, onClose }) => {
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [showToken, setShowToken] = useState(false);
|
||||
|
||||
const handleCopy = () => {
|
||||
if (token) {
|
||||
navigator.clipboard.writeText(token.key);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
}
|
||||
};
|
||||
|
||||
if (!token) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-lg w-full mx-4">
|
||||
<div className="p-6">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="p-2 bg-green-100 dark:bg-green-900/30 rounded-lg">
|
||||
<Check className="text-green-600 dark:text-green-400" size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
Token Created
|
||||
</h2>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{token.name}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg mb-4">
|
||||
<div className="flex items-start gap-2">
|
||||
<AlertTriangle className="text-yellow-600 dark:text-yellow-400 flex-shrink-0 mt-0.5" size={18} />
|
||||
<div className="text-sm text-yellow-800 dark:text-yellow-200">
|
||||
<strong>Important:</strong> Copy your token now. You won't be able to see it again!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Your API Token
|
||||
</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex-1 relative">
|
||||
<input
|
||||
type={showToken ? 'text' : 'password'}
|
||||
value={token.key}
|
||||
readOnly
|
||||
className="w-full px-4 py-3 pr-20 font-mono text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowToken(!showToken)}
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
|
||||
>
|
||||
{showToken ? <EyeOff size={18} /> : <Eye size={18} />}
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleCopy}
|
||||
className={`px-4 py-3 rounded-lg font-medium text-sm transition-colors flex items-center gap-2 ${
|
||||
copied
|
||||
? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400'
|
||||
: 'bg-brand-600 hover:bg-brand-700 text-white'
|
||||
}`}
|
||||
>
|
||||
{copied ? <Check size={18} /> : <Copy size={18} />}
|
||||
{copied ? 'Copied!' : 'Copy'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 text-sm font-medium text-white bg-brand-600 hover:bg-brand-700 rounded-lg transition-colors"
|
||||
>
|
||||
Done
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface TokenRowProps {
|
||||
token: APIToken;
|
||||
onRevoke: (id: string, name: string) => void;
|
||||
isRevoking: boolean;
|
||||
}
|
||||
|
||||
const TokenRow: React.FC<TokenRowProps> = ({ token, onRevoke, isRevoking }) => {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
const formatDate = (dateString: string | null) => {
|
||||
if (!dateString) return 'Never';
|
||||
return new Date(dateString).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
};
|
||||
|
||||
const isExpired = token.expires_at && new Date(token.expires_at) < new Date();
|
||||
|
||||
return (
|
||||
<div className={`border rounded-lg ${
|
||||
!token.is_active || isExpired
|
||||
? 'border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 opacity-60'
|
||||
: 'border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800'
|
||||
}`}>
|
||||
<div className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`p-2 rounded-lg ${
|
||||
token.is_active && !isExpired
|
||||
? 'bg-brand-100 dark:bg-brand-900/30'
|
||||
: 'bg-gray-100 dark:bg-gray-800'
|
||||
}`}>
|
||||
<Key size={18} className={
|
||||
token.is_active && !isExpired
|
||||
? 'text-brand-600 dark:text-brand-400'
|
||||
: 'text-gray-400'
|
||||
} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-gray-900 dark:text-white">
|
||||
{token.name}
|
||||
</span>
|
||||
{(!token.is_active || isExpired) && (
|
||||
<span className="px-2 py-0.5 text-xs font-medium bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 rounded">
|
||||
{isExpired ? 'Expired' : 'Revoked'}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400 font-mono">
|
||||
{token.key_prefix}••••••••
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"
|
||||
>
|
||||
{expanded ? <ChevronUp size={18} /> : <ChevronDown size={18} />}
|
||||
</button>
|
||||
{token.is_active && !isExpired && (
|
||||
<button
|
||||
onClick={() => onRevoke(token.id, token.name)}
|
||||
disabled={isRevoking}
|
||||
className="p-2 text-red-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg disabled:opacity-50"
|
||||
title="Revoke token"
|
||||
>
|
||||
<Trash2 size={18} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{expanded && (
|
||||
<div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 space-y-3">
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<div className="text-gray-500 dark:text-gray-400">Created</div>
|
||||
<div className="text-gray-900 dark:text-white">{formatDate(token.created_at)}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-gray-500 dark:text-gray-400">Last Used</div>
|
||||
<div className="text-gray-900 dark:text-white">{formatDate(token.last_used_at)}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-gray-500 dark:text-gray-400">Expires</div>
|
||||
<div className={`${isExpired ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-white'}`}>
|
||||
{formatDate(token.expires_at)}
|
||||
</div>
|
||||
</div>
|
||||
{token.created_by && (
|
||||
<div>
|
||||
<div className="text-gray-500 dark:text-gray-400">Created By</div>
|
||||
<div className="text-gray-900 dark:text-white">{token.created_by.full_name || token.created_by.username}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400 mb-2">Permissions</div>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{token.scopes.map((scope) => (
|
||||
<span
|
||||
key={scope}
|
||||
className="px-2 py-0.5 text-xs bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded"
|
||||
>
|
||||
{scope}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ApiTokensSection: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const { data: tokens, isLoading, error } = useApiTokens();
|
||||
const revokeMutation = useRevokeApiToken();
|
||||
const [showNewTokenModal, setShowNewTokenModal] = useState(false);
|
||||
const [createdToken, setCreatedToken] = useState<APITokenCreateResponse | null>(null);
|
||||
const [tokenToRevoke, setTokenToRevoke] = useState<{ id: string; name: string } | null>(null);
|
||||
|
||||
const handleTokenCreated = (token: APITokenCreateResponse) => {
|
||||
setShowNewTokenModal(false);
|
||||
setCreatedToken(token);
|
||||
};
|
||||
|
||||
const handleRevokeClick = (id: string, name: string) => {
|
||||
setTokenToRevoke({ id, name });
|
||||
};
|
||||
|
||||
const confirmRevoke = async () => {
|
||||
if (!tokenToRevoke) return;
|
||||
setTokenToRevoke(null);
|
||||
await revokeMutation.mutateAsync(tokenToRevoke.id);
|
||||
};
|
||||
|
||||
const activeTokens = tokens?.filter(t => t.is_active) || [];
|
||||
const revokedTokens = tokens?.filter(t => !t.is_active) || [];
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Revoke Confirmation Modal */}
|
||||
{tokenToRevoke && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-md w-full mx-4 p-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-shrink-0 w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
|
||||
<AlertTriangle size={24} className="text-red-600 dark:text-red-400" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||||
Revoke API Token?
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300 mb-1">
|
||||
Are you sure you want to revoke <strong>{tokenToRevoke.name}</strong>?
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
This action cannot be undone. Applications using this token will immediately lose access.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mt-6">
|
||||
<button
|
||||
onClick={() => setTokenToRevoke(null)}
|
||||
className="flex-1 px-4 py-2 text-sm font-medium 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"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={confirmRevoke}
|
||||
disabled={revokeMutation.isPending}
|
||||
className="flex-1 px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-lg transition-colors disabled:opacity-50"
|
||||
>
|
||||
{revokeMutation.isPending ? 'Revoking...' : 'Revoke Token'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<section className="bg-white dark:bg-gray-800 p-6 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
<Key size={20} className="text-brand-500" />
|
||||
API Tokens
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
||||
Create and manage API tokens for third-party integrations
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<a
|
||||
href="/help/api"
|
||||
className="px-3 py-2 text-sm font-medium text-brand-600 dark:text-brand-400 hover:bg-brand-50 dark:hover:bg-brand-900/20 rounded-lg transition-colors flex items-center gap-2"
|
||||
>
|
||||
<ExternalLink size={16} />
|
||||
API Docs
|
||||
</a>
|
||||
<button
|
||||
onClick={() => setShowNewTokenModal(true)}
|
||||
className="px-4 py-2 text-sm font-medium text-white bg-brand-600 hover:bg-brand-700 rounded-lg transition-colors flex items-center gap-2"
|
||||
>
|
||||
<Plus size={16} />
|
||||
New Token
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600"></div>
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
|
||||
<p className="text-sm text-red-600 dark:text-red-400">
|
||||
Failed to load API tokens. Please try again later.
|
||||
</p>
|
||||
</div>
|
||||
) : tokens && tokens.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full mb-4">
|
||||
<Key size={32} className="text-gray-400" />
|
||||
</div>
|
||||
<h4 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
|
||||
No API tokens yet
|
||||
</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mb-4 max-w-sm mx-auto">
|
||||
Create your first API token to start integrating with external services and applications.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setShowNewTokenModal(true)}
|
||||
className="px-4 py-2 text-sm font-medium text-white bg-brand-600 hover:bg-brand-700 rounded-lg transition-colors inline-flex items-center gap-2"
|
||||
>
|
||||
<Plus size={16} />
|
||||
Create API Token
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{activeTokens.length > 0 && (
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 flex items-center gap-2">
|
||||
<Shield size={16} className="text-green-500" />
|
||||
Active Tokens ({activeTokens.length})
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
{activeTokens.map((token) => (
|
||||
<TokenRow
|
||||
key={token.id}
|
||||
token={token}
|
||||
onRevoke={handleRevokeClick}
|
||||
isRevoking={revokeMutation.isPending}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{revokedTokens.length > 0 && (
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2">
|
||||
<Clock size={16} />
|
||||
Revoked Tokens ({revokedTokens.length})
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
{revokedTokens.map((token) => (
|
||||
<TokenRow
|
||||
key={token.id}
|
||||
token={token}
|
||||
onRevoke={handleRevokeClick}
|
||||
isRevoking={revokeMutation.isPending}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Modals */}
|
||||
<NewTokenModal
|
||||
isOpen={showNewTokenModal}
|
||||
onClose={() => setShowNewTokenModal(false)}
|
||||
onTokenCreated={handleTokenCreated}
|
||||
/>
|
||||
<TokenCreatedModal
|
||||
token={createdToken}
|
||||
onClose={() => setCreatedToken(null)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ApiTokensSection;
|
||||
@@ -79,7 +79,7 @@ const LanguageSelector: React.FC<LanguageSelectorProps> = ({
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<div className="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-50 py-1 animate-in fade-in slide-in-from-top-2">
|
||||
<div className="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-[60] py-1 animate-in fade-in slide-in-from-top-2">
|
||||
<ul role="listbox" aria-label="Select language">
|
||||
{supportedLanguages.map((lang) => (
|
||||
<li key={lang.code}>
|
||||
|
||||
229
frontend/src/components/NotificationDropdown.tsx
Normal file
229
frontend/src/components/NotificationDropdown.tsx
Normal file
@@ -0,0 +1,229 @@
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Bell, Check, CheckCheck, Trash2, X, Ticket, Calendar, MessageSquare } from 'lucide-react';
|
||||
import {
|
||||
useNotifications,
|
||||
useUnreadNotificationCount,
|
||||
useMarkNotificationRead,
|
||||
useMarkAllNotificationsRead,
|
||||
useClearAllNotifications,
|
||||
} from '../hooks/useNotifications';
|
||||
import { Notification } from '../api/notifications';
|
||||
|
||||
interface NotificationDropdownProps {
|
||||
variant?: 'light' | 'dark';
|
||||
onTicketClick?: (ticketId: string) => void;
|
||||
}
|
||||
|
||||
const NotificationDropdown: React.FC<NotificationDropdownProps> = ({ variant = 'dark', onTicketClick }) => {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const { data: notifications = [], isLoading } = useNotifications({ limit: 20 });
|
||||
const { data: unreadCount = 0 } = useUnreadNotificationCount();
|
||||
const markReadMutation = useMarkNotificationRead();
|
||||
const markAllReadMutation = useMarkAllNotificationsRead();
|
||||
const clearAllMutation = useClearAllNotifications();
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
const handleNotificationClick = (notification: Notification) => {
|
||||
// Mark as read
|
||||
if (!notification.read) {
|
||||
markReadMutation.mutate(notification.id);
|
||||
}
|
||||
|
||||
// Handle ticket notifications specially - open modal instead of navigating
|
||||
if (notification.target_type === 'ticket' && onTicketClick) {
|
||||
const ticketId = notification.data?.ticket_id;
|
||||
if (ticketId) {
|
||||
onTicketClick(String(ticketId));
|
||||
setIsOpen(false);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Navigate to target if available
|
||||
if (notification.target_url) {
|
||||
navigate(notification.target_url);
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleMarkAllRead = () => {
|
||||
markAllReadMutation.mutate();
|
||||
};
|
||||
|
||||
const handleClearAll = () => {
|
||||
clearAllMutation.mutate();
|
||||
};
|
||||
|
||||
const getNotificationIcon = (targetType: string | null) => {
|
||||
switch (targetType) {
|
||||
case 'ticket':
|
||||
return <Ticket size={16} className="text-blue-500" />;
|
||||
case 'event':
|
||||
case 'appointment':
|
||||
return <Calendar size={16} className="text-green-500" />;
|
||||
default:
|
||||
return <MessageSquare size={16} className="text-gray-500" />;
|
||||
}
|
||||
};
|
||||
|
||||
const formatTimestamp = (timestamp: string) => {
|
||||
const date = new Date(timestamp);
|
||||
const now = new Date();
|
||||
const diffMs = now.getTime() - date.getTime();
|
||||
const diffMins = Math.floor(diffMs / 60000);
|
||||
const diffHours = Math.floor(diffMs / 3600000);
|
||||
const diffDays = Math.floor(diffMs / 86400000);
|
||||
|
||||
if (diffMins < 1) return t('notifications.justNow', 'Just now');
|
||||
if (diffMins < 60) return t('notifications.minutesAgo', '{{count}}m ago', { count: diffMins });
|
||||
if (diffHours < 24) return t('notifications.hoursAgo', '{{count}}h ago', { count: diffHours });
|
||||
if (diffDays < 7) return t('notifications.daysAgo', '{{count}}d ago', { count: diffDays });
|
||||
return date.toLocaleDateString();
|
||||
};
|
||||
|
||||
const buttonClasses = variant === 'light'
|
||||
? 'p-2 rounded-md text-white/80 hover:text-white hover:bg-white/10 transition-colors'
|
||||
: 'relative p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700';
|
||||
|
||||
return (
|
||||
<div className="relative" ref={dropdownRef}>
|
||||
{/* Bell Button */}
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className={buttonClasses}
|
||||
aria-label={t('notifications.openNotifications', 'Open notifications')}
|
||||
>
|
||||
<Bell size={20} />
|
||||
{unreadCount > 0 && (
|
||||
<span className="absolute top-1 right-1 flex items-center justify-center min-w-[18px] h-[18px] px-1 text-[10px] font-bold text-white bg-red-500 rounded-full">
|
||||
{unreadCount > 99 ? '99+' : unreadCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Dropdown */}
|
||||
{isOpen && (
|
||||
<div className="absolute right-0 mt-2 w-80 sm:w-96 bg-white dark:bg-gray-800 rounded-xl shadow-xl border border-gray-200 dark:border-gray-700 z-50 overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
|
||||
<h3 className="text-sm font-semibold text-gray-900 dark:text-white">
|
||||
{t('notifications.title', 'Notifications')}
|
||||
</h3>
|
||||
<div className="flex items-center gap-2">
|
||||
{unreadCount > 0 && (
|
||||
<button
|
||||
onClick={handleMarkAllRead}
|
||||
disabled={markAllReadMutation.isPending}
|
||||
className="p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
|
||||
title={t('notifications.markAllRead', 'Mark all as read')}
|
||||
>
|
||||
<CheckCheck size={16} />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Notification List */}
|
||||
<div className="max-h-96 overflow-y-auto">
|
||||
{isLoading ? (
|
||||
<div className="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
|
||||
{t('common.loading')}
|
||||
</div>
|
||||
) : notifications.length === 0 ? (
|
||||
<div className="px-4 py-8 text-center">
|
||||
<Bell size={32} className="mx-auto text-gray-300 dark:text-gray-600 mb-2" />
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{t('notifications.noNotifications', 'No notifications yet')}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y divide-gray-100 dark:divide-gray-700">
|
||||
{notifications.map((notification) => (
|
||||
<button
|
||||
key={notification.id}
|
||||
onClick={() => handleNotificationClick(notification)}
|
||||
className={`w-full px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors ${
|
||||
!notification.read ? 'bg-blue-50/50 dark:bg-blue-900/10' : ''
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="mt-0.5">
|
||||
{getNotificationIcon(notification.target_type)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className={`text-sm ${!notification.read ? 'font-medium' : ''} text-gray-900 dark:text-white`}>
|
||||
<span className="font-medium">{notification.actor_display || 'System'}</span>
|
||||
{' '}
|
||||
{notification.verb}
|
||||
</p>
|
||||
{notification.target_display && (
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 truncate mt-0.5">
|
||||
{notification.target_display}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
|
||||
{formatTimestamp(notification.timestamp)}
|
||||
</p>
|
||||
</div>
|
||||
{!notification.read && (
|
||||
<span className="w-2 h-2 bg-blue-500 rounded-full flex-shrink-0 mt-2"></span>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
{notifications.length > 0 && (
|
||||
<div className="px-4 py-3 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
|
||||
<button
|
||||
onClick={handleClearAll}
|
||||
disabled={clearAllMutation.isPending}
|
||||
className="text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 flex items-center gap-1"
|
||||
>
|
||||
<Trash2 size={12} />
|
||||
{t('notifications.clearRead', 'Clear read')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate('/notifications');
|
||||
setIsOpen(false);
|
||||
}}
|
||||
className="text-xs text-brand-600 hover:text-brand-700 dark:text-brand-400 font-medium"
|
||||
>
|
||||
{t('notifications.viewAll', 'View all')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NotificationDropdown;
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import { LayoutDashboard, Building2, MessageSquare, Settings, Users, Shield } from 'lucide-react';
|
||||
import { LayoutDashboard, Building2, MessageSquare, Settings, Users, Shield, HelpCircle, Code } from 'lucide-react';
|
||||
import { User } from '../types';
|
||||
import SmoothScheduleLogo from './SmoothScheduleLogo';
|
||||
|
||||
@@ -77,6 +77,18 @@ const PlatformSidebar: React.FC<PlatformSidebarProps> = ({ user, isCollapsed, to
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Help Section */}
|
||||
<div className="mt-8 pt-4 border-t border-gray-800">
|
||||
<Link to="/help/ticketing" className={getNavClass('/help/ticketing')} title={t('nav.help', 'Help')}>
|
||||
<HelpCircle size={18} className="shrink-0" />
|
||||
{!isCollapsed && <span>{t('nav.help', 'Help')}</span>}
|
||||
</Link>
|
||||
<Link to="/help/api" className={getNavClass('/help/api')} title={t('nav.apiDocs', 'API Documentation')}>
|
||||
<Code size={18} className="shrink-0" />
|
||||
{!isCollapsed && <span>{t('nav.apiDocs', 'API Docs')}</span>}
|
||||
</Link>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
);
|
||||
|
||||
79
frontend/src/components/SandboxBanner.tsx
Normal file
79
frontend/src/components/SandboxBanner.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
/**
|
||||
* Sandbox Banner Component
|
||||
* Displays a prominent warning banner when in test/sandbox mode
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { FlaskConical, X } from 'lucide-react';
|
||||
|
||||
interface SandboxBannerProps {
|
||||
/** Whether sandbox mode is currently active */
|
||||
isSandbox: boolean;
|
||||
/** Callback to switch to live mode */
|
||||
onSwitchToLive: () => void;
|
||||
/** Optional: Allow dismissing the banner (it will reappear on page reload) */
|
||||
onDismiss?: () => void;
|
||||
/** Whether switching is in progress */
|
||||
isSwitching?: boolean;
|
||||
}
|
||||
|
||||
const SandboxBanner: React.FC<SandboxBannerProps> = ({
|
||||
isSandbox,
|
||||
onSwitchToLive,
|
||||
onDismiss,
|
||||
isSwitching = false,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
// Don't render if not in sandbox mode
|
||||
if (!isSandbox) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-gradient-to-r from-orange-500 to-amber-500 text-white px-4 py-2 flex items-center justify-between shrink-0">
|
||||
<div className="flex items-center gap-3">
|
||||
<FlaskConical className="w-5 h-5 animate-pulse" />
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:gap-2">
|
||||
<span className="font-semibold text-sm">
|
||||
{t('sandbox.bannerTitle', 'TEST MODE')}
|
||||
</span>
|
||||
<span className="text-xs sm:text-sm opacity-90">
|
||||
{t('sandbox.bannerDescription', 'You are viewing test data. Changes here won\'t affect your live business.')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={onSwitchToLive}
|
||||
disabled={isSwitching}
|
||||
className={`
|
||||
px-3 py-1 text-xs font-medium rounded-md
|
||||
bg-white text-orange-600 hover:bg-orange-50
|
||||
transition-colors duration-150
|
||||
${isSwitching ? 'opacity-50 cursor-not-allowed' : ''}
|
||||
`}
|
||||
>
|
||||
{isSwitching
|
||||
? t('sandbox.switching', 'Switching...')
|
||||
: t('sandbox.switchToLive', 'Switch to Live')
|
||||
}
|
||||
</button>
|
||||
|
||||
{onDismiss && (
|
||||
<button
|
||||
onClick={onDismiss}
|
||||
className="p-1 hover:bg-orange-600 rounded transition-colors duration-150"
|
||||
title={t('sandbox.dismiss', 'Dismiss')}
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SandboxBanner;
|
||||
80
frontend/src/components/SandboxToggle.tsx
Normal file
80
frontend/src/components/SandboxToggle.tsx
Normal file
@@ -0,0 +1,80 @@
|
||||
/**
|
||||
* Sandbox Toggle Component
|
||||
* A toggle switch to switch between Live and Test modes
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { FlaskConical, Zap } from 'lucide-react';
|
||||
|
||||
interface SandboxToggleProps {
|
||||
/** Whether sandbox mode is currently active */
|
||||
isSandbox: boolean;
|
||||
/** Whether sandbox mode is available for this business */
|
||||
sandboxEnabled: boolean;
|
||||
/** Callback when mode is toggled */
|
||||
onToggle: (enableSandbox: boolean) => void;
|
||||
/** Whether a toggle operation is in progress */
|
||||
isToggling?: boolean;
|
||||
/** Optional additional CSS classes */
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const SandboxToggle: React.FC<SandboxToggleProps> = ({
|
||||
isSandbox,
|
||||
sandboxEnabled,
|
||||
onToggle,
|
||||
isToggling = false,
|
||||
className = '',
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
// Don't render if sandbox is not enabled for this business
|
||||
if (!sandboxEnabled) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`flex items-center ${className}`}>
|
||||
{/* Live Mode Button */}
|
||||
<button
|
||||
onClick={() => onToggle(false)}
|
||||
disabled={isToggling || !isSandbox}
|
||||
className={`
|
||||
flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-l-md
|
||||
transition-colors duration-150 border
|
||||
${!isSandbox
|
||||
? 'bg-green-600 text-white border-green-600'
|
||||
: 'bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
|
||||
}
|
||||
${isToggling ? 'opacity-50 cursor-not-allowed' : ''}
|
||||
`}
|
||||
title={t('sandbox.liveMode', 'Live Mode - Production data')}
|
||||
>
|
||||
<Zap className="w-3.5 h-3.5" />
|
||||
<span>{t('sandbox.live', 'Live')}</span>
|
||||
</button>
|
||||
|
||||
{/* Test Mode Button */}
|
||||
<button
|
||||
onClick={() => onToggle(true)}
|
||||
disabled={isToggling || isSandbox}
|
||||
className={`
|
||||
flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-r-md
|
||||
transition-colors duration-150 border -ml-px
|
||||
${isSandbox
|
||||
? 'bg-orange-500 text-white border-orange-500'
|
||||
: 'bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
|
||||
}
|
||||
${isToggling ? 'opacity-50 cursor-not-allowed' : ''}
|
||||
`}
|
||||
title={t('sandbox.testMode', 'Test Mode - Sandbox data')}
|
||||
>
|
||||
<FlaskConical className="w-3.5 h-3.5" />
|
||||
<span>{t('sandbox.test', 'Test')}</span>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SandboxToggle;
|
||||
@@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import {
|
||||
@@ -11,7 +11,13 @@ import {
|
||||
LogOut,
|
||||
ClipboardList,
|
||||
Briefcase,
|
||||
Ticket
|
||||
Ticket,
|
||||
HelpCircle,
|
||||
Code,
|
||||
ChevronDown,
|
||||
BookOpen,
|
||||
FileQuestion,
|
||||
LifeBuoy
|
||||
} from 'lucide-react';
|
||||
import { Business, User } from '../types';
|
||||
import { useLogout } from '../hooks/useAuth';
|
||||
@@ -29,6 +35,7 @@ const Sidebar: React.FC<SidebarProps> = ({ business, user, isCollapsed, toggleCo
|
||||
const location = useLocation();
|
||||
const { role } = user;
|
||||
const logoutMutation = useLogout();
|
||||
const [isHelpOpen, setIsHelpOpen] = useState(location.pathname.startsWith('/help') || location.pathname === '/support');
|
||||
|
||||
const getNavClass = (path: string, exact: boolean = false, disabled: boolean = false) => {
|
||||
const isActive = exact
|
||||
@@ -174,6 +181,62 @@ const Sidebar: React.FC<SidebarProps> = ({ business, user, isCollapsed, toggleCo
|
||||
<Users size={20} className="shrink-0" />
|
||||
{!isCollapsed && <span>{t('nav.staff')}</span>}
|
||||
</Link>
|
||||
{/* Help Dropdown */}
|
||||
<div>
|
||||
<button
|
||||
onClick={() => setIsHelpOpen(!isHelpOpen)}
|
||||
className={`flex items-center gap-3 py-3 text-base font-medium rounded-lg transition-colors w-full ${isCollapsed ? 'px-3 justify-center' : 'px-4'} ${location.pathname.startsWith('/help') || location.pathname === '/support' ? 'bg-white/10 text-white' : 'text-white/70 hover:text-white hover:bg-white/5'}`}
|
||||
title={t('nav.help', 'Help')}
|
||||
>
|
||||
<HelpCircle size={20} className="shrink-0" />
|
||||
{!isCollapsed && (
|
||||
<>
|
||||
<span className="flex-1 text-left">{t('nav.help', 'Help')}</span>
|
||||
<ChevronDown size={16} className={`shrink-0 transition-transform ${isHelpOpen ? 'rotate-180' : ''}`} />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
{isHelpOpen && !isCollapsed && (
|
||||
<div className="ml-4 mt-1 space-y-1 border-l border-white/20 pl-4">
|
||||
<Link
|
||||
to="/help/guide"
|
||||
className={`flex items-center gap-3 py-2 text-sm font-medium rounded-lg transition-colors px-3 ${location.pathname === '/help/guide' ? 'bg-white/10 text-white' : 'text-white/60 hover:text-white hover:bg-white/5'}`}
|
||||
title={t('nav.platformGuide', 'Platform Guide')}
|
||||
>
|
||||
<BookOpen size={16} className="shrink-0" />
|
||||
<span>{t('nav.platformGuide', 'Platform Guide')}</span>
|
||||
</Link>
|
||||
<Link
|
||||
to="/help/ticketing"
|
||||
className={`flex items-center gap-3 py-2 text-sm font-medium rounded-lg transition-colors px-3 ${location.pathname === '/help/ticketing' ? 'bg-white/10 text-white' : 'text-white/60 hover:text-white hover:bg-white/5'}`}
|
||||
title={t('nav.ticketingHelp', 'Ticketing System')}
|
||||
>
|
||||
<FileQuestion size={16} className="shrink-0" />
|
||||
<span>{t('nav.ticketingHelp', 'Ticketing System')}</span>
|
||||
</Link>
|
||||
{role === 'owner' && (
|
||||
<Link
|
||||
to="/help/api"
|
||||
className={`flex items-center gap-3 py-2 text-sm font-medium rounded-lg transition-colors px-3 ${location.pathname === '/help/api' ? 'bg-white/10 text-white' : 'text-white/60 hover:text-white hover:bg-white/5'}`}
|
||||
title={t('nav.apiDocs', 'API Documentation')}
|
||||
>
|
||||
<Code size={16} className="shrink-0" />
|
||||
<span>{t('nav.apiDocs', 'API Docs')}</span>
|
||||
</Link>
|
||||
)}
|
||||
<div className="pt-2 mt-2 border-t border-white/10">
|
||||
<Link
|
||||
to="/support"
|
||||
className={`flex items-center gap-3 py-2 text-sm font-medium rounded-lg transition-colors px-3 ${location.pathname === '/support' ? 'bg-white/10 text-white' : 'text-white/60 hover:text-white hover:bg-white/5'}`}
|
||||
title={t('nav.support', 'Support')}
|
||||
>
|
||||
<MessageSquare size={16} className="shrink-0" />
|
||||
<span>{t('nav.support', 'Support')}</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -217,4 +280,4 @@ const Sidebar: React.FC<SidebarProps> = ({ business, user, isCollapsed, toggleCo
|
||||
);
|
||||
};
|
||||
|
||||
export default Sidebar;
|
||||
export default Sidebar;
|
||||
|
||||
202
frontend/src/components/StaffPermissions.tsx
Normal file
202
frontend/src/components/StaffPermissions.tsx
Normal file
@@ -0,0 +1,202 @@
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
export interface PermissionConfig {
|
||||
key: string;
|
||||
labelKey: string;
|
||||
labelDefault: string;
|
||||
hintKey: string;
|
||||
hintDefault: string;
|
||||
defaultValue: boolean;
|
||||
roles: ('manager' | 'staff')[];
|
||||
}
|
||||
|
||||
// Define all available permissions in one place
|
||||
export const PERMISSION_CONFIGS: PermissionConfig[] = [
|
||||
// Manager-only permissions
|
||||
{
|
||||
key: 'can_invite_staff',
|
||||
labelKey: 'staff.canInviteStaff',
|
||||
labelDefault: 'Can invite new staff members',
|
||||
hintKey: 'staff.canInviteStaffHint',
|
||||
hintDefault: 'Allow this manager to send invitations to new staff members',
|
||||
defaultValue: false,
|
||||
roles: ['manager'],
|
||||
},
|
||||
{
|
||||
key: 'can_manage_resources',
|
||||
labelKey: 'staff.canManageResources',
|
||||
labelDefault: 'Can manage resources',
|
||||
hintKey: 'staff.canManageResourcesHint',
|
||||
hintDefault: 'Create, edit, and delete bookable resources',
|
||||
defaultValue: true,
|
||||
roles: ['manager'],
|
||||
},
|
||||
{
|
||||
key: 'can_manage_services',
|
||||
labelKey: 'staff.canManageServices',
|
||||
labelDefault: 'Can manage services',
|
||||
hintKey: 'staff.canManageServicesHint',
|
||||
hintDefault: 'Create, edit, and delete service offerings',
|
||||
defaultValue: true,
|
||||
roles: ['manager'],
|
||||
},
|
||||
{
|
||||
key: 'can_view_reports',
|
||||
labelKey: 'staff.canViewReports',
|
||||
labelDefault: 'Can view reports',
|
||||
hintKey: 'staff.canViewReportsHint',
|
||||
hintDefault: 'Access business analytics and financial reports',
|
||||
defaultValue: true,
|
||||
roles: ['manager'],
|
||||
},
|
||||
{
|
||||
key: 'can_access_settings',
|
||||
labelKey: 'staff.canAccessSettings',
|
||||
labelDefault: 'Can access business settings',
|
||||
hintKey: 'staff.canAccessSettingsHint',
|
||||
hintDefault: 'Modify business profile, branding, and configuration',
|
||||
defaultValue: false,
|
||||
roles: ['manager'],
|
||||
},
|
||||
{
|
||||
key: 'can_refund_payments',
|
||||
labelKey: 'staff.canRefundPayments',
|
||||
labelDefault: 'Can refund payments',
|
||||
hintKey: 'staff.canRefundPaymentsHint',
|
||||
hintDefault: 'Process refunds for customer payments',
|
||||
defaultValue: false,
|
||||
roles: ['manager'],
|
||||
},
|
||||
// Staff-only permissions
|
||||
{
|
||||
key: 'can_view_all_schedules',
|
||||
labelKey: 'staff.canViewAllSchedules',
|
||||
labelDefault: 'Can view all schedules',
|
||||
hintKey: 'staff.canViewAllSchedulesHint',
|
||||
hintDefault: 'View schedules of other staff members (otherwise only their own)',
|
||||
defaultValue: false,
|
||||
roles: ['staff'],
|
||||
},
|
||||
{
|
||||
key: 'can_manage_own_appointments',
|
||||
labelKey: 'staff.canManageOwnAppointments',
|
||||
labelDefault: 'Can manage own appointments',
|
||||
hintKey: 'staff.canManageOwnAppointmentsHint',
|
||||
hintDefault: 'Create, reschedule, and cancel their own appointments',
|
||||
defaultValue: true,
|
||||
roles: ['staff'],
|
||||
},
|
||||
// Shared permissions (both manager and staff)
|
||||
{
|
||||
key: 'can_access_tickets',
|
||||
labelKey: 'staff.canAccessTickets',
|
||||
labelDefault: 'Can access support tickets',
|
||||
hintKey: 'staff.canAccessTicketsHint',
|
||||
hintDefault: 'View and manage customer support tickets',
|
||||
defaultValue: true, // Default for managers; staff will override to false
|
||||
roles: ['manager', 'staff'],
|
||||
},
|
||||
];
|
||||
|
||||
// Get default permissions for a role
|
||||
export const getDefaultPermissions = (role: 'manager' | 'staff'): Record<string, boolean> => {
|
||||
const defaults: Record<string, boolean> = {};
|
||||
PERMISSION_CONFIGS.forEach((config) => {
|
||||
if (config.roles.includes(role)) {
|
||||
// Staff members have ticket access disabled by default
|
||||
if (role === 'staff' && config.key === 'can_access_tickets') {
|
||||
defaults[config.key] = false;
|
||||
} else {
|
||||
defaults[config.key] = config.defaultValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
return defaults;
|
||||
};
|
||||
|
||||
interface StaffPermissionsProps {
|
||||
role: 'manager' | 'staff';
|
||||
permissions: Record<string, boolean>;
|
||||
onChange: (permissions: Record<string, boolean>) => void;
|
||||
variant?: 'invite' | 'edit';
|
||||
}
|
||||
|
||||
const StaffPermissions: React.FC<StaffPermissionsProps> = ({
|
||||
role,
|
||||
permissions,
|
||||
onChange,
|
||||
variant = 'edit',
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
// Filter permissions for this role
|
||||
const rolePermissions = PERMISSION_CONFIGS.filter((config) =>
|
||||
config.roles.includes(role)
|
||||
);
|
||||
|
||||
const handleToggle = (key: string, checked: boolean) => {
|
||||
onChange({ ...permissions, [key]: checked });
|
||||
};
|
||||
|
||||
// Get the current value, falling back to default
|
||||
const getValue = (config: PermissionConfig): boolean => {
|
||||
if (permissions[config.key] !== undefined) {
|
||||
return permissions[config.key];
|
||||
}
|
||||
// Staff have ticket access disabled by default
|
||||
if (role === 'staff' && config.key === 'can_access_tickets') {
|
||||
return false;
|
||||
}
|
||||
return config.defaultValue;
|
||||
};
|
||||
|
||||
// Different styling for manager vs staff permissions
|
||||
const isManagerPermission = (config: PermissionConfig) =>
|
||||
config.roles.includes('manager') && !config.roles.includes('staff');
|
||||
|
||||
const getPermissionStyle = (config: PermissionConfig) => {
|
||||
if (isManagerPermission(config) || role === 'manager') {
|
||||
return 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 hover:bg-blue-100 dark:hover:bg-blue-900/30';
|
||||
}
|
||||
return 'bg-gray-50 dark:bg-gray-700/50 border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700';
|
||||
};
|
||||
|
||||
if (rolePermissions.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300">
|
||||
{role === 'manager'
|
||||
? t('staff.managerPermissions', 'Manager Permissions')
|
||||
: t('staff.staffPermissions', 'Staff Permissions')}
|
||||
</h4>
|
||||
|
||||
{rolePermissions.map((config) => (
|
||||
<label
|
||||
key={config.key}
|
||||
className={`flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors ${getPermissionStyle(config)}`}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={getValue(config)}
|
||||
onChange={(e) => handleToggle(config.key, 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(config.labelKey, config.labelDefault)}
|
||||
</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{t(config.hintKey, config.hintDefault)}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StaffPermissions;
|
||||
@@ -5,6 +5,7 @@ import { Ticket, TicketComment, TicketStatus, TicketPriority, TicketCategory, Ti
|
||||
import { useCreateTicket, useUpdateTicket, useTicketComments, useCreateTicketComment } from '../hooks/useTickets';
|
||||
import { useStaffForAssignment } from '../hooks/useUsers';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { useSandbox } from '../contexts/SandboxContext';
|
||||
|
||||
interface TicketModalProps {
|
||||
ticket?: Ticket | null; // If provided, it's an edit/detail view
|
||||
@@ -23,6 +24,7 @@ const CATEGORY_OPTIONS: Record<TicketType, TicketCategory[]> = {
|
||||
const TicketModal: React.FC<TicketModalProps> = ({ ticket, onClose, defaultTicketType = 'CUSTOMER' }) => {
|
||||
const { t } = useTranslation();
|
||||
const queryClient = useQueryClient();
|
||||
const { isSandbox } = useSandbox();
|
||||
const [subject, setSubject] = useState(ticket?.subject || '');
|
||||
const [description, setDescription] = useState(ticket?.description || '');
|
||||
const [priority, setPriority] = useState<TicketPriority>(ticket?.priority || 'MEDIUM');
|
||||
@@ -30,8 +32,11 @@ const TicketModal: React.FC<TicketModalProps> = ({ ticket, onClose, defaultTicke
|
||||
const [ticketType, setTicketType] = useState<TicketType>(ticket?.ticketType || defaultTicketType);
|
||||
const [assigneeId, setAssigneeId] = useState<string | undefined>(ticket?.assignee);
|
||||
const [status, setStatus] = useState<TicketStatus>(ticket?.status || 'OPEN');
|
||||
const [newCommentText, setNewCommentText] = useState('');
|
||||
const [isInternalComment, setIsInternalComment] = useState(false);
|
||||
const [replyText, setReplyText] = useState('');
|
||||
const [internalNoteText, setInternalNoteText] = useState('');
|
||||
|
||||
// Check if this is a platform ticket in sandbox mode (should be disabled)
|
||||
const isPlatformTicketInSandbox = ticketType === 'PLATFORM' && isSandbox;
|
||||
|
||||
// Fetch users for assignee dropdown
|
||||
const { data: users = [] } = useStaffForAssignment();
|
||||
@@ -96,20 +101,31 @@ const TicketModal: React.FC<TicketModalProps> = ({ ticket, onClose, defaultTicke
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleAddComment = async (e: React.FormEvent) => {
|
||||
const handleAddReply = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!ticket?.id || !newCommentText.trim()) return;
|
||||
if (!ticket?.id || !replyText.trim()) return;
|
||||
|
||||
const commentData: Partial<TicketComment> = {
|
||||
commentText: newCommentText.trim(),
|
||||
isInternal: isInternalComment,
|
||||
// author and ticket are handled by the backend
|
||||
commentText: replyText.trim(),
|
||||
isInternal: false,
|
||||
};
|
||||
|
||||
await createCommentMutation.mutateAsync({ ticketId: ticket.id, commentData });
|
||||
setNewCommentText('');
|
||||
setIsInternalComment(false);
|
||||
// Invalidate comments query to refetch new comment
|
||||
setReplyText('');
|
||||
queryClient.invalidateQueries({ queryKey: ['ticketComments', ticket.id] });
|
||||
};
|
||||
|
||||
const handleAddInternalNote = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!ticket?.id || !internalNoteText.trim()) return;
|
||||
|
||||
const commentData: Partial<TicketComment> = {
|
||||
commentText: internalNoteText.trim(),
|
||||
isInternal: true,
|
||||
};
|
||||
|
||||
await createCommentMutation.mutateAsync({ ticketId: ticket.id, commentData });
|
||||
setInternalNoteText('');
|
||||
queryClient.invalidateQueries({ queryKey: ['ticketComments', ticket.id] });
|
||||
};
|
||||
|
||||
@@ -130,6 +146,23 @@ const TicketModal: React.FC<TicketModalProps> = ({ ticket, onClose, defaultTicke
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Sandbox Warning for Platform Tickets */}
|
||||
{isPlatformTicketInSandbox && (
|
||||
<div className="mx-6 mt-4 p-4 bg-red-50 dark:bg-red-900/20 border-2 border-red-500 dark:border-red-600 rounded-lg">
|
||||
<div className="flex items-start gap-3">
|
||||
<AlertCircle size={20} className="text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-red-800 dark:text-red-200">
|
||||
{t('tickets.sandboxRestriction', 'Platform Support Unavailable in Test Mode')}
|
||||
</h4>
|
||||
<p className="text-sm text-red-700 dark:text-red-300 mt-1">
|
||||
{t('tickets.sandboxRestrictionMessage', 'You can only contact SmoothSchedule support in live mode. Please switch to live mode to create a support ticket.')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Form / Details */}
|
||||
<div className="flex-1 overflow-y-auto p-6 space-y-6">
|
||||
<form onSubmit={handleSubmitTicket} className="space-y-4">
|
||||
@@ -143,9 +176,9 @@ const TicketModal: React.FC<TicketModalProps> = ({ ticket, onClose, defaultTicke
|
||||
id="subject"
|
||||
value={subject}
|
||||
onChange={(e) => setSubject(e.target.value)}
|
||||
className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
|
||||
className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
required
|
||||
disabled={!!ticket && !createTicketMutation.isPending && !updateTicketMutation.isPending} // Disable if viewing existing and not actively editing
|
||||
disabled={isPlatformTicketInSandbox || (!!ticket && !createTicketMutation.isPending && !updateTicketMutation.isPending)} // Disable in sandbox or if viewing existing
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -159,14 +192,14 @@ const TicketModal: React.FC<TicketModalProps> = ({ ticket, onClose, defaultTicke
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
rows={4}
|
||||
className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
|
||||
className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
required
|
||||
disabled={!!ticket && !createTicketMutation.isPending && !updateTicketMutation.isPending} // Disable if viewing existing and not actively editing
|
||||
disabled={isPlatformTicketInSandbox || (!!ticket && !createTicketMutation.isPending && !updateTicketMutation.isPending)} // Disable in sandbox or if viewing existing
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Ticket Type (only for new tickets) */}
|
||||
{!ticket && (
|
||||
{/* Ticket Type (only for new tickets, and hide for platform tickets) */}
|
||||
{!ticket && ticketType !== 'PLATFORM' && (
|
||||
<div>
|
||||
<label htmlFor="ticketType" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
{t('tickets.ticketType')}
|
||||
@@ -184,44 +217,46 @@ const TicketModal: React.FC<TicketModalProps> = ({ ticket, onClose, defaultTicke
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Priority & Category */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label htmlFor="priority" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
{t('tickets.priority')}
|
||||
</label>
|
||||
<select
|
||||
id="priority"
|
||||
value={priority}
|
||||
onChange={(e) => setPriority(e.target.value as TicketPriority)}
|
||||
className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
|
||||
disabled={!!ticket && !createTicketMutation.isPending && !updateTicketMutation.isPending}
|
||||
>
|
||||
{priorityOptions.map(opt => (
|
||||
<option key={opt} value={opt}>{t(`tickets.priorities.${opt.toLowerCase()}`)}</option>
|
||||
))}
|
||||
</select>
|
||||
{/* Priority & Category - Hide for platform tickets when viewing/creating */}
|
||||
{ticketType !== 'PLATFORM' && (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label htmlFor="priority" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
{t('tickets.priority')}
|
||||
</label>
|
||||
<select
|
||||
id="priority"
|
||||
value={priority}
|
||||
onChange={(e) => setPriority(e.target.value as TicketPriority)}
|
||||
className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
disabled={!!ticket && !createTicketMutation.isPending && !updateTicketMutation.isPending}
|
||||
>
|
||||
{priorityOptions.map(opt => (
|
||||
<option key={opt} value={opt}>{t(`tickets.priorities.${opt.toLowerCase()}`)}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="category" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
{t('tickets.category')}
|
||||
</label>
|
||||
<select
|
||||
id="category"
|
||||
value={category}
|
||||
onChange={(e) => setCategory(e.target.value as TicketCategory)}
|
||||
className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
disabled={!!ticket && !createTicketMutation.isPending && !updateTicketMutation.isPending}
|
||||
>
|
||||
{availableCategories.map(cat => (
|
||||
<option key={cat} value={cat}>{t(`tickets.categories.${cat.toLowerCase()}`)}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="category" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
{t('tickets.category')}
|
||||
</label>
|
||||
<select
|
||||
id="category"
|
||||
value={category}
|
||||
onChange={(e) => setCategory(e.target.value as TicketCategory)}
|
||||
className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
|
||||
disabled={!!ticket && !createTicketMutation.isPending && !updateTicketMutation.isPending}
|
||||
>
|
||||
{availableCategories.map(cat => (
|
||||
<option key={cat} value={cat}>{t(`tickets.categories.${cat.toLowerCase()}`)}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Assignee & Status (only visible for existing tickets or if user has permission to assign) */}
|
||||
{ticket && (
|
||||
{/* Assignee & Status (only visible for existing non-PLATFORM tickets) */}
|
||||
{ticket && ticketType !== 'PLATFORM' && (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label htmlFor="assignee" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
@@ -260,16 +295,26 @@ const TicketModal: React.FC<TicketModalProps> = ({ ticket, onClose, defaultTicke
|
||||
{/* Submit Button for Ticket */}
|
||||
{!ticket && ( // Only show submit for new tickets
|
||||
<div className="flex justify-end pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
type="submit"
|
||||
className="px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors"
|
||||
disabled={createTicketMutation.isPending}
|
||||
>
|
||||
{createTicketMutation.isPending ? t('common.saving') : t('tickets.createTicket')}
|
||||
</button>
|
||||
{isPlatformTicketInSandbox ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
{t('common.cancel', 'Cancel')}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="submit"
|
||||
className="px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors"
|
||||
disabled={createTicketMutation.isPending}
|
||||
>
|
||||
{createTicketMutation.isPending ? t('common.saving') : t('tickets.createTicket')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{ticket && ( // Show update button for existing tickets
|
||||
{ticket && ticketType !== 'PLATFORM' && ( // Show update button for existing non-PLATFORM tickets
|
||||
<div className="flex justify-end pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
type="submit"
|
||||
@@ -311,35 +356,56 @@ const TicketModal: React.FC<TicketModalProps> = ({ ticket, onClose, defaultTicke
|
||||
<p className="text-gray-500 dark:text-gray-400 text-sm">{t('tickets.noComments')}</p>
|
||||
)}
|
||||
|
||||
{/* Add Comment Form */}
|
||||
<form onSubmit={handleAddComment} className="pt-4 border-t border-gray-200 dark:border-gray-700 space-y-3">
|
||||
{/* Reply Form */}
|
||||
<form onSubmit={handleAddReply} className="pt-4 border-t border-gray-200 dark:border-gray-700 space-y-3">
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{t('tickets.replyLabel', 'Reply to Customer')}
|
||||
</label>
|
||||
<textarea
|
||||
value={newCommentText}
|
||||
onChange={(e) => setNewCommentText(e.target.value)}
|
||||
value={replyText}
|
||||
onChange={(e) => setReplyText(e.target.value)}
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
|
||||
placeholder={t('tickets.addCommentPlaceholder')}
|
||||
required
|
||||
/>
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="flex items-center text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isInternalComment}
|
||||
onChange={(e) => setIsInternalComment(e.target.checked)}
|
||||
className="form-checkbox h-4 w-4 text-brand-600 transition duration-150 ease-in-out rounded border-gray-300 focus:ring-brand-500 mr-2"
|
||||
/>
|
||||
{t('tickets.internalComment')}
|
||||
</label>
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
className="flex items-center gap-2 px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors"
|
||||
disabled={createCommentMutation.isPending || !newCommentText.trim()}
|
||||
disabled={createCommentMutation.isPending || !replyText.trim()}
|
||||
>
|
||||
<Send size={16} /> {createCommentMutation.isPending ? t('common.sending') : t('tickets.postComment')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/* Internal Note Form - Only show for non-PLATFORM tickets */}
|
||||
{ticketType !== 'PLATFORM' && (
|
||||
<form onSubmit={handleAddInternalNote} className="pt-4 border-t border-gray-200 dark:border-gray-700 space-y-3">
|
||||
<label className="block text-sm font-medium text-orange-600 dark:text-orange-400">
|
||||
{t('tickets.internalNoteLabel', 'Internal Note')}
|
||||
<span className="ml-2 text-xs font-normal text-gray-500 dark:text-gray-400">
|
||||
{t('tickets.internalNoteHint', '(Not visible to customer)')}
|
||||
</span>
|
||||
</label>
|
||||
<textarea
|
||||
value={internalNoteText}
|
||||
onChange={(e) => setInternalNoteText(e.target.value)}
|
||||
rows={2}
|
||||
className="w-full px-3 py-2 rounded-lg border border-orange-300 dark:border-orange-600 bg-orange-50 dark:bg-orange-900/20 text-gray-900 dark:text-white focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
|
||||
placeholder={t('tickets.internalNotePlaceholder', 'Add an internal note...')}
|
||||
/>
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
className="flex items-center gap-2 px-4 py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition-colors"
|
||||
disabled={createCommentMutation.isPending || !internalNoteText.trim()}
|
||||
>
|
||||
<Send size={16} /> {createCommentMutation.isPending ? t('common.sending') : t('tickets.addNote', 'Add Note')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,19 +1,24 @@
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Bell, Search, Moon, Sun, Menu } from 'lucide-react';
|
||||
import { Search, Moon, Sun, Menu } from 'lucide-react';
|
||||
import { User } from '../types';
|
||||
import UserProfileDropdown from './UserProfileDropdown';
|
||||
import LanguageSelector from './LanguageSelector';
|
||||
import NotificationDropdown from './NotificationDropdown';
|
||||
import SandboxToggle from './SandboxToggle';
|
||||
import { useSandbox } from '../contexts/SandboxContext';
|
||||
|
||||
interface TopBarProps {
|
||||
user: User;
|
||||
isDarkMode: boolean;
|
||||
toggleTheme: () => void;
|
||||
onMenuClick: () => void;
|
||||
onTicketClick?: (ticketId: string) => void;
|
||||
}
|
||||
|
||||
const TopBar: React.FC<TopBarProps> = ({ user, isDarkMode, toggleTheme, onMenuClick }) => {
|
||||
const TopBar: React.FC<TopBarProps> = ({ user, isDarkMode, toggleTheme, onMenuClick, onTicketClick }) => {
|
||||
const { t } = useTranslation();
|
||||
const { isSandbox, sandboxEnabled, toggleSandbox, isToggling } = useSandbox();
|
||||
|
||||
return (
|
||||
<header className="flex items-center justify-between h-16 px-4 sm:px-8 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 transition-colors duration-200 shrink-0">
|
||||
@@ -38,6 +43,14 @@ const TopBar: React.FC<TopBarProps> = ({ user, isDarkMode, toggleTheme, onMenuCl
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Sandbox Mode Toggle */}
|
||||
<SandboxToggle
|
||||
isSandbox={isSandbox}
|
||||
sandboxEnabled={sandboxEnabled}
|
||||
onToggle={toggleSandbox}
|
||||
isToggling={isToggling}
|
||||
/>
|
||||
|
||||
<LanguageSelector />
|
||||
|
||||
<button
|
||||
@@ -47,10 +60,7 @@ const TopBar: React.FC<TopBarProps> = ({ user, isDarkMode, toggleTheme, onMenuCl
|
||||
{isDarkMode ? <Sun size={20} /> : <Moon size={20} />}
|
||||
</button>
|
||||
|
||||
<button className="relative p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors">
|
||||
<Bell size={20} />
|
||||
<span className="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full"></span>
|
||||
</button>
|
||||
<NotificationDropdown onTicketClick={onTicketClick} />
|
||||
|
||||
<UserProfileDropdown user={user} />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user