poduck/smoothschedule
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(i18n): Comprehensive internationalization of frontend components and pages

Browse Source 
Translate all hardcoded English strings to use i18n translation keys:

Components:
- TransactionDetailModal: payment details, refunds, technical info
- ConnectOnboarding/ConnectOnboardingEmbed: Stripe Connect setup
- StripeApiKeysForm: API key management
- DomainPurchase: domain registration flow
- Sidebar: navigation labels
- Schedule/Sidebar, PendingSidebar: scheduler UI
- MasqueradeBanner: masquerade status
- Dashboard widgets: metrics, capacity, customers, tickets
- Marketing: PricingTable, PluginShowcase, BenefitsSection
- ConfirmationModal, ServiceList: common UI

Pages:
- Staff: invitation flow, role management
- Customers: form placeholders
- Payments: transactions, payouts, billing
- BookingSettings: URL and redirect configuration
- TrialExpired: upgrade prompts and features
- PlatformSettings, PlatformBusinesses: admin UI
- HelpApiDocs: API documentation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
poduck
2025-12-03 21:40:54 -05:00
parent 902582f4ba
commit c7f241b30a
34 changed files with 1313 additions and 592 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/api/platform.ts
View File

@@ -116,6 +116,14 @@ export const createBusiness = async (
return response.data;
};
/**
* Delete a business/tenant (platform admin only)
* This permanently deletes the tenant and all associated data
*/
export const deleteBusiness = async (businessId: number): Promise<void> => {
await apiClient.delete(`/platform/businesses/${businessId}/`);
};
/**
* Get all users (platform admin only)
*/

11
frontend/src/components/ConfirmationModal.tsx
View File

@@ -1,5 +1,6 @@
import React from 'react';
import { X, AlertTriangle, CheckCircle, Info, AlertCircle } from 'lucide-react';
import { useTranslation } from 'react-i18next';
type ModalVariant = 'info' | 'warning' | 'danger' | 'success';
@@ -48,11 +49,13 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
onConfirm,
title,
message,
confirmText = 'Confirm',
cancelText = 'Cancel',
confirmText,
cancelText,
variant = 'info',
isLoading = false,
}) => {
const { t } = useTranslation();
if (!isOpen) return null;
const config = variantConfig[variant];
@@ -95,7 +98,7 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
disabled={isLoading}
className="px-4 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors disabled:opacity-50"
>
{cancelText}
{cancelText || t('common.cancel')}
</button>
<button
onClick={handleConfirm}
@@ -120,7 +123,7 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
/>
</svg>
)}
{confirmText}
{confirmText || t('common.confirm')}
</button>
</div>
</div>

61
frontend/src/components/ConnectOnboarding.tsx
View File

@@ -4,6 +4,7 @@
*/
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
ExternalLink,
CheckCircle,
@@ -27,6 +28,7 @@ const ConnectOnboarding: React.FC<ConnectOnboardingProps> = ({
tier,
onSuccess,
}) => {
const { t } = useTranslation();
const [error, setError] = useState<string | null>(null);
const onboardingMutation = useConnectOnboarding();
@@ -53,7 +55,7 @@ const ConnectOnboarding: React.FC<ConnectOnboardingProps> = ({
// Redirect to Stripe onboarding
window.location.href = result.url;
} catch (err: any) {
setError(err.response?.data?.error || 'Failed to start onboarding');
setError(err.response?.data?.error || t('payments.failedToStartOnboarding'));
}
};
@@ -65,7 +67,7 @@ const ConnectOnboarding: React.FC<ConnectOnboardingProps> = ({
// Redirect to continue onboarding
window.location.href = result.url;
} catch (err: any) {
setError(err.response?.data?.error || 'Failed to refresh onboarding link');
setError(err.response?.data?.error || t('payments.failedToRefreshLink'));
}
};
@@ -73,13 +75,13 @@ const ConnectOnboarding: React.FC<ConnectOnboardingProps> = ({
const getAccountTypeLabel = () => {
switch (connectAccount?.account_type) {
case 'standard':
return 'Standard Connect';
return t('payments.standardConnect');
case 'express':
return 'Express Connect';
return t('payments.expressConnect');
case 'custom':
return 'Custom Connect';
return t('payments.customConnect');
default:
return 'Connect';
return t('payments.connect');
}
};
@@ -91,9 +93,9 @@ const ConnectOnboarding: React.FC<ConnectOnboardingProps> = ({
<div className="flex items-start gap-3">
<CheckCircle className="text-green-600 shrink-0 mt-0.5" size={20} />
<div className="flex-1">
<h4 className="font-medium text-green-800">Stripe Connected</h4>
<h4 className="font-medium text-green-800">{t('payments.stripeConnected')}</h4>
<p className="text-sm text-green-700 mt-1">
Your Stripe account is connected and ready to accept payments.
{t('payments.stripeConnectedDesc')}
</p>
</div>
</div>
@@ -103,14 +105,14 @@ const ConnectOnboarding: React.FC<ConnectOnboardingProps> = ({
{/* Account Details */}
{connectAccount && (
<div className="bg-gray-50 rounded-lg p-4">
<h4 className="font-medium text-gray-900 mb-3">Account Details</h4>
<h4 className="font-medium text-gray-900 mb-3">{t('payments.accountDetails')}</h4>
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span className="text-gray-600">Account Type:</span>
<span className="text-gray-600">{t('payments.accountType')}:</span>
<span className="text-gray-900">{getAccountTypeLabel()}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600">Status:</span>
<span className="text-gray-600">{t('payments.status')}:</span>
<span
className={`px-2 py-0.5 text-xs font-medium rounded-full ${
connectAccount.status === 'active'
@@ -126,40 +128,40 @@ const ConnectOnboarding: React.FC<ConnectOnboardingProps> = ({
</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-600">Charges:</span>
<span className="text-gray-600">{t('payments.charges')}:</span>
<span className="flex items-center gap-1">
{connectAccount.charges_enabled ? (
<>
<CreditCard size={14} className="text-green-600" />
<span className="text-green-600">Enabled</span>
<span className="text-green-600">{t('payments.enabled')}</span>
</>
) : (
<>
<CreditCard size={14} className="text-gray-400" />
<span className="text-gray-500">Disabled</span>
<span className="text-gray-500">{t('payments.disabled')}</span>
</>
)}
</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-600">Payouts:</span>
<span className="text-gray-600">{t('payments.payouts')}:</span>
<span className="flex items-center gap-1">
{connectAccount.payouts_enabled ? (
<>
<Wallet size={14} className="text-green-600" />
<span className="text-green-600">Enabled</span>
<span className="text-green-600">{t('payments.enabled')}</span>
</>
) : (
<>
<Wallet size={14} className="text-gray-400" />
<span className="text-gray-500">Disabled</span>
<span className="text-gray-500">{t('payments.disabled')}</span>
</>
)}
</span>
</div>
{connectAccount.stripe_account_id && (
<div className="flex justify-between">
<span className="text-gray-600">Account ID:</span>
<span className="text-gray-600">{t('payments.accountId')}:</span>
<code className="font-mono text-gray-900 text-xs">
{connectAccount.stripe_account_id}
</code>
@@ -175,10 +177,9 @@ const ConnectOnboarding: React.FC<ConnectOnboardingProps> = ({
<div className="flex items-start gap-3">
<AlertCircle className="text-yellow-600 shrink-0 mt-0.5" size={20} />
<div className="flex-1">
<h4 className="font-medium text-yellow-800">Complete Onboarding</h4>
<h4 className="font-medium text-yellow-800">{t('payments.completeOnboarding')}</h4>
<p className="text-sm text-yellow-700 mt-1">
Your Stripe Connect account setup is incomplete.
Click below to continue the onboarding process.
{t('payments.onboardingIncomplete')}
</p>
<button
onClick={handleRefreshLink}
@@ -190,7 +191,7 @@ const ConnectOnboarding: React.FC<ConnectOnboardingProps> = ({
) : (
<RefreshCw size={16} />
)}
Continue Onboarding
{t('payments.continueOnboarding')}
</button>
</div>
</div>
@@ -201,24 +202,22 @@ const ConnectOnboarding: React.FC<ConnectOnboardingProps> = ({
{needsOnboarding && (
<div className="space-y-4">
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
<h4 className="font-medium text-blue-800 mb-2">Connect with Stripe</h4>
<h4 className="font-medium text-blue-800 mb-2">{t('payments.connectWithStripe')}</h4>
<p className="text-sm text-blue-700">
As a {tier} tier business, you'll use Stripe Connect to accept payments.
This provides a seamless payment experience for your customers while
the platform handles payment processing.
{t('payments.tierPaymentDescription', { tier })}
</p>
<ul className="mt-3 space-y-1 text-sm text-blue-700">
<li className="flex items-center gap-2">
<CheckCircle size={14} />
Secure payment processing
{t('payments.securePaymentProcessing')}
</li>
<li className="flex items-center gap-2">
<CheckCircle size={14} />
Automatic payouts to your bank account
{t('payments.automaticPayouts')}
</li>
<li className="flex items-center gap-2">
<CheckCircle size={14} />
PCI compliance handled for you
{t('payments.pciCompliance')}
</li>
</ul>
</div>
@@ -233,7 +232,7 @@ const ConnectOnboarding: React.FC<ConnectOnboardingProps> = ({
) : (
<>
<ExternalLink size={18} />
Connect with Stripe
{t('payments.connectWithStripe')}
</>
)}
</button>
@@ -259,7 +258,7 @@ const ConnectOnboarding: React.FC<ConnectOnboardingProps> = ({
className="flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900"
>
<ExternalLink size={14} />
Open Stripe Dashboard
{t('payments.openStripeDashboard')}
</a>
)}
</div>

64
frontend/src/components/ConnectOnboardingEmbed.tsx
View File

@@ -20,6 +20,7 @@ import {
Wallet,
Building2,
} from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { createAccountSession, refreshConnectStatus, ConnectAccountInfo } from '../api/payments';
interface ConnectOnboardingEmbedProps {
@@ -37,6 +38,7 @@ const ConnectOnboardingEmbed: React.FC<ConnectOnboardingEmbedProps> = ({
onComplete,
onError,
}) => {
const { t } = useTranslation();
const [stripeConnectInstance, setStripeConnectInstance] = useState<StripeConnectInstance | null>(null);
const [loadingState, setLoadingState] = useState<LoadingState>('idle');
const [errorMessage, setErrorMessage] = useState<string | null>(null);
@@ -78,12 +80,12 @@ const ConnectOnboardingEmbed: React.FC<ConnectOnboardingEmbedProps> = ({
setLoadingState('ready');
} catch (err: any) {
console.error('Failed to initialize Stripe Connect:', err);
const message = err.response?.data?.error || err.message || 'Failed to initialize payment setup';
const message = err.response?.data?.error || err.message || t('payments.failedToInitializePayment');
setErrorMessage(message);
setLoadingState('error');
onError?.(message);
}
}, [loadingState, onError]);
}, [loadingState, onError, t]);
// Handle onboarding completion
const handleOnboardingExit = useCallback(async () => {
@@ -100,23 +102,23 @@ const ConnectOnboardingEmbed: React.FC<ConnectOnboardingEmbedProps> = ({
// Handle errors from the Connect component
const handleLoadError = useCallback((loadError: { error: { message?: string }; elementTagName: string }) => {
console.error('Connect component load error:', loadError);
const message = loadError.error.message || 'Failed to load payment component';
const message = loadError.error.message || t('payments.failedToLoadPaymentComponent');
setErrorMessage(message);
setLoadingState('error');
onError?.(message);
}, [onError]);
}, [onError, t]);
// Account type display
const getAccountTypeLabel = () => {
switch (connectAccount?.account_type) {
case 'standard':
return 'Standard Connect';
return t('payments.standardConnect');
case 'express':
return 'Express Connect';
return t('payments.expressConnect');
case 'custom':
return 'Custom Connect';
return t('payments.customConnect');
default:
return 'Connect';
return t('payments.connect');
}
};
@@ -128,39 +130,39 @@ const ConnectOnboardingEmbed: React.FC<ConnectOnboardingEmbedProps> = ({
<div className="flex items-start gap-3">
<CheckCircle className="text-green-600 dark:text-green-400 shrink-0 mt-0.5" size={20} />
<div className="flex-1">
<h4 className="font-medium text-green-800 dark:text-green-300">Stripe Connected</h4>
<h4 className="font-medium text-green-800 dark:text-green-300">{t('payments.stripeConnected')}</h4>
<p className="text-sm text-green-700 dark:text-green-400 mt-1">
Your Stripe account is connected and ready to accept payments.
{t('payments.stripeConnectedDesc')}
</p>
</div>
</div>
</div>
<div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4">
<h4 className="font-medium text-gray-900 dark:text-white mb-3">Account Details</h4>
<h4 className="font-medium text-gray-900 dark:text-white mb-3">{t('payments.accountDetails')}</h4>
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span className="text-gray-600 dark:text-gray-400">Account Type:</span>
<span className="text-gray-600 dark:text-gray-400">{t('payments.accountType')}:</span>
<span className="text-gray-900 dark:text-white">{getAccountTypeLabel()}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600 dark:text-gray-400">Status:</span>
<span className="text-gray-600 dark:text-gray-400">{t('payments.status')}:</span>
<span className="px-2 py-0.5 text-xs font-medium rounded-full bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300">
{connectAccount.status}
</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-600 dark:text-gray-400">Charges:</span>
<span className="text-gray-600 dark:text-gray-400">{t('payments.charges')}:</span>
<span className="flex items-center gap-1 text-green-600 dark:text-green-400">
<CreditCard size={14} />
Enabled
{t('payments.enabled')}
</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-600 dark:text-gray-400">Payouts:</span>
<span className="text-gray-600 dark:text-gray-400">{t('payments.payouts')}:</span>
<span className="flex items-center gap-1 text-green-600 dark:text-green-400">
<Wallet size={14} />
{connectAccount.payouts_enabled ? 'Enabled' : 'Pending'}
{connectAccount.payouts_enabled ? t('payments.enabled') : t('payments.pending')}
</span>
</div>
</div>
@@ -174,9 +176,9 @@ const ConnectOnboardingEmbed: React.FC<ConnectOnboardingEmbedProps> = ({
return (
<div className="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-6 text-center">
<CheckCircle className="mx-auto text-green-600 dark:text-green-400 mb-3" size={48} />
<h4 className="font-medium text-green-800 dark:text-green-300 text-lg">Onboarding Complete!</h4>
<h4 className="font-medium text-green-800 dark:text-green-300 text-lg">{t('payments.onboardingComplete')}</h4>
<p className="text-sm text-green-700 dark:text-green-400 mt-2">
Your Stripe account has been set up. You can now accept payments.
{t('payments.stripeSetupComplete')}
</p>
</div>
);
@@ -190,7 +192,7 @@ const ConnectOnboardingEmbed: React.FC<ConnectOnboardingEmbedProps> = ({
<div className="flex items-start gap-3">
<AlertCircle className="text-red-600 dark:text-red-400 shrink-0 mt-0.5" size={20} />
<div className="flex-1">
<h4 className="font-medium text-red-800 dark:text-red-300">Setup Failed</h4>
<h4 className="font-medium text-red-800 dark:text-red-300">{t('payments.setupFailed')}</h4>
<p className="text-sm text-red-700 dark:text-red-400 mt-1">{errorMessage}</p>
</div>
</div>
@@ -202,7 +204,7 @@ const ConnectOnboardingEmbed: React.FC<ConnectOnboardingEmbedProps> = ({
}}
className="w-full px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600"
>
Try Again
{t('payments.tryAgain')}
</button>
</div>
);
@@ -216,23 +218,22 @@ const ConnectOnboardingEmbed: React.FC<ConnectOnboardingEmbedProps> = ({
<div className="flex items-start gap-3">
<Building2 className="text-blue-600 dark:text-blue-400 shrink-0 mt-0.5" size={20} />
<div className="flex-1">
<h4 className="font-medium text-blue-800 dark:text-blue-300">Set Up Payments</h4>
<h4 className="font-medium text-blue-800 dark:text-blue-300">{t('payments.setUpPayments')}</h4>
<p className="text-sm text-blue-700 dark:text-blue-400 mt-1">
As a {tier} tier business, you'll use Stripe Connect to accept payments.
Complete the onboarding process to start accepting payments from your customers.
{t('payments.tierPaymentDescriptionWithOnboarding', { tier })}
</p>
<ul className="mt-3 space-y-1 text-sm text-blue-700 dark:text-blue-400">
<li className="flex items-center gap-2">
<CheckCircle size={14} />
Secure payment processing
{t('payments.securePaymentProcessing')}
</li>
<li className="flex items-center gap-2">
<CheckCircle size={14} />
Automatic payouts to your bank account
{t('payments.automaticPayouts')}
</li>
<li className="flex items-center gap-2">
<CheckCircle size={14} />
PCI compliance handled for you
{t('payments.pciCompliance')}
</li>
</ul>
</div>
@@ -244,7 +245,7 @@ const ConnectOnboardingEmbed: React.FC<ConnectOnboardingEmbedProps> = ({
className="w-full flex items-center justify-center gap-2 px-4 py-3 text-sm font-medium text-white bg-[#635BFF] rounded-lg hover:bg-[#5851ea] transition-colors"
>
<CreditCard size={18} />
Start Payment Setup
{t('payments.startPaymentSetup')}
</button>
</div>
);
@@ -255,7 +256,7 @@ const ConnectOnboardingEmbed: React.FC<ConnectOnboardingEmbedProps> = ({
return (
<div className="flex flex-col items-center justify-center py-12">
<Loader2 className="animate-spin text-[#635BFF] mb-4" size={40} />
<p className="text-gray-600 dark:text-gray-400">Initializing payment setup...</p>
<p className="text-gray-600 dark:text-gray-400">{t('payments.initializingPaymentSetup')}</p>
</div>
);
}
@@ -265,10 +266,9 @@ const ConnectOnboardingEmbed: React.FC<ConnectOnboardingEmbedProps> = ({
return (
<div className="space-y-4">
<div className="bg-gray-50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 rounded-lg p-4">
<h4 className="font-medium text-gray-900 dark:text-white mb-2">Complete Your Account Setup</h4>
<h4 className="font-medium text-gray-900 dark:text-white mb-2">{t('payments.completeAccountSetup')}</h4>
<p className="text-sm text-gray-600 dark:text-gray-400">
Fill out the information below to finish setting up your payment account.
Your information is securely handled by Stripe.
{t('payments.fillOutInfoForPayment')}
</p>
</div>

104
frontend/src/components/DomainPurchase.tsx
View File

@@ -1,4 +1,5 @@
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
Search,
Globe,
@@ -26,6 +27,7 @@ interface DomainPurchaseProps {
type Step = 'search' | 'details' | 'confirm';
const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
const { t } = useTranslation();
const [step, setStep] = useState<Step>('search');
const [searchQuery, setSearchQuery] = useState('');
const [searchResults, setSearchResults] = useState<DomainAvailability[]>([]);
@@ -138,7 +140,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
>
1
</div>
<span className="text-sm font-medium">Search</span>
<span className="text-sm font-medium">{t('common.search')}</span>
</div>
<ChevronRight className="h-4 w-4 text-gray-400" />
<div
@@ -155,7 +157,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
>
2
</div>
<span className="text-sm font-medium">Details</span>
<span className="text-sm font-medium">{t('settings.domain.details')}</span>
</div>
<ChevronRight className="h-4 w-4 text-gray-400" />
<div
@@ -172,7 +174,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
>
3
</div>
<span className="text-sm font-medium">Confirm</span>
<span className="text-sm font-medium">{t('common.confirm')}</span>
</div>
</div>
@@ -186,7 +188,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
type="text"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Enter domain name or keyword..."
placeholder={t('settings.domain.searchPlaceholder')}
className="w-full pl-10 pr-4 py-3 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-brand-500"
/>
</div>
@@ -200,14 +202,14 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
) : (
<Search className="h-5 w-5" />
)}
Search
{t('common.search')}
</button>
</form>
{/* Search Results */}
{searchResults.length > 0 && (
<div className="space-y-3">
<h4 className="font-medium text-gray-900 dark:text-white">Search Results</h4>
<h4 className="font-medium text-gray-900 dark:text-white">{t('payments.searchResults')}</h4>
<div className="space-y-2">
{searchResults.map((result) => (
<div
@@ -230,7 +232,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
</span>
{result.premium && (
<span className="ml-2 px-2 py-0.5 text-xs bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400 rounded">
Premium
{t('settings.domain.premium')}
</span>
)}
</div>
@@ -246,12 +248,12 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
className="px-4 py-2 bg-brand-600 text-white text-sm rounded-lg hover:bg-brand-700 flex items-center gap-2"
>
<ShoppingCart className="h-4 w-4" />
Select
{t('settings.domain.select')}
</button>
</>
)}
{!result.available && (
<span className="text-sm text-gray-500 dark:text-gray-400">Unavailable</span>
<span className="text-sm text-gray-500 dark:text-gray-400">{t('settings.domain.unavailable')}</span>
)}
</div>
</div>
@@ -264,7 +266,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
{registeredDomains && registeredDomains.length > 0 && (
<div className="mt-8 pt-6 border-t border-gray-100 dark:border-gray-700">
<h4 className="font-medium text-gray-900 dark:text-white mb-4">
Your Registered Domains
{t('settings.domain.yourRegisteredDomains')}
</h4>
<div className="space-y-2">
{registeredDomains.map((domain) => (
@@ -289,7 +291,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
</div>
{domain.expires_at && (
<span className="text-sm text-gray-500 dark:text-gray-400">
Expires: {new Date(domain.expires_at).toLocaleDateString()}
{t('settings.domain.expires')}: {new Date(domain.expires_at).toLocaleDateString()}
</span>
)}
</div>
@@ -316,7 +318,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
onClick={() => setStep('search')}
className="text-sm text-brand-600 dark:text-brand-400 hover:underline"
>
Change
{t('settings.domain.change')}
</button>
</div>
</div>
@@ -325,7 +327,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Registration Period
{t('payments.registrationPeriod')}
</label>
<select
value={years}
@@ -334,7 +336,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
>
{[1, 2, 3, 5, 10].map((y) => (
<option key={y} value={y}>
{y} {y === 1 ? 'year' : 'years'} - $
{y} {y === 1 ? t('settings.domain.year') : t('settings.domain.years')} - $
{((selectedDomain.premium_price || selectedDomain.price || 0) * y).toFixed(2)}
</option>
))}
@@ -355,10 +357,10 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
<Shield className="h-5 w-5 text-gray-400" />
<div>
<span className="text-gray-900 dark:text-white font-medium">
WHOIS Privacy Protection
{t('settings.domain.whoisPrivacy')}
</span>
<p className="text-sm text-gray-500 dark:text-gray-400">
Hide your personal information from public WHOIS lookups
{t('settings.domain.whoisPrivacyDesc')}
</p>
</div>
</div>
@@ -374,9 +376,9 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
<div className="flex items-center gap-2">
<RefreshCw className="h-5 w-5 text-gray-400" />
<div>
<span className="text-gray-900 dark:text-white font-medium">Auto-Renewal</span>
<span className="text-gray-900 dark:text-white font-medium">{t('settings.domain.autoRenewal')}</span>
<p className="text-sm text-gray-500 dark:text-gray-400">
Automatically renew this domain before it expires
{t('settings.domain.autoRenewalDesc')}
</p>
</div>
</div>
@@ -393,10 +395,10 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
<Globe className="h-5 w-5 text-gray-400" />
<div>
<span className="text-gray-900 dark:text-white font-medium">
Auto-configure as Custom Domain
{t('settings.domain.autoConfigure')}
</span>
<p className="text-sm text-gray-500 dark:text-gray-400">
Automatically set up this domain for your business
{t('settings.domain.autoConfigureDesc')}
</p>
</div>
</div>
@@ -406,12 +408,12 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
{/* Contact Information */}
<div className="pt-6 border-t border-gray-100 dark:border-gray-700">
<h4 className="font-medium text-gray-900 dark:text-white mb-4">
Registrant Information
{t('settings.domain.registrantInfo')}
</h4>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
First Name *
{t('settings.domain.firstName')} *
</label>
<input
type="text"
@@ -423,7 +425,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
Last Name *
{t('settings.domain.lastName')} *
</label>
<input
type="text"
@@ -435,7 +437,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
Email *
{t('customers.email')} *
</label>
<input
type="email"
@@ -447,7 +449,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
Phone *
{t('customers.phone')} *
</label>
<input
type="tel"
@@ -460,7 +462,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
</div>
<div className="md:col-span-2">
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
Address *
{t('customers.address')} *
</label>
<input
type="text"
@@ -472,7 +474,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
City *
{t('customers.city')} *
</label>
<input
type="text"
@@ -484,7 +486,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
State/Province *
{t('settings.domain.stateProvince')} *
</label>
<input
type="text"
@@ -496,7 +498,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
ZIP/Postal Code *
{t('settings.domain.zipPostalCode')} *
</label>
<input
type="text"
@@ -508,19 +510,19 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
Country *
{t('settings.domain.country')} *
</label>
<select
value={contact.country}
onChange={(e) => updateContact('country', e.target.value)}
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
>
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="GB">United Kingdom</option>
<option value="AU">Australia</option>
<option value="DE">Germany</option>
<option value="FR">France</option>
<option value="US">{t('settings.domain.countries.us')}</option>
<option value="CA">{t('settings.domain.countries.ca')}</option>
<option value="GB">{t('settings.domain.countries.gb')}</option>
<option value="AU">{t('settings.domain.countries.au')}</option>
<option value="DE">{t('settings.domain.countries.de')}</option>
<option value="FR">{t('settings.domain.countries.fr')}</option>
</select>
</div>
</div>
@@ -532,14 +534,14 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
onClick={() => setStep('search')}
className="px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"
>
Back
{t('common.back')}
</button>
<button
onClick={() => setStep('confirm')}
disabled={!isContactValid()}
className="px-6 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 disabled:opacity-50 disabled:cursor-not-allowed"
>
Continue
{t('settings.domain.continue')}
</button>
</div>
</div>
@@ -548,36 +550,36 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
{/* Step 3: Confirm */}
{step === 'confirm' && selectedDomain && (
<div className="space-y-6">
<h4 className="font-medium text-gray-900 dark:text-white">Order Summary</h4>
<h4 className="font-medium text-gray-900 dark:text-white">{t('payments.orderSummary')}</h4>
<div className="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4 space-y-3">
<div className="flex justify-between">
<span className="text-gray-600 dark:text-gray-400">Domain</span>
<span className="text-gray-600 dark:text-gray-400">{t('settings.domain.domain')}</span>
<span className="font-medium text-gray-900 dark:text-white">
{selectedDomain.domain}
</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600 dark:text-gray-400">Registration Period</span>
<span className="text-gray-600 dark:text-gray-400">{t('payments.registrationPeriod')}</span>
<span className="font-medium text-gray-900 dark:text-white">
{years} {years === 1 ? 'year' : 'years'}
{years} {years === 1 ? t('settings.domain.year') : t('settings.domain.years')}
</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600 dark:text-gray-400">WHOIS Privacy</span>
<span className="text-gray-600 dark:text-gray-400">{t('settings.domain.whoisPrivacy')}</span>
<span className="font-medium text-gray-900 dark:text-white">
{whoisPrivacy ? 'Enabled' : 'Disabled'}
{whoisPrivacy ? t('platform.settings.enabled') : t('platform.settings.none')}
</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600 dark:text-gray-400">Auto-Renewal</span>
<span className="text-gray-600 dark:text-gray-400">{t('settings.domain.autoRenewal')}</span>
<span className="font-medium text-gray-900 dark:text-white">
{autoRenew ? 'Enabled' : 'Disabled'}
{autoRenew ? t('platform.settings.enabled') : t('platform.settings.none')}
</span>
</div>
<div className="pt-3 border-t border-gray-200 dark:border-gray-700">
<div className="flex justify-between">
<span className="font-semibold text-gray-900 dark:text-white">Total</span>
<span className="font-semibold text-gray-900 dark:text-white">{t('settings.domain.total')}</span>
<span className="font-bold text-xl text-brand-600 dark:text-brand-400">
${getPrice().toFixed(2)}
</span>
@@ -587,7 +589,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
{/* Registrant Summary */}
<div className="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4">
<h5 className="font-medium text-gray-900 dark:text-white mb-2">Registrant</h5>
<h5 className="font-medium text-gray-900 dark:text-white mb-2">{t('settings.domain.registrant')}</h5>
<p className="text-sm text-gray-600 dark:text-gray-400">
{contact.first_name} {contact.last_name}
<br />
@@ -602,7 +604,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
{registerMutation.isError && (
<div className="flex items-center gap-2 p-4 bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400 rounded-lg">
<AlertCircle className="h-5 w-5" />
<span>Registration failed. Please try again.</span>
<span>{t('payments.registrationFailed')}</span>
</div>
)}
@@ -612,7 +614,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
onClick={() => setStep('details')}
className="px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"
>
Back
{t('common.back')}
</button>
<button
onClick={handlePurchase}
@@ -624,7 +626,7 @@ const DomainPurchase: React.FC<DomainPurchaseProps> = ({ onSuccess }) => {
) : (
<ShoppingCart className="h-5 w-5" />
)}
Complete Purchase
{t('settings.domain.completePurchase')}
</button>
</div>
</div>

12
frontend/src/components/MasqueradeBanner.tsx
View File

@@ -1,5 +1,6 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Eye, XCircle } from 'lucide-react';
import { User } from '../types';
@@ -11,8 +12,9 @@ interface MasqueradeBannerProps {
}
const MasqueradeBanner: React.FC<MasqueradeBannerProps> = ({ effectiveUser, originalUser, previousUser, onStop }) => {
const buttonText = previousUser ? `Return to ${previousUser.name}` : 'Stop Masquerading';
const { t } = useTranslation();
const buttonText = previousUser ? t('platform.masquerade.returnTo', { name: previousUser.name }) : t('platform.masquerade.stopMasquerading');
return (
<div className="bg-orange-600 text-white px-4 py-2 shadow-md flex items-center justify-between z-50 relative">
@@ -21,9 +23,9 @@ const MasqueradeBanner: React.FC<MasqueradeBannerProps> = ({ effectiveUser, orig
<Eye size={18} />
</div>
<span className="text-sm font-medium">
Masquerading as <strong>{effectiveUser.name}</strong> ({effectiveUser.role})
<span className="opacity-75 mx-2 text-xs">|</span>
Logged in as {originalUser.name}
{t('platform.masquerade.masqueradingAs')} <strong>{effectiveUser.name}</strong> ({effectiveUser.role})
<span className="opacity-75 mx-2 text-xs">|</span>
{t('platform.masquerade.loggedInAs', { name: originalUser.name })}
</span>
</div>
<button

6
frontend/src/components/ResourceCalendar.tsx
View File

@@ -1,4 +1,5 @@
import React, { useState, useMemo, useRef, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { X, ChevronLeft, ChevronRight, Clock } from 'lucide-react';
import { format, addDays, addWeeks, addMonths, startOfDay, startOfWeek, startOfMonth, endOfDay, endOfWeek, endOfMonth, eachDayOfInterval, eachHourOfInterval, isToday, isSameDay, getDay } from 'date-fns';
import { useAppointments, useUpdateAppointment } from '../hooks/useAppointments';
@@ -28,6 +29,7 @@ interface ResourceCalendarProps {
}
const ResourceCalendar: React.FC<ResourceCalendarProps> = ({ resourceId, resourceName, onClose }) => {
const { t } = useTranslation();
const [viewMode, setViewMode] = useState<ViewMode>('day');
const [currentDate, setCurrentDate] = useState(new Date());
const timelineRef = useRef<HTMLDivElement>(null);
@@ -712,12 +714,12 @@ const ResourceCalendar: React.FC<ResourceCalendarProps> = ({ resourceId, resourc
{isLoading && (
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
<p className="text-gray-400 dark:text-gray-500">Loading appointments...</p>
<p className="text-gray-400 dark:text-gray-500">{t('scheduler.loadingAppointments')}</p>
</div>
)}
{!isLoading && appointments.length === 0 && (
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
<p className="text-gray-400 dark:text-gray-500">No appointments scheduled for this period</p>
<p className="text-gray-400 dark:text-gray-500">{t('scheduler.noAppointmentsScheduled')}</p>
</div>
)}
</div>

10
frontend/src/components/Schedule/PendingSidebar.tsx
View File

@@ -2,6 +2,7 @@ import React from 'react';
import { useDraggable } from '@dnd-kit/core';
import { Clock, GripVertical } from 'lucide-react';
import { clsx } from 'clsx';
import { useTranslation } from 'react-i18next';
export interface PendingAppointment {
id: number;
@@ -15,6 +16,7 @@ interface PendingItemProps {
}
const PendingItem: React.FC<PendingItemProps> = ({ appointment }) => {
const { t } = useTranslation();
const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
id: `pending-${appointment.id}`,
data: {
@@ -43,7 +45,7 @@ const PendingItem: React.FC<PendingItemProps> = ({ appointment }) => {
</div>
<div className="mt-2 flex items-center gap-1 text-xs text-gray-400">
<Clock size={10} />
<span>{appointment.durationMinutes} min</span>
<span>{appointment.durationMinutes} {t('scheduler.min')}</span>
</div>
</div>
);
@@ -54,16 +56,18 @@ interface PendingSidebarProps {
}
const PendingSidebar: React.FC<PendingSidebarProps> = ({ appointments }) => {
const { t } = useTranslation();
return (
<div className="w-64 bg-gray-50 border-r border-gray-200 flex flex-col h-full shrink-0">
<div className="p-4 border-b border-gray-200 bg-gray-100">
<h3 className="text-xs font-bold text-gray-500 uppercase tracking-wider flex items-center gap-2">
<Clock size={12} /> Pending Requests ({appointments.length})
<Clock size={12} /> {t('scheduler.pendingRequests')} ({appointments.length})
</h3>
</div>
<div className="p-4 overflow-y-auto flex-1">
{appointments.length === 0 ? (
<div className="text-xs text-gray-400 italic text-center py-4">No pending requests</div>
<div className="text-xs text-gray-400 italic text-center py-4">{t('scheduler.noPendingRequests')}</div>
) : (
appointments.map(apt => (
<PendingItem key={apt.id} appointment={apt} />

18
frontend/src/components/Schedule/Sidebar.tsx
View File

@@ -2,6 +2,7 @@ import React from 'react';
import { useDraggable } from '@dnd-kit/core';
import { Clock, GripVertical, Trash2 } from 'lucide-react';
import { clsx } from 'clsx';
import { useTranslation } from 'react-i18next';
export interface PendingAppointment {
id: number;
@@ -22,6 +23,7 @@ interface PendingItemProps {
}
const PendingItem: React.FC<PendingItemProps> = ({ appointment }) => {
const { t } = useTranslation();
const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
id: `pending-${appointment.id}`,
data: {
@@ -50,7 +52,7 @@ const PendingItem: React.FC<PendingItemProps> = ({ appointment }) => {
</div>
<div className="mt-2 flex items-center gap-1 text-xs text-gray-400 dark:text-gray-500">
<Clock size={10} />
<span>{appointment.durationMinutes} min</span>
<span>{appointment.durationMinutes} {t('scheduler.min')}</span>
</div>
</div>
);
@@ -63,11 +65,13 @@ interface SidebarProps {
}
const Sidebar: React.FC<SidebarProps> = ({ resourceLayouts, pendingAppointments, scrollRef }) => {
const { t } = useTranslation();
return (
<div className="flex flex-col bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 shrink-0 shadow-lg z-20 transition-colors duration-200" style={{ width: 250 }}>
{/* Resources Header */}
<div className="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 flex items-center px-4 font-semibold text-gray-500 dark:text-gray-400 text-xs uppercase tracking-wider shrink-0 transition-colors duration-200" style={{ height: 48 }}>
Resources
{t('scheduler.resources')}
</div>
{/* Resources List (Synced Scroll) */}
@@ -89,10 +93,10 @@ const Sidebar: React.FC<SidebarProps> = ({ resourceLayouts, pendingAppointments,
<div>
<p className="font-medium text-sm text-gray-900 dark:text-white">{layout.resourceName}</p>
<p className="text-xs text-gray-400 dark:text-gray-500 capitalize flex items-center gap-1">
Resource
{t('scheduler.resource')}
{layout.laneCount > 1 && (
<span className="text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/50 px-1 rounded text-[10px]">
{layout.laneCount} lanes
{layout.laneCount} {t('scheduler.lanes')}
</span>
)}
</p>
@@ -106,11 +110,11 @@ const Sidebar: React.FC<SidebarProps> = ({ resourceLayouts, pendingAppointments,
{/* Pending Requests (Fixed Bottom) */}
<div className="border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 p-4 h-80 flex flex-col transition-colors duration-200">
<h3 className="text-xs font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3 flex items-center gap-2 shrink-0">
<Clock size={12} /> Pending Requests ({pendingAppointments.length})
<Clock size={12} /> {t('scheduler.pendingRequests')} ({pendingAppointments.length})
</h3>
<div className="space-y-2 overflow-y-auto flex-1 mb-2">
{pendingAppointments.length === 0 ? (
<div className="text-xs text-gray-400 italic text-center py-4">No pending requests</div>
<div className="text-xs text-gray-400 italic text-center py-4">{t('scheduler.noPendingRequests')}</div>
) : (
pendingAppointments.map(apt => (
<PendingItem key={apt.id} appointment={apt} />
@@ -122,7 +126,7 @@ const Sidebar: React.FC<SidebarProps> = ({ resourceLayouts, pendingAppointments,
<div className="shrink-0 mt-2 border-t border-gray-200 dark:border-gray-700 pt-2 opacity-50">
<div className="flex items-center justify-center gap-2 p-3 rounded-lg border-2 border-dashed border-gray-200 dark:border-gray-700 bg-transparent text-gray-400">
<Trash2 size={16} />
<span className="text-xs font-medium">Drop here to archive</span>
<span className="text-xs font-medium">{t('scheduler.dropToArchive')}</span>
</div>
</div>
</div>

10
frontend/src/components/ServiceList.jsx
View File

@@ -1,18 +1,20 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import './ServiceList.css';
const ServiceList = ({ services, onSelectService, loading }) => {
const { t } = useTranslation();
if (loading) {
return <div className="service-list-loading">Loading services...</div>;
return <div className="service-list-loading">{t('services.loadingServices')}</div>;
}
if (!services || services.length === 0) {
return <div className="service-list-empty">No services available</div>;
return <div className="service-list-empty">{t('services.noServicesAvailable')}</div>;
}
return (
<div className="service-list">
<h2>Available Services</h2>
<h2>{t('services.availableServices')}</h2>
<div className="service-grid">
{services.map((service) => (
<div
@@ -28,7 +30,7 @@ const ServiceList = ({ services, onSelectService, loading }) => {
{service.description && (
<p className="service-description">{service.description}</p>
)}
<button className="service-book-btn">Book Now</button>
<button className="service-book-btn">{t('services.bookNow')}</button>
</div>
))}
</div>

4
frontend/src/components/Sidebar.tsx
View File

@@ -59,7 +59,7 @@ const Sidebar: React.FC<SidebarProps> = ({ business, user, isCollapsed, toggleCo
<button
onClick={toggleCollapse}
className={`flex items-center gap-3 w-full text-left px-6 py-6 ${isCollapsed ? 'justify-center' : ''} hover:bg-white/5 transition-colors focus:outline-none`}
aria-label={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
aria-label={isCollapsed ? t('nav.expandSidebar') : t('nav.collapseSidebar')}
>
{business.logoDisplayMode === 'logo-only' && business.logoUrl ? (
<div className="flex items-center justify-center w-full">
@@ -234,7 +234,7 @@ const Sidebar: React.FC<SidebarProps> = ({ business, user, isCollapsed, toggleCo
>
<SmoothScheduleLogo className="w-5 h-5 text-white" />
{!isCollapsed && (
<span className="text-white/60">Smooth Schedule</span>
<span className="text-white/60">{t('nav.smoothSchedule')}</span>
)}
</a>
<button

68
frontend/src/components/StripeApiKeysForm.tsx
View File

@@ -4,6 +4,7 @@
*/
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
Key,
Eye,
@@ -30,6 +31,7 @@ interface StripeApiKeysFormProps {
}
const StripeApiKeysForm: React.FC<StripeApiKeysFormProps> = ({ apiKeys, onSuccess }) => {
const { t } = useTranslation();
const [secretKey, setSecretKey] = useState('');
const [publishableKey, setPublishableKey] = useState('');
const [showSecretKey, setShowSecretKey] = useState(false);
@@ -72,7 +74,7 @@ const StripeApiKeysForm: React.FC<StripeApiKeysFormProps> = ({ apiKeys, onSucces
} catch (error: any) {
setValidationResult({
valid: false,
error: error.response?.data?.error || 'Validation failed',
error: error.response?.data?.error || t('payments.stripeApiKeys.validationFailed'),
});
}
};
@@ -87,7 +89,7 @@ const StripeApiKeysForm: React.FC<StripeApiKeysFormProps> = ({ apiKeys, onSucces
} catch (error: any) {
setValidationResult({
valid: false,
error: error.response?.data?.error || 'Failed to save keys',
error: error.response?.data?.error || t('payments.stripeApiKeys.failedToSaveKeys'),
});
}
};
@@ -121,7 +123,7 @@ const StripeApiKeysForm: React.FC<StripeApiKeysFormProps> = ({ apiKeys, onSucces
<div className="flex items-center justify-between mb-3">
<h4 className="font-medium text-gray-900 dark:text-white flex items-center gap-2">
<CheckCircle size={18} className="text-green-500" />
Stripe Keys Configured
{t('payments.stripeApiKeys.configured')}
</h4>
<div className="flex items-center gap-2">
{/* Environment Badge */}
@@ -136,12 +138,12 @@ const StripeApiKeysForm: React.FC<StripeApiKeysFormProps> = ({ apiKeys, onSucces
{keyEnvironment === 'test' ? (
<>
<FlaskConical size={12} />
Test Mode
{t('payments.stripeApiKeys.testMode')}
</>
) : (
<>
<Zap size={12} />
Live Mode
{t('payments.stripeApiKeys.liveMode')}
</>
)}
</span>
@@ -163,22 +165,22 @@ const StripeApiKeysForm: React.FC<StripeApiKeysFormProps> = ({ apiKeys, onSucces
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span className="text-gray-600 dark:text-gray-400">Publishable Key:</span>
<span className="text-gray-600 dark:text-gray-400">{t('payments.stripeApiKeys.publishableKey')}:</span>
<code className="font-mono text-gray-900 dark:text-white">{apiKeys.publishable_key_masked}</code>
</div>
<div className="flex justify-between">
<span className="text-gray-600 dark:text-gray-400">Secret Key:</span>
<span className="text-gray-600 dark:text-gray-400">{t('payments.stripeApiKeys.secretKey')}:</span>
<code className="font-mono text-gray-900 dark:text-white">{apiKeys.secret_key_masked}</code>
</div>
{apiKeys.stripe_account_name && (
<div className="flex justify-between">
<span className="text-gray-600 dark:text-gray-400">Account:</span>
<span className="text-gray-600 dark:text-gray-400">{t('payments.stripeApiKeys.account')}:</span>
<span className="text-gray-900 dark:text-white">{apiKeys.stripe_account_name}</span>
</div>
)}
{apiKeys.last_validated_at && (
<div className="flex justify-between">
<span className="text-gray-600 dark:text-gray-400">Last Validated:</span>
<span className="text-gray-600 dark:text-gray-400">{t('payments.stripeApiKeys.lastValidated')}:</span>
<span className="text-gray-900 dark:text-white">
{new Date(apiKeys.last_validated_at).toLocaleDateString()}
</span>
@@ -190,10 +192,7 @@ const StripeApiKeysForm: React.FC<StripeApiKeysFormProps> = ({ apiKeys, onSucces
{keyEnvironment === 'test' && apiKeys.status === 'active' && (
<div className="mt-3 p-2 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded text-sm text-amber-700 dark:text-amber-300 flex items-start gap-2">
<FlaskConical size={16} className="shrink-0 mt-0.5" />
<span>
You are using <strong>test keys</strong>. Payments will not be processed for real.
Switch to live keys when ready to accept real payments.
</span>
<span dangerouslySetInnerHTML={{ __html: t('payments.stripeApiKeys.testKeysWarning') }} />
</div>
)}
@@ -214,14 +213,14 @@ const StripeApiKeysForm: React.FC<StripeApiKeysFormProps> = ({ apiKeys, onSucces
) : (
<RefreshCw size={16} />
)}
Re-validate
{t('payments.stripeApiKeys.revalidate')}
</button>
<button
onClick={() => setShowDeleteConfirm(true)}
className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-red-700 bg-white border border-red-300 rounded-lg hover:bg-red-50"
>
<Trash2 size={16} />
Remove
{t('payments.stripeApiKeys.remove')}
</button>
</div>
</div>
@@ -233,10 +232,9 @@ const StripeApiKeysForm: React.FC<StripeApiKeysFormProps> = ({ apiKeys, onSucces
<div className="flex items-start gap-3">
<AlertCircle className="text-yellow-600 shrink-0 mt-0.5" size={20} />
<div>
<h4 className="font-medium text-yellow-800">API Keys Deprecated</h4>
<h4 className="font-medium text-yellow-800">{t('payments.stripeApiKeys.deprecated')}</h4>
<p className="text-sm text-yellow-700 mt-1">
Your API keys have been deprecated because you upgraded to a paid tier.
Please complete Stripe Connect onboarding to accept payments.
{t('payments.stripeApiKeys.deprecatedMessage')}
</p>
</div>
</div>
@@ -247,19 +245,18 @@ const StripeApiKeysForm: React.FC<StripeApiKeysFormProps> = ({ apiKeys, onSucces
{(!isConfigured || isDeprecated) && (
<div className="space-y-4">
<h4 className="font-medium text-gray-900">
{isConfigured ? 'Update API Keys' : 'Add Stripe API Keys'}
{isConfigured ? t('payments.stripeApiKeys.updateApiKeys') : t('payments.stripeApiKeys.addApiKeys')}
</h4>
<p className="text-sm text-gray-600">
Enter your Stripe API keys to enable payment collection.
You can find these in your{' '}
{t('payments.stripeApiKeys.enterKeysDescription')}{' '}
<a
href="https://dashboard.stripe.com/apikeys"
target="_blank"
rel="noopener noreferrer"
className="text-blue-600 hover:underline"
>
Stripe Dashboard
{t('payments.stripeApiKeys.stripeDashboard')}
</a>
.
</p>
@@ -267,7 +264,7 @@ const StripeApiKeysForm: React.FC<StripeApiKeysFormProps> = ({ apiKeys, onSucces
{/* Publishable Key */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Publishable Key
{t('payments.stripeApiKeys.publishableKeyLabel')}
</label>
<div className="relative">
<Key
@@ -290,7 +287,7 @@ const StripeApiKeysForm: React.FC<StripeApiKeysFormProps> = ({ apiKeys, onSucces
{/* Secret Key */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Secret Key
{t('payments.stripeApiKeys.secretKeyLabel')}
</label>
<div className="relative">
<Key
@@ -335,7 +332,7 @@ const StripeApiKeysForm: React.FC<StripeApiKeysFormProps> = ({ apiKeys, onSucces
{validationResult.valid ? (
<div className="space-y-1">
<div className="flex items-center justify-between">
<span className="font-medium">Keys are valid!</span>
<span className="font-medium">{t('payments.stripeApiKeys.keysAreValid')}</span>
{validationResult.environment && (
<span
className={`inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-full ${
@@ -347,23 +344,23 @@ const StripeApiKeysForm: React.FC<StripeApiKeysFormProps> = ({ apiKeys, onSucces
{validationResult.environment === 'test' ? (
<>
<FlaskConical size={10} />
Test Mode
{t('payments.stripeApiKeys.testMode')}
</>
) : (
<>
<Zap size={10} />
Live Mode
{t('payments.stripeApiKeys.liveMode')}
</>
)}
</span>
)}
</div>
{validationResult.accountName && (
<div>Connected to: {validationResult.accountName}</div>
<div>{t('payments.stripeApiKeys.connectedTo', { accountName: validationResult.accountName })}</div>
)}
{validationResult.environment === 'test' && (
<div className="text-amber-700 dark:text-amber-400 text-xs mt-1">
These are test keys. No real payments will be processed.
{t('payments.stripeApiKeys.testKeysNote')}
</div>
)}
</div>
@@ -386,7 +383,7 @@ const StripeApiKeysForm: React.FC<StripeApiKeysFormProps> = ({ apiKeys, onSucces
) : (
<CheckCircle size={16} />
)}
Validate
{t('payments.stripeApiKeys.validate')}
</button>
<button
onClick={handleSave}
@@ -398,7 +395,7 @@ const StripeApiKeysForm: React.FC<StripeApiKeysFormProps> = ({ apiKeys, onSucces
) : (
<Key size={16} />
)}
Save Keys
{t('payments.stripeApiKeys.saveKeys')}
</button>
</div>
</div>
@@ -409,18 +406,17 @@ const StripeApiKeysForm: React.FC<StripeApiKeysFormProps> = ({ apiKeys, onSucces
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
<div className="bg-white rounded-lg p-6 max-w-md w-full mx-4 shadow-xl">
<h3 className="text-lg font-semibold text-gray-900 mb-2">
Remove API Keys?
{t('payments.stripeApiKeys.removeApiKeys')}
</h3>
<p className="text-gray-600 mb-4">
Are you sure you want to remove your Stripe API keys?
You will not be able to accept payments until you add them again.
{t('payments.stripeApiKeys.removeApiKeysMessage')}
</p>
<div className="flex gap-3 justify-end">
<button
onClick={() => setShowDeleteConfirm(false)}
className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50"
>
Cancel
{t('payments.stripeApiKeys.cancel')}
</button>
<button
onClick={handleDelete}
@@ -428,7 +424,7 @@ const StripeApiKeysForm: React.FC<StripeApiKeysFormProps> = ({ apiKeys, onSucces
className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 disabled:opacity-50"
>
{deleteMutation.isPending && <Loader2 size={16} className="animate-spin" />}
Remove
{t('payments.stripeApiKeys.remove')}
</button>
</div>
</div>

74
frontend/src/components/TransactionDetailModal.tsx
View File

@@ -6,6 +6,7 @@
*/
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
X,
CreditCard,
@@ -37,6 +38,7 @@ const TransactionDetailModal: React.FC<TransactionDetailModalProps> = ({
transactionId,
onClose,
}) => {
const { t } = useTranslation();
const { data: transaction, isLoading, error } = useTransactionDetail(transactionId);
const refundMutation = useRefundTransaction();
@@ -62,11 +64,11 @@ const TransactionDetailModal: React.FC<TransactionDetailModalProps> = ({
if (refundType === 'partial') {
const amountCents = Math.round(parseFloat(refundAmount) * 100);
if (isNaN(amountCents) || amountCents <= 0) {
setRefundError('Please enter a valid refund amount');
setRefundError(t('payments.enterValidRefundAmount'));
return;
}
if (amountCents > transaction.refundable_amount) {
setRefundError(`Amount exceeds refundable amount ($${(transaction.refundable_amount / 100).toFixed(2)})`);
setRefundError(t('payments.amountExceedsRefundable', { max: (transaction.refundable_amount / 100).toFixed(2) }));
return;
}
request.amount = amountCents;
@@ -80,7 +82,7 @@ const TransactionDetailModal: React.FC<TransactionDetailModalProps> = ({
setShowRefundForm(false);
setRefundAmount('');
} catch (err: any) {
setRefundError(err.response?.data?.error || 'Failed to process refund');
setRefundError(err.response?.data?.error || t('payments.failedToProcessRefund'));
}
};
@@ -143,7 +145,7 @@ const TransactionDetailModal: React.FC<TransactionDetailModalProps> = ({
</p>
{pm.exp_month && pm.exp_year && (
<p className="text-sm text-gray-500">
Expires {pm.exp_month}/{pm.exp_year}
{t('payments.expires')} {pm.exp_month}/{pm.exp_year}
{pm.funding && ` (${pm.funding})`}
</p>
)}
@@ -176,7 +178,7 @@ const TransactionDetailModal: React.FC<TransactionDetailModalProps> = ({
<div className="sticky top-0 z-10 flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
<div>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
Transaction Details
{t('payments.transactionDetails')}
</h3>
{transaction && (
<p className="text-sm text-gray-500 font-mono">
@@ -204,7 +206,7 @@ const TransactionDetailModal: React.FC<TransactionDetailModalProps> = ({
<div className="bg-red-50 border border-red-200 rounded-lg p-4">
<div className="flex items-center gap-2 text-red-700">
<AlertCircle size={18} />
<p className="font-medium">Failed to load transaction details</p>
<p className="font-medium">{t('payments.failedToLoadTransaction')}</p>
</div>
</div>
)}
@@ -228,7 +230,7 @@ const TransactionDetailModal: React.FC<TransactionDetailModalProps> = ({
className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors"
>
<RefreshCcw size={16} />
Issue Refund
{t('payments.issueRefund')}
</button>
)}
</div>
@@ -238,7 +240,7 @@ const TransactionDetailModal: React.FC<TransactionDetailModalProps> = ({
<div className="bg-red-50 border border-red-200 rounded-lg p-4 space-y-4">
<div className="flex items-center gap-2 text-red-800">
<RefreshCcw size={18} />
<h4 className="font-semibold">Issue Refund</h4>
<h4 className="font-semibold">{t('payments.issueRefund')}</h4>
</div>
{/* Refund Type */}
@@ -252,7 +254,7 @@ const TransactionDetailModal: React.FC<TransactionDetailModalProps> = ({
className="text-red-600 focus:ring-red-500"
/>
<span className="text-sm text-gray-700">
Full refund (${(transaction.refundable_amount / 100).toFixed(2)})
{t('payments.fullRefundAmount', { amount: (transaction.refundable_amount / 100).toFixed(2) })}
</span>
</label>
<label className="flex items-center gap-2 cursor-pointer">
@@ -263,7 +265,7 @@ const TransactionDetailModal: React.FC<TransactionDetailModalProps> = ({
onChange={() => setRefundType('partial')}
className="text-red-600 focus:ring-red-500"
/>
<span className="text-sm text-gray-700">Partial refund</span>
<span className="text-sm text-gray-700">{t('payments.partialRefund')}</span>
</label>
</div>
@@ -271,7 +273,7 @@ const TransactionDetailModal: React.FC<TransactionDetailModalProps> = ({
{refundType === 'partial' && (
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Refund Amount (max ${(transaction.refundable_amount / 100).toFixed(2)})
{t('payments.refundAmountMax', { max: (transaction.refundable_amount / 100).toFixed(2) })}
</label>
<div className="relative">
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">$</span>
@@ -292,16 +294,16 @@ const TransactionDetailModal: React.FC<TransactionDetailModalProps> = ({
{/* Reason */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Refund Reason
{t('payments.refundReason')}
</label>
<select
value={refundReason}
onChange={(e) => setRefundReason(e.target.value as RefundRequest['reason'])}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500"
>
<option value="requested_by_customer">Requested by customer</option>
<option value="duplicate">Duplicate charge</option>
<option value="fraudulent">Fraudulent</option>
<option value="requested_by_customer">{t('payments.requestedByCustomer')}</option>
<option value="duplicate">{t('payments.duplicate')}</option>
<option value="fraudulent">{t('payments.fraudulent')}</option>
</select>
</div>
@@ -322,12 +324,12 @@ const TransactionDetailModal: React.FC<TransactionDetailModalProps> = ({
{refundMutation.isPending ? (
<>
<Loader2 className="animate-spin" size={16} />
Processing...
{t('payments.processing')}
</>
) : (
<>
<RefreshCcw size={16} />
Confirm Refund
{t('payments.processRefund')}
</>
)}
</button>
@@ -340,7 +342,7 @@ const TransactionDetailModal: React.FC<TransactionDetailModalProps> = ({
disabled={refundMutation.isPending}
className="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg"
>
Cancel
{t('common.cancel')}
</button>
</div>
</div>
@@ -352,7 +354,7 @@ const TransactionDetailModal: React.FC<TransactionDetailModalProps> = ({
<div className="space-y-4">
<h4 className="font-semibold text-gray-900 dark:text-white flex items-center gap-2">
<User size={16} />
Customer
{t('payments.customer')}
</h4>
<div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 space-y-3">
{transaction.customer_name && (
@@ -378,27 +380,27 @@ const TransactionDetailModal: React.FC<TransactionDetailModalProps> = ({
<div className="space-y-4">
<h4 className="font-semibold text-gray-900 dark:text-white flex items-center gap-2">
<DollarSign size={16} />
Amount Breakdown
{t('payments.amountBreakdown')}
</h4>
<div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 space-y-2">
<div className="flex justify-between text-sm">
<span className="text-gray-600">Gross Amount</span>
<span className="text-gray-600">{t('payments.grossAmount')}</span>
<span className="font-medium">{transaction.amount_display}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-gray-600">Platform Fee</span>
<span className="text-gray-600">{t('payments.platformFee')}</span>
<span className="text-red-600">-{transaction.fee_display}</span>
</div>
{transaction.total_refunded > 0 && (
<div className="flex justify-between text-sm">
<span className="text-gray-600">Refunded</span>
<span className="text-gray-600">{t('payments.refunded')}</span>
<span className="text-orange-600">
-${(transaction.total_refunded / 100).toFixed(2)}
</span>
</div>
)}
<div className="border-t border-gray-200 dark:border-gray-600 pt-2 mt-2 flex justify-between">
<span className="font-medium text-gray-900 dark:text-white">Net Amount</span>
<span className="font-medium text-gray-900 dark:text-white">{t('payments.netAmount')}</span>
<span className="font-bold text-green-600">
${(transaction.net_amount / 100).toFixed(2)}
</span>
@@ -412,7 +414,7 @@ const TransactionDetailModal: React.FC<TransactionDetailModalProps> = ({
<div className="space-y-4">
<h4 className="font-semibold text-gray-900 dark:text-white flex items-center gap-2">
<CreditCard size={16} />
Payment Method
{t('payments.paymentMethod')}
</h4>
<div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4">
{getPaymentMethodDisplay()}
@@ -425,7 +427,7 @@ const TransactionDetailModal: React.FC<TransactionDetailModalProps> = ({
<div className="space-y-4">
<h4 className="font-semibold text-gray-900 dark:text-white flex items-center gap-2">
<Receipt size={16} />
Description
{t('payments.description')}
</h4>
<div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4">
<p className="text-gray-700 dark:text-gray-300">{transaction.description}</p>
@@ -438,7 +440,7 @@ const TransactionDetailModal: React.FC<TransactionDetailModalProps> = ({
<div className="space-y-4">
<h4 className="font-semibold text-gray-900 dark:text-white flex items-center gap-2">
<RefreshCcw size={16} />
Refund History
{t('payments.refundHistory')}
</h4>
<div className="space-y-3">
{transaction.refunds.map((refund: RefundInfo) => (
@@ -451,7 +453,7 @@ const TransactionDetailModal: React.FC<TransactionDetailModalProps> = ({
<p className="text-sm text-orange-600">
{refund.reason
? refund.reason.replace('_', ' ').replace(/\b\w/g, (c) => c.toUpperCase())
: 'No reason provided'}
: t('payments.noReasonProvided')}
</p>
<p className="text-xs text-orange-500 mt-1">
{formatRefundDate(refund.created)}
@@ -482,12 +484,12 @@ const TransactionDetailModal: React.FC<TransactionDetailModalProps> = ({
<div className="space-y-4">
<h4 className="font-semibold text-gray-900 dark:text-white flex items-center gap-2">
<Calendar size={16} />
Timeline
{t('payments.timeline')}
</h4>
<div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 space-y-3">
<div className="flex items-center gap-3 text-sm">
<div className="w-2 h-2 bg-green-500 rounded-full"></div>
<span className="text-gray-600">Created</span>
<span className="text-gray-600">{t('payments.created')}</span>
<span className="ml-auto text-gray-900 dark:text-white">
{formatDate(transaction.created_at)}
</span>
@@ -495,7 +497,7 @@ const TransactionDetailModal: React.FC<TransactionDetailModalProps> = ({
{transaction.updated_at !== transaction.created_at && (
<div className="flex items-center gap-3 text-sm">
<div className="w-2 h-2 bg-blue-500 rounded-full"></div>
<span className="text-gray-600">Last Updated</span>
<span className="text-gray-600">{t('payments.lastUpdated')}</span>
<span className="ml-auto text-gray-900 dark:text-white">
{formatDate(transaction.updated_at)}
</span>
@@ -508,29 +510,29 @@ const TransactionDetailModal: React.FC<TransactionDetailModalProps> = ({
<div className="space-y-4">
<h4 className="font-semibold text-gray-900 dark:text-white flex items-center gap-2">
<ArrowLeftRight size={16} />
Technical Details
{t('payments.technicalDetails')}
</h4>
<div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 space-y-2 font-mono text-xs">
<div className="flex justify-between">
<span className="text-gray-500">Payment Intent</span>
<span className="text-gray-500">{t('payments.paymentIntent')}</span>
<span className="text-gray-700 dark:text-gray-300">
{transaction.stripe_payment_intent_id}
</span>
</div>
{transaction.stripe_charge_id && (
<div className="flex justify-between">
<span className="text-gray-500">Charge ID</span>
<span className="text-gray-500">{t('payments.chargeId')}</span>
<span className="text-gray-700 dark:text-gray-300">
{transaction.stripe_charge_id}
</span>
</div>
)}
<div className="flex justify-between">
<span className="text-gray-500">Transaction ID</span>
<span className="text-gray-500">{t('payments.transactionId')}</span>
<span className="text-gray-700 dark:text-gray-300">{transaction.id}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-500">Currency</span>
<span className="text-gray-500">{t('payments.currency')}</span>
<span className="text-gray-700 dark:text-gray-300 uppercase">
{transaction.currency}
</span>

4
frontend/src/components/dashboard/CapacityWidget.tsx
View File

@@ -1,4 +1,5 @@
import React, { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { GripVertical, X, Users, User } from 'lucide-react';
import { Appointment, Resource } from '../../types';
import { startOfWeek, endOfWeek, isWithinInterval } from 'date-fns';
@@ -16,6 +17,7 @@ const CapacityWidget: React.FC<CapacityWidgetProps> = ({
isEditing,
onRemove,
}) => {
const { t } = useTranslation();
const capacityData = useMemo(() => {
const now = new Date();
const weekStart = startOfWeek(now, { weekStartsOn: 1 });
@@ -103,7 +105,7 @@ const CapacityWidget: React.FC<CapacityWidgetProps> = ({
{capacityData.resources.length === 0 ? (
<div className="flex-1 flex flex-col items-center justify-center text-gray-400 dark:text-gray-500">
<Users size={32} className="mb-2 opacity-50" />
<p className="text-sm">No resources configured</p>
<p className="text-sm">{t('dashboard.noResourcesConfigured')}</p>
</div>
) : (
<div className="flex-1 grid grid-cols-2 gap-2 auto-rows-min">

4
frontend/src/components/dashboard/CustomerBreakdownWidget.tsx
View File

@@ -1,4 +1,5 @@
import React, { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { GripVertical, X, Users, UserPlus, UserCheck } from 'lucide-react';
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts';
import { Customer } from '../../types';
@@ -14,6 +15,7 @@ const CustomerBreakdownWidget: React.FC<CustomerBreakdownWidgetProps> = ({
isEditing,
onRemove,
}) => {
const { t } = useTranslation();
const breakdownData = useMemo(() => {
// Customers with lastVisit are returning, without are new
const returning = customers.filter((c) => c.lastVisit !== null).length;
@@ -122,7 +124,7 @@ const CustomerBreakdownWidget: React.FC<CustomerBreakdownWidgetProps> = ({
<div className="flex items-center justify-between text-sm">
<div className="flex items-center gap-1 text-gray-500 dark:text-gray-400">
<Users size={12} />
<span>Total Customers</span>
<span>{t('dashboard.totalCustomers')}</span>
</div>
<span className="font-semibold text-gray-900 dark:text-white">{breakdownData.total}</span>
</div>

6
frontend/src/components/dashboard/MetricWidget.tsx
View File

@@ -1,5 +1,6 @@
import React from 'react';
import { TrendingUp, TrendingDown, Minus, GripVertical, X } from 'lucide-react';
import { useTranslation } from 'react-i18next';
interface GrowthData {
weekly: { value: number; change: number };
@@ -23,6 +24,7 @@ const MetricWidget: React.FC<MetricWidgetProps> = ({
isEditing,
onRemove,
}) => {
const { t } = useTranslation();
const formatChange = (change: number) => {
if (change === 0) return '0%';
return change > 0 ? `+${change.toFixed(1)}%` : `${change.toFixed(1)}%`;
@@ -68,14 +70,14 @@ const MetricWidget: React.FC<MetricWidgetProps> = ({
<div className="flex flex-wrap gap-2 text-xs">
<div className="flex items-center gap-1">
<span className="text-gray-500 dark:text-gray-400">Week:</span>
<span className="text-gray-500 dark:text-gray-400">{t('dashboard.weekLabel')}</span>
<span className={`flex items-center px-1.5 py-0.5 rounded-full ${getTrendClass(growth.weekly.change)}`}>
{getTrendIcon(growth.weekly.change)}
{formatChange(growth.weekly.change)}
</span>
</div>
<div className="flex items-center gap-1">
<span className="text-gray-500 dark:text-gray-400">Month:</span>
<span className="text-gray-500 dark:text-gray-400">{t('dashboard.monthLabel')}</span>
<span className={`flex items-center px-1.5 py-0.5 rounded-full ${getTrendClass(growth.monthly.change)}`}>
{getTrendIcon(growth.monthly.change)}
{formatChange(growth.monthly.change)}

11
frontend/src/components/dashboard/NoShowRateWidget.tsx
View File

@@ -1,4 +1,5 @@
import React, { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { GripVertical, X, UserX, TrendingUp, TrendingDown, Minus } from 'lucide-react';
import { Appointment } from '../../types';
import { subDays, subMonths, isAfter } from 'date-fns';
@@ -14,6 +15,8 @@ const NoShowRateWidget: React.FC<NoShowRateWidgetProps> = ({
isEditing,
onRemove,
}) => {
const { t } = useTranslation();
const noShowData = useMemo(() => {
const now = new Date();
const oneWeekAgo = subDays(now, 7);
@@ -108,7 +111,7 @@ const NoShowRateWidget: React.FC<NoShowRateWidgetProps> = ({
<div className={isEditing ? 'pl-5' : ''}>
<div className="flex items-center gap-2 mb-2">
<UserX size={18} className="text-gray-400" />
<p className="text-sm font-medium text-gray-500 dark:text-gray-400">No-Show Rate</p>
<p className="text-sm font-medium text-gray-500 dark:text-gray-400">{t('dashboard.noShowRate')}</p>
</div>
<div className="flex items-baseline gap-2 mb-1">
@@ -116,20 +119,20 @@ const NoShowRateWidget: React.FC<NoShowRateWidgetProps> = ({
{noShowData.currentRate.toFixed(1)}%
</span>
<span className="text-sm text-gray-500 dark:text-gray-400">
({noShowData.noShowCount} this month)
({noShowData.noShowCount} {t('dashboard.thisMonth')})
</span>
</div>
<div className="flex flex-wrap gap-2 text-xs mt-2">
<div className="flex items-center gap-1">
<span className="text-gray-500 dark:text-gray-400">Week:</span>
<span className="text-gray-500 dark:text-gray-400">{t('dashboard.week')}:</span>
<span className={`flex items-center px-1.5 py-0.5 rounded-full ${getTrendClass(noShowData.weeklyChange)}`}>
{getTrendIcon(noShowData.weeklyChange)}
{formatChange(noShowData.weeklyChange)}
</span>
</div>
<div className="flex items-center gap-1">
<span className="text-gray-500 dark:text-gray-400">Month:</span>
<span className="text-gray-500 dark:text-gray-400">{t('dashboard.month')}:</span>
<span className={`flex items-center px-1.5 py-0.5 rounded-full ${getTrendClass(noShowData.monthlyChange)}`}>
{getTrendIcon(noShowData.monthlyChange)}
{formatChange(noShowData.monthlyChange)}

6
frontend/src/components/dashboard/OpenTicketsWidget.tsx
View File

@@ -1,4 +1,5 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import { GripVertical, X, AlertCircle, Clock, ChevronRight } from 'lucide-react';
import { Ticket } from '../../types';
@@ -15,7 +16,8 @@ const OpenTicketsWidget: React.FC<OpenTicketsWidgetProps> = ({
isEditing,
onRemove,
}) => {
const openTickets = tickets.filter(t => t.status === 'open' || t.status === 'in_progress');
const { t } = useTranslation();
const openTickets = tickets.filter(ticket => ticket.status === 'open' || ticket.status === 'in_progress');
const urgentCount = openTickets.filter(t => t.priority === 'urgent' || t.isOverdue).length;
const getPriorityColor = (priority: string, isOverdue?: boolean) => {
@@ -75,7 +77,7 @@ const OpenTicketsWidget: React.FC<OpenTicketsWidgetProps> = ({
{openTickets.length === 0 ? (
<div className="flex flex-col items-center justify-center h-full text-gray-400 dark:text-gray-500">
<AlertCircle size={32} className="mb-2 opacity-50" />
<p className="text-sm">No open tickets</p>
<p className="text-sm">{t('dashboard.noOpenTickets')}</p>
</div>
) : (
openTickets.slice(0, 5).map((ticket) => (

4
frontend/src/components/dashboard/RecentActivityWidget.tsx
View File

@@ -1,4 +1,5 @@
import React, { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { GripVertical, X, Calendar, UserPlus, XCircle, CheckCircle, DollarSign } from 'lucide-react';
import { formatDistanceToNow } from 'date-fns';
import { Appointment, Customer } from '../../types';
@@ -26,6 +27,7 @@ const RecentActivityWidget: React.FC<RecentActivityWidgetProps> = ({
isEditing,
onRemove,
}) => {
const { t } = useTranslation();
const activities = useMemo(() => {
const items: ActivityItem[] = [];
@@ -112,7 +114,7 @@ const RecentActivityWidget: React.FC<RecentActivityWidgetProps> = ({
{activities.length === 0 ? (
<div className="flex flex-col items-center justify-center h-full text-gray-400 dark:text-gray-500">
<Calendar size={32} className="mb-2 opacity-50" />
<p className="text-sm">No recent activity</p>
<p className="text-sm">{t('dashboard.noRecentActivity')}</p>
</div>
) : (
<div className="space-y-3">

19
frontend/src/components/marketing/BenefitsSection.tsx
View File

@@ -1,33 +1,36 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Rocket, Shield, Zap, Headphones } from 'lucide-react';
const BenefitsSection: React.FC = () => {
const { t } = useTranslation();
const benefits = [
{
icon: Rocket,
title: 'Rapid Deployment',
description: 'Launch your branded booking portal in minutes with our pre-configured industry templates.',
title: t('marketing.benefits.rapidDeployment.title'),
description: t('marketing.benefits.rapidDeployment.description'),
color: 'text-blue-600 dark:text-blue-400',
bgColor: 'bg-blue-100 dark:bg-blue-900/30',
},
{
icon: Shield,
title: 'Enterprise Security',
description: 'Sleep soundly knowing your data is physically isolated in its own dedicated secure vault.',
title: t('marketing.benefits.enterpriseSecurity.title'),
description: t('marketing.benefits.enterpriseSecurity.description'),
color: 'text-green-600 dark:text-green-400',
bgColor: 'bg-green-100 dark:bg-green-900/30',
},
{
icon: Zap,
title: 'High Performance',
description: 'Built on a modern, edge-cached architecture to ensure instant loading times globally.',
title: t('marketing.benefits.highPerformance.title'),
description: t('marketing.benefits.highPerformance.description'),
color: 'text-purple-600 dark:text-purple-400',
bgColor: 'bg-purple-100 dark:bg-purple-900/30',
},
{
icon: Headphones,
title: 'Expert Support',
description: 'Our team of scheduling experts is available to help you optimize your automation workflows.',
title: t('marketing.benefits.expertSupport.title'),
description: t('marketing.benefits.expertSupport.description'),
color: 'text-orange-600 dark:text-orange-400',
bgColor: 'bg-orange-100 dark:bg-orange-900/30',
},

85
frontend/src/components/marketing/PluginShowcase.tsx
View File

@@ -1,9 +1,11 @@
import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Mail, Calendar, Bell, ArrowRight, Zap, CheckCircle2, Code, LayoutGrid } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import CodeBlock from './CodeBlock';
const PluginShowcase: React.FC = () => {
const { t } = useTranslation();
const [activeTab, setActiveTab] = useState(0);
const [viewMode, setViewMode] = useState<'marketplace' | 'code'>('marketplace');
@@ -11,69 +13,29 @@ const PluginShowcase: React.FC = () => {
{
id: 'winback',
icon: Mail,
title: 'Client Win-Back',
description: 'Automatically re-engage customers who haven\'t visited in 60 days.',
stats: ['+15% Retention', '$4k/mo Revenue'],
title: t('marketing.plugins.examples.winback.title'),
description: t('marketing.plugins.examples.winback.description'),
stats: [t('marketing.plugins.examples.winback.stats.retention'), t('marketing.plugins.examples.winback.stats.revenue')],
marketplaceImage: 'bg-gradient-to-br from-pink-500 to-rose-500',
code: `# Win back lost customers
days_inactive = 60
discount = "20%"
# Find inactive customers
inactive = api.get_customers(
last_visit_lt=days_ago(days_inactive)
)
# Send personalized offer
for customer in inactive:
api.send_email(
to=customer.email,
subject="We miss you!",
body=f"Come back for {discount} off!"
)`,
code: t('marketing.plugins.examples.winback.code'),
},
{
id: 'noshow',
icon: Bell,
title: 'No-Show Prevention',
description: 'Send SMS reminders 2 hours before appointments to reduce no-shows.',
stats: ['-40% No-Shows', 'Better Utilization'],
title: t('marketing.plugins.examples.noshow.title'),
description: t('marketing.plugins.examples.noshow.description'),
stats: [t('marketing.plugins.examples.noshow.stats.reduction'), t('marketing.plugins.examples.noshow.stats.utilization')],
marketplaceImage: 'bg-gradient-to-br from-blue-500 to-cyan-500',
code: `# Prevent no-shows
hours_before = 2
# Find upcoming appointments
upcoming = api.get_appointments(
start_time__within=hours(hours_before)
)
# Send SMS reminder
for appt in upcoming:
api.send_sms(
to=appt.customer.phone,
body=f"Reminder: Appointment in 2h at {appt.time}"
)`,
code: t('marketing.plugins.examples.noshow.code'),
},
{
id: 'report',
icon: Calendar,
title: 'Daily Reports',
description: 'Get a summary of tomorrow\'s schedule sent to your inbox every evening.',
stats: ['Save 30min/day', 'Full Visibility'],
title: t('marketing.plugins.examples.report.title'),
description: t('marketing.plugins.examples.report.description'),
stats: [t('marketing.plugins.examples.report.stats.timeSaved'), t('marketing.plugins.examples.report.stats.visibility')],
marketplaceImage: 'bg-gradient-to-br from-purple-500 to-indigo-500',
code: `# Daily Manager Report
tomorrow = date.today() + timedelta(days=1)
# Get schedule stats
stats = api.get_schedule_stats(date=tomorrow)
revenue = api.forecast_revenue(date=tomorrow)
# Email manager
api.send_email(
to="manager@business.com",
subject=f"Schedule for {tomorrow}",
body=f"Bookings: {stats.count}, Est. Rev: \${revenue}"
)`,
code: t('marketing.plugins.examples.report.code'),
},
];
@@ -88,16 +50,15 @@ api.send_email(
<div>
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-100 dark:bg-brand-900/30 text-brand-600 dark:text-brand-400 text-sm font-medium mb-6">
<Zap className="w-4 h-4" />
<span>Limitless Automation</span>
<span>{t('marketing.plugins.badge')}</span>
</div>
<h2 className="text-4xl font-bold text-gray-900 dark:text-white mb-6">
Choose from our Marketplace, or build your own.
{t('marketing.plugins.headline')}
</h2>
<p className="text-lg text-gray-600 dark:text-gray-400 mb-10">
Browse hundreds of pre-built plugins to automate your workflows instantly.
Need something custom? Developers can write Python scripts to extend the platform endlessly.
{t('marketing.plugins.subheadline')}
</p>
<div className="space-y-4">
@@ -147,7 +108,7 @@ api.send_email(
}`}
>
<LayoutGrid className="w-4 h-4" />
Marketplace
{t('marketing.plugins.viewToggle.marketplace')}
</button>
<button
onClick={() => setViewMode('code')}
@@ -157,7 +118,7 @@ api.send_email(
}`}
>
<Code className="w-4 h-4" />
Developer
{t('marketing.plugins.viewToggle.developer')}
</button>
</div>
@@ -190,10 +151,10 @@ api.send_email(
<div className="flex justify-between items-start mb-4">
<div>
<h3 className="text-xl font-bold text-gray-900 dark:text-white">{examples[activeTab].title}</h3>
<div className="text-sm text-gray-500">by SmoothSchedule Team</div>
<div className="text-sm text-gray-500">{t('marketing.plugins.marketplaceCard.author')}</div>
</div>
<button className="px-4 py-2 bg-brand-600 text-white rounded-lg font-medium text-sm hover:bg-brand-700 transition-colors">
Install Plugin
{t('marketing.plugins.marketplaceCard.installButton')}
</button>
</div>
<p className="text-gray-600 dark:text-gray-300 mb-6">
@@ -205,7 +166,7 @@ api.send_email(
<div key={i} className="w-6 h-6 rounded-full bg-gray-300 border-2 border-white dark:border-gray-800" />
))}
</div>
<span>Used by 1,200+ businesses</span>
<span>{t('marketing.plugins.marketplaceCard.usedBy')}</span>
</div>
</div>
</div>
@@ -220,7 +181,7 @@ api.send_email(
{/* CTA */}
<div className="mt-6 text-right">
<a href="/features" className="inline-flex items-center gap-2 text-brand-600 dark:text-brand-400 font-medium hover:underline">
Explore the Marketplace <ArrowRight className="w-4 h-4" />
{t('marketing.plugins.cta')} <ArrowRight className="w-4 h-4" />
</a>
</div>
</motion.div>

79
frontend/src/components/marketing/PricingTable.tsx
View File

@@ -1,69 +1,72 @@
import React from 'react';
import { Check, X } from 'lucide-react';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
const PricingTable: React.FC = () => {
const { t } = useTranslation();
const tiers = [
{
name: 'Starter',
name: t('marketing.pricing.tiers.starter.name'),
price: '$0',
period: '/month',
description: 'Perfect for solo practitioners and small studios.',
period: t('marketing.pricing.perMonth'),
description: t('marketing.pricing.tiers.starter.description'),
features: [
'1 User',
'Unlimited Appointments',
'1 Active Automation',
'Basic Reporting',
'Email Support',
t('marketing.pricing.tiers.starter.features.0'),
t('marketing.pricing.tiers.starter.features.1'),
t('marketing.pricing.tiers.starter.features.2'),
t('marketing.pricing.tiers.starter.features.3'),
t('marketing.pricing.tiers.starter.features.4'),
],
notIncluded: [
'Custom Domain',
'Python Scripting',
'White-Labeling',
'Priority Support',
t('marketing.pricing.tiers.starter.notIncluded.0'),
t('marketing.pricing.tiers.starter.notIncluded.1'),
t('marketing.pricing.tiers.starter.notIncluded.2'),
t('marketing.pricing.tiers.starter.notIncluded.3'),
],
cta: 'Start Free',
cta: t('marketing.pricing.tiers.starter.cta'),
ctaLink: '/signup',
popular: false,
},
{
name: 'Pro',
name: t('marketing.pricing.tiers.pro.name'),
price: '$29',
period: '/month',
description: 'For growing businesses that need automation.',
period: t('marketing.pricing.perMonth'),
description: t('marketing.pricing.tiers.pro.description'),
features: [
'5 Users',
'Unlimited Appointments',
'5 Active Automations',
'Advanced Reporting',
'Priority Email Support',
'SMS Reminders',
t('marketing.pricing.tiers.pro.features.0'),
t('marketing.pricing.tiers.pro.features.1'),
t('marketing.pricing.tiers.pro.features.2'),
t('marketing.pricing.tiers.pro.features.3'),
t('marketing.pricing.tiers.pro.features.4'),
t('marketing.pricing.tiers.pro.features.5'),
],
notIncluded: [
'Custom Domain',
'Python Scripting',
'White-Labeling',
t('marketing.pricing.tiers.pro.notIncluded.0'),
t('marketing.pricing.tiers.pro.notIncluded.1'),
t('marketing.pricing.tiers.pro.notIncluded.2'),
],
cta: 'Start Trial',
cta: t('marketing.pricing.tiers.pro.cta'),
ctaLink: '/signup?plan=pro',
popular: true,
},
{
name: 'Business',
name: t('marketing.pricing.tiers.business.name'),
price: '$99',
period: '/month',
description: 'Full power of the platform for serious operations.',
period: t('marketing.pricing.perMonth'),
description: t('marketing.pricing.tiers.business.description'),
features: [
'Unlimited Users',
'Unlimited Appointments',
'Unlimited Automations',
'Custom Python Scripts',
'Custom Domain (White-Label)',
'Dedicated Support',
'API Access',
t('marketing.pricing.tiers.business.features.0'),
t('marketing.pricing.tiers.business.features.1'),
t('marketing.pricing.tiers.business.features.2'),
t('marketing.pricing.tiers.business.features.3'),
t('marketing.pricing.tiers.business.features.4'),
t('marketing.pricing.tiers.business.features.5'),
t('marketing.pricing.tiers.business.features.6'),
],
notIncluded: [],
cta: 'Contact Sales',
cta: t('marketing.pricing.contactSales'),
ctaLink: '/contact',
popular: false,
},
@@ -81,7 +84,7 @@ const PricingTable: React.FC = () => {
>
{tier.popular && (
<div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 px-4 py-1 bg-brand-500 text-white text-sm font-medium rounded-full">
Most Popular
{t('marketing.pricing.mostPopular')}
</div>
)}

16
frontend/src/hooks/usePlatform.ts
View File

@@ -10,6 +10,7 @@ import {
getBusinessUsers,
updateBusiness,
createBusiness,
deleteBusiness,
PlatformBusinessUpdate,
PlatformBusinessCreate,
getTenantInvitations,
@@ -87,6 +88,21 @@ export const useCreateBusiness = () => {
});
};
/**
* Hook to delete a business/tenant (platform admin only)
*/
export const useDeleteBusiness = () => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: (businessId: number) => deleteBusiness(businessId),
onSuccess: () => {
// Invalidate and refetch businesses list
queryClient.invalidateQueries({ queryKey: ['platform', 'businesses'] });
},
});
};
// ============================================================================
// Tenant Invitation Hooks
// ============================================================================

681
frontend/src/i18n/locales/en.json
View File

@@ -49,7 +49,8 @@
"required": "Required",
"optional": "Optional",
"masquerade": "Masquerade",
"masqueradeAsUser": "Masquerade as User"
"masqueradeAsUser": "Masquerade as User",
"plan": "Plan"
},
"auth": {
"signIn": "Sign in",
@@ -98,7 +99,16 @@
"contactSupport": "Contact Support",
"plugins": "Plugins",
"pluginMarketplace": "Marketplace",
"myPlugins": "My Plugins"
"myPlugins": "My Plugins",
"expandSidebar": "Expand sidebar",
"collapseSidebar": "Collapse sidebar",
"smoothSchedule": "Smooth Schedule",
"sections": {
"manage": "Manage",
"communicate": "Communicate",
"money": "Money",
"extend": "Extend"
}
},
"help": {
"guide": {
@@ -209,7 +219,11 @@
"saveYourSecretDescription": "The webhook secret is only returned once when the webhook is created. Store it securely for signature verification.",
"endpoint": "Endpoint",
"request": "Request",
"response": "Response"
"response": "Response",
"noTestTokensFound": "No Test Tokens Found",
"noTestTokensMessage": "Create a <strong>test/sandbox</strong> API token in your Settings to see personalized code examples with your actual token. Make sure to check the \"Sandbox Mode\" option when creating the token. The examples below use placeholder tokens.",
"errorLoadingTokens": "Error Loading Tokens",
"errorLoadingTokensMessage": "Failed to load API tokens. Please check your connection and try refreshing the page."
}
},
"staff": {
@@ -223,7 +237,47 @@
"yes": "Yes",
"errorLoading": "Error loading staff",
"inviteModalTitle": "Invite Staff",
"inviteModalDescription": "User invitation flow would go here."
"inviteModalDescription": "User invitation flow would go here.",
"confirmMakeBookable": "Create a bookable resource for {{name}}?",
"emailRequired": "Email is required",
"invitationSent": "Invitation sent successfully!",
"invitationFailed": "Failed to send invitation",
"confirmCancelInvitation": "Cancel invitation to {{email}}?",
"cancelFailed": "Failed to cancel invitation",
"invitationResent": "Invitation resent successfully!",
"resendFailed": "Failed to resend invitation",
"confirmToggleActive": "Are you sure you want to {{action}} {{name}}?",
"toggleFailed": "Failed to {{action}} staff member",
"settingsSaved": "Settings saved successfully",
"saveFailed": "Failed to save settings",
"pendingInvitations": "Pending Invitations",
"expires": "Expires",
"resendInvitation": "Resend invitation",
"cancelInvitation": "Cancel invitation",
"noStaffFound": "No staff members found",
"inviteFirstStaff": "Invite your first team member to get started",
"inactiveStaff": "Inactive Staff",
"reactivate": "Reactivate",
"inviteDescription": "Enter the email address of the person you'd like to invite. They'll receive an email with instructions to join your team.",
"emailAddress": "Email Address",
"emailPlaceholder": "colleague@example.com",
"roleLabel": "Role",
"roleStaff": "Staff Member",
"roleManager": "Manager",
"managerRoleHint": "Managers can manage staff, resources, and view reports",
"staffRoleHint": "Staff members can manage their own schedule and appointments",
"makeBookableHint": "Create a bookable resource so customers can schedule appointments with this person",
"resourceName": "Display Name (optional)",
"resourceNamePlaceholder": "Defaults to person's name",
"sendInvitation": "Send Invitation",
"editStaff": "Edit Staff Member",
"ownerFullAccess": "Owners have full access to all features and settings.",
"dangerZone": "Danger Zone",
"deactivateAccount": "Deactivate Account",
"reactivateAccount": "Reactivate Account",
"deactivateHint": "Prevent this user from logging in while keeping their data",
"reactivateHint": "Allow this user to log in again",
"deactivate": "Deactivate"
},
"tickets": {
"title": "Support Tickets",
@@ -365,7 +419,17 @@
"totalRevenue": "Total Revenue",
"totalAppointments": "Total Appointments",
"newCustomers": "New Customers",
"pendingPayments": "Pending Payments"
"pendingPayments": "Pending Payments",
"noResourcesConfigured": "No resources configured",
"noRecentActivity": "No recent activity",
"noOpenTickets": "No open tickets",
"totalCustomers": "Total Customers",
"noShowRate": "No-Show Rate",
"thisMonth": "this month",
"week": "Week",
"month": "Month",
"weekLabel": "Week:",
"monthLabel": "Month:"
},
"scheduler": {
"title": "Scheduler",
@@ -391,7 +455,16 @@
"day": "Day",
"timeline": "Timeline",
"agenda": "Agenda",
"allResources": "All Resources"
"allResources": "All Resources",
"loadingAppointments": "Loading appointments...",
"noAppointmentsScheduled": "No appointments scheduled for this period",
"resources": "Resources",
"resource": "Resource",
"lanes": "lanes",
"pendingRequests": "Pending Requests",
"noPendingRequests": "No pending requests",
"dropToArchive": "Drop here to archive",
"min": "min"
},
"customers": {
"title": "Customers",
@@ -412,6 +485,9 @@
"tags": "Tags",
"tagsPlaceholder": "e.g. VIP, Referral",
"tagsCommaSeparated": "Tags (comma separated)",
"namePlaceholder": "e.g. John Doe",
"emailPlaceholder": "e.g. john@example.com",
"phonePlaceholder": "e.g. (555) 123-4567",
"appointmentHistory": "Appointment History",
"noAppointments": "No appointments yet",
"totalSpent": "Total Spent",
@@ -481,10 +557,16 @@
"duration": "Duration",
"price": "Price",
"category": "Category",
"active": "Active"
"active": "Active",
"loadingServices": "Loading services...",
"noServicesAvailable": "No services available",
"availableServices": "Available Services",
"bookNow": "Book Now"
},
"payments": {
"title": "Payments",
"paymentsAndAnalytics": "Payments & Analytics",
"managePaymentsDescription": "Manage payments and view transaction analytics",
"transactions": "Transactions",
"invoices": "Invoices",
"amount": "Amount",
@@ -496,11 +578,194 @@
"refunded": "Refunded",
"pending": "Pending",
"viewDetails": "View Details",
"view": "View",
"issueRefund": "Issue Refund",
"sendReminder": "Send Reminder",
"paymentSettings": "Payment Settings",
"stripeConnect": "Stripe Connect",
"apiKeys": "API Keys"
"apiKeys": "API Keys",
"transactionDetails": "Transaction Details",
"failedToLoadTransaction": "Failed to load transaction details",
"partialRefund": "Partial refund",
"fullRefund": "Full refund",
"refundAmount": "Refund Amount",
"refundReason": "Refund Reason",
"requestedByCustomer": "Requested by customer",
"duplicate": "Duplicate charge",
"fraudulent": "Fraudulent",
"productNotReceived": "Product not received",
"productUnacceptable": "Product unacceptable",
"other": "Other",
"processRefund": "Process Refund",
"processing": "Processing...",
"grossAmount": "Gross Amount",
"platformFee": "Platform Fee",
"netAmount": "Net Amount",
"lastUpdated": "Last Updated",
"paymentIntent": "Payment Intent",
"chargeId": "Charge ID",
"transactionId": "Transaction ID",
"currency": "Currency",
"customer": "Customer",
"unknown": "Unknown",
"paymentMethod": "Payment Method",
"refundHistory": "Refund History",
"amountBreakdown": "Amount Breakdown",
"description": "Description",
"timeline": "Timeline",
"created": "Created",
"technicalDetails": "Technical Details",
"expires": "Expires",
"enterValidRefundAmount": "Please enter a valid refund amount",
"amountExceedsRefundable": "Amount exceeds refundable amount (${{max}})",
"failedToProcessRefund": "Failed to process refund",
"fullRefundAmount": "Full refund (${{amount}})",
"refundAmountMax": "Refund Amount (max ${{max}})",
"noReasonProvided": "No reason provided",
"noRefunds": "No refunds issued",
"refundedAmount": "Refunded Amount",
"remainingAmount": "Remaining Amount",
"cancelRefund": "Cancel",
"stripeConnected": "Stripe Connected",
"stripeConnectedDesc": "Your Stripe account is connected and ready to accept payments.",
"accountDetails": "Account Details",
"accountType": "Account Type",
"standardConnect": "Standard Connect",
"expressConnect": "Express Connect",
"customConnect": "Custom Connect",
"connect": "Connect",
"charges": "Charges",
"payouts": "Payouts",
"enabled": "Enabled",
"disabled": "Disabled",
"completeOnboarding": "Complete Onboarding",
"onboardingIncomplete": "Your Stripe Connect account setup is incomplete. Click below to continue the onboarding process.",
"continueOnboarding": "Continue Onboarding",
"connectWithStripe": "Connect with Stripe",
"tierPaymentDescription": "As a {{tier}} tier business, you'll use Stripe Connect to accept payments. This provides a seamless payment experience for your customers while the platform handles payment processing.",
"securePaymentProcessing": "Secure payment processing",
"automaticPayouts": "Automatic payouts to your bank account",
"pciCompliance": "PCI compliance handled for you",
"failedToStartOnboarding": "Failed to start onboarding",
"failedToRefreshLink": "Failed to refresh onboarding link",
"openStripeDashboard": "Open Stripe Dashboard",
"onboardingComplete": "Onboarding Complete!",
"stripeSetupComplete": "Your Stripe account has been set up. You can now accept payments.",
"setupFailed": "Setup Failed",
"tryAgain": "Try Again",
"setUpPayments": "Set Up Payments",
"tierPaymentDescriptionWithOnboarding": "As a {{tier}} tier business, you'll use Stripe Connect to accept payments. Complete the onboarding process to start accepting payments from your customers.",
"startPaymentSetup": "Start Payment Setup",
"initializingPaymentSetup": "Initializing payment setup...",
"completeAccountSetup": "Complete Your Account Setup",
"fillOutInfoForPayment": "Fill out the information below to finish setting up your payment account. Your information is securely handled by Stripe.",
"failedToInitializePayment": "Failed to initialize payment setup",
"failedToLoadPaymentComponent": "Failed to load payment component",
"accountId": "Account ID",
"keysAreValid": "Keys are valid!",
"connectedTo": "Connected to",
"notConfigured": "Not configured",
"lastValidated": "Last Validated",
"searchResults": "Search Results",
"orderSummary": "Order Summary",
"registrationPeriod": "Registration Period",
"registrationFailed": "Registration failed. Please try again.",
"loadingPaymentForm": "Loading payment form...",
"settingUpPayment": "Setting up payment...",
"exportData": "Export Data",
"overview": "Overview",
"settings": "Settings",
"paymentSetupRequired": "Payment Setup Required",
"paymentSetupRequiredDesc": "Complete your payment setup in the Settings tab to start accepting payments and see analytics.",
"goToSettings": "Go to Settings",
"totalRevenue": "Total Revenue",
"transactionsCount": "transactions",
"availableBalance": "Available Balance",
"successRate": "Success Rate",
"successful": "successful",
"avgTransaction": "Avg Transaction",
"platformFees": "Platform fees:",
"recentTransactions": "Recent Transactions",
"viewAll": "View All",
"fee": "Fee:",
"noTransactionsYet": "No transactions yet",
"to": "to",
"allStatuses": "All Statuses",
"succeeded": "Succeeded",
"failed": "Failed",
"allTypes": "All Types",
"payment": "Payment",
"refund": "Refund",
"refresh": "Refresh",
"transaction": "Transaction",
"net": "Net",
"action": "Action",
"noTransactionsFound": "No transactions found",
"showing": "Showing",
"of": "of",
"page": "Page",
"availableForPayout": "Available for Payout",
"payoutHistory": "Payout History",
"payoutId": "Payout ID",
"arrivalDate": "Arrival Date",
"noPayoutsYet": "No payouts yet",
"exportTransactions": "Export Transactions",
"exportFormat": "Export Format",
"csv": "CSV",
"excel": "Excel",
"pdf": "PDF",
"quickbooks": "QuickBooks",
"dateRangeOptional": "Date Range (Optional)",
"exporting": "Exporting...",
"export": "Export",
"billing": "Billing",
"billingDescription": "Manage your payment methods and view invoice history.",
"paymentMethods": "Payment Methods",
"addCard": "Add Card",
"endingIn": "ending in",
"default": "Default",
"setAsDefault": "Set as Default",
"noPaymentMethodsOnFile": "No payment methods on file.",
"invoiceHistory": "Invoice History",
"noInvoicesYet": "No invoices yet.",
"addNewCard": "Add New Card",
"cardNumber": "Card Number",
"cardholderName": "Cardholder Name",
"expiry": "Expiry",
"cvv": "CVV",
"simulatedFormNote": "This is a simulated form. No real card data is required.",
"accessDeniedOrUserNotFound": "Access Denied or User not found.",
"confirmDeletePaymentMethod": "Are you sure you want to delete this payment method?",
"stripeApiKeys": {
"configured": "Stripe Keys Configured",
"testMode": "Test Mode",
"liveMode": "Live Mode",
"publishableKey": "Publishable Key",
"secretKey": "Secret Key",
"account": "Account",
"lastValidated": "Last Validated",
"testKeysWarning": "You are using <strong>test keys</strong>. Payments will not be processed for real. Switch to live keys when ready to accept real payments.",
"revalidate": "Re-validate",
"remove": "Remove",
"deprecated": "API Keys Deprecated",
"deprecatedMessage": "Your API keys have been deprecated because you upgraded to a paid tier. Please complete Stripe Connect onboarding to accept payments.",
"updateApiKeys": "Update API Keys",
"addApiKeys": "Add Stripe API Keys",
"enterKeysDescription": "Enter your Stripe API keys to enable payment collection. You can find these in your",
"stripeDashboard": "Stripe Dashboard",
"publishableKeyLabel": "Publishable Key",
"secretKeyLabel": "Secret Key",
"keysAreValid": "Keys are valid!",
"connectedTo": "Connected to: {{accountName}}",
"testKeysNote": "These are test keys. No real payments will be processed.",
"validate": "Validate",
"saveKeys": "Save Keys",
"removeApiKeys": "Remove API Keys?",
"removeApiKeysMessage": "Are you sure you want to remove your Stripe API keys? You will not be able to accept payments until you add them again.",
"cancel": "Cancel",
"validationFailed": "Validation failed",
"failedToSaveKeys": "Failed to save keys"
}
},
"settings": {
"title": "Settings",
@@ -539,6 +804,43 @@
"clientSecret": "Client Secret",
"paidTierOnly": "Custom OAuth credentials are only available for paid tiers"
},
"domain": {
"details": "Details",
"searchPlaceholder": "Enter domain name or keyword...",
"premium": "Premium",
"select": "Select",
"unavailable": "Unavailable",
"yourRegisteredDomains": "Your Registered Domains",
"expires": "Expires",
"change": "Change",
"year": "year",
"years": "years",
"whoisPrivacy": "WHOIS Privacy Protection",
"whoisPrivacyDesc": "Hide your personal information from public WHOIS lookups",
"autoRenewal": "Auto-Renewal",
"autoRenewalDesc": "Automatically renew this domain before it expires",
"autoConfigure": "Auto-configure as Custom Domain",
"autoConfigureDesc": "Automatically set up this domain for your business",
"registrantInfo": "Registrant Information",
"firstName": "First Name",
"lastName": "Last Name",
"stateProvince": "State/Province",
"zipPostalCode": "ZIP/Postal Code",
"country": "Country",
"countries": {
"us": "United States",
"ca": "Canada",
"gb": "United Kingdom",
"au": "Australia",
"de": "Germany",
"fr": "France"
},
"continue": "Continue",
"domain": "Domain",
"total": "Total",
"registrant": "Registrant",
"completePurchase": "Complete Purchase"
},
"payments": "Payments",
"acceptPayments": "Accept Payments",
"acceptPaymentsDescription": "Enable payment acceptance from customers for appointments and services.",
@@ -547,6 +849,25 @@
"quota": {
"title": "Quota Management",
"description": "Usage limits, archiving"
},
"booking": {
"title": "Booking",
"description": "Configure your booking page URL and customer redirect settings",
"yourBookingUrl": "Your Booking URL",
"shareWithCustomers": "Share this URL with your customers so they can book appointments with you.",
"copyToClipboard": "Copy to clipboard",
"openBookingPage": "Open booking page",
"customDomainPrompt": "Want to use your own domain? Set up a",
"customDomain": "custom domain",
"returnUrl": "Return URL",
"returnUrlDescription": "After a customer completes a booking, redirect them to this URL (e.g., a thank you page on your website).",
"returnUrlPlaceholder": "https://yourbusiness.com/thank-you",
"save": "Save",
"saving": "Saving...",
"leaveEmpty": "Leave empty to keep customers on the booking confirmation page.",
"copiedToClipboard": "Copied to clipboard",
"failedToSaveReturnUrl": "Failed to save return URL",
"onlyOwnerCanAccess": "Only the business owner can access these settings."
}
},
"profile": {
@@ -584,9 +905,15 @@
"priority": "Priority",
"businessManagement": "Business Management",
"userManagement": "User Management",
"masquerade": "Masquerade",
"masqueradeAs": "Masquerade as",
"exitMasquerade": "Exit Masquerade",
"masquerade": {
"label": "Masquerade",
"masqueradeAs": "Masquerade as",
"exitMasquerade": "Exit Masquerade",
"masqueradingAs": "Masquerading as",
"loggedInAs": "Logged in as {{name}}",
"returnTo": "Return to {{name}}",
"stopMasquerading": "Stop Masquerading"
},
"businesses": "Businesses",
"businessesDescription": "Manage tenants, plans, and access.",
"addNewTenant": "Add New Tenant",
@@ -609,6 +936,129 @@
"confirmVerifyEmailMessage": "Are you sure you want to manually verify this user's email address?",
"verifyEmailNote": "This will mark their email as verified and allow them to access all features that require email verification.",
"noUsersFound": "No users found matching your filters.",
"deleteTenant": "Delete Tenant",
"confirmDeleteTenantMessage": "Are you sure you want to permanently delete this tenant? This action cannot be undone.",
"deleteTenantWarning": "This will permanently delete all tenant data including users, appointments, resources, and settings.",
"noBusinesses": "No businesses found.",
"noBusinessesFound": "No businesses match your search.",
"tier": "Tier",
"owner": "Owner",
"inviteTenant": "Invite Tenant",
"inactiveBusinesses": "Inactive Businesses ({{count}})",
"tierTenantOwner": "tenant owner",
"staffTitle": "Platform Staff",
"staffDescription": "Manage platform managers and support staff",
"addStaffMember": "Add Staff Member",
"searchStaffPlaceholder": "Search staff by name, email, or username...",
"totalStaff": "Total Staff",
"platformManagers": "Platform Managers",
"supportStaff": "Support Staff",
"staffMember": "Staff Member",
"lastLogin": "Last Login",
"permissionPluginApprover": "Plugin Approver",
"permissionUrlWhitelister": "URL Whitelister",
"noSpecialPermissions": "No special permissions",
"noStaffFound": "No staff members found",
"adjustSearchCriteria": "Try adjusting your search criteria",
"addFirstStaffMember": "Add your first platform staff member to get started",
"errorLoadingStaff": "Failed to load platform staff",
"checkEmails": "Check for new emails",
"checkEmailsButton": "Check Emails",
"editPlatformUser": "Edit Platform User",
"basicInformation": "Basic Information",
"accountDetails": "Account Details",
"roleAccess": "Role & Access",
"platformRole": "Platform Role",
"roleDescriptionManagerVsSupport": "Platform Managers have full administrative access. Support staff have limited access.",
"noPermissionChangeRole": "You do not have permission to change this user's role.",
"specialPermissions": "Special Permissions",
"canApprovePlugins": "Can Approve Plugins",
"permissionApprovePluginsDesc": "Allow this user to review and approve community plugins for the marketplace",
"canWhitelistUrls": "Can Whitelist URLs",
"permissionWhitelistUrlsDesc": "Allow this user to whitelist external URLs for plugin API calls (per-user and platform-wide)",
"noSpecialPermissionsToGrant": "You don't have any special permissions to grant.",
"resetPassword": "Reset Password (Optional)",
"accountActive": "Account Active",
"accountInactive": "Account Inactive",
"userCanLogin": "User can log in and access the platform",
"userCannotLogin": "User cannot log in or access the platform",
"errorUpdateUser": "Failed to update user. Please try again.",
"createNewBusiness": "Create New Business",
"businessDetails": "Business Details",
"placeholderBusinessName": "My Awesome Business",
"placeholderSubdomain": "mybusiness",
"subdomainRules": "Only lowercase letters, numbers, and hyphens. Must start with a letter.",
"contactEmail": "Contact Email",
"placeholderContactEmail": "contact@business.com",
"placeholderPhone": "+1 (555) 123-4567",
"activeStatus": "Active Status",
"createBusinessAsActive": "Create business as active",
"subscriptionTier": "Subscription Tier",
"tierFreeLabel": "Free Trial",
"tierStarterLabel": "Starter",
"tierProfessionalLabel": "Professional",
"tierEnterpriseLabel": "Enterprise",
"maxUsers": "Max Users",
"maxResources": "Max Resources",
"platformPermissions": "Platform Permissions",
"manageOAuthCredentials": "Manage OAuth Credentials",
"permissionOAuthDesc": "Allow this business to configure their own OAuth app credentials",
"createOwnerAccount": "Create Owner Account",
"ownerEmail": "Owner Email",
"placeholderOwnerEmail": "owner@business.com",
"ownerName": "Owner Name",
"placeholderOwnerName": "John Doe",
"canCreateOwnerLater": "You can create an owner account later or invite one via email.",
"createBusinessButton": "Create Business",
"errorBusinessNameRequired": "Business name is required",
"errorSubdomainRequired": "Subdomain is required",
"errorOwnerEmailRequired": "Owner email is required",
"errorOwnerNameRequired": "Owner name is required",
"errorOwnerPasswordRequired": "Owner password is required",
"inviteNewTenant": "Invite New Tenant",
"inviteNewTenantDescription": "Send an invitation to create a new business",
"suggestedBusinessName": "Suggested Business Name (Optional)",
"ownerCanChangeBusinessName": "Owner can change this during onboarding",
"tierDefaultsFromSettings": "Tier defaults are loaded from platform subscription settings",
"overrideTierLimits": "Override Tier Limits",
"customizeLimitsDesc": "Customize limits and permissions for this tenant",
"limitsConfiguration": "Limits Configuration",
"useMinusOneUnlimited": "Use -1 for unlimited",
"limitsControlDescription": "Use -1 for unlimited. These limits control what this business can create.",
"paymentsRevenue": "Payments & Revenue",
"onlinePayments": "Online Payments",
"communication": "Communication",
"smsReminders": "SMS Reminders",
"maskedCalling": "Masked Calling",
"customization": "Customization",
"customDomains": "Custom Domains",
"whiteLabelling": "White Labelling",
"pluginsAutomation": "Plugins & Automation",
"usePlugins": "Use Plugins",
"scheduledTasks": "Scheduled Tasks",
"createPlugins": "Create Plugins",
"advancedFeatures": "Advanced Features",
"apiAccess": "API Access",
"webhooks": "Webhooks",
"calendarSync": "Calendar Sync",
"dataExport": "Data Export",
"videoConferencing": "Video Conferencing",
"enterprise": "Enterprise",
"manageOAuth": "Manage OAuth",
"require2FA": "Require 2FA",
"personalMessage": "Personal Message (Optional)",
"personalMessagePlaceholder": "Add a personal note to the invitation email...",
"sendInvitationButton": "Send Invitation",
"invitationSentSuccess": "Invitation sent successfully!",
"editBusiness": "Edit Business: {{name}}",
"inactiveBusinessesCannotAccess": "Inactive businesses cannot be accessed",
"resetToTierDefaults": "Reset to tier defaults",
"changingTierUpdatesDefaults": "Changing tier will auto-update limits and permissions to tier defaults",
"featuresPermissions": "Features & Permissions",
"controlFeaturesDesc": "Control which features are available to this business.",
"enablePluginsForTasks": "Enable \"Use Plugins\" to allow Scheduled Tasks and Create Plugins",
"emailAddressesTitle": "Platform Email Addresses",
"emailAddressesDescription": "Manage platform-wide email addresses hosted on mail.talova.net. These addresses are used for platform-level support and are automatically synced to the mail server.",
"roles": {
"superuser": "Superuser",
"platformManager": "Platform Manager",
@@ -627,7 +1077,32 @@
"oauth": "OAuth Providers",
"payments": "Payments",
"email": "Email",
"branding": "Branding"
"branding": "Branding",
"mailServer": "Mail Server",
"emailDomain": "Email Domain",
"platformInfo": "Platform Information",
"stripeConfigStatus": "Stripe Configuration Status",
"failedToLoadSettings": "Failed to load settings",
"validation": "Validation",
"accountId": "Account ID",
"secretKey": "Secret Key",
"publishableKey": "Publishable Key",
"webhookSecret": "Webhook Secret",
"baseTiers": "Base Tiers",
"addOns": "Add-ons",
"baseTier": "Base Tier",
"addOn": "Add-on",
"none": "None",
"daysOfFreeTrial": "Days of free trial",
"orderOnPricingPage": "Order on pricing page",
"allowSmsReminders": "Allow businesses on this tier to send SMS reminders",
"enabled": "Enabled",
"maskedCalling": "Masked Calling",
"allowAnonymousCalls": "Allow anonymous calls between customers and staff",
"proxyPhoneNumbers": "Proxy Phone Numbers",
"dedicatedPhoneNumbers": "Dedicated phone numbers for masked communication",
"defaultCreditSettings": "Default Credit Settings",
"autoReloadEnabledByDefault": "Auto-reload enabled by default"
}
},
"errors": {
@@ -664,6 +1139,24 @@
"tagline": "Orchestrate your business with precision.",
"description": "The all-in-one scheduling platform for businesses of all sizes. Manage resources, staff, and bookings effortlessly.",
"copyright": "Smooth Schedule Inc.",
"benefits": {
"rapidDeployment": {
"title": "Rapid Deployment",
"description": "Launch your branded booking portal in minutes with our pre-configured industry templates."
},
"enterpriseSecurity": {
"title": "Enterprise Security",
"description": "Sleep soundly knowing your data is physically isolated in its own dedicated secure vault."
},
"highPerformance": {
"title": "High Performance",
"description": "Built on a modern, edge-cached architecture to ensure instant loading times globally."
},
"expertSupport": {
"title": "Expert Support",
"description": "Our team of scheduling experts is available to help you optimize your automation workflows."
}
},
"nav": {
"features": "Features",
"pricing": "Pricing",
@@ -781,19 +1274,16 @@
},
"business": {
"name": "Business",
"description": "For established teams",
"price": "79",
"annualPrice": "790",
"trial": "14-day free trial",
"features": [
"Unlimited resources",
"All Professional features",
"Team management",
"Advanced analytics",
"API access",
"Phone support"
],
"transactionFee": "0.5% + $0.20 per transaction"
"description": "Full power of the platform for serious operations.",
"features": {
"0": "Unlimited Users",
"1": "Unlimited Appointments",
"2": "Unlimited Automations",
"3": "Custom Python Scripts",
"4": "Custom Domain (White-Label)",
"5": "Dedicated Support",
"6": "API Access"
}
},
"enterprise": {
"name": "Enterprise",
@@ -809,6 +1299,42 @@
"On-premise option"
],
"transactionFee": "Custom transaction fees"
},
"starter": {
"name": "Starter",
"description": "Perfect for solo practitioners and small studios.",
"cta": "Start Free",
"features": {
"0": "1 User",
"1": "Unlimited Appointments",
"2": "1 Active Automation",
"3": "Basic Reporting",
"4": "Email Support"
},
"notIncluded": {
"0": "Custom Domain",
"1": "Python Scripting",
"2": "White-Labeling",
"3": "Priority Support"
}
},
"pro": {
"name": "Pro",
"description": "For growing businesses that need automation.",
"cta": "Start Trial",
"features": {
"0": "5 Users",
"1": "Unlimited Appointments",
"2": "5 Active Automations",
"3": "Advanced Reporting",
"4": "Priority Email Support",
"5": "SMS Reminders"
},
"notIncluded": {
"0": "Custom Domain",
"1": "Python Scripting",
"2": "White-Labeling"
}
}
}
},
@@ -1027,6 +1553,50 @@
"terms": "Terms of Service"
},
"copyright": "Smooth Schedule Inc. All rights reserved."
},
"plugins": {
"badge": "Limitless Automation",
"headline": "Choose from our Marketplace, or build your own.",
"subheadline": "Browse hundreds of pre-built plugins to automate your workflows instantly. Need something custom? Developers can write Python scripts to extend the platform endlessly.",
"viewToggle": {
"marketplace": "Marketplace",
"developer": "Developer"
},
"marketplaceCard": {
"author": "by SmoothSchedule Team",
"installButton": "Install Plugin",
"usedBy": "Used by 1,200+ businesses"
},
"cta": "Explore the Marketplace",
"examples": {
"winback": {
"title": "Client Win-Back",
"description": "Automatically re-engage customers who haven't visited in 60 days.",
"stats": {
"retention": "+15% Retention",
"revenue": "$4k/mo Revenue"
},
"code": "# Win back lost customers\ndays_inactive = 60\ndiscount = \"20%\"\n\n# Find inactive customers\ninactive = api.get_customers(\n last_visit_lt=days_ago(days_inactive)\n)\n\n# Send personalized offer\nfor customer in inactive:\n api.send_email(\n to=customer.email,\n subject=\"We miss you!\",\n body=f\"Come back for {discount} off!\"\n )"
},
"noshow": {
"title": "No-Show Prevention",
"description": "Send SMS reminders 2 hours before appointments to reduce no-shows.",
"stats": {
"reduction": "-40% No-Shows",
"utilization": "Better Utilization"
},
"code": "# Prevent no-shows\nhours_before = 2\n\n# Find upcoming appointments\nupcoming = api.get_appointments(\n start_time__within=hours(hours_before)\n)\n\n# Send SMS reminder\nfor appt in upcoming:\n api.send_sms(\n to=appt.customer.phone,\n body=f\"Reminder: Appointment in 2h at {appt.time}\"\n )"
},
"report": {
"title": "Daily Reports",
"description": "Get a summary of tomorrow's schedule sent to your inbox every evening.",
"stats": {
"timeSaved": "Save 30min/day",
"visibility": "Full Visibility"
},
"code": "# Daily Manager Report\ntomorrow = date.today() + timedelta(days=1)\n\n# Get schedule stats\nstats = api.get_schedule_stats(date=tomorrow)\nrevenue = api.forecast_revenue(date=tomorrow)\n\n# Email manager\napi.send_email(\n to=\"manager@business.com\",\n subject=f\"Schedule for {tomorrow}\",\n body=f\"Bookings: {stats.count}, Est. Rev: ${revenue}\"\n)"
}
}
}
},
"trial": {
@@ -1178,5 +1748,64 @@
},
"goToDashboard": "Go to Dashboard"
}
},
"trialExpired": {
"title": "Your 14-Day Trial Has Expired",
"subtitle": "Your trial of the {{plan}} plan ended on {{date}}",
"whatHappensNow": "What happens now?",
"twoOptions": "You have two options to continue using SmoothSchedule:",
"freePlan": "Free Plan",
"pricePerMonth": "$0/month",
"recommended": "Recommended",
"continueWhereYouLeftOff": "Continue where you left off",
"moreFeatures": "+ {{count}} more features",
"downgradeToFree": "Downgrade to Free",
"upgradeNow": "Upgrade Now",
"ownerLimitedFunctionality": "Your account has limited functionality until you choose an option.",
"nonOwnerContactOwner": "Please contact your business owner to upgrade or downgrade the account.",
"businessOwner": "Business Owner:",
"supportQuestion": "Questions? Contact our support team at",
"supportEmail": "support@smoothschedule.com",
"confirmDowngrade": "Are you sure you want to downgrade to the Free plan? You will lose access to premium features immediately.",
"features": {
"professional": {
"unlimitedAppointments": "Unlimited appointments",
"onlineBooking": "Online booking portal",
"emailNotifications": "Email notifications",
"smsReminders": "SMS reminders",
"customBranding": "Custom branding",
"advancedAnalytics": "Advanced analytics",
"paymentProcessing": "Payment processing",
"prioritySupport": "Priority support"
},
"business": {
"everythingInProfessional": "Everything in Professional",
"multipleLocations": "Multiple locations",
"teamManagement": "Team management",
"apiAccess": "API access",
"customDomain": "Custom domain",
"whiteLabel": "White-label options",
"accountManager": "Dedicated account manager"
},
"enterprise": {
"everythingInBusiness": "Everything in Business",
"unlimitedUsers": "Unlimited users",
"customIntegrations": "Custom integrations",
"slaGuarantee": "SLA guarantee",
"customContracts": "Custom contract terms",
"phoneSupport": "24/7 phone support",
"onPremise": "On-premise deployment option"
},
"free": {
"upTo50Appointments": "Up to 50 appointments/month",
"basicOnlineBooking": "Basic online booking",
"emailNotifications": "Email notifications",
"smsReminders": "SMS reminders",
"customBranding": "Custom branding",
"advancedAnalytics": "Advanced analytics",
"paymentProcessing": "Payment processing",
"prioritySupport": "Priority support"
}
}
}
}
}

8
frontend/src/layouts/PlatformLayout.tsx
View File

@@ -1,5 +1,5 @@
import React, { useState, useRef } from 'react';
import { Outlet } from 'react-router-dom';
import { Outlet, useLocation } from 'react-router-dom';
import { Moon, Sun, Globe, Menu } from 'lucide-react';
import { User } from '../types';
import PlatformSidebar from '../components/PlatformSidebar';
@@ -22,6 +22,10 @@ const PlatformLayout: React.FC<PlatformLayoutProps> = ({ user, darkMode, toggleT
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const [ticketModalId, setTicketModalId] = useState<string | null>(null);
const mainContentRef = useRef<HTMLElement>(null);
const location = useLocation();
// Pages that need edge-to-edge rendering (no padding)
const noPaddingRoutes = ['/help/api-docs'];
useScrollToTop(mainContentRef);
@@ -84,7 +88,7 @@ const PlatformLayout: React.FC<PlatformLayoutProps> = ({ user, darkMode, toggleT
</div>
</header>
<main ref={mainContentRef} className="flex-1 overflow-auto bg-gray-50 dark:bg-gray-900 p-8">
<main ref={mainContentRef} className={`flex-1 overflow-auto bg-gray-50 dark:bg-gray-900 ${noPaddingRoutes.includes(location.pathname) ? '' : 'p-8'}`}>
<Outlet />
</main>
</div>

6
frontend/src/pages/Customers.tsx
View File

@@ -237,16 +237,16 @@ const Customers: React.FC<CustomersProps> = ({ onMasquerade, effectiveUser }) =>
<form onSubmit={handleAddCustomer} className="p-6 space-y-4">
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{t('customers.fullName')} <span className="text-red-500">*</span></label>
<input type="text" name="name" required value={formData.name} onChange={handleInputChange} className="w-full px-3 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 outline-none transition-colors" placeholder="e.g. John Doe" />
<input type="text" name="name" required value={formData.name} onChange={handleInputChange} className="w-full px-3 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 outline-none transition-colors" placeholder={t('customers.namePlaceholder')} />
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{t('customers.emailAddress')} <span className="text-red-500">*</span></label>
<input type="email" name="email" required value={formData.email} onChange={handleInputChange} className="w-full px-3 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 outline-none transition-colors" placeholder="e.g. john@example.com" />
<input type="email" name="email" required value={formData.email} onChange={handleInputChange} className="w-full px-3 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 outline-none transition-colors" placeholder={t('customers.emailPlaceholder')} />
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{t('customers.phoneNumber')} <span className="text-red-500">*</span></label>
<input type="tel" name="phone" required value={formData.phone} onChange={handleInputChange} className="w-full px-3 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 outline-none transition-colors" placeholder="e.g. (555) 123-4567" />
<input type="tel" name="phone" required value={formData.phone} onChange={handleInputChange} className="w-full px-3 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 outline-none transition-colors" placeholder={t('customers.phonePlaceholder')} />
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">

12
frontend/src/pages/HelpApiDocs.tsx
View File

@@ -1131,13 +1131,9 @@ my $response = $ua->get('${SANDBOX_URL}/services/',
<AlertCircle size={20} className="text-yellow-600 dark:text-yellow-400 flex-shrink-0 mt-0.5" />
<div>
<h3 className="text-sm font-semibold text-yellow-800 dark:text-yellow-200">
No Test Tokens Found
{t('help.api.noTestTokensFound')}
</h3>
<p className="text-sm text-yellow-700 dark:text-yellow-300 mt-1">
Create a <strong>test/sandbox</strong> API token in your Settings to see personalized code examples with your actual token.
Make sure to check the "Sandbox Mode" option when creating the token.
The examples below use placeholder tokens.
</p>
<p className="text-sm text-yellow-700 dark:text-yellow-300 mt-1" dangerouslySetInnerHTML={{ __html: t('help.api.noTestTokensMessage') }} />
</div>
</div>
</div>
@@ -1150,10 +1146,10 @@ my $response = $ua->get('${SANDBOX_URL}/services/',
<AlertCircle size={20} className="text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
<div>
<h3 className="text-sm font-semibold text-red-800 dark:text-red-200">
Error Loading Tokens
{t('help.api.errorLoadingTokens')}
</h3>
<p className="text-sm text-red-700 dark:text-red-300 mt-1">
Failed to load API tokens. Please check your connection and try refreshing the page.
{t('help.api.errorLoadingTokensMessage')}
</p>
</div>
</div>

180
frontend/src/pages/Payments.tsx
View File

@@ -1,5 +1,6 @@
import React, { useState } from 'react';
import { useOutletContext } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import {
CreditCard,
Plus,
@@ -47,6 +48,7 @@ import { TransactionFilters } from '../api/payments';
type TabType = 'overview' | 'transactions' | 'payouts' | 'settings';
const Payments: React.FC = () => {
const { t } = useTranslation();
const { user: effectiveUser, business } = useOutletContext<{ user: User, business: Business }>();
const isBusiness = effectiveUser.role === 'owner' || effectiveUser.role === 'manager';
@@ -111,7 +113,7 @@ const Payments: React.FC = () => {
const handleDeleteMethod = (pmId: string) => {
if (!customerProfile) return;
if (window.confirm("Are you sure you want to delete this payment method?")) {
if (window.confirm(t('payments.confirmDeletePaymentMethod'))) {
const updatedMethods = customerProfile.paymentMethods.filter(pm => pm.id !== pmId);
if (updatedMethods.length > 0 && !updatedMethods.some(pm => pm.isDefault)) {
updatedMethods[0].isDefault = true;
@@ -187,8 +189,8 @@ const Payments: React.FC = () => {
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">Payments & Analytics</h2>
<p className="text-gray-500 dark:text-gray-400">Manage payments and view transaction analytics</p>
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('payments.paymentsAndAnalytics')}</h2>
<p className="text-gray-500 dark:text-gray-400">{t('payments.managePaymentsDescription')}</p>
</div>
{canAcceptPayments && (
<button
@@ -196,7 +198,7 @@ const Payments: React.FC = () => {
className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50"
>
<Download size={16} />
Export Data
{t('payments.exportData')}
</button>
)}
</div>
@@ -205,10 +207,10 @@ const Payments: React.FC = () => {
<div className="border-b border-gray-200 dark:border-gray-700">
<nav className="-mb-px flex space-x-8">
{[
{ id: 'overview', label: 'Overview', icon: BarChart3 },
{ id: 'transactions', label: 'Transactions', icon: CreditCard },
{ id: 'payouts', label: 'Payouts', icon: Wallet },
{ id: 'settings', label: 'Settings', icon: CreditCard },
{ id: 'overview', label: t('payments.overview'), icon: BarChart3 },
{ id: 'transactions', label: t('payments.transactions'), icon: CreditCard },
{ id: 'payouts', label: t('payments.payouts'), icon: Wallet },
{ id: 'settings', label: t('payments.settings'), icon: CreditCard },
].map((tab) => (
<button
key={tab.id}
@@ -234,15 +236,15 @@ const Payments: React.FC = () => {
<div className="flex items-start gap-3">
<AlertCircle className="text-yellow-600 shrink-0 mt-0.5" size={24} />
<div>
<h3 className="font-semibold text-yellow-800">Payment Setup Required</h3>
<h3 className="font-semibold text-yellow-800">{t('payments.paymentSetupRequired')}</h3>
<p className="text-yellow-700 mt-1">
Complete your payment setup in the Settings tab to start accepting payments and see analytics.
{t('payments.paymentSetupRequiredDesc')}
</p>
<button
onClick={() => setActiveTab('settings')}
className="mt-3 px-4 py-2 text-sm font-medium text-yellow-800 bg-yellow-100 rounded-lg hover:bg-yellow-200"
>
Go to Settings
{t('payments.goToSettings')}
</button>
</div>
</div>
@@ -254,7 +256,7 @@ const Payments: React.FC = () => {
{/* Total Revenue */}
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
<div className="flex items-center justify-between">
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">Total Revenue</p>
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">{t('payments.totalRevenue')}</p>
<div className="p-2 bg-green-100 rounded-lg">
<DollarSign className="text-green-600" size={20} />
</div>
@@ -267,7 +269,7 @@ const Payments: React.FC = () => {
{summary?.net_revenue_display || '$0.00'}
</p>
<p className="text-sm text-gray-500 mt-1">
{summary?.total_transactions || 0} transactions
{summary?.total_transactions || 0} {t('payments.transactionsCount')}
</p>
</>
)}
@@ -276,7 +278,7 @@ const Payments: React.FC = () => {
{/* Available Balance */}
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
<div className="flex items-center justify-between">
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">Available Balance</p>
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">{t('payments.availableBalance')}</p>
<div className="p-2 bg-blue-100 rounded-lg">
<Wallet className="text-blue-600" size={20} />
</div>
@@ -289,7 +291,7 @@ const Payments: React.FC = () => {
${((balance?.available_total || 0) / 100).toFixed(2)}
</p>
<p className="text-sm text-gray-500 mt-1">
${((balance?.pending_total || 0) / 100).toFixed(2)} pending
${((balance?.pending_total || 0) / 100).toFixed(2)} {t('payments.pending')}
</p>
</>
)}
@@ -298,7 +300,7 @@ const Payments: React.FC = () => {
{/* Success Rate */}
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
<div className="flex items-center justify-between">
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">Success Rate</p>
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">{t('payments.successRate')}</p>
<div className="p-2 bg-purple-100 rounded-lg">
<TrendingUp className="text-purple-600" size={20} />
</div>
@@ -314,7 +316,7 @@ const Payments: React.FC = () => {
</p>
<p className="text-sm text-green-600 mt-1 flex items-center gap-1">
<ArrowUpRight size={14} />
{summary?.successful_transactions || 0} successful
{summary?.successful_transactions || 0} {t('payments.successful')}
</p>
</>
)}
@@ -323,7 +325,7 @@ const Payments: React.FC = () => {
{/* Average Transaction */}
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
<div className="flex items-center justify-between">
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">Avg Transaction</p>
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">{t('payments.avgTransaction')}</p>
<div className="p-2 bg-orange-100 rounded-lg">
<BarChart3 className="text-orange-600" size={20} />
</div>
@@ -336,7 +338,7 @@ const Payments: React.FC = () => {
{summary?.average_transaction_display || '$0.00'}
</p>
<p className="text-sm text-gray-500 mt-1">
Platform fees: {summary?.total_fees_display || '$0.00'}
{t('payments.platformFees')} {summary?.total_fees_display || '$0.00'}
</p>
</>
)}
@@ -346,22 +348,22 @@ const Payments: React.FC = () => {
{/* Recent Transactions */}
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700">
<div className="p-6 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
<h3 className="font-semibold text-lg text-gray-900 dark:text-white">Recent Transactions</h3>
<h3 className="font-semibold text-lg text-gray-900 dark:text-white">{t('payments.recentTransactions')}</h3>
<button
onClick={() => setActiveTab('transactions')}
className="text-sm text-brand-600 hover:text-brand-700 font-medium"
>
View All
{t('payments.viewAll')}
</button>
</div>
<div className="overflow-x-auto">
<table className="w-full">
<thead className="bg-gray-50 dark:bg-gray-700">
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('payments.customer')}</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('payments.date')}</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('payments.amount')}</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('payments.status')}</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200 dark:divide-gray-700">
@@ -380,7 +382,7 @@ const Payments: React.FC = () => {
>
<td className="px-6 py-4">
<p className="font-medium text-gray-900 dark:text-white">
{txn.customer_name || 'Unknown'}
{txn.customer_name || t('payments.unknown')}
</p>
<p className="text-sm text-gray-500">{txn.customer_email}</p>
</td>
@@ -389,7 +391,7 @@ const Payments: React.FC = () => {
</td>
<td className="px-6 py-4">
<p className="font-medium text-gray-900 dark:text-white">{txn.amount_display}</p>
<p className="text-xs text-gray-500">Fee: {txn.fee_display}</p>
<p className="text-xs text-gray-500">{t('payments.fee')} {txn.fee_display}</p>
</td>
<td className="px-6 py-4">
{getStatusBadge(txn.status)}
@@ -399,7 +401,7 @@ const Payments: React.FC = () => {
) : (
<tr>
<td colSpan={4} className="px-6 py-8 text-center text-gray-500">
No transactions yet
{t('payments.noTransactionsYet')}
</td>
</tr>
)}
@@ -426,7 +428,7 @@ const Payments: React.FC = () => {
className="px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
placeholder="Start date"
/>
<span className="text-gray-400">to</span>
<span className="text-gray-400">{t('payments.to')}</span>
<input
type="date"
value={dateRange.end}
@@ -441,11 +443,11 @@ const Payments: React.FC = () => {
onChange={(e) => setFilters({ ...filters, status: e.target.value as any, page: 1 })}
className="px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
>
<option value="all">All Statuses</option>
<option value="succeeded">Succeeded</option>
<option value="pending">Pending</option>
<option value="failed">Failed</option>
<option value="refunded">Refunded</option>
<option value="all">{t('payments.allStatuses')}</option>
<option value="succeeded">{t('payments.succeeded')}</option>
<option value="pending">{t('payments.pending')}</option>
<option value="failed">{t('payments.failed')}</option>
<option value="refunded">{t('payments.refunded')}</option>
</select>
<select
@@ -453,9 +455,9 @@ const Payments: React.FC = () => {
onChange={(e) => setFilters({ ...filters, transaction_type: e.target.value as any, page: 1 })}
className="px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
>
<option value="all">All Types</option>
<option value="payment">Payment</option>
<option value="refund">Refund</option>
<option value="all">{t('payments.allTypes')}</option>
<option value="payment">{t('payments.payment')}</option>
<option value="refund">{t('payments.refund')}</option>
</select>
<button
@@ -463,7 +465,7 @@ const Payments: React.FC = () => {
className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-gray-600 hover:text-gray-900"
>
<RefreshCcw size={14} />
Refresh
{t('payments.refresh')}
</button>
</div>
</div>
@@ -474,13 +476,13 @@ const Payments: React.FC = () => {
<table className="w-full">
<thead className="bg-gray-50 dark:bg-gray-700">
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Transaction</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Net</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('payments.transaction')}</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('payments.customer')}</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('payments.date')}</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('payments.amount')}</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('payments.net')}</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('payments.status')}</th>
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">{t('payments.action')}</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200 dark:divide-gray-700">
@@ -503,7 +505,7 @@ const Payments: React.FC = () => {
</td>
<td className="px-6 py-4">
<p className="font-medium text-gray-900 dark:text-white">
{txn.customer_name || 'Unknown'}
{txn.customer_name || t('payments.unknown')}
</p>
<p className="text-sm text-gray-500">{txn.customer_email}</p>
</td>
@@ -518,7 +520,7 @@ const Payments: React.FC = () => {
{txn.transaction_type === 'refund' ? '-' : ''}${(txn.net_amount / 100).toFixed(2)}
</p>
{txn.application_fee_amount > 0 && (
<p className="text-xs text-gray-400">-{txn.fee_display} fee</p>
<p className="text-xs text-gray-400">-{txn.fee_display} {t('payments.fee')}</p>
)}
</td>
<td className="px-6 py-4">
@@ -533,7 +535,7 @@ const Payments: React.FC = () => {
className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-brand-600 hover:text-brand-700 hover:bg-brand-50 rounded-lg transition-colors"
>
<Eye size={14} />
View
{t('payments.view')}
</button>
</td>
</tr>
@@ -541,7 +543,7 @@ const Payments: React.FC = () => {
) : (
<tr>
<td colSpan={7} className="px-6 py-8 text-center text-gray-500">
No transactions found
{t('payments.noTransactionsFound')}
</td>
</tr>
)}
@@ -553,8 +555,8 @@ const Payments: React.FC = () => {
{transactions && transactions.total_pages > 1 && (
<div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
<p className="text-sm text-gray-500">
Showing {(filters.page! - 1) * filters.page_size! + 1} to{' '}
{Math.min(filters.page! * filters.page_size!, transactions.count)} of {transactions.count}
{t('payments.showing')} {(filters.page! - 1) * filters.page_size! + 1} {t('payments.to')}{' '}
{Math.min(filters.page! * filters.page_size!, transactions.count)} {t('payments.of')} {transactions.count}
</p>
<div className="flex items-center gap-2">
<button
@@ -565,7 +567,7 @@ const Payments: React.FC = () => {
<ChevronLeft size={20} />
</button>
<span className="text-sm text-gray-600">
Page {filters.page} of {transactions.total_pages}
{t('payments.page')} {filters.page} {t('payments.of')} {transactions.total_pages}
</span>
<button
onClick={() => setFilters({ ...filters, page: filters.page! + 1 })}
@@ -591,7 +593,7 @@ const Payments: React.FC = () => {
<Wallet className="text-green-600" size={24} />
</div>
<div>
<p className="text-sm text-gray-500">Available for Payout</p>
<p className="text-sm text-gray-500">{t('payments.availableForPayout')}</p>
{balanceLoading ? (
<Loader2 className="animate-spin text-gray-400" size={20} />
) : (
@@ -615,7 +617,7 @@ const Payments: React.FC = () => {
<Clock className="text-yellow-600" size={24} />
</div>
<div>
<p className="text-sm text-gray-500">Pending</p>
<p className="text-sm text-gray-500">{t('payments.pending')}</p>
{balanceLoading ? (
<Loader2 className="animate-spin text-gray-400" size={20} />
) : (
@@ -637,17 +639,17 @@ const Payments: React.FC = () => {
{/* Payouts List */}
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700">
<div className="p-6 border-b border-gray-200 dark:border-gray-700">
<h3 className="font-semibold text-lg text-gray-900 dark:text-white">Payout History</h3>
<h3 className="font-semibold text-lg text-gray-900 dark:text-white">{t('payments.payoutHistory')}</h3>
</div>
<div className="overflow-x-auto">
<table className="w-full">
<thead className="bg-gray-50 dark:bg-gray-700">
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Payout ID</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Arrival Date</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Method</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('payments.payoutId')}</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('payments.amount')}</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('payments.status')}</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('payments.arrivalDate')}</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('payments.method')}</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200 dark:divide-gray-700">
@@ -680,7 +682,7 @@ const Payments: React.FC = () => {
) : (
<tr>
<td colSpan={5} className="px-6 py-8 text-center text-gray-500">
No payouts yet
{t('payments.noPayoutsYet')}
</td>
</tr>
)}
@@ -709,20 +711,20 @@ const Payments: React.FC = () => {
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
<div className="w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-xl border border-gray-200 dark:border-gray-700">
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
<h3 className="text-lg font-semibold">Export Transactions</h3>
<h3 className="text-lg font-semibold">{t('payments.exportTransactions')}</h3>
<button onClick={() => setShowExportModal(false)} className="text-gray-400 hover:text-gray-600">
<X size={20} />
</button>
</div>
<div className="p-6 space-y-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">Export Format</label>
<label className="block text-sm font-medium text-gray-700 mb-2">{t('payments.exportFormat')}</label>
<div className="grid grid-cols-2 gap-3">
{[
{ id: 'csv', label: 'CSV', icon: FileText },
{ id: 'xlsx', label: 'Excel', icon: FileSpreadsheet },
{ id: 'pdf', label: 'PDF', icon: FileText },
{ id: 'quickbooks', label: 'QuickBooks', icon: FileSpreadsheet },
{ id: 'csv', label: t('payments.csv'), icon: FileText },
{ id: 'xlsx', label: t('payments.excel'), icon: FileSpreadsheet },
{ id: 'pdf', label: t('payments.pdf'), icon: FileText },
{ id: 'quickbooks', label: t('payments.quickbooks'), icon: FileSpreadsheet },
].map((format) => (
<button
key={format.id}
@@ -741,7 +743,7 @@ const Payments: React.FC = () => {
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">Date Range (Optional)</label>
<label className="block text-sm font-medium text-gray-700 mb-2">{t('payments.dateRangeOptional')}</label>
<div className="flex items-center gap-2">
<input
type="date"
@@ -749,7 +751,7 @@ const Payments: React.FC = () => {
onChange={(e) => setDateRange({ ...dateRange, start: e.target.value })}
className="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
/>
<span className="text-gray-400">to</span>
<span className="text-gray-400">{t('payments.to')}</span>
<input
type="date"
value={dateRange.end}
@@ -767,12 +769,12 @@ const Payments: React.FC = () => {
{exportMutation.isPending ? (
<>
<Loader2 className="animate-spin" size={18} />
Exporting...
{t('payments.exporting')}
</>
) : (
<>
<Download size={18} />
Export
{t('payments.export')}
</>
)}
</button>
@@ -790,16 +792,16 @@ const Payments: React.FC = () => {
return (
<div className="max-w-4xl mx-auto space-y-8">
<div>
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">Billing</h2>
<p className="text-gray-500 dark:text-gray-400">Manage your payment methods and view invoice history.</p>
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('payments.billing')}</h2>
<p className="text-gray-500 dark:text-gray-400">{t('payments.billingDescription')}</p>
</div>
{/* Payment Methods */}
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700">
<div className="p-6 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
<h3 className="font-semibold text-lg text-gray-900 dark:text-white">Payment Methods</h3>
<h3 className="font-semibold text-lg text-gray-900 dark:text-white">{t('payments.paymentMethods')}</h3>
<button onClick={() => setIsAddCardModalOpen(true)} className="flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-white bg-brand-500 rounded-lg hover:bg-brand-600 transition-colors shadow-sm">
<Plus size={16} /> Add Card
<Plus size={16} /> {t('payments.addCard')}
</button>
</div>
<div className="divide-y divide-gray-200 dark:divide-gray-700">
@@ -808,14 +810,14 @@ const Payments: React.FC = () => {
<div className="flex items-center gap-4">
<CreditCard className="text-gray-400" size={24} />
<div>
<p className="font-medium text-gray-900 dark:text-white">{pm.brand} ending in {pm.last4}</p>
{pm.isDefault && <span className="text-xs font-medium text-green-600 dark:text-green-400">Default</span>}
<p className="font-medium text-gray-900 dark:text-white">{pm.brand} {t('payments.endingIn')} {pm.last4}</p>
{pm.isDefault && <span className="text-xs font-medium text-green-600 dark:text-green-400">{t('payments.default')}</span>}
</div>
</div>
<div className="flex items-center gap-2">
{!pm.isDefault && (
<button onClick={() => handleSetDefault(pm.id)} className="flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 font-medium">
<Star size={14} /> Set as Default
<Star size={14} /> {t('payments.setAsDefault')}
</button>
)}
<button onClick={() => handleDeleteMethod(pm.id)} className="p-2 text-gray-400 hover:text-red-500 dark:hover:text-red-400">
@@ -823,17 +825,17 @@ const Payments: React.FC = () => {
</button>
</div>
</div>
)) : <div className="p-8 text-center text-gray-500 dark:text-gray-400">No payment methods on file.</div>}
)) : <div className="p-8 text-center text-gray-500 dark:text-gray-400">{t('payments.noPaymentMethodsOnFile')}</div>}
</div>
</div>
{/* Invoice History */}
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700">
<div className="p-6 border-b border-gray-200 dark:border-gray-700">
<h3 className="font-semibold text-lg text-gray-900 dark:text-white">Invoice History</h3>
<h3 className="font-semibold text-lg text-gray-900 dark:text-white">{t('payments.invoiceHistory')}</h3>
</div>
<div className="p-8 text-center text-gray-500">
No invoices yet.
{t('payments.noInvoicesYet')}
</div>
</div>
@@ -843,18 +845,18 @@ const Payments: React.FC = () => {
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm" onClick={() => setIsAddCardModalOpen(false)}>
<div className="w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-xl border border-gray-200 dark:border-gray-700" onClick={e => e.stopPropagation()}>
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
<h3 className="text-lg font-semibold">Add New Card</h3>
<h3 className="text-lg font-semibold">{t('payments.addNewCard')}</h3>
<button onClick={() => setIsAddCardModalOpen(false)}><X size={20} /></button>
</div>
<form onSubmit={handleAddCard} className="p-6 space-y-4">
<div><label className="text-sm font-medium">Card Number</label><div className="mt-1 p-3 border rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600">•••• •••• •••• 4242</div></div>
<div><label className="text-sm font-medium">Cardholder Name</label><div className="mt-1 p-3 border rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600">{effectiveUser.name}</div></div>
<div><label className="text-sm font-medium">{t('payments.cardNumber')}</label><div className="mt-1 p-3 border rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600">•••• •••• •••• 4242</div></div>
<div><label className="text-sm font-medium">{t('payments.cardholderName')}</label><div className="mt-1 p-3 border rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600">{effectiveUser.name}</div></div>
<div className="grid grid-cols-2 gap-4">
<div><label className="text-sm font-medium">Expiry</label><div className="mt-1 p-3 border rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600">12 / 2028</div></div>
<div><label className="text-sm font-medium">CVV</label><div className="mt-1 p-3 border rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600">•••</div></div>
<div><label className="text-sm font-medium">{t('payments.expiry')}</label><div className="mt-1 p-3 border rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600">12 / 2028</div></div>
<div><label className="text-sm font-medium">{t('payments.cvv')}</label><div className="mt-1 p-3 border rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600">•••</div></div>
</div>
<p className="text-xs text-gray-400 text-center">This is a simulated form. No real card data is required.</p>
<button type="submit" className="w-full py-3 bg-brand-600 text-white font-semibold rounded-lg hover:bg-brand-700">Add Card</button>
<p className="text-xs text-gray-400 text-center">{t('payments.simulatedFormNote')}</p>
<button type="submit" className="w-full py-3 bg-brand-600 text-white font-semibold rounded-lg hover:bg-brand-700">{t('payments.addCard')}</button>
</form>
</div>
</div>
@@ -864,7 +866,7 @@ const Payments: React.FC = () => {
);
}
return <div>Access Denied or User not found.</div>;
return <div>{t('payments.accessDeniedOrUserNotFound')}</div>;
};
export default Payments;

95
frontend/src/pages/Staff.tsx
View File

@@ -80,7 +80,7 @@ const Staff: React.FC<StaffProps> = ({ onMasquerade, effectiveUser }) => {
};
const handleMakeBookable = (user: any) => {
if (confirm(`Create a bookable resource for ${user.name || user.username}?`)) {
if (confirm(t('staff.confirmMakeBookable', { name: user.name || user.username }))) {
createResourceMutation.mutate({
name: user.name || user.username,
type: 'STAFF',
@@ -95,7 +95,7 @@ const Staff: React.FC<StaffProps> = ({ onMasquerade, effectiveUser }) => {
setInviteSuccess('');
if (!inviteEmail.trim()) {
setInviteError(t('staff.emailRequired', 'Email is required'));
setInviteError(t('staff.emailRequired'));
return;
}
@@ -109,7 +109,7 @@ const Staff: React.FC<StaffProps> = ({ onMasquerade, effectiveUser }) => {
};
await createInvitationMutation.mutateAsync(invitationData);
setInviteSuccess(t('staff.invitationSent', 'Invitation sent successfully!'));
setInviteSuccess(t('staff.invitationSent'));
setInviteEmail('');
setCreateBookableResource(false);
setResourceName('');
@@ -120,16 +120,16 @@ const Staff: React.FC<StaffProps> = ({ onMasquerade, effectiveUser }) => {
setInviteSuccess('');
}, 1500);
} catch (err: any) {
setInviteError(err.response?.data?.error || t('staff.invitationFailed', 'Failed to send invitation'));
setInviteError(err.response?.data?.error || t('staff.invitationFailed'));
}
};
const handleCancelInvitation = async (invitation: StaffInvitation) => {
if (confirm(t('staff.confirmCancelInvitation', `Cancel invitation to ${invitation.email}?`))) {
if (confirm(t('staff.confirmCancelInvitation', { email: invitation.email }))) {
try {
await cancelInvitationMutation.mutateAsync(invitation.id);
} catch (err: any) {
alert(err.response?.data?.error || t('staff.cancelFailed', 'Failed to cancel invitation'));
alert(err.response?.data?.error || t('staff.cancelFailed'));
}
}
};
@@ -137,9 +137,9 @@ const Staff: React.FC<StaffProps> = ({ onMasquerade, effectiveUser }) => {
const handleResendInvitation = async (invitation: StaffInvitation) => {
try {
await resendInvitationMutation.mutateAsync(invitation.id);
alert(t('staff.invitationResent', 'Invitation resent successfully!'));
alert(t('staff.invitationResent'));
} catch (err: any) {
alert(err.response?.data?.error || t('staff.resendFailed', 'Failed to resend invitation'));
alert(err.response?.data?.error || t('staff.resendFailed'));
}
};
@@ -178,11 +178,11 @@ const Staff: React.FC<StaffProps> = ({ onMasquerade, effectiveUser }) => {
const handleToggleActive = async (user: any) => {
const action = user.is_active ? 'deactivate' : 'reactivate';
if (confirm(t('staff.confirmToggleActive', `Are you sure you want to ${action} ${user.name}?`))) {
if (confirm(t('staff.confirmToggleActive', { action, name: user.name }))) {
try {
await toggleActiveMutation.mutateAsync(user.id);
} catch (err: any) {
alert(err.response?.data?.error || t('staff.toggleFailed', `Failed to ${action} staff member`));
alert(err.response?.data?.error || t('staff.toggleFailed', { action }));
}
}
};
@@ -212,12 +212,12 @@ const Staff: React.FC<StaffProps> = ({ onMasquerade, effectiveUser }) => {
id: editingStaff.id,
updates: { permissions: editPermissions },
});
setEditSuccess(t('staff.settingsSaved', 'Settings saved successfully'));
setEditSuccess(t('staff.settingsSaved'));
setTimeout(() => {
closeEditModal();
}, 1000);
} catch (err: any) {
setEditError(err.response?.data?.error || t('staff.saveFailed', 'Failed to save settings'));
setEditError(err.response?.data?.error || t('staff.saveFailed'));
}
};
@@ -225,12 +225,12 @@ const Staff: React.FC<StaffProps> = ({ onMasquerade, effectiveUser }) => {
if (!editingStaff) return;
const action = editingStaff.is_active ? 'deactivate' : 'reactivate';
if (confirm(t('staff.confirmToggleActive', `Are you sure you want to ${action} ${editingStaff.name}?`))) {
if (confirm(t('staff.confirmToggleActive', { action, name: editingStaff.name }))) {
try {
await toggleActiveMutation.mutateAsync(editingStaff.id);
closeEditModal();
} catch (err: any) {
setEditError(err.response?.data?.error || t('staff.toggleFailed', `Failed to ${action} staff member`));
setEditError(err.response?.data?.error || t('staff.toggleFailed', { action }));
}
}
};
@@ -257,7 +257,7 @@ const Staff: React.FC<StaffProps> = ({ onMasquerade, effectiveUser }) => {
<div className="bg-amber-50 dark:bg-amber-900/20 rounded-xl border border-amber-200 dark:border-amber-800 p-4">
<h3 className="text-sm font-semibold text-amber-800 dark:text-amber-300 mb-3 flex items-center gap-2">
<Clock size={16} />
{t('staff.pendingInvitations', 'Pending Invitations')} ({invitations.length})
{t('staff.pendingInvitations')} ({invitations.length})
</h3>
<div className="space-y-2">
{invitations.map((invitation) => (
@@ -272,7 +272,7 @@ const Staff: React.FC<StaffProps> = ({ onMasquerade, effectiveUser }) => {
<div>
<div className="font-medium text-gray-900 dark:text-white text-sm">{invitation.email}</div>
<div className="text-xs text-gray-500 dark:text-gray-400">
{invitation.role_display} &bull; {t('staff.expires', 'Expires')}{' '}
{invitation.role_display} &bull; {t('staff.expires')}{' '}
{new Date(invitation.expires_at).toLocaleDateString()}
</div>
</div>
@@ -282,7 +282,7 @@ const Staff: React.FC<StaffProps> = ({ onMasquerade, effectiveUser }) => {
onClick={() => handleResendInvitation(invitation)}
disabled={resendInvitationMutation.isPending}
className="p-1.5 text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 transition-colors"
title={t('staff.resendInvitation', 'Resend invitation')}
title={t('staff.resendInvitation')}
>
<RefreshCw size={16} className={resendInvitationMutation.isPending ? 'animate-spin' : ''} />
</button>
@@ -290,7 +290,7 @@ const Staff: React.FC<StaffProps> = ({ onMasquerade, effectiveUser }) => {
onClick={() => handleCancelInvitation(invitation)}
disabled={cancelInvitationMutation.isPending}
className="p-1.5 text-gray-400 hover:text-red-600 dark:hover:text-red-400 transition-colors"
title={t('staff.cancelInvitation', 'Cancel invitation')}
title={t('staff.cancelInvitation')}
>
<Trash2 size={16} />
</button>
@@ -378,7 +378,7 @@ const Staff: React.FC<StaffProps> = ({ onMasquerade, effectiveUser }) => {
<button
onClick={() => openEditModal(user)}
className="p-2 text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
title={t('common.edit', 'Edit')}
title={t('common.edit')}
>
<Pencil size={16} />
</button>
@@ -392,9 +392,9 @@ const Staff: React.FC<StaffProps> = ({ onMasquerade, effectiveUser }) => {
{activeStaff.length === 0 && (
<div className="p-12 text-center">
<UserIcon size={40} className="mx-auto mb-2 text-gray-300 dark:text-gray-600" />
<p className="text-gray-500 dark:text-gray-400">{t('staff.noStaffFound', 'No staff members found')}</p>
<p className="text-gray-500 dark:text-gray-400">{t('staff.noStaffFound')}</p>
<p className="text-sm text-gray-400 dark:text-gray-500 mt-1">
{t('staff.inviteFirstStaff', 'Invite your first team member to get started')}
{t('staff.inviteFirstStaff')}
</p>
</div>
)}
@@ -412,7 +412,7 @@ const Staff: React.FC<StaffProps> = ({ onMasquerade, effectiveUser }) => {
{showInactiveStaff ? <ChevronDown size={18} /> : <ChevronRight size={18} />}
<UserX size={18} />
<span className="font-medium">
{t('staff.inactiveStaff', 'Inactive Staff')} ({inactiveStaff.length})
{t('staff.inactiveStaff')} ({inactiveStaff.length})
</span>
</div>
</button>
@@ -462,7 +462,7 @@ const Staff: React.FC<StaffProps> = ({ onMasquerade, effectiveUser }) => {
className="text-green-600 hover:text-green-500 dark:text-green-400 dark:hover:text-green-300 font-medium text-xs inline-flex items-center gap-1 px-3 py-1 border border-green-200 dark:border-green-800 rounded-lg hover:bg-green-50 dark:hover:bg-green-900/30 transition-colors"
>
<Power size={14} />
{t('staff.reactivate', 'Reactivate')}
{t('staff.reactivate')}
</button>
</td>
</tr>
@@ -493,22 +493,19 @@ const Staff: React.FC<StaffProps> = ({ onMasquerade, effectiveUser }) => {
<form onSubmit={handleInviteSubmit} className="p-6 space-y-4">
<p className="text-sm text-gray-500 dark:text-gray-400">
{t(
'staff.inviteDescription',
"Enter the email address of the person you'd like to invite. They'll receive an email with instructions to join your team."
)}
{t('staff.inviteDescription')}
</p>
{/* Email Input */}
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
{t('staff.emailAddress', 'Email Address')} *
{t('staff.emailAddress')} *
</label>
<input
type="email"
value={inviteEmail}
onChange={(e) => setInviteEmail(e.target.value)}
placeholder={t('staff.emailPlaceholder', 'colleague@example.com')}
placeholder={t('staff.emailPlaceholder')}
required
className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
/>
@@ -517,22 +514,22 @@ const Staff: React.FC<StaffProps> = ({ onMasquerade, effectiveUser }) => {
{/* Role Selector */}
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
{t('staff.roleLabel', 'Role')} *
{t('staff.roleLabel')} *
</label>
<select
value={inviteRole}
onChange={(e) => setInviteRole(e.target.value as 'TENANT_MANAGER' | 'TENANT_STAFF')}
className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
>
<option value="TENANT_STAFF">{t('staff.roleStaff', 'Staff Member')}</option>
<option value="TENANT_STAFF">{t('staff.roleStaff')}</option>
{canInviteManagers && (
<option value="TENANT_MANAGER">{t('staff.roleManager', 'Manager')}</option>
<option value="TENANT_MANAGER">{t('staff.roleManager')}</option>
)}
</select>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
{inviteRole === 'TENANT_MANAGER'
? t('staff.managerRoleHint', 'Managers can manage staff, resources, and view reports')
: t('staff.staffRoleHint', 'Staff members can manage their own schedule and appointments')}
? t('staff.managerRoleHint')
: t('staff.staffRoleHint')}
</p>
</div>
@@ -566,10 +563,10 @@ const Staff: React.FC<StaffProps> = ({ onMasquerade, effectiveUser }) => {
/>
<div>
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">
{t('staff.makeBookable', 'Make Bookable')}
{t('staff.makeBookable')}
</span>
<p className="text-xs text-gray-500 dark:text-gray-400">
{t('staff.makeBookableHint', 'Create a bookable resource so customers can schedule appointments with this person')}
{t('staff.makeBookableHint')}
</p>
</div>
</label>
@@ -578,13 +575,13 @@ const Staff: React.FC<StaffProps> = ({ onMasquerade, effectiveUser }) => {
{createBookableResource && (
<div className="mt-3">
<label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
{t('staff.resourceName', 'Display Name (optional)')}
{t('staff.resourceName')}
</label>
<input
type="text"
value={resourceName}
onChange={(e) => setResourceName(e.target.value)}
placeholder={t('staff.resourceNamePlaceholder', "Defaults to person's name")}
placeholder={t('staff.resourceNamePlaceholder')}
className="w-full px-3 py-2 text-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
/>
</div>
@@ -624,7 +621,7 @@ const Staff: React.FC<StaffProps> = ({ onMasquerade, effectiveUser }) => {
) : (
<Send size={16} />
)}
{t('staff.sendInvitation', 'Send Invitation')}
{t('staff.sendInvitation')}
</button>
</div>
</form>
@@ -640,7 +637,7 @@ const Staff: React.FC<StaffProps> = ({ onMasquerade, effectiveUser }) => {
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-xl w-full max-w-md overflow-hidden">
<div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
{t('staff.editStaff', 'Edit Staff Member')}
{t('staff.editStaff')}
</h3>
<button
onClick={closeEditModal}
@@ -698,7 +695,7 @@ const Staff: React.FC<StaffProps> = ({ onMasquerade, effectiveUser }) => {
{editingStaff.role === 'owner' && (
<div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
<p className="text-sm text-purple-700 dark:text-purple-300">
{t('staff.ownerFullAccess', 'Owners have full access to all features and settings.')}
{t('staff.ownerFullAccess')}
</p>
</div>
)}
@@ -721,20 +718,20 @@ const Staff: React.FC<StaffProps> = ({ onMasquerade, effectiveUser }) => {
{editingStaff.role !== 'owner' && effectiveUser.id !== editingStaff.id && effectiveUser.role === 'owner' && (
<div className="pt-4 border-t border-gray-200 dark:border-gray-700">
<h4 className="text-sm font-semibold text-red-600 dark:text-red-400 mb-2">
{t('staff.dangerZone', 'Danger Zone')}
{t('staff.dangerZone')}
</h4>
<div className="p-3 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-gray-900 dark:text-white">
{editingStaff.is_active
? t('staff.deactivateAccount', 'Deactivate Account')
: t('staff.reactivateAccount', 'Reactivate Account')}
? t('staff.deactivateAccount')
: t('staff.reactivateAccount')}
</p>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
{editingStaff.is_active
? t('staff.deactivateHint', 'Prevent this user from logging in while keeping their data')
: t('staff.reactivateHint', 'Allow this user to log in again')}
? t('staff.deactivateHint')
: t('staff.reactivateHint')}
</p>
</div>
<button
@@ -752,8 +749,8 @@ const Staff: React.FC<StaffProps> = ({ onMasquerade, effectiveUser }) => {
<Power size={14} />
)}
{editingStaff.is_active
? t('staff.deactivate', 'Deactivate')
: t('staff.reactivate', 'Reactivate')}
? t('staff.deactivate')
: t('staff.reactivate')}
</button>
</div>
</div>
@@ -778,7 +775,7 @@ const Staff: React.FC<StaffProps> = ({ onMasquerade, effectiveUser }) => {
{updateStaffMutation.isPending ? (
<Loader2 size={16} className="animate-spin" />
) : null}
{t('common.save', 'Save Changes')}
{t('common.save')}
</button>
)}
</div>

104
frontend/src/pages/TrialExpired.tsx
View File

@@ -1,5 +1,6 @@
import React from 'react';
import { useNavigate, useOutletContext } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Clock, ArrowRight, Check, X, CreditCard, TrendingDown, AlertTriangle } from 'lucide-react';
import { User, Business } from '../types';
@@ -8,6 +9,7 @@ import { User, Business } from '../types';
* Shown when a business trial has expired and they need to either upgrade or downgrade to free tier
*/
const TrialExpired: React.FC = () => {
const { t } = useTranslation();
const navigate = useNavigate();
const { user, business } = useOutletContext<{ user: User; business: Business }>();
const isOwner = user.role === 'owner';
@@ -17,34 +19,34 @@ const TrialExpired: React.FC = () => {
switch (tier) {
case 'Professional':
return [
{ name: 'Unlimited appointments', included: true },
{ name: 'Online booking portal', included: true },
{ name: 'Email notifications', included: true },
{ name: 'SMS reminders', included: true },
{ name: 'Custom branding', included: true },
{ name: 'Advanced analytics', included: true },
{ name: 'Payment processing', included: true },
{ name: 'Priority support', included: true },
{ name: t('trialExpired.features.professional.unlimitedAppointments'), included: true },
{ name: t('trialExpired.features.professional.onlineBooking'), included: true },
{ name: t('trialExpired.features.professional.emailNotifications'), included: true },
{ name: t('trialExpired.features.professional.smsReminders'), included: true },
{ name: t('trialExpired.features.professional.customBranding'), included: true },
{ name: t('trialExpired.features.professional.advancedAnalytics'), included: true },
{ name: t('trialExpired.features.professional.paymentProcessing'), included: true },
{ name: t('trialExpired.features.professional.prioritySupport'), included: true },
];
case 'Business':
return [
{ name: 'Everything in Professional', included: true },
{ name: 'Multiple locations', included: true },
{ name: 'Team management', included: true },
{ name: 'API access', included: true },
{ name: 'Custom domain', included: true },
{ name: 'White-label options', included: true },
{ name: 'Dedicated account manager', included: true },
{ name: t('trialExpired.features.business.everythingInProfessional'), included: true },
{ name: t('trialExpired.features.business.multipleLocations'), included: true },
{ name: t('trialExpired.features.business.teamManagement'), included: true },
{ name: t('trialExpired.features.business.apiAccess'), included: true },
{ name: t('trialExpired.features.business.customDomain'), included: true },
{ name: t('trialExpired.features.business.whiteLabel'), included: true },
{ name: t('trialExpired.features.business.accountManager'), included: true },
];
case 'Enterprise':
return [
{ name: 'Everything in Business', included: true },
{ name: 'Unlimited users', included: true },
{ name: 'Custom integrations', included: true },
{ name: 'SLA guarantee', included: true },
{ name: 'Custom contract terms', included: true },
{ name: '24/7 phone support', included: true },
{ name: 'On-premise deployment option', included: true },
{ name: t('trialExpired.features.enterprise.everythingInBusiness'), included: true },
{ name: t('trialExpired.features.enterprise.unlimitedUsers'), included: true },
{ name: t('trialExpired.features.enterprise.customIntegrations'), included: true },
{ name: t('trialExpired.features.enterprise.slaGuarantee'), included: true },
{ name: t('trialExpired.features.enterprise.customContracts'), included: true },
{ name: t('trialExpired.features.enterprise.phoneSupport'), included: true },
{ name: t('trialExpired.features.enterprise.onPremise'), included: true },
];
default:
return [];
@@ -52,14 +54,14 @@ const TrialExpired: React.FC = () => {
};
const freeTierFeatures = [
{ name: 'Up to 50 appointments/month', included: true },
{ name: 'Basic online booking', included: true },
{ name: 'Email notifications', included: true },
{ name: 'SMS reminders', included: false },
{ name: 'Custom branding', included: false },
{ name: 'Advanced analytics', included: false },
{ name: 'Payment processing', included: false },
{ name: 'Priority support', included: false },
{ name: t('trialExpired.features.free.upTo50Appointments'), included: true },
{ name: t('trialExpired.features.free.basicOnlineBooking'), included: true },
{ name: t('trialExpired.features.free.emailNotifications'), included: true },
{ name: t('trialExpired.features.free.smsReminders'), included: false },
{ name: t('trialExpired.features.free.customBranding'), included: false },
{ name: t('trialExpired.features.free.advancedAnalytics'), included: false },
{ name: t('trialExpired.features.free.paymentProcessing'), included: false },
{ name: t('trialExpired.features.free.prioritySupport'), included: false },
];
const paidTierFeatures = getTierFeatures(business.plan);
@@ -69,7 +71,7 @@ const TrialExpired: React.FC = () => {
};
const handleDowngrade = () => {
if (window.confirm('Are you sure you want to downgrade to the Free plan? You will lose access to premium features immediately.')) {
if (window.confirm(t('trialExpired.confirmDowngrade'))) {
// TODO: Implement downgrade to free tier API call
console.log('Downgrading to free tier...');
}
@@ -87,10 +89,12 @@ const TrialExpired: React.FC = () => {
<Clock size={48} />
</div>
</div>
<h1 className="text-3xl font-bold mb-2">Your 14-Day Trial Has Expired</h1>
<h1 className="text-3xl font-bold mb-2">{t('trialExpired.title')}</h1>
<p className="text-white/90 text-lg">
Your trial of the {business.plan} plan ended on{' '}
{business.trialEnd ? new Date(business.trialEnd).toLocaleDateString() : 'N/A'}
{t('trialExpired.subtitle', {
plan: business.plan,
date: business.trialEnd ? new Date(business.trialEnd).toLocaleDateString() : 'N/A'
})}
</p>
</div>
@@ -98,10 +102,10 @@ const TrialExpired: React.FC = () => {
<div className="p-8">
<div className="mb-8">
<h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">
What happens now?
{t('trialExpired.whatHappensNow')}
</h2>
<p className="text-gray-600 dark:text-gray-300 mb-4">
You have two options to continue using SmoothSchedule:
{t('trialExpired.twoOptions')}
</p>
</div>
@@ -110,9 +114,9 @@ const TrialExpired: React.FC = () => {
{/* Free Tier Card */}
<div className="border-2 border-gray-200 dark:border-gray-700 rounded-xl p-6">
<div className="flex items-center justify-between mb-4">
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">Free Plan</h3>
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">{t('trialExpired.freePlan')}</h3>
<span className="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full text-sm font-medium">
$0/month
{t('trialExpired.pricePerMonth')}
</span>
</div>
<ul className="space-y-3 mb-6">
@@ -135,7 +139,7 @@ const TrialExpired: React.FC = () => {
className="w-full px-4 py-3 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors font-medium flex items-center justify-center gap-2"
>
<TrendingDown size={20} />
Downgrade to Free
{t('trialExpired.downgradeToFree')}
</button>
)}
</div>
@@ -144,14 +148,14 @@ const TrialExpired: React.FC = () => {
<div className="border-2 border-blue-500 dark:border-blue-400 rounded-xl p-6 bg-blue-50/50 dark:bg-blue-900/20 relative">
<div className="absolute top-4 right-4">
<span className="px-3 py-1 bg-blue-500 text-white rounded-full text-xs font-bold uppercase tracking-wide">
Recommended
{t('trialExpired.recommended')}
</span>
</div>
<div className="mb-4">
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-1">
{business.plan} Plan
{business.plan} {t('common.plan', { defaultValue: 'Plan' })}
</h3>
<p className="text-sm text-gray-600 dark:text-gray-400">Continue where you left off</p>
<p className="text-sm text-gray-600 dark:text-gray-400">{t('trialExpired.continueWhereYouLeftOff')}</p>
</div>
<ul className="space-y-3 mb-6">
{paidTierFeatures.slice(0, 8).map((feature, idx) => (
@@ -162,7 +166,7 @@ const TrialExpired: React.FC = () => {
))}
{paidTierFeatures.length > 8 && (
<li className="text-sm text-gray-500 dark:text-gray-400 italic">
+ {paidTierFeatures.length - 8} more features
{t('trialExpired.moreFeatures', { count: paidTierFeatures.length - 8 })}
</li>
)}
</ul>
@@ -172,7 +176,7 @@ const TrialExpired: React.FC = () => {
className="w-full px-4 py-3 bg-gradient-to-r from-blue-600 to-blue-500 text-white rounded-lg hover:from-blue-700 hover:to-blue-600 transition-all font-medium flex items-center justify-center gap-2 shadow-lg shadow-blue-500/30"
>
<CreditCard size={20} />
Upgrade Now
{t('trialExpired.upgradeNow')}
<ArrowRight size={20} />
</button>
)}
@@ -188,8 +192,8 @@ const TrialExpired: React.FC = () => {
<div className="flex-1">
<p className="text-sm text-yellow-800 dark:text-yellow-200 font-medium">
{isOwner
? 'Your account has limited functionality until you choose an option.'
: 'Please contact your business owner to upgrade or downgrade the account.'}
? t('trialExpired.ownerLimitedFunctionality')
: t('trialExpired.nonOwnerContactOwner')}
</p>
</div>
</div>
@@ -198,7 +202,7 @@ const TrialExpired: React.FC = () => {
{!isOwner && (
<div className="mt-6 text-center">
<p className="text-gray-600 dark:text-gray-400">
Business Owner: <span className="font-semibold text-gray-900 dark:text-white">{business.name}</span>
{t('trialExpired.businessOwner')} <span className="font-semibold text-gray-900 dark:text-white">{business.name}</span>
</p>
</div>
)}
@@ -208,9 +212,9 @@ const TrialExpired: React.FC = () => {
{/* Footer */}
<div className="text-center mt-6">
<p className="text-gray-600 dark:text-gray-400 text-sm">
Questions? Contact our support team at{' '}
<a href="mailto:support@smoothschedule.com" className="text-blue-600 dark:text-blue-400 hover:underline">
support@smoothschedule.com
{t('trialExpired.supportQuestion')}{' '}
<a href={`mailto:${t('trialExpired.supportEmail')}`} className="text-blue-600 dark:text-blue-400 hover:underline">
{t('trialExpired.supportEmail')}
</a>
</p>
</div>

61
frontend/src/pages/platform/PlatformBusinesses.tsx
View File

@@ -1,7 +1,7 @@
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Eye, ShieldCheck, Ban, Pencil, Send, ChevronDown, ChevronRight, Building2, Check } from 'lucide-react';
import { useBusinesses, useUpdateBusiness } from '../../hooks/usePlatform';
import { Eye, ShieldCheck, Ban, Pencil, Send, ChevronDown, ChevronRight, Building2, Check, Trash2 } from 'lucide-react';
import { useBusinesses, useUpdateBusiness, useDeleteBusiness } from '../../hooks/usePlatform';
import { PlatformBusiness, verifyUserEmail } from '../../api/platform';
import TenantInviteModal from './components/TenantInviteModal';
import { getBaseDomain } from '../../utils/domain';
@@ -28,6 +28,10 @@ const PlatformBusinesses: React.FC<PlatformBusinessesProps> = ({ onMasquerade })
const [showInactiveBusinesses, setShowInactiveBusinesses] = useState(false);
const [verifyEmailUser, setVerifyEmailUser] = useState<{ id: number; email: string; name: string } | null>(null);
const [isVerifying, setIsVerifying] = useState(false);
const [deletingBusiness, setDeletingBusiness] = useState<PlatformBusiness | null>(null);
// Mutations
const deleteBusinessMutation = useDeleteBusiness();
// Filter and separate businesses
const filteredBusinesses = (businesses || []).filter(b =>
@@ -69,6 +73,17 @@ const PlatformBusinesses: React.FC<PlatformBusinessesProps> = ({ onMasquerade })
}
};
const handleDeleteConfirm = async () => {
if (!deletingBusiness) return;
try {
await deleteBusinessMutation.mutateAsync(deletingBusiness.id);
setDeletingBusiness(null);
} catch (error) {
alert(t('errors.generic'));
}
};
// Helper to render business row
const renderBusinessRow = (business: PlatformBusiness) => (
<PlatformListRow
@@ -98,10 +113,10 @@ const PlatformBusinesses: React.FC<PlatformBusinessesProps> = ({ onMasquerade })
<button
onClick={() => handleLoginAs(business)}
className="text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300 font-medium text-xs inline-flex items-center gap-1 px-3 py-1 border border-indigo-200 dark:border-indigo-800 rounded-lg hover:bg-indigo-50 dark:hover:bg-indigo-900/30 transition-colors"
title={`Masquerade as ${business.owner.email}`}
title={t('platform.masqueradeAs') + ' ' + business.owner.email}
>
<Eye size={14} />
Masquerade
{t('common.masquerade')}
</button>
)}
<button
@@ -111,6 +126,13 @@ const PlatformBusinesses: React.FC<PlatformBusinessesProps> = ({ onMasquerade })
>
<Pencil size={14} /> {t('common.edit')}
</button>
<button
onClick={() => setDeletingBusiness(business)}
className="text-red-600 hover:text-red-500 dark:text-red-400 dark:hover:text-red-300 font-medium text-xs inline-flex items-center gap-1 px-3 py-1 border border-red-200 dark:border-red-800 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/30 transition-colors"
title={t('common.delete')}
>
<Trash2 size={14} /> {t('common.delete')}
</button>
</>
}
/>
@@ -158,7 +180,7 @@ const PlatformBusinesses: React.FC<PlatformBusinessesProps> = ({ onMasquerade })
className="flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 font-medium shadow-sm"
>
<Send size={18} />
Invite Tenant
{t('platform.inviteTenant')}
</button>
}
emptyMessage={searchTerm ? t('platform.noBusinessesFound') : t('platform.noBusinesses')}
@@ -173,7 +195,7 @@ const PlatformBusinesses: React.FC<PlatformBusinessesProps> = ({ onMasquerade })
{showInactiveBusinesses ? <ChevronDown size={18} /> : <ChevronRight size={18} />}
<Building2 size={18} />
<span className="font-medium">
Inactive Businesses ({inactiveBusinesses.length})
{t('platform.inactiveBusinesses', { count: inactiveBusinesses.length })}
</span>
</div>
</button>
@@ -233,6 +255,33 @@ const PlatformBusinesses: React.FC<PlatformBusinessesProps> = ({ onMasquerade })
variant="success"
isLoading={isVerifying}
/>
<ConfirmationModal
isOpen={!!deletingBusiness}
onClose={() => setDeletingBusiness(null)}
onConfirm={handleDeleteConfirm}
title={t('platform.deleteTenant')}
message={
<div className="space-y-3">
<p>{t('platform.confirmDeleteTenantMessage')}</p>
{deletingBusiness && (
<div className="bg-red-50 dark:bg-red-900/20 rounded-lg p-3 border border-red-200 dark:border-red-800">
<p className="font-medium text-gray-900 dark:text-white">{deletingBusiness.name}</p>
<p className="text-sm text-gray-500 dark:text-gray-400">{deletingBusiness.subdomain}.smoothschedule.com</p>
{deletingBusiness.owner && (
<p className="text-sm text-gray-500 dark:text-gray-400">{deletingBusiness.owner.email}</p>
)}
</div>
)}
<p className="text-sm text-red-600 dark:text-red-400 font-medium">
{t('platform.deleteTenantWarning')}
</p>
</div>
}
confirmText={t('common.delete')}
cancelText={t('common.cancel')}
variant="danger"
isLoading={deleteBusinessMutation.isPending}
/>
</div>
);
};

22
frontend/src/pages/platform/PlatformSettings.tsx
View File

@@ -227,11 +227,11 @@ const GeneralSettingsTab: React.FC = () => {
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
<p className="text-sm font-medium text-gray-700 dark:text-gray-300">Mail Server</p>
<p className="text-sm font-medium text-gray-700 dark:text-gray-300">{t('platform.settings.mailServer')}</p>
<p className="text-lg font-semibold text-gray-900 dark:text-white">mail.talova.net</p>
</div>
<div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
<p className="text-sm font-medium text-gray-700 dark:text-gray-300">Email Domain</p>
<p className="text-sm font-medium text-gray-700 dark:text-gray-300">{t('platform.settings.emailDomain')}</p>
<p className="text-lg font-semibold text-gray-900 dark:text-white">smoothschedule.com</p>
</div>
</div>
@@ -282,7 +282,7 @@ const StripeSettingsTab: React.FC = () => {
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
<div className="flex items-center gap-2 text-red-700 dark:text-red-400">
<AlertCircle className="w-5 h-5" />
<span>Failed to load settings</span>
<span>{t('platform.settings.failedToLoadSettings')}</span>
</div>
</div>
);
@@ -294,7 +294,7 @@ const StripeSettingsTab: React.FC = () => {
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
<Shield className="w-5 h-5" />
Stripe Configuration Status
{t('platform.settings.stripeConfigStatus')}
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -319,7 +319,7 @@ const StripeSettingsTab: React.FC = () => {
<AlertCircle className="w-5 h-5 text-yellow-500" />
)}
<div>
<p className="text-sm font-medium text-gray-900 dark:text-white">Validation</p>
<p className="text-sm font-medium text-gray-900 dark:text-white">{t('platform.settings.validation')}</p>
<p className="text-xs text-gray-500 dark:text-gray-400">
{settings?.stripe_keys_validated_at
? `Validated ${new Date(settings.stripe_keys_validated_at).toLocaleDateString()}`
@@ -332,7 +332,7 @@ const StripeSettingsTab: React.FC = () => {
{settings?.stripe_account_id && (
<div className="mt-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
<p className="text-sm text-blue-700 dark:text-blue-400">
<span className="font-medium">Account ID:</span> {settings.stripe_account_id}
<span className="font-medium">{t('platform.settings.accountId')}:</span> {settings.stripe_account_id}
{settings.stripe_account_name && (
<span className="ml-2">({settings.stripe_account_name})</span>
)}
@@ -357,19 +357,19 @@ const StripeSettingsTab: React.FC = () => {
<div className="space-y-3">
<div className="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
<span className="text-sm text-gray-600 dark:text-gray-400">Secret Key</span>
<span className="text-sm text-gray-600 dark:text-gray-400">{t('platform.settings.secretKey')}</span>
<code className="text-sm font-mono text-gray-900 dark:text-white">
{settings?.stripe_secret_key_masked || 'Not configured'}
</code>
</div>
<div className="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
<span className="text-sm text-gray-600 dark:text-gray-400">Publishable Key</span>
<span className="text-sm text-gray-600 dark:text-gray-400">{t('platform.settings.publishableKey')}</span>
<code className="text-sm font-mono text-gray-900 dark:text-white">
{settings?.stripe_publishable_key_masked || 'Not configured'}
</code>
</div>
<div className="flex justify-between items-center py-2">
<span className="text-sm text-gray-600 dark:text-gray-400">Webhook Secret</span>
<span className="text-sm text-gray-600 dark:text-gray-400">{t('platform.settings.webhookSecret')}</span>
<code className="text-sm font-mono text-gray-900 dark:text-white">
{settings?.stripe_webhook_secret_masked || 'Not configured'}
</code>
@@ -637,7 +637,7 @@ const TiersSettingsTab: React.FC = () => {
{/* Base Plans */}
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
<div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
<h3 className="font-medium text-gray-900 dark:text-white">Base Tiers</h3>
<h3 className="font-medium text-gray-900 dark:text-white">{t('platform.settings.baseTiers')}</h3>
</div>
<div className="divide-y divide-gray-200 dark:divide-gray-700">
{basePlans.length === 0 ? (
@@ -660,7 +660,7 @@ const TiersSettingsTab: React.FC = () => {
{/* Add-on Plans */}
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
<div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
<h3 className="font-medium text-gray-900 dark:text-white">Add-ons</h3>
<h3 className="font-medium text-gray-900 dark:text-white">{t('platform.settings.addOns')}</h3>
</div>
<div className="divide-y divide-gray-200 dark:divide-gray-700">
{addonPlans.length === 0 ? (

28
frontend/src/pages/settings/BookingSettings.tsx
View File

@@ -34,7 +34,7 @@ const BookingSettings: React.FC = () => {
setShowToast(true);
setTimeout(() => setShowToast(false), 3000);
} catch (error) {
alert('Failed to save return URL');
alert(t('settings.booking.failedToSaveReturnUrl', 'Failed to save return URL'));
} finally {
setReturnUrlSaving(false);
}
@@ -44,7 +44,7 @@ const BookingSettings: React.FC = () => {
return (
<div className="text-center py-12">
<p className="text-gray-500 dark:text-gray-400">
Only the business owner can access these settings.
{t('settings.booking.onlyOwnerCanAccess', 'Only the business owner can access these settings.')}
</p>
</div>
);
@@ -59,17 +59,17 @@ const BookingSettings: React.FC = () => {
{t('settings.booking.title', 'Booking')}
</h2>
<p className="text-gray-500 dark:text-gray-400 mt-1">
Configure your booking page URL and customer redirect settings.
{t('settings.booking.description', 'Configure your booking page URL and customer redirect settings')}
</p>
</div>
{/* Booking URL */}
<section className="bg-white dark:bg-gray-800 p-6 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
<Link2 size={20} className="text-brand-500" /> Your Booking URL
<Link2 size={20} className="text-brand-500" /> {t('settings.booking.yourBookingUrl', 'Your Booking URL')}
</h3>
<p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
Share this URL with your customers so they can book appointments with you.
{t('settings.booking.shareWithCustomers', 'Share this URL with your customers so they can book appointments with you.')}
</p>
<div className="flex items-center gap-3 p-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
<code className="flex-1 text-sm font-mono text-gray-900 dark:text-white">
@@ -82,7 +82,7 @@ const BookingSettings: React.FC = () => {
setTimeout(() => setShowToast(false), 2000);
}}
className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
title="Copy to clipboard"
title={t('settings.booking.copyToClipboard', 'Copy to clipboard')}
>
<Copy size={16} />
</button>
@@ -91,30 +91,30 @@ const BookingSettings: React.FC = () => {
target="_blank"
rel="noopener noreferrer"
className="p-2 text-brand-500 hover:text-brand-600 dark:hover:text-brand-400 transition-colors"
title="Open booking page"
title={t('settings.booking.openBookingPage', 'Open booking page')}
>
<ExternalLink size={16} />
</a>
</div>
<p className="mt-3 text-xs text-gray-500 dark:text-gray-400">
Want to use your own domain? Set up a <a href="/settings/custom-domains" className="text-brand-500 hover:underline">custom domain</a>.
{t('settings.booking.customDomainPrompt', 'Want to use your own domain? Set up a')} <a href="/settings/custom-domains" className="text-brand-500 hover:underline">{t('settings.booking.customDomain', 'custom domain')}</a>.
</p>
</section>
{/* Return URL - Where to redirect customers after booking */}
<section className="bg-white dark:bg-gray-800 p-6 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2 flex items-center gap-2">
<ExternalLink size={20} className="text-green-500" /> Return URL
<ExternalLink size={20} className="text-green-500" /> {t('settings.booking.returnUrl', 'Return URL')}
</h3>
<p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
After a customer completes a booking, redirect them to this URL (e.g., a thank you page on your website).
{t('settings.booking.returnUrlDescription', 'After a customer completes a booking, redirect them to this URL (e.g., a thank you page on your website).')}
</p>
<div className="flex gap-2">
<input
type="url"
value={returnUrl}
onChange={(e) => setReturnUrl(e.target.value)}
placeholder="https://yourbusiness.com/thank-you"
placeholder={t('settings.booking.returnUrlPlaceholder', 'https://yourbusiness.com/thank-you')}
className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white rounded-lg focus:ring-2 focus:ring-brand-500 text-sm"
/>
<button
@@ -123,11 +123,11 @@ const BookingSettings: React.FC = () => {
className="inline-flex items-center gap-2 px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium text-sm"
>
<Save size={16} />
{returnUrlSaving ? 'Saving...' : 'Save'}
{returnUrlSaving ? t('settings.booking.saving', 'Saving...') : t('settings.booking.save', 'Save')}
</button>
</div>
<p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
Leave empty to keep customers on the booking confirmation page.
{t('settings.booking.leaveEmpty', 'Leave empty to keep customers on the booking confirmation page.')}
</p>
</section>
@@ -135,7 +135,7 @@ const BookingSettings: React.FC = () => {
{showToast && (
<div className="fixed bottom-4 right-4 flex items-center gap-2 px-4 py-3 bg-green-500 text-white rounded-lg shadow-lg">
<CheckCircle size={18} />
Copied to clipboard
{t('settings.booking.copiedToClipboard', 'Copied to clipboard')}
</div>
)}
</div>