From 16ac60c963a197b8a6f2f9f3422f73460b376c3c Mon Sep 17 00:00:00 2001
From: Rahman Lawal <rahmanabimbina@gmail.com>
Date: Mon, 29 Jun 2026 11:57:29 +0100
Subject: [PATCH] feat: Add invoice sharing via QR code modal and resolve
 Next.js compilation issues

---
 accessibility-guide.md                        | 466 ++++++++++++++++++
 package-lock.json                             |  51 ++
 package.json                                  |   1 +
 src/__tests__/InvoiceCard.test.tsx            |  21 +-
 src/__tests__/InvoiceShareQRModal.test.tsx    |  60 +++
 src/__tests__/batchDuplicateDetection.test.ts |   2 +-
 src/app/history/page.tsx                      |  25 +-
 src/app/invoice/[id]/opengraph-image.tsx      |   2 +-
 src/app/invoice/[id]/page.tsx                 | 120 ++++-
 src/app/invoice/batch/page.tsx                |  44 +-
 src/components/DashboardClient.tsx            |  24 +-
 src/components/FundingProgress.tsx            |   4 +-
 src/components/InvoiceCard.tsx                |  24 +-
 src/components/InvoiceSearch.tsx              |  27 +-
 src/components/InvoiceShareQRModal.tsx        | 143 ++++++
 src/components/PaymentChannelPanel.tsx        |   2 +-
 src/components/RecipientPayoutTracker.tsx     |   3 +-
 src/lib/batchDuplicates.ts                    |  39 ++
 src/lib/freighter.ts                          |  13 +-
 src/lib/invoiceSearch.ts                      |   2 +-
 vitest.config.ts                              |   5 +
 vitest.setup.ts                               |   3 +
 22 files changed, 997 insertions(+), 84 deletions(-)
 create mode 100644 accessibility-guide.md
 create mode 100644 src/__tests__/InvoiceShareQRModal.test.tsx
 create mode 100644 src/components/InvoiceShareQRModal.tsx
 create mode 100644 src/lib/batchDuplicates.ts

diff --git a/accessibility-guide.md b/accessibility-guide.md
new file mode 100644
index 0000000..cef9fed
--- /dev/null
+++ b/accessibility-guide.md
@@ -0,0 +1,466 @@
+
+--- Guide for accessibility ---
+# Accessibility Coding Guidelines
+
+This guide provides actionable DOs and DON'Ts for AI coding agents to ensure web applications are accessible to all users, including those using assistive technologies.
+
+Keep these principles in mind throughout:
+
+- **Accessibility is the minimum, not the ceiling.** Conformance to standards is the floor; aim for genuine usability.
+- **Patterns are use-case specific.** No checklist replaces real testing — including testing with disabled users — to confirm a given implementation is actually accessible in context.
+
+## 1. Content Navigability and Structure
+
+### Actionable Guidelines
+
+#### DOs
+- **Place all content within landmarks**: Wrap the page in `<header>`, `<nav>`, `<main>`, `<aside>`, and `<footer>` so assistive-tech users can jump between regions.
+- **Structure main content with headings**: Use `<h1>`–`<h6>` sequentially (no jumping `<h1>` → `<h4>`) so screen-reader users get a navigable outline.
+- **Use lists for repeated, contiguous content**: `<ul>`/`<ol>` give assistive tech a count up front and let users skip the entire group.
+- **Provide skip links** prior to repeated content like site headers with navigation or long/infinite lists, so that keyboard users can easily bypass them. Make sure the target is focusable (e.g. `<main id="content" tabindex="-1">`).
+- **Semantic Tables**: Use `<caption>` and `<th scope="col">` (or `<th scope="row">`) for data tables.
+
+#### DON'Ts
+- **Don't use fake headings**: Never style `<div>` or `<span>` to look like headings without standard `<h1>`–`<h6>` tags.
+- **Don't place headings inside `<summary>`, and avoid relying on headings inside `<details>` content**: Headings inside `<summary>` may be hidden from screen-reader heading lists and heading-navigation shortcuts entirely; headings inside `<details>` content are only reachable via heading navigation when the disclosure is open.
+  - **Caveat**: If a heading must act as a disclosure trigger, use a more robust alternative to `<details>`/`<summary>` instead, e.g. an accordion or a disclosure implemented with ARIA where the heading wraps the button.
+- **Don't use tables for layout**: Use CSS Grid/Flexbox for visual layouts.
+- **Don't overuse landmarks**: Too many landmarks dilute their value. In particular, avoid labeling a `<section>` (which turns it into a `region` landmark) — `region` should be a last resort when no other landmark fits.
+
+### Code Examples
+
+```html
+<!-- Good: Semantic landmarks, heading hierarchy, skip link -->
+<header>
+  <a href="#content" class="skip-link visually-hidden">Skip to content</a>
+  <nav aria-label="Primary">
+    <ul>
+      <li><a href="/">Home</a></li>
+    </ul>
+  </nav>
+</header>
+<main id="content" tabindex="-1">
+  <h1>Platform Dashboard</h1>
+  <section>
+    <h2>User Statistics</h2>
+    <table>
+      <caption>Monthly active users</caption>
+      <tr>
+        <th scope="col">Month</th>
+        <th scope="col">Users</th>
+      </tr>
+      <tr>
+        <td>January</td>
+        <td>12,000</td>
+      </tr>
+    </table>
+  </section>
+</main>
+```
+
+## 2. Semantic HTML and ARIA
+
+### Actionable Guidelines
+
+#### DOs
+- **Prefer HTML elements and attributes to ARIA**: A native element comes with the right role and behavior. `<button>` already implies `role="button"`; `required` already implies `aria-required`.
+- **Match ARIA implementations to actual behavior**: If you set `role="tab"`, the element must behave like a tab — including keyboard interactions. Many ARIA patterns can't be implemented in CSS alone and need JavaScript.
+- **Be deliberate about `disabled` vs `aria-disabled`**: `disabled` removes the element from the focus order entirely (and `tabindex="0"` won't bring it back), which is often wrong for toolbar buttons or links. `aria-disabled="true"` keeps the element focusable so users can land on it and learn it's disabled.
+
+#### DON'Ts
+- **Don't use ARIA when native HTML exists**: Avoid `<div role="button">` or `<a role="button">` if `<button>` works.
+- **Don't add redundant ARIA roles or properties**: Avoid `<ul role="list">`, `<nav role="navigation">`, or `<input required aria-required="true">`.
+  - **Caveat**: Safari removes list semantics from `<ul>`/`<ol>` outside `<nav>` when `list-style: none` or `display: flex`/`grid` is applied. In that case `role="list"` is required to restore them.
+- **Don't assume custom elements have no ARIA**: Custom elements can attach ARIA via `ElementInternals`, which some automated test tools can't see — so the absence of `role`/`aria-*` attributes in markup doesn't prove the element has no semantics. Verify with the browser's accessibility-tree inspector.
+
+## 3. Accessible Names and Descriptions
+
+Every interactive element and some landmarks need an accessible name, and many benefit from an accessible description. Names are short and identify the element; descriptions add context.
+
+### Actionable Guidelines
+
+#### DOs
+- **Prefer native naming mechanisms**: `<label>` for form controls, `<caption>` for `<table>`, `<legend>` for `<fieldset>`, `<figcaption>` for `<figure>`.
+- **Explicitly associate `<label>` with its control via `for`/`id`**, even when nesting the input inside the label — explicit association improves assistive-tech support.
+- **Prefer `aria-labelledby` over `aria-label` when a visible label exists**: avoids duplication, improves maintainability, and translates better.
+- **Prefer to reuse the same accessible name for hyperlinks that share an `href`.**
+- **Use visually hidden text to disambiguate controls** that look identical visually but do different things (e.g. multiple "Edit" buttons in a list).
+
+#### DON'Ts
+- **Don't put `aria-label`/`aria-labelledby` on elements that shouldn't be named** — e.g. plain `<div>`, `<span>`, or custom elements without a role. Custom elements may have an implicit role set via `ElementInternals`, so the absence of a `role` attribute isn't conclusive.
+- **Don't reuse an accessible name across controls with different effects in the same view** (close buttons for two different open dialogs are fine because only one is reachable at a time; multiple “Edit” buttons for different content is not).
+- **Don't reuse an accessible name across hyperlinks pointing to different `href`s.**
+- **Don't pack descriptions, error messages, or instructions into the label.**
+- **Don't repeat state already exposed via ARIA** (`aria-expanded`, `aria-checked`, `aria-selected`, `aria-pressed`) inside the accessible name — it creates redundancy and ambiguity.
+- **Don't include the role name in the label**: `<nav aria-label="Primary navigation">` reads as "Primary navigation navigation."
+- **Don't use `title` or `placeholder` as a naming mechanism.**
+- **Don't include interactive elements in an `aria-describedby` target** unless their text content reads sensibly as a description on its own (e.g. if a link’s text is the same as how it’s labelled elsewhere, it can be included within a description).
+
+### Code Example: Visually Hidden Utility
+
+A `.visually-hidden` utility lets you provide text for screen readers without rendering it visually. It's commonly used for skip links, additional context on icon-only buttons, and supplementary labels.
+
+```css
+/* Hides content visually but keeps it in the accessibility tree.
+   :focus-within / :active opt elements out — useful for skip links and
+   any focusable content wrapped in this class. */
+.visually-hidden:where(:not(:focus-within, :active)) {
+  position: absolute !important;
+  clip-path: inset(50%) !important;
+  overflow: hidden !important;
+  width: 1px !important;
+  height: 1px !important;
+  margin: -1px !important;
+  padding: 0 !important;
+  border: 0 !important;
+  white-space: nowrap !important;
+}
+```
+
+When the hidden content is focusable (skip links, focus-receiving wrappers), the `:focus-within`/`:active` exception lets it become visible. Style the visible state per situation, e.g. a skip link to the main content typically wants fixed positioning at the top-left of the viewport so the rest of the page doesn't shift.
+
+## 4. Document Metadata and Language
+
+### Actionable Guidelines
+
+#### DOs
+- **Declare Visual Language**: Always set `<html lang="en">` (or appropriate code).
+- **Unique Page Titles**: Front-load unique context in `<title>` (e.g., `Page Topic | Site Name`).
+- **Inline Language Switches**: Use `lang="..."` for block quotes or text in different languages.
+- **IFrame Titles**: Always provide a descriptive `title="..."` for `<iframe>` elements.
+- **Update document title on Page Transitions in SPAs**: Shift focus to updated titles.
+
+#### DON'Ts
+- **Don't Disable iframe Scrolling**: Avoid `scrolling="no"` (deprecated) or `overflow: hidden` on iframes. Users who zoom in or enlarge text need to scroll to reach content that overflows.
+
+### Code Examples
+
+```html
+<!-- Good: Distinct title and language declaration -->
+<html lang="en">
+<head>
+  <title>Analytics Reports | Guidance Platform</title>
+</head>
+<body>
+  <p>The motto is <span lang="la">"Carpe diem"</span>.</p>
+  <iframe title="Interactive Sales Chart" src="/chart"></iframe>
+</body>
+</html>
+```
+
+## 5. Keyboard and Focus Management
+
+### Actionable Guidelines
+
+#### DOs
+- **Logical Tab Order**: Ensure tab order matches visual layouts (top-to-bottom).
+- **Visible Focus Indicators**: Always style `:focus-visible` states explicitly. If disabling defaults, provide overrides with sufficient contrast.
+- **Custom Trigger Keyboards**: Attach Enter/Space handlers for custom simulated interactive elements. When implementing a custom keyboard handler for button-like elements, `Enter` should be a `keydown` handler and `Space` should be a `keyup` handler (matching native `<button>` behavior where `Enter` repeats and `Space` triggers on release).
+- **Use `tabindex` deliberately**: Anything focusable — by keyboard or programmatically — should have an implicit or explicit ARIA role, so don't make every element focusable. When focus is needed, choose `tabindex="0"` to add the element to the tab order or `tabindex="-1"` to make it programmatically focusable only (e.g., a skip-link target).
+- **Manage Toggle States**: Utilize `aria-expanded` and `aria-pressed` to communicate toggle states for custom controls.
+
+#### DON'Ts
+- **Don't disable outlines without replacements**: Avoid `outline: none` without styling alternatives.
+- **Don't use Positive Tabindex values**: Never use `tabindex="1"` or greater.
+- **Don't hide interactive elements from screen readers**: Avoid `aria-hidden="true"` or `role="presentation"` on elements that can receive focus.
+
+### Code Examples
+
+```css
+/* Good: High contrast focus border */
+:where(a:any-link, button):focus-visible {
+  outline: 3px solid #ff0055;
+  outline-offset: 3px;
+}
+```
+
+```html
+<!-- Good: Skip to main content -->
+<a href="#content" class="skip-link">Skip to main content</a>
+<main id="content" tabindex="-1">...</main>
+```
+
+```javascript
+// Good: Keyboard handlers for complex custom widgets (e.g., Tree items, tabs).
+// NOTE: This pattern applies ONLY to non-standard UI where no native HTML tag exists.
+// Always prioritize native <button> or <input> elements for standard interactions.
+// Elements MUST have the appropriate ARIA role (e.g., role="treeitem" or role="tab").
+customWidget.addEventListener('keydown', (e) => {
+  if (e.key === 'Enter') {
+    toggleWidgetState();
+  }
+  if (e.key === ' ') {
+    e.preventDefault(); // Prevent page scrolling on Spacebar keydown
+  }
+});
+
+customWidget.addEventListener('keyup', (e) => {
+  if (e.key === ' ') {
+    toggleWidgetState();
+  }
+});
+
+function toggleWidgetState() {
+  // E.g., Manage toggle/expanded states for custom controls
+  const isExpanded = customWidget.getAttribute('aria-expanded') === 'true';
+  customWidget.setAttribute('aria-expanded', !isExpanded);
+}
+```
+
+## 6. Alternate Text and Media
+
+### Actionable Guidelines
+
+#### DOs
+- **Informative Visual Descriptions**: Describe the purpose of the image (e.g., "Search", not "Magnifying glass").
+- **Empty Alt properties for decorative visuals**: Use `alt=""` to remove decorative images from the accessibility tree so they aren't announced.
+- **Synchronous Captions for videos**: Supply WebVTT captions for video tracks.
+- **Transcripts for audio**: Provide text transcripts for purely audio podcasts.
+- **Informative View Descriptions for inline SVGs**: Apply `role="img"` and a nested `<title>` tag for informative visuals.
+- **Decorative SVGs removal**: Apply `aria-hidden="true"` to remove decorative SVGs from reading flows.
+- **Long descriptions for complex images**: Use `<figure>`/`<figcaption>` or `aria-describedby` for charts and infographics.
+- **Provide data tables as alternatives**: Consider providing semantic data tables as accessible alternatives for charts and other complex data visualizations.
+
+#### DON'Ts
+- **Don't use clichéd prefixes**: Avoid "Image of..." or "Picture of...".
+- **Don't use underscores in filenames**: Use dashes if the filename might be announced as fallback.
+
+### Code Examples
+
+```html
+<!-- Decorative -->
+<img src="divider.png" alt="">
+
+<!-- Inline Decorative SVG (remove from tab flow) -->
+<svg aria-hidden="true" viewBox="0 0 24 24">
+  <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
+</svg>
+
+<!-- Informative (Functional) -->
+<a href="/search">
+  <img src="glass.png" alt="Search the platform">
+</a>
+
+<!-- Video with Captions tracks -->
+<video controls>
+  <source src="intro.mp4" type="video/mp4">
+  <track src="caps.vtt" kind="captions" srclang="en" label="English">
+</video>
+
+<!-- Complex graph with figcaption -->
+<figure>
+  <img src="chart.png" alt="Sales growth graph 2024.">
+  <figcaption>Sales grew 20% in Q3 due to new platform launch.</figcaption>
+</figure>
+
+<!-- Audio with expandable transcript details -->
+<audio controls src="podcast.mp3" aria-details="podcast-transcript"></audio>
+<details id="podcast-transcript">
+  <summary>View Transcript</summary>
+  <div class="transcript-content">
+    Welcome to the show...
+  </div>
+</details>
+```
+
+### Content Visibility Decision Matrix
+
+| Intent | Visual | Screen Reader | Focusable | Structural Pattern |
+| :--- | :--- | :--- | :--- | :--- |
+| **Visible to all** | Yes | Yes | Yes | Standard rendering |
+| **Screen Reader only** | No | Yes | Yes (if interactive) | Visually hidden utility (e.g. `.visually-hidden`) |
+| **Visual only** | Yes | No | No | `aria-hidden="true"` / `role="presentation"` |
+| **Hidden for all** | No | No | No | `hidden` attribute / `display: none` |
+
+**Heuristic Rule**: If an element can receive keyboard focus, it must not be hidden via `aria-hidden="true"`.
+
+## 7. Forms and Input Controls
+
+### Actionable Guidelines
+
+#### DOs
+- **Connect Labels Programmatically**: Use `<label for="id">` linked to `<input id="id">`.
+- **Use Autocomplete**: Set valid standard `autocomplete` options (e.g., `"email"` or `"given-name"`) for user profiles.
+- **Link hints to inputs via `aria-describedby`**: Associate help text with inputs, and place the hint above the input so autocomplete popovers don't cover it during editing.
+- **Announce dynamic errors via live regions**: Use `aria-live` or shift focus to error lists.
+- **Provide form validation constraints**: Use `required` (or `aria-required="true"` only when `required` isn't applicable) to signal mandatory inputs.
+
+#### DON'Ts
+- **Don't use placeholders as labels**: Placeholders are not persistent labels.
+- **Don't trigger context shifts on focus changes**: Avoid auto-submitting forms or jumping pages on focus change events alone.
+
+### Code Examples
+
+```html
+<!-- Good: Semantic forms with hints for passwords -->
+<form>
+  <label for="pwd">Password:</label>
+  <span id="pwd-hint">Must contain at least 8 characters.</span>
+  <input id="pwd" type="password" aria-describedby="pwd-hint" autocomplete="current-password" required>
+</form>
+```
+
+## 8. Live Regions
+
+Live regions let assistive tech announce content updates that aren't tied to navigation or focus changes. They're easy to misuse — too many regions, or noisy ones, quickly become spam for screen-reader users.
+
+### Live Region Urgency Table
+
+| Urgency | Visual Analogue | `aria-live` Value | Behavioral Impact | Example |
+| :--- | :--- | :--- | :--- | :--- |
+| **Critical** | Modal / Alert | `assertive` (or `role="alert"`) | Interrupts immediately, clears speech queue | Session timeout, API failure |
+| **Standard**| Toast / Banner | `polite` | Announces at next graceful break | Search results, "Saved" status |
+| **Passive**  | Silent text | `off` | Only if user navigates to it | Live character count |
+
+**Heuristic Rule**: Use `assertive` only for critical, time-sensitive updates that require immediate attention or prevent safe continuation (e.g., data loss, session timeouts, or network drops).
+
+### Actionable Guidelines
+
+#### DOs
+- **Centralize live regions for non-visible announcements**: A single `polite` region and a single `assertive` region per page (with whatever `aria-atomic` configuration you need) keeps announcements consistent and easier to maintain. Many frameworks ship their own announcer abstraction — use it.
+- **Debounce frequently-changing regions**: If a region can update many times per second (e.g. a combobox's result count as the user types), debounce so users aren't spammed.
+- **Delay slightly when other announcements may collide**: When the user is typing or focus is being managed, a small delay before announcing keeps live-region updates from overlapping other speech.
+
+#### DON'Ts
+- **Don't use live regions for interstitial states** like "Loading…" or "Updating…" unless they're meaningfully informative — they usually just create noise.
+- **Don't add live-region updates to inert DOM**: When dialogs open or sections become `inert`, queued or debounced messages can end up unannounced — or announced from DOM the user can't reach. Coordinate live-region updates with dialog/inert state changes.
+
+### Code Example
+
+```html
+<!-- Session Timeout Warning with controls -->
+<div role="alert" class="timeout-warning">
+  Your session will expire in 2 minutes. 
+  <button type="button" onclick="extendSession()">Extend Session</button>
+</div>
+```
+
+## 9. Color, Contrast, and Typography
+
+### Actionable Guidelines
+
+#### DOs
+- **Minimum contrast standards**: Maintain 4.5:1 for normal text and 3:1 for large text or icons.
+- **Ensure non-text contrast standards**: Maintain a minimum contrast ratio of 3:1 for user interface component boundaries and states.
+  - This includes visual elements (borders, backgrounds, box-shadows, underlines) that form the boundary or indicate the presence of a UI component (e.g., input field borders).
+  - This also includes visual elements indicating active states within a component (e.g., checkbox checkmarks or switch thumbs).
+  - **Caveat**: Meeting 3:1 non-text contrast can challenge minimalistic designs. Soft gradients or subtle inset/outset shadows can soften visual boundaries while satisfying accessibility requirements.
+- **Use multiple state indicators**: Do not denote success/errors ONLY with color. Use icons or text.
+- **Relative font size units**: Use `rem` or `em` for font sizes instead of `px`.
+- **Consistent or Start alignment**: Avoid `justify` alignment as it can be more difficult to read.
+- **Avoid long lines of text**: Cap paragraph blocks to a maximum of 80 characters width.
+- **Support user zoom preferences**: Allow users to resize text up to 200% without loss of content or functionality.
+- **Support light and dark color schemes**: Honor `@media (prefers-color-scheme: dark)` and pair it with the `color-scheme` CSS property so form controls, scrollbars, and other UA-rendered surfaces match.
+- **Use `prefers-contrast` only when warranted**: Reach for `@media (prefers-contrast: more)` when the design uses low-contrast accents (e.g., subtle borders, muted secondary text) that need to be reinforced; most sites that already meet baseline contrast won't need it.
+
+#### DON'Ts
+- **Don't use color alone to indicate the presence of a user interface component or its state**: Use iconography and/or shape to help differentiate.
+- **Don't use Justified Text Alignment**: Avoid `text-align: justify`.
+- **Don't use Ornate fonts**: Omit cursive typefaces for main reading content.
+- **Don't rely on all-caps for emphasis**: Prefer bolding for visual emphasis, and use `<em>`/`<strong>` when the emphasis is semantic.
+- **Limit emphasis overall**: Emphasis loses meaning when it's everywhere — apply it only where it changes how the content should be read.
+
+### Code Examples
+
+```css
+/* Good: Relative sizing and line caps */
+body {
+  line-height: 1.5;
+  text-align: start; /* Supports LTR and RTL */
+}
+article {
+  max-width: 80ch; /* Caps line length to ~80 characters for readability */
+}
+```
+
+```html
+<!-- Good: Denotes state without colors alone -->
+<div class="error-msg">
+  <span aria-hidden="true">❌</span>
+  <span>The password entered was invalid.</span>
+</div>
+```
+
+```css
+/* Dark Mode support variables */
+:root {
+  --bg-color: #ffffff;
+  --text-color: #212529;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-color: #121212;
+    --text-color: #f8f9fa;
+  }
+}
+```
+
+## 10. Motions and Preferences
+
+### Actionable Guidelines
+
+#### DOs
+- **Support Reduced Motion media queries**: Support `@media (prefers-reduced-motion: reduce)` media queries.
+- **Provide Pause mechanism**: Allow users to stop auto-running carousels banners or other persistent animations.
+- **Default to static views**: Consider defaulting to static states and allowing users to opt-in to motion.
+
+#### DON'Ts
+- **Don't exceed flash limits (three per second)**: Never include rapid light-to-dark flashing. Such effects can cause seizures.
+
+### Code Examples
+
+```css
+/* Good: Dampen spin states for reduced motion queries */
+@media (prefers-reduced-motion: reduce) {
+  .spinner {
+    animation: none;
+    opacity: 0.5;
+  }
+}
+```
+
+## 11. Modals and Native Dialogs
+
+Modern browsers provide native solutions for creating modal dialogs which avoid the need for focus traps, managing the accessibility of outside content, ensuring the content is on top, and dimming the background content — all of which can be error prone and require heavy JavaScript event tracking to maintain.
+
+### Actionable Guidelines
+
+#### DOs
+- **Use the Native `<dialog>` Element**: Invoke the dialog using the `.showModal()` method to open it in a modal state. When in a modal state, the browser sets outside content as inert (i.e. the outside content is hidden from the accessibility tree and cannot be interacted with nor be focused).
+- **Use the `inert` Attribute for Custom Overlays**: When `<dialog>` cannot be used (e.g., some non-modal overlays, framework constraints, or layouts where `<dialog>`'s top-layer/positioning behavior conflicts with the design), apply `inert` to outside content to ensure it cannot be interacted with by keyboard, pointer, or assistive technology. This requires structuring elements in such a way that the custom overlay is not a descendant of the element with `inert` set on it.
+
+#### DON'Ts
+- **Don't implement focus traps for native modal dialogs**: When a `<dialog>` element is opened in a modal state, browsers set outside content as inert which is sufficient for ensuring only the dialog’s content can be focused.
+
+### Code Examples
+
+**HTML & JS: Native `<dialog>` with standard close events**
+```html
+<!-- Dialog opens natively with showModal() and locks focus -->
+<button id="open-btn">Open Dialog</button>
+
+<dialog id="accessible-modal" aria-labelledby="title-id">
+  <h2 id="title-id">Account Settings</h2>
+  <p>Update your details here.</p>
+  <button onclick="this.closest('dialog').close()">Close Dialog</button>
+</dialog>
+
+<script>
+  document.getElementById('open-btn').addEventListener('click', () => {
+    document.getElementById('accessible-modal').showModal();
+  });
+</script>
+```
+
+## 12. Testing Validations
+
+### Actionable Guidelines
+
+#### DOs
+- **Run Automated checks via axe-core or Lighthouse audits**: Catch missing alt texts or low contrasts (e.g., via Lighthouse in Chrome DevTools MCP).
+- **Validate Sequential Navigations using keyboards alone**: Using only keyboard shortcuts, such as Tab/Shift+Tab, arrow keys, Enter, Space, and Esc, confirm every interactive element is reachable and operable, and that focus never gets stuck.
+- **Test on Screen Readers with calibrated browsers**: Rely on standard bindings (e.g., JAWS with Chrome, NVDA with Firefox, Narrator with Edge, VoiceOver with Safari on macOS and iOS, TalkBack with Chrome for Android).
+
+#### DON'Ts
+- **Don't rely purely on scores**: A 100% score does not guarantee real usability.
+
diff --git a/package-lock.json b/package-lock.json
index 42cfb66..080cfa4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@tanstack/react-query": "5.80.7",
         "@types/canvas-confetti": "1.6.4",
         "canvas-confetti": "1.9.3",
+        "html2canvas": "^1.4.1",
         "next": "14.2.3",
         "qrcode.react": "4.2.0",
         "react": "^18.3.0",
@@ -2707,6 +2708,15 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -3112,6 +3122,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/css-tree": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
@@ -4601,6 +4620,7 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -4974,6 +4994,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/https-proxy-agent": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
@@ -8325,6 +8358,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -8815,6 +8857,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/victory-vendor": {
       "version": "36.9.2",
       "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
diff --git a/package.json b/package.json
index 4b92642..e4800c4 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@tanstack/react-query": "5.80.7",
     "@types/canvas-confetti": "1.6.4",
     "canvas-confetti": "1.9.3",
+    "html2canvas": "^1.4.1",
     "next": "14.2.3",
     "qrcode.react": "4.2.0",
     "react": "^18.3.0",
diff --git a/src/__tests__/InvoiceCard.test.tsx b/src/__tests__/InvoiceCard.test.tsx
index c635956..a4cf550 100644
--- a/src/__tests__/InvoiceCard.test.tsx
+++ b/src/__tests__/InvoiceCard.test.tsx
@@ -1,14 +1,23 @@
 import { render, screen } from '@testing-library/react';
 import InvoiceCard from '@/components/InvoiceCard';
 import type { Invoice } from '@stellar-split/sdk';
+import { vi } from 'vitest';
 
-jest.mock('@stellar-split/sdk', () => ({
-  formatAmount: (n: bigint) => `${n}`,
-  truncateAddress: (s: string) => `${s.slice(0, 4)}...${s.slice(-4)}`,
-}));
+vi.mock('@stellar-split/sdk', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@stellar-split/sdk')>();
+  return {
+    ...actual,
+    formatAmount: (n: bigint) => `${n}`,
+    truncateAddress: (s: string) => `${s.slice(0, 4)}...${s.slice(-4)}`,
+  };
+});
 
-jest.mock('@/components/PaymentProgress', () => () => <div data-testid="payment-progress" />);
-jest.mock('@/components/CountdownTimer', () => () => <div data-testid="countdown-timer" />);
+vi.mock('@/components/FundingProgress', () => ({
+  default: () => <div data-testid="payment-progress" />
+}));
+vi.mock('@/components/DeadlineCountdown', () => ({
+  default: () => <div data-testid="countdown-timer" />
+}));
 
 const invoice: Invoice = {
   id: '42',
diff --git a/src/__tests__/InvoiceShareQRModal.test.tsx b/src/__tests__/InvoiceShareQRModal.test.tsx
new file mode 100644
index 0000000..85ac825
--- /dev/null
+++ b/src/__tests__/InvoiceShareQRModal.test.tsx
@@ -0,0 +1,60 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import InvoiceShareQRModal from '@/components/InvoiceShareQRModal';
+import { vi } from 'vitest';
+
+const mockToast = {
+  success: vi.fn(),
+  error: vi.fn(),
+  info: vi.fn(),
+  loading: vi.fn(),
+  update: vi.fn(),
+  dismiss: vi.fn(),
+};
+
+vi.mock('@/contexts/ToastContext', () => ({
+  useToast: () => mockToast,
+}));
+
+// Mock qrcode.react
+vi.mock('qrcode.react', () => ({
+  QRCodeCanvas: () => <div data-testid="mock-qr-canvas">QR Canvas</div>,
+}));
+
+describe('InvoiceShareQRModal', () => {
+  const onClose = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders when open is true', () => {
+    render(<InvoiceShareQRModal open={true} invoiceId="42" onClose={onClose} />);
+    expect(screen.getByText('Share via QR Code')).toBeInTheDocument();
+  });
+
+  it('does not render when open is false', () => {
+    render(<InvoiceShareQRModal open={false} invoiceId="42" onClose={onClose} />);
+    expect(screen.queryByText('Share via QR Code')).not.toBeInTheDocument();
+  });
+
+  it('calls onClose when close button or dismiss is clicked', () => {
+    render(<InvoiceShareQRModal open={true} invoiceId="42" onClose={onClose} />);
+    fireEvent.click(screen.getByLabelText('Close share QR modal'));
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('copies link when copy link button is clicked', async () => {
+    const writeTextSpy = vi.fn().mockResolvedValue(undefined);
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: writeTextSpy,
+      },
+    });
+
+    render(<InvoiceShareQRModal open={true} invoiceId="42" onClose={onClose} />);
+    fireEvent.click(screen.getByText('Copy Link'));
+    
+    // Check it calls navigator.clipboard.writeText with the preview URL
+    expect(writeTextSpy).toHaveBeenCalledWith(expect.stringContaining('/invoice/42/preview'));
+  });
+});
diff --git a/src/__tests__/batchDuplicateDetection.test.ts b/src/__tests__/batchDuplicateDetection.test.ts
index 421beb4..3b0083a 100644
--- a/src/__tests__/batchDuplicateDetection.test.ts
+++ b/src/__tests__/batchDuplicateDetection.test.ts
@@ -1,4 +1,4 @@
-import { findBatchDuplicates } from "@/app/invoice/batch/page";
+import { findBatchDuplicates } from "@/lib/batchDuplicates";
 
 describe("findBatchDuplicates", () => {
   test("detects exact-duplicate rows (same recipient, amount)", () => {
diff --git a/src/app/history/page.tsx b/src/app/history/page.tsx
index 3fc0e0b..30d8756 100644
--- a/src/app/history/page.tsx
+++ b/src/app/history/page.tsx
@@ -6,6 +6,7 @@ import { splitClient } from "@/lib/stellar";
 import { getFreighterPublicKey } from "@/lib/freighter";
 import { formatAmount } from "@stellar-split/sdk";
 import InvoiceCard from "@/components/InvoiceCard";
+import InvoiceShareQRModal from "@/components/InvoiceShareQRModal";
 import { SkeletonCard } from "@/components/Skeleton";
 import type { Invoice } from "@stellar-split/sdk";
 import { loadReceipt } from "@/lib/receiptStore";
@@ -30,6 +31,7 @@ export default function HistoryPage() {
 
   // Pagination
   const [currentPage, setCurrentPage] = useState(1);
+  const [shareQRInvoiceId, setShareQRInvoiceId] = useState<string | null>(null);
 
   useEffect(() => {
     getFreighterPublicKey()
@@ -214,12 +216,17 @@ export default function HistoryPage() {
 
               return (
                 <li key={inv.id} className="flex flex-col gap-2">
-                  <Link
-                    href={`/invoice/${inv.id}`}
-                    aria-label={`View Invoice #${inv.id}`}
-                  >
-                    <InvoiceCard invoice={inv} />
-                  </Link>
+                  <div className="relative group">
+                    <Link
+                      href={`/invoice/${inv.id}`}
+                      aria-label={`View Invoice #${inv.id}`}
+                      className="absolute inset-0 rounded-xl z-0"
+                    />
+                    <InvoiceCard
+                      invoice={inv}
+                      onShareQR={() => setShareQRInvoiceId(inv.id)}
+                    />
+                  </div>
                   {storedReceipt && (
                     <Suspense fallback={null}>
                       <ReceiptPDF
@@ -267,6 +274,12 @@ export default function HistoryPage() {
           )}
         </>
       )}
+
+      <InvoiceShareQRModal
+        open={!!shareQRInvoiceId}
+        invoiceId={shareQRInvoiceId || ""}
+        onClose={() => setShareQRInvoiceId(null)}
+      />
     </main>
   );
 }
diff --git a/src/app/invoice/[id]/opengraph-image.tsx b/src/app/invoice/[id]/opengraph-image.tsx
index b751168..fb3b038 100644
--- a/src/app/invoice/[id]/opengraph-image.tsx
+++ b/src/app/invoice/[id]/opengraph-image.tsx
@@ -5,7 +5,7 @@ export async function generateImageMetadata({
   params,
 }: {
   params: { id: string };
-}): Promise<MetadataRoute.Metadata> {
+}): Promise<any> {
   try {
     const invoice = await splitClient.getInvoice(params.id);
     const total = invoice.recipients.reduce((s, r) => s + r.amount, 0n);
diff --git a/src/app/invoice/[id]/page.tsx b/src/app/invoice/[id]/page.tsx
index e72bef9..edcb0d5 100644
--- a/src/app/invoice/[id]/page.tsx
+++ b/src/app/invoice/[id]/page.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/navigation";
 import dynamic from "next/dynamic";
 import { splitClient, payWithNonce } from "@/lib/stellar";
 import { getFreighterPublicKey } from "@/lib/freighter";
-import { formatAmount, parseAmount, truncateAddress } from "@stellar-split/sdk";
+import { formatAmount, parseAmount, truncateAddress, type Invoice } from "@stellar-split/sdk";
 import { useInvoiceCustomization } from "@/lib/customization";
 import type { Locale } from "@/lib/i18n";
 import PaymentSuggestions from "@/components/PaymentSuggestions";
@@ -21,6 +21,7 @@ import CancelModal from "@/components/CancelModal";
 import DuplicateModal from "@/components/DuplicateModal";
 import TransferOwnershipModal from "@/components/TransferOwnershipModal";
 import ShareModal from "@/components/ShareModal";
+import InvoiceShareQRModal from "@/components/InvoiceShareQRModal";
 import VotingPanel from "@/components/VotingPanel";
 import DeadlineExtensionPanel from "@/components/DeadlineExtensionPanel";
 import SuccessAnimation from "@/components/SuccessAnimation";
@@ -37,6 +38,15 @@ import DisputeTimeline from "@/components/DisputeTimeline";
 import AuditLogTable from "@/components/AuditLogTable";
 import VersionHistory from "@/components/VersionHistory";
 import CommentSection from "@/components/CommentSection";
+import {
+  isSubscribedToInvoice,
+  subscribeToInvoice,
+  requestNotificationPermission,
+} from "@/lib/notifications";
+import { cancelReminder, setReminder } from "@/lib/reminders";
+import { recordCooldown } from "@/lib/cooldown";
+import { exportTimelineAsImage } from "@/lib/timelineImageExport";
+import type { PaymentChannelState } from "@/components/PaymentChannelPanel";
 
 const RecipientPieChart = dynamic(() => import("@/components/RecipientPieChart"), { ssr: false });
 const InvoiceQR = dynamic(() => import("@/components/InvoiceQR"), { ssr: false });
@@ -71,6 +81,7 @@ export default function InvoiceDetailPage({ params }: Props) {
   const [disputeError, setDisputeError] = useState<string | null>(null);
   const [showCancelModal, setShowCancelModal] = useState(false);
   const [showShareModal, setShowShareModal] = useState(false);
+  const [showShareQRModal, setShowShareQRModal] = useState(false);
   const [showPayModal, setShowPayModal] = useState(false);
   const [showDuplicateModal, setShowDuplicateModal] = useState(false);
   const [paymentError, setPaymentError] = useState<string | null>(null);
@@ -79,10 +90,26 @@ export default function InvoiceDetailPage({ params }: Props) {
   const prevPayAmountRef = useRef("");
   const [cooldownExpiresAt, setCooldownExpiresAt] = useState<number | null>(null);
   const [activeDetailsTab, setActiveDetailsTab] = useState<"audit" | "history" | "notes">("audit");
+  const [payerNonce, setPayerNonce] = useState<bigint | null>(null);
 
   const prevStatusRef = useRef<string | null>(null);
   const timelineRef = useRef<HTMLDivElement>(null);
   const [exportingTimeline, setExportingTimeline] = useState(false);
+  const [notifySubscribed, setNotifySubscribed] = useState(false);
+  const [notifyDenied, setNotifyDenied] = useState(false);
+  const [lastFailedPayment, setLastFailedPayment] = useState<{ amount: bigint } | null>(null);
+  const [retryCount, setRetryCount] = useState(0);
+  const [channelState, setChannelState] = useState<PaymentChannelState | null>(null);
+  const [channelLoading, setChannelLoading] = useState(false);
+  const [channelError, setChannelError] = useState<string | null>(null);
+  const [previousInvoice, setPreviousInvoice] = useState<Invoice | null>(null);
+  const [reminderDate, setReminderDate] = useState("");
+  const [reminderMsg, setReminderMsg] = useState("");
+  const [hasReminder, setHasReminder] = useState(false);
+  const [reminderSaved, setReminderSaved] = useState(false);
+  const [showTransferModal, setShowTransferModal] = useState(false);
+  const [transferError, setTransferError] = useState<string | null>(null);
+  const [locale, setLocale] = useState<Locale>("en");
 
   useEffect(() => {
     setNotifySubscribed(isSubscribedToInvoice(id));
@@ -121,7 +148,70 @@ export default function InvoiceDetailPage({ params }: Props) {
       getPayerNonce(publicKey).then((n) => setPayerNonce(n)).catch(() => null)
     ).catch(() => null);
   }, [publicKey]);
+  const channelStorageKey = (invoiceId: string, payer: string) => `stellarsplit_channel_${invoiceId}_${payer}`;
+
+  const persistChannelState = (state: PaymentChannelState | null) => {
+    if (typeof window === "undefined" || !publicKey) return;
+    const key = channelStorageKey(id, publicKey);
+    if (!state) {
+      localStorage.removeItem(key);
+    } else {
+      localStorage.setItem(
+        key,
+        JSON.stringify({
+          invoiceId: state.invoiceId,
+          payer: state.payer,
+          balance: state.balance.toString(),
+          opened: state.opened,
+        })
+      );
+    }
+  };
+
+  const loadChannelState = () => {
+    if (typeof window === "undefined" || !publicKey) return null;
+    const key = channelStorageKey(id, publicKey);
+    const raw = localStorage.getItem(key);
+    if (!raw) return null;
+    try {
+      const parsed = JSON.parse(raw);
+      if (parsed.invoiceId !== id || parsed.payer !== publicKey) return null;
+      return {
+        invoiceId: parsed.invoiceId,
+        payer: parsed.payer,
+        balance: BigInt(parsed.balance),
+        opened: parsed.opened,
+      };
+    } catch {
+      return null;
+    }
+  };
+
+  const syncChannelState = (state: PaymentChannelState | null) => {
+    setChannelState(state);
+    persistChannelState(state);
+  };
 
+  useEffect(() => {
+    if (!publicKey) return;
+    const stored = loadChannelState();
+    if (stored) {
+      setChannelState(stored);
+    }
+  }, [id, publicKey]);
+
+  const applyChannelBalance = (amount: bigint) => {
+    if (!channelState?.opened || channelState.balance <= 0n) return null;
+    const used = amount <= channelState.balance ? amount : channelState.balance;
+    const remainingBalance = channelState.balance - used;
+    const nextState: PaymentChannelState = {
+      ...channelState,
+      balance: remainingBalance > 0n ? remainingBalance : 0n,
+      opened: remainingBalance > 0n,
+    };
+    syncChannelState(nextState.opened ? nextState : null);
+    return channelState;
+  };
   useEffect(() => {
     if (!invoice || invoice.status === "Released" || invoice.status === "Refunded") return;
     const pollId = setInterval(() => {
@@ -138,6 +228,9 @@ export default function InvoiceDetailPage({ params }: Props) {
     e.preventDefault();
     if (!publicKey || !invoice) return;
     const amount = parseAmount(payAmount);
+    const clientKey = `opt-${Date.now()}`;
+    const originalChannel = channelState;
+    const channelUsed = applyChannelBalance(amount);
     setPaymentError(null);
     setPaying(true);
     try {
@@ -167,12 +260,12 @@ export default function InvoiceDetailPage({ params }: Props) {
       }
       setInvoice((prev) => {
         if (!prev) return prev;
-        const pending = prev.payments.find((p) => p.clientKey === clientKey);
-        if (!pending?.pending) return prev;
+        const pending = prev.payments.find((p) => (p as any).clientKey === clientKey);
+        if (!pending || !(pending as any).pending) return prev;
         return {
           ...prev,
           funded: prev.funded - pending.amount,
-          payments: prev.payments.filter((p) => p.clientKey !== clientKey),
+          payments: prev.payments.filter((p) => (p as any).clientKey !== clientKey),
         };
       });
       setError(String(err));
@@ -316,6 +409,9 @@ export default function InvoiceDetailPage({ params }: Props) {
 
   if (!invoice) return null;
 
+  const remaining = total - invoice.funded;
+  const status = statusConfig[invoice.status] || { label: invoice.status, color: "bg-gray-500", icon: "⌛" };
+
   return (
     <main className="max-w-2xl mx-auto px-4 sm:px-6 py-16">
       {/* Header */}
@@ -348,6 +444,14 @@ export default function InvoiceDetailPage({ params }: Props) {
           >
             Share
           </button>
+          <button
+            type="button"
+            onClick={() => setShowShareQRModal(true)}
+            className="px-3 py-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-sm font-semibold text-white transition-colors"
+            aria-label="Share invoice via QR"
+          >
+            Share via QR
+          </button>
           <select
             value={locale}
             onChange={(e) => setLocale(e.target.value as Locale)}
@@ -462,7 +566,7 @@ export default function InvoiceDetailPage({ params }: Props) {
       <ActivityFeed
         invoice={{
           ...invoice,
-          payments: invoice.payments.filter((p) => !p.pending),
+          payments: invoice.payments.filter((p) => !(p as any).pending),
         }}
         previousInvoice={previousInvoice}
       />
@@ -689,6 +793,12 @@ export default function InvoiceDetailPage({ params }: Props) {
         url={`${typeof window !== "undefined" ? window.location.origin : ""}/invoice/${id}`}
         onClose={() => setShowShareModal(false)}
       />
+
+      <InvoiceShareQRModal
+        open={showShareQRModal}
+        invoiceId={id}
+        onClose={() => setShowShareQRModal(false)}
+      />
     </main>
   );
 }
diff --git a/src/app/invoice/batch/page.tsx b/src/app/invoice/batch/page.tsx
index a3e8bfc..4e39723 100644
--- a/src/app/invoice/batch/page.tsx
+++ b/src/app/invoice/batch/page.tsx
@@ -7,45 +7,11 @@ import { deadlineFromDays, parseAmount } from "@stellar-split/sdk";
 import RecipientForm from "@/components/RecipientForm";
 import { recordInvoiceHistory } from "@/lib/invoiceHistory";
 
-interface RecipientRow {
-  address: string;
-  amount: string;
-}
-
-interface InvoiceRow {
-  recipients: RecipientRow[];
-  deadlineDays: number;
-}
-
-export interface DuplicateGroup {
-  recipient: string;
-  amount: string;
-  rowNumbers: number[];
-}
-
-export function findBatchDuplicates(rows: InvoiceRow[]): DuplicateGroup[] {
-  const seen = new Map<string, number[]>();
-  rows.forEach((row, rowIdx) => {
-    row.recipients.forEach((r) => {
-      if (!r.address.trim() || !r.amount.trim()) return;
-      const key = `${r.address.trim().toLowerCase()}|${r.amount.trim()}`;
-      const existing = seen.get(key);
-      if (existing) {
-        existing.push(rowIdx + 1);
-      } else {
-        seen.set(key, [rowIdx + 1]);
-      }
-    });
-  });
-  const duplicates: DuplicateGroup[] = [];
-  for (const [key, rowNumbers] of seen) {
-    if (rowNumbers.length > 1) {
-      const [recipient, amount] = key.split("|");
-      duplicates.push({ recipient, amount, rowNumbers });
-    }
-  }
-  return duplicates;
-}
+import {
+  findBatchDuplicates,
+  type DuplicateGroup,
+  type InvoiceRow,
+} from "@/lib/batchDuplicates";
 
 const MAX_ROWS = 5;
 
diff --git a/src/components/DashboardClient.tsx b/src/components/DashboardClient.tsx
index deb0626..7d4e09a 100644
--- a/src/components/DashboardClient.tsx
+++ b/src/components/DashboardClient.tsx
@@ -6,7 +6,8 @@ import { splitClient } from "@/lib/stellar";
 import { getFreighterPublicKey } from "@/lib/freighter";
 import InvoiceSearch from "@/components/InvoiceSearch";
 import InvoiceCard from "@/components/InvoiceCard";
-import { InvoiceListSkeleton } from "@/components/Skeleton";
+import InvoiceShareQRModal from "@/components/InvoiceShareQRModal";
+import { InvoiceListSkeleton, SkeletonCard } from "@/components/Skeleton";
 import BatchPayModal from "@/components/BatchPayModal";
 import { setBulkReminders, type BulkReminderResult } from "@/lib/reminders";
 import { getOrAssignDisplayNumber } from "@/lib/invoiceNumbering";
@@ -36,6 +37,7 @@ export default function DashboardClient() {
   const [reminderDateTime, setReminderDateTime] = useState("");
   const [bulkReminderResults, setBulkReminderResults] = useState<BulkReminderResult[] | null>(null);
   const [activePreset, setActivePreset] = useState<DashboardPresetId>("all");
+  const [shareQRInvoiceId, setShareQRInvoiceId] = useState<string | null>(null);
 
   // Get wallet public key
   useEffect(() => {
@@ -480,16 +482,18 @@ export default function DashboardClient() {
                     </div>
                   </button>
                 ) : (
-                  <Link
-                    href={`/invoice/${inv.id}`}
-                    aria-label={`View Invoice #${inv.id}`}
-                    className="block"
-                  >
+                  <div className="relative group">
+                    <Link
+                      href={`/invoice/${inv.id}`}
+                      aria-label={`View Invoice #${inv.id}`}
+                      className="absolute inset-0 rounded-xl z-0"
+                    />
                     <InvoiceCard
                       invoice={inv}
                       displayNumber={getOrAssignDisplayNumber(inv.id)}
+                      onShareQR={() => setShareQRInvoiceId(inv.id)}
                     />
-                  </Link>
+                  </div>
                 )}
               </div>
             );
@@ -561,6 +565,12 @@ export default function DashboardClient() {
           </div>
         </div>
       )}
+
+      <InvoiceShareQRModal
+        open={!!shareQRInvoiceId}
+        invoiceId={shareQRInvoiceId || ""}
+        onClose={() => setShareQRInvoiceId(null)}
+      />
     </>
   );
 }
diff --git a/src/components/FundingProgress.tsx b/src/components/FundingProgress.tsx
index 55499b5..5c4f946 100644
--- a/src/components/FundingProgress.tsx
+++ b/src/components/FundingProgress.tsx
@@ -6,7 +6,7 @@ import { formatAmount } from "@stellar-split/sdk";
 interface Props {
   funded: bigint;
   total: bigint;
-  token: string;
+  token?: string;
   /** compact hides the text label */
   compact?: boolean;
 }
@@ -22,7 +22,7 @@ function getBarColor(pct: number): string {
  * FundingProgress — animated horizontal bar with colour transitions.
  * Animates from 0 → actual value on first render (600 ms).
  */
-export default function FundingProgress({ funded, total, token, compact = false }: Props) {
+export default function FundingProgress({ funded, total, token = "USDC", compact = false }: Props) {
   const rawPct = total === 0n ? 0 : Number((funded * 100n) / total);
   const clamped = Math.min(100, Math.max(0, rawPct));
 
diff --git a/src/components/InvoiceCard.tsx b/src/components/InvoiceCard.tsx
index fb56fae..8dfd04a 100644
--- a/src/components/InvoiceCard.tsx
+++ b/src/components/InvoiceCard.tsx
@@ -7,12 +7,13 @@ import DeadlineCountdown from "./DeadlineCountdown";
 interface Props {
   invoice: Invoice;
   displayNumber?: string;
+  onShareQR?: () => void;
 }
 
 /**
  * InvoiceCard — summary card showing recipients, total, funded %, and status.
  */
-export default function InvoiceCard({ invoice, displayNumber }: Props) {
+export default function InvoiceCard({ invoice, displayNumber, onShareQR }: Props) {
   const total = invoice.recipients.reduce((s, r) => s + r.amount, 0n);
   const deadlineLabel = new Date(invoice.deadline * 1000).toLocaleDateString();
 
@@ -27,7 +28,26 @@ export default function InvoiceCard({ invoice, displayNumber }: Props) {
             </span>
           )}
         </span>
-        <StatusBadge status={invoice.status as any} size="sm" />
+        <div className="flex items-center gap-2 relative z-20 pointer-events-auto">
+          {onShareQR && (
+            <button
+              type="button"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onShareQR();
+              }}
+              className="p-1 rounded-md bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-750 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors border border-gray-300 dark:border-gray-700"
+              aria-label={`Share Invoice #${invoice.id} via QR code`}
+              title="Share via QR Code"
+            >
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zM17 5h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1V6a1 1 0 011-1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z" />
+              </svg>
+            </button>
+          )}
+          <StatusBadge status={invoice.status as any} size="sm" />
+        </div>
       </div>
 
       <p className="text-xs text-gray-500 mb-3">Due {deadlineLabel}</p>
diff --git a/src/components/InvoiceSearch.tsx b/src/components/InvoiceSearch.tsx
index 3150c51..c6da06e 100644
--- a/src/components/InvoiceSearch.tsx
+++ b/src/components/InvoiceSearch.tsx
@@ -4,6 +4,7 @@ import { useEffect, useMemo, useState } from "react";
 import type { Invoice } from "@stellar-split/sdk";
 import Link from "next/link";
 import InvoiceCard from "@/components/InvoiceCard";
+import InvoiceShareQRModal from "@/components/InvoiceShareQRModal";
 
 function isNumericId(value: string) {
   return /^\d+$/.test(value.trim());
@@ -68,6 +69,7 @@ export default function InvoiceSearch({
   const debounced = useDebounce(searchValue, 300);
 
   const [addressResults, setAddressResults] = useState<Invoice[]>([]);
+  const [shareQRInvoiceId, setShareQRInvoiceId] = useState<string | null>(null);
 
   const matchedQuery = useMemo(() => debounced.trim(), [debounced]);
 
@@ -138,11 +140,13 @@ export default function InvoiceSearch({
         <ul className="flex flex-col gap-4 mt-4" aria-label="Search results">
           {results.map((inv) => (
             <li key={inv.id}>
-              <Link
-                href={`/invoice/${inv.id}`}
-                aria-label={`View Invoice #${inv.id}`}
-              >
-                <div className="rounded-xl overflow-hidden">
+              <div className="relative group rounded-xl overflow-hidden">
+                <Link
+                  href={`/invoice/${inv.id}`}
+                  aria-label={`View Invoice #${inv.id}`}
+                  className="absolute inset-0 rounded-xl z-10"
+                />
+                <div className="rounded-xl overflow-hidden relative z-0">
                   <div className="p-0.5 bg-gradient-to-r from-indigo-500/30 via-yellow-400/20 to-indigo-500/30">
                     <div className="bg-gray-900 rounded-xl">
                       <div className="px-5 pt-4 pb-2">
@@ -172,16 +176,25 @@ export default function InvoiceSearch({
 
                       <div className="px-5 pb-5">
                         {/* Reuse the existing card visuals, but recipients area is already shown. */}
-                        <InvoiceCard invoice={inv} />
+                        <InvoiceCard
+                          invoice={inv}
+                          onShareQR={() => setShareQRInvoiceId(inv.id)}
+                        />
                       </div>
                     </div>
                   </div>
                 </div>
-              </Link>
+              </div>
             </li>
           ))}
         </ul>
       ) : null}
+
+      <InvoiceShareQRModal
+        open={!!shareQRInvoiceId}
+        invoiceId={shareQRInvoiceId || ""}
+        onClose={() => setShareQRInvoiceId(null)}
+      />
     </section>
   );
 }
diff --git a/src/components/InvoiceShareQRModal.tsx b/src/components/InvoiceShareQRModal.tsx
new file mode 100644
index 0000000..e9950ce
--- /dev/null
+++ b/src/components/InvoiceShareQRModal.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import { useRef } from "react";
+import dynamic from "next/dynamic";
+import FocusTrap from "./FocusTrap";
+import { useToast } from "@/contexts/ToastContext";
+
+// Lazy load QRCodeCanvas to satisfy client-side lazy-loading criteria
+const QRCodeCanvas = dynamic(
+  () => import("qrcode.react").then((m) => m.QRCodeCanvas),
+  { ssr: false }
+);
+
+interface Props {
+  open: boolean;
+  invoiceId: string;
+  onClose: () => void;
+}
+
+export default function InvoiceShareQRModal({ open, invoiceId, onClose }: Props) {
+  const toast = useToast();
+  const canvasRef = useRef<HTMLDivElement>(null);
+
+  if (!open) return null;
+
+  const origin = typeof window !== "undefined" ? window.location.origin : "";
+  const previewUrl = `${origin}/invoice/${invoiceId}/preview`;
+
+  const handleDownload = () => {
+    const canvas = canvasRef.current?.querySelector("canvas");
+    if (!canvas) {
+      toast.error("QR code not ready for download.");
+      return;
+    }
+
+    try {
+      const url = canvas.toDataURL("image/png");
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = `invoice-${invoiceId}-qr.png`;
+      link.click();
+      toast.success("QR code downloaded successfully!");
+    } catch (e) {
+      console.error(e);
+      toast.error("Failed to download QR code.");
+    }
+  };
+
+  const handleCopyLink = async () => {
+    try {
+      await navigator.clipboard.writeText(previewUrl);
+      toast.success("Public invoice preview link copied!");
+    } catch (e) {
+      console.error(e);
+      try {
+        window.prompt("Copy link:", previewUrl);
+        toast.success("Link shown in prompt!");
+      } catch {
+        toast.error("Failed to copy link.");
+      }
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-end sm:items-center justify-center bg-black/60 p-4"
+      onClick={onClose}
+    >
+      <FocusTrap onClose={onClose}>
+        <div
+          role="dialog"
+          aria-modal="true"
+          className="w-full sm:w-[420px] bg-gray-900 rounded-2xl shadow-xl border border-gray-800 overflow-hidden"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {/* Header */}
+          <div className="flex items-center justify-between px-4 py-3 border-b border-gray-800">
+            <h2 className="text-sm font-semibold text-gray-200">
+              Share via QR Code
+            </h2>
+            <button
+              onClick={onClose}
+              className="p-2 rounded-lg hover:bg-gray-800 text-gray-300 transition-colors"
+              aria-label="Close share QR modal"
+            >
+              ✕
+            </button>
+          </div>
+
+          {/* QR Code Body */}
+          <div className="px-4 py-6 flex flex-col items-center gap-6">
+            <div
+              ref={canvasRef}
+              className="bg-white p-3 rounded-xl shadow-inner flex items-center justify-center"
+              style={{ width: "264px", height: "264px" }}
+            >
+              <QRCodeCanvas
+                value={previewUrl}
+                size={240}
+                level="Q" // High level allows for logo excavation
+                includeMargin={false}
+                imageSettings={{
+                  src: "/icons/icon-192.png",
+                  height: 40,
+                  width: 40,
+                  excavate: true,
+                }}
+              />
+            </div>
+
+            <div className="w-full flex flex-col gap-3">
+              <button
+                type="button"
+                onClick={handleDownload}
+                className="w-full px-4 py-3 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-sm font-semibold text-white transition-colors shadow-lg shadow-indigo-600/10"
+              >
+                Download QR
+              </button>
+
+              <button
+                type="button"
+                onClick={handleCopyLink}
+                className="w-full px-4 py-3 rounded-lg bg-gray-800 hover:bg-gray-700 text-sm font-semibold text-gray-200 transition-colors border border-gray-700"
+              >
+                Copy Link
+              </button>
+            </div>
+          </div>
+
+          {/* Footer */}
+          <div className="px-4 py-3 border-t border-gray-800 bg-gray-950/20">
+            <button
+              onClick={onClose}
+              className="w-full px-4 py-2.5 rounded-lg bg-transparent hover:bg-gray-800 border border-gray-850 text-sm font-semibold text-gray-400 hover:text-gray-200 transition-colors"
+            >
+              Dismiss
+            </button>
+          </div>
+        </div>
+      </FocusTrap>
+    </div>
+  );
+}
diff --git a/src/components/PaymentChannelPanel.tsx b/src/components/PaymentChannelPanel.tsx
index 4ee13ff..a010f1c 100644
--- a/src/components/PaymentChannelPanel.tsx
+++ b/src/components/PaymentChannelPanel.tsx
@@ -2,7 +2,7 @@
 
 import { formatAmount } from "@stellar-split/sdk";
 
-interface PaymentChannelState {
+export interface PaymentChannelState {
   invoiceId: string;
   payer: string;
   balance: bigint;
diff --git a/src/components/RecipientPayoutTracker.tsx b/src/components/RecipientPayoutTracker.tsx
index 7b98bd1..4607c72 100644
--- a/src/components/RecipientPayoutTracker.tsx
+++ b/src/components/RecipientPayoutTracker.tsx
@@ -20,7 +20,8 @@ export default function RecipientPayoutTracker({ invoice, publicKey }: Props) {
   const [claimError, setClaimError] = useState<string | null>(null);
   const [claimTx, setClaimTx] = useState<string | null>(null);
 
-  const { recipients, total } = invoice;
+  const { recipients } = invoice;
+  const total = recipients.reduce((s, r) => s + r.amount, 0n);
 
   const getStatus = (recipient: Recipient): PayoutStatus => {
     if (invoice.status === "Refunded") return "Refunded";
diff --git a/src/lib/batchDuplicates.ts b/src/lib/batchDuplicates.ts
new file mode 100644
index 0000000..491d7f3
--- /dev/null
+++ b/src/lib/batchDuplicates.ts
@@ -0,0 +1,39 @@
+export interface RecipientRow {
+  address: string;
+  amount: string;
+}
+
+export interface InvoiceRow {
+  recipients: RecipientRow[];
+  deadlineDays: number;
+}
+
+export interface DuplicateGroup {
+  recipient: string;
+  amount: string;
+  rowNumbers: number[];
+}
+
+export function findBatchDuplicates(rows: InvoiceRow[]): DuplicateGroup[] {
+  const seen = new Map<string, number[]>();
+  rows.forEach((row, rowIdx) => {
+    row.recipients.forEach((r) => {
+      if (!r.address.trim() || !r.amount.trim()) return;
+      const key = `${r.address.trim().toLowerCase()}|${r.amount.trim()}`;
+      const existing = seen.get(key);
+      if (existing) {
+        existing.push(rowIdx + 1);
+      } else {
+        seen.set(key, [rowIdx + 1]);
+      }
+    });
+  });
+  const duplicates: DuplicateGroup[] = [];
+  for (const [key, rowNumbers] of seen) {
+    if (rowNumbers.length > 1) {
+      const [recipient, amount] = key.split("|");
+      duplicates.push({ recipient, amount, rowNumbers });
+    }
+  }
+  return duplicates;
+}
diff --git a/src/lib/freighter.ts b/src/lib/freighter.ts
index 4f1e93a..f9a2938 100644
--- a/src/lib/freighter.ts
+++ b/src/lib/freighter.ts
@@ -21,7 +21,7 @@ async function initWalletConnectKit() {
 
   try {
     const { getStellarWalletKit } = await import("@/lib/walletconnect-kit-stub");
-    walletConnectKit = getStellarWalletKit();
+    walletConnectKit = getStellarWalletKit() as any;
     return walletConnectKit;
   } catch {
     throw new Error("WalletConnect kit not available");
@@ -54,7 +54,8 @@ export async function connectWalletConnect(): Promise<{ publicKey: string; uri:
   if (typeof window === "undefined") throw new Error("Browser only");
 
   const kit = await initWalletConnectKit();
-  const { uri, publicKey } = await kit.connect();
+  if (!kit) throw new Error("WalletConnect kit not initialized");
+  const { uri, publicKey } = await (kit as any).connect();
 
   return { publicKey, uri };
 }
@@ -65,7 +66,8 @@ export async function getWalletConnectPublicKey(): Promise<string | null> {
 
   try {
     const kit = await initWalletConnectKit();
-    return kit.getPublicKey() || null;
+    if (!kit) return null;
+    return (kit as any).getPublicKey() || null;
   } catch {
     return null;
   }
@@ -76,7 +78,8 @@ export async function signWithWalletConnect(xdr: string): Promise<string> {
   if (typeof window === "undefined") throw new Error("Browser only");
 
   const kit = await initWalletConnectKit();
-  return kit.signTransaction(xdr, NETWORK_PASSPHRASE);
+  if (!kit) throw new Error("WalletConnect kit not initialized");
+  return (kit as any).signTransaction(xdr, NETWORK_PASSPHRASE);
 }
 
 /** Disconnect WalletConnect. */
@@ -85,7 +88,7 @@ export async function disconnectWalletConnect(): Promise<void> {
 
   try {
     const kit = await initWalletConnectKit();
-    await kit.disconnect();
+    if (kit) await (kit as any).disconnect();
   } catch {
     // Ignore errors on disconnect
   }
diff --git a/src/lib/invoiceSearch.ts b/src/lib/invoiceSearch.ts
index 4deac41..00a2949 100644
--- a/src/lib/invoiceSearch.ts
+++ b/src/lib/invoiceSearch.ts
@@ -14,7 +14,7 @@ export function searchInvoices(invoices: Invoice[], query: string): Invoice[] {
     const matches =
       inv.id.toLowerCase().includes(lowerQuery) ||
       inv.creator.toLowerCase().includes(lowerQuery) ||
-      (inv.data?.title as string)?.toLowerCase().includes(lowerQuery) ||
+      ((inv as any).data?.title as string)?.toLowerCase().includes(lowerQuery) ||
       inv.recipients.some((r) =>
         r.address.toLowerCase().includes(lowerQuery)
       );
diff --git a/vitest.config.ts b/vitest.config.ts
index 972f023..0938776 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -8,6 +8,11 @@ export default defineConfig({
     globals: true,
     environment: 'jsdom',
     setupFiles: ['./vitest.setup.ts', './src/__tests__/setup.ts'],
+    server: {
+      deps: {
+        inline: ['@stellar/freighter-api', '@stellar-split/sdk'],
+      },
+    },
   },
   resolve: {
     alias: {
diff --git a/vitest.setup.ts b/vitest.setup.ts
index 7b0828b..f0a251d 100644
--- a/vitest.setup.ts
+++ b/vitest.setup.ts
@@ -1 +1,4 @@
 import '@testing-library/jest-dom';
+import { vi } from 'vitest';
+
+(globalThis as any).jest = vi as any;