Documentations update

apps/edr-passenger-web/backoffice/src/app/docs/sections/MasterDataSection.tsx

@@ -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>
+    </>
+  );
+}