diff --git a/deploy.sh b/deploy.sh index 6e5ff5e..15a6bb0 100755 --- a/deploy.sh +++ b/deploy.sh @@ -34,14 +34,14 @@ print_error() { } # Step 1: Build frontend -print_status "Step 1: Building frontend..." -cd "$PROJECT_DIR/frontend" -if [ ! -d "node_modules" ]; then - print_warning "Installing frontend dependencies..." - npm install -fi -npm run build -print_status "Frontend build complete!" +print_status "Step 1: Skipping local build (building on server)..." +# cd "$PROJECT_DIR/frontend" +# if [ ! -d "node_modules" ]; then +# print_warning "Installing frontend dependencies..." +# npm install +# fi +# npm run build +# print_status "Frontend build complete!" # Step 2: Prepare deployment package print_status "Step 2: Preparing deployment package..." @@ -53,8 +53,9 @@ rsync -av --exclude='.venv' --exclude='__pycache__' --exclude='*.pyc' \ --exclude='.git' --exclude='node_modules' \ "$PROJECT_DIR/smoothschedule/" /tmp/smoothschedule-deploy/backend/ -# Copy frontend build -rsync -av "$PROJECT_DIR/frontend/dist/" /tmp/smoothschedule-deploy/frontend/ +# Copy frontend source +rsync -av --exclude='node_modules' --exclude='dist' --exclude='.git' \ + "$PROJECT_DIR/frontend/" /tmp/smoothschedule-deploy/frontend/ print_status "Deployment package prepared!" diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 7a0eda5..df49962 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -16,6 +16,7 @@ "@types/react-syntax-highlighter": "^15.5.13", "axios": "^1.13.2", "date-fns": "^4.1.0", + "framer-motion": "^12.23.24", "i18next": "^25.6.3", "i18next-browser-languagedetector": "^8.2.0", "i18next-http-backend": "^3.0.2", @@ -3044,6 +3045,33 @@ "url": "https://github.com/sponsors/rawify" } }, + "node_modules/framer-motion": { + "version": "12.23.24", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.24.tgz", + "integrity": "sha512-HMi5HRoRCTou+3fb3h9oTLyJGBxHfW+HnNE25tAXOvVx/IvwMHK0cx7IR4a2ZU6sh3IX1Z+4ts32PcYBOqka8w==", + "license": "MIT", + "dependencies": { + "motion-dom": "^12.23.23", + "motion-utils": "^12.23.6", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fsevents": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", @@ -3960,6 +3988,21 @@ "node": "*" } }, + "node_modules/motion-dom": { + "version": "12.23.23", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz", + "integrity": "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==", + "license": "MIT", + "dependencies": { + "motion-utils": "^12.23.6" + } + }, + "node_modules/motion-utils": { + "version": "12.23.6", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz", + "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==", + "license": "MIT" + }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", diff --git a/frontend/package.json b/frontend/package.json index 7a78d40..6d39ddc 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -12,6 +12,7 @@ "@types/react-syntax-highlighter": "^15.5.13", "axios": "^1.13.2", "date-fns": "^4.1.0", + "framer-motion": "^12.23.24", "i18next": "^25.6.3", "i18next-browser-languagedetector": "^8.2.0", "i18next-http-backend": "^3.0.2", diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 78e9406..81f05fc 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -2,7 +2,7 @@ * Main App Component - Integrated with Real API */ -import React, { useState } from 'react'; +import React, { useState, Suspense } from 'react'; import { useTranslation } from 'react-i18next'; import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; @@ -12,9 +12,9 @@ import { useUpdateBusiness } from './hooks/useBusiness'; import { setCookie } from './utils/cookies'; // Import Login Page -import LoginPage from './pages/LoginPage'; -import MFAVerifyPage from './pages/MFAVerifyPage'; -import OAuthCallback from './pages/OAuthCallback'; +const LoginPage = React.lazy(() => import('./pages/LoginPage')); +const MFAVerifyPage = React.lazy(() => import('./pages/MFAVerifyPage')); +const OAuthCallback = React.lazy(() => import('./pages/OAuthCallback')); // Import layouts import BusinessLayout from './layouts/BusinessLayout'; @@ -23,51 +23,51 @@ import CustomerLayout from './layouts/CustomerLayout'; import MarketingLayout from './layouts/MarketingLayout'; // Import marketing pages -import HomePage from './pages/marketing/HomePage'; -import FeaturesPage from './pages/marketing/FeaturesPage'; -import PricingPage from './pages/marketing/PricingPage'; -import AboutPage from './pages/marketing/AboutPage'; -import ContactPage from './pages/marketing/ContactPage'; -import SignupPage from './pages/marketing/SignupPage'; +const HomePage = React.lazy(() => import('./pages/marketing/HomePage')); +const FeaturesPage = React.lazy(() => import('./pages/marketing/FeaturesPage')); +const PricingPage = React.lazy(() => import('./pages/marketing/PricingPage')); +const AboutPage = React.lazy(() => import('./pages/marketing/AboutPage')); +const ContactPage = React.lazy(() => import('./pages/marketing/ContactPage')); +const SignupPage = React.lazy(() => import('./pages/marketing/SignupPage')); // Import pages -import Dashboard from './pages/Dashboard'; -import Scheduler from './pages/Scheduler'; -import Customers from './pages/Customers'; -import Settings from './pages/Settings'; -import Payments from './pages/Payments'; -import Resources from './pages/Resources'; -import Services from './pages/Services'; -import Staff from './pages/Staff'; -import CustomerDashboard from './pages/customer/CustomerDashboard'; -import CustomerSupport from './pages/customer/CustomerSupport'; -import ResourceDashboard from './pages/resource/ResourceDashboard'; -import BookingPage from './pages/customer/BookingPage'; -import TrialExpired from './pages/TrialExpired'; -import Upgrade from './pages/Upgrade'; +const Dashboard = React.lazy(() => import('./pages/Dashboard')); +const Scheduler = React.lazy(() => import('./pages/Scheduler')); +const Customers = React.lazy(() => import('./pages/Customers')); +const Settings = React.lazy(() => import('./pages/Settings')); +const Payments = React.lazy(() => import('./pages/Payments')); +const Resources = React.lazy(() => import('./pages/Resources')); +const Services = React.lazy(() => import('./pages/Services')); +const Staff = React.lazy(() => import('./pages/Staff')); +const CustomerDashboard = React.lazy(() => import('./pages/customer/CustomerDashboard')); +const CustomerSupport = React.lazy(() => import('./pages/customer/CustomerSupport')); +const ResourceDashboard = React.lazy(() => import('./pages/resource/ResourceDashboard')); +const BookingPage = React.lazy(() => import('./pages/customer/BookingPage')); +const TrialExpired = React.lazy(() => import('./pages/TrialExpired')); +const Upgrade = React.lazy(() => import('./pages/Upgrade')); // Import platform pages -import PlatformDashboard from './pages/platform/PlatformDashboard'; -import PlatformBusinesses from './pages/platform/PlatformBusinesses'; -import PlatformSupportPage from './pages/platform/PlatformSupport'; -import PlatformUsers from './pages/platform/PlatformUsers'; -import PlatformStaff from './pages/platform/PlatformStaff'; -import PlatformSettings from './pages/platform/PlatformSettings'; -import ProfileSettings from './pages/ProfileSettings'; -import VerifyEmail from './pages/VerifyEmail'; -import EmailVerificationRequired from './pages/EmailVerificationRequired'; -import AcceptInvitePage from './pages/AcceptInvitePage'; -import TenantOnboardPage from './pages/TenantOnboardPage'; -import Tickets from './pages/Tickets'; // Import Tickets page -import HelpGuide from './pages/HelpGuide'; // Import Platform Guide page -import HelpTicketing from './pages/HelpTicketing'; // Import Help page for ticketing -import HelpApiDocs from './pages/HelpApiDocs'; // Import API documentation page -import HelpPluginDocs from './pages/HelpPluginDocs'; // Import Plugin documentation page -import PlatformSupport from './pages/PlatformSupport'; // Import Platform Support page (for businesses to contact SmoothSchedule) -import PluginMarketplace from './pages/PluginMarketplace'; // Import Plugin Marketplace page -import MyPlugins from './pages/MyPlugins'; // Import My Plugins page -import Tasks from './pages/Tasks'; // Import Tasks page for scheduled plugin executions -import EmailTemplates from './pages/EmailTemplates'; // Import Email Templates page +const PlatformDashboard = React.lazy(() => import('./pages/platform/PlatformDashboard')); +const PlatformBusinesses = React.lazy(() => import('./pages/platform/PlatformBusinesses')); +const PlatformSupportPage = React.lazy(() => import('./pages/platform/PlatformSupport')); +const PlatformUsers = React.lazy(() => import('./pages/platform/PlatformUsers')); +const PlatformStaff = React.lazy(() => import('./pages/platform/PlatformStaff')); +const PlatformSettings = React.lazy(() => import('./pages/platform/PlatformSettings')); +const ProfileSettings = React.lazy(() => import('./pages/ProfileSettings')); +const VerifyEmail = React.lazy(() => import('./pages/VerifyEmail')); +const EmailVerificationRequired = React.lazy(() => import('./pages/EmailVerificationRequired')); +const AcceptInvitePage = React.lazy(() => import('./pages/AcceptInvitePage')); +const TenantOnboardPage = React.lazy(() => import('./pages/TenantOnboardPage')); +const Tickets = React.lazy(() => import('./pages/Tickets')); // Import Tickets page +const HelpGuide = React.lazy(() => import('./pages/HelpGuide')); // Import Platform Guide page +const HelpTicketing = React.lazy(() => import('./pages/HelpTicketing')); // Import Help page for ticketing +const HelpApiDocs = React.lazy(() => import('./pages/HelpApiDocs')); // Import API documentation page +const HelpPluginDocs = React.lazy(() => import('./pages/HelpPluginDocs')); // Import Plugin documentation page +const PlatformSupport = React.lazy(() => import('./pages/PlatformSupport')); // Import Platform Support page (for businesses to contact SmoothSchedule) +const PluginMarketplace = React.lazy(() => import('./pages/PluginMarketplace')); // Import Plugin Marketplace page +const MyPlugins = React.lazy(() => import('./pages/MyPlugins')); // Import My Plugins page +const Tasks = React.lazy(() => import('./pages/Tasks')); // Import Tasks page for scheduled plugin executions +const EmailTemplates = React.lazy(() => import('./pages/EmailTemplates')); // Import Email Templates page import { Toaster } from 'react-hot-toast'; // Import Toaster for notifications const queryClient = new QueryClient({ @@ -219,23 +219,25 @@ const AppContent: React.FC = () => { // Logged-in users will see a "Go to Dashboard" link in the navbar if (isRootDomain()) { return ( - - }> - } /> - } /> - } /> - } /> - } /> - } /> - - } /> - } /> - } /> - } /> - } /> - } /> - } /> - + }> + + }> + } /> + } /> + } /> + } /> + } /> + } /> + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + ); } @@ -257,23 +259,25 @@ const AppContent: React.FC = () => { } return ( - - }> - } /> - } /> - } /> - } /> - } /> - } /> - - } /> - } /> - } /> - } /> - } /> - } /> - } /> - + }> + + }> + } /> + } /> + } /> + } /> + } /> + } /> + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + ); } @@ -350,49 +354,51 @@ const AppContent: React.FC = () => { if (isPlatformUser) { return ( - - - } - > - {(user.role === 'superuser' || user.role === 'platform_manager') && ( - <> - } /> - } /> - } /> - } /> - - )} - } /> - } /> - } /> - } /> - } /> - {user.role === 'superuser' && ( - } /> - )} - } /> - } /> + }> + } - /> - - + > + {(user.role === 'superuser' || user.role === 'platform_manager') && ( + <> + } /> + } /> + } /> + } /> + + )} + } /> + } /> + } /> + } /> + } /> + {user.role === 'superuser' && ( + } /> + )} + } /> + } /> + + } + /> + + + ); } @@ -424,26 +430,28 @@ const AppContent: React.FC = () => { } return ( - - - } - > - } /> - } /> - } /> - } /> - } /> - } /> - } /> - - + }> + + + } + > + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + + ); } @@ -492,11 +500,13 @@ const AppContent: React.FC = () => { // Check if email verification is required if (!user.email_verified) { return ( - - } /> - } /> - } /> - + }> + + } /> + } /> + } /> + + ); } @@ -511,157 +521,161 @@ const AppContent: React.FC = () => { // If trial expired and not on allowed route, redirect to trial-expired if (isTrialExpired && !isOnAllowedRoute) { return ( - - } /> - } /> - } /> - : } - /> - } /> - + }> + + } /> + } /> + } /> + : } + /> + } /> + + ); } return ( - - - } - > - {/* Trial and Upgrade Routes */} - } /> - } /> + }> + + + } + > + {/* Trial and Upgrade Routes */} + } /> + } /> - {/* Regular Routes */} - : } - /> - } /> - } /> - } /> - } /> - } /> - } /> - - ) : ( - - ) - } - /> - - ) : ( - - ) - } - /> - - ) : ( - - ) - } - /> - - ) : ( - - ) - } - /> - } /> - - ) : ( - - ) - } - /> - - ) : ( - - ) - } - /> - - ) : ( - - ) - } - /> - - ) : ( - - ) - } - /> - : - } - /> - -

Messages

-

Messages feature coming soon...

- - ) : ( - - ) - } - /> - : } - /> - } /> - } /> - } /> - - + {/* Regular Routes */} + : } + /> + } /> + } /> + } /> + } /> + } /> + } /> + + ) : ( + + ) + } + /> + + ) : ( + + ) + } + /> + + ) : ( + + ) + } + /> + + ) : ( + + ) + } + /> + } /> + + ) : ( + + ) + } + /> + + ) : ( + + ) + } + /> + + ) : ( + + ) + } + /> + + ) : ( + + ) + } + /> + : + } + /> + +

Messages

+

Messages feature coming soon...

+ + ) : ( + + ) + } + /> + : } + /> + } /> + } /> + } /> + + + ); } diff --git a/frontend/src/api/auth.ts b/frontend/src/api/auth.ts index 0aeda74..05fdb07 100644 --- a/frontend/src/api/auth.ts +++ b/frontend/src/api/auth.ts @@ -64,7 +64,7 @@ export interface User { * Login user */ export const login = async (credentials: LoginCredentials): Promise => { - const response = await apiClient.post('/auth/login/', credentials); + const response = await apiClient.post('/api/auth/login/', credentials); return response.data; }; @@ -72,14 +72,14 @@ export const login = async (credentials: LoginCredentials): Promise => { - await apiClient.post('/auth/logout/'); + await apiClient.post('/api/auth/logout/'); }; /** * Get current user */ export const getCurrentUser = async (): Promise => { - const response = await apiClient.get('/auth/me/'); + const response = await apiClient.get('/api/auth/me/'); return response.data; }; @@ -87,7 +87,7 @@ export const getCurrentUser = async (): Promise => { * Refresh access token */ export const refreshToken = async (refresh: string): Promise<{ access: string }> => { - const response = await apiClient.post('/auth/refresh/', { refresh }); + const response = await apiClient.post('/api/auth/refresh/', { refresh }); return response.data; }; @@ -99,7 +99,7 @@ export const masquerade = async ( hijack_history?: MasqueradeStackEntry[] ): Promise => { const response = await apiClient.post( - '/auth/hijack/acquire/', + '/api/auth/hijack/acquire/', { user_pk, hijack_history } ); return response.data; @@ -112,7 +112,7 @@ export const stopMasquerade = async ( masquerade_stack: MasqueradeStackEntry[] ): Promise => { const response = await apiClient.post( - '/auth/hijack/release/', + '/api/auth/hijack/release/', { masquerade_stack } ); return response.data; diff --git a/frontend/src/api/notifications.ts b/frontend/src/api/notifications.ts index a0f066f..ad7c7db 100644 --- a/frontend/src/api/notifications.ts +++ b/frontend/src/api/notifications.ts @@ -29,7 +29,7 @@ export const getNotifications = async (params?: { read?: boolean; limit?: number queryParams.append('limit', String(params.limit)); } const query = queryParams.toString(); - const url = query ? `/notifications/?${query}` : '/notifications/'; + const url = query ? `/api/notifications/?${query}` : '/api/notifications/'; const response = await apiClient.get(url); return response.data; }; @@ -38,7 +38,7 @@ export const getNotifications = async (params?: { read?: boolean; limit?: number * Get count of unread notifications */ export const getUnreadCount = async (): Promise => { - const response = await apiClient.get('/notifications/unread_count/'); + const response = await apiClient.get('/api/notifications/unread_count/'); return response.data.count; }; @@ -46,19 +46,19 @@ export const getUnreadCount = async (): Promise => { * Mark a single notification as read */ export const markNotificationRead = async (id: number): Promise => { - await apiClient.post(`/notifications/${id}/mark_read/`); + await apiClient.post(`/api/notifications/${id}/mark_read/`); }; /** * Mark all notifications as read */ export const markAllNotificationsRead = async (): Promise => { - await apiClient.post('/notifications/mark_all_read/'); + await apiClient.post('/api/notifications/mark_all_read/'); }; /** * Delete all read notifications */ export const clearAllNotifications = async (): Promise => { - await apiClient.delete('/notifications/clear_all/'); + await apiClient.delete('/api/notifications/clear_all/'); }; diff --git a/frontend/src/api/oauth.ts b/frontend/src/api/oauth.ts index 8d67543..6d48bfc 100644 --- a/frontend/src/api/oauth.ts +++ b/frontend/src/api/oauth.ts @@ -45,7 +45,7 @@ export interface OAuthConnection { * Get list of enabled OAuth providers */ export const getOAuthProviders = async (): Promise => { - const response = await apiClient.get<{ providers: OAuthProvider[] }>('/auth/oauth/providers/'); + const response = await apiClient.get<{ providers: OAuthProvider[] }>('/api/auth/oauth/providers/'); return response.data.providers; }; @@ -54,7 +54,7 @@ export const getOAuthProviders = async (): Promise => { */ export const initiateOAuth = async (provider: string): Promise => { const response = await apiClient.get( - `/auth/oauth/${provider}/authorize/` + `/api/auth/oauth/${provider}/authorize/` ); return response.data; }; @@ -68,7 +68,7 @@ export const handleOAuthCallback = async ( state: string ): Promise => { const response = await apiClient.post( - `/auth/oauth/${provider}/callback/`, + `/api/auth/oauth/${provider}/callback/`, { code, state, @@ -81,7 +81,7 @@ export const handleOAuthCallback = async ( * Get user's connected OAuth accounts */ export const getOAuthConnections = async (): Promise => { - const response = await apiClient.get<{ connections: OAuthConnection[] }>('/auth/oauth/connections/'); + const response = await apiClient.get<{ connections: OAuthConnection[] }>('/api/auth/oauth/connections/'); return response.data.connections; }; @@ -89,5 +89,5 @@ export const getOAuthConnections = async (): Promise => { * Disconnect an OAuth account */ export const disconnectOAuth = async (provider: string): Promise => { - await apiClient.delete(`/auth/oauth/connections/${provider}/`); + await apiClient.delete(`/api/auth/oauth/connections/${provider}/`); }; diff --git a/frontend/src/api/platform.ts b/frontend/src/api/platform.ts index b6504f5..b30d3b5 100644 --- a/frontend/src/api/platform.ts +++ b/frontend/src/api/platform.ts @@ -11,6 +11,7 @@ export interface PlatformBusinessOwner { full_name: string; email: string; role: string; + email_verified: boolean; } export interface PlatformBusiness { @@ -72,6 +73,7 @@ export interface PlatformUser { is_active: boolean; is_staff: boolean; is_superuser: boolean; + email_verified: boolean; business: number | null; business_name?: string; business_subdomain?: string; @@ -83,7 +85,7 @@ export interface PlatformUser { * Get all businesses (platform admin only) */ export const getBusinesses = async (): Promise => { - const response = await apiClient.get('/platform/businesses/'); + const response = await apiClient.get('/api/platform/businesses/'); return response.data; }; @@ -95,7 +97,7 @@ export const updateBusiness = async ( data: PlatformBusinessUpdate ): Promise => { const response = await apiClient.patch( - `/platform/businesses/${businessId}/`, + `/api/platform/businesses/${businessId}/`, data ); return response.data; @@ -108,7 +110,7 @@ export const createBusiness = async ( data: PlatformBusinessCreate ): Promise => { const response = await apiClient.post( - '/platform/businesses/', + '/api/platform/businesses/', data ); return response.data; @@ -118,7 +120,7 @@ export const createBusiness = async ( * Get all users (platform admin only) */ export const getUsers = async (): Promise => { - const response = await apiClient.get('/platform/users/'); + const response = await apiClient.get('/api/platform/users/'); return response.data; }; @@ -126,10 +128,17 @@ export const getUsers = async (): Promise => { * Get users for a specific business */ export const getBusinessUsers = async (businessId: number): Promise => { - const response = await apiClient.get(`/platform/users/?business=${businessId}`); + const response = await apiClient.get(`/api/platform/users/?business=${businessId}`); return response.data; }; +/** + * Verify a user's email (platform admin only) + */ +export const verifyUserEmail = async (userId: number): Promise => { + await apiClient.post(`/api/platform/users/${userId}/verify_email/`); +}; + // ============================================================================ // Tenant Invitations // ============================================================================ @@ -209,7 +218,7 @@ export interface TenantInvitationAccept { * Get all tenant invitations (platform admin only) */ export const getTenantInvitations = async (): Promise => { - const response = await apiClient.get('/platform/tenant-invitations/'); + const response = await apiClient.get('/api/platform/tenant-invitations/'); return response.data; }; @@ -220,7 +229,7 @@ export const createTenantInvitation = async ( data: TenantInvitationCreate ): Promise => { const response = await apiClient.post( - '/platform/tenant-invitations/', + '/api/platform/tenant-invitations/', data ); return response.data; @@ -230,14 +239,14 @@ export const createTenantInvitation = async ( * Resend a tenant invitation (platform admin only) */ export const resendTenantInvitation = async (invitationId: number): Promise => { - await apiClient.post(`/platform/tenant-invitations/${invitationId}/resend/`); + await apiClient.post(`/api/platform/tenant-invitations/${invitationId}/resend/`); }; /** * Cancel a tenant invitation (platform admin only) */ export const cancelTenantInvitation = async (invitationId: number): Promise => { - await apiClient.post(`/platform/tenant-invitations/${invitationId}/cancel/`); + await apiClient.post(`/api/platform/tenant-invitations/${invitationId}/cancel/`); }; /** @@ -245,7 +254,7 @@ export const cancelTenantInvitation = async (invitationId: number): Promise => { const response = await apiClient.get( - `/platform/tenant-invitations/token/${token}/` + `/api/platform/tenant-invitations/token/${token}/` ); return response.data; }; @@ -258,7 +267,7 @@ export const acceptInvitation = async ( data: TenantInvitationAccept ): Promise<{ detail: string }> => { const response = await apiClient.post<{ detail: string }>( - `/platform/tenant-invitations/token/${token}/accept/`, + `/api/platform/tenant-invitations/token/${token}/accept/`, data ); return response.data; diff --git a/frontend/src/components/DevQuickLogin.tsx b/frontend/src/components/DevQuickLogin.tsx index 71348f1..afb457d 100644 --- a/frontend/src/components/DevQuickLogin.tsx +++ b/frontend/src/components/DevQuickLogin.tsx @@ -2,6 +2,7 @@ import { useState } from 'react'; import apiClient from '../api/client'; import { setCookie } from '../utils/cookies'; import { useQueryClient } from '@tanstack/react-query'; +import { getBaseDomain, buildSubdomainUrl } from '../utils/domain'; export interface TestUser { username: string; @@ -88,7 +89,7 @@ export function DevQuickLogin({ embedded = false }: DevQuickLoginProps) { setLoading(user.username); try { // Call token auth API - const response = await apiClient.post('/auth-token/', { + const response = await apiClient.post('/api/auth-token/', { username: user.username, password: user.password, }); @@ -97,7 +98,7 @@ export function DevQuickLogin({ embedded = false }: DevQuickLoginProps) { setCookie('access_token', response.data.token, 7); // Fetch user data to determine redirect - const userResponse = await apiClient.get('/auth/me/'); + const userResponse = await apiClient.get('/api/auth/me/'); const userData = userResponse.data; // Determine the correct subdomain based on user role @@ -115,13 +116,13 @@ export function DevQuickLogin({ embedded = false }: DevQuickLoginProps) { } // Check if we need to redirect to a different subdomain - const isOnTargetSubdomain = currentHostname === `${targetSubdomain}.lvh.me`; + const baseDomain = getBaseDomain(); + const isOnTargetSubdomain = currentHostname === (targetSubdomain ? `${targetSubdomain}.${baseDomain}` : baseDomain); const needsRedirect = targetSubdomain && !isOnTargetSubdomain; if (needsRedirect) { // Redirect to the correct subdomain - const portStr = currentPort ? `:${currentPort}` : ''; - window.location.href = `http://${targetSubdomain}.lvh.me${portStr}/`; + window.location.href = buildSubdomainUrl(targetSubdomain, '/'); return; } diff --git a/frontend/src/components/marketing/BenefitsSection.tsx b/frontend/src/components/marketing/BenefitsSection.tsx new file mode 100644 index 0000000..77b3546 --- /dev/null +++ b/frontend/src/components/marketing/BenefitsSection.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import { Rocket, Shield, Zap, Headphones } from 'lucide-react'; + +const BenefitsSection: React.FC = () => { + const benefits = [ + { + icon: Rocket, + title: 'Rapid Deployment', + description: 'Launch your branded booking portal in minutes with our pre-configured industry templates.', + color: 'text-blue-600 dark:text-blue-400', + bgColor: 'bg-blue-100 dark:bg-blue-900/30', + }, + { + icon: Shield, + title: 'Enterprise Security', + description: 'Sleep soundly knowing your data is physically isolated in its own dedicated secure vault.', + color: 'text-green-600 dark:text-green-400', + bgColor: 'bg-green-100 dark:bg-green-900/30', + }, + { + icon: Zap, + title: 'High Performance', + description: 'Built on a modern, edge-cached architecture to ensure instant loading times globally.', + color: 'text-purple-600 dark:text-purple-400', + bgColor: 'bg-purple-100 dark:bg-purple-900/30', + }, + { + icon: Headphones, + title: 'Expert Support', + description: 'Our team of scheduling experts is available to help you optimize your automation workflows.', + color: 'text-orange-600 dark:text-orange-400', + bgColor: 'bg-orange-100 dark:bg-orange-900/30', + }, + ]; + + return ( +
+
+
+ {benefits.map((benefit, index) => ( +
+
+ +
+

+ {benefit.title} +

+

+ {benefit.description} +

+
+ ))} +
+
+
+ ); +}; + +export default BenefitsSection; diff --git a/frontend/src/components/marketing/CodeBlock.tsx b/frontend/src/components/marketing/CodeBlock.tsx new file mode 100644 index 0000000..c83ac1d --- /dev/null +++ b/frontend/src/components/marketing/CodeBlock.tsx @@ -0,0 +1,122 @@ +import React from 'react'; +import { Check, Copy } from 'lucide-react'; + +interface CodeBlockProps { + code: string; + language?: string; + filename?: string; +} + +const CodeBlock: React.FC = ({ code, language = 'python', filename }) => { + const [copied, setCopied] = React.useState(false); + + const handleCopy = () => { + navigator.clipboard.writeText(code); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + }; + + return ( +
+ {/* Header */} +
+
+
+
+
+
+
+ {filename && ( + + {filename} + + )} +
+ +
+ + {/* Code */} +
+ 
+                    
+                        {code.split('\n').map((line, i) => (
+                            

+                                
+                                    {i + 1}
+                                
+                                
+                                    {highlightSyntax(line)}
+                                
+                            

+                        ))}
+                    
+
+
+
+ ); +}; + +// Simple syntax highlighting for Python/JSON +const highlightSyntax = (line: string) => { + // Comments + if (line.trim().startsWith('#') || line.trim().startsWith('//')) { + return {line}; + } + + // Strings + const stringRegex = /(['"])(.*?)\1/g; + const parts = line.split(stringRegex); + + if (parts.length > 1) { + return ( + <> + {parts.map((part, i) => { + // Every 3rd part is the quote, then content, then quote again + // This is a very naive implementation but works for simple marketing snippets + if (i % 3 === 1) return "{part}"; // Content + if (i % 3 === 2) return null; // Closing quote (handled by regex split logic usually, but here we just color content) + + // Keywords + return {highlightKeywords(part)}; + })} + + ); + } + + return highlightKeywords(line); +}; + +const highlightKeywords = (text: string) => { + const keywords = ['def', 'class', 'return', 'import', 'from', 'if', 'else', 'for', 'in', 'True', 'False', 'None']; + const words = text.split(' '); + + return ( + <> + {words.map((word, i) => { + const isKeyword = keywords.includes(word.trim()); + const isFunction = word.includes('('); + + return ( + + {isKeyword ? ( + {word} + ) : isFunction ? ( + {word} + ) : ( + word + )} + {' '} + + ); + })} + + ); +}; + +export default CodeBlock; diff --git a/frontend/src/components/marketing/Hero.tsx b/frontend/src/components/marketing/Hero.tsx index 7a32076..8e6154b 100644 --- a/frontend/src/components/marketing/Hero.tsx +++ b/frontend/src/components/marketing/Hero.tsx @@ -1,165 +1,109 @@ import React from 'react'; import { Link } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; -import { Play, ArrowRight, CheckCircle } from 'lucide-react'; +import { ArrowRight, Play, CheckCircle2 } from 'lucide-react'; const Hero: React.FC = () => { const { t } = useTranslation(); return ( -
- {/* Background Pattern */} -
-
-
+
+ {/* Background Elements */} +
+
+
-
-
- {/* Left Content */} +
+
+ {/* Text Content */}
- {/* Badge */} -
- +
+ - {t('marketing.pricing.startToday')} + New: Automation Marketplace
- {/* Headline */} -

- {t('marketing.hero.headline')} +

+ The Operating System for Service Businesses

- {/* Subheadline */} -

- {t('marketing.hero.subheadline')} +

+ Orchestrate your entire operation with intelligent scheduling and powerful automation. No coding required.

- {/* CTAs */} -
+
- {t('marketing.hero.cta')} - + Start Free Trial + - + + Watch Demo +
- {/* Trust Indicators */} -
+
- - {t('marketing.pricing.noCredit')} + + No credit card required
-
- - {t('marketing.pricing.startToday')} + + 14-day free trial +
+
+ + Cancel anytime
- {/* Right Content - Dashboard Preview */} -
-
- {/* Mock Dashboard */} -
- {/* Mock Header */} -
-
-
-
-
-
-
-
- dashboard.smoothschedule.com -
-
+ {/* Visual Content */} +
+
+ {/* Abstract Representation of Marketplace/Dashboard */} +
+
+
+

Automated Success

+

Your business, running on autopilot.

- {/* Mock Content */} -
- {/* Stats Row */} -
- {[ - { label: 'Today', value: '12', color: 'brand' }, - { label: 'This Week', value: '48', color: 'green' }, - { label: 'Revenue', value: '$2.4k', color: 'purple' }, - ].map((stat) => ( -
-
{stat.label}
-
{stat.value}
-
- ))} +
+
+
+24%
+
Revenue
- - {/* Calendar Mock */} -
-
Today's Schedule
-
- {[ - { time: '9:00 AM', title: 'Sarah J. - Haircut', color: 'brand' }, - { time: '10:30 AM', title: 'Mike T. - Consultation', color: 'green' }, - { time: '2:00 PM', title: 'Emma W. - Color', color: 'purple' }, - ].map((apt, i) => ( -
-
-
-
{apt.time}
-
{apt.title}
-
-
- ))} -
+
+
-40%
+
No-Shows
- {/* Floating Elements */} -
-
-
- -
-
-
New Booking!
-
Just now
-
+ {/* Floating Badge */} +
+
+ +
+
+
Revenue Optimized
+
+$2,400 this week
- - {/* Trust Badge */} -
-

- {t('marketing.hero.trustedBy')} -

-
- {/* Mock company logos - replace with actual logos */} - {['TechCorp', 'Innovate', 'StartupX', 'GrowthCo', 'ScaleUp'].map((name) => ( -
- {name} -
- ))} -
-
-
+
); }; diff --git a/frontend/src/components/marketing/PluginShowcase.tsx b/frontend/src/components/marketing/PluginShowcase.tsx new file mode 100644 index 0000000..5637284 --- /dev/null +++ b/frontend/src/components/marketing/PluginShowcase.tsx @@ -0,0 +1,236 @@ +import React, { useState } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { Mail, Calendar, Bell, ArrowRight, Zap, CheckCircle2, Code, LayoutGrid } from 'lucide-react'; +import CodeBlock from './CodeBlock'; + +const PluginShowcase: React.FC = () => { + const [activeTab, setActiveTab] = useState(0); + const [viewMode, setViewMode] = useState<'marketplace' | 'code'>('marketplace'); + + const examples = [ + { + id: 'winback', + icon: Mail, + title: 'Client Win-Back', + description: 'Automatically re-engage customers who haven\'t visited in 60 days.', + stats: ['+15% Retention', '$4k/mo Revenue'], + marketplaceImage: 'bg-gradient-to-br from-pink-500 to-rose-500', + code: `# Win back lost customers +days_inactive = 60 +discount = "20%" + +# Find inactive customers +inactive = api.get_customers( + last_visit_lt=days_ago(days_inactive) +) + +# Send personalized offer +for customer in inactive: + api.send_email( + to=customer.email, + subject="We miss you!", + body=f"Come back for {discount} off!" + )`, + }, + { + id: 'noshow', + icon: Bell, + title: 'No-Show Prevention', + description: 'Send SMS reminders 2 hours before appointments to reduce no-shows.', + stats: ['-40% No-Shows', 'Better Utilization'], + marketplaceImage: 'bg-gradient-to-br from-blue-500 to-cyan-500', + code: `# Prevent no-shows +hours_before = 2 + +# Find upcoming appointments +upcoming = api.get_appointments( + start_time__within=hours(hours_before) +) + +# Send SMS reminder +for appt in upcoming: + api.send_sms( + to=appt.customer.phone, + body=f"Reminder: Appointment in 2h at {appt.time}" + )`, + }, + { + id: 'report', + icon: Calendar, + title: 'Daily Reports', + description: 'Get a summary of tomorrow\'s schedule sent to your inbox every evening.', + stats: ['Save 30min/day', 'Full Visibility'], + marketplaceImage: 'bg-gradient-to-br from-purple-500 to-indigo-500', + code: `# Daily Manager Report +tomorrow = date.today() + timedelta(days=1) + +# Get schedule stats +stats = api.get_schedule_stats(date=tomorrow) +revenue = api.forecast_revenue(date=tomorrow) + +# Email manager +api.send_email( + to="manager@business.com", + subject=f"Schedule for {tomorrow}", + body=f"Bookings: {stats.count}, Est. Rev: \${revenue}" +)`, + }, + ]; + + const CurrentIcon = examples[activeTab].icon; + + return ( +
+
+
+ + {/* Left Column: Content */} +
+
+ + Limitless Automation +
+ +

+ Choose from our Marketplace, or build your own. +

+ +

+ Browse hundreds of pre-built plugins to automate your workflows instantly. + Need something custom? Developers can write Python scripts to extend the platform endlessly. +

+ +
+ {examples.map((example, index) => ( + + ))} +
+
+ + {/* Right Column: Visuals */} +
+ {/* Background Decor */} +
+ + {/* View Toggle */} +
+ + +
+ + + + {/* Stats Cards */} +
+ {examples[activeTab].stats.map((stat, i) => ( +
+ + {stat} +
+ ))} +
+ + {viewMode === 'marketplace' ? ( + // Marketplace Card View +
+
+ +
+
+
+
+

{examples[activeTab].title}

+
by SmoothSchedule Team
+
+ +
+

+ {examples[activeTab].description} +

+
+
+ {[1, 2, 3].map(i => ( +
+ ))} +
+ Used by 1,200+ businesses +
+
+
+ ) : ( + // Code View + + )} + + {/* CTA */} + + + +
+ +
+
+
+ ); +}; + +export default PluginShowcase; diff --git a/frontend/src/components/marketing/PricingTable.tsx b/frontend/src/components/marketing/PricingTable.tsx new file mode 100644 index 0000000..eb6b4dd --- /dev/null +++ b/frontend/src/components/marketing/PricingTable.tsx @@ -0,0 +1,127 @@ +import React from 'react'; +import { Check, X } from 'lucide-react'; +import { Link } from 'react-router-dom'; + +const PricingTable: React.FC = () => { + const tiers = [ + { + name: 'Starter', + price: '$0', + period: '/month', + description: 'Perfect for solo practitioners and small studios.', + features: [ + '1 User', + 'Unlimited Appointments', + '1 Active Automation', + 'Basic Reporting', + 'Email Support', + ], + notIncluded: [ + 'Custom Domain', + 'Python Scripting', + 'White-Labeling', + 'Priority Support', + ], + cta: 'Start Free', + ctaLink: '/signup', + popular: false, + }, + { + name: 'Pro', + price: '$29', + period: '/month', + description: 'For growing businesses that need automation.', + features: [ + '5 Users', + 'Unlimited Appointments', + '5 Active Automations', + 'Advanced Reporting', + 'Priority Email Support', + 'SMS Reminders', + ], + notIncluded: [ + 'Custom Domain', + 'Python Scripting', + 'White-Labeling', + ], + cta: 'Start Trial', + ctaLink: '/signup?plan=pro', + popular: true, + }, + { + name: 'Business', + price: '$99', + period: '/month', + description: 'Full power of the platform for serious operations.', + features: [ + 'Unlimited Users', + 'Unlimited Appointments', + 'Unlimited Automations', + 'Custom Python Scripts', + 'Custom Domain (White-Label)', + 'Dedicated Support', + 'API Access', + ], + notIncluded: [], + cta: 'Contact Sales', + ctaLink: '/contact', + popular: false, + }, + ]; + + return ( +
+ {tiers.map((tier) => ( +
+ {tier.popular && ( +
+ Most Popular +
+ )} + +
+

{tier.name}

+

{tier.description}

+
+ {tier.price} + {tier.period} +
+
+ +
    + {tier.features.map((feature) => ( +
  • + + {feature} +
    • + ))} + {tier.notIncluded.map((feature) => ( +
  • + + {feature} +
    • + ))} +
+ + + {tier.cta} + +
+ ))} +
+ ); +}; + +export default PricingTable; diff --git a/frontend/src/components/marketing/StatsSection.tsx b/frontend/src/components/marketing/StatsSection.tsx deleted file mode 100644 index c228c69..0000000 --- a/frontend/src/components/marketing/StatsSection.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react'; -import { useTranslation } from 'react-i18next'; -import { Calendar, Building2, Globe, Clock } from 'lucide-react'; - -const StatsSection: React.FC = () => { - const { t } = useTranslation(); - - const stats = [ - { - icon: Calendar, - value: '1M+', - label: t('marketing.stats.appointments'), - color: 'brand', - }, - { - icon: Building2, - value: '5,000+', - label: t('marketing.stats.businesses'), - color: 'green', - }, - { - icon: Globe, - value: '50+', - label: t('marketing.stats.countries'), - color: 'purple', - }, - { - icon: Clock, - value: '99.9%', - label: t('marketing.stats.uptime'), - color: 'orange', - }, - ]; - - const colorClasses: Record = { - brand: 'text-brand-600 dark:text-brand-400', - green: 'text-green-600 dark:text-green-400', - purple: 'text-purple-600 dark:text-purple-400', - orange: 'text-orange-600 dark:text-orange-400', - }; - - return ( -
-
-
- {stats.map((stat) => ( -
-
- -
-
- {stat.value} -
-
- {stat.label} -
-
- ))} -
-
-
- ); -}; - -export default StatsSection; diff --git a/frontend/src/hooks/useBusiness.ts b/frontend/src/hooks/useBusiness.ts index 701c4b7..38dd8cb 100644 --- a/frontend/src/hooks/useBusiness.ts +++ b/frontend/src/hooks/useBusiness.ts @@ -23,7 +23,7 @@ export const useCurrentBusiness = () => { return null; // No token, return null instead of making request } - const { data } = await apiClient.get('/business/current/'); + const { data } = await apiClient.get('/api/business/current/'); // Transform backend format to frontend format return { @@ -96,7 +96,7 @@ export const useUpdateBusiness = () => { backendData.customer_dashboard_content = updates.customerDashboardContent; } - const { data } = await apiClient.patch('/business/current/update/', backendData); + const { data } = await apiClient.patch('/api/business/current/update/', backendData); return data; }, onSuccess: () => { @@ -112,7 +112,7 @@ export const useResources = () => { return useQuery({ queryKey: ['resources'], queryFn: async () => { - const { data } = await apiClient.get('/resources/'); + const { data } = await apiClient.get('/api/resources/'); return data; }, staleTime: 5 * 60 * 1000, // 5 minutes @@ -127,7 +127,7 @@ export const useCreateResource = () => { return useMutation({ mutationFn: async (resourceData: { name: string; type: string; user_id?: string }) => { - const { data } = await apiClient.post('/resources/', resourceData); + const { data } = await apiClient.post('/api/resources/', resourceData); return data; }, onSuccess: () => { @@ -143,7 +143,7 @@ export const useBusinessUsers = () => { return useQuery({ queryKey: ['businessUsers'], queryFn: async () => { - const { data } = await apiClient.get('/staff/'); + const { data } = await apiClient.get('/api/staff/'); return data; }, staleTime: 5 * 60 * 1000, // 5 minutes diff --git a/frontend/src/i18n/locales/en.json b/frontend/src/i18n/locales/en.json index 22a27c4..fefa46e 100644 --- a/frontend/src/i18n/locales/en.json +++ b/frontend/src/i18n/locales/en.json @@ -599,10 +599,15 @@ "user": "User", "role": "Role", "email": "Email", + "verifyEmail": "Verify Email", + "verify": "Verify", + "confirmVerifyEmail": "Are you sure you want to manually verify this user's email?", "noUsersFound": "No users found matching your filters.", "roles": { "superuser": "Superuser", "platformManager": "Platform Manager", + "platformSales": "Platform Sales", + "platformSupport": "Platform Support", "businessOwner": "Business Owner", "staff": "Staff", "customer": "Customer" diff --git a/frontend/src/pages/marketing/FeaturesPage.tsx b/frontend/src/pages/marketing/FeaturesPage.tsx index bf7ab7c..0c503c3 100644 --- a/frontend/src/pages/marketing/FeaturesPage.tsx +++ b/frontend/src/pages/marketing/FeaturesPage.tsx @@ -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 ( -
- {/* Header Section */} -
+
+ + {/* Header */} +
+

+ Built for Developers, Designed for Business +

+

+ SmoothSchedule isn't just cloud software. It's a programmable platform that adapts to your unique business logic. +

+
+ + {/* Feature 1: The Automation Engine */} +
-
-

- {t('marketing.features.title')} -

-

- {t('marketing.features.subtitle')} -

+
+
+
+ + Automation Engine +
+

+ Automated Task Manager +

+

+ Most schedulers only book appointments. SmoothSchedule runs your business. + Our "Automated Task Manager" executes internal tasks without blocking your calendar. +

+ +
    + {[ + 'Run recurring jobs (e.g., "Every Monday at 9am")', + 'Execute custom logic securely', + 'Access full customer and event context', + 'Zero infrastructure management' + ].map((item) => ( +
  • + + {item} +
    • + ))} +
+
+ +
+
+ +
- {/* Feature Categories */} - {featureCategories.map((category, categoryIndex) => ( -
-
-

- {category.title} -

-
- {category.features.map((feature, featureIndex) => ( - - ))} + {/* Feature 2: Multi-Tenancy */} +
+
+
+
+
+
+
+ +
tenant_a_vault
+
+
+
+
+ +
tenant_b_vault
+
+
+
+
+
+ + Strict Data Isolation +
+
+
+ +
+
+ + Enterprise Security +
+

+ True Data Isolation +

+

+ 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. +

+ +
+
+
+ +
+
+

Custom Domains

+

+ Serve the app on your own domain (e.g., `schedule.yourbrand.com`). +

+
+
+
+
+ +
+
+

White Labeling

+

+ Remove our branding and make the platform your own. +

+
+
+
-
- ))} +
+
- {/* CTA Section */}
); diff --git a/frontend/src/pages/marketing/HomePage.tsx b/frontend/src/pages/marketing/HomePage.tsx index ba90342..dca98d9 100644 --- a/frontend/src/pages/marketing/HomePage.tsx +++ b/frontend/src/pages/marketing/HomePage.tsx @@ -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 (
- {/* Hero Section */} + {/* Hero Section - Updated Copy */} - {/* Features Section */} + {/* Feature Grid */}
- {/* Header */}

- {t('marketing.features.title')} + The Operating System for Service Businesses

- {t('marketing.features.subtitle')} + More than just a calendar. A complete platform engineered for growth, automation, and scale.

- {/* Feature Grid */}
{features.map((feature) => ( ))}
- - {/* View All Features Link */} -
- - {t('common.viewAll')} {t('marketing.nav.features').toLowerCase()} - - -
- {/* How It Works Section */} - + {/* Plugin Showcase - NEW */} + - {/* Stats Section */} - + {/* Benefits Section (Replaces Stats) */} + {/* Testimonials Section */}
- {/* Header */}

- {t('marketing.testimonials.title')} + Trusted by Modern Businesses

- {t('marketing.testimonials.subtitle')} + See why forward-thinking companies choose SmoothSchedule.

- {/* Testimonials Grid */}
{testimonials.map((testimonial, index) => ( @@ -169,98 +138,6 @@ const HomePage: React.FC = () => {
- {/* Pricing Preview Section */} -
-
- {/* Header */} -
-

- {t('marketing.pricing.title')} -

-

- {t('marketing.pricing.subtitle')} -

-
- - {/* Pricing Cards Preview */} -
- {/* Free */} -
-

- {t('marketing.pricing.tiers.free.name')} -

-

- {t('marketing.pricing.tiers.free.description')} -

-
- $0 - {t('marketing.pricing.perMonth')} -
- - {t('marketing.pricing.getStarted')} - -
- - {/* Professional - Highlighted */} -
-
- {t('marketing.pricing.mostPopular')} -
-

- {t('marketing.pricing.tiers.professional.name')} -

-

- {t('marketing.pricing.tiers.professional.description')} -

-
- $29 - {t('marketing.pricing.perMonth')} -
- - {t('marketing.pricing.getStarted')} - -
- - {/* Business */} -
-

- {t('marketing.pricing.tiers.business.name')} -

-

- {t('marketing.pricing.tiers.business.description')} -

-
- $79 - {t('marketing.pricing.perMonth')} -
- - {t('marketing.pricing.getStarted')} - -
-
- - {/* View Full Pricing Link */} -
- - View full pricing details - - -
-
-
- {/* Final CTA */}
diff --git a/frontend/src/pages/marketing/PricingPage.tsx b/frontend/src/pages/marketing/PricingPage.tsx index 68ff789..1c4aef1 100644 --- a/frontend/src/pages/marketing/PricingPage.tsx +++ b/frontend/src/pages/marketing/PricingPage.tsx @@ -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 ( -
- {/* Header Section */} -
-
-
-

- {t('marketing.pricing.title')} -

-

- {t('marketing.pricing.subtitle')} -

-
+
+ {/* Header */} +
+

+ Simple, Transparent Pricing +

+

+ Start for free, upgrade as you grow. No hidden fees. +

+
- {/* Billing Toggle */} -
-
- - {t('marketing.pricing.monthly')} - - - - {t('marketing.pricing.annual')} - -
- {billingPeriod === 'annual' && ( - - {t('marketing.pricing.annualSave')} - - )} -
- - {/* Pricing Cards */} -
- - - - -
-
-
+ {/* Pricing Table */} +
+ +
{/* FAQ Section */} -
-
-
-

- {t('marketing.faq.title')} -

-

- {t('marketing.faq.subtitle')} -

-
+
+

+ Frequently Asked Questions +

+ +
- -
-
- - {/* CTA Section */} - + {/* CTA */} +
); }; diff --git a/frontend/src/pages/marketing/SignupPage.tsx b/frontend/src/pages/marketing/SignupPage.tsx index 92d0854..e85011c 100644 --- a/frontend/src/pages/marketing/SignupPage.tsx +++ b/frontend/src/pages/marketing/SignupPage.tsx @@ -317,7 +317,7 @@ const SignupPage: React.FC = () => { {t('marketing.signup.success.yourUrl')}

- {formData.subdomain}.smoothschedule.com + {formData.subdomain}.{getBaseDomain()}

@@ -357,13 +357,12 @@ const SignupPage: React.FC = () => {

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 ? ( @@ -372,22 +371,20 @@ const SignupPage: React.FC = () => { )}
{index < steps.length - 1 && (
step.number + className={`flex-1 h-1 mx-2 rounded ${currentStep > step.number ? 'bg-green-500' : 'bg-gray-200 dark:bg-gray-700' - }`} + }`} /> )} @@ -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 && (

{errors.businessName}

@@ -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`} /> .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 && (

{errors.addressLine1}

@@ -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 && (

{errors.city}

@@ -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 && (

{errors.state}

@@ -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 && (

{errors.postalCode}

@@ -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 && (

{errors.firstName}

@@ -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 && (

{errors.lastName}

@@ -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 && (

{errors.email}

@@ -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 && (

{errors.password}

@@ -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 && (

{errors.confirmPassword}

@@ -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 && ( @@ -817,11 +802,10 @@ const SignupPage: React.FC = () => {

{formData.plan === plan.id && ( diff --git a/frontend/src/pages/platform/PlatformBusinesses.tsx b/frontend/src/pages/platform/PlatformBusinesses.tsx index af80543..8fc8631 100644 --- a/frontend/src/pages/platform/PlatformBusinesses.tsx +++ b/frontend/src/pages/platform/PlatformBusinesses.tsx @@ -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 = ({ 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 = ({ 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) => ( - - -
- {business.name} -
- - -
- {business.subdomain}.{getBaseDomain()} -
- - - - {business.tier} - - - -
- {business.owner ? business.owner.full_name : '-'} -
- {business.owner && ( -
- {business.owner.email} -
- )} - - - {business.is_active ? ( - - - {t('platform.active')} - - ) : ( - - - {t('platform.inactive')} - - )} - - - {business.owner && ( + + {business.owner && !business.owner.email_verified && ( // Assuming PlatformBusiness owner object has email_verified, if not we might need to fetch it or update interface + + )} + {business.owner && ( + + )} - )} - - - + + } + /> ); if (isLoading) { @@ -123,139 +119,78 @@ const PlatformBusinesses: React.FC = ({ onMasquerade }) return (
- {/* Header */} -
-
-

{t('platform.businesses')}

-

{t('platform.businessesDescription')}

-
- -
- {/* Search Bar */} -
-
- - 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" - /> -
- -
- {/* Business Table */} -
-
- - - - - - - - - - - - - {activeBusinesses.map(renderBusinessRow)} - -
- {t('platform.businessName')} - - {t('platform.subdomain')} - - {t('platform.tier')} - - {t('platform.owner')} - - {t('platform.status')} - - {t('common.actions')} -
-
- - {activeBusinesses.length === 0 && inactiveBusinesses.length === 0 && ( -
-

- {searchTerm ? t('platform.noBusinessesFound') : t('platform.noBusinesses')} -

-
- )} -
- - {/* Inactive Businesses Section */} - {inactiveBusinesses.length > 0 && ( -
+ 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" > -
- {showInactiveBusinesses ? : } - - - Inactive Businesses ({inactiveBusinesses.length}) - -
+ + Invite Tenant + } + emptyMessage={searchTerm ? t('platform.noBusinessesFound') : t('platform.noBusinesses')} + extraContent={ + inactiveBusinesses.length > 0 ? ( +
+ - {showInactiveBusinesses && ( -
-
- - - - - - - - - - - - - {inactiveBusinesses.map(renderBusinessRow)} - -
- {t('platform.businessName')} - - {t('platform.subdomain')} - - {t('platform.tier')} - - {t('platform.owner')} - - {t('platform.status')} - - {t('common.actions')} -
-
+ {showInactiveBusinesses && ( +
+ +
+ )}
- )} -
- )} + ) : null + } + /> {/* Modals */} setShowInviteModal(false)} /> - setEditingBusiness(null)} /> diff --git a/frontend/src/pages/platform/PlatformUsers.tsx b/frontend/src/pages/platform/PlatformUsers.tsx index ab3cd3f..c023f52 100644 --- a/frontend/src/pages/platform/PlatformUsers.tsx +++ b/frontend/src/pages/platform/PlatformUsers.tsx @@ -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 = ({ onMasquerade }) => { const { t } = useTranslation(); + const queryClient = useQueryClient(); const [searchTerm, setSearchTerm] = useState(''); const [roleFilter, setRoleFilter] = useState('all'); const { data: users, isLoading, error } = usePlatformUsers(); + const [editingUser, setEditingUser] = useState(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 = ({ onMasquerade }) => { }); }; - if (isLoading) { - return ( -
-
{t('common.loading')}
-
- ); - } + 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 ( -
-
{t('errors.generic')}
-
- ); - } + const renderRow = (u: PlatformUser) => ( + + {u.email} + {u.email_verified && } + + } + actions={ + <> + {!u.email_verified && ( + + )} + + + + } + /> + ); return ( -
-
-
-

{t('platform.userDirectory')}

-

{t('platform.userDirectoryDescription')}

-
-
- -
-
- - 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" - /> -
- -
- -
- - - - - - - - - - - {filteredUsers.map((u) => ( - - - - - - - ))} - -
{t('platform.user')}{t('platform.role')}{t('platform.email')}{t('common.actions')}
-
-
- {(u.name || u.username).charAt(0).toUpperCase()} -
-
-
{u.name || u.username}
- {u.business_name && ( -
{u.business_name}
- )} -
-
- 		- - {(u.role || 'customer').replace(/_/g, ' ')} - - - {u.email} - - -
- {filteredUsers.length === 0 && ( -
- {t('platform.noUsersFound')} -
- )} -
-
+ <> + + setEditingUser(null)} + /> + ); }; diff --git a/frontend/src/pages/platform/components/EditPlatformEntityModal.tsx b/frontend/src/pages/platform/components/EditPlatformEntityModal.tsx new file mode 100644 index 0000000..37971cc --- /dev/null +++ b/frontend/src/pages/platform/components/EditPlatformEntityModal.tsx @@ -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 = ({ + entity, + type, + isOpen, + onClose, +}) => { + if (!isOpen || !entity) return null; + + if (type === 'business') { + return ( + + ); + } + + 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 ( + + ); + } + + return null; +}; + +export default EditPlatformEntityModal; diff --git a/frontend/src/pages/platform/components/PlatformListRow.tsx b/frontend/src/pages/platform/components/PlatformListRow.tsx new file mode 100644 index 0000000..65b77f2 --- /dev/null +++ b/frontend/src/pages/platform/components/PlatformListRow.tsx @@ -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 = ({ + avatarLetter, + primaryText, + secondaryText, + badgeText, + badgeColor = 'bg-gray-100 text-gray-800', + tertiaryText, + actions, +}) => { + return ( + + +
+
+ {avatarLetter} +
+
+
{primaryText}
+ {secondaryText && ( +
{secondaryText}
+ )} +
+
+ + + + {badgeText} + + + +
+ {tertiaryText} +
+ + +
+ {actions} +
+ + + ); +}; + +export default PlatformListRow; diff --git a/frontend/src/pages/platform/components/PlatformListing.tsx b/frontend/src/pages/platform/components/PlatformListing.tsx new file mode 100644 index 0000000..6f0597d --- /dev/null +++ b/frontend/src/pages/platform/components/PlatformListing.tsx @@ -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 { + 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({ + title, + description, + isLoading, + error, + data, + renderRow, + columns, + searchPlaceholder, + searchTerm, + onSearchChange, + filterOptions, + filterValue, + onFilterChange, + actionButton, + emptyMessage, + extraContent, +}: PlatformListingProps) { + const { t } = useTranslation(); + + if (isLoading) { + return ( +
+
{t('common.loading')}
+
+ ); + } + + if (error) { + return ( +
+
{t('errors.generic')}
+
+ ); + } + + return ( +
+
+
+

{title}

+

{description}

+
+ {actionButton} +
+ +
+
+ + 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" + /> +
+ {filterOptions && onFilterChange && ( + + )} +
+ + + + {extraContent} +
+ ); +} + +export default PlatformListing; diff --git a/frontend/src/pages/platform/components/PlatformTable.tsx b/frontend/src/pages/platform/components/PlatformTable.tsx new file mode 100644 index 0000000..c5e7707 --- /dev/null +++ b/frontend/src/pages/platform/components/PlatformTable.tsx @@ -0,0 +1,52 @@ +import React, { ReactNode } from 'react'; +import { useTranslation } from 'react-i18next'; + +interface PlatformTableProps { + data: T[]; + columns: string[]; + renderRow: (item: T) => ReactNode; + emptyMessage?: string; + className?: string; +} + +function PlatformTable({ + 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) { + const { t } = useTranslation(); + + return ( +
+
+ + + + {columns.map((col, idx) => ( + + ))} + + + + {data.map((item, idx) => ( + + {renderRow(item)} + + ))} + +
+ {col} +
+
+ {data.length === 0 && ( +
+ {emptyMessage || t('common.noResults')} +
+ )} +
+ ); +} + +export default PlatformTable; diff --git a/smoothschedule/config/settings/base.py b/smoothschedule/config/settings/base.py index 1ecc3d5..e0dbbde 100644 --- a/smoothschedule/config/settings/base.py +++ b/smoothschedule/config/settings/base.py @@ -314,7 +314,7 @@ REST_FRAMEWORK = { } # django-cors-headers - https://github.com/adamchainz/django-cors-headers#setup -CORS_URLS_REGEX = r"^/api/.*$" +CORS_URLS_REGEX = r"^/(api|auth)/.*$" # By Default swagger ui is available only to admin user(s). You can change permission classes to change that # See more configuration options at https://drf-spectacular.readthedocs.io/en/latest/settings.html#settings diff --git a/smoothschedule/config/urls.py b/smoothschedule/config/urls.py index a13796b..54e6f2c 100644 --- a/smoothschedule/config/urls.py +++ b/smoothschedule/config/urls.py @@ -14,7 +14,8 @@ from smoothschedule.users.api_views import ( login_view, current_user_view, logout_view, send_verification_email, verify_email, hijack_acquire_view, hijack_release_view, staff_invitations_view, cancel_invitation_view, resend_invitation_view, - invitation_details_view, accept_invitation_view, decline_invitation_view + invitation_details_view, accept_invitation_view, decline_invitation_view, + check_subdomain_view, signup_view ) from smoothschedule.users.mfa_api_views import ( mfa_status, send_phone_verification, verify_phone, enable_sms_mfa, @@ -66,6 +67,8 @@ urlpatterns += [ path("api/auth/oauth/", include("core.oauth_urls", namespace="auth_oauth")), # Auth API path("api/auth-token/", csrf_exempt(obtain_auth_token), name="obtain_auth_token"), + path("auth/signup/check-subdomain/", check_subdomain_view, name="check_subdomain"), + path("auth/signup/", signup_view, name="signup"), path("api/auth/login/", login_view, name="login"), path("api/auth/me/", current_user_view, name="current_user"), path("api/auth/logout/", logout_view, name="logout"), diff --git a/smoothschedule/docker-compose.production.yml b/smoothschedule/docker-compose.production.yml index 789d26a..7d5204b 100644 --- a/smoothschedule/docker-compose.production.yml +++ b/smoothschedule/docker-compose.production.yml @@ -48,7 +48,7 @@ services: nginx: build: - context: ../frontend + context: ../smoothschedule-frontend dockerfile: Dockerfile.prod depends_on: - django diff --git a/smoothschedule/platform_admin/serializers.py b/smoothschedule/platform_admin/serializers.py index 1609963..3b36286 100644 --- a/smoothschedule/platform_admin/serializers.py +++ b/smoothschedule/platform_admin/serializers.py @@ -210,6 +210,7 @@ class TenantSerializer(serializers.ModelSerializer): 'full_name': owner.full_name, 'email': owner.email, 'role': owner.role.lower(), + 'email_verified': owner.email_verified, } except: pass @@ -388,7 +389,7 @@ class PlatformUserSerializer(serializers.ModelSerializer): model = User fields = [ 'id', 'email', 'username', 'first_name', 'last_name', 'full_name', 'role', - 'is_active', 'is_staff', 'is_superuser', 'permissions', + 'is_active', 'is_staff', 'is_superuser', 'email_verified', 'permissions', 'business', 'business_name', 'business_subdomain', 'date_joined', 'last_login', 'created_at' ] diff --git a/smoothschedule/platform_admin/views.py b/smoothschedule/platform_admin/views.py index 9ce5b6c..3becfac 100644 --- a/smoothschedule/platform_admin/views.py +++ b/smoothschedule/platform_admin/views.py @@ -800,6 +800,16 @@ class PlatformUserViewSet(viewsets.ModelViewSet): return queryset + @action(detail=True, methods=['post']) + def verify_email(self, request, pk=None): + """Manually verify a user's email""" + user = self.get_object() + user.email_verified = True + user.save(update_fields=['email_verified']) + return Response({'status': 'email verified'}) + + + def partial_update(self, request, *args, **kwargs): """ Update platform user. diff --git a/smoothschedule/smoothschedule/users/api_views.py b/smoothschedule/smoothschedule/users/api_views.py index 3d1a5aa..e3c2c1e 100644 --- a/smoothschedule/smoothschedule/users/api_views.py +++ b/smoothschedule/smoothschedule/users/api_views.py @@ -18,6 +18,8 @@ from .mfa_services import mfa_manager from core.permissions import can_hijack from rest_framework import serializers from schedule.models import Resource, ResourceType +from core.models import Tenant, Domain +from django_tenants.utils import schema_context @api_view(['POST']) @@ -849,3 +851,120 @@ The Smooth Schedule Team [invitation.email], fail_silently=False, ) + + +@api_view(['POST']) +@permission_classes([AllowAny]) +def check_subdomain_view(request): + """ + Check if a subdomain is available. + POST /api/auth/signup/check-subdomain/ + Body: { "subdomain": "example" } + """ + subdomain = request.data.get('subdomain', '').strip().lower() + if not subdomain: + return Response({"error": "Subdomain is required"}, status=status.HTTP_400_BAD_REQUEST) + + # Check reserved words + reserved = ['www', 'api', 'admin', 'mail', 'platform', 'app', 'dashboard', 'status', 'public'] + if subdomain in reserved: + return Response({"available": False, "reason": "Reserved"}, status=status.HTTP_200_OK) + + # Check Tenant schema_name + if Tenant.objects.filter(schema_name=subdomain).exists(): + return Response({"available": False}, status=status.HTTP_200_OK) + + # Check Domain + if Domain.objects.filter(domain__startswith=f"{subdomain}.").exists(): + return Response({"available": False}, status=status.HTTP_200_OK) + + return Response({"available": True}, status=status.HTTP_200_OK) + + +@api_view(['POST']) +@permission_classes([AllowAny]) +def signup_view(request): + """ + Sign up a new tenant and owner. + POST /api/auth/signup/ + """ + data = request.data + + # 1. Validate Subdomain + subdomain = data.get('subdomain', '').strip().lower() + if not subdomain: + return Response({"detail": "Subdomain is required"}, status=status.HTTP_400_BAD_REQUEST) + + if Tenant.objects.filter(schema_name=subdomain).exists(): + return Response({"detail": "Subdomain already taken"}, status=status.HTTP_400_BAD_REQUEST) + + # 2. Validate User + email = data.get('email', '').strip().lower() + password = data.get('password', '') + if User.objects.filter(email=email).exists(): + return Response({"detail": "User with this email already exists"}, status=status.HTTP_400_BAD_REQUEST) + + try: + with schema_context('public'): + # 3. Create Tenant + tenant = Tenant.objects.create( + schema_name=subdomain, + name=data.get('business_name', subdomain), + subscription_tier=data.get('tier', 'FREE'), + primary_color='#2563eb', # Default + secondary_color='#0ea5e9', # Default + # Address info + contact_email=email, + phone=data.get('phone', ''), + ) + + # 4. Create Domain + # Determine root domain based on settings or environment + # For dev, we use lvh.me + root_domain = "lvh.me" + # In production, this should be smoothschedule.com + # We can infer from request host or settings + if 'smoothschedule.com' in request.get_host(): + root_domain = 'smoothschedule.com' + + domain_url = f"{subdomain}.{root_domain}" + Domain.objects.create( + domain=domain_url, + tenant=tenant, + is_primary=True + ) + + # 5. Create User (Owner) + user = User.objects.create_user( + username=email.split('@')[0], # Fallback username + email=email, + password=password, + first_name=data.get('first_name', ''), + last_name=data.get('last_name', ''), + role=User.Role.TENANT_OWNER, + tenant=tenant, + email_verified=False, # Require verification + ) + + # 6. Generate Token + token = Token.objects.create(user=user) + + # 7. Send Verification Email (optional, but good practice) + # We can reuse send_verification_email logic or call it here + # For now, we just return success + + return Response({ + 'access': token.key, + 'user': _get_user_data(user), + 'tenant': { + 'id': tenant.id, + 'name': tenant.name, + 'subdomain': subdomain, + 'domain': domain_url + } + }, status=status.HTTP_201_CREATED) + + except Exception as e: + # Cleanup if failed (transaction atomic would be better but this is simple) + # In a real app, use atomic transaction + return Response({"detail": str(e)}, status=status.HTTP_500_INTERNAL_SERVER_ERROR) diff --git a/verify_signup.sh b/verify_signup.sh new file mode 100644 index 0000000..b5cfa02 --- /dev/null +++ b/verify_signup.sh @@ -0,0 +1,27 @@ +#!/bin/bash + +BASE_URL="http://lvh.me:8000/auth/signup/" + +echo "1. Testing Successful Signup (testcompany11)..." +curl -s -X POST $BASE_URL \ + -H "Content-Type: application/json" \ + -d '{"subdomain": "testcompany11", "business_name": "Test 11", "email": "test11@example.com", "password": "password123", "first_name": "Test", "last_name": "User"}' \ + | grep "access" && echo "SUCCESS" || echo "FAILED" + +echo -e "\n2. Testing Duplicate Subdomain (testcompany11)..." +curl -s -X POST $BASE_URL \ + -H "Content-Type: application/json" \ + -d '{"subdomain": "testcompany11", "business_name": "Test 11 Duplicate", "email": "test11_dup@example.com", "password": "password123", "first_name": "Test", "last_name": "User"}' \ + | grep "detail" + +echo -e "\n3. Testing Duplicate Email (test11@example.com)..." +curl -s -X POST $BASE_URL \ + -H "Content-Type: application/json" \ + -d '{"subdomain": "testcompany12", "business_name": "Test 12", "email": "test11@example.com", "password": "password123", "first_name": "Test", "last_name": "User"}' \ + | grep "detail" + +echo -e "\n4. Testing Missing Subdomain..." +curl -s -X POST $BASE_URL \ + -H "Content-Type: application/json" \ + -d '{"business_name": "Test 13", "email": "test13@example.com", "password": "password123"}' \ + | grep "detail"