Fix Staff page and reorganize help documentation
- Fix missing StaffPermissions import in Staff.tsx - Make Invite Staff modal wider (max-w-2xl) and scrollable - Reorganize help page content to match sidebar menu order: - Move Staff section before Customers - Move Contracts section before Time Blocks - Update TOC to match new navigation structure 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
poduck
@@ -37,6 +37,7 @@ import {
|
||||
ArrowUpDown,
|
||||
} from 'lucide-react';
|
||||
import Portal from '../components/Portal';
|
||||
import StaffPermissions from '../components/StaffPermissions';
|
||||
|
||||
interface StaffProps {
|
||||
onMasquerade: (user: User) => void;
|
||||
@@ -604,8 +605,8 @@ const Staff: React.FC<StaffProps> = ({ onMasquerade, effectiveUser }) => {
|
||||
{isInviteModalOpen && (
|
||||
<Portal>
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
|
||||
<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">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] flex flex-col overflow-hidden">
|
||||
<div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center shrink-0">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">{t('staff.inviteStaff')}</h3>
|
||||
<button
|
||||
onClick={() => setIsInviteModalOpen(false)}
|
||||
@@ -615,7 +616,7 @@ const Staff: React.FC<StaffProps> = ({ onMasquerade, effectiveUser }) => {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleInviteSubmit} className="p-6 space-y-4">
|
||||
<form onSubmit={handleInviteSubmit} className="p-6 space-y-4 overflow-y-auto flex-1">
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{t('staff.inviteDescription')}
|
||||
</p>
|
||||
|
||||
@@ -35,8 +35,9 @@ const HelpComprehensive: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const [expandedItems, setExpandedItems] = React.useState<string[]>(['getting-started', 'settings']);
|
||||
|
||||
// Table of contents items with sub-items
|
||||
// Table of contents items with sub-items - organized to match sidebar menu
|
||||
const tocItems: TocItem[] = [
|
||||
// Getting Started - Quick setup guide
|
||||
{
|
||||
id: 'getting-started',
|
||||
label: t('helpComprehensive.toc.gettingStarted'),
|
||||
@@ -49,37 +50,48 @@ const HelpComprehensive: React.FC = () => {
|
||||
{ label: t('helpComprehensive.toc.scheduler'), href: '/help/scheduler' },
|
||||
],
|
||||
},
|
||||
// Analytics section
|
||||
{ id: 'dashboard', label: t('helpComprehensive.toc.dashboard'), icon: <LayoutDashboard size={16} /> },
|
||||
// Manage section
|
||||
{ id: 'scheduler', label: t('helpComprehensive.toc.scheduler'), icon: <Calendar size={16} /> },
|
||||
{ id: 'services', label: t('helpComprehensive.toc.services'), icon: <Briefcase size={16} /> },
|
||||
{ id: 'resources', label: t('helpComprehensive.toc.resources'), icon: <ClipboardList size={16} /> },
|
||||
{ id: 'customers', label: t('helpComprehensive.toc.customers'), icon: <Users size={16} /> },
|
||||
{ id: 'staff', label: t('helpComprehensive.toc.staff'), icon: <UserCog size={16} /> },
|
||||
{ id: 'time-blocks', label: t('helpComprehensive.toc.timeBlocks'), icon: <CalendarOff size={16} /> },
|
||||
{ id: 'locations', label: 'Locations', icon: <MapPin size={16} /> },
|
||||
{ id: 'site-builder', label: 'Site Builder', icon: <Layers size={16} /> },
|
||||
{ id: 'automations', label: 'Automations', icon: <Workflow size={16} /> },
|
||||
{ id: 'customers', label: t('helpComprehensive.toc.customers'), icon: <Users size={16} /> },
|
||||
{ id: 'contracts', label: t('helpComprehensive.toc.contracts'), icon: <FileSignature size={16} /> },
|
||||
{ id: 'api', label: 'API', icon: <Code size={16} /> },
|
||||
{ id: 'time-blocks', label: t('helpComprehensive.toc.timeBlocks'), icon: <CalendarOff size={16} /> },
|
||||
// Extend section
|
||||
{ id: 'automations', label: 'Automations', icon: <Workflow size={16} /> },
|
||||
// Settings section (organized by accordion groups)
|
||||
{
|
||||
id: 'settings',
|
||||
label: t('helpComprehensive.toc.settings'),
|
||||
icon: <Settings size={16} />,
|
||||
subItems: [
|
||||
// Business settings
|
||||
{ label: t('helpComprehensive.toc.resourceTypes'), href: '/help/settings/resource-types' },
|
||||
{ label: t('helpComprehensive.toc.emailSettings'), href: '/help/settings/email' },
|
||||
{ label: t('helpComprehensive.toc.customDomains'), href: '/help/settings/domains' },
|
||||
{ label: t('helpComprehensive.toc.billing'), href: '/help/settings/billing' },
|
||||
{ label: t('helpComprehensive.toc.apiSettings'), href: '/help/settings/api' },
|
||||
{ label: t('helpComprehensive.toc.authentication'), href: '/help/settings/auth' },
|
||||
{ label: t('helpComprehensive.toc.usageQuota'), href: '/help/settings/quota' },
|
||||
{ label: 'Business Hours', href: '/help/settings/business-hours' },
|
||||
{ label: t('helpComprehensive.toc.servicesSetup'), href: '/help/services' },
|
||||
{ label: 'Locations', href: '/help/locations' },
|
||||
// Branding settings
|
||||
{ label: t('helpComprehensive.toc.branding'), href: '/help/settings/appearance' },
|
||||
{ label: 'Email Templates', href: '/help/settings/email-templates' },
|
||||
{ label: t('helpComprehensive.toc.customDomains'), href: '/help/settings/domains' },
|
||||
{ label: 'Embed Widget', href: '/help/settings/embed-widget' },
|
||||
{ label: 'Site Builder', href: '/help/site-builder' },
|
||||
// Integrations
|
||||
{ label: t('helpComprehensive.toc.apiSettings'), href: '/help/settings/api' },
|
||||
// Access
|
||||
{ label: 'Staff Roles', href: '/help/settings/staff-roles' },
|
||||
{ label: t('helpComprehensive.toc.authentication'), href: '/help/settings/auth' },
|
||||
// Communication
|
||||
{ label: t('helpComprehensive.toc.emailSettings'), href: '/help/settings/email' },
|
||||
{ label: 'SMS & Calling', href: '/help/settings/communication' },
|
||||
// Billing
|
||||
{ label: t('helpComprehensive.toc.billing'), href: '/help/settings/billing' },
|
||||
{ label: t('helpComprehensive.toc.usageQuota'), href: '/help/settings/quota' },
|
||||
],
|
||||
},
|
||||
{ id: 'api', label: 'API', icon: <Code size={16} /> },
|
||||
];
|
||||
|
||||
const scrollToSection = (id: string) => {
|
||||
@@ -505,6 +517,63 @@ const HelpComprehensive: React.FC = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ============================================== */}
|
||||
{/* STAFF */}
|
||||
{/* ============================================== */}
|
||||
<section id="staff" className="mb-16 scroll-mt-24">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-lg bg-teal-100 dark:bg-teal-900/30 flex items-center justify-center">
|
||||
<UserCog size={20} className="text-teal-600 dark:text-teal-400" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('helpComprehensive.staff.title')}</h2>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
|
||||
<p className="text-gray-600 dark:text-gray-300 mb-4">
|
||||
{t('helpComprehensive.staff.description')}
|
||||
</p>
|
||||
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.staff.staffRoles')}</h3>
|
||||
<div className="space-y-3 mb-6">
|
||||
<div className="flex items-start gap-3 p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
|
||||
<Shield size={18} className="text-yellow-600 mt-0.5" />
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.staff.ownerRole')}</h4>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.staff.ownerRoleDesc')}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
|
||||
<Shield size={18} className="text-blue-600 mt-0.5" />
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.staff.managerRole')}</h4>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.staff.managerRoleDesc')}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3 p-3 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
|
||||
<Shield size={18} className="text-green-600 mt-0.5" />
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.staff.staffRole')}</h4>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.staff.staffRoleDesc')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.staff.invitingStaff')}</h3>
|
||||
<ol className="space-y-2 text-sm text-gray-600 dark:text-gray-300 list-decimal list-inside mb-6">
|
||||
<li>{t('helpComprehensive.staff.inviteStep1')}</li>
|
||||
<li>{t('helpComprehensive.staff.inviteStep2')}</li>
|
||||
<li>{t('helpComprehensive.staff.inviteStep3')}</li>
|
||||
<li>{t('helpComprehensive.staff.inviteStep4')}</li>
|
||||
<li>{t('helpComprehensive.staff.inviteStep5')}</li>
|
||||
</ol>
|
||||
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.staff.makeBookable')}</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300">
|
||||
{t('helpComprehensive.staff.makeBookableDesc')}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ============================================== */}
|
||||
{/* CUSTOMERS */}
|
||||
{/* ============================================== */}
|
||||
@@ -569,60 +638,140 @@ const HelpComprehensive: React.FC = () => {
|
||||
</section>
|
||||
|
||||
{/* ============================================== */}
|
||||
{/* STAFF */}
|
||||
{/* CONTRACTS */}
|
||||
{/* ============================================== */}
|
||||
<section id="staff" className="mb-16 scroll-mt-24">
|
||||
<section id="contracts" className="mb-16 scroll-mt-24">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-lg bg-teal-100 dark:bg-teal-900/30 flex items-center justify-center">
|
||||
<UserCog size={20} className="text-teal-600 dark:text-teal-400" />
|
||||
<div className="w-10 h-10 rounded-lg bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center">
|
||||
<FileSignature size={20} className="text-emerald-600 dark:text-emerald-400" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('helpComprehensive.staff.title')}</h2>
|
||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('helpComprehensive.contracts.title')}</h2>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
|
||||
<p className="text-gray-600 dark:text-gray-300 mb-4">
|
||||
{t('helpComprehensive.staff.description')}
|
||||
{t('helpComprehensive.contracts.description')}
|
||||
</p>
|
||||
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.staff.staffRoles')}</h3>
|
||||
<div className="space-y-3 mb-6">
|
||||
<div className="flex items-start gap-3 p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
|
||||
<Shield size={18} className="text-yellow-600 mt-0.5" />
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.staff.ownerRole')}</h4>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.staff.ownerRoleDesc')}</p>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.contracts.contractTemplates')}</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
|
||||
{t('helpComprehensive.contracts.templatesDesc')}
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
||||
<div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.contracts.templateProperties')}</h4>
|
||||
<ul className="text-xs text-gray-500 dark:text-gray-400 mt-2 space-y-1">
|
||||
<li>• <strong>{t('helpComprehensive.contracts.templateNameProp')}</strong> {t('helpComprehensive.contracts.templateNamePropDesc')}</li>
|
||||
<li>• <strong>{t('helpComprehensive.contracts.templateContentProp')}</strong> {t('helpComprehensive.contracts.templateContentPropDesc')}</li>
|
||||
<li>• <strong>{t('helpComprehensive.contracts.templateScopeProp')}</strong> {t('helpComprehensive.contracts.templateScopePropDesc')}</li>
|
||||
<li>• <strong>{t('helpComprehensive.contracts.templateExpirationProp')}</strong> {t('helpComprehensive.contracts.templateExpirationPropDesc')}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex items-start gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
|
||||
<Shield size={18} className="text-blue-600 mt-0.5" />
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.staff.managerRole')}</h4>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.staff.managerRoleDesc')}</p>
|
||||
</div>
|
||||
<div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.contracts.availableVariables')}</h4>
|
||||
<ul className="text-xs text-gray-500 dark:text-gray-400 mt-2 space-y-1">
|
||||
<li>• <code className="bg-gray-200 dark:bg-gray-600 px-1 rounded">{'{{CUSTOMER_NAME}}'}</code></li>
|
||||
<li>• <code className="bg-gray-200 dark:bg-gray-600 px-1 rounded">{'{{CUSTOMER_EMAIL}}'}</code></li>
|
||||
<li>• <code className="bg-gray-200 dark:bg-gray-600 px-1 rounded">{'{{BUSINESS_NAME}}'}</code></li>
|
||||
<li>• <code className="bg-gray-200 dark:bg-gray-600 px-1 rounded">{'{{DATE}}'}</code> and <code className="bg-gray-200 dark:bg-gray-600 px-1 rounded">{'{{YEAR}}'}</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex items-start gap-3 p-3 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
|
||||
<Shield size={18} className="text-green-600 mt-0.5" />
|
||||
</div>
|
||||
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.contracts.contractWorkflow')}</h3>
|
||||
<ol className="space-y-3 mb-6">
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-600 text-white text-xs flex items-center justify-center font-medium">1</span>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.staff.staffRole')}</h4>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.staff.staffRoleDesc')}</p>
|
||||
<span className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.contracts.workflowStep1Title')}</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.contracts.workflowStep1Desc')}</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-600 text-white text-xs flex items-center justify-center font-medium">2</span>
|
||||
<div>
|
||||
<span className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.contracts.workflowStep2Title')}</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.contracts.workflowStep2Desc')}</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-600 text-white text-xs flex items-center justify-center font-medium">3</span>
|
||||
<div>
|
||||
<span className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.contracts.workflowStep3Title')}</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.contracts.workflowStep3Desc')}</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-600 text-white text-xs flex items-center justify-center font-medium">4</span>
|
||||
<div>
|
||||
<span className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.contracts.workflowStep4Title')}</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.contracts.workflowStep4Desc')}</p>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.contracts.contractStatuses')}</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
|
||||
<div className="p-2 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg text-center">
|
||||
<span className="text-sm font-medium text-yellow-700 dark:text-yellow-300">{t('helpComprehensive.contracts.pendingStatus')}</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{t('helpComprehensive.contracts.pendingStatusDesc')}</p>
|
||||
</div>
|
||||
<div className="p-2 bg-green-50 dark:bg-green-900/20 rounded-lg text-center">
|
||||
<span className="text-sm font-medium text-green-700 dark:text-green-300">{t('helpComprehensive.contracts.signedStatus')}</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{t('helpComprehensive.contracts.signedStatusDesc')}</p>
|
||||
</div>
|
||||
<div className="p-2 bg-red-50 dark:bg-red-900/20 rounded-lg text-center">
|
||||
<span className="text-sm font-medium text-red-700 dark:text-red-300">{t('helpComprehensive.contracts.expiredStatus')}</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{t('helpComprehensive.contracts.expiredStatusDesc')}</p>
|
||||
</div>
|
||||
<div className="p-2 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
|
||||
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">{t('helpComprehensive.contracts.voidedStatus')}</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{t('helpComprehensive.contracts.voidedStatusDesc')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.contracts.legalCompliance')}</h3>
|
||||
<div className="bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-800 rounded-lg p-4 mb-6">
|
||||
<div className="flex items-start gap-3">
|
||||
<Shield size={20} className="text-emerald-600 mt-0.5 flex-shrink-0" />
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white text-sm mb-1">{t('helpComprehensive.contracts.complianceTitle')}</h4>
|
||||
<p className="text-xs text-gray-600 dark:text-gray-300">
|
||||
{t('helpComprehensive.contracts.complianceDesc')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.staff.invitingStaff')}</h3>
|
||||
<ol className="space-y-2 text-sm text-gray-600 dark:text-gray-300 list-decimal list-inside mb-6">
|
||||
<li>{t('helpComprehensive.staff.inviteStep1')}</li>
|
||||
<li>{t('helpComprehensive.staff.inviteStep2')}</li>
|
||||
<li>{t('helpComprehensive.staff.inviteStep3')}</li>
|
||||
<li>{t('helpComprehensive.staff.inviteStep4')}</li>
|
||||
<li>{t('helpComprehensive.staff.inviteStep5')}</li>
|
||||
</ol>
|
||||
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.staff.makeBookable')}</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300">
|
||||
{t('helpComprehensive.staff.makeBookableDesc')}
|
||||
</p>
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.contracts.keyFeatures')}</h3>
|
||||
<ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
|
||||
<li className="flex items-center gap-2">
|
||||
<Send size={16} className="text-emerald-500" />
|
||||
<span><strong>{t('helpComprehensive.contracts.emailDeliveryFeature')}</strong> {t('helpComprehensive.contracts.emailDeliveryDesc')}</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<LinkIcon size={16} className="text-emerald-500" />
|
||||
<span><strong>{t('helpComprehensive.contracts.shareableLinksFeature')}</strong> {t('helpComprehensive.contracts.shareableLinksDesc')}</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Download size={16} className="text-emerald-500" />
|
||||
<span><strong>{t('helpComprehensive.contracts.pdfDownloadFeature')}</strong> {t('helpComprehensive.contracts.pdfDownloadDesc')}</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Eye size={16} className="text-emerald-500" />
|
||||
<span><strong>{t('helpComprehensive.contracts.statusTrackingFeature')}</strong> {t('helpComprehensive.contracts.statusTrackingDesc')}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Link to="/dashboard/help/contracts" onClick={scrollToTop} className="flex items-center gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
|
||||
<FileSignature size={24} className="text-emerald-500" />
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">{t('helpComprehensive.contracts.contractsDocumentation')}</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">{t('helpComprehensive.contracts.contractsDocumentationDesc')}</p>
|
||||
</div>
|
||||
<ChevronRight size={20} className="text-gray-400 ml-auto" />
|
||||
</Link>
|
||||
</section>
|
||||
|
||||
{/* ============================================== */}
|
||||
@@ -969,143 +1118,6 @@ const HelpComprehensive: React.FC = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ============================================== */}
|
||||
{/* CONTRACTS */}
|
||||
{/* ============================================== */}
|
||||
<section id="contracts" className="mb-16 scroll-mt-24">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-lg bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center">
|
||||
<FileSignature size={20} className="text-emerald-600 dark:text-emerald-400" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('helpComprehensive.contracts.title')}</h2>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
|
||||
<p className="text-gray-600 dark:text-gray-300 mb-4">
|
||||
{t('helpComprehensive.contracts.description')}
|
||||
</p>
|
||||
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.contracts.contractTemplates')}</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
|
||||
{t('helpComprehensive.contracts.templatesDesc')}
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
||||
<div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.contracts.templateProperties')}</h4>
|
||||
<ul className="text-xs text-gray-500 dark:text-gray-400 mt-2 space-y-1">
|
||||
<li>• <strong>{t('helpComprehensive.contracts.templateNameProp')}</strong> {t('helpComprehensive.contracts.templateNamePropDesc')}</li>
|
||||
<li>• <strong>{t('helpComprehensive.contracts.templateContentProp')}</strong> {t('helpComprehensive.contracts.templateContentPropDesc')}</li>
|
||||
<li>• <strong>{t('helpComprehensive.contracts.templateScopeProp')}</strong> {t('helpComprehensive.contracts.templateScopePropDesc')}</li>
|
||||
<li>• <strong>{t('helpComprehensive.contracts.templateExpirationProp')}</strong> {t('helpComprehensive.contracts.templateExpirationPropDesc')}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.contracts.availableVariables')}</h4>
|
||||
<ul className="text-xs text-gray-500 dark:text-gray-400 mt-2 space-y-1">
|
||||
<li>• <code className="bg-gray-200 dark:bg-gray-600 px-1 rounded">{'{{CUSTOMER_NAME}}'}</code></li>
|
||||
<li>• <code className="bg-gray-200 dark:bg-gray-600 px-1 rounded">{'{{CUSTOMER_EMAIL}}'}</code></li>
|
||||
<li>• <code className="bg-gray-200 dark:bg-gray-600 px-1 rounded">{'{{BUSINESS_NAME}}'}</code></li>
|
||||
<li>• <code className="bg-gray-200 dark:bg-gray-600 px-1 rounded">{'{{DATE}}'}</code> and <code className="bg-gray-200 dark:bg-gray-600 px-1 rounded">{'{{YEAR}}'}</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.contracts.contractWorkflow')}</h3>
|
||||
<ol className="space-y-3 mb-6">
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-600 text-white text-xs flex items-center justify-center font-medium">1</span>
|
||||
<div>
|
||||
<span className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.contracts.workflowStep1Title')}</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.contracts.workflowStep1Desc')}</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-600 text-white text-xs flex items-center justify-center font-medium">2</span>
|
||||
<div>
|
||||
<span className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.contracts.workflowStep2Title')}</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.contracts.workflowStep2Desc')}</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-600 text-white text-xs flex items-center justify-center font-medium">3</span>
|
||||
<div>
|
||||
<span className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.contracts.workflowStep3Title')}</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.contracts.workflowStep3Desc')}</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-600 text-white text-xs flex items-center justify-center font-medium">4</span>
|
||||
<div>
|
||||
<span className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.contracts.workflowStep4Title')}</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.contracts.workflowStep4Desc')}</p>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.contracts.contractStatuses')}</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
|
||||
<div className="p-2 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg text-center">
|
||||
<span className="text-sm font-medium text-yellow-700 dark:text-yellow-300">{t('helpComprehensive.contracts.pendingStatus')}</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{t('helpComprehensive.contracts.pendingStatusDesc')}</p>
|
||||
</div>
|
||||
<div className="p-2 bg-green-50 dark:bg-green-900/20 rounded-lg text-center">
|
||||
<span className="text-sm font-medium text-green-700 dark:text-green-300">{t('helpComprehensive.contracts.signedStatus')}</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{t('helpComprehensive.contracts.signedStatusDesc')}</p>
|
||||
</div>
|
||||
<div className="p-2 bg-red-50 dark:bg-red-900/20 rounded-lg text-center">
|
||||
<span className="text-sm font-medium text-red-700 dark:text-red-300">{t('helpComprehensive.contracts.expiredStatus')}</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{t('helpComprehensive.contracts.expiredStatusDesc')}</p>
|
||||
</div>
|
||||
<div className="p-2 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
|
||||
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">{t('helpComprehensive.contracts.voidedStatus')}</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{t('helpComprehensive.contracts.voidedStatusDesc')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.contracts.legalCompliance')}</h3>
|
||||
<div className="bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-800 rounded-lg p-4 mb-6">
|
||||
<div className="flex items-start gap-3">
|
||||
<Shield size={20} className="text-emerald-600 mt-0.5 flex-shrink-0" />
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white text-sm mb-1">{t('helpComprehensive.contracts.complianceTitle')}</h4>
|
||||
<p className="text-xs text-gray-600 dark:text-gray-300">
|
||||
{t('helpComprehensive.contracts.complianceDesc')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.contracts.keyFeatures')}</h3>
|
||||
<ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
|
||||
<li className="flex items-center gap-2">
|
||||
<Send size={16} className="text-emerald-500" />
|
||||
<span><strong>{t('helpComprehensive.contracts.emailDeliveryFeature')}</strong> {t('helpComprehensive.contracts.emailDeliveryDesc')}</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<LinkIcon size={16} className="text-emerald-500" />
|
||||
<span><strong>{t('helpComprehensive.contracts.shareableLinksFeature')}</strong> {t('helpComprehensive.contracts.shareableLinksDesc')}</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Download size={16} className="text-emerald-500" />
|
||||
<span><strong>{t('helpComprehensive.contracts.pdfDownloadFeature')}</strong> {t('helpComprehensive.contracts.pdfDownloadDesc')}</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Eye size={16} className="text-emerald-500" />
|
||||
<span><strong>{t('helpComprehensive.contracts.statusTrackingFeature')}</strong> {t('helpComprehensive.contracts.statusTrackingDesc')}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Link to="/dashboard/help/contracts" onClick={scrollToTop} className="flex items-center gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
|
||||
<FileSignature size={24} className="text-emerald-500" />
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">{t('helpComprehensive.contracts.contractsDocumentation')}</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">{t('helpComprehensive.contracts.contractsDocumentationDesc')}</p>
|
||||
</div>
|
||||
<ChevronRight size={20} className="text-gray-400 ml-auto" />
|
||||
</Link>
|
||||
</section>
|
||||
|
||||
{/* ============================================== */}
|
||||
{/* API DOCUMENTATION */}
|
||||
{/* ============================================== */}
|
||||
|
||||
Reference in New Issue
Block a user