Add missing frontend platform components and update production deployment
This commit adds all previously untracked files and modifications needed for production deployment: - New marketing components (BenefitsSection, CodeBlock, PluginShowcase, PricingTable) - Platform admin components (EditPlatformEntityModal, PlatformListRow, PlatformListing, PlatformTable) - Updated deployment configuration and scripts - Various frontend API and component improvements 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
poduck
@@ -1,170 +1,161 @@
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
Calendar,
|
||||
Users,
|
||||
CreditCard,
|
||||
Building2,
|
||||
Palette,
|
||||
BarChart3,
|
||||
Plug,
|
||||
UserCircle,
|
||||
Bell,
|
||||
Zap,
|
||||
Shield,
|
||||
Smartphone,
|
||||
Clock,
|
||||
Code,
|
||||
Server,
|
||||
Database,
|
||||
Lock,
|
||||
CheckCircle2
|
||||
} from 'lucide-react';
|
||||
import FeatureCard from '../../components/marketing/FeatureCard';
|
||||
import CodeBlock from '../../components/marketing/CodeBlock';
|
||||
import CTASection from '../../components/marketing/CTASection';
|
||||
|
||||
const FeaturesPage: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const featureCategories = [
|
||||
{
|
||||
title: 'Scheduling & Calendar',
|
||||
features: [
|
||||
{
|
||||
icon: Calendar,
|
||||
titleKey: 'marketing.features.scheduling.title',
|
||||
descriptionKey: 'marketing.features.scheduling.description',
|
||||
color: 'brand',
|
||||
},
|
||||
{
|
||||
icon: Clock,
|
||||
title: 'Real-Time Availability',
|
||||
description: 'Customers see only available time slots. No double bookings, ever.',
|
||||
color: 'green',
|
||||
},
|
||||
{
|
||||
icon: Bell,
|
||||
title: 'Automated Reminders',
|
||||
description: 'Reduce no-shows with email and SMS reminders sent automatically.',
|
||||
color: 'purple',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Resource Management',
|
||||
features: [
|
||||
{
|
||||
icon: Users,
|
||||
titleKey: 'marketing.features.resources.title',
|
||||
descriptionKey: 'marketing.features.resources.description',
|
||||
color: 'orange',
|
||||
},
|
||||
{
|
||||
icon: Smartphone,
|
||||
title: 'Staff Mobile App',
|
||||
description: 'Your team can view schedules and manage appointments on the go.',
|
||||
color: 'pink',
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: 'Role-Based Access',
|
||||
description: 'Control what each team member can see and do with granular permissions.',
|
||||
color: 'cyan',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Customer Experience',
|
||||
features: [
|
||||
{
|
||||
icon: UserCircle,
|
||||
titleKey: 'marketing.features.customers.title',
|
||||
descriptionKey: 'marketing.features.customers.description',
|
||||
color: 'brand',
|
||||
},
|
||||
{
|
||||
icon: CreditCard,
|
||||
titleKey: 'marketing.features.payments.title',
|
||||
descriptionKey: 'marketing.features.payments.description',
|
||||
color: 'green',
|
||||
},
|
||||
{
|
||||
icon: Palette,
|
||||
titleKey: 'marketing.features.whiteLabel.title',
|
||||
descriptionKey: 'marketing.features.whiteLabel.description',
|
||||
color: 'purple',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Business Growth',
|
||||
features: [
|
||||
{
|
||||
icon: Building2,
|
||||
titleKey: 'marketing.features.multiTenant.title',
|
||||
descriptionKey: 'marketing.features.multiTenant.description',
|
||||
color: 'orange',
|
||||
},
|
||||
{
|
||||
icon: BarChart3,
|
||||
titleKey: 'marketing.features.analytics.title',
|
||||
descriptionKey: 'marketing.features.analytics.description',
|
||||
color: 'pink',
|
||||
},
|
||||
{
|
||||
icon: Plug,
|
||||
titleKey: 'marketing.features.integrations.title',
|
||||
descriptionKey: 'marketing.features.integrations.description',
|
||||
color: 'cyan',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
const pluginExample = `# Custom Webhook Plugin
|
||||
import requests
|
||||
|
||||
def execute(context):
|
||||
event = context['event']
|
||||
|
||||
# Send data to external CRM
|
||||
response = requests.post(
|
||||
'https://api.crm.com/leads',
|
||||
json={
|
||||
'name': event.customer.name,
|
||||
'email': event.customer.email,
|
||||
'source': 'SmoothSchedule'
|
||||
}
|
||||
)
|
||||
|
||||
return response.status_code == 200`;
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Header Section */}
|
||||
<section className="py-20 lg:py-28 bg-gradient-to-br from-white via-brand-50/30 to-white dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
|
||||
<div className="bg-white dark:bg-gray-900 min-h-screen pt-24">
|
||||
|
||||
{/* Header */}
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center mb-20">
|
||||
<h1 className="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-6">
|
||||
Built for Developers, Designed for Business
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">
|
||||
SmoothSchedule isn't just cloud software. It's a programmable platform that adapts to your unique business logic.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 1: The Automation Engine */}
|
||||
<section className="py-20 bg-gray-50 dark:bg-gray-800/50">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-16">
|
||||
<h1 className="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
{t('marketing.features.title')}
|
||||
</h1>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
||||
{t('marketing.features.subtitle')}
|
||||
</p>
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div>
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 text-sm font-medium mb-6">
|
||||
<Zap className="w-4 h-4" />
|
||||
<span>Automation Engine</span>
|
||||
</div>
|
||||
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6">
|
||||
Automated Task Manager
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400 mb-8">
|
||||
Most schedulers only book appointments. SmoothSchedule runs your business.
|
||||
Our "Automated Task Manager" executes internal tasks without blocking your calendar.
|
||||
</p>
|
||||
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
'Run recurring jobs (e.g., "Every Monday at 9am")',
|
||||
'Execute custom logic securely',
|
||||
'Access full customer and event context',
|
||||
'Zero infrastructure management'
|
||||
].map((item) => (
|
||||
<li key={item} className="flex items-center gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-green-500" />
|
||||
<span className="text-gray-700 dark:text-gray-300">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<div className="absolute -inset-4 bg-purple-500/20 rounded-3xl blur-2xl" />
|
||||
<CodeBlock code={pluginExample} filename="webhook_plugin.py" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Feature Categories */}
|
||||
{featureCategories.map((category, categoryIndex) => (
|
||||
<section
|
||||
key={categoryIndex}
|
||||
className={`py-20 ${
|
||||
categoryIndex % 2 === 0
|
||||
? 'bg-white dark:bg-gray-900'
|
||||
: 'bg-gray-50 dark:bg-gray-800/50'
|
||||
}`}
|
||||
>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-10 text-center">
|
||||
{category.title}
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
|
||||
{category.features.map((feature, featureIndex) => (
|
||||
<FeatureCard
|
||||
key={featureIndex}
|
||||
icon={feature.icon}
|
||||
title={feature.titleKey ? t(feature.titleKey) : feature.title || ''}
|
||||
description={
|
||||
feature.descriptionKey
|
||||
? t(feature.descriptionKey)
|
||||
: feature.description || ''
|
||||
}
|
||||
iconColor={feature.color}
|
||||
/>
|
||||
))}
|
||||
{/* Feature 2: Multi-Tenancy */}
|
||||
<section className="py-20">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center lg:flex-row-reverse">
|
||||
<div className="order-2 lg:order-1">
|
||||
<div className="relative rounded-2xl bg-gray-900 border border-gray-800 p-8 overflow-hidden">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="p-4 bg-gray-800 rounded-lg border border-gray-700">
|
||||
<Database className="w-8 h-8 text-blue-400 mb-3" />
|
||||
<div className="text-sm font-mono text-gray-400">tenant_a_vault</div>
|
||||
<div className="h-2 w-16 bg-blue-500/20 rounded mt-2" />
|
||||
<div className="h-2 w-12 bg-blue-500/20 rounded mt-1" />
|
||||
</div>
|
||||
<div className="p-4 bg-gray-800 rounded-lg border border-gray-700">
|
||||
<Database className="w-8 h-8 text-green-400 mb-3" />
|
||||
<div className="text-sm font-mono text-gray-400">tenant_b_vault</div>
|
||||
<div className="h-2 w-16 bg-green-500/20 rounded mt-2" />
|
||||
<div className="h-2 w-12 bg-green-500/20 rounded mt-1" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-8 flex items-center justify-center gap-4 text-gray-500 text-sm">
|
||||
<Lock className="w-4 h-4" />
|
||||
<span>Strict Data Isolation</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="order-1 lg:order-2">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 text-sm font-medium mb-6">
|
||||
<Shield className="w-4 h-4" />
|
||||
<span>Enterprise Security</span>
|
||||
</div>
|
||||
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6">
|
||||
True Data Isolation
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400 mb-8">
|
||||
We don't just filter your data. We use dedicated secure vaults to physically
|
||||
separate your data from others. This provides the security of a private
|
||||
database with the cost-efficiency of cloud software.
|
||||
</p>
|
||||
|
||||
<div className="grid sm:grid-cols-2 gap-6">
|
||||
<div className="flex gap-4">
|
||||
<div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg text-blue-600 dark:text-blue-400 h-fit">
|
||||
<Server className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white mb-1">Custom Domains</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
Serve the app on your own domain (e.g., `schedule.yourbrand.com`).
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<div className="p-2 bg-green-100 dark:bg-green-900/30 rounded-lg text-green-600 dark:text-green-400 h-fit">
|
||||
<Code className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white mb-1">White Labeling</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
Remove our branding and make the platform your own.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<CTASection />
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,21 +1,17 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
Calendar,
|
||||
Users,
|
||||
CreditCard,
|
||||
Building2,
|
||||
Palette,
|
||||
BarChart3,
|
||||
Plug,
|
||||
UserCircle,
|
||||
ArrowRight,
|
||||
Zap,
|
||||
Globe
|
||||
} from 'lucide-react';
|
||||
import Hero from '../../components/marketing/Hero';
|
||||
import FeatureCard from '../../components/marketing/FeatureCard';
|
||||
import HowItWorks from '../../components/marketing/HowItWorks';
|
||||
import StatsSection from '../../components/marketing/StatsSection';
|
||||
import PluginShowcase from '../../components/marketing/PluginShowcase';
|
||||
import BenefitsSection from '../../components/marketing/BenefitsSection';
|
||||
import TestimonialCard from '../../components/marketing/TestimonialCard';
|
||||
import CTASection from '../../components/marketing/CTASection';
|
||||
|
||||
@@ -25,142 +21,115 @@ const HomePage: React.FC = () => {
|
||||
const features = [
|
||||
{
|
||||
icon: Calendar,
|
||||
titleKey: 'marketing.features.scheduling.title',
|
||||
descriptionKey: 'marketing.features.scheduling.description',
|
||||
title: 'Intelligent Scheduling',
|
||||
description: 'Handle complex resources like staff, rooms, and equipment with concurrency limits.',
|
||||
color: 'brand',
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
titleKey: 'marketing.features.resources.title',
|
||||
descriptionKey: 'marketing.features.resources.description',
|
||||
color: 'green',
|
||||
},
|
||||
{
|
||||
icon: UserCircle,
|
||||
titleKey: 'marketing.features.customers.title',
|
||||
descriptionKey: 'marketing.features.customers.description',
|
||||
icon: Zap,
|
||||
title: 'Automation Engine',
|
||||
description: 'Install plugins from our marketplace or build your own to automate tasks.',
|
||||
color: 'purple',
|
||||
},
|
||||
{
|
||||
icon: Globe,
|
||||
title: 'Multi-Tenant Architecture',
|
||||
description: 'Dedicated secure vaults for enterprise-grade security and white-labeling.',
|
||||
color: 'green',
|
||||
},
|
||||
{
|
||||
icon: CreditCard,
|
||||
titleKey: 'marketing.features.payments.title',
|
||||
descriptionKey: 'marketing.features.payments.description',
|
||||
title: 'Integrated Payments',
|
||||
description: 'Seamlessly accept payments with Stripe integration and automated invoicing.',
|
||||
color: 'orange',
|
||||
},
|
||||
{
|
||||
icon: Building2,
|
||||
titleKey: 'marketing.features.multiTenant.title',
|
||||
descriptionKey: 'marketing.features.multiTenant.description',
|
||||
icon: Users,
|
||||
title: 'Customer Management',
|
||||
description: 'CRM features to track history, preferences, and engagement.',
|
||||
color: 'pink',
|
||||
},
|
||||
{
|
||||
icon: Palette,
|
||||
titleKey: 'marketing.features.whiteLabel.title',
|
||||
descriptionKey: 'marketing.features.whiteLabel.description',
|
||||
color: 'cyan',
|
||||
},
|
||||
{
|
||||
icon: BarChart3,
|
||||
titleKey: 'marketing.features.analytics.title',
|
||||
descriptionKey: 'marketing.features.analytics.description',
|
||||
title: 'Advanced Analytics',
|
||||
description: 'Deep insights into revenue, utilization, and staff performance.',
|
||||
color: 'indigo',
|
||||
},
|
||||
{
|
||||
icon: Plug,
|
||||
titleKey: 'marketing.features.integrations.title',
|
||||
descriptionKey: 'marketing.features.integrations.description',
|
||||
color: 'teal',
|
||||
},
|
||||
];
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
quote: "SmoothSchedule transformed how we manage appointments. Our no-show rate dropped by 40% with automated reminders.",
|
||||
author: "Sarah Johnson",
|
||||
quote: "I installed the 'Client Win-Back' plugin and recovered $2k in bookings the first week. No setup required.",
|
||||
author: "Alex Rivera",
|
||||
role: "Owner",
|
||||
company: "Luxe Salon",
|
||||
company: "TechSalon",
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
quote: "The white-label feature is perfect for our multi-location business. Each location has its own branded booking experience.",
|
||||
author: "Michael Chen",
|
||||
role: "CEO",
|
||||
company: "FitLife Studios",
|
||||
quote: "Finally, a scheduler that understands 'rooms' and 'equipment' are different from 'staff'. Perfect for our medical spa.",
|
||||
author: "Dr. Sarah Chen",
|
||||
role: "Owner",
|
||||
company: "Lumina MedSpa",
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
quote: "Setup was incredibly easy. We were up and running in under an hour, and our clients love the self-service booking.",
|
||||
author: "Emily Rodriguez",
|
||||
role: "Manager",
|
||||
company: "Peak Performance Therapy",
|
||||
quote: "We white-labeled SmoothSchedule for our franchise. The multi-tenant architecture made it effortless.",
|
||||
author: "Marcus Johnson",
|
||||
role: "Director of Ops",
|
||||
company: "FitNation",
|
||||
rating: 5,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Hero Section */}
|
||||
{/* Hero Section - Updated Copy */}
|
||||
<Hero />
|
||||
|
||||
{/* Features Section */}
|
||||
{/* Feature Grid */}
|
||||
<section className="py-20 lg:py-28 bg-white dark:bg-gray-900">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
{t('marketing.features.title')}
|
||||
The Operating System for Service Businesses
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
||||
{t('marketing.features.subtitle')}
|
||||
More than just a calendar. A complete platform engineered for growth, automation, and scale.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature Grid */}
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
|
||||
{features.map((feature) => (
|
||||
<FeatureCard
|
||||
key={feature.titleKey}
|
||||
key={feature.title}
|
||||
icon={feature.icon}
|
||||
title={t(feature.titleKey)}
|
||||
description={t(feature.descriptionKey)}
|
||||
title={feature.title}
|
||||
description={feature.description}
|
||||
iconColor={feature.color}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* View All Features Link */}
|
||||
<div className="text-center mt-12">
|
||||
<Link
|
||||
to="/features"
|
||||
className="inline-flex items-center gap-2 text-brand-600 dark:text-brand-400 font-medium hover:text-brand-700 dark:hover:text-brand-300 transition-colors"
|
||||
>
|
||||
{t('common.viewAll')} {t('marketing.nav.features').toLowerCase()}
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* How It Works Section */}
|
||||
<HowItWorks />
|
||||
{/* Plugin Showcase - NEW */}
|
||||
<PluginShowcase />
|
||||
|
||||
{/* Stats Section */}
|
||||
<StatsSection />
|
||||
{/* Benefits Section (Replaces Stats) */}
|
||||
<BenefitsSection />
|
||||
|
||||
{/* Testimonials Section */}
|
||||
<section className="py-20 lg:py-28 bg-gray-50 dark:bg-gray-800/50">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
{t('marketing.testimonials.title')}
|
||||
Trusted by Modern Businesses
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400">
|
||||
{t('marketing.testimonials.subtitle')}
|
||||
See why forward-thinking companies choose SmoothSchedule.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Testimonials Grid */}
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
|
||||
{testimonials.map((testimonial, index) => (
|
||||
<TestimonialCard key={index} {...testimonial} />
|
||||
@@ -169,98 +138,6 @@ const HomePage: React.FC = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Pricing Preview Section */}
|
||||
<section className="py-20 lg:py-28 bg-white dark:bg-gray-900">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
{t('marketing.pricing.title')}
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400">
|
||||
{t('marketing.pricing.subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Pricing Cards Preview */}
|
||||
<div className="grid md:grid-cols-3 gap-6 lg:gap-8 max-w-5xl mx-auto">
|
||||
{/* Free */}
|
||||
<div className="p-6 bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||||
{t('marketing.pricing.tiers.free.name')}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
|
||||
{t('marketing.pricing.tiers.free.description')}
|
||||
</p>
|
||||
<div className="mb-6">
|
||||
<span className="text-4xl font-bold text-gray-900 dark:text-white">$0</span>
|
||||
<span className="text-gray-500 dark:text-gray-400">{t('marketing.pricing.perMonth')}</span>
|
||||
</div>
|
||||
<Link
|
||||
to="/signup"
|
||||
className="block w-full py-3 px-4 text-center text-sm font-medium text-brand-600 bg-brand-50 dark:bg-brand-900/30 rounded-lg hover:bg-brand-100 dark:hover:bg-brand-900/50 transition-colors"
|
||||
>
|
||||
{t('marketing.pricing.getStarted')}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Professional - Highlighted */}
|
||||
<div className="relative p-6 bg-brand-600 rounded-2xl shadow-xl shadow-brand-600/20">
|
||||
<div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 bg-brand-500 text-white text-xs font-semibold rounded-full">
|
||||
{t('marketing.pricing.mostPopular')}
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-white mb-2">
|
||||
{t('marketing.pricing.tiers.professional.name')}
|
||||
</h3>
|
||||
<p className="text-sm text-brand-100 mb-4">
|
||||
{t('marketing.pricing.tiers.professional.description')}
|
||||
</p>
|
||||
<div className="mb-6">
|
||||
<span className="text-4xl font-bold text-white">$29</span>
|
||||
<span className="text-brand-200">{t('marketing.pricing.perMonth')}</span>
|
||||
</div>
|
||||
<Link
|
||||
to="/signup"
|
||||
className="block w-full py-3 px-4 text-center text-sm font-medium text-brand-600 bg-white rounded-lg hover:bg-brand-50 transition-colors"
|
||||
>
|
||||
{t('marketing.pricing.getStarted')}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Business */}
|
||||
<div className="p-6 bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||||
{t('marketing.pricing.tiers.business.name')}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
|
||||
{t('marketing.pricing.tiers.business.description')}
|
||||
</p>
|
||||
<div className="mb-6">
|
||||
<span className="text-4xl font-bold text-gray-900 dark:text-white">$79</span>
|
||||
<span className="text-gray-500 dark:text-gray-400">{t('marketing.pricing.perMonth')}</span>
|
||||
</div>
|
||||
<Link
|
||||
to="/signup"
|
||||
className="block w-full py-3 px-4 text-center text-sm font-medium text-brand-600 bg-brand-50 dark:bg-brand-900/30 rounded-lg hover:bg-brand-100 dark:hover:bg-brand-900/50 transition-colors"
|
||||
>
|
||||
{t('marketing.pricing.getStarted')}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* View Full Pricing Link */}
|
||||
<div className="text-center mt-10">
|
||||
<Link
|
||||
to="/pricing"
|
||||
className="inline-flex items-center gap-2 text-brand-600 dark:text-brand-400 font-medium hover:text-brand-700 dark:hover:text-brand-300 transition-colors"
|
||||
>
|
||||
View full pricing details
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Final CTA */}
|
||||
<CTASection />
|
||||
</div>
|
||||
|
||||
@@ -1,122 +1,56 @@
|
||||
import React, { useState } from 'react';
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import PricingCard from '../../components/marketing/PricingCard';
|
||||
import PricingTable from '../../components/marketing/PricingTable';
|
||||
import FAQAccordion from '../../components/marketing/FAQAccordion';
|
||||
import CTASection from '../../components/marketing/CTASection';
|
||||
|
||||
const PricingPage: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const [billingPeriod, setBillingPeriod] = useState<'monthly' | 'annual'>('monthly');
|
||||
|
||||
const faqItems = [
|
||||
{
|
||||
question: t('marketing.faq.questions.freePlan.question'),
|
||||
answer: t('marketing.faq.questions.freePlan.answer'),
|
||||
},
|
||||
{
|
||||
question: t('marketing.faq.questions.cancel.question'),
|
||||
answer: t('marketing.faq.questions.cancel.answer'),
|
||||
},
|
||||
{
|
||||
question: t('marketing.faq.questions.payment.question'),
|
||||
answer: t('marketing.faq.questions.payment.answer'),
|
||||
},
|
||||
{
|
||||
question: t('marketing.faq.questions.migrate.question'),
|
||||
answer: t('marketing.faq.questions.migrate.answer'),
|
||||
},
|
||||
{
|
||||
question: t('marketing.faq.questions.support.question'),
|
||||
answer: t('marketing.faq.questions.support.answer'),
|
||||
},
|
||||
{
|
||||
question: t('marketing.faq.questions.customDomain.question'),
|
||||
answer: t('marketing.faq.questions.customDomain.answer'),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Header Section */}
|
||||
<section className="py-20 lg:py-28 bg-gradient-to-br from-white via-brand-50/30 to-white dark:from-gray-900 dark:via-gray-900 dark:to-gray-900">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
{t('marketing.pricing.title')}
|
||||
</h1>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
||||
{t('marketing.pricing.subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-gray-50 dark:bg-gray-900 min-h-screen">
|
||||
{/* Header */}
|
||||
<div className="pt-24 pb-12 text-center px-4 sm:px-6 lg:px-8">
|
||||
<h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
Simple, Transparent Pricing
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
||||
Start for free, upgrade as you grow. No hidden fees.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Billing Toggle */}
|
||||
<div className="flex flex-wrap items-center justify-center gap-3 mb-12">
|
||||
<div className="flex items-center gap-3">
|
||||
<span
|
||||
className={`text-sm font-medium whitespace-nowrap transition-colors ${
|
||||
billingPeriod === 'monthly'
|
||||
? 'text-gray-900 dark:text-white'
|
||||
: 'text-gray-500 dark:text-gray-400'
|
||||
}`}
|
||||
>
|
||||
{t('marketing.pricing.monthly')}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setBillingPeriod(billingPeriod === 'monthly' ? 'annual' : 'monthly')}
|
||||
className="relative flex-shrink-0 w-12 h-6 bg-brand-600 rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
|
||||
aria-label="Toggle billing period"
|
||||
>
|
||||
<span
|
||||
className={`absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform duration-200 ${
|
||||
billingPeriod === 'annual' ? 'translate-x-6' : 'translate-x-0'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
<span
|
||||
className={`text-sm font-medium whitespace-nowrap transition-colors ${
|
||||
billingPeriod === 'annual'
|
||||
? 'text-gray-900 dark:text-white'
|
||||
: 'text-gray-500 dark:text-gray-400'
|
||||
}`}
|
||||
>
|
||||
{t('marketing.pricing.annual')}
|
||||
</span>
|
||||
</div>
|
||||
{billingPeriod === 'annual' && (
|
||||
<span className="px-2 py-1 text-xs font-semibold text-brand-700 bg-brand-100 dark:bg-brand-900/30 dark:text-brand-300 rounded-full whitespace-nowrap">
|
||||
{t('marketing.pricing.annualSave')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Pricing Cards */}
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
|
||||
<PricingCard tier="free" billingPeriod={billingPeriod} />
|
||||
<PricingCard tier="professional" billingPeriod={billingPeriod} highlighted />
|
||||
<PricingCard tier="business" billingPeriod={billingPeriod} />
|
||||
<PricingCard tier="enterprise" billingPeriod={billingPeriod} />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Pricing Table */}
|
||||
<div className="pb-20">
|
||||
<PricingTable />
|
||||
</div>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<section className="py-20 lg:py-28 bg-gray-50 dark:bg-gray-800/50">
|
||||
<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
{t('marketing.faq.title')}
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400">
|
||||
{t('marketing.faq.subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 pb-20">
|
||||
<h2 className="text-3xl font-bold text-center text-gray-900 dark:text-white mb-12">
|
||||
Frequently Asked Questions
|
||||
</h2>
|
||||
<FAQAccordion items={[
|
||||
{
|
||||
question: "Do I need to know Python to use SmoothSchedule?",
|
||||
answer: "Not at all! You can use our pre-built plugins from the marketplace for common tasks like email reminders and reports. Python is only needed if you want to write custom scripts."
|
||||
},
|
||||
{
|
||||
question: "What happens if I exceed my plan's limits?",
|
||||
answer: "We'll notify you when you're close to your limit. If you exceed it, we'll give you a grace period to upgrade. We won't cut off your service immediately."
|
||||
},
|
||||
{
|
||||
question: "Can I use my own domain name?",
|
||||
answer: "Yes! On the Pro and Business plans, you can connect your own custom domain (e.g., booking.yourcompany.com) for a fully branded experience."
|
||||
},
|
||||
{
|
||||
question: "Is my data safe?",
|
||||
answer: "Absolutely. We use dedicated secure vaults (Postgres schemas) to physically isolate your data from other customers. It's the gold standard for multi-tenant security."
|
||||
}
|
||||
]} />
|
||||
</div>
|
||||
|
||||
<FAQAccordion items={faqItems} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<CTASection variant="minimal" />
|
||||
{/* CTA */}
|
||||
<CTASection />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -317,7 +317,7 @@ const SignupPage: React.FC = () => {
|
||||
{t('marketing.signup.success.yourUrl')}
|
||||
</p>
|
||||
<p className="text-lg font-semibold text-brand-600 dark:text-brand-400">
|
||||
{formData.subdomain}.smoothschedule.com
|
||||
{formData.subdomain}.{getBaseDomain()}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
|
||||
@@ -357,13 +357,12 @@ const SignupPage: React.FC = () => {
|
||||
<React.Fragment key={step.number}>
|
||||
<div className="flex flex-col items-center">
|
||||
<div
|
||||
className={`w-12 h-12 rounded-full flex items-center justify-center transition-colors ${
|
||||
currentStep > step.number
|
||||
className={`w-12 h-12 rounded-full flex items-center justify-center transition-colors ${currentStep > step.number
|
||||
? 'bg-green-500 text-white'
|
||||
: currentStep === step.number
|
||||
? 'bg-brand-600 text-white'
|
||||
: 'bg-gray-200 dark:bg-gray-700 text-gray-400'
|
||||
}`}
|
||||
? 'bg-brand-600 text-white'
|
||||
: 'bg-gray-200 dark:bg-gray-700 text-gray-400'
|
||||
}`}
|
||||
>
|
||||
{currentStep > step.number ? (
|
||||
<Check className="w-6 h-6" />
|
||||
@@ -372,22 +371,20 @@ const SignupPage: React.FC = () => {
|
||||
)}
|
||||
</div>
|
||||
<span
|
||||
className={`mt-2 text-xs font-medium hidden sm:block ${
|
||||
currentStep >= step.number
|
||||
className={`mt-2 text-xs font-medium hidden sm:block ${currentStep >= step.number
|
||||
? 'text-gray-900 dark:text-white'
|
||||
: 'text-gray-400'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
{step.title}
|
||||
</span>
|
||||
</div>
|
||||
{index < steps.length - 1 && (
|
||||
<div
|
||||
className={`flex-1 h-1 mx-2 rounded ${
|
||||
currentStep > step.number
|
||||
className={`flex-1 h-1 mx-2 rounded ${currentStep > step.number
|
||||
? 'bg-green-500'
|
||||
: 'bg-gray-200 dark:bg-gray-700'
|
||||
}`}
|
||||
}`}
|
||||
/>
|
||||
)}
|
||||
</React.Fragment>
|
||||
@@ -419,11 +416,10 @@ const SignupPage: React.FC = () => {
|
||||
onChange={handleInputChange}
|
||||
autoComplete="organization"
|
||||
placeholder={t('marketing.signup.businessInfo.namePlaceholder')}
|
||||
className={`w-full px-4 py-3 rounded-xl border ${
|
||||
errors.businessName
|
||||
className={`w-full px-4 py-3 rounded-xl border ${errors.businessName
|
||||
? 'border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 dark:border-gray-600 focus:ring-brand-500'
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
/>
|
||||
{errors.businessName && (
|
||||
<p className="mt-1 text-sm text-red-500">{errors.businessName}</p>
|
||||
@@ -446,13 +442,12 @@ const SignupPage: React.FC = () => {
|
||||
onChange={handleSubdomainChange}
|
||||
autoComplete="off"
|
||||
placeholder="your-business"
|
||||
className={`flex-1 px-4 py-3 rounded-l-xl border-y border-l ${
|
||||
errors.subdomain
|
||||
className={`flex-1 px-4 py-3 rounded-l-xl border-y border-l ${errors.subdomain
|
||||
? 'border-red-500 focus:ring-red-500'
|
||||
: subdomainAvailable === true
|
||||
? 'border-green-500 focus:ring-green-500'
|
||||
: 'border-gray-300 dark:border-gray-600 focus:ring-brand-500'
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
? 'border-green-500 focus:ring-green-500'
|
||||
: 'border-gray-300 dark:border-gray-600 focus:ring-brand-500'
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
/>
|
||||
<span className="px-4 py-3 bg-gray-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-600 rounded-r-xl text-gray-500 dark:text-gray-400 text-sm">
|
||||
.smoothschedule.com
|
||||
@@ -508,11 +503,10 @@ const SignupPage: React.FC = () => {
|
||||
onChange={handleInputChange}
|
||||
autoComplete="address-line1"
|
||||
placeholder={t('marketing.signup.businessInfo.addressLine1Placeholder')}
|
||||
className={`w-full px-4 py-3 rounded-xl border ${
|
||||
errors.addressLine1
|
||||
className={`w-full px-4 py-3 rounded-xl border ${errors.addressLine1
|
||||
? 'border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 dark:border-gray-600 focus:ring-brand-500'
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
/>
|
||||
{errors.addressLine1 && (
|
||||
<p className="mt-1 text-sm text-red-500">{errors.addressLine1}</p>
|
||||
@@ -553,11 +547,10 @@ const SignupPage: React.FC = () => {
|
||||
value={formData.city}
|
||||
onChange={handleInputChange}
|
||||
autoComplete="address-level2"
|
||||
className={`w-full px-4 py-3 rounded-xl border ${
|
||||
errors.city
|
||||
className={`w-full px-4 py-3 rounded-xl border ${errors.city
|
||||
? 'border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 dark:border-gray-600 focus:ring-brand-500'
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
/>
|
||||
{errors.city && (
|
||||
<p className="mt-1 text-sm text-red-500">{errors.city}</p>
|
||||
@@ -578,11 +571,10 @@ const SignupPage: React.FC = () => {
|
||||
value={formData.state}
|
||||
onChange={handleInputChange}
|
||||
autoComplete="address-level1"
|
||||
className={`w-full px-4 py-3 rounded-xl border ${
|
||||
errors.state
|
||||
className={`w-full px-4 py-3 rounded-xl border ${errors.state
|
||||
? 'border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 dark:border-gray-600 focus:ring-brand-500'
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
/>
|
||||
{errors.state && (
|
||||
<p className="mt-1 text-sm text-red-500">{errors.state}</p>
|
||||
@@ -605,11 +597,10 @@ const SignupPage: React.FC = () => {
|
||||
value={formData.postalCode}
|
||||
onChange={handleInputChange}
|
||||
autoComplete="postal-code"
|
||||
className={`w-full px-4 py-3 rounded-xl border ${
|
||||
errors.postalCode
|
||||
className={`w-full px-4 py-3 rounded-xl border ${errors.postalCode
|
||||
? 'border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 dark:border-gray-600 focus:ring-brand-500'
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
/>
|
||||
{errors.postalCode && (
|
||||
<p className="mt-1 text-sm text-red-500">{errors.postalCode}</p>
|
||||
@@ -663,11 +654,10 @@ const SignupPage: React.FC = () => {
|
||||
value={formData.firstName}
|
||||
onChange={handleInputChange}
|
||||
autoComplete="given-name"
|
||||
className={`w-full px-4 py-3 rounded-xl border ${
|
||||
errors.firstName
|
||||
className={`w-full px-4 py-3 rounded-xl border ${errors.firstName
|
||||
? 'border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 dark:border-gray-600 focus:ring-brand-500'
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
/>
|
||||
{errors.firstName && (
|
||||
<p className="mt-1 text-sm text-red-500">{errors.firstName}</p>
|
||||
@@ -688,11 +678,10 @@ const SignupPage: React.FC = () => {
|
||||
value={formData.lastName}
|
||||
onChange={handleInputChange}
|
||||
autoComplete="family-name"
|
||||
className={`w-full px-4 py-3 rounded-xl border ${
|
||||
errors.lastName
|
||||
className={`w-full px-4 py-3 rounded-xl border ${errors.lastName
|
||||
? 'border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 dark:border-gray-600 focus:ring-brand-500'
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
/>
|
||||
{errors.lastName && (
|
||||
<p className="mt-1 text-sm text-red-500">{errors.lastName}</p>
|
||||
@@ -715,11 +704,10 @@ const SignupPage: React.FC = () => {
|
||||
onChange={handleInputChange}
|
||||
autoComplete="email"
|
||||
placeholder="you@example.com"
|
||||
className={`w-full px-4 py-3 rounded-xl border ${
|
||||
errors.email
|
||||
className={`w-full px-4 py-3 rounded-xl border ${errors.email
|
||||
? 'border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 dark:border-gray-600 focus:ring-brand-500'
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
/>
|
||||
{errors.email && (
|
||||
<p className="mt-1 text-sm text-red-500">{errors.email}</p>
|
||||
@@ -740,11 +728,10 @@ const SignupPage: React.FC = () => {
|
||||
value={formData.password}
|
||||
onChange={handleInputChange}
|
||||
autoComplete="new-password"
|
||||
className={`w-full px-4 py-3 rounded-xl border ${
|
||||
errors.password
|
||||
className={`w-full px-4 py-3 rounded-xl border ${errors.password
|
||||
? 'border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 dark:border-gray-600 focus:ring-brand-500'
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
/>
|
||||
{errors.password && (
|
||||
<p className="mt-1 text-sm text-red-500">{errors.password}</p>
|
||||
@@ -765,11 +752,10 @@ const SignupPage: React.FC = () => {
|
||||
value={formData.confirmPassword}
|
||||
onChange={handleInputChange}
|
||||
autoComplete="new-password"
|
||||
className={`w-full px-4 py-3 rounded-xl border ${
|
||||
errors.confirmPassword
|
||||
className={`w-full px-4 py-3 rounded-xl border ${errors.confirmPassword
|
||||
? 'border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 dark:border-gray-600 focus:ring-brand-500'
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
} bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:border-transparent transition-colors`}
|
||||
/>
|
||||
{errors.confirmPassword && (
|
||||
<p className="mt-1 text-sm text-red-500">{errors.confirmPassword}</p>
|
||||
@@ -791,11 +777,10 @@ const SignupPage: React.FC = () => {
|
||||
key={plan.id}
|
||||
type="button"
|
||||
onClick={() => setFormData((prev) => ({ ...prev, plan: plan.id }))}
|
||||
className={`relative text-left p-4 rounded-xl border-2 transition-all ${
|
||||
formData.plan === plan.id
|
||||
className={`relative text-left p-4 rounded-xl border-2 transition-all ${formData.plan === plan.id
|
||||
? 'border-brand-600 bg-brand-50 dark:bg-gray-800 dark:border-brand-500'
|
||||
: 'border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800/50 hover:border-gray-300 dark:hover:border-gray-600'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
{plan.popular && (
|
||||
<span className="absolute -top-3 left-4 px-2 py-0.5 text-xs font-semibold text-white bg-brand-600 rounded-full">
|
||||
@@ -817,11 +802,10 @@ const SignupPage: React.FC = () => {
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${
|
||||
formData.plan === plan.id
|
||||
className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${formData.plan === plan.id
|
||||
? 'border-brand-600 bg-brand-600'
|
||||
: 'border-gray-300 dark:border-gray-600'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
{formData.plan === plan.id && (
|
||||
<Check className="w-3 h-3 text-white" />
|
||||
|
||||
@@ -1,11 +1,15 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Search, Filter, Eye, ShieldCheck, Ban, Pencil, Send, ChevronDown, ChevronRight, Building2 } from 'lucide-react';
|
||||
import { useBusinesses } from '../../hooks/usePlatform';
|
||||
import { PlatformBusiness } from '../../api/platform';
|
||||
import { Eye, ShieldCheck, Ban, Pencil, Send, ChevronDown, ChevronRight, Building2, Check } from 'lucide-react';
|
||||
import { useBusinesses, useUpdateBusiness } from '../../hooks/usePlatform';
|
||||
import { PlatformBusiness, verifyUserEmail } from '../../api/platform';
|
||||
import TenantInviteModal from './components/TenantInviteModal';
|
||||
import BusinessEditModal from './components/BusinessEditModal';
|
||||
import { getBaseDomain } from '../../utils/domain';
|
||||
import PlatformListing from './components/PlatformListing';
|
||||
import PlatformTable from './components/PlatformTable';
|
||||
import PlatformListRow from './components/PlatformListRow';
|
||||
import EditPlatformEntityModal from './components/EditPlatformEntityModal';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
|
||||
interface PlatformBusinessesProps {
|
||||
onMasquerade: (targetUser: { id: number; username?: string; name?: string; email?: string; role?: string }) => void;
|
||||
@@ -13,6 +17,7 @@ interface PlatformBusinessesProps {
|
||||
|
||||
const PlatformBusinesses: React.FC<PlatformBusinessesProps> = ({ onMasquerade }) => {
|
||||
const { t } = useTranslation();
|
||||
const queryClient = useQueryClient();
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const { data: businesses, isLoading, error } = useBusinesses();
|
||||
|
||||
@@ -42,67 +47,58 @@ const PlatformBusinesses: React.FC<PlatformBusinessesProps> = ({ onMasquerade })
|
||||
}
|
||||
};
|
||||
|
||||
const handleVerifyEmail = async (userId: number) => {
|
||||
if (confirm(t('platform.confirmVerifyEmail'))) {
|
||||
try {
|
||||
await verifyUserEmail(userId);
|
||||
queryClient.invalidateQueries({ queryKey: ['platform', 'businesses'] });
|
||||
} catch (error) {
|
||||
alert(t('errors.generic'));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Helper to render business row
|
||||
const renderBusinessRow = (business: PlatformBusiness) => (
|
||||
<tr key={business.id} className="hover:bg-gray-50 dark:hover:bg-gray-900/50">
|
||||
<td className="px-6 py-4">
|
||||
<div className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{business.name}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{business.subdomain}.{getBaseDomain()}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 dark:bg-indigo-900/30 text-indigo-800 dark:text-indigo-300">
|
||||
{business.tier}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="text-sm text-gray-900 dark:text-white">
|
||||
{business.owner ? business.owner.full_name : '-'}
|
||||
</div>
|
||||
{business.owner && (
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">
|
||||
{business.owner.email}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
{business.is_active ? (
|
||||
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300">
|
||||
<ShieldCheck size={14} />
|
||||
{t('platform.active')}
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300">
|
||||
<Ban size={14} />
|
||||
{t('platform.inactive')}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right text-sm font-medium space-x-2">
|
||||
{business.owner && (
|
||||
<PlatformListRow
|
||||
key={business.id}
|
||||
avatarLetter={(business.owner?.username || business.name).charAt(0).toUpperCase()}
|
||||
primaryText={business.owner?.username || business.name}
|
||||
secondaryText={business.name}
|
||||
badgeText={business.tier || 'tenant owner'}
|
||||
badgeColor="bg-gray-100 text-gray-800"
|
||||
tertiaryText={business.owner?.email || '-'}
|
||||
actions={
|
||||
<>
|
||||
{business.owner && !business.owner.email_verified && ( // Assuming PlatformBusiness owner object has email_verified, if not we might need to fetch it or update interface
|
||||
<button
|
||||
onClick={() => handleVerifyEmail(business.owner!.id)}
|
||||
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"
|
||||
title={t('platform.verifyEmail')}
|
||||
>
|
||||
<Check size={14} /> {t('platform.verify')}
|
||||
</button>
|
||||
)}
|
||||
{business.owner && (
|
||||
<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}`}
|
||||
>
|
||||
<Eye size={14} />
|
||||
Masquerade
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => handleLoginAs(business)}
|
||||
onClick={() => setEditingBusiness(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('common.edit')}
|
||||
>
|
||||
<Eye size={14} />
|
||||
Masquerade
|
||||
<Pencil size={14} /> {t('common.edit')}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => setEditingBusiness(business)}
|
||||
className="inline-flex items-center gap-1 text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300"
|
||||
title={t('common.edit')}
|
||||
>
|
||||
<Pencil size={16} />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
);
|
||||
|
||||
if (isLoading) {
|
||||
@@ -123,139 +119,78 @@ const PlatformBusinesses: React.FC<PlatformBusinessesProps> = ({ onMasquerade })
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('platform.businesses')}</h2>
|
||||
<p className="text-gray-500 dark:text-gray-400">{t('platform.businessesDescription')}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowInviteModal(true)}
|
||||
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
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Search Bar */}
|
||||
<div className="flex items-center gap-4 bg-white dark:bg-gray-800 p-4 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
|
||||
<div className="relative flex-1">
|
||||
<Search size={20} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t('platform.searchBusinesses')}
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
<button className="flex items-center gap-2 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 font-medium">
|
||||
<Filter size={18} />
|
||||
{t('common.filters')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Business Table */}
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
{t('platform.businessName')}
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
{t('platform.subdomain')}
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
{t('platform.tier')}
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
{t('platform.owner')}
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
{t('platform.status')}
|
||||
</th>
|
||||
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
{t('common.actions')}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
{activeBusinesses.map(renderBusinessRow)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{activeBusinesses.length === 0 && inactiveBusinesses.length === 0 && (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-gray-500 dark:text-gray-400">
|
||||
{searchTerm ? t('platform.noBusinessesFound') : t('platform.noBusinesses')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Inactive Businesses Section */}
|
||||
{inactiveBusinesses.length > 0 && (
|
||||
<div className="bg-gray-100 dark:bg-gray-800/50 rounded-xl border border-gray-200 dark:border-gray-700">
|
||||
<PlatformListing
|
||||
title={t('platform.businesses')}
|
||||
description={t('platform.businessesDescription')}
|
||||
isLoading={isLoading}
|
||||
error={error}
|
||||
data={activeBusinesses}
|
||||
renderRow={renderBusinessRow}
|
||||
columns={[
|
||||
t('platform.businessName'), // Reusing label but mapping to Owner/Business Name column
|
||||
t('platform.tier'),
|
||||
t('platform.owner'), // Mapping to Email column
|
||||
t('common.actions')
|
||||
]}
|
||||
searchPlaceholder={t('platform.searchBusinesses')}
|
||||
searchTerm={searchTerm}
|
||||
onSearchChange={setSearchTerm}
|
||||
actionButton={
|
||||
<button
|
||||
onClick={() => setShowInactiveBusinesses(!showInactiveBusinesses)}
|
||||
className="w-full px-4 py-3 flex items-center justify-between text-left hover:bg-gray-200 dark:hover:bg-gray-700/50 rounded-xl transition-colors"
|
||||
onClick={() => setShowInviteModal(true)}
|
||||
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"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
|
||||
{showInactiveBusinesses ? <ChevronDown size={18} /> : <ChevronRight size={18} />}
|
||||
<Building2 size={18} />
|
||||
<span className="font-medium">
|
||||
Inactive Businesses ({inactiveBusinesses.length})
|
||||
</span>
|
||||
</div>
|
||||
<Send size={18} />
|
||||
Invite Tenant
|
||||
</button>
|
||||
}
|
||||
emptyMessage={searchTerm ? t('platform.noBusinessesFound') : t('platform.noBusinesses')}
|
||||
extraContent={
|
||||
inactiveBusinesses.length > 0 ? (
|
||||
<div className="bg-gray-100 dark:bg-gray-800/50 rounded-xl border border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
onClick={() => setShowInactiveBusinesses(!showInactiveBusinesses)}
|
||||
className="w-full px-4 py-3 flex items-center justify-between text-left hover:bg-gray-200 dark:hover:bg-gray-700/50 rounded-xl transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
|
||||
{showInactiveBusinesses ? <ChevronDown size={18} /> : <ChevronRight size={18} />}
|
||||
<Building2 size={18} />
|
||||
<span className="font-medium">
|
||||
Inactive Businesses ({inactiveBusinesses.length})
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{showInactiveBusinesses && (
|
||||
<div className="border-t border-gray-200 dark:border-gray-700">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
{t('platform.businessName')}
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
{t('platform.subdomain')}
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
{t('platform.tier')}
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
{t('platform.owner')}
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
{t('platform.status')}
|
||||
</th>
|
||||
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
{t('common.actions')}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
{inactiveBusinesses.map(renderBusinessRow)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{showInactiveBusinesses && (
|
||||
<div className="border-t border-gray-200 dark:border-gray-700">
|
||||
<PlatformTable
|
||||
data={inactiveBusinesses}
|
||||
columns={[
|
||||
t('platform.businessName'),
|
||||
t('platform.tier'),
|
||||
t('platform.owner'),
|
||||
t('common.actions')
|
||||
]}
|
||||
renderRow={renderBusinessRow}
|
||||
className=""
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Modals */}
|
||||
<TenantInviteModal
|
||||
isOpen={showInviteModal}
|
||||
onClose={() => setShowInviteModal(false)}
|
||||
/>
|
||||
<BusinessEditModal
|
||||
business={editingBusiness}
|
||||
<EditPlatformEntityModal
|
||||
entity={editingBusiness}
|
||||
type="business"
|
||||
isOpen={!!editingBusiness}
|
||||
onClose={() => setEditingBusiness(null)}
|
||||
/>
|
||||
|
||||
@@ -1,8 +1,12 @@
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Search, Filter, Eye, Shield, User as UserIcon } from 'lucide-react';
|
||||
import { Eye, Check, Pencil } from 'lucide-react';
|
||||
import { usePlatformUsers } from '../../hooks/usePlatform';
|
||||
import { verifyUserEmail, PlatformUser } from '../../api/platform';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import PlatformListing from './components/PlatformListing';
|
||||
import PlatformListRow from './components/PlatformListRow';
|
||||
import EditPlatformEntityModal from './components/EditPlatformEntityModal';
|
||||
|
||||
interface PlatformUsersProps {
|
||||
onMasquerade: (targetUser: { id: number; username?: string; name?: string; email?: string; role?: string }) => void;
|
||||
@@ -10,32 +14,34 @@ interface PlatformUsersProps {
|
||||
|
||||
const PlatformUsers: React.FC<PlatformUsersProps> = ({ onMasquerade }) => {
|
||||
const { t } = useTranslation();
|
||||
const queryClient = useQueryClient();
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [roleFilter, setRoleFilter] = useState<string>('all');
|
||||
const { data: users, isLoading, error } = usePlatformUsers();
|
||||
const [editingUser, setEditingUser] = useState<PlatformUser | null>(null);
|
||||
|
||||
const filteredUsers = (users || []).filter(u => {
|
||||
const isPlatformUser = ['superuser', 'platform_manager', 'platform_sales', 'platform_support'].includes(u.role);
|
||||
if (!isPlatformUser) return false;
|
||||
|
||||
const matchesSearch = (u.name || '').toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
u.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
u.username.toLowerCase().includes(searchTerm.toLowerCase());
|
||||
u.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
u.username.toLowerCase().includes(searchTerm.toLowerCase());
|
||||
const matchesRole = roleFilter === 'all' || u.role === roleFilter;
|
||||
return matchesSearch && matchesRole;
|
||||
});
|
||||
|
||||
const getRoleBadgeColor = (role: string) => {
|
||||
switch(role) {
|
||||
case 'superuser': return 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300';
|
||||
case 'platform_manager':
|
||||
case 'platform_support': return 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300';
|
||||
case 'owner': return 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300';
|
||||
case 'staff': return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300';
|
||||
case 'customer': return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300';
|
||||
default: return 'bg-gray-100 text-gray-800';
|
||||
switch (role) {
|
||||
case 'superuser': return 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300';
|
||||
case 'platform_manager': return 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300';
|
||||
case 'platform_sales': return 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300';
|
||||
case 'platform_support': return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300';
|
||||
default: return 'bg-gray-100 text-gray-800';
|
||||
}
|
||||
};
|
||||
|
||||
const handleMasquerade = (platformUser: any) => {
|
||||
// Pass user info to masquerade - we only need the id
|
||||
onMasquerade({
|
||||
id: platformUser.id,
|
||||
username: platformUser.username,
|
||||
@@ -45,111 +51,93 @@ const PlatformUsers: React.FC<PlatformUsersProps> = ({ onMasquerade }) => {
|
||||
});
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="text-gray-500 dark:text-gray-400">{t('common.loading')}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const handleVerifyEmail = async (userId: number) => {
|
||||
if (confirm(t('platform.confirmVerifyEmail'))) {
|
||||
try {
|
||||
await verifyUserEmail(userId);
|
||||
queryClient.invalidateQueries({ queryKey: ['platform', 'users'] });
|
||||
} catch (error) {
|
||||
alert(t('errors.generic'));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="text-red-500">{t('errors.generic')}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const renderRow = (u: PlatformUser) => (
|
||||
<PlatformListRow
|
||||
key={u.id}
|
||||
avatarLetter={(u.name || u.username).charAt(0).toUpperCase()}
|
||||
primaryText={u.name || u.username}
|
||||
secondaryText={u.business_name}
|
||||
badgeText={(u.role || 'customer').replace(/_/g, ' ')}
|
||||
badgeColor={getRoleBadgeColor(u.role || 'customer')}
|
||||
tertiaryText={
|
||||
<>
|
||||
{u.email}
|
||||
{u.email_verified && <span title="Verified"><Check size={12} className="text-green-500" /></span>}
|
||||
</>
|
||||
}
|
||||
actions={
|
||||
<>
|
||||
{!u.email_verified && (
|
||||
<button
|
||||
onClick={() => handleVerifyEmail(u.id)}
|
||||
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"
|
||||
title={t('platform.verifyEmail')}
|
||||
>
|
||||
<Check size={14} /> {t('platform.verify')}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => handleMasquerade(u)}
|
||||
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"
|
||||
disabled={u.is_superuser}
|
||||
title={u.is_superuser ? 'Cannot masquerade as superuser' : `Masquerade as ${u.name || u.username}`}
|
||||
>
|
||||
<Eye size={14} /> {t('platform.masquerade')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setEditingUser(u)}
|
||||
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={t('common.edit')}
|
||||
>
|
||||
<Pencil size={14} /> {t('common.edit')}
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('platform.userDirectory')}</h2>
|
||||
<p className="text-gray-500 dark:text-gray-400">{t('platform.userDirectoryDescription')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 bg-white dark:bg-gray-800 p-4 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t('platform.searchUsers')}
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
value={roleFilter}
|
||||
onChange={(e) => setRoleFilter(e.target.value)}
|
||||
className="px-4 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 text-gray-700 dark:text-gray-200"
|
||||
>
|
||||
<option value="all">{t('platform.allRoles')}</option>
|
||||
<option value="superuser">{t('platform.roles.superuser')}</option>
|
||||
<option value="platform_manager">{t('platform.roles.platformManager')}</option>
|
||||
<option value="owner">{t('platform.roles.businessOwner')}</option>
|
||||
<option value="staff">{t('platform.roles.staff')}</option>
|
||||
<option value="customer">{t('platform.roles.customer')}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden">
|
||||
<table className="w-full text-sm text-left">
|
||||
<thead className="text-xs text-gray-500 dark:text-gray-400 uppercase bg-gray-50 dark:bg-gray-900/50 border-b border-gray-200 dark:border-gray-700">
|
||||
<tr>
|
||||
<th className="px-6 py-4 font-medium">{t('platform.user')}</th>
|
||||
<th className="px-6 py-4 font-medium">{t('platform.role')}</th>
|
||||
<th className="px-6 py-4 font-medium">{t('platform.email')}</th>
|
||||
<th className="px-6 py-4 font-medium text-right">{t('common.actions')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100 dark:divide-gray-700">
|
||||
{filteredUsers.map((u) => (
|
||||
<tr key={u.id} className="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
|
||||
<td className="px-6 py-4 font-medium text-gray-900 dark:text-white">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center text-indigo-600 dark:text-indigo-300 font-semibold text-sm">
|
||||
{(u.name || u.username).charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<div>
|
||||
<div>{u.name || u.username}</div>
|
||||
{u.business_name && (
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">{u.business_name}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium capitalize ${getRoleBadgeColor(u.role || 'customer')}`}>
|
||||
{(u.role || 'customer').replace(/_/g, ' ')}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-gray-500 dark:text-gray-400 font-mono text-xs">
|
||||
{u.email}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<button
|
||||
onClick={() => handleMasquerade(u)}
|
||||
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"
|
||||
disabled={u.is_superuser}
|
||||
title={u.is_superuser ? 'Cannot masquerade as superuser' : `Masquerade as ${u.name || u.username}`}
|
||||
>
|
||||
<Eye size={14} /> {t('platform.masquerade')}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{filteredUsers.length === 0 && (
|
||||
<div className="p-8 text-center text-gray-500 dark:text-gray-400">
|
||||
{t('platform.noUsersFound')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<>
|
||||
<PlatformListing
|
||||
title={t('platform.userDirectory')}
|
||||
description={t('platform.userDirectoryDescription')}
|
||||
isLoading={isLoading}
|
||||
error={error}
|
||||
data={filteredUsers}
|
||||
renderRow={renderRow}
|
||||
columns={[t('platform.user'), t('platform.role'), t('platform.email'), t('common.actions')]}
|
||||
searchPlaceholder={t('platform.searchUsers')}
|
||||
searchTerm={searchTerm}
|
||||
onSearchChange={setSearchTerm}
|
||||
filterOptions={[
|
||||
{ value: 'all', label: t('platform.allRoles') },
|
||||
{ value: 'superuser', label: t('platform.roles.superuser') },
|
||||
{ value: 'platform_manager', label: t('platform.roles.platformManager') },
|
||||
{ value: 'platform_sales', label: t('platform.roles.platformSales') },
|
||||
{ value: 'platform_support', label: t('platform.roles.platformSupport') },
|
||||
]}
|
||||
filterValue={roleFilter}
|
||||
onFilterChange={setRoleFilter}
|
||||
emptyMessage={t('platform.noUsersFound')}
|
||||
/>
|
||||
<EditPlatformEntityModal
|
||||
entity={editingUser}
|
||||
type="user"
|
||||
isOpen={!!editingUser}
|
||||
onClose={() => setEditingUser(null)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
import { PlatformBusiness, PlatformUser } from '../../../api/platform';
|
||||
import BusinessEditModal from './BusinessEditModal';
|
||||
import EditPlatformUserModal from './EditPlatformUserModal';
|
||||
|
||||
interface EditPlatformEntityModalProps {
|
||||
entity: PlatformUser | PlatformBusiness | null;
|
||||
type: 'user' | 'business';
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const EditPlatformEntityModal: React.FC<EditPlatformEntityModalProps> = ({
|
||||
entity,
|
||||
type,
|
||||
isOpen,
|
||||
onClose,
|
||||
}) => {
|
||||
if (!isOpen || !entity) return null;
|
||||
|
||||
if (type === 'business') {
|
||||
return (
|
||||
<BusinessEditModal
|
||||
business={entity as PlatformBusiness}
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === 'user') {
|
||||
// Need to cast or transform PlatformUser to the shape expected by EditPlatformUserModal
|
||||
// EditPlatformUserModal expects: { id, username, email, first_name, last_name, role, is_active, permissions }
|
||||
// PlatformUser has: { id, username, email, name, role, is_active, permissions, ... }
|
||||
// We need to split name into first/last if not present
|
||||
const user = entity as PlatformUser;
|
||||
|
||||
// Helper to split name if needed (though PlatformUser usually has first/last in backend, the interface might vary)
|
||||
// Let's check PlatformUser interface in api/platform.ts
|
||||
// It has name?: string, but serializer sends first_name, last_name.
|
||||
// Let's assume the object passed in has them.
|
||||
|
||||
return (
|
||||
<EditPlatformUserModal
|
||||
user={user as any} // Cast to any to avoid strict type mismatch if interfaces slightly differ
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
export default EditPlatformEntityModal;
|
||||
57
frontend/src/pages/platform/components/PlatformListRow.tsx
Normal file
57
frontend/src/pages/platform/components/PlatformListRow.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
import React, { ReactNode } from 'react';
|
||||
import { Check, Eye, Pencil } from 'lucide-react';
|
||||
|
||||
interface PlatformListRowProps {
|
||||
avatarLetter: string;
|
||||
primaryText: string;
|
||||
secondaryText?: string;
|
||||
badgeText: string;
|
||||
badgeColor?: string;
|
||||
tertiaryText: ReactNode;
|
||||
actions: ReactNode;
|
||||
}
|
||||
|
||||
const PlatformListRow: React.FC<PlatformListRowProps> = ({
|
||||
avatarLetter,
|
||||
primaryText,
|
||||
secondaryText,
|
||||
badgeText,
|
||||
badgeColor = 'bg-gray-100 text-gray-800',
|
||||
tertiaryText,
|
||||
actions,
|
||||
}) => {
|
||||
return (
|
||||
<tr className="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
|
||||
<td className="px-6 py-4 font-medium text-gray-900 dark:text-white">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center text-indigo-600 dark:text-indigo-300 font-semibold text-sm">
|
||||
{avatarLetter}
|
||||
</div>
|
||||
<div>
|
||||
<div>{primaryText}</div>
|
||||
{secondaryText && (
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">{secondaryText}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium capitalize ${badgeColor}`}>
|
||||
{badgeText}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-gray-500 dark:text-gray-400 font-mono text-xs">
|
||||
<div className="flex items-center gap-2">
|
||||
{tertiaryText}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<div className="flex justify-end gap-2">
|
||||
{actions}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
};
|
||||
|
||||
export default PlatformListRow;
|
||||
109
frontend/src/pages/platform/components/PlatformListing.tsx
Normal file
109
frontend/src/pages/platform/components/PlatformListing.tsx
Normal file
@@ -0,0 +1,109 @@
|
||||
import React, { ReactNode } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Search } from 'lucide-react';
|
||||
import PlatformTable from './PlatformTable';
|
||||
|
||||
interface PlatformListingProps<T> {
|
||||
title: string;
|
||||
description: string;
|
||||
isLoading: boolean;
|
||||
error: any;
|
||||
data: T[];
|
||||
renderRow: (item: T) => ReactNode;
|
||||
columns: string[];
|
||||
searchPlaceholder: string;
|
||||
searchTerm: string;
|
||||
onSearchChange: (term: string) => void;
|
||||
filterOptions?: { label: string; value: string }[];
|
||||
filterValue?: string;
|
||||
onFilterChange?: (value: string) => void;
|
||||
actionButton?: ReactNode;
|
||||
emptyMessage?: string;
|
||||
extraContent?: ReactNode;
|
||||
}
|
||||
|
||||
function PlatformListing<T>({
|
||||
title,
|
||||
description,
|
||||
isLoading,
|
||||
error,
|
||||
data,
|
||||
renderRow,
|
||||
columns,
|
||||
searchPlaceholder,
|
||||
searchTerm,
|
||||
onSearchChange,
|
||||
filterOptions,
|
||||
filterValue,
|
||||
onFilterChange,
|
||||
actionButton,
|
||||
emptyMessage,
|
||||
extraContent,
|
||||
}: PlatformListingProps<T>) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="text-gray-500 dark:text-gray-400">{t('common.loading')}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="text-red-500">{t('errors.generic')}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">{title}</h2>
|
||||
<p className="text-gray-500 dark:text-gray-400">{description}</p>
|
||||
</div>
|
||||
{actionButton}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 bg-white dark:bg-gray-800 p-4 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder={searchPlaceholder}
|
||||
value={searchTerm}
|
||||
onChange={(e) => onSearchChange(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
{filterOptions && onFilterChange && (
|
||||
<select
|
||||
value={filterValue}
|
||||
onChange={(e) => onFilterChange(e.target.value)}
|
||||
className="px-4 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 text-gray-700 dark:text-gray-200"
|
||||
>
|
||||
{filterOptions.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<PlatformTable
|
||||
data={data}
|
||||
columns={columns}
|
||||
renderRow={renderRow}
|
||||
emptyMessage={emptyMessage}
|
||||
/>
|
||||
|
||||
{extraContent}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PlatformListing;
|
||||
52
frontend/src/pages/platform/components/PlatformTable.tsx
Normal file
52
frontend/src/pages/platform/components/PlatformTable.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
import React, { ReactNode } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
interface PlatformTableProps<T> {
|
||||
data: T[];
|
||||
columns: string[];
|
||||
renderRow: (item: T) => ReactNode;
|
||||
emptyMessage?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
function PlatformTable<T>({
|
||||
data,
|
||||
columns,
|
||||
renderRow,
|
||||
emptyMessage,
|
||||
className = "bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden"
|
||||
}: PlatformTableProps<T>) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm text-left">
|
||||
<thead className="text-xs text-gray-500 dark:text-gray-400 uppercase bg-gray-50 dark:bg-gray-900/50 border-b border-gray-200 dark:border-gray-700">
|
||||
<tr>
|
||||
{columns.map((col, idx) => (
|
||||
<th key={idx} className={`px-6 py-4 font-medium ${idx === columns.length - 1 ? 'text-right' : ''}`}>
|
||||
{col}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100 dark:divide-gray-700">
|
||||
{data.map((item, idx) => (
|
||||
<React.Fragment key={idx}>
|
||||
{renderRow(item)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{data.length === 0 && (
|
||||
<div className="p-8 text-center text-gray-500 dark:text-gray-400">
|
||||
{emptyMessage || t('common.noResults')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PlatformTable;
|
||||
Reference in New Issue
Block a user