diff --git a/apps/frontend/app/dashboard/settings/organization/page.tsx b/apps/frontend/app/dashboard/settings/organization/page.tsx index f376da3..7a3d8aa 100644 --- a/apps/frontend/app/dashboard/settings/organization/page.tsx +++ b/apps/frontend/app/dashboard/settings/organization/page.tsx @@ -27,14 +27,15 @@ export default function OrganizationSettingsPage() { const searchParams = useSearchParams(); const [activeTab, setActiveTab] = useState('information'); - // Auto-switch to subscription tab if coming back from Stripe + // Auto-switch to subscription tab if coming back from Stripe (only for ADMIN/MANAGER) useEffect(() => { const isSuccess = searchParams.get('success') === 'true'; const isCanceled = searchParams.get('canceled') === 'true'; - if (isSuccess || isCanceled) { + const canAccessBilling = user?.role === 'ADMIN' || user?.role === 'MANAGER'; + if ((isSuccess || isCanceled) && canAccessBilling) { setActiveTab('subscription'); } - }, [searchParams]); + }, [searchParams, user?.role]); const [organization, setOrganization] = useState(null); const [formData, setFormData] = useState({ name: '', @@ -165,6 +166,9 @@ export default function OrganizationSettingsPage() { ); } + // Check if user can view subscription and licenses (only ADMIN and MANAGER) + const canViewBilling = user?.role === 'ADMIN' || user?.role === 'MANAGER'; + const tabs = [ { id: 'information' as TabType, @@ -185,24 +189,27 @@ export default function OrganizationSettingsPage() { ), }, - { - id: 'subscription' as TabType, - label: 'Abonnement', - icon: ( - - - - ), - }, - { - id: 'licenses' as TabType, - label: 'Licences', - icon: ( - - - - ), - }, + // Only show subscription and licenses tabs for ADMIN and MANAGER roles + ...(canViewBilling ? [ + { + id: 'subscription' as TabType, + label: 'Abonnement', + icon: ( + + + + ), + }, + { + id: 'licenses' as TabType, + label: 'Licences', + icon: ( + + + + ), + }, + ] : []), ]; return ( @@ -432,9 +439,9 @@ export default function OrganizationSettingsPage() { )} - {activeTab === 'subscription' && } + {activeTab === 'subscription' && canViewBilling && } - {activeTab === 'licenses' && } + {activeTab === 'licenses' && canViewBilling && } {/* Actions (only for information and address tabs) */} diff --git a/apps/frontend/app/page.tsx b/apps/frontend/app/page.tsx index fcf910f..6d3f9fb 100644 --- a/apps/frontend/app/page.tsx +++ b/apps/frontend/app/page.tsx @@ -22,6 +22,12 @@ import { Container, FileText, LayoutDashboard, + Bell, + BookOpen, + Users, + Building2, + Check, + X, } from 'lucide-react'; import { useAuth } from '@/lib/context/auth-context'; @@ -50,6 +56,7 @@ export default function LandingPage() { const featuresRef = useRef(null); const statsRef = useRef(null); const toolsRef = useRef(null); + const pricingRef = useRef(null); const testimonialsRef = useRef(null); const ctaRef = useRef(null); @@ -57,6 +64,7 @@ export default function LandingPage() { const isFeaturesInView = useInView(featuresRef, { once: true }); const isStatsInView = useInView(statsRef, { once: true }); const isToolsInView = useInView(toolsRef, { once: true }); + const isPricingInView = useInView(pricingRef, { once: true }); const isTestimonialsInView = useInView(testimonialsRef, { once: true }); const isCtaInView = useInView(ctaRef, { once: true }); @@ -72,84 +80,90 @@ export default function LandingPage() { }, []); const features = [ - { - icon: Search, - title: 'Recherche Intelligente', - description: - 'Comparez instantanément les tarifs de plus de 50 compagnies maritimes en temps réel.', - color: 'from-blue-500 to-cyan-500', - }, - { - icon: Zap, - title: 'Réservation Rapide', - description: 'Réservez vos containers LCL/FCL en quelques clics avec confirmation immédiate.', - color: 'from-purple-500 to-pink-500', - }, { icon: BarChart3, - title: 'Tableau de Bord', - description: 'Suivez tous vos envois en temps réel avec des KPIs détaillés et des analytics.', + title: 'Dashboard Analytics', + description: + 'Suivez tous vos KPIs en temps réel : bookings, volumes, revenus et alertes personnalisées.', + color: 'from-blue-500 to-cyan-500', + link: '/dashboard', + }, + { + icon: Package, + title: 'Gestion des Bookings', + description: 'Créez, gérez et suivez vos réservations maritimes LCL/FCL avec un historique complet.', + color: 'from-purple-500 to-pink-500', + link: '/dashboard/bookings', + }, + { + icon: FileText, + title: 'Documents Maritimes', + description: 'Centralisez tous vos documents : B/L, factures, certificats et documents douaniers.', color: 'from-orange-500 to-red-500', + link: '/dashboard/documents', }, { - icon: Globe, - title: '10 000+ Ports', + icon: Search, + title: 'Track & Trace', description: - 'Accédez à un réseau mondial de ports avec des données actualisées quotidiennement.', + 'Suivez vos conteneurs en temps réel auprès de 10+ transporteurs majeurs (Maersk, MSC, CMA CGM...).', color: 'from-green-500 to-emerald-500', + link: '/dashboard/track-trace', }, { - icon: TrendingUp, - title: 'Meilleurs Prix', + icon: BookOpen, + title: 'Wiki Maritime', description: - 'Optimisation automatique des tarifs pour vous garantir les prix les plus compétitifs.', + 'Base de connaissances complète : Incoterms, documents, procédures douanières et plus encore.', color: 'from-yellow-500 to-orange-500', + link: '/dashboard/wiki', }, { - icon: Shield, - title: 'Sécurisé', + icon: Bell, + title: 'Notifications Temps Réel', description: - 'Plateforme conforme aux standards internationaux avec chiffrement de bout en bout.', + 'Restez informé avec des alertes instantanées sur vos bookings, documents et mises à jour.', color: 'from-indigo-500 to-purple-500', + link: '/dashboard', }, ]; const tools = [ { - icon: Calculator, - title: 'Calculateur de Fret', - description: 'Estimez vos coûts de transport en temps réel', - link: '/tools/calculator', - }, - { - icon: MapPin, - title: 'Distance & Temps', - description: 'Calculez la distance et le temps entre ports', - link: '/tools/distance', + icon: LayoutDashboard, + title: 'Dashboard', + description: 'Vue d\'ensemble de votre activité maritime', + link: '/dashboard', }, { icon: Package, - title: 'Optimiseur de Chargement', - description: "Maximisez l'utilisation de vos containers", - link: '/tools/load-optimizer', - }, - { - icon: Ship, - title: 'Suivi en Temps Réel', - description: 'Trackez vos envois partout dans le monde', - link: '/tracking', + title: 'Mes Bookings', + description: 'Gérez toutes vos réservations en un seul endroit', + link: '/dashboard/bookings', }, { icon: FileText, - title: 'Documents Maritimes', - description: 'Générez automatiquement vos documents', - link: '/tools/documents', + title: 'Documents', + description: 'Accédez à tous vos documents maritimes', + link: '/dashboard/documents', }, { - icon: TrendingUp, - title: 'Index des Tarifs', - description: 'Suivez les tendances du marché maritime', - link: '/tools/freight-index', + icon: Search, + title: 'Track & Trace', + description: 'Suivez vos conteneurs en temps réel', + link: '/dashboard/track-trace', + }, + { + icon: BookOpen, + title: 'Wiki Maritime', + description: 'Base de connaissances du fret maritime', + link: '/dashboard/wiki', + }, + { + icon: Users, + title: 'Mon Profil', + description: 'Gérez vos informations personnelles', + link: '/dashboard/profile', }, ]; @@ -160,6 +174,63 @@ export default function LandingPage() { { value: '99.5%', label: 'Disponibilité', icon: CheckCircle2 }, ]; + const pricingPlans = [ + { + name: 'Starter', + price: 'Gratuit', + period: '', + description: 'Idéal pour découvrir la plateforme', + features: [ + { text: 'Jusqu\'à 5 bookings/mois', included: true }, + { text: 'Track & Trace illimité', included: true }, + { text: 'Wiki maritime complet', included: true }, + { text: 'Dashboard basique', included: true }, + { text: 'Support par email', included: true }, + { text: 'Gestion des documents', included: false }, + { text: 'Notifications temps réel', included: false }, + { text: 'API access', included: false }, + ], + cta: 'Commencer gratuitement', + highlighted: false, + }, + { + name: 'Professional', + price: '99€', + period: '/mois', + description: 'Pour les transitaires en croissance', + features: [ + { text: 'Bookings illimités', included: true }, + { text: 'Track & Trace illimité', included: true }, + { text: 'Wiki maritime complet', included: true }, + { text: 'Dashboard avancé + KPIs', included: true }, + { text: 'Support prioritaire', included: true }, + { text: 'Gestion des documents', included: true }, + { text: 'Notifications temps réel', included: true }, + { text: 'API access', included: false }, + ], + cta: 'Essai gratuit 14 jours', + highlighted: true, + }, + { + name: 'Enterprise', + price: 'Sur mesure', + period: '', + description: 'Pour les grandes entreprises', + features: [ + { text: 'Tout Professional +', included: true }, + { text: 'API access complet', included: true }, + { text: 'Intégrations personnalisées', included: true }, + { text: 'Account manager dédié', included: true }, + { text: 'SLA garanti 99.9%', included: true }, + { text: 'Formation sur site', included: true }, + { text: 'Multi-organisations', included: true }, + { text: 'Audit & conformité', included: true }, + ], + cta: 'Contactez-nous', + highlighted: false, + }, + ]; + const testimonials = [ { quote: @@ -474,15 +545,23 @@ export default function LandingPage() { key={index} variants={itemVariants} whileHover={{ scale: 1.05, y: -10 }} - className="group bg-white p-8 rounded-2xl shadow-lg hover:shadow-2xl transition-all border border-gray-100 cursor-pointer" > -
- -
-

{feature.title}

-

{feature.description}

+
+ +
+

{feature.title}

+

{feature.description}

+
+ Découvrir + +
+ ); })} @@ -603,6 +682,103 @@ export default function LandingPage() { + {/* Pricing Section */} +
+
+ +

+ Tarifs simples et transparents +

+

+ Choisissez le plan adapté à vos besoins. Évoluez à tout moment. +

+
+ + + {pricingPlans.map((plan, index) => ( + + {plan.highlighted && ( +
+ + Populaire + +
+ )} +
+

{plan.name}

+

{plan.description}

+
+ {plan.price} + {plan.period} +
+
    + {plan.features.map((feature, featureIndex) => ( +
  • + {feature.included ? ( + + ) : ( + + )} + + {feature.text} + +
  • + ))} +
+ + {plan.cta} + +
+
+ ))} +
+ + +

+ Tous les plans incluent un essai gratuit de 14 jours. Aucune carte bancaire requise. +

+

+ Des questions ? Contactez notre équipe commerciale +

+
+
+
+ {/* How It Works Section */}
diff --git a/apps/frontend/src/components/organization/SubscriptionTab.tsx b/apps/frontend/src/components/organization/SubscriptionTab.tsx index 30efbff..1bcac26 100644 --- a/apps/frontend/src/components/organization/SubscriptionTab.tsx +++ b/apps/frontend/src/components/organization/SubscriptionTab.tsx @@ -274,9 +274,6 @@ export default function SubscriptionTab() { : `Plus que ${subscription.availableLicenses} licence${subscription.availableLicenses === 1 ? '' : 's'} disponible${subscription.availableLicenses === 1 ? '' : 's'}.`}

)} -

- Les administrateurs (ADMIN) ont des licences illimitées et ne sont pas comptés. -

{/* Billing Period */} @@ -416,28 +413,6 @@ export default function SubscriptionTab() { ))} - - {/* Info about webhooks in development */} - {process.env.NODE_ENV === 'development' && ( -
-
-
- - - -
-
-

Mode développement

-
-

- Pour que les webhooks Stripe fonctionnent en local, exécutez :{' '} - stripe listen --forward-to localhost:4000/api/v1/subscriptions/webhook -

-
-
-
-
- )} ); }