# OP-DEXT-B: UI Page Concepts — Invoice Backup & Recovery
## Finance Centre Screens

---

## Page 1: Finance Centre — Receipt Detail (with Backup Badge)

**Route:** `/finance-centre/receipts/{receiptId}`  
**Existing page:** `ReceiptDetail.jsx` (extend, do not replace)

---

### Section: Receipt Header

**Layout:** Two-column top row (left: receipt identity, right: status badges)

**Left column:**
- Supplier name (h2, bold)
- Invoice reference number (mono, muted)
- Invoice date + received date
- Submission channel badge: "Email" | "Manual Upload" | "Dext Import"

**Right column (badges, horizontal row):**

| Badge | States | Colours |
|-------|--------|---------|
| Approval status | `Pending Review` / `Approved` / `Rejected` | Amber / Green / Red |
| Sage export | `Not Exported` / `Exported YYYY-MM-DD` | Muted / Blue |
| **SharePoint backup** | `Backed Up ✓` / `Backup Pending` / `Backup Failed ✗` / `Not Configured` | Green / Amber / Red / Grey |

**SharePoint badge tooltip (hover):**
- Success: "Backed up to SharePoint on 15 Jun 2026 at 14:32 — Shared Documents/ERP Receipts/2026/06/"
- Pending: "Backup queued — uploading to SharePoint"
- Failed: "SharePoint upload failed at 14:31 — click to retry" (action: triggers re-upload)
- Not Configured: "SharePoint not configured — contact admin"

**Empty state (backup field absent on older receipts):**
- Badge shows "Backup Unknown" in grey — tooltip: "This receipt pre-dates backup tracking. Run a manual backup check in Settings."

---

### Section: Invoice Attachment

Unchanged from current design. If the local file is missing but a SharePoint path is recorded:

**Warning banner (yellow):**
```
⚠ Local file missing — PDF stored on SharePoint only.
[Download from SharePoint]
```
Button: `Download from SharePoint` — triggers `GET /api/receipts/{id}/attachment?source=sharepoint`

---

### Section: OCR Data / Field Editor

No change from current design. Out of scope for this concept.

---

### Mobile considerations

- Badges collapse into a single-line scrollable row on screens < 768px
- SharePoint badge visible on mobile — tap to expand tooltip
- Download from SharePoint button full-width on mobile

---

---

## Page 2: Finance Centre Settings — Backup & Recovery Tab

**Route:** `/finance-centre/settings` → tab: "Backup & Recovery"  
**Existing page:** `ReceiptsSettings.jsx` — add new tab section

---

### Section: Tab Navigation (add to existing)

Existing tabs (assumed): General | Email Poller | Sage Export  
**Add tab:** `Backup & Recovery`

---

### Section: SharePoint Connection Status

**Headline:** SharePoint Backup Status  
**Layout:** Status card with left icon, right detail

**States:**

**Connected (green):**
```
● Connected to SharePoint
Tenant: ar-controls.sharepoint.com
Last connectivity check: 2 minutes ago
ERP Receipts folder: Shared Documents/ERP Receipts/
[Test Connection]
```

**Disconnected (red):**
```
● SharePoint Disconnected
Cannot reach Microsoft Graph API. Check credentials in .env.
SHAREPOINT_TENANT_ID, SHAREPOINT_CLIENT_ID, SHAREPOINT_CLIENT_SECRET required.
[Retry Connection]
```

**Not Configured (grey):**
```
○ SharePoint Not Configured
Per-ingest receipt backups are disabled. Invoices stored locally only.
Set SHAREPOINT_TENANT_ID, SHAREPOINT_CLIENT_ID, and SHAREPOINT_CLIENT_SECRET to enable.
```

---

### Section: Backup Health Summary

**Headline:** Receipt Backup Health  
**Layout:** 3-stat row

| Stat | Value | Colour |
|------|-------|--------|
| Total Receipts | 847 | Neutral |
| Backed Up | 839 (99.1%) | Green |
| Backup Failed | 8 | Red (clickable — scrolls to failed list) |
| Backup Pending | 0 | Amber (if > 0) |

**Below stats — progress bar:** Green fill to 99.1%, red notch for failed

**Copy (below bar):**  
"Last per-ingest backup: 15 Jun 2026 at 14:32 · Last daily database backup: 15 Jun 2026 at 02:01 ✓"

---

### Section: Failed Backups List

**Headline:** Failed Backups  
**Visible only when count > 0**

**Table:**

| Receipt | Supplier | Date | Error | Action |
|---------|----------|------|-------|--------|
| #1042 | Travis Perkins | 14 Jun 2026 | SharePoint timeout (30s) | [Retry] |
| #1037 | Würth UK | 13 Jun 2026 | Token refresh failed | [Retry] |
| … | | | | |

**Bulk action button (above table, visible when ≥ 1 row selected):**  
`[Retry Selected]` `[Retry All (8)]`

**Retry feedback:**
- During: row shows spinner + "Uploading…"
- Success: row removes itself from table, success toast: "Receipt #1042 backed up ✓"
- Still failing: row turns red, error message updates

**Empty state (all backed up):**
```
✓ All receipts successfully backed up to SharePoint.
```

---

### Section: Manual Backup Triggers

**Headline:** Manual Actions  
**Layout:** Two action cards side-by-side

**Card A — Retry All Failed:**
```
Retry Failed Backups
Attempt to re-upload all 8 receipts that failed SharePoint backup.
Estimated time: ~30 seconds
[Run Now]
```

**Card B — Full Re-Sync:**
```
Full Receipt Re-Sync
Re-upload every receipt to SharePoint regardless of status.
Use after credential change or SharePoint folder reorganisation.
Estimated time: ~15 minutes for 847 receipts
[Run Full Re-Sync]
```
Full re-sync shows a confirmation modal:
- Headline: "Are you sure?"
- Body: "This will re-upload all 847 receipt files to SharePoint. Existing SharePoint copies will be overwritten. This runs in the background."
- Buttons: `[Cancel]` `[Yes, Re-Sync All]`

---

### Section: Disaster Recovery Wizard

**Headline:** Restore from SharePoint  
**Collapsed by default** — expand toggle: "▶ Restore Receipt Files from SharePoint"

**Step 1 — Scope:**
```
What do you want to restore?
○ Missing files only (receipts in database with no local file)  ← default
○ All receipts in a date range
  From: [date picker]  To: [date picker]
```

**Step 2 — Confirmation:**
```
⚠ This will download receipt files from SharePoint and write them to the server.
Files already present locally will not be overwritten.
Admin password: [password field]
[Begin Restore]
```

**Step 3 — Progress (shown after Begin Restore):**
```
Restoring receipt files…
[=============================>   ] 372 / 847 files
Elapsed: 1m 23s · Est. remaining: 1m 05s

Recently restored:
✓ 2026/06/15 — travis_perkins_inv_14jun.pdf
✓ 2026/06/15 — wurth_uk_receipt_13jun.pdf
✓ 2026/06/14 — screwfix_receipt_12jun.pdf
```

**Step 4 — Complete:**
```
✓ Restore complete
847 files restored · 0 not found in SharePoint
[View in Finance Centre]
```

**Error state (files not found in SharePoint):**
```
✗ 3 files could not be restored — not found in SharePoint.
These receipts exist in the database but have no SharePoint copy.
[Download List (CSV)]
```

---

### Section: Daily Database Backup Status

**Headline:** Database Backup (Daily)  
**This is the existing MongoDB backup, just surfaced here for completeness**

**Layout:** Status row

```
Daily database backup: Enabled · Runs at 02:00 UTC
Last backup: 15 Jun 2026 at 02:01 ✓ (uploaded to Shared Documents/ERP Backups/)
Next backup: 16 Jun 2026 at 02:00
[Trigger Now]  [View Backup History]
```

**Note copy:**
"Database backups cover all ERP data (receipts, quotes, projects, purchase orders) but do not include receipt PDF/image files. Use the Receipt Re-Sync above to ensure all files are also in SharePoint."

---

### Mobile considerations

- Tab bar scrolls horizontally on mobile; "Backup & Recovery" is last tab
- Stats row stacks vertically (3 cards → single column)
- Failed backups table: Supplier + Action columns visible; Date + Error hidden (tap row to expand)
- Restore wizard: full-width steps, date pickers use native mobile date input

---

---

## Page 3: Finance Centre — Receipts List (Backup Column Addition)

**Route:** `/finance-centre/receipts`  
**Existing page:** `ReceiptsDashboard.jsx` / `CostsInbox.jsx`

---

### Change: Column Addition

Add a compact backup indicator column to the existing receipts table.

**Column header:** `SP` (SharePoint — with tooltip: "SharePoint Backup Status")

**Column values:**

| Icon | Meaning |
|------|---------|
| ✓ (green) | Backed up |
| ⏳ (amber) | Pending |
| ✗ (red) | Failed |
| — (grey) | Unknown / Not configured |

**Filter addition (filter bar):**  
Add filter chip: `Backup Failed` — shortcut to list of failed backups (same as clicking the red stat in Settings)

**Bulk action (when rows selected):**  
`[Retry SharePoint Backup]` — triggers batch re-upload for selected receipts

---

### Mobile considerations

- SP column hidden on mobile (< 768px) to preserve space
- Backup status visible on the expanded row card view (mobile uses card layout)

---

---

## Page 4: Admin — Restore Drill Verification (Evidence Page)

> This is an admin-only tool page, not a user-facing route. Used during OP-DEXT-B audit and future drills.

**Route:** `/admin/backup-restore-drill` (protected: admin role only)

---

### Section: Drill Controls

**Headline:** Backup & Restore Drill — DEV Only

**Warning banner (red, persistent):**
```
⚠ DESTRUCTIVE OPERATIONS — DEV ENVIRONMENT ONLY
This page can delete local invoice files for drill purposes.
Never use on production (erp.ar-controls.co.uk).
```

**Environment indicator:**
```
Current environment: DEV (100.68.36.49:3080) ✓
```
If production detected, all destructive buttons are disabled and replaced with "Not available in production."

---

### Section: Wipe Drill

```
Step 1 — Wipe local receipt files (drill only)
Deletes all files from backend/uploads/receipts/ and storage/email_attachments/
This simulates a server wipe. SharePoint copies are NOT affected.

Target: 847 local files · Total size: 2.3 GB
[Confirm Wipe — Type "WIPE" to unlock]  [input field]  [Execute Wipe]
```

**Post-wipe state:**
```
✓ Wipe complete — 847 local files deleted
Time: 15 Jun 2026 14:45:02 UTC
Finance Centre will now show broken PDF links for all receipts.
Proceed to Step 2.
```

---

### Section: Restore Drill

```
Step 2 — Restore from SharePoint
Downloads all receipt files back from Shared Documents/ERP Receipts/

[Begin Restore]
```

Progress bar + file log (same as Settings restore wizard, Step 3).

---

### Section: Verification

```
Step 3 — Verify
Compare local file count against receipt database count.

Local files found: 847 / 847
SharePoint copies found: 847 / 847
Missing from SharePoint: 0
Missing locally after restore: 0

[Open Finance Centre]  [Download Verification Report]
```

Verification Report is a markdown/text file suitable for pasting into `evidence/OP-DEXT-B/restore-drill-transcript.md`.

---

### Mobile considerations

- Drill page not mobile-optimised — admin task, desktop only
- Mobile shows: "This page is designed for desktop use. Please use a desktop browser."

---

---

## Component Inventory (new/modified)

| Component | File | Change |
|-----------|------|--------|
| `BackupStatusBadge` | `components/receipts/BackupStatusBadge.jsx` | New — 4-state badge with tooltip |
| `BackupHealthPanel` | `components/receipts/BackupHealthPanel.jsx` | New — stat row + failed list |
| `RestoreWizard` | `components/receipts/RestoreWizard.jsx` | New — 4-step restore flow |
| `DrillPage` | `pages/admin/BackupRestoreDrill.jsx` | New — admin-only drill tool |
| `ReceiptsSettings.jsx` | `pages/receipts/ReceiptsSettings.jsx` | Add "Backup & Recovery" tab |
| `ReceiptDetail.jsx` | `components/receipts/ReceiptDetail.jsx` | Add `BackupStatusBadge` |
| Receipt list table | `pages/receipts/CostsInbox.jsx` | Add SP column + filter chip |

---

## Copy Reference

| Location | Headline | Body copy |
|----------|----------|-----------|
| Settings tab | Backup & Recovery | — |
| Connection card (ok) | SharePoint Backup Status | "Connected · Last check: 2 min ago" |
| Connection card (err) | SharePoint Disconnected | "Cannot reach Microsoft Graph API. Check credentials in .env." |
| Health stat (ok) | All receipts backed up ✓ | — |
| Health stat (warn) | 8 receipts failed backup | "Click to view and retry failed uploads." |
| Restore wizard step 1 | What do you want to restore? | — |
| Restore wizard confirm | ⚠ This will download files from SharePoint | "Files already present locally will not be overwritten." |
| Restore complete | ✓ Restore complete | "{N} files restored · {M} not found in SharePoint" |
| Badge tooltip (ok) | Backed up to SharePoint | "Backed up on {date} at {time} — {path}" |
| Badge tooltip (fail) | SharePoint upload failed | "Failed at {time} — click to retry" |
| Drill warning | DESTRUCTIVE OPERATIONS — DEV ONLY | "Never use on production." |