mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-09-03 05:03:38 +00:00
557 lines
29 KiB
TypeScript
557 lines
29 KiB
TypeScript
'use client';
|
||
|
||
import React, { useState } from 'react';
|
||
import Link from 'next/link';
|
||
import { ChevronDown, ChevronRight, FileText, Home } from 'lucide-react';
|
||
|
||
const DocPage = () => {
|
||
const [expandedSections, setExpandedSections] = useState<{ [key: string]: boolean }>({
|
||
overview: true,
|
||
operations: true,
|
||
masterdata: false,
|
||
financial: false,
|
||
services: false,
|
||
security: false,
|
||
analytics: false,
|
||
system: false,
|
||
enhanced: false,
|
||
});
|
||
|
||
const toggleSection = (section: string) => {
|
||
setExpandedSections(prev => (({
|
||
...prev,
|
||
[section]: !prev[section]
|
||
})));
|
||
};
|
||
|
||
const scrollToSection = (id: string) => {
|
||
setTimeout(() => {
|
||
const element = document.getElementById(id);
|
||
if (element) {
|
||
const headerOffset = 120;
|
||
const elementPosition = element.getBoundingClientRect().top + window.pageYOffset;
|
||
const offsetPosition = elementPosition - headerOffset;
|
||
window.scrollTo({
|
||
top: offsetPosition,
|
||
behavior: 'smooth'
|
||
});
|
||
}
|
||
}, 0);
|
||
};
|
||
|
||
const sections = [
|
||
{
|
||
id: 'overview',
|
||
title: '📋 Overview & Getting Started',
|
||
items: [
|
||
{ id: 'about', label: 'Application Overview' },
|
||
{ id: 'features', label: 'Key Features' },
|
||
]
|
||
},
|
||
{
|
||
id: 'operations',
|
||
title: '📊 Operations',
|
||
items: [
|
||
{ id: 'bookings', label: 'Bookings' },
|
||
{ id: 'bookings-how', label: '→ How-To' },
|
||
{ id: 'passengers', label: 'Passengers' },
|
||
{ id: 'passengers-how', label: '→ How-To' },
|
||
{ id: 'tickets', label: 'Tickets' },
|
||
{ id: 'tickets-how', label: '→ How-To' },
|
||
]
|
||
},
|
||
{
|
||
id: 'masterdata',
|
||
title: '🏢 Master Data',
|
||
items: [
|
||
{ id: 'stations', label: 'Stations' },
|
||
{ id: 'stations-how', label: '→ How-To' },
|
||
{ id: 'trains', label: 'Trains' },
|
||
{ id: 'trains-how', label: '→ How-To' },
|
||
{ id: 'coaches', label: 'Coaches' },
|
||
{ id: 'coaches-how', label: '→ How-To' },
|
||
{ id: 'seats', label: 'Seats' },
|
||
{ id: 'seats-how', label: '→ How-To' },
|
||
{ id: 'classes', label: 'Seat Classes' },
|
||
{ id: 'classes-how', label: '→ How-To' },
|
||
{ id: 'routes', label: 'Routes' },
|
||
{ id: 'routes-how', label: '→ How-To' },
|
||
{ id: 'schedules', label: 'Schedules' },
|
||
{ id: 'schedules-how', label: '→ How-To' },
|
||
]
|
||
},
|
||
{
|
||
id: 'financial',
|
||
title: '💰 Financial',
|
||
items: [
|
||
{ id: 'pricing', label: 'Pricing & Fares' },
|
||
{ id: 'pricing-how', label: '→ How-To' },
|
||
{ id: 'currencies', label: 'Currencies' },
|
||
{ id: 'currencies-how', label: '→ How-To' },
|
||
{ id: 'payments', label: 'Payments' },
|
||
{ id: 'payments-how', label: '→ How-To' },
|
||
{ id: 'promos', label: 'Promo Codes' },
|
||
{ id: 'promos-how', label: '→ How-To' },
|
||
]
|
||
},
|
||
{
|
||
id: 'services',
|
||
title: '🎁 Customer Services',
|
||
items: [
|
||
{ id: 'loyalty', label: 'Loyalty' },
|
||
{ id: 'loyalty-how', label: '→ How-To' },
|
||
{ id: 'support', label: 'Support' },
|
||
{ id: 'support-how', label: '→ How-To' },
|
||
{ id: 'notifications', label: 'Notifications' },
|
||
{ id: 'notifications-how', label: '→ How-To' },
|
||
]
|
||
},
|
||
{
|
||
id: 'security',
|
||
title: '🔒 Security',
|
||
items: [
|
||
{ id: 'audit', label: 'Audit Logs' },
|
||
{ id: 'audit-how', label: '→ How-To' },
|
||
{ id: 'fraud', label: 'Fraud Detection' },
|
||
{ id: 'fraud-how', label: '→ How-To' },
|
||
{ id: 'verifayda', label: 'Verifayda' },
|
||
{ id: 'verifayda-how', label: '→ How-To' },
|
||
]
|
||
},
|
||
{
|
||
id: 'analytics',
|
||
title: '📈 Analytics',
|
||
items: [
|
||
{ id: 'reports', label: 'Reports' },
|
||
{ id: 'reports-how', label: '→ How-To' },
|
||
]
|
||
},
|
||
{
|
||
id: 'system',
|
||
title: '⚙️ System',
|
||
items: [
|
||
{ id: 'agents', label: 'Agents' },
|
||
{ id: 'agents-how', label: '→ How-To' },
|
||
{ id: 'users', label: 'Users' },
|
||
{ id: 'users-how', label: '→ How-To' },
|
||
{ id: 'system-config', label: 'System Config' },
|
||
{ id: 'system-config-how', label: '→ How-To' },
|
||
{ id: 'settings', label: 'Settings' },
|
||
{ id: 'settings-how', label: '→ How-To' },
|
||
]
|
||
},
|
||
{
|
||
id: 'enhanced',
|
||
title: '✨ Enhanced Features',
|
||
items: [
|
||
{ id: 'excess-baggage', label: 'Excess Baggage' },
|
||
{ id: 'excess-baggage-how', label: '→ How-To' },
|
||
{ id: 'packages', label: 'Travel Packages' },
|
||
{ id: 'packages-how', label: '→ How-To' },
|
||
{ id: 'package-inquiries', label: 'Package Inquiries' },
|
||
{ id: 'package-inquiries-how', label: '→ How-To' },
|
||
{ id: 'health', label: 'Health Monitoring' },
|
||
{ id: 'health-how', label: '→ How-To' },
|
||
{ id: 'boarding', label: 'Boarding Management' },
|
||
{ id: 'boarding-how', label: '→ How-To' },
|
||
{ id: 'fare-config', label: 'Advanced Fare Config' },
|
||
{ id: 'fare-config-how', label: '→ How-To' },
|
||
{ id: 'payment-methods', label: 'Payment Methods' },
|
||
{ id: 'payment-methods-how', label: '→ How-To' },
|
||
]
|
||
},
|
||
];
|
||
|
||
const HowToStep = ({ number, title, children }: { number: number; title: string; children: React.ReactNode }) => (
|
||
<div className="bg-blue-50 dark:bg-blue-900/20 p-6 rounded-lg border border-blue-200 dark:border-blue-800">
|
||
<div className="flex items-start gap-4">
|
||
<div className="flex items-center justify-center w-10 h-10 rounded-full bg-blue-600 text-white font-bold flex-shrink-0">{number}</div>
|
||
<div className="flex-1">
|
||
<h4 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">{title}</h4>
|
||
{children}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
return (
|
||
<div className="min-h-screen bg-slate-50 dark:bg-slate-900">
|
||
<div className="bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 sticky top-0 z-10">
|
||
<div className="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
|
||
<div className="flex items-center gap-3">
|
||
<FileText className="h-8 w-8 text-emerald-600" />
|
||
<h1 className="text-2xl font-bold text-slate-900 dark:text-white">Documentation</h1>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<a href="http://localhost:4000/api-docs" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition" title="Opens API documentation in new tab">
|
||
<FileText className="h-4 w-4" />
|
||
View API Docs
|
||
</a>
|
||
<Link href="/dashboard" target="_blank" className="flex items-center gap-2 px-4 py-2 rounded-lg bg-emerald-600 text-white hover:bg-emerald-700 transition">
|
||
<Home className="h-4 w-4" />
|
||
Dashboard
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="max-w-7xl mx-auto px-4 py-8">
|
||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
||
<div className="lg:col-span-1">
|
||
<div className="bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 sticky top-24 h-fit">
|
||
<nav>
|
||
{sections.map(section => (
|
||
<div key={section.id}>
|
||
<button onClick={() => toggleSection(section.id)} className="w-full flex items-center justify-between px-4 py-3 text-sm font-medium text-slate-900 dark:text-white hover:bg-slate-50 dark:hover:bg-slate-700 border-b border-slate-100 dark:border-slate-700">
|
||
<span>{section.title}</span>
|
||
{expandedSections[section.id] ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
|
||
</button>
|
||
{expandedSections[section.id] && (
|
||
<div className="bg-slate-50 dark:bg-slate-700/50">
|
||
{section.items.map(item => (
|
||
<button key={item.id} onClick={() => scrollToSection(item.id)} className="w-full text-left px-6 py-2 text-sm text-slate-600 dark:text-slate-300 hover:text-emerald-600 dark:hover:text-emerald-400 hover:bg-white dark:hover:bg-slate-700 transition">
|
||
{item.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="lg:col-span-3">
|
||
<div className="bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 p-8 space-y-12">
|
||
|
||
<div id="about">
|
||
<h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-4">Welcome to EDR Passenger Backoffice</h2>
|
||
<p className="text-slate-600 dark:text-slate-300 mb-4">Comprehensive management system for the Ethio-Djibouti Railway passenger platform. This documentation provides complete guidance on all features, operations, and best practices.</p>
|
||
<div className="bg-emerald-50 dark:bg-emerald-900/20 p-6 rounded-lg border border-emerald-200 dark:border-emerald-800">
|
||
<h3 className="text-lg font-semibold text-emerald-900 dark:text-emerald-100 mb-2">🎆 Version 1.0.0 - Complete Platform Release</h3>
|
||
<ul className="text-emerald-800 dark:text-emerald-200 space-y-1">
|
||
<li>• <strong>Excess Baggage:</strong> Complete baggage handling with agent tools and passenger self-pay</li>
|
||
<li>• <strong>Travel Packages:</strong> Bundled offerings with tiered pricing and inquiry management</li>
|
||
<li>• <strong>Health Monitoring:</strong> Comprehensive system status and performance tracking</li>
|
||
<li>• <strong>Boarding Management:</strong> Gate operations and passenger processing workflows</li>
|
||
<li>• <strong>Advanced Fare Config:</strong> Dynamic pricing with segment-based rules</li>
|
||
<li>• <strong>Payment Methods:</strong> Multi-provider payment configuration and management</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="features" className="border-t pt-8">
|
||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">🌟 Key Features</h2>
|
||
<p className="text-slate-600 dark:text-slate-300">Complete booking, passenger, fleet, and financial management.</p>
|
||
</div>
|
||
|
||
{/* BOOKINGS */}
|
||
<div id="bookings" className="border-t pt-8">
|
||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">📋 Bookings</h2>
|
||
<p className="text-slate-600 dark:text-slate-300">Manage passenger bookings with search, view, modify, and refund capabilities.</p>
|
||
</div>
|
||
|
||
<div id="bookings-how" className="border-t pt-8">
|
||
<h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">📋 How-To: Manage Bookings</h3>
|
||
<div className="space-y-4">
|
||
<HowToStep number={1} title="Access Bookings">
|
||
<ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
|
||
<li>Click "Bookings" in Operations section</li>
|
||
<li>View all bookings in table format</li>
|
||
</ol>
|
||
</HowToStep>
|
||
<HowToStep number={2} title="Search & Filter">
|
||
<ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
|
||
<li>Use search box for reference, email, or phone</li>
|
||
<li>Use Status dropdown to filter</li>
|
||
</ol>
|
||
</HowToStep>
|
||
<HowToStep number={3} title="Manage Bookings">
|
||
<ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
|
||
<li>Click "View Details" for full information</li>
|
||
<li>Click "Cancel Booking" to process refunds</li>
|
||
</ol>
|
||
</HowToStep>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="system-config" className="border-t pt-8">
|
||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">⚙️ System Config</h2>
|
||
<p className="text-slate-600 dark:text-slate-300">Centralized system configuration management with feature flags and operational controls.</p>
|
||
</div>
|
||
|
||
<div id="system-config-how" className="border-t pt-8">
|
||
<h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">⚙️ How-To: Manage System Configuration</h3>
|
||
<div className="space-y-4">
|
||
<HowToStep number={1} title="Access System Config">
|
||
<ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
|
||
<li>Click "System Config" in System section</li>
|
||
<li>View all configuration categories</li>
|
||
</ol>
|
||
</HowToStep>
|
||
<HowToStep number={2} title="Rate Limiting">
|
||
<ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
|
||
<li>Adjust auth endpoints limit (default: 5 req/min)</li>
|
||
<li>Set strict endpoints limit (default: 20 req/min)</li>
|
||
<li>Configure default endpoints limit (default: 100 req/min)</li>
|
||
</ol>
|
||
</HowToStep>
|
||
<HowToStep number={3} title="Seat Booking Settings">
|
||
<ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
|
||
<li>Set seat hold duration (default: 5 minutes)</li>
|
||
<li>Configure hold cutoff before departure (default: 2 hours)</li>
|
||
<li>Click "Save Changes" to apply</li>
|
||
</ol>
|
||
</HowToStep>
|
||
</div>
|
||
</div>
|
||
|
||
{/* EXCESS BAGGAGE */}
|
||
<div id="excess-baggage" className="border-t pt-8">
|
||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">📦 Excess Baggage</h2>
|
||
<p className="text-slate-600 dark:text-slate-300">Manage excess baggage charges at boarding with agent tools and passenger self-pay options.</p>
|
||
</div>
|
||
|
||
<div id="excess-baggage-how" className="border-t pt-8">
|
||
<h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">📦 How-To: Handle Excess Baggage</h3>
|
||
<div className="space-y-4">
|
||
<HowToStep number={1} title="Access Excess Baggage">
|
||
<ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
|
||
<li>Click "Excess Baggage" in Enhanced Features</li>
|
||
<li>View all baggage charges and their status</li>
|
||
</ol>
|
||
</HowToStep>
|
||
<HowToStep number={2} title="Search & Filter">
|
||
<ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
|
||
<li>Search by booking reference</li>
|
||
<li>Filter by status: PENDING, PAID, CASH_COLLECTED, EXPIRED, WAIVED</li>
|
||
<li>Use date filters for specific periods</li>
|
||
</ol>
|
||
</HowToStep>
|
||
<HowToStep number={3} title="Manage Charges">
|
||
<ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
|
||
<li>"Resend Link" for pending charges to passenger</li>
|
||
<li>"Waive" charges with reason (supervisor authority)</li>
|
||
<li>"Delete" expired or waived charges</li>
|
||
</ol>
|
||
</HowToStep>
|
||
</div>
|
||
</div>
|
||
|
||
{/* TRAVEL PACKAGES */}
|
||
<div id="packages" className="border-t pt-8">
|
||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">🎒 Travel Packages</h2>
|
||
<p className="text-slate-600 dark:text-slate-300">Manage pilgrimage and group travel packages with tiered pricing and capacity management.</p>
|
||
</div>
|
||
|
||
<div id="packages-how" className="border-t pt-8">
|
||
<h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🎒 How-To: Manage Travel Packages</h3>
|
||
<div className="space-y-4">
|
||
<HowToStep number={1} title="Create Package">
|
||
<ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
|
||
<li>Click "New Package" button</li>
|
||
<li>Fill package details: code, name, stations, schedules</li>
|
||
<li>Set capacity, validity period, and included services</li>
|
||
<li>Save package (starts in DRAFT status)</li>
|
||
</ol>
|
||
</HowToStep>
|
||
<HowToStep number={2} title="Configure Price Tiers">
|
||
<ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
|
||
<li>Click "Tiers" on package to manage pricing</li>
|
||
<li>Add tiers: seat type, label, price, capacity</li>
|
||
<li>Edit existing tiers (limited if bookings exist)</li>
|
||
<li>Delete unused tiers</li>
|
||
</ol>
|
||
</HowToStep>
|
||
<HowToStep number={3} title="Activate & Manage">
|
||
<ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
|
||
<li>"Activate" draft packages to make bookable</li>
|
||
<li>"Deactivate" active packages to stop new bookings</li>
|
||
<li>"Delete" packages with no bookings if needed</li>
|
||
</ol>
|
||
</HowToStep>
|
||
</div>
|
||
</div>
|
||
|
||
{/* PACKAGE INQUIRIES */}
|
||
<div id="package-inquiries" className="border-t pt-8">
|
||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">📝 Package Inquiries</h2>
|
||
<p className="text-slate-600 dark:text-slate-300">Manage incoming package booking inquiries and track lead conversion.</p>
|
||
</div>
|
||
|
||
<div id="package-inquiries-how" className="border-t pt-8">
|
||
<h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">📝 How-To: Handle Package Inquiries</h3>
|
||
<div className="space-y-4">
|
||
<HowToStep number={1} title="View Inquiries">
|
||
<ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
|
||
<li>Click "Package Inquiries" in Enhanced Features</li>
|
||
<li>Filter by package or inquiry status</li>
|
||
<li>View contact details, package interest, traveler count</li>
|
||
</ol>
|
||
</HowToStep>
|
||
<HowToStep number={2} title="Update Status">
|
||
<ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
|
||
<li>Use status dropdown: NEW → CONTACTED → CONVERTED/CLOSED</li>
|
||
<li>Mark as CONTACTED after first customer contact</li>
|
||
<li>Mark as CONVERTED when inquiry becomes booking</li>
|
||
<li>Mark as CLOSED if customer not interested</li>
|
||
</ol>
|
||
</HowToStep>
|
||
<HowToStep number={3} title="Lead Management">
|
||
<ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
|
||
<li>Respond to NEW inquiries within 24 hours</li>
|
||
<li>Follow up on CONTACTED inquiries regularly</li>
|
||
<li>Delete spam or duplicate inquiries as needed</li>
|
||
</ol>
|
||
</HowToStep>
|
||
</div>
|
||
</div>
|
||
|
||
{/* HEALTH MONITORING */}
|
||
<div id="health" className="border-t pt-8">
|
||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">🏥 Health Monitoring</h2>
|
||
<p className="text-slate-600 dark:text-slate-300">Monitor EDR Passenger API health with real-time system status and performance metrics.</p>
|
||
</div>
|
||
|
||
<div id="health-how" className="border-t pt-8">
|
||
<h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🏥 How-To: Monitor System Health</h3>
|
||
<div className="space-y-4">
|
||
<HowToStep number={1} title="Access Health Dashboard">
|
||
<ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
|
||
<li>Click "Health Monitoring" in Enhanced Features</li>
|
||
<li>View overall system status banner</li>
|
||
<li>Check individual probe cards (auto-refreshing)</li>
|
||
</ol>
|
||
</HowToStep>
|
||
<HowToStep number={2} title="Interpret Health Checks">
|
||
<ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
|
||
<li>Liveness: API process alive (30s refresh)</li>
|
||
<li>Readiness: Database connectivity + latency (30s refresh)</li>
|
||
<li>App Info: Version, uptime, environment (60s refresh)</li>
|
||
</ol>
|
||
</HowToStep>
|
||
<HowToStep number={3} title="Troubleshoot Issues">
|
||
<ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
|
||
<li>Red status: Check error details and system logs</li>
|
||
<li>High DB latency: Monitor database performance</li>
|
||
<li>Failed checks: Verify API server and connections</li>
|
||
<li>Use "Refresh" button for manual status update</li>
|
||
</ol>
|
||
</HowToStep>
|
||
</div>
|
||
</div>
|
||
|
||
{/* BOARDING MANAGEMENT */}
|
||
<div id="boarding" className="border-t pt-8">
|
||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">🚆 Boarding Management</h2>
|
||
<p className="text-slate-600 dark:text-slate-300">Manage gate operations and passenger boarding processes with real-time tracking.</p>
|
||
</div>
|
||
|
||
<div id="boarding-how" className="border-t pt-8">
|
||
<h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🚆 How-To: Manage Boarding Operations</h3>
|
||
<div className="space-y-4">
|
||
<HowToStep number={1} title="Access Boarding Management">
|
||
<ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
|
||
<li>Click "Boarding" in Enhanced Features</li>
|
||
<li>Select active trip/schedule for boarding</li>
|
||
<li>View real-time boarding dashboard</li>
|
||
</ol>
|
||
</HowToStep>
|
||
<HowToStep number={2} title="Monitor Boarding Process">
|
||
<ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
|
||
<li>Track total passengers expected vs boarded</li>
|
||
<li>Monitor boarding progress percentage</li>
|
||
<li>View gate status and any alerts</li>
|
||
</ol>
|
||
</HowToStep>
|
||
<HowToStep number={3} title="Handle Boarding Operations">
|
||
<ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
|
||
<li>Validate passenger tickets and documents</li>
|
||
<li>Resolve seat conflicts or issues</li>
|
||
<li>Process last-minute passengers and no-shows</li>
|
||
</ol>
|
||
</HowToStep>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ADVANCED FARE CONFIG */}
|
||
<div id="fare-config" className="border-t pt-8">
|
||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">📊 Advanced Fare Config</h2>
|
||
<p className="text-slate-600 dark:text-slate-300">Configure complex fare rules and dynamic pricing strategies with segment-based pricing.</p>
|
||
</div>
|
||
|
||
<div id="fare-config-how" className="border-t pt-8">
|
||
<h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">📊 How-To: Configure Advanced Fares</h3>
|
||
<div className="space-y-4">
|
||
<HowToStep number={1} title="Access Fare Configuration">
|
||
<ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
|
||
<li>Click "Advanced Fare Config" in Enhanced Features</li>
|
||
<li>Choose between Schedule Fares or Segment Fares</li>
|
||
<li>View existing fare rules and calculations</li>
|
||
</ol>
|
||
</HowToStep>
|
||
<HowToStep number={2} title="Create Fare Rules">
|
||
<ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
|
||
<li>Set fare amounts for specific schedules or segments</li>
|
||
<li>Define passenger categories (ADULT/CHILD) and nationalities</li>
|
||
<li>Configure validity periods and seasonal adjustments</li>
|
||
</ol>
|
||
</HowToStep>
|
||
<HowToStep number={3} title="Manage Dynamic Pricing">
|
||
<ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
|
||
<li>Apply route segment-specific pricing</li>
|
||
<li>Set nationality-based rate variations</li>
|
||
<li>Monitor fare engine integration and real-time calculations</li>
|
||
</ol>
|
||
</HowToStep>
|
||
</div>
|
||
</div>
|
||
|
||
{/* PAYMENT METHODS */}
|
||
<div id="payment-methods" className="border-t pt-8">
|
||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">💳 Payment Methods</h2>
|
||
<p className="text-slate-600 dark:text-slate-300">Configure and manage payment provider integrations with multi-provider support.</p>
|
||
</div>
|
||
|
||
<div id="payment-methods-how" className="border-t pt-8">
|
||
<h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">💳 How-To: Configure Payment Methods</h3>
|
||
<div className="space-y-4">
|
||
<HowToStep number={1} title="Access Payment Configuration">
|
||
<ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
|
||
<li>Click "Payment Methods" in Enhanced Features</li>
|
||
<li>View all configured payment providers</li>
|
||
<li>Check provider status and connectivity</li>
|
||
</ol>
|
||
</HowToStep>
|
||
<HowToStep number={2} title="Configure Providers">
|
||
<ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
|
||
<li>Set up API credentials (URLs, keys, merchant IDs)</li>
|
||
<li>Configure transaction fees and limits</li>
|
||
<li>Enable/disable specific payment methods</li>
|
||
</ol>
|
||
</HowToStep>
|
||
<HowToStep number={3} title="Test & Validate">
|
||
<ol className="list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300">
|
||
<li>Run test transactions for each provider</li>
|
||
<li>Validate webhook endpoints and security</li>
|
||
<li>Monitor API connectivity and error logs</li>
|
||
</ol>
|
||
</HowToStep>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-12 bg-slate-900 text-white py-8">
|
||
<div className="max-w-7xl mx-auto px-4 text-center text-slate-400">
|
||
<p>© 2026 Ethio-Djibouti Railway | Passenger Backoffice Documentation v1.0.0</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default DocPage; |