Merge pull request #118 from niteeshkanna-sh/claude/stoic-rubin-fnglq7

A heading for every fact, and the car the visitor actually chose

Author: niteeshkanna-sh

admin/admin.css

@@ -1427,49 +1427,29 @@ label.finance-toggle {
    cost the row a line for nothing. */
 .rec-table .rec-when { white-space: nowrap; }
 
-/* A cell laid out across instead of down, and kept that way.
-
-   It used to wrap when the panel ran out of room, which kept the table inside
-   the window at the cost of the thing the layout was for: at 1440 the rows
-   folded back to two lines and no two rows folded in the same place, so the
-   columns stopped lining up. The box above scrolls instead. A row is one line
-   at every width now, every row the same height, and the eye can run down a
-   column.
-
-   Nothing inside breaks either: half a phone number on each of two lines is
-   worse than either half. */
-.rec-table .rec-line {
-  display: flex; align-items: baseline;
-  gap: 7px; min-width: 0; white-space: nowrap;
-}
-.rec-table .rec-line > * { flex: none; white-space: nowrap; }
-
-/* One part may give, and it is the name: a name is still recognisable from
-   its first eighteen characters (the whole of it is on the title attribute),
-   and without a ceiling one long one widens the column for every row. */
-.rec-table .rec-line > .rec-clip {
-  flex: 0 1 auto; min-width: 0; max-width: 18ch; overflow: hidden; text-overflow: ellipsis;
-}
-
-/* Its own element rather than a ::before on the detail, for two reasons: the
-   name's overflow:hidden would have clipped a pseudo-element off the end of a
-   truncated name, and on the rare line that wraps a separator left behind at
-   the end of the first line reads as "continues below", where one leading the
-   second line just reads as a mistake. */
-.rec-table .rec-dot { color: var(--ink-faint); }
-.rec-table .rec-note { color: var(--ink-dim); font-size: 0.82rem; }
-
-/* Two pills read as one unit, and sit centred on each other rather than on a
-   baseline their padding has already moved. */
-.rec-table .rec-line-chips { align-items: center; gap: 6px; }
-/* The actions stay against the right edge while the rest of the row slides
-   under them. They are the reason most people are looking at the list at all,
-   and hunting for them by scrolling is a strange thing to ask.
-
-   Opaque, because the row passes behind it -- including on hover, which the
-   row's own background change would otherwise leave stranded here. The rule
-   down its left edge is what says the column is pinned rather than merely
-   last. */
+/* Every cell is one line. Each fact has its own column now, so there is
+   nothing left in a cell to fold against -- and the box above scrolls, which
+   is what pays for the width. */
+.rec-table td { white-space: nowrap; }
+
+/* One part may give, and it is a name: a name is still recognisable from its
+   first twenty characters (the whole of it is on the title attribute), and
+   without a ceiling one long one widens the column for every row. A block
+   rather than inline so the ellipsis has a box to happen in. */
+.rec-table .rec-clip {
+  display: block; max-width: 20ch; overflow: hidden; text-overflow: ellipsis;
+}
+
+/* Something the enquiry did not say -- no car named, no dates given -- is
+   greyer than something it did. The words stay, because a dash does not tell
+   a new reader whether the question was asked. */
+.rec-table .rec-none { color: var(--ink-faint); }
+
+/* The only cell still holding two things, because they are one thing: the
+   recorded status and the position the dates put it in. Centred on each other
+   rather than on a baseline their padding has already moved. */
+.rec-table .rec-line-chips { display: flex; align-items: center; gap: 6px; }
+
 .rec-table .rec-act {
   width: 1%; white-space: nowrap;
   position: sticky; right: 0; z-index: 1;
@@ -1487,13 +1467,14 @@ label.finance-toggle {
 /* The corner: pinned both ways, so it must sit above both. */
 .rec-table thead .rec-act { z-index: 3; }
 .rec-unread td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
-/* On the last part of the name line rather than on the name itself. The name
-   clips with an ellipsis now, so a marker inside it would vanish exactly when
-   the name is long -- at random, from the reader's side. Hung off the last
-   part instead (the phone number, in practice) it travels with that part when
-   the line wraps, rather than dropping to a line of its own as a stray bullet,
-   which is what a flex item of its own did. */
-.rec-unread .rec-line-name > :last-child::after {
+/* On the enquiry number rather than on the name. The name clips with an
+   ellipsis, so a marker inside it would vanish exactly when the name is long
+   -- at random, from the reader's side. The number never clips.
+   
+   It reads once at either width without a second rule: on a desk the number
+   has its own column, and on a phone that column is hidden and the only
+   .rec-id on the row is the copy printed under the name. */
+.rec-unread .rec-id::after {
   content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
   background: var(--accent); margin-left: 7px; vertical-align: middle;
 }
@@ -1622,17 +1603,12 @@ label.finance-toggle {
   .rec-only-sm { display: block; font-size: 0.76rem; }
   .rec-table th, .rec-table td { padding: 12px 10px; }
 
-  /* Three columns of about 110 pixels. Nothing sits beside anything at that
-     width, so the line stacks outright rather than wrapping item by item --
-     the same shape it had before, and the same width, which is the width that
-     fits a phone. */
-  .rec-table .rec-line { flex-direction: column; align-items: flex-start; row-gap: 2px; }
-  /* And a long name breaks across lines here rather than setting the column's
-     width, which is the one thing that would push the table wider than the
-     phone it is on. */
-  .rec-table .rec-line > * { white-space: normal; }
-  .rec-table .rec-line > .rec-clip { max-width: none; }
-  .rec-table .rec-dot { display: none; }
+  /* Three columns of about 110 pixels each. A long name breaks across lines
+     here rather than setting the column's width, which is the one thing that
+     would push the table wider than the phone it is on. */
+  .rec-table td { white-space: normal; }
+  .rec-table .rec-clip { max-width: none; }
+  .rec-table .rec-line-chips { flex-wrap: wrap; }
 }
 
 /* ---- Are you sure? ------------------------------------------------------ */

admin/admin.js

@@ -637,33 +637,42 @@ async function renderInquiries() {
     columns: [
       { key: 'enquiry_number', label: 'Inquiry No.', hide: true, sort: (e) => e.enquiry_number,
         cell: (e) => `<span class="rec-id">${escapeHTML(e.enquiry_number)}</span>` },
-      // Across rather than down, the same as the bookings list. See the note
-      // there; the two screens are read the same way and should look it.
+      // One heading per thing. The name used to carry the phone number under
+      // it and "Asked for" carried the hire dates, which left two of the
+      // enquiry's six facts with no heading at all and put the hire dates
+      // close enough to Received to be read as the same date. Separate
+      // columns, and the box scrolls.
       { key: 'name', label: 'Name', sort: (e) => e.name.toLowerCase(),
-        cell: (e) => `<span class="rec-line rec-line-name">
-                        <span class="rec-who rec-clip" title="${escapeHTML(e.name)}"
-                          >${escapeHTML(e.name)}</span>
-                        ${e.phone ? `<span class="rec-dot" aria-hidden="true">·</span>
-                        <span class="rec-note">${escapeHTML(e.phone)}</span>` : ''}
-                      </span>
+        cell: (e) => `<span class="rec-who rec-clip" title="${escapeHTML(e.name)}"
+                        >${escapeHTML(e.name)}</span>
                       <div class="rec-sub rec-id rec-only-sm">${escapeHTML(e.enquiry_number)}</div>` },
-      { key: 'vehicle_name', label: 'Asked for', hide: true, sort: (e) => (e.vehicle_name || '').toLowerCase(),
-        cell: (e) => `<span class="rec-line">
-                        <span class="rec-clip">${escapeHTML(e.vehicle_name || 'Not specified')}</span>
-                        <span class="rec-dot" aria-hidden="true">·</span>
-                        <span class="rec-note">${e.start_date
-                          ? (e.return_date
-                              ? formatDateRange(e.start_date, e.return_date)
-                              : formatDate(e.start_date))
-                          : 'No dates given'}</span>
-                      </span>` },
+      { key: 'phone', label: 'Contact', hide: true, sort: (e) => e.phone || '',
+        // Not a tel: link: the whole row opens the enquiry, and a link inside
+        // it would fire both. The dialling is on the handset button at the end
+        // of the row, where it cannot be hit by accident.
+        cell: (e) => escapeHTML(e.phone || '—') },
+      // The car the visitor chose, which the list could not see until the API
+      // started sending it. See enquiry_vehicle_asked() for why the vehicle
+      // join is usually empty and where the name really lives.
+      { key: 'vehicle_asked', label: 'Car', hide: true,
+        sort: (e) => (e.vehicle_asked || '').toLowerCase(),
+        cell: (e) => (e.vehicle_asked
+          ? `<span class="rec-clip" title="${escapeHTML(e.vehicle_asked)}"
+               >${escapeHTML(e.vehicle_asked)}</span>`
+          : '<span class="rec-none">Not specified</span>') },
+      { key: 'start_date', label: 'Hire dates', hide: true, sort: (e) => e.start_date || '',
+        cell: (e) => (e.start_date
+          ? (e.return_date
+              ? formatDateRange(e.start_date, e.return_date)
+              : formatDate(e.start_date))
+          : '<span class="rec-none">Not given</span>') },
       { key: 'status', label: 'Status', sort: (e) => e.status,
-        cell: (e) => `<span class="rec-line rec-line-chips">
-                        <span class="status-badge status-badge-${e.status}">${e.status}</span>
-                        ${e.booking_number
-                          ? `<span class="rec-note">${escapeHTML(e.booking_number)}</span>` : ''}
-                      </span>` },
-      { key: 'created_at', label: 'Received', cls: 'rec-when', sort: (e) => e.created_at,
+        cell: (e) => `<span class="status-badge status-badge-${e.status}">${e.status}</span>` },
+      { key: 'booking_number', label: 'Booking', hide: true, sort: (e) => e.booking_number || '',
+        cell: (e) => (e.booking_number
+          ? `<span class="rec-id">${escapeHTML(e.booking_number)}</span>`
+          : '<span class="rec-none">—</span>') },
+      { key: 'created_at', label: 'Enquired on', cls: 'rec-when', sort: (e) => e.created_at,
         cell: (e) => formatDate(e.created_at) },
       { key: 'action', label: 'Action', cls: 'rec-act', hide: true, sort: (e) => e.id,
         cell: (e) => `<span class="rec-acts">
@@ -1769,34 +1778,29 @@ async function renderBookingList() {
     columns: [
       { key: 'booking_number', label: 'Booking No.', hide: true, sort: (b) => b.booking_number,
         cell: (b) => `<span class="rec-id">${escapeHTML(b.booking_number)}</span>` },
-      // Each cell reads across rather than down. Stacked, every booking stood
-      // three lines tall: four of them filled the screen, and the eye had to
-      // work out for itself that the number under a name was that customer's
-      // phone. Side by side with a middot between, a row is one sentence --
-      // who, what, when -- and twice as many fit above the fold.
+      // One heading per thing, the same as the enquiries list. Customer used
+      // to carry the phone, Vehicle the registration and Dates the duration,
+      // which left three of the booking's facts with no heading over them.
+      // The box scrolls, so they can each have a column.
       { key: 'customer_name', label: 'Customer', sort: (b) => b.customer_name.toLowerCase(),
-        cell: (b) => `<span class="rec-line">
-                        <span class="rec-who rec-clip" title="${escapeHTML(b.customer_name)}"
-                          >${escapeHTML(b.customer_name)}</span>
-                        ${b.customer_phone ? `<span class="rec-dot" aria-hidden="true">·</span>
-                        <span class="rec-note">${escapeHTML(b.customer_phone)}</span>` : ''}
-                      </span>
+        cell: (b) => `<span class="rec-who rec-clip" title="${escapeHTML(b.customer_name)}"
+                        >${escapeHTML(b.customer_name)}</span>
                       <div class="rec-sub rec-id rec-only-sm">${escapeHTML(b.booking_number)}</div>` },
+      { key: 'customer_phone', label: 'Contact', hide: true, sort: (b) => b.customer_phone || '',
+        cell: (b) => escapeHTML(b.customer_phone || '—') },
       { key: 'vehicle_name', label: 'Vehicle', hide: true, sort: (b) => (b.vehicle_name || '').toLowerCase(),
-        cell: (b) => `<span class="rec-line">
-                        <span class="rec-clip">${escapeHTML(b.vehicle_name || '—')}</span>
-                        ${b.vehicle_reg ? `<span class="rec-dot" aria-hidden="true">·</span>
-                        <span class="rec-note">${escapeHTML(b.vehicle_reg)}</span>` : ''}
-                      </span>` },
-      { key: 'start_at', label: 'Dates', hide: true, sort: (b) => b.start_at,
-        cell: (b) => `<span class="rec-line">
-                        <span>${formatDateRange(b.start_at, b.return_at)}</span>
-                        <span class="rec-dot" aria-hidden="true">·</span>
-                        <span class="rec-note"
-                          >${b.duration_days} day${Number(b.duration_days) === 1 ? '' : 's'}</span>
-                      </span>` },
+        cell: (b) => (b.vehicle_name
+          ? `<span class="rec-clip" title="${escapeHTML(b.vehicle_name)}"
+               >${escapeHTML(b.vehicle_name)}</span>`
+          : '<span class="rec-none">—</span>') },
+      { key: 'vehicle_reg', label: 'Reg. no.', hide: true, sort: (b) => (b.vehicle_reg || '').toLowerCase(),
+        cell: (b) => escapeHTML(b.vehicle_reg || '—') },
+      { key: 'start_at', label: 'Hire dates', hide: true, sort: (b) => b.start_at,
+        cell: (b) => formatDateRange(b.start_at, b.return_at) },
+      { key: 'duration_days', label: 'Days', hide: true, sort: (b) => Number(b.duration_days),
+        cell: (b) => `${b.duration_days} day${Number(b.duration_days) === 1 ? '' : 's'}` },
       { key: 'status', label: 'Status', sort: (b) => b.status,
-        cell: (b) => `<span class="rec-line rec-line-chips">
+        cell: (b) => `<span class="rec-line-chips">
                         <span class="status-badge status-badge-${b.status}">${b.status}</span>
                         ${scheduleChipHTML(b, { quiet: true })}
                       </span>` },

admin/api/enquiries.php

@@ -321,6 +321,49 @@ function enquiry_or_404(int $id): array
     return $row;
 }
 
+/**
+ * The opening of the line lib/enquiry.ts writes into the free-text
+ * requirements when a visitor picks a car.
+ */
+const VEHICLE_ASKED_PREFIX = 'Vehicle of interest:';
+
+/**
+ * The car the visitor actually chose.
+ *
+ * vehicle_id is set only when the website had the real fleet from the panel
+ * and that vehicle still exists. On this site it usually is not: the ids in
+ * the committed fallback fleet are placeholders, and enquiry-submit.php drops
+ * an id it cannot find rather than refusing the enquiry over it.
+ *
+ * The name always travels, though. lib/enquiry.ts writes it into the
+ * requirements as "Vehicle of interest: <name>" for exactly this reason -- so
+ * the enquiry stays answerable when the id does not survive, and still reads
+ * correctly years later when that vehicle has been sold.
+ *
+ * So: the join first, the visitor's own words second. The list was showing
+ * "Not specified" over enquiries that had named a car perfectly clearly.
+ */
+function enquiry_vehicle_asked(array $row): ?string
+{
+    $joined = $row['vehicle_name'] ?? null;
+    if ($joined !== null && $joined !== '') {
+        return (string) $joined;
+    }
+
+    foreach (preg_split('/\r\n|\r|\n/', (string) ($row['requirements'] ?? '')) as $line) {
+        $line = trim($line);
+        if (stripos($line, VEHICLE_ASKED_PREFIX) !== 0) {
+            continue;
+        }
+        $name = trim(substr($line, strlen(VEHICLE_ASKED_PREFIX)));
+        if ($name !== '') {
+            return $name;
+        }
+    }
+
+    return null;
+}
+
 function present_enquiry(array $row, bool $detailed = false): array
 {
     $out = [
@@ -331,6 +374,9 @@ function present_enquiry(array $row, bool $detailed = false): array
         'email'           => $row['email'],
         'vehicle_id'      => $row['vehicle_id'] === null ? null : (int) $row['vehicle_id'],
         'vehicle_name'    => $row['vehicle_name'],
+        // What to show in the Car column: the real vehicle when the enquiry is
+        // tied to one, otherwise the name the visitor picked on the website.
+        'vehicle_asked'   => enquiry_vehicle_asked($row),
         'start_date'      => $row['start_date'],
         'return_date'     => $row['return_date'],
         'pickup_location' => $row['pickup_location'],

build.json

@@ -1,8 +1,8 @@
 {
-  "publishedAt": "2026-10-01T08:18:14.313Z",
-  "commit": "2922c66d",
-  "commitAt": "2026-10-01T13:38:03+05:30",
-  "sourceHash": "158f745c42872017",
+  "publishedAt": "2026-10-01T10:45:55.711Z",
+  "commit": "c1f80311",
+  "commitAt": "2026-10-01T13:49:45+05:30",
+  "sourceHash": "afb414336c5a3bf6",
   "assets": [
     "About-BzCVrfp8.js",
     "Bikes-Dv_LRU5Z.js",