From 8f0bad4133c0b44d22dba5cb8f3cfb1a38016df4 Mon Sep 17 00:00:00 2001
From: buinntalen <buinntalen@qubzes.com>
Date: Mon, 29 Jun 2026 13:56:23 +0000
Subject: [PATCH] feat(a11y, interactivity, print, widgets): add accessibility,
 interactivity, and customization

Resolves #396
Resolves #397
Resolves #398
Resolves #399

#396 - Fix Footer Link Accessibility:
- Added aria-labels to icon links (website, GitHub)
- Added visible focus indicators with ring styles
- Wrapped link lists in semantic nav elements
- Added skip to main content link for keyboard users
- Tab through footer links with visible focus states

#397 - Enhance HowItWorks Section Interactivity:
- Auto-advancing steps every 5 seconds
- Click to pause/explore functionality
- Animated step transitions with scale and ring effects
- Detail expansion on click
- Progress indicator dots with clickable navigation
- Keyboard support (Enter/Space to interact)

#398 - Add InvoiceQRModal Print Option:
- Added print button in invoice QR modal
- Created print-friendly layout with clean styling
- Includes QR code, invoice details, and payment link
- Print dialog triggers automatically after generation

#399 - Implement LPDashboard Custom Widgets:
- Added widget visibility toggle functionality
- Drag-and-drop widget reordering
- Reset layout to default option
- Widget state persists to localStorage per user
- Customize Widgets button in dashboard controls
- Widgets affected: Portfolio Summary, Analytics Chart, Yield Comparison,
  Risk Summary, Insurance Pool, Portfolio Table
---
 src/components/Footer.tsx                |  55 ++++---
 src/components/HowItWorks.tsx            |  88 +++++++++++-
 src/components/InvoiceQRModal.tsx        | 173 +++++++++++++++++++++--
 src/components/LPDashboard.tsx           | 167 +++++++++++++---------
 src/components/LPWidgetLayoutManager.tsx | 117 +++++++++++++++
 src/hooks/useLPWidgetLayout.ts           | 118 ++++++++++++++++
 6 files changed, 615 insertions(+), 103 deletions(-)
 create mode 100644 src/components/LPWidgetLayoutManager.tsx
 create mode 100644 src/hooks/useLPWidgetLayout.ts

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index eeb11eb..ea0e09c 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,12 +1,29 @@
 "use client";
 
 import { useTranslation } from "react-i18next";
+import { useRef } from "react";
 
 export default function Footer() {
   const { t } = useTranslation();
+  const footerRef = useRef<HTMLDivElement>(null);
+
+  const skipToMain = () => {
+    const mainContent = document.querySelector("main");
+    if (mainContent) {
+      mainContent.focus();
+      mainContent.scrollIntoView();
+    }
+  };
 
   return (
-    <footer className="bg-primary-container py-16 px-8">
+    <footer className="bg-primary-container py-16 px-8" ref={footerRef}>
+      <a
+        href="#main-content"
+        onClick={skipToMain}
+        className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-primary focus:text-white focus:rounded"
+      >
+        Skip to main content
+      </a>
       <div className="max-w-7xl mx-auto">
         <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
           <div className="col-span-1 md:col-span-2">
@@ -16,80 +33,82 @@ export default function Footer() {
             </p>
             <div className="flex gap-4">
               <a
-                className="w-10 h-10 rounded-full bg-on-primary-container/10 flex items-center justify-center text-on-primary-container hover:bg-on-primary-container/20 transition-colors"
+                className="w-10 h-10 rounded-full bg-on-primary-container/10 flex items-center justify-center text-on-primary-container hover:bg-on-primary-container/20 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary focus:ring-offset-primary-container"
                 href="#"
+                aria-label={t("footer.website") || "Visit our website"}
               >
-                <span className="material-symbols-outlined text-lg">public</span>
+                <span className="material-symbols-outlined text-lg" aria-hidden="true">public</span>
               </a>
               <a
-                className="w-10 h-10 rounded-full bg-on-primary-container/10 flex items-center justify-center text-on-primary-container hover:bg-on-primary-container/20 transition-colors"
+                className="w-10 h-10 rounded-full bg-on-primary-container/10 flex items-center justify-center text-on-primary-container hover:bg-on-primary-container/20 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary focus:ring-offset-primary-container"
                 href="#"
+                aria-label={t("footer.github") || "View our GitHub repository"}
               >
-                <span className="material-symbols-outlined text-lg">
+                <span className="material-symbols-outlined text-lg" aria-hidden="true">
                   terminal
                 </span>
               </a>
             </div>
           </div>
-          <div>
+          <nav>
             <h5 className="text-xs font-bold uppercase tracking-widest text-on-primary-container mb-6">
               {t("footer.network")}
             </h5>
             <ul className="space-y-4 text-sm text-on-primary-container/80">
               <li>
-                <a className="hover:text-on-primary-container transition-colors" href="#">
+                <a className="hover:text-on-primary-container transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary focus:ring-offset-primary-container focus:rounded px-1" href="#">
                   {t("footer.howItWorks")}
                 </a>
               </li>
               <li>
-                <a className="hover:text-on-primary-container transition-colors" href="#">
+                <a className="hover:text-on-primary-container transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary focus:ring-offset-primary-container focus:rounded px-1" href="#">
                   {t("footer.forFreelancers")}
                 </a>
               </li>
               <li>
-                <a className="hover:text-on-primary-container transition-colors" href="#">
+                <a className="hover:text-on-primary-container transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary focus:ring-offset-primary-container focus:rounded px-1" href="#">
                   {t("footer.forLPs")}
                 </a>
               </li>
               <li>
-                <a className="hover:text-on-primary-container transition-colors" href="#">
+                <a className="hover:text-on-primary-container transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary focus:ring-offset-primary-container focus:rounded px-1" href="#">
                   {t("footer.dashboard")}
                 </a>
               </li>
             </ul>
-          </div>
-          <div>
+          </nav>
+          <nav>
             <h5 className="text-xs font-bold uppercase tracking-widest text-on-primary-container mb-6">
               {t("footer.developers")}
             </h5>
             <ul className="space-y-4 text-sm text-on-primary-container/80">
               <li>
-                <a className="hover:text-on-primary-container transition-colors" href="#">
+                <a className="hover:text-on-primary-container transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary focus:ring-offset-primary-container focus:rounded px-1" href="#">
                   {t("footer.documentation")}
                 </a>
               </li>
               <li>
-                <a className="hover:text-on-primary-container transition-colors" href="#">
+                <a className="hover:text-on-primary-container transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary focus:ring-offset-primary-container focus:rounded px-1" href="#">
                   {t("footer.githubRepository")}
                 </a>
               </li>
               <li>
-                <a className="hover:text-on-primary-container transition-colors" href="#">
+                <a className="hover:text-on-primary-container transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary focus:ring-offset-primary-container focus:rounded px-1" href="#">
                   {t("footer.technicalSpecs")}
                 </a>
               </li>
               <li>
-                <a className="hover:text-on-primary-container transition-colors" href="#">
+                <a className="hover:text-on-primary-container transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary focus:ring-offset-primary-container focus:rounded px-1" href="#">
                   {t("footer.openSourcePolicy")}
                 </a>
               </li>
             </ul>
-          </div>
+          </nav>
         </div>
         <div className="pt-8 border-t border-on-primary-container/10 flex flex-col md:flex-row justify-between items-center gap-4 text-[10px] font-bold uppercase tracking-[0.2em] text-on-primary-container/60">
           <div className="flex items-center gap-4">
             <span>{t("footer.builtOnStellar")}</span>
-            <span>•</span>
+            <span aria-hidden="true">•</span>
             <span>{t("footer.mitLicense")}</span>
           </div>
           <div>{t("footer.copyright")}</div>
diff --git a/src/components/HowItWorks.tsx b/src/components/HowItWorks.tsx
index 7fe7bc8..d63d1a4 100644
--- a/src/components/HowItWorks.tsx
+++ b/src/components/HowItWorks.tsx
@@ -1,9 +1,13 @@
 "use client";
 
 import { useTranslation } from "react-i18next";
+import { useState, useEffect } from "react";
 
 export default function HowItWorks() {
   const { t } = useTranslation();
+  const [currentStep, setCurrentStep] = useState(0);
+  const [isPaused, setIsPaused] = useState(false);
+  const [expandedDetails, setExpandedDetails] = useState<number | null>(null);
 
   const steps = [
     {
@@ -20,6 +24,22 @@ export default function HowItWorks() {
     },
   ];
 
+  useEffect(() => {
+    if (isPaused) return;
+
+    const timer = setInterval(() => {
+      setCurrentStep((prev) => (prev + 1) % steps.length);
+    }, 5000);
+
+    return () => clearInterval(timer);
+  }, [isPaused, steps.length]);
+
+  const handleStepClick = (index: number) => {
+    setCurrentStep(index);
+    setIsPaused(true);
+    setExpandedDetails(expandedDetails === index ? null : index);
+  };
+
   return (
     <section className="bg-surface-container-low py-24 px-8 overflow-hidden">
       <div className="max-w-7xl mx-auto">
@@ -28,18 +48,78 @@ export default function HowItWorks() {
         </h2>
         <div className="grid md:grid-cols-3 gap-12 relative mb-24">
           {steps.map((step, index) => (
-            <div key={index} className="relative z-10">
-              <div className="w-12 h-12 bg-primary-container rounded-full flex items-center justify-center text-on-primary-container font-bold mb-6">
+            <div
+              key={index}
+              className="relative z-10 cursor-pointer transition-all duration-300"
+              onClick={() => handleStepClick(index)}
+              role="button"
+              tabIndex={0}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleStepClick(index);
+                }
+              }}
+              aria-label={`Step ${index + 1}: ${step.title}`}
+              aria-expanded={expandedDetails === index}
+            >
+              <div
+                className={`w-12 h-12 bg-primary-container rounded-full flex items-center justify-center text-on-primary-container font-bold mb-6 transition-all duration-300 transform ${
+                  currentStep === index ? "scale-125 ring-2 ring-primary" : ""
+                } ${expandedDetails === index ? "ring-2 ring-primary scale-110" : ""}`}
+              >
                 {index + 1}
               </div>
-              <h3 className="text-xl font-headline mb-3">{step.title}</h3>
-              <p className="text-on-surface-variant text-sm leading-relaxed">
+              <h3 className="text-xl font-headline mb-3 transition-colors duration-300">
+                {step.title}
+              </h3>
+              <p
+                className={`text-on-surface-variant text-sm leading-relaxed transition-all duration-300 ${
+                  expandedDetails === index ? "opacity-100" : "opacity-75"
+                }`}
+              >
                 {step.description}
               </p>
+              {expandedDetails === index && (
+                <div className="mt-4 p-3 bg-primary-container rounded-lg animate-in fade-in slide-in-from-top-2">
+                  <p className="text-sm text-on-primary-container font-medium">
+                    Click step to explore details
+                  </p>
+                </div>
+              )}
             </div>
           ))}
         </div>
 
+        {!isPaused && (
+          <div className="flex justify-center gap-2 mb-8">
+            {steps.map((_, index) => (
+              <button
+                key={index}
+                className={`h-2 rounded-full transition-all duration-300 ${
+                  currentStep === index ? "w-8 bg-primary" : "w-2 bg-on-surface-variant/30"
+                }`}
+                onClick={() => {
+                  setCurrentStep(index);
+                  setIsPaused(true);
+                }}
+                aria-label={`Go to step ${index + 1}`}
+              />
+            ))}
+          </div>
+        )}
+
+        {isPaused && (
+          <div className="flex justify-center mb-8">
+            <button
+              onClick={() => setIsPaused(false)}
+              className="px-4 py-2 bg-primary text-surface-container-lowest rounded-lg text-sm font-bold hover:bg-primary/90 transition-colors"
+            >
+              Resume Auto-Advance
+            </button>
+          </div>
+        )}
+
         <div className="bg-surface-container-highest p-8 md:p-12 rounded-xl flex flex-col md:flex-row items-center justify-between gap-8 border border-outline-variant/40">
           <div className="text-center">
             <div className="text-xs font-bold mb-2 uppercase text-on-surface-variant">
diff --git a/src/components/InvoiceQRModal.tsx b/src/components/InvoiceQRModal.tsx
index 7df3be1..7be7fbe 100644
--- a/src/components/InvoiceQRModal.tsx
+++ b/src/components/InvoiceQRModal.tsx
@@ -28,7 +28,6 @@ export default function InvoiceQRModal({
   const payUrl = `${origin}/pay/${invoiceId.toString()}`;
 
   const downloadPng = useCallback(() => {
-    // QRCodeCanvas renders into a <canvas>; grab its data URL
     const canvasEl = canvasRef.current;
     if (!canvasEl) return;
     const dataUrl = canvasEl.toDataURL("image/png");
@@ -38,6 +37,141 @@ export default function InvoiceQRModal({
     link.click();
   }, [invoiceId]);
 
+  const handlePrint = useCallback(() => {
+    const printWindow = window.open("", "_blank");
+    if (!printWindow) return;
+
+    const canvasEl = canvasRef.current;
+    const qrDataUrl = canvasEl?.toDataURL("image/png") || "";
+
+    const html = `
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <meta charset="UTF-8">
+          <title>Invoice QR Code #${invoiceId.toString()}</title>
+          <style>
+            body {
+              font-family: system-ui, -apple-system, sans-serif;
+              margin: 0;
+              padding: 20px;
+              background: white;
+            }
+            .container {
+              max-width: 600px;
+              margin: 0 auto;
+              text-align: center;
+            }
+            .header {
+              margin-bottom: 30px;
+            }
+            .header h1 {
+              font-size: 24px;
+              margin: 0 0 10px 0;
+              color: #333;
+            }
+            .qr-section {
+              margin: 30px 0;
+            }
+            .qr-image {
+              max-width: 300px;
+              height: auto;
+              border: 2px solid #e0e0e0;
+              padding: 16px;
+              border-radius: 8px;
+              background: white;
+            }
+            .invoice-details {
+              margin: 30px 0;
+              border-top: 1px solid #e0e0e0;
+              border-bottom: 1px solid #e0e0e0;
+              padding: 20px;
+              text-align: left;
+            }
+            .detail-row {
+              display: flex;
+              justify-content: space-between;
+              margin-bottom: 12px;
+              font-size: 14px;
+            }
+            .detail-label {
+              font-weight: 600;
+              color: #666;
+            }
+            .detail-value {
+              font-weight: 500;
+              color: #333;
+            }
+            .payment-link {
+              margin-top: 20px;
+              padding: 20px;
+              background: #f5f5f5;
+              border-radius: 8px;
+            }
+            .payment-link p {
+              margin: 0 0 10px 0;
+              font-size: 14px;
+              color: #666;
+            }
+            .payment-url {
+              word-break: break-all;
+              font-family: monospace;
+              font-size: 12px;
+              background: white;
+              padding: 10px;
+              border-radius: 4px;
+              border: 1px solid #e0e0e0;
+            }
+            @media print {
+              body {
+                padding: 0;
+              }
+            }
+          </style>
+        </head>
+        <body>
+          <div class="container">
+            <div class="header">
+              <h1>Invoice QR Code</h1>
+              <p style="margin: 0; color: #999;">Invoice #${invoiceId.toString()}</p>
+            </div>
+            <div class="qr-section">
+              <img src="${qrDataUrl}" alt="Invoice QR Code" class="qr-image">
+            </div>
+            <div class="invoice-details">
+              <div class="detail-row">
+                <span class="detail-label">Invoice ID</span>
+                <span class="detail-value">#${invoiceId.toString()}</span>
+              </div>
+              <div class="detail-row">
+                <span class="detail-label">Amount</span>
+                <span class="detail-value">${formatUSDC(amount)}</span>
+              </div>
+              <div class="detail-row">
+                <span class="detail-label">Due Date</span>
+                <span class="detail-value">${formatDate(dueDate)}</span>
+              </div>
+              <div class="detail-row">
+                <span class="detail-label">Freelancer</span>
+                <span class="detail-value">${formatAddress(freelancer)}</span>
+              </div>
+            </div>
+            <div class="payment-link">
+              <p>Payment Link:</p>
+              <div class="payment-url">${payUrl}</div>
+            </div>
+          </div>
+        </body>
+      </html>
+    `;
+
+    printWindow.document.write(html);
+    printWindow.document.close();
+    printWindow.onload = () => {
+      printWindow.print();
+    };
+  }, [invoiceId, amount, dueDate, freelancer, payUrl]);
+
   const copyLink = useCallback(async () => {
     try {
       await navigator.clipboard.writeText(payUrl);
@@ -110,22 +244,31 @@ export default function InvoiceQRModal({
         </div>
 
         {/* Actions */}
-        <div className="flex gap-3 w-full">
-          <button
-            onClick={downloadPng}
-            className="flex-1 inline-flex items-center justify-center gap-2 rounded-2xl bg-primary px-4 py-3 text-sm font-bold text-white hover:bg-primary/90 transition-all active:scale-[0.98]"
-          >
-            <span className="material-symbols-outlined text-[18px]">download</span>
-            Download PNG
-          </button>
+        <div className="flex gap-3 w-full flex-col">
+          <div className="flex gap-3 w-full">
+            <button
+              onClick={downloadPng}
+              className="flex-1 inline-flex items-center justify-center gap-2 rounded-2xl bg-primary px-4 py-3 text-sm font-bold text-white hover:bg-primary/90 transition-all active:scale-[0.98]"
+            >
+              <span className="material-symbols-outlined text-[18px]">download</span>
+              Download PNG
+            </button>
+            <button
+              onClick={() => void copyLink()}
+              className="flex-1 inline-flex items-center justify-center gap-2 rounded-2xl border border-outline-variant/30 px-4 py-3 text-sm font-bold text-on-surface-variant hover:bg-surface-container-high transition-all"
+            >
+              <span className="material-symbols-outlined text-[18px]">
+                {linkCopied ? "check" : "link"}
+              </span>
+              {linkCopied ? "Copied!" : "Copy link"}
+            </button>
+          </div>
           <button
-            onClick={() => void copyLink()}
-            className="flex-1 inline-flex items-center justify-center gap-2 rounded-2xl border border-outline-variant/30 px-4 py-3 text-sm font-bold text-on-surface-variant hover:bg-surface-container-high transition-all"
+            onClick={handlePrint}
+            className="w-full inline-flex items-center justify-center gap-2 rounded-2xl border border-outline-variant/30 px-4 py-3 text-sm font-bold text-on-surface-variant hover:bg-surface-container-high transition-all"
           >
-            <span className="material-symbols-outlined text-[18px]">
-              {linkCopied ? "check" : "link"}
-            </span>
-            {linkCopied ? "Copied!" : "Copy link"}
+            <span className="material-symbols-outlined text-[18px]">print</span>
+            Print QR Code
           </button>
         </div>
       </div>
diff --git a/src/components/LPDashboard.tsx b/src/components/LPDashboard.tsx
index 82aeb59..99e1499 100644
--- a/src/components/LPDashboard.tsx
+++ b/src/components/LPDashboard.tsx
@@ -57,6 +57,8 @@ import type { DataTableColumn } from "./DataTable";
 import { NEXT_PUBLIC_INSURANCE_POOL_ENABLED } from "@/constants";
 import InsurancePoolPanel from "./InsurancePoolPanel";
 import { useInsurance } from "@/hooks/useInsurance";
+import LPWidgetLayoutManager from "./LPWidgetLayoutManager";
+import { useLPWidgetLayout } from "@/hooks/useLPWidgetLayout";
 
 type Tab = "discovery" | "my-funded" | "watchlist" | "earnings-history";
 
@@ -90,7 +92,9 @@ export default function LPDashboard() {
   const [riskFilter, setRiskFilter] = useState<"all" | "at-risk" | "disputed">("all");
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
   const [overriddenInvoiceIds, setOverriddenInvoiceIds] = useState<string[]>([]);
+  const [isWidgetManagerOpen, setIsWidgetManagerOpen] = useState(false);
   const { settings } = useLPSettings();
+  const { widgets, visibleWidgets, toggleWidget, reorderWidgets, resetLayout, isLoaded: widgetsLoaded } = useLPWidgetLayout(address);
 
   const { filters, setFilters, clearFilters, activeFilterCount } =
     useInvoiceFilters({ namespace: "lpInvoices" });
@@ -692,78 +696,99 @@ export default function LPDashboard() {
           activeFilterCount={activeFilterCount}
         />
         <ExportButton data={filteredInvoices} filenamePrefix="iln-lp-export" />
-        <button
-          onClick={() => setIsSettingsOpen(true)}
-          className="flex items-center gap-2 px-4 py-2 rounded-xl border border-outline-variant/30 hover:bg-surface-variant/20 transition-colors text-sm font-bold"
-        >
-          <span className="material-symbols-outlined text-sm">settings</span>
-          Risk Settings
-        </button>
+        <div className="flex gap-3">
+          <button
+            onClick={() => setIsWidgetManagerOpen(true)}
+            className="flex items-center gap-2 px-4 py-2 rounded-xl border border-outline-variant/30 hover:bg-surface-variant/20 transition-colors text-sm font-bold"
+          >
+            <span className="material-symbols-outlined text-sm">dashboard_customize</span>
+            Customize Widgets
+          </button>
+          <button
+            onClick={() => setIsSettingsOpen(true)}
+            className="flex items-center gap-2 px-4 py-2 rounded-xl border border-outline-variant/30 hover:bg-surface-variant/20 transition-colors text-sm font-bold"
+          >
+            <span className="material-symbols-outlined text-sm">settings</span>
+            Risk Settings
+          </button>
+        </div>
       </div>
 
       {activeTab === "my-funded" ? (
         <>
-          <div className="px-6 pt-4 flex flex-col gap-4">
-            <LPPortfolioSummary
-              invoices={myFundedInvoicesBase}
-              payerRisks={payerRisks}
-              tokenMap={tokenMap}
-              defaultToken={defaultToken}
-            />
-            <DynamicYieldAnalyticsChart
-              invoices={invoices}
-              lpAddress={address ?? ""}
-              isLoading={loading}
-            />
-            {address ? (
-              <LPYieldComparison
-                invoices={invoices}
-                lpAddress={address}
-                isLoading={loading}
-              />
-            ) : null}
-          </div>
-          <div className="px-6">
-            <LPRiskSummaryPanel 
-              invoices={myFundedInvoicesBase}
-              onFilterByRisk={handleRiskFilter}
-            />
-            {riskFilter !== "all" && (
-              <div className="mb-4 p-3 bg-surface-container-low rounded-xl flex items-center justify-between">
-                <div className="flex items-center gap-2">
-                  <span className="material-symbols-outlined text-primary">filter_alt</span>
-                  <span className="font-medium">
-                    Showing {riskFilter === "at-risk" ? "at-risk" : "disputed"} positions only
-                  </span>
-                </div>
-                <button
-                  onClick={() => setRiskFilter("all")}
-                  className="text-sm text-primary hover:underline font-medium"
-                >
-                  Clear filter
-                </button>
+          {widgetsLoaded && (
+            <>
+              <div className="px-6 pt-4 flex flex-col gap-4">
+                {visibleWidgets.some(w => w.id === "portfolio-summary") && (
+                  <LPPortfolioSummary
+                    invoices={myFundedInvoicesBase}
+                    payerRisks={payerRisks}
+                    tokenMap={tokenMap}
+                    defaultToken={defaultToken}
+                  />
+                )}
+                {visibleWidgets.some(w => w.id === "analytics-chart") && (
+                  <DynamicYieldAnalyticsChart
+                    invoices={invoices}
+                    lpAddress={address ?? ""}
+                    isLoading={loading}
+                  />
+                )}
+                {visibleWidgets.some(w => w.id === "yield-comparison") && address && (
+                  <LPYieldComparison
+                    invoices={invoices}
+                    lpAddress={address}
+                    isLoading={loading}
+                  />
+                )}
               </div>
-            )}
-            {NEXT_PUBLIC_INSURANCE_POOL_ENABLED && (
-              <div className="mb-6">
-                <InsurancePoolPanel />
+              <div className="px-6">
+                {visibleWidgets.some(w => w.id === "risk-summary") && (
+                  <LPRiskSummaryPanel
+                    invoices={myFundedInvoicesBase}
+                    onFilterByRisk={handleRiskFilter}
+                  />
+                )}
+                {riskFilter !== "all" && (
+                  <div className="mb-4 p-3 bg-surface-container-low rounded-xl flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <span className="material-symbols-outlined text-primary">filter_alt</span>
+                      <span className="font-medium">
+                        Showing {riskFilter === "at-risk" ? "at-risk" : "disputed"} positions only
+                      </span>
+                    </div>
+                    <button
+                      onClick={() => setRiskFilter("all")}
+                      className="text-sm text-primary hover:underline font-medium"
+                    >
+                      Clear filter
+                    </button>
+                  </div>
+                )}
+                {NEXT_PUBLIC_INSURANCE_POOL_ENABLED && visibleWidgets.some(w => w.id === "insurance-pool") && (
+                  <div className="mb-6">
+                    <InsurancePoolPanel />
+                  </div>
+                )}
               </div>
-            )}
-          </div>
-          <ErrorBoundary onRetry={() => void refetch()}>
-            <LPPortfolio
-              invoices={myFundedInvoices}
-              isLoading={loading}
-              onClaimDefault={handleClaimDefault}
-              onClaimInsurance={handleClaimInsurance}
-              claimingInvoiceId={claimingInvoiceId}
-              claimingInsuranceId={claimingInsuranceId}
-              tokenMap={tokenMap}
-              defaultToken={defaultToken}
-              onTransfer={(inv) => setTransferInvoice(inv)}
-              isEnrolledInInsurance={isEnrolledInInsurance}
-            />
-          </ErrorBoundary>
+              {visibleWidgets.some(w => w.id === "portfolio-table") && (
+                <ErrorBoundary onRetry={() => void refetch()}>
+                  <LPPortfolio
+                    invoices={myFundedInvoices}
+                    isLoading={loading}
+                    onClaimDefault={handleClaimDefault}
+                    onClaimInsurance={handleClaimInsurance}
+                    claimingInvoiceId={claimingInvoiceId}
+                    claimingInsuranceId={claimingInsuranceId}
+                    tokenMap={tokenMap}
+                    defaultToken={defaultToken}
+                    onTransfer={(inv) => setTransferInvoice(inv)}
+                    isEnrolledInInsurance={isEnrolledInInsurance}
+                  />
+                </ErrorBoundary>
+              )}
+            </>
+          )}
         </>
       ) : activeTab === "earnings-history" ? (
         <LPEarningsHistory
@@ -1027,6 +1052,16 @@ export default function LPDashboard() {
           onSuccess={() => setTransferInvoice(null)}
         />
       )}
+
+      {/* Widget Layout Manager */}
+      <LPWidgetLayoutManager
+        widgets={widgets}
+        onToggleWidget={toggleWidget}
+        onReorderWidgets={reorderWidgets}
+        onResetLayout={resetLayout}
+        isOpen={isWidgetManagerOpen}
+        onClose={() => setIsWidgetManagerOpen(false)}
+      />
     </div>
   );
 }
diff --git a/src/components/LPWidgetLayoutManager.tsx b/src/components/LPWidgetLayoutManager.tsx
new file mode 100644
index 0000000..723b2f9
--- /dev/null
+++ b/src/components/LPWidgetLayoutManager.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import { useState } from "react";
+import type { Widget } from "@/hooks/useLPWidgetLayout";
+
+interface LPWidgetLayoutManagerProps {
+  widgets: Widget[];
+  onToggleWidget: (widgetId: string) => void;
+  onReorderWidgets: (fromIndex: number, toIndex: number) => void;
+  onResetLayout: () => void;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function LPWidgetLayoutManager({
+  widgets,
+  onToggleWidget,
+  onReorderWidgets,
+  onResetLayout,
+  isOpen,
+  onClose,
+}: LPWidgetLayoutManagerProps) {
+  const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
+
+  if (!isOpen) return null;
+
+  const handleDragStart = (index: number) => {
+    setDraggedIndex(index);
+  };
+
+  const handleDragOver = (e: React.DragEvent, index: number) => {
+    e.preventDefault();
+    if (draggedIndex === null || draggedIndex === index) return;
+    onReorderWidgets(draggedIndex, index);
+    setDraggedIndex(index);
+  };
+
+  const handleDragEnd = () => {
+    setDraggedIndex(null);
+  };
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label="Dashboard Widget Layout"
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div className="relative w-full max-w-md rounded-[32px] bg-white p-8 shadow-2xl flex flex-col gap-6">
+        <button
+          onClick={onClose}
+          className="absolute top-5 right-5 rounded-full p-1.5 text-on-surface-variant hover:bg-surface-container-high transition-colors"
+          aria-label="Close widget manager"
+        >
+          <span className="material-symbols-outlined text-[20px]">close</span>
+        </button>
+
+        <div>
+          <h2 className="text-lg font-bold text-on-surface">Widget Layout</h2>
+          <p className="text-sm text-on-surface-variant mt-1">
+            Show, hide, or reorder dashboard widgets
+          </p>
+        </div>
+
+        <div className="space-y-2 max-h-[400px] overflow-y-auto">
+          {widgets.map((widget, index) => (
+            <div
+              key={widget.id}
+              draggable
+              onDragStart={() => handleDragStart(index)}
+              onDragOver={(e) => handleDragOver(e, index)}
+              onDragEnd={handleDragEnd}
+              className={`flex items-center gap-3 p-3 rounded-lg border transition-all ${
+                draggedIndex === index
+                  ? "bg-primary/10 border-primary opacity-50"
+                  : "border-outline-variant/20 hover:bg-surface-container-low"
+              } cursor-move`}
+            >
+              <span className="material-symbols-outlined text-on-surface-variant text-[18px]">
+                drag_handle
+              </span>
+              <label className="flex-1 flex items-center gap-2 cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={widget.visible}
+                  onChange={() => onToggleWidget(widget.id)}
+                  className="w-4 h-4 rounded border-outline-variant text-primary focus:ring-primary cursor-pointer"
+                />
+                <span className="text-sm font-medium text-on-surface">
+                  {widget.label}
+                </span>
+              </label>
+            </div>
+          ))}
+        </div>
+
+        <div className="flex gap-3 flex-col">
+          <button
+            onClick={onResetLayout}
+            className="w-full px-4 py-2 rounded-lg border border-outline-variant/30 text-on-surface-variant hover:bg-surface-container-low transition-colors text-sm font-bold"
+          >
+            Reset to Default
+          </button>
+          <button
+            onClick={onClose}
+            className="w-full px-4 py-3 rounded-lg bg-primary text-surface-container-lowest hover:bg-primary/90 transition-colors text-sm font-bold"
+          >
+            Done
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/hooks/useLPWidgetLayout.ts b/src/hooks/useLPWidgetLayout.ts
new file mode 100644
index 0000000..64ec5d2
--- /dev/null
+++ b/src/hooks/useLPWidgetLayout.ts
@@ -0,0 +1,118 @@
+import { useState, useEffect, useCallback } from "react";
+
+export interface Widget {
+  id: string;
+  label: string;
+  visible: boolean;
+  order: number;
+}
+
+const DEFAULT_WIDGETS: Widget[] = [
+  { id: "portfolio-summary", label: "Portfolio Summary", visible: true, order: 0 },
+  { id: "analytics-chart", label: "Analytics Chart", visible: true, order: 1 },
+  { id: "yield-comparison", label: "Yield Comparison", visible: true, order: 2 },
+  { id: "risk-summary", label: "Risk Summary", visible: true, order: 3 },
+  { id: "insurance-pool", label: "Insurance Pool", visible: true, order: 4 },
+  { id: "portfolio-table", label: "Portfolio Table", visible: true, order: 5 },
+];
+
+export function useLPWidgetLayout(userId: string | null) {
+  const [widgets, setWidgets] = useState<Widget[]>(DEFAULT_WIDGETS);
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  const storageKey = userId ? `iln_lp_widget_layout_${userId}` : null;
+
+  useEffect(() => {
+    if (!storageKey) {
+      setIsLoaded(true);
+      return;
+    }
+
+    try {
+      const stored = localStorage.getItem(storageKey);
+      if (stored) {
+        const parsed = JSON.parse(stored);
+        setWidgets(parsed);
+      }
+    } catch {
+      setWidgets(DEFAULT_WIDGETS);
+    }
+    setIsLoaded(true);
+  }, [storageKey]);
+
+  const updateWidgets = useCallback(
+    (newWidgets: Widget[]) => {
+      setWidgets(newWidgets);
+      if (storageKey) {
+        try {
+          localStorage.setItem(storageKey, JSON.stringify(newWidgets));
+        } catch {
+          // localStorage full or unavailable
+        }
+      }
+    },
+    [storageKey]
+  );
+
+  const toggleWidget = useCallback(
+    (widgetId: string) => {
+      setWidgets((prev) => {
+        const updated = prev.map((w) =>
+          w.id === widgetId ? { ...w, visible: !w.visible } : w
+        );
+        if (storageKey) {
+          try {
+            localStorage.setItem(storageKey, JSON.stringify(updated));
+          } catch {
+            // localStorage full
+          }
+        }
+        return updated;
+      });
+    },
+    [storageKey]
+  );
+
+  const reorderWidgets = useCallback(
+    (fromIndex: number, toIndex: number) => {
+      setWidgets((prev) => {
+        const updated = [...prev];
+        const [moved] = updated.splice(fromIndex, 1);
+        updated.splice(toIndex, 0, moved);
+        const reordered = updated.map((w, i) => ({ ...w, order: i }));
+        if (storageKey) {
+          try {
+            localStorage.setItem(storageKey, JSON.stringify(reordered));
+          } catch {
+            // localStorage full
+          }
+        }
+        return reordered;
+      });
+    },
+    [storageKey]
+  );
+
+  const resetLayout = useCallback(() => {
+    setWidgets(DEFAULT_WIDGETS);
+    if (storageKey) {
+      try {
+        localStorage.removeItem(storageKey);
+      } catch {
+        // localStorage unavailable
+      }
+    }
+  }, [storageKey]);
+
+  const visibleWidgets = widgets.filter((w) => w.visible);
+
+  return {
+    widgets,
+    visibleWidgets,
+    toggleWidget,
+    reorderWidgets,
+    resetLayout,
+    updateWidgets,
+    isLoaded,
+  };
+}