mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-27 07:22:53 +00:00
Documentations update
This commit is contained in:
Stephanos A
@@ -3,193 +3,48 @@
|
||||
import React, { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { ChevronDown, ChevronRight, FileText, Home } from 'lucide-react';
|
||||
import { navSections } from './sections/_shared';
|
||||
import OverviewSection from './sections/OverviewSection';
|
||||
import OperationsSection from './sections/OperationsSection';
|
||||
import TourismSection from './sections/TourismSection';
|
||||
import MasterDataSection from './sections/MasterDataSection';
|
||||
import FinancialSection from './sections/FinancialSection';
|
||||
import CustomerServicesSection from './sections/CustomerServicesSection';
|
||||
import SecuritySection from './sections/SecuritySection';
|
||||
import AnalyticsSection from './sections/AnalyticsSection';
|
||||
import SystemSection from './sections/SystemSection';
|
||||
|
||||
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,
|
||||
export default function DocPage() {
|
||||
const [expanded, setExpanded] = useState<Record<string, boolean>>({
|
||||
overview: true, operations: true, tourism: false, masterdata: false,
|
||||
financial: false, services: false, security: false, analytics: false, system: false,
|
||||
});
|
||||
|
||||
const toggleSection = (section: string) => {
|
||||
setExpandedSections(prev => (({
|
||||
...prev,
|
||||
[section]: !prev[section]
|
||||
})));
|
||||
};
|
||||
const toggle = (id: string) => setExpanded(prev => ({ ...prev, [id]: !prev[id] }));
|
||||
|
||||
const scrollToSection = (id: string) => {
|
||||
const scrollTo = (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'
|
||||
});
|
||||
}
|
||||
const el = document.getElementById(id);
|
||||
if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.pageYOffset - 120, 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">
|
||||
{/* Top bar */}
|
||||
<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>
|
||||
<FileText className="h-7 w-7 text-emerald-600" />
|
||||
<h1 className="text-xl 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 href="http://localhost:4000/api-docs" target="_blank" rel="noopener noreferrer"
|
||||
className="flex items-center gap-2 px-3 py-2 rounded-lg bg-blue-600 text-white text-sm hover:bg-blue-700 transition">
|
||||
<FileText className="h-4 w-4" /> 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 href="/dashboard" className="flex items-center gap-2 px-3 py-2 rounded-lg bg-emerald-600 text-white text-sm hover:bg-emerald-700 transition">
|
||||
<Home className="h-4 w-4" /> Dashboard
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
@@ -197,19 +52,25 @@ const DocPage = () => {
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 py-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
||||
|
||||
{/* Sidebar nav */}
|
||||
<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">
|
||||
<div className="bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 sticky top-24 max-h-[calc(100vh-7rem)] overflow-y-auto">
|
||||
<nav>
|
||||
{sections.map(section => (
|
||||
{navSections.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">
|
||||
<button
|
||||
onClick={() => toggle(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" />}
|
||||
{expanded[section.id] ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
|
||||
</button>
|
||||
{expandedSections[section.id] && (
|
||||
{expanded[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">
|
||||
<button key={item.id} onClick={() => scrollTo(item.id)}
|
||||
className="w-full text-left px-6 py-1.5 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>
|
||||
))}
|
||||
@@ -221,337 +82,29 @@ const DocPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<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 className="bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 p-8 space-y-2">
|
||||
<OverviewSection />
|
||||
<OperationsSection />
|
||||
<TourismSection />
|
||||
<MasterDataSection />
|
||||
<FinancialSection />
|
||||
<CustomerServicesSection />
|
||||
<SecuritySection />
|
||||
<AnalyticsSection />
|
||||
<SystemSection />
|
||||
</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 className="mt-12 bg-slate-900 text-white py-6">
|
||||
<div className="max-w-7xl mx-auto px-4 text-center text-slate-400 text-sm">
|
||||
© 2026 Ethio-Djibouti Railway · Passenger Backoffice Documentation v1.0.0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DocPage;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
import { HowToStep } from './_shared';
|
||||
|
||||
const li = 'text-sm text-slate-700 dark:text-slate-300';
|
||||
const ol = 'list-decimal pl-5 space-y-1 ' + li;
|
||||
|
||||
export default function AnalyticsSection() {
|
||||
return (
|
||||
<>
|
||||
<div id="reports" className="border-t pt-8">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">📈 Reports</h2>
|
||||
<p className={li}>Generate revenue, occupancy, agent performance, and passenger analytics reports with custom date ranges. Access level: Supervisor, Admin.</p>
|
||||
<div className="mt-3 grid grid-cols-2 gap-2 text-xs text-slate-600 dark:text-slate-400">
|
||||
{[
|
||||
['Revenue', 'Total, by route, by class, by payment method'],
|
||||
['Occupancy', 'Seat utilisation %, peak/off-peak analysis'],
|
||||
['Agent Performance', 'Counter bookings, commission, ranking'],
|
||||
['Passenger Analytics', 'New vs repeat, loyalty stats, regional split'],
|
||||
].map(([t, d]) => (
|
||||
<div key={t} className="bg-slate-50 dark:bg-slate-700/50 rounded p-2 border border-slate-200 dark:border-slate-600">
|
||||
<div className="font-semibold text-slate-700 dark:text-slate-300">{t}</div>
|
||||
<div>{d}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div id="reports-how" className="border-t pt-8">
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">📈 How-To: Generate Reports</h3>
|
||||
<div className="space-y-3">
|
||||
<HowToStep number={1} title="Configure & Generate">
|
||||
<ol className={ol}><li>Click <strong>Reports</strong> in Analytics & Reports</li><li>Select report type, set date range, apply optional route/agent filters</li><li>Choose group-by: Day / Week / Month / Year</li><li>Click <strong>Generate Report</strong></li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={2} title="Export">
|
||||
<ol className={ol}><li>Download as PDF, Excel, or CSV</li><li>Click <strong>Save Report</strong> to store config for one-click re-runs</li></ol>
|
||||
</HowToStep>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import { HowToStep } from './_shared';
|
||||
|
||||
const li = 'text-sm text-slate-700 dark:text-slate-300';
|
||||
const ol = 'list-decimal pl-5 space-y-1 ' + li;
|
||||
|
||||
export default function CustomerServicesSection() {
|
||||
return (
|
||||
<>
|
||||
<div id="loyalty" className="border-t pt-8">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🏆 Loyalty Program</h2>
|
||||
<p className={li}>View and manage passenger loyalty accounts, tiers, points, and rewards. Access level: Agent, Supervisor, Admin.</p>
|
||||
<div className="mt-3 overflow-x-auto">
|
||||
<table className="text-xs w-full border-collapse">
|
||||
<thead><tr className="bg-slate-100 dark:bg-slate-700">{['Tier','Points','Bonus'].map(h => <th key={h} className="text-left px-3 py-2 text-slate-700 dark:text-slate-300">{h}</th>)}</tr></thead>
|
||||
<tbody className="text-slate-600 dark:text-slate-400">
|
||||
<tr><td className="px-3 py-1">BRONZE</td><td>0–999</td><td>Standard</td></tr>
|
||||
<tr className="bg-slate-50 dark:bg-slate-700/30"><td className="px-3 py-1">SILVER</td><td>1,000–2,999</td><td>+5%</td></tr>
|
||||
<tr><td className="px-3 py-1">GOLD</td><td>3,000–4,999</td><td>+10%</td></tr>
|
||||
<tr className="bg-slate-50 dark:bg-slate-700/30"><td className="px-3 py-1">PLATINUM</td><td>5,000+</td><td>+15% + Priority</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="loyalty-how" className="border-t pt-8">
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">🏆 How-To: Manage Loyalty</h3>
|
||||
<div className="space-y-3">
|
||||
<HowToStep number={1} title="View Accounts">
|
||||
<ol className={ol}><li>Click <strong>Loyalty Program</strong> in Customer Services</li><li>Search by name/email; filter by tier</li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={2} title="Adjust Points (Admin)">
|
||||
<ol className={ol}><li>Click <strong>Adjust Points</strong> on an account</li><li>Enter amount, select reason (Bonus / Correction / Promotion), click <strong>Apply</strong></li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={3} title="Grant Rewards">
|
||||
<ol className={ol}><li>Click <strong>Grant Reward</strong>, select from catalog, specify quantity</li><li>Confirmation email sent to passenger automatically</li></ol>
|
||||
</HowToStep>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="notifications" className="border-t pt-8">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🔔 Notifications</h2>
|
||||
<p className={li}>View logs, manage templates, and send manual notifications via Email, SMS, or Push. Access level: Supervisor, Admin.</p>
|
||||
</div>
|
||||
<div id="notifications-how" className="border-t pt-8">
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">🔔 How-To: Manage Notifications</h3>
|
||||
<div className="space-y-3">
|
||||
<HowToStep number={1} title="View Log">
|
||||
<ol className={ol}><li>Click <strong>Notifications</strong> in Customer Services</li><li>Filter by recipient, channel, status, or date; click <strong>Retry</strong> on failures (max 3)</li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={2} title="Send Manual Notification">
|
||||
<ol className={ol}><li>Click <strong>Send Notification</strong></li><li>Select recipients, choose template or custom message, pick channels</li><li>Preview then <strong>Send</strong></li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={3} title="Manage Templates">
|
||||
<ol className={ol}><li>Open <strong>Templates</strong> tab; click a template to edit</li><li>Use placeholders: <code>{'{{name}}'}</code> <code>{'{{bookingRef}}'}</code></li><li>Click <strong>Add Template</strong> to create new ones</li></ol>
|
||||
</HowToStep>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
import { HowToStep } from './_shared';
|
||||
|
||||
const li = 'text-sm text-slate-700 dark:text-slate-300';
|
||||
const ol = 'list-decimal pl-5 space-y-1 ' + li;
|
||||
|
||||
export default function FinancialSection() {
|
||||
return (
|
||||
<>
|
||||
{/* PRICING */}
|
||||
<div id="pricing" className="border-t pt-8">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">💲 Pricing & Fares</h2>
|
||||
<p className={li}>View dynamically calculated fares per schedule and seat class. Fare = Base + Premium + Insurance. ADULT pays 100%; first CHILD free, subsequent CHILD 100%. Access level: Admin, Supervisor.</p>
|
||||
</div>
|
||||
<div id="pricing-how" className="border-t pt-8">
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">💲 How-To: View Schedule Fares</h3>
|
||||
<div className="space-y-3">
|
||||
<HowToStep number={1} title="Select Schedule">
|
||||
<ol className={ol}><li>Click <strong>Pricing & Fares</strong> in Financial</li><li>Choose a schedule from the dropdown</li><li>Table shows calculated fares per seat class and passenger type</li></ol>
|
||||
</HowToStep>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* TARIFF RATES */}
|
||||
<div id="tariff-rates" className="border-t pt-8">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">📊 Tariff Rates</h2>
|
||||
<p className={li}>Manage base per-km tariff rates used to calculate fares across routes and seat classes. Access level: Admin.</p>
|
||||
</div>
|
||||
<div id="tariff-rates-how" className="border-t pt-8">
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">📊 How-To: Manage Tariff Rates</h3>
|
||||
<div className="space-y-3">
|
||||
<HowToStep number={1} title="Create / Edit Rate">
|
||||
<ol className={ol}><li>Click <strong>Tariff Rates</strong> in Financial</li><li>Click <strong>Add Rate</strong> — set seat class, rate per km (ETB), passenger type, nationality, validity dates</li><li>Click <strong>Edit</strong> on existing rows to update; changes apply to new bookings only</li></ol>
|
||||
</HowToStep>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* FARE RULES */}
|
||||
<div id="fare-rules" className="border-t pt-8">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">📐 Fare Rules</h2>
|
||||
<p className={li}>Override or extend fares with schedule-specific or segment-specific rules, including nationality and passenger-type filters. Access level: Admin, Supervisor.</p>
|
||||
<div className="mt-3 bg-slate-50 dark:bg-slate-700/50 rounded p-3 text-xs text-slate-600 dark:text-slate-400 font-mono">
|
||||
Priority: Segment (nationality) → Segment (generic) → Schedule (nationality) → Schedule (generic) → Default class fare
|
||||
</div>
|
||||
</div>
|
||||
<div id="fare-rules-how" className="border-t pt-8">
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">📐 How-To: Manage Fare Rules</h3>
|
||||
<div className="space-y-3">
|
||||
<HowToStep number={1} title="Schedule Fare Override">
|
||||
<ol className={ol}><li>Click <strong>Fare Rules</strong> in Financial → <strong>Schedule Fares</strong> tab</li><li>Click <strong>Add Fare Rule</strong>: select schedule, seat class, fare (ETB), passenger type, nationality, validity dates</li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={2} title="Segment Fare Rule">
|
||||
<ol className={ol}><li>Switch to <strong>Segment Fares</strong> tab</li><li>Select route, then origin and destination stations</li><li>Set seat class, fare, passenger type, nationality, validity dates</li><li>Destination must be after origin on the route</li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={3} title="Edit / Delete">
|
||||
<ol className={ol}><li>Click <strong>Edit</strong> to update amount or dates</li><li>Click <strong>Delete</strong> — removed immediately for new bookings</li></ol>
|
||||
</HowToStep>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* PAYMENTS */}
|
||||
<div id="payments" className="border-t pt-8">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">💳 Payments</h2>
|
||||
<p className={li}>Monitor transactions across all providers and process refunds. Providers: Telebirr · CBE Birr · eBirr · Card · Wallet · WAAFI. Access level: Supervisor, Admin.</p>
|
||||
</div>
|
||||
<div id="payments-how" className="border-t pt-8">
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">💳 How-To: Manage Payments</h3>
|
||||
<div className="space-y-3">
|
||||
<HowToStep number={1} title="Search Transactions">
|
||||
<ol className={ol}><li>Click <strong>Payments</strong> in Financial</li><li>Search by booking reference or transaction ID</li><li>Filter by status (Succeeded · Failed · Processing · Refunded) or provider</li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={2} title="Process Refund">
|
||||
<ol className={ol}><li>Click <strong>Process Refund</strong> on a completed payment</li><li>Enter amount, select reason, add notes</li><li>Confirm — refund status: Pending → Processing → Completed</li></ol>
|
||||
</HowToStep>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CURRENCIES */}
|
||||
<div id="currencies" className="border-t pt-8">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">💱 Currencies</h2>
|
||||
<p className={li}>Manage ETB→DJF and ETB→USD exchange rates used for display conversion. ETB is the transaction currency. Access level: Admin.</p>
|
||||
<div className="mt-3 overflow-x-auto">
|
||||
<table className="text-xs w-full border-collapse">
|
||||
<thead><tr className="bg-slate-100 dark:bg-slate-700">{['From','To','Rate','Example (3500 ETB)'].map(h=><th key={h} className="text-left px-3 py-2 text-slate-700 dark:text-slate-300">{h}</th>)}</tr></thead>
|
||||
<tbody className="text-slate-600 dark:text-slate-400">
|
||||
<tr><td className="px-3 py-1">ETB</td><td>DJF</td><td>3.25</td><td>11,375 DJF</td></tr>
|
||||
<tr className="bg-slate-50 dark:bg-slate-700/30"><td className="px-3 py-1">ETB</td><td>USD</td><td>0.018</td><td>63 USD</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="currencies-how" className="border-t pt-8">
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">💱 How-To: Manage Exchange Rates</h3>
|
||||
<div className="space-y-3">
|
||||
<HowToStep number={1} title="Add / Update Rate">
|
||||
<ol className={ol}><li>Click <strong>Currencies</strong> in Financial</li><li>Click <strong>Add Currency Rate</strong>: from/to currency, rate value, effective date</li><li>Click <strong>Edit</strong> on existing rows to update; applies to future bookings/display</li></ol>
|
||||
</HowToStep>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* PROMOS */}
|
||||
<div id="promos" className="border-t pt-8">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🎁 Promo Codes</h2>
|
||||
<p className={li}>Create percentage or fixed-amount discount codes with expiry dates. Access level: Admin, Supervisor.</p>
|
||||
</div>
|
||||
<div id="promos-how" className="border-t pt-8">
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">🎁 How-To: Manage Promo Codes</h3>
|
||||
<div className="space-y-3">
|
||||
<HowToStep number={1} title="Create Code">
|
||||
<ol className={ol}><li>Click <strong>Add Promo Code</strong></li><li>Fill: code (uppercase), title, discount type (Percentage / Amount), value, valid until date</li><li>Toggle active and save</li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={2} title="Edit / Deactivate">
|
||||
<ol className={ol}><li>Click <strong>Edit</strong> to update value, dates, or active status</li><li>Click <strong>Delete</strong> — already-applied bookings keep their discount</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-2">🔌 Payment Methods</h2>
|
||||
<p className={li}>Configure API credentials, fees, and enable/disable payment providers. Access level: Admin.</p>
|
||||
</div>
|
||||
<div id="payment-methods-how" className="border-t pt-8">
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">🔌 How-To: Configure Payment Methods</h3>
|
||||
<div className="space-y-3">
|
||||
<HowToStep number={1} title="Configure Provider">
|
||||
<ol className={ol}><li>Click <strong>Payment Methods</strong> in Financial</li><li>Select a provider (Telebirr, CBE Birr, eBirr, Card, WAAFI)</li><li>Enter base URL, API key/secret, merchant ID, webhook endpoint</li><li>Set transaction fees, min/max amounts, enable/disable toggle</li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={2} title="Test & Validate">
|
||||
<ol className={ol}><li>Run a test transaction to verify connectivity</li><li>Validate webhook endpoint accessibility and security secret</li></ol>
|
||||
</HowToStep>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* WALLET ACCOUNTS */}
|
||||
<div id="wallet-accounts" className="border-t pt-8">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">👛 Wallet Accounts</h2>
|
||||
<p className={li}>View and manage passenger EDR wallet balances and transaction ledgers. Access level: Supervisor, Admin.</p>
|
||||
</div>
|
||||
<div id="wallet-accounts-how" className="border-t pt-8">
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">👛 How-To: Manage Wallet Accounts</h3>
|
||||
<div className="space-y-3">
|
||||
<HowToStep number={1} title="View Wallets">
|
||||
<ol className={ol}><li>Click <strong>Wallet Accounts</strong> in Financial</li><li>Search by passenger name or email</li><li>View current balance (ETB minor units) and last activity</li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={2} title="View Ledger">
|
||||
<ol className={ol}><li>Click a wallet row to open the transaction ledger</li><li>See all credits, debits, top-ups, and refunds with timestamps</li></ol>
|
||||
</HowToStep>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
import { HowToStep } from './_shared';
|
||||
|
||||
const li = 'text-sm text-slate-700 dark:text-slate-300';
|
||||
const ol = 'list-decimal pl-5 space-y-1 ' + li;
|
||||
|
||||
export default function MasterDataSection() {
|
||||
return (
|
||||
<>
|
||||
{/* STATIONS */}
|
||||
<div id="stations" className="border-t pt-8">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">📍 Stations</h2>
|
||||
<p className={li}>Configure railway stations with code, city, country, coordinates, and operational status. Access level: Supervisor, Admin.</p>
|
||||
</div>
|
||||
<div id="stations-how" className="border-t pt-8">
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">📍 How-To: Manage Stations</h3>
|
||||
<div className="space-y-3">
|
||||
<HowToStep number={1} title="Create Station">
|
||||
<ol className={ol}><li>Click <strong>Add Station</strong></li><li>Fill: 3-letter code (e.g. ADD), name, city, country code, lat/lng, timezone</li><li>Toggle operational status and save</li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={2} title="Edit / Delete">
|
||||
<ol className={ol}><li>Click <strong>Edit</strong> on any row to update fields</li><li>Click <strong>Delete</strong> — system warns if routes or schedules depend on this station</li></ol>
|
||||
</HowToStep>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* TRAINS */}
|
||||
<div id="trains" className="border-t pt-8">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🚂 Trains</h2>
|
||||
<p className={li}>Manage the train fleet — number, name, operator, status, and attached coaches. Access level: Supervisor, Admin.</p>
|
||||
</div>
|
||||
<div id="trains-how" className="border-t pt-8">
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">🚂 How-To: Manage Trains</h3>
|
||||
<div className="space-y-3">
|
||||
<HowToStep number={1} title="Create Train">
|
||||
<ol className={ol}><li>Click <strong>Add Train</strong></li><li>Fill: unique number, name, operator, description, status</li><li>Save, then assign coaches</li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={2} title="Edit / Delete">
|
||||
<ol className={ol}><li>Click <strong>Edit</strong> to update details or change status</li><li>Delete only if no active schedules reference this train</li></ol>
|
||||
</HowToStep>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* COACHES */}
|
||||
<div id="coaches" className="border-t pt-8">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🚃 Coaches</h2>
|
||||
<p className={li}>Manage coach inventory, seat layout, type, and maintenance status. Access level: Supervisor, Admin.</p>
|
||||
</div>
|
||||
<div id="coaches-how" className="border-t pt-8">
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">🚃 How-To: Manage Coaches</h3>
|
||||
<div className="space-y-3">
|
||||
<HowToStep number={1} title="Create Coach">
|
||||
<ol className={ol}><li>Click <strong>Add Coach</strong></li><li>Fill: number, coach type, arrangement (e.g. 2+2), capacity, status</li><li>Auto-generate seats from arrangement or configure manually</li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={2} title="Edit / Delete">
|
||||
<ol className={ol}><li>Update arrangement (limited if seats are occupied)</li><li>Delete only if no scheduled trips use this coach</li></ol>
|
||||
</HowToStep>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* SEATS */}
|
||||
<div id="seats" className="border-t pt-8">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">💺 Seats</h2>
|
||||
<p className={li}>View seat maps, update properties, block/unblock seats, and bulk import/export via CSV. Access level: Supervisor, Admin.</p>
|
||||
</div>
|
||||
<div id="seats-how" className="border-t pt-8">
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">💺 How-To: Manage Seats</h3>
|
||||
<div className="space-y-3">
|
||||
<HowToStep number={1} title="View Seat Map">
|
||||
<ol className={ol}><li>Select a coach from the dropdown</li><li>Color-coded grid: Green=Available · Yellow=Held · Blue=Booked · Red=Blocked</li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={2} title="Block / Unblock">
|
||||
<ol className={ol}><li>Click a seat → <strong>Block</strong> with reason (Maintenance, Reserved, Damaged)</li><li>Optionally set an expiry date; click <strong>Unblock</strong> to release</li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={3} title="Bulk Operations">
|
||||
<ol className={ol}><li>Select multiple seats via checkboxes for bulk status changes</li><li>Use <strong>CSV Import</strong> to create/update seats in bulk; <strong>CSV Export</strong> for backup</li></ol>
|
||||
</HowToStep>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CLASSES */}
|
||||
<div id="classes" className="border-t pt-8">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🏷️ Seat Classes</h2>
|
||||
<p className={li}>Define seat class types with base fare, premium fee, and insurance fee. Access level: Supervisor, Admin.</p>
|
||||
<div className="mt-3 overflow-x-auto">
|
||||
<table className="text-xs w-full border-collapse">
|
||||
<thead><tr className="bg-slate-100 dark:bg-slate-700">{['Class','Base Fare','Premium','Insurance','Total/Adult'].map(h=><th key={h} className="text-left px-3 py-2 text-slate-700 dark:text-slate-300">{h}</th>)}</tr></thead>
|
||||
<tbody className="text-slate-600 dark:text-slate-400">
|
||||
<tr><td className="px-3 py-1">Economy Regular</td><td>350 ETB</td><td>0 ETB</td><td>5 ETB</td><td>355 ETB</td></tr>
|
||||
<tr className="bg-slate-50 dark:bg-slate-700/30"><td className="px-3 py-1">Economy Bed</td><td>490 ETB</td><td>50 ETB</td><td>10 ETB</td><td>550 ETB</td></tr>
|
||||
<tr><td className="px-3 py-1">VIP Bed</td><td>630 ETB</td><td>150 ETB</td><td>15 ETB</td><td>795 ETB</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="classes-how" className="border-t pt-8">
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">🏷️ How-To: Manage Seat Classes</h3>
|
||||
<div className="space-y-3">
|
||||
<HowToStep number={1} title="Create Class">
|
||||
<ol className={ol}><li>Click <strong>Add Class</strong></li><li>Fill: name, coach type, base fare (ETB), premium fee, insurance fee</li><li>Toggle active and save — changes apply to new bookings only</li></ol>
|
||||
</HowToStep>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ROUTES */}
|
||||
<div id="routes" className="border-t pt-8">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🗺️ Routes</h2>
|
||||
<p className={li}>Define routes as ordered station sequences with cumulative distances. Access level: Supervisor, Admin.</p>
|
||||
</div>
|
||||
<div id="routes-how" className="border-t pt-8">
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">🗺️ How-To: Manage Routes</h3>
|
||||
<div className="space-y-3">
|
||||
<HowToStep number={1} title="Create Route">
|
||||
<ol className={ol}><li>Click <strong>Add Route</strong></li><li>Fill: code (e.g. ADD-DJI), name, effective dates, active status</li><li>Add stops: select station, enter distance from previous stop</li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={2} title="Edit Stops">
|
||||
<ol className={ol}><li>Reorder stops via drag-and-drop; update distances</li><li>Remove stops only if no bookings exist on that segment</li></ol>
|
||||
</HowToStep>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* SCHEDULES */}
|
||||
<div id="schedules" className="border-t pt-8">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">📅 Schedules</h2>
|
||||
<p className={li}>Create individual or bulk-generated trip schedules with coach assignments. Access level: Supervisor, Admin.</p>
|
||||
</div>
|
||||
<div id="schedules-how" className="border-t pt-8">
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">📅 How-To: Manage Schedules</h3>
|
||||
<div className="space-y-3">
|
||||
<HowToStep number={1} title="Create Single Schedule">
|
||||
<ol className={ol}><li>Click <strong>Create Schedule</strong></li><li>Select train, route, departure/arrival date-time</li><li>Assign coaches (order matters for position numbers)</li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={2} title="Bulk Generate">
|
||||
<ol className={ol}><li>Click <strong>Bulk Generate</strong></li><li>Set train, route, start date/time, duration (hrs), repeat interval (days), and period (days)</li><li>Preview count then click <strong>Generate Schedules</strong></li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={3} title="Edit / Delete">
|
||||
<ol className={ol}><li>Edit departure/arrival times, status, or coach assignments</li><li>Delete cascades to seat holds and live status records</li><li>Bulk-select rows for multi-delete</li></ol>
|
||||
</HowToStep>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
import { HowToStep } from './_shared';
|
||||
|
||||
const li = 'text-sm text-slate-700 dark:text-slate-300';
|
||||
const ol = 'list-decimal pl-5 space-y-1 ' + li;
|
||||
|
||||
export default function OperationsSection() {
|
||||
return (
|
||||
<>
|
||||
{/* BOOKINGS */}
|
||||
<div id="bookings" className="border-t pt-8">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">📋 Bookings</h2>
|
||||
<p className={li}>View, search, cancel, and delete passenger bookings. Access level: Agent, Supervisor, Admin.</p>
|
||||
</div>
|
||||
<div id="bookings-how" className="border-t pt-8">
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">📋 How-To: Manage Bookings</h3>
|
||||
<div className="space-y-3">
|
||||
<HowToStep number={1} title="Search & Filter">
|
||||
<ol className={ol}><li>Click <strong>Bookings</strong> in Operations</li><li>Use search box for reference, email, or phone</li><li>Filter by status: Pending · Confirmed · Cancelled · Completed</li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={2} title="View Details">
|
||||
<ol className={ol}><li>Click <strong>View Details</strong> to open booking modal</li><li>See passenger info, journey, payment, and booking source</li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={3} title="Cancel or Delete">
|
||||
<ol className={ol}><li>Click <strong>Cancel Booking</strong> — auto-processes refund (80% confirmed, 0% pending)</li><li>Click <strong>Delete</strong> to permanently remove and release seats</li></ol>
|
||||
</HowToStep>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* PASSENGERS */}
|
||||
<div id="passengers" className="border-t pt-8">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">👥 Passengers</h2>
|
||||
<p className={li}>View passenger profiles, verification status, loyalty tier, and wallet balance. Access level: Agent, Supervisor, Admin.</p>
|
||||
</div>
|
||||
<div id="passengers-how" className="border-t pt-8">
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">👥 How-To: Manage Passengers</h3>
|
||||
<div className="space-y-3">
|
||||
<HowToStep number={1} title="Search Passengers">
|
||||
<ol className={ol}><li>Click <strong>Passengers</strong> in Operations</li><li>Search by name, email, phone, or ID</li><li>Filter by nationality, Verifayda status, or loyalty tier</li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={2} title="View Profile">
|
||||
<ol className={ol}><li>Click a passenger row to open profile modal</li><li>Review account info, verification status, loyalty points, wallet balance, and booking history</li></ol>
|
||||
</HowToStep>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* TICKETS */}
|
||||
<div id="tickets" className="border-t pt-8">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🎫 Tickets</h2>
|
||||
<p className={li}>View issued tickets, QR/barcode status, and gate validation logs. Access level: Supervisor, Admin.</p>
|
||||
</div>
|
||||
<div id="tickets-how" className="border-t pt-8">
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">🎫 How-To: Manage Tickets</h3>
|
||||
<div className="space-y-3">
|
||||
<HowToStep number={1} title="Find a Ticket">
|
||||
<ol className={ol}><li>Click <strong>Tickets</strong> in Operations</li><li>Search by booking reference or passenger name</li><li>Filter by status: Confirmed · Validated · Cancelled</li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={2} title="View & Resend">
|
||||
<ol className={ol}><li>Click <strong>View</strong> to see QR/barcode, seat, and fare breakdown</li><li>Download PDF or resend to passenger email</li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={3} title="Validation Status">
|
||||
<ol className={ol}><li>Unvalidated: not yet scanned at gate</li><li>Validated: scanned and approved for boarding</li><li>View gate validation logs with timestamp and validator ID</li></ol>
|
||||
</HowToStep>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* BOARDING */}
|
||||
<div id="boarding" className="border-t pt-8">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🚆 Boarding</h2>
|
||||
<p className={li}>Manage gate operations and real-time passenger boarding for active trips. Access level: Agent, Supervisor, Admin.</p>
|
||||
</div>
|
||||
<div id="boarding-how" className="border-t pt-8">
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">🚆 How-To: Manage Boarding</h3>
|
||||
<div className="space-y-3">
|
||||
<HowToStep number={1} title="Open Boarding Dashboard">
|
||||
<ol className={ol}><li>Click <strong>Boarding</strong> in Operations</li><li>Select the active trip/schedule</li><li>View real-time passenger count and progress</li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={2} title="Process Passengers">
|
||||
<ol className={ol}><li>Scan or validate tickets at gate</li><li>Resolve seat conflicts or duplicate assignments</li><li>Mark no-shows and process late arrivals</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-2">📦 Luggage (Excess Baggage)</h2>
|
||||
<p className={li}>Handle excess baggage charges at boarding — passenger self-pay or agent cash collection. Access level: Agent, Supervisor, Admin.</p>
|
||||
<div className="mt-3 flex flex-wrap gap-2 text-xs">
|
||||
{['PENDING','PAID','CASH_COLLECTED','EXPIRED','WAIVED'].map(s => (
|
||||
<span key={s} className="bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 px-2 py-1 rounded font-mono">{s}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div id="excess-baggage-how" className="border-t pt-8">
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">📦 How-To: Handle Excess Baggage</h3>
|
||||
<div className="space-y-3">
|
||||
<HowToStep number={1} title="Find Charges">
|
||||
<ol className={ol}><li>Click <strong>Luggage</strong> in Operations</li><li>Search by booking reference; filter by status or date</li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={2} title="Take Action">
|
||||
<ol className={ol}><li><strong>Resend Link</strong> — sends fresh 5-min payment link to passenger</li><li><strong>Waive</strong> — enter reason (supervisor authority); logged for audit</li><li><strong>Delete</strong> — only for EXPIRED or WAIVED charges</li></ol>
|
||||
</HowToStep>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
export default function OverviewSection() {
|
||||
return (
|
||||
<>
|
||||
<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. Covers bookings, fleet, financials, security, and analytics for agents, supervisors, and admins.
|
||||
</p>
|
||||
<div className="bg-emerald-50 dark:bg-emerald-900/20 p-5 rounded-lg border border-emerald-200 dark:border-emerald-800">
|
||||
<h3 className="text-base font-semibold text-emerald-900 dark:text-emerald-100 mb-2">✅ Version 1.0.0 — Complete Platform</h3>
|
||||
<ul className="text-emerald-800 dark:text-emerald-200 space-y-1 text-sm">
|
||||
<li>• <strong>Roles:</strong> AGENT · SUPERVISOR · ADMIN · STAFF</li>
|
||||
<li>• <strong>Auth:</strong> Corporate IAM (back-office) + JWT (passenger-facing)</li>
|
||||
<li>• <strong>Currencies:</strong> ETB (transaction) · DJF · USD (display)</li>
|
||||
<li>• <strong>Age pricing:</strong> ADULT ≥5 yrs full fare · CHILD <5 yrs first free</li>
|
||||
<li>• <strong>ID verification:</strong> Verifayda 2.0 for Ethiopian nationals</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>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm text-slate-700 dark:text-slate-300">
|
||||
{[
|
||||
['📊 Operations', 'Bookings, passengers, tickets, boarding, excess baggage'],
|
||||
['🎒 Tourism', 'Travel packages with tiered pricing and inquiry management'],
|
||||
['🏢 Master Data', 'Stations, trains, coaches, seats, classes, routes, schedules'],
|
||||
['💰 Financial', 'Fares, tariffs, payments, currencies, promos, wallets'],
|
||||
['🎁 Customer Services', 'Loyalty program and notification management'],
|
||||
['🔒 Security', 'Audit logs and fraud detection'],
|
||||
['📈 Analytics', 'Revenue, occupancy, and agent performance reports'],
|
||||
['⚙️ System', 'Agents, users, settings, health monitoring, app releases'],
|
||||
].map(([title, desc]) => (
|
||||
<div key={title} className="bg-slate-50 dark:bg-slate-700/50 rounded-lg p-3 border border-slate-200 dark:border-slate-600">
|
||||
<div className="font-semibold mb-1">{title}</div>
|
||||
<div className="text-slate-500 dark:text-slate-400">{desc}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
import { HowToStep } from './_shared';
|
||||
|
||||
const li = 'text-sm text-slate-700 dark:text-slate-300';
|
||||
const ol = 'list-decimal pl-5 space-y-1 ' + li;
|
||||
|
||||
export default function SecuritySection() {
|
||||
return (
|
||||
<>
|
||||
<div id="audit" className="border-t pt-8">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">📋 Audit Logs</h2>
|
||||
<p className={li}>Immutable log of all user actions — creates, updates, deletes, payments, cancellations, and auth events. Access level: Supervisor, Admin.</p>
|
||||
</div>
|
||||
<div id="audit-how" className="border-t pt-8">
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">📋 How-To: Use Audit Logs</h3>
|
||||
<div className="space-y-3">
|
||||
<HowToStep number={1} title="Search & Filter">
|
||||
<ol className={ol}><li>Click <strong>Audit Logs</strong> in Security & Compliance</li><li>Filter by user, action type (Create / Update / Delete), entity type, or date range</li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={2} title="View Change Detail">
|
||||
<ol className={ol}><li>Click a log entry to open the detail modal</li><li>Side-by-side old vs new values with highlighted changed fields</li><li>Includes IP address and user-agent</li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={3} title="Export">
|
||||
<ol className={ol}><li>Click <strong>Export</strong> — choose CSV, JSON, or PDF</li><li>Apply current filters before exporting for targeted compliance reports</li><li>Logs retained 12 months active, 7 years archived</li></ol>
|
||||
</HowToStep>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="fraud" className="border-t pt-8">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🛡️ Fraud Detection</h2>
|
||||
<p className={li}>Monitor fraud alerts triggered by rules (rapid bookings, high-value transactions, failed payments, duplicate IDs). Access level: Supervisor, Admin.</p>
|
||||
<div className="mt-3 flex flex-wrap gap-2 text-xs">
|
||||
{[['LOW','bg-yellow-100 text-yellow-800'],['MEDIUM','bg-orange-100 text-orange-800'],['HIGH','bg-red-100 text-red-800']].map(([s, cls]) => (
|
||||
<span key={s} className={`${cls} dark:bg-opacity-20 px-2 py-1 rounded font-semibold`}>{s}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div id="fraud-how" className="border-t pt-8">
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">🛡️ How-To: Manage Fraud Alerts</h3>
|
||||
<div className="space-y-3">
|
||||
<HowToStep number={1} title="Review Alerts">
|
||||
<ol className={ol}><li>Click <strong>Fraud Detection</strong> in Security & Compliance</li><li>Filter by severity or status (Open / Acknowledged / Resolved)</li><li>Click an alert to see full context, triggering rules, and risk score</li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={2} title="Take Action">
|
||||
<ol className={ol}><li><strong>Allow</strong> — booking proceeds; logged for audit</li><li><strong>Block User</strong> — set duration and reason; user cannot book during block period</li><li><strong>Escalate to Admin</strong> — adds to priority review queue</li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={3} title="Manage Rules">
|
||||
<ol className={ol}><li>Open <strong>Rules</strong> tab to view all active detection rules</li><li>Click a rule to adjust threshold values or toggle active/inactive</li></ol>
|
||||
</HowToStep>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
import { HowToStep } from './_shared';
|
||||
|
||||
const li = 'text-sm text-slate-700 dark:text-slate-300';
|
||||
const ol = 'list-decimal pl-5 space-y-1 ' + li;
|
||||
|
||||
export default function SystemSection() {
|
||||
return (
|
||||
<>
|
||||
{/* AGENTS */}
|
||||
<div id="agents" className="border-t pt-8">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🧑💼 Agents</h2>
|
||||
<p className={li}>Counter booking, shift management, commission tracking, and daily reconciliation. Access level: Supervisor, Admin.</p>
|
||||
</div>
|
||||
<div id="agents-how" className="border-t pt-8">
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">🧑💼 How-To: Agent Operations</h3>
|
||||
<div className="space-y-3">
|
||||
<HowToStep number={1} title="Create Counter Booking">
|
||||
<ol className={ol}><li>Click <strong>Agents</strong> in System → <strong>New Booking</strong></li><li>Select schedule, seats, passengers, and seat class</li><li>Choose payment method (Cash / Card / Check); enter amount received</li><li>Click <strong>Create Booking</strong> — prints or emails ticket</li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={2} title="Manage Shifts">
|
||||
<ol className={ol}><li><strong>Open Shift</strong> — enter opening cash balance</li><li><strong>Close Shift</strong> — enter closing balance; system calculates variance</li><li>View shift summary: total bookings, revenue, commission earned</li></ol>
|
||||
</HowToStep>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* USERS */}
|
||||
<div id="users" className="border-t pt-8">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">👤 Users</h2>
|
||||
<p className={li}>Manage back-office user accounts and role assignments. Roles: AGENT · SUPERVISOR · ADMIN · STAFF. Access level: Admin.</p>
|
||||
</div>
|
||||
<div id="users-how" className="border-t pt-8">
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">👤 How-To: Manage Users</h3>
|
||||
<div className="space-y-3">
|
||||
<HowToStep number={1} title="Create User">
|
||||
<ol className={ol}><li>Click <strong>Users</strong> in System → <strong>Add User</strong></li><li>Fill: email, full name, phone, role, department</li><li>Save — temporary password emailed to user automatically</li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={2} title="Edit / Reset Password">
|
||||
<ol className={ol}><li>Click a user row to open profile modal</li><li>Update name, role, or department; toggle active status</li><li>Click <strong>Reset Password</strong> to generate and email a new temporary password</li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={3} title="Deactivate / Delete">
|
||||
<ol className={ol}><li><strong>Deactivate</strong> — keeps records, disables login (preferred)</li><li><strong>Delete</strong> — permanently removes user</li></ol>
|
||||
</HowToStep>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* SETTINGS */}
|
||||
<div id="settings" className="border-t pt-8">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">⚙️ Settings</h2>
|
||||
<p className={li}>Configure application-wide settings: general, email (SMTP), payment provider credentials, API integrations, and rate limits. Access level: Admin.</p>
|
||||
</div>
|
||||
<div id="settings-how" className="border-t pt-8">
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">⚙️ How-To: Manage Settings</h3>
|
||||
<div className="space-y-3">
|
||||
<HowToStep number={1} title="Update Configuration">
|
||||
<ol className={ol}><li>Click <strong>Settings</strong> in System</li><li>Select category tab: General · Email · Payments · API</li><li>Modify values, test connections where applicable, then <strong>Save</strong></li><li>Changes take effect immediately and are audit-logged</li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={2} title="Rate Limiting (System Config)">
|
||||
<ol className={ol}><li>Auth endpoints default: 5 req/min</li><li>Strict endpoints (bookings, payments, wallet) default: 20 req/min</li><li>Default endpoints: 100 req/min · Health/webhooks: exempt</li><li>Seat hold duration default: 5 min · Hold cutoff before departure: 2 hrs</li></ol>
|
||||
</HowToStep>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* HEALTH */}
|
||||
<div id="health" className="border-t pt-8">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🏥 Health</h2>
|
||||
<p className={li}>Real-time API health dashboard — liveness, readiness (DB latency), and app info. Auto-refreshes every 30–60 s. Access level: Admin, Supervisor.</p>
|
||||
</div>
|
||||
<div id="health-how" className="border-t pt-8">
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">🏥 How-To: Monitor Health</h3>
|
||||
<div className="space-y-3">
|
||||
<HowToStep number={1} title="Read the Dashboard">
|
||||
<ol className={ol}><li>Click <strong>Health</strong> in System</li><li>Green banner = all systems operational; Red = degraded</li><li>Liveness probe: API process alive (30 s) · Readiness: DB ping + latency (30 s) · App Info: version, uptime (60 s)</li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={2} title="Troubleshoot">
|
||||
<ol className={ol}><li>Red readiness: check DB server and connection string</li><li>High latency: review slow queries and server resources</li><li>Click <strong>Refresh</strong> for an immediate manual check</li></ol>
|
||||
</HowToStep>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* APP RELEASES */}
|
||||
<div id="app-releases" className="border-t pt-8">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">📱 App Releases</h2>
|
||||
<p className={li}>Manage mobile app release notes and version announcements shown to passengers. Access level: Admin.</p>
|
||||
</div>
|
||||
<div id="app-releases-how" className="border-t pt-8">
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">📱 How-To: Manage App Releases</h3>
|
||||
<div className="space-y-3">
|
||||
<HowToStep number={1} title="Create Release">
|
||||
<ol className={ol}><li>Click <strong>App Releases</strong> in System → <strong>New Release</strong></li><li>Fill: version number, platform (iOS / Android / Both), release notes, release date</li><li>Toggle <strong>Force Update</strong> if the release is mandatory</li><li>Save to publish the announcement</li></ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={2} title="Edit / Delete">
|
||||
<ol className={ol}><li>Click <strong>Edit</strong> to update notes or toggle force-update flag</li><li>Click <strong>Delete</strong> to remove an outdated release entry</li></ol>
|
||||
</HowToStep>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
import { HowToStep } from './_shared';
|
||||
|
||||
const li = 'text-sm text-slate-700 dark:text-slate-300';
|
||||
const ol = 'list-decimal pl-5 space-y-1 ' + li;
|
||||
|
||||
export default function TourismSection() {
|
||||
return (
|
||||
<>
|
||||
{/* PACKAGES */}
|
||||
<div id="packages" className="border-t pt-8">
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🎒 Travel Packages</h2>
|
||||
<p className={li}>Create and manage pilgrimage/group travel packages with tiered pricing and capacity control. Access level: Supervisor, Admin.</p>
|
||||
<div className="mt-3 flex flex-wrap gap-2 text-xs">
|
||||
{['DRAFT','ACTIVE','SOLD_OUT','EXPIRED','CANCELLED'].map(s => (
|
||||
<span key={s} className="bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 px-2 py-1 rounded font-mono">{s}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div id="packages-how" className="border-t pt-8">
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">🎒 How-To: Manage Travel Packages</h3>
|
||||
<div className="space-y-3">
|
||||
<HowToStep number={1} title="Create a Package">
|
||||
<ol className={ol}>
|
||||
<li>Click <strong>New Package</strong></li>
|
||||
<li>Fill: code, name, origin/destination stations, outbound/return schedules</li>
|
||||
<li>Set total capacity, validity period, included services, and optional bus transfer</li>
|
||||
<li>Save — package starts in <strong>DRAFT</strong> status</li>
|
||||
</ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={2} title="Configure Price Tiers">
|
||||
<ol className={ol}>
|
||||
<li>Click <strong>Tiers</strong> on the package row</li>
|
||||
<li>Add tiers: seat type, label, price (minor units), available seats</li>
|
||||
<li>Edit or delete tiers (restricted once bookings exist)</li>
|
||||
</ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={3} title="Activate / Deactivate">
|
||||
<ol className={ol}>
|
||||
<li>Click <strong>Activate</strong> on a DRAFT package to open for booking</li>
|
||||
<li>Click <strong>Deactivate</strong> to stop new bookings (existing bookings remain valid)</li>
|
||||
<li>Click <strong>Delete</strong> only if no bookings exist</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-2">📝 Package Inquiries</h2>
|
||||
<p className={li}>Track and convert incoming package booking inquiries. Access level: Agent, Supervisor, Admin.</p>
|
||||
<div className="mt-3 flex flex-wrap gap-2 text-xs">
|
||||
{['NEW','CONTACTED','CONVERTED','CLOSED'].map(s => (
|
||||
<span key={s} className="bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 px-2 py-1 rounded font-mono">{s}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div id="package-inquiries-how" className="border-t pt-8">
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">📝 How-To: Handle Inquiries</h3>
|
||||
<div className="space-y-3">
|
||||
<HowToStep number={1} title="View & Filter">
|
||||
<ol className={ol}>
|
||||
<li>Click <strong>Inquiries</strong> in Tourism</li>
|
||||
<li>Filter by package or status</li>
|
||||
<li>View contact details, requested tier, and traveler count</li>
|
||||
</ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={2} title="Update Status">
|
||||
<ol className={ol}>
|
||||
<li>Use the status dropdown on each row — saves immediately</li>
|
||||
<li>Workflow: <strong>NEW → CONTACTED → CONVERTED / CLOSED</strong></li>
|
||||
<li>Respond to NEW inquiries within 24 hours</li>
|
||||
</ol>
|
||||
</HowToStep>
|
||||
<HowToStep number={3} title="Clean Up">
|
||||
<ol className={ol}>
|
||||
<li>Click <strong>Delete</strong> to remove spam or duplicate inquiries</li>
|
||||
</ol>
|
||||
</HowToStep>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
import React from 'react';
|
||||
|
||||
export const HowToStep = ({ number, title, children }: { number: number; title: string; children: React.ReactNode }) => (
|
||||
<div className="bg-blue-50 dark:bg-blue-900/20 p-5 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-9 h-9 rounded-full bg-blue-600 text-white font-bold flex-shrink-0 text-sm">{number}</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-base font-semibold text-slate-900 dark:text-white mb-2">{title}</h4>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const navSections = [
|
||||
{
|
||||
id: 'overview', title: '📋 Overview',
|
||||
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: 'boarding', label: 'Boarding' }, { id: 'boarding-how', label: '→ How-To' },
|
||||
{ id: 'excess-baggage', label: 'Luggage (Excess)' }, { id: 'excess-baggage-how', label: '→ How-To' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'tourism', title: '🎒 Tourism',
|
||||
items: [
|
||||
{ id: 'packages', label: 'Travel Packages' }, { id: 'packages-how', label: '→ How-To' },
|
||||
{ id: 'package-inquiries', label: 'Inquiries' }, { id: 'package-inquiries-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: 'tariff-rates', label: 'Tariff Rates' }, { id: 'tariff-rates-how', label: '→ How-To' },
|
||||
{ id: 'fare-rules', label: 'Fare Rules' }, { id: 'fare-rules-how', label: '→ How-To' },
|
||||
{ id: 'payments', label: 'Payments' }, { id: 'payments-how', label: '→ How-To' },
|
||||
{ id: 'currencies', label: 'Currencies' }, { id: 'currencies-how', label: '→ How-To' },
|
||||
{ id: 'promos', label: 'Promo Codes' }, { id: 'promos-how', label: '→ How-To' },
|
||||
{ id: 'payment-methods', label: 'Payment Methods' }, { id: 'payment-methods-how', label: '→ How-To' },
|
||||
{ id: 'wallet-accounts', label: 'Wallet Accounts' }, { id: 'wallet-accounts-how', label: '→ How-To' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'services', title: '🎁 Customer Services',
|
||||
items: [
|
||||
{ id: 'loyalty', label: 'Loyalty Program' }, { id: 'loyalty-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: '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: 'settings', label: 'Settings' }, { id: 'settings-how', label: '→ How-To' },
|
||||
{ id: 'health', label: 'Health' }, { id: 'health-how', label: '→ How-To' },
|
||||
{ id: 'app-releases', label: 'App Releases' }, { id: 'app-releases-how', label: '→ How-To' },
|
||||
],
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user