mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-09-07 18:55:42 +00:00
538 lines
33 KiB
TypeScript
538 lines
33 KiB
TypeScript
'use client';
|
||
|
||
import React, { useState } from 'react';
|
||
import Link from 'next/link';
|
||
import { ChevronDown, ChevronRight, FileText, Home } from 'lucide-react';
|
||
|
||
const HowToPage = () => {
|
||
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 guides = [
|
||
{ id: 'bookings', title: 'How to Manage Bookings', icon: '📋' },
|
||
{ id: 'passengers', title: 'How to Manage Passengers', icon: '👥' },
|
||
{ id: 'pricing', title: 'How to Configure Pricing', icon: '💰' },
|
||
{ id: 'schedules', title: 'How to Create Schedules', icon: '📅' },
|
||
{ id: 'seats', title: 'How to Manage Seats', icon: '💺' },
|
||
{ id: 'loyalty', title: 'How to Manage Loyalty', icon: '🏆' },
|
||
];
|
||
|
||
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" />
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-slate-900 dark:text-white">How-To Guides</h1>
|
||
<p className="text-sm text-slate-600 dark:text-slate-400">Step-by-step instructions for common tasks</p>
|
||
</div>
|
||
</div>
|
||
<Link href="/docs" className="flex items-center gap-2 px-4 py-2 rounded-lg bg-emerald-600 text-white hover:bg-emerald-700 transition">
|
||
<FileText className="h-4 w-4" />
|
||
Back to Docs
|
||
</Link>
|
||
</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 className="p-4 space-y-2">
|
||
{guides.map(guide => (
|
||
<button
|
||
key={guide.id}
|
||
onClick={() => scrollToSection(guide.id)}
|
||
className="w-full text-left px-4 py-3 rounded-lg text-sm font-medium text-slate-600 dark:text-slate-300 hover:text-emerald-600 dark:hover:text-emerald-400 hover:bg-slate-50 dark:hover:bg-slate-700 transition"
|
||
>
|
||
{guide.icon} {guide.title}
|
||
</button>
|
||
))}
|
||
</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">
|
||
|
||
{/* Bookings How-To */}
|
||
<div id="bookings" className="pt-4">
|
||
<h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-2">📋 How to Manage Bookings</h2>
|
||
<p className="text-slate-600 dark:text-slate-300 mb-6">Learn how to search, view, modify, and cancel passenger bookings in the system.</p>
|
||
|
||
<div className="space-y-8">
|
||
<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">1</div>
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">Access the Bookings Page</h3>
|
||
<ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
|
||
<li>Click on <strong>"Bookings"</strong> in the Operations section of the sidebar</li>
|
||
<li>The page loads showing a table with all bookings</li>
|
||
<li>You'll see columns: Reference, Passenger, Status, Amount, Payment, Created date</li>
|
||
</ol>
|
||
<div className="mt-4 p-3 bg-white dark:bg-slate-800 rounded border-l-4 border-blue-600">
|
||
<p className="text-sm font-mono text-slate-600 dark:text-slate-400">📍 Path: Sidebar → Operations → Bookings</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-green-50 dark:bg-green-900/20 p-6 rounded-lg border border-green-200 dark:border-green-800">
|
||
<div className="flex items-start gap-4">
|
||
<div className="flex items-center justify-center w-10 h-10 rounded-full bg-green-600 text-white font-bold flex-shrink-0">2</div>
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">Search for a Booking</h3>
|
||
<ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
|
||
<li>Find the search box at the top of the booking table</li>
|
||
<li>Type in: booking reference (e.g., "BK123"), email, or phone number</li>
|
||
<li>Results update in real-time as you type</li>
|
||
<li>Optional: Use the Status dropdown to filter (All, Pending Payment, Confirmed, Cancelled, Completed)</li>
|
||
</ol>
|
||
<div className="mt-4 p-3 bg-white dark:bg-slate-800 rounded">
|
||
<p className="text-sm"><strong>💡 Tip:</strong> Search is case-insensitive and supports partial matches</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-purple-50 dark:bg-purple-900/20 p-6 rounded-lg border border-purple-200 dark:border-purple-800">
|
||
<div className="flex items-start gap-4">
|
||
<div className="flex items-center justify-center w-10 h-10 rounded-full bg-purple-600 text-white font-bold flex-shrink-0">3</div>
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">View Booking Details</h3>
|
||
<ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
|
||
<li>Find the booking in the table</li>
|
||
<li>Click the <strong>"View Details"</strong> button on the right side</li>
|
||
<li>Modal window opens showing complete information:
|
||
<ul className="list-disc pl-8 mt-2 space-y-1">
|
||
<li>Booking reference and status</li>
|
||
<li>Passenger name and contact details</li>
|
||
<li>Journey information (schedule, adults, children)</li>
|
||
<li>Payment details and amount</li>
|
||
<li>All metadata and timestamps</li>
|
||
</ul>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-orange-50 dark:bg-orange-900/20 p-6 rounded-lg border border-orange-200 dark:border-orange-800">
|
||
<div className="flex items-start gap-4">
|
||
<div className="flex items-center justify-center w-10 h-10 rounded-full bg-orange-600 text-white font-bold flex-shrink-0">4</div>
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">Cancel a Booking with Refund</h3>
|
||
<ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
|
||
<li>Find the booking in the table</li>
|
||
<li>Click the <strong>"Cancel Booking"</strong> button (red)</li>
|
||
<li>Confirmation dialog appears</li>
|
||
<li>Click <strong>"Confirm"</strong> to proceed</li>
|
||
<li>System calculates and processes refund:
|
||
<ul className="list-disc pl-8 mt-2 text-sm">
|
||
<li>Confirmed bookings: 80% refund</li>
|
||
<li>Pending bookings: 0% refund</li>
|
||
</ul>
|
||
</li>
|
||
<li>Status changes to <strong>"CANCELLED"</strong></li>
|
||
<li>Success message appears</li>
|
||
</ol>
|
||
<div className="mt-4 p-3 bg-white dark:bg-slate-800 rounded border-l-4 border-orange-600">
|
||
<p className="text-sm"><strong>⚠️ Important:</strong> Cannot be undone. Seats are automatically released.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-red-50 dark:bg-red-900/20 p-6 rounded-lg border border-red-200 dark:border-red-800">
|
||
<div className="flex items-start gap-4">
|
||
<div className="flex items-center justify-center w-10 h-10 rounded-full bg-red-600 text-white font-bold flex-shrink-0">5</div>
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">Export Bookings</h3>
|
||
<ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
|
||
<li>Click the <strong>"Export"</strong> button (top-right)</li>
|
||
<li>CSV file downloads automatically</li>
|
||
<li>Includes all current filters applied</li>
|
||
<li>Use for external analysis or backup</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Passengers How-To */}
|
||
<div id="passengers" className="border-t pt-8">
|
||
<h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-2">👥 How to Manage Passengers</h2>
|
||
<p className="text-slate-600 dark:text-slate-300 mb-6">Learn how to search, filter, and view passenger profiles with loyalty and verification data.</p>
|
||
|
||
<div className="space-y-8">
|
||
<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">1</div>
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">Access Passengers Page</h3>
|
||
<ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
|
||
<li>Click <strong>"Passengers"</strong> in the Operations section</li>
|
||
<li>Page displays all passenger profiles</li>
|
||
<li>Default view shows 20 passengers per page</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-green-50 dark:bg-green-900/20 p-6 rounded-lg border border-green-200 dark:border-green-800">
|
||
<div className="flex items-start gap-4">
|
||
<div className="flex items-center justify-center w-10 h-10 rounded-full bg-green-600 text-white font-bold flex-shrink-0">2</div>
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">Search & Filter</h3>
|
||
<div className="space-y-3 text-slate-700 dark:text-slate-300">
|
||
<div>
|
||
<p className="font-semibold mb-2">Search by:</p>
|
||
<ul className="list-disc pl-5 space-y-1 text-sm">
|
||
<li>Full name</li>
|
||
<li>Email address</li>
|
||
<li>Phone number</li>
|
||
<li>National ID</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<p className="font-semibold mb-2">Filter by:</p>
|
||
<ul className="list-disc pl-5 space-y-1 text-sm">
|
||
<li><strong>Nationality:</strong> Ethiopian, Djiboutian, Other</li>
|
||
<li><strong>Verifayda Status:</strong> Verified, Unverified, Pending</li>
|
||
<li><strong>Loyalty Tier:</strong> Bronze, Silver, Gold, Platinum</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-purple-50 dark:bg-purple-900/20 p-6 rounded-lg border border-purple-200 dark:border-purple-800">
|
||
<div className="flex items-start gap-4">
|
||
<div className="flex items-center justify-center w-10 h-10 rounded-full bg-purple-600 text-white font-bold flex-shrink-0">3</div>
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">View Complete Profile</h3>
|
||
<ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
|
||
<li>Click on any passenger row</li>
|
||
<li>Detailed profile modal opens showing:
|
||
<ul className="list-disc pl-8 mt-2 space-y-1 text-sm">
|
||
<li>Account info (email, phone, nationality)</li>
|
||
<li>Verifayda verification status</li>
|
||
<li>Loyalty tier and points</li>
|
||
<li>Wallet balance</li>
|
||
<li>Booking history with links</li>
|
||
</ul>
|
||
</li>
|
||
</ol>
|
||
<div className="mt-4 p-3 bg-white dark:bg-slate-800 rounded">
|
||
<p className="text-sm"><strong>ℹ️ Note:</strong> Read-only view. Updates via passenger portal.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Pricing How-To */}
|
||
<div id="pricing" className="border-t pt-8">
|
||
<h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-2">💰 How to Configure Pricing</h2>
|
||
<p className="text-slate-600 dark:text-slate-300 mb-6">Learn how to set up dynamic fares with segment pricing and nationality overrides.</p>
|
||
|
||
<div className="space-y-8">
|
||
<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">1</div>
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">Access Pricing Page</h3>
|
||
<ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
|
||
<li>Click <strong>"Pricing & Fares"</strong> in Financial section</li>
|
||
<li>Two tabs: <strong>Schedule Fares</strong> and <strong>Segment Fares</strong></li>
|
||
<li>Default tab shows Schedule Fares</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-green-50 dark:bg-green-900/20 p-6 rounded-lg border border-green-200 dark:border-green-800">
|
||
<div className="flex items-start gap-4">
|
||
<div className="flex items-center justify-center w-10 h-10 rounded-full bg-green-600 text-white font-bold flex-shrink-0">2</div>
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">Create Schedule Fare Rule</h3>
|
||
<ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
|
||
<li>Click <strong>"Add Fare Rule"</strong></li>
|
||
<li>Fill in form:
|
||
<ul className="list-disc pl-8 mt-2 space-y-1 text-sm">
|
||
<li><strong>Schedule (optional):</strong> Leave empty for global</li>
|
||
<li><strong>Route Code (optional):</strong> e.g., "ADD-DJI"</li>
|
||
<li><strong>Seat Class (required):</strong> Economy Regular, VIP Bed, etc.</li>
|
||
<li><strong>Fare in ETB (required):</strong> e.g., 350.00</li>
|
||
<li><strong>Passenger Type (optional):</strong> ADULT or CHILD</li>
|
||
<li><strong>Nationality (optional):</strong> Ethiopian, Djiboutian, Other</li>
|
||
<li><strong>Valid From & Until:</strong> Set date range</li>
|
||
</ul>
|
||
</li>
|
||
<li>Click <strong>"Save Fare Rule"</strong></li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-purple-50 dark:bg-purple-900/20 p-6 rounded-lg border border-purple-200 dark:border-purple-800">
|
||
<div className="flex items-start gap-4">
|
||
<div className="flex items-center justify-center w-10 h-10 rounded-full bg-purple-600 text-white font-bold flex-shrink-0">3</div>
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">Create Segment Fare Rule</h3>
|
||
<ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
|
||
<li>Click <strong>"Add Fare Rule"</strong></li>
|
||
<li>Switch to <strong>"Segment Fares"</strong> tab</li>
|
||
<li>Select route from dropdown</li>
|
||
<li>Fill in form:
|
||
<ul className="list-disc pl-8 mt-2 space-y-1 text-sm">
|
||
<li><strong>Origin Station (required):</strong> Starting point</li>
|
||
<li><strong>Destination Station (required):</strong> Must be after origin</li>
|
||
<li><strong>Seat Class (required):</strong> Class type</li>
|
||
<li><strong>Fare in ETB (required):</strong> Segment price</li>
|
||
</ul>
|
||
</li>
|
||
<li>Click <strong>"Save Segment Fare Rule"</strong></li>
|
||
</ol>
|
||
<div className="mt-4 p-3 bg-white dark:bg-slate-800 rounded">
|
||
<p className="text-sm"><strong>Example:</strong> ADD (Stop 1) to DDA (Stop 4) at 250 ETB</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Schedules How-To */}
|
||
<div id="schedules" className="border-t pt-8">
|
||
<h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-2">📅 How to Create Schedules</h2>
|
||
<p className="text-slate-600 dark:text-slate-300 mb-6">Learn how to create schedules manually or in bulk with recurring patterns.</p>
|
||
|
||
<div className="space-y-8">
|
||
<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">1</div>
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">Create Single Schedule</h3>
|
||
<ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
|
||
<li>Go to <strong>Schedules</strong> page (Master Data)</li>
|
||
<li>Click <strong>"Create Schedule"</strong></li>
|
||
<li>Fill in required fields:
|
||
<ul className="list-disc pl-8 mt-2 space-y-1 text-sm">
|
||
<li><strong>Train:</strong> Select from dropdown</li>
|
||
<li><strong>Route:</strong> Select from dropdown</li>
|
||
<li><strong>Departure Date & Time:</strong> Pick from date/time picker</li>
|
||
<li><strong>Arrival Date & Time:</strong> Must be after departure</li>
|
||
</ul>
|
||
</li>
|
||
<li>Select coaches to assign</li>
|
||
<li>Click <strong>"Create Schedule"</strong></li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-green-50 dark:bg-green-900/20 p-6 rounded-lg border border-green-200 dark:border-green-800">
|
||
<div className="flex items-start gap-4">
|
||
<div className="flex items-center justify-center w-10 h-10 rounded-full bg-green-600 text-white font-bold flex-shrink-0">2</div>
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">Bulk Generate Recurring Schedules</h3>
|
||
<ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
|
||
<li>Click <strong>"Bulk Generate"</strong> button</li>
|
||
<li>Fill in generation form:
|
||
<ul className="list-disc pl-8 mt-2 space-y-1 text-sm">
|
||
<li><strong>Train (required):</strong> Select train</li>
|
||
<li><strong>Route (required):</strong> Select route</li>
|
||
<li><strong>Start Date & Time (required):</strong> First departure</li>
|
||
<li><strong>Duration (Hours):</strong> Trip length</li>
|
||
<li><strong>Repeat Every (Days):</strong> Daily or custom</li>
|
||
<li><strong>For Next (Days):</strong> How many days</li>
|
||
</ul>
|
||
</li>
|
||
<li>Review preview showing number of schedules</li>
|
||
<li>Click <strong>"Generate Schedules"</strong></li>
|
||
</ol>
|
||
<div className="mt-4 p-3 bg-white dark:bg-slate-800 rounded border-l-4 border-green-600">
|
||
<p className="text-sm"><strong>Example:</strong> 30 days ÷ 1 day = ~30 daily schedules</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Seats How-To */}
|
||
<div id="seats" className="border-t pt-8">
|
||
<h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-2">💺 How to Manage Seats</h2>
|
||
<p className="text-slate-600 dark:text-slate-300 mb-6">Learn how to view, block, and manage seat inventory using visual seat maps.</p>
|
||
|
||
<div className="space-y-8">
|
||
<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">1</div>
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">View Seat Map</h3>
|
||
<ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
|
||
<li>Go to <strong>Seats</strong> page (Master Data)</li>
|
||
<li>Select a coach from dropdown</li>
|
||
<li>Visual seat map displays</li>
|
||
<li>Color-coded by status:
|
||
<ul className="list-disc pl-8 mt-2 text-sm">
|
||
<li>🟢 Green: Available</li>
|
||
<li>🟡 Yellow: Held</li>
|
||
<li>🔵 Blue: Booked</li>
|
||
<li>🔴 Red: Blocked</li>
|
||
</ul>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-green-50 dark:bg-green-900/20 p-6 rounded-lg border border-green-200 dark:border-green-800">
|
||
<div className="flex items-start gap-4">
|
||
<div className="flex items-center justify-center w-10 h-10 rounded-full bg-green-600 text-white font-bold flex-shrink-0">2</div>
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">Block a Seat</h3>
|
||
<ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
|
||
<li>Click on an available (green) seat</li>
|
||
<li>Click <strong>"Block"</strong> button</li>
|
||
<li>Select reason:
|
||
<ul className="list-disc pl-8 mt-2 text-sm">
|
||
<li>Maintenance</li>
|
||
<li>Reserved</li>
|
||
<li>Damaged</li>
|
||
</ul>
|
||
</li>
|
||
<li>Set until date (optional)</li>
|
||
<li>Add notes</li>
|
||
<li>Click <strong>"Block Seat"</strong></li>
|
||
<li>Seat turns red</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-purple-50 dark:bg-purple-900/20 p-6 rounded-lg border border-purple-200 dark:border-purple-800">
|
||
<div className="flex items-start gap-4">
|
||
<div className="flex items-center justify-center w-10 h-10 rounded-full bg-purple-600 text-white font-bold flex-shrink-0">3</div>
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">Unblock a Seat</h3>
|
||
<ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
|
||
<li>Click on a blocked (red) seat</li>
|
||
<li>Click <strong>"Unblock"</strong> button</li>
|
||
<li>Confirm action</li>
|
||
<li>Seat becomes available (green)</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Loyalty How-To */}
|
||
<div id="loyalty" className="border-t pt-8">
|
||
<h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-2">🏆 How to Manage Loyalty Program</h2>
|
||
<p className="text-slate-600 dark:text-slate-300 mb-6">Learn how to view loyalty accounts, manage points, and administer rewards.</p>
|
||
|
||
<div className="space-y-8">
|
||
<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">1</div>
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">View Loyalty Accounts</h3>
|
||
<ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
|
||
<li>Go to <strong>Loyalty Program</strong> (Customer Services)</li>
|
||
<li>Table displays all loyalty accounts</li>
|
||
<li>Columns: Name, Tier, Points Balance, Lifetime Points</li>
|
||
<li>Search by name or filter by tier</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-green-50 dark:bg-green-900/20 p-6 rounded-lg border border-green-200 dark:border-green-800">
|
||
<div className="flex items-start gap-4">
|
||
<div className="flex items-center justify-center w-10 h-10 rounded-full bg-green-600 text-white font-bold flex-shrink-0">2</div>
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">Adjust Points</h3>
|
||
<ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
|
||
<li>Click on a loyalty account</li>
|
||
<li>Click <strong>"Adjust Points"</strong> button</li>
|
||
<li>Enter points to add/subtract</li>
|
||
<li>Select reason: Bonus, Correction, Promotion, etc.</li>
|
||
<li>Add optional notes</li>
|
||
<li>Click <strong>"Apply"</strong></li>
|
||
<li>Balance updates immediately</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-purple-50 dark:bg-purple-900/20 p-6 rounded-lg border border-purple-200 dark:border-purple-800">
|
||
<div className="flex items-start gap-4">
|
||
<div className="flex items-center justify-center w-10 h-10 rounded-full bg-purple-600 text-white font-bold flex-shrink-0">3</div>
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">Award Rewards</h3>
|
||
<ol className="list-decimal pl-5 space-y-2 text-slate-700 dark:text-slate-300">
|
||
<li>Click on a loyalty account</li>
|
||
<li>Click <strong>"Grant Reward"</strong> button</li>
|
||
<li>Select reward from list</li>
|
||
<li>Specify quantity if applicable</li>
|
||
<li>Click <strong>"Award"</strong></li>
|
||
<li>Confirmation email sent to passenger</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Common Tips */}
|
||
<div className="bg-gradient-to-r from-emerald-50 to-teal-50 dark:from-emerald-900/20 dark:to-teal-900/20 p-6 rounded-lg border border-emerald-200 dark:border-emerald-800 border-t pt-8">
|
||
<h3 className="text-lg font-semibold text-emerald-900 dark:text-emerald-200 mb-4">💡 Common Tips & Tricks</h3>
|
||
<ul className="list-disc pl-6 space-y-2 text-emerald-800 dark:text-emerald-300 text-sm">
|
||
<li><strong>Keyboard Shortcuts:</strong> Tab to navigate, Enter to submit</li>
|
||
<li><strong>Pagination:</strong> Change page size or jump to specific page</li>
|
||
<li><strong>Sidebar Collapse:</strong> Use chevron to minimize sidebar</li>
|
||
<li><strong>Dark Mode:</strong> Toggle with sun/moon icon in header</li>
|
||
<li><strong>Error Messages:</strong> Red text above forms if validation fails</li>
|
||
<li><strong>Success Notifications:</strong> Green banner appears for 3 seconds</li>
|
||
<li><strong>Undo Not Available:</strong> Most actions cannot be undone</li>
|
||
<li><strong>Real-time Updates:</strong> Refresh page to see changes by other users</li>
|
||
</ul>
|
||
</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 | How-To Guides v1.0</p>
|
||
<p className="text-sm mt-2">Last Updated: January 15, 2026</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default HowToPage;
|