Add attachments to service, maintenance, fuel and parts records

Documents already carried a single optional file: upload, download, detach,
access-checked on every request and proxied through this server, so PocketBase's
files are never public URLs. Service records, workshop visits, refills and
catalog parts all want the same thing — a receipt, an invoice, a photo of the
box — so extend it to them.

Rather than copy the document handlers four more times, lift them into one
shared layer. Every attachable collection has a car relation and a file field,
which is what lets a single set of handlers authorize and serve all of them. An
upload finishes by delegating to the collection's own GET handler, so the
response carries the full record — derived fields and all — exactly as a re-read
would. The web side gets the same treatment: one picker component and one
upload-after-save helper behind all five forms. Net effect is five features for
about the cost of the one that was already there.

Alongside:
- parts gain a notes field
- Reminders moves behind Parts catalog in the car detail tabs
- the changed-part labels spell out in full ("Oil & Oil filter" rather than
  "Oil & filter"), and the form and table now agree

The PocketBase schema must be migrated before the new attachments work:
scripts/setup-pocketbase.mjs adds the file fields and parts.notes. It is
additive and safe to re-run.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Web App/web/src/views/CarDetail.vue

@@ -83,8 +83,8 @@ const TABS = [
   { key: "maintenance", label: "Maintenance log" },
   { key: "fuel", label: "Fuel" },
   { key: "documents", label: "Documents" },
-  { key: "reminders", label: "Reminders" },
   { key: "parts", label: "Parts catalog" },
+  { key: "reminders", label: "Reminders" },
 ];
 
 async function load() {
@@ -258,15 +258,16 @@ async function deleteDocument(id) {
     error.value = e.message;
   }
 }
-// The attachment needs the auth header, so it is fetched as a Blob rather than
-// linked to directly.
-async function downloadDocument(doc) {
+// --- attachments ---
+// The file needs the auth header, so it is fetched as a Blob rather than linked
+// to directly. `kind` names one of api.files — the same keys as the tabs.
+async function downloadAttachment(kind, record) {
   try {
-    const { blob, filename } = await api.getDocumentFileBlob(doc.id);
+    const { blob, filename } = await api.files[kind].download(record.id);
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
     a.href = url;
-    a.download = filename || doc.fileName || "document";
+    a.download = filename || record.fileName || "attachment";
     a.click();
     URL.revokeObjectURL(url);
   } catch (e) {
@@ -503,10 +504,11 @@ onMounted(load);
                 <th>Km</th>
                 <th>Next date</th>
                 <th>Next km</th>
-                <th class="!text-center">Oil &amp; filter</th>
-                <th class="!text-center">Engine air</th>
-                <th class="!text-center">Cabin air</th>
+                <th class="!text-center">Oil &amp; Oil filter</th>
+                <th class="!text-center">Engine air filter</th>
+                <th class="!text-center">Cabin air filter</th>
                 <th>Notes</th>
+                <th>File</th>
                 <th v-if="canWrite"></th>
               </tr>
             </thead>
@@ -520,6 +522,12 @@ onMounted(load);
                 <td class="px-4 py-3 text-center text-xs font-semibold" :class="s.changedEngineAirFilter ? 'text-success' : 'text-muted'">{{ yn(s.changedEngineAirFilter) }}</td>
                 <td class="px-4 py-3 text-center text-xs font-semibold" :class="s.changedCabinAirFilter ? 'text-success' : 'text-muted'">{{ yn(s.changedCabinAirFilter) }}</td>
                 <td class="px-4 py-3 text-body">{{ s.notes || '—' }}</td>
+                <td class="whitespace-nowrap px-4 py-3">
+                  <button v-if="s.hasFile" class="text-xs font-medium text-brandtext hover:underline" @click="downloadAttachment('services', s)">
+                    Download
+                  </button>
+                  <span v-else class="text-xs text-muted">—</span>
+                </td>
                 <td v-if="canWrite" class="whitespace-nowrap px-4 py-3 text-right">
                   <button class="text-xs font-medium text-brandtext hover:underline" @click="openEditService(s)">Edit</button>
                   <button class="ml-3 text-xs font-medium text-danger hover:underline" @click="deleteService(s.id)">Delete</button>
@@ -558,6 +566,7 @@ onMounted(load);
                 <th>Workshop</th>
                 <th>Status</th>
                 <th class="!text-right">Cost</th>
+                <th>File</th>
                 <th v-if="canWrite"></th>
               </tr>
             </thead>
@@ -585,6 +594,12 @@ onMounted(load);
                 <td class="whitespace-nowrap px-4 py-3 text-right data text-body">
                   {{ m.totalCost ? formatMoney(m.totalCost) : '—' }}
                 </td>
+                <td class="whitespace-nowrap px-4 py-3">
+                  <button v-if="m.hasFile" class="text-xs font-medium text-brandtext hover:underline" @click="downloadAttachment('maintenance', m)">
+                    Download
+                  </button>
+                  <span v-else class="text-xs text-muted">—</span>
+                </td>
                 <td v-if="canWrite" class="whitespace-nowrap px-4 py-3 text-right">
                   <button class="text-xs font-medium text-brandtext hover:underline" @click="openEditMaintenance(m)">Edit</button>
                   <button class="ml-3 text-xs font-medium text-danger hover:underline" @click="deleteMaintenance(m.id)">Delete</button>
@@ -667,6 +682,7 @@ onMounted(load);
                 <th class="!text-right">Distance</th>
                 <th class="!text-right">Consumption</th>
                 <th>Station</th>
+                <th>File</th>
                 <th v-if="canWrite"></th>
               </tr>
             </thead>
@@ -689,6 +705,12 @@ onMounted(load);
                   {{ f.station || '—' }}
                   <div v-if="f.notes" class="text-xs text-muted">{{ f.notes }}</div>
                 </td>
+                <td class="whitespace-nowrap px-4 py-3">
+                  <button v-if="f.hasFile" class="text-xs font-medium text-brandtext hover:underline" @click="downloadAttachment('fuel', f)">
+                    Download
+                  </button>
+                  <span v-else class="text-xs text-muted">—</span>
+                </td>
                 <td v-if="canWrite" class="whitespace-nowrap px-4 py-3 text-right">
                   <button class="text-xs font-medium text-brandtext hover:underline" @click="openEditFuel(f)">Edit</button>
                   <button class="ml-3 text-xs font-medium text-danger hover:underline" @click="deleteFuel(f.id)">Delete</button>
@@ -744,7 +766,7 @@ onMounted(load);
                   <span :class="expiryStatus(d).classes">{{ expiryStatus(d).label }}</span>
                 </td>
                 <td class="whitespace-nowrap px-4 py-3">
-                  <button v-if="d.hasFile" class="text-xs font-medium text-brandtext hover:underline" @click="downloadDocument(d)">
+                  <button v-if="d.hasFile" class="text-xs font-medium text-brandtext hover:underline" @click="downloadAttachment('documents', d)">
                     Download
                   </button>
                   <span v-else class="text-xs text-muted">—</span>
@@ -827,12 +849,14 @@ onMounted(load);
           No parts yet.
         </div>
 
-        <div v-else class="dh-card overflow-hidden p-0">
+        <div v-else class="dh-card overflow-x-auto p-0">
           <table class="min-w-full text-sm">
             <thead class="bg-sunken text-left">
               <tr class="[&>th]:eyebrow [&>th]:px-4 [&>th]:py-3">
                 <th>Part</th>
                 <th>Part number</th>
+                <th>Notes</th>
+                <th>File</th>
                 <th v-if="canWrite"></th>
               </tr>
             </thead>
@@ -840,6 +864,13 @@ onMounted(load);
               <tr v-for="p in parts" :key="p.id" class="transition-colors hover:bg-sunken">
                 <td class="px-4 py-3 font-medium text-strong">{{ p.name }}</td>
                 <td class="px-4 py-3 data text-body">{{ p.partNumber || '—' }}</td>
+                <td class="px-4 py-3 text-body">{{ p.notes || '—' }}</td>
+                <td class="whitespace-nowrap px-4 py-3">
+                  <button v-if="p.hasFile" class="text-xs font-medium text-brandtext hover:underline" @click="downloadAttachment('parts', p)">
+                    Download
+                  </button>
+                  <span v-else class="text-xs text-muted">—</span>
+                </td>
                 <td v-if="canWrite" class="whitespace-nowrap px-4 py-3 text-right">
                   <button class="text-xs font-medium text-brandtext hover:underline" @click="openEditPart(p)">Edit</button>
                   <button class="ml-3 text-xs font-medium text-danger hover:underline" @click="deletePart(p.id)">Delete</button>