Fix broken links, aria attributes, and demo data mismatches (#2831)

Co-authored-by: Paweł Kuna <1282324+codecalm@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>

shared/components/cards/ChurnRisk.astro

@@ -16,7 +16,7 @@ const churn = crmDashboard.churn_risk
       <h3 class="card-title mb-0">Churn risk</h3>
     </div>
     <CardActions>
-      <Badge text="3 accounts" color="red" />
+      <Badge text={`${churn.items.length} accounts`} color="red" />
     </CardActions>
   </div>
 

shared/components/cards/Icons.astro

@@ -10,10 +10,11 @@ interface Props {
 const { title, type = 'outline' } = Astro.props
 
 // Dev preview limits icons to 20 (see BaseLayout).
-// The limit applies before the svg[type] filter — the "filled" card shows only filled icons among the first 20.
 const limit = 20
 
-const entries = Object.entries(icons as Record<string, { svg?: Record<string, string | null> }>).slice(0, limit)
+const entries = Object.entries(icons as Record<string, { svg?: Record<string, string | null> }>)
+  .filter(([, icon]) => icon.svg?.[type])
+  .slice(0, limit)
 ---
 
 <div class="card">

shared/components/cards/SocialTraffic.astro

@@ -2,7 +2,7 @@
 import { formatNumber } from '@shared/lib/string-format'
 import CardTitle from '@ui/CardTitle.astro'
 
-const services = 'Instagram:3550,Twitter:1798,Facebook:1245,TikTok:986,Pinterest:854,VK:650,Pinterest:420'.split(',').map((service) => {
+const services = 'Instagram:3550,Twitter:1798,Facebook:1245,TikTok:986,Pinterest:854,VK:650,LinkedIn:420'.split(',').map((service) => {
   const [name, visitors] = service.split(':')
   return { name, visitors: Number(visitors) }
 })

shared/components/cards/StorageUsage.astro

@@ -4,7 +4,7 @@
 
 <div class="card">
   <div class="card-body">
-    <p class="mb-3">Using Storage <strong>6854.45 MB </strong>of 8 GB</p>
+    <p class="mb-3">Using Storage <strong>5760 MB </strong>of 8 GB</p>
     <div class="progress progress-separated mb-3">
       <div class="progress-bar bg-primary" role="progressbar" style="width: 44%" aria-label="Regular"></div>
       <div class="progress-bar bg-info" role="progressbar" style="width: 19%" aria-label="System"></div>
@@ -14,22 +14,22 @@
       <div class="col-auto d-flex align-items-center pe-2">
         <span class="legend me-2 bg-primary"></span>
         <span>Regular</span>
-        <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">915MB</span>
+        <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">3520MB</span>
       </div>
       <div class="col-auto d-flex align-items-center px-2">
         <span class="legend me-2 bg-info"></span>
         <span>System</span>
-        <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">415MB</span>
+        <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">1520MB</span>
       </div>
       <div class="col-auto d-flex align-items-center px-2">
         <span class="legend me-2 bg-success"></span>
         <span>Shared</span>
-        <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">201MB</span>
+        <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">720MB</span>
       </div>
       <div class="col-auto d-flex align-items-center ps-2">
         <span class="legend me-2"></span>
         <span>Free</span>
-        <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">612MB</span>
+        <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">2240MB</span>
       </div>
     </div>
   </div>

shared/components/cards/UsersList2.astro

@@ -27,7 +27,7 @@ const rows = (people as Person[]).slice(offset, offset + limit).map((person, idx
   const status = colors[randomNumber(index + 5, 0, colors.length - 1)]
   return {
     person,
-    status,
+    status: status !== 'x' ? status : 'secondary',
     statusLabel: statusLabels[status],
     timeago: timeagoLabel(index, 6),
   }

shared/components/cards/music/TracksList.astro

@@ -26,16 +26,14 @@ const items = tracks.slice(0, 12)
             </div>
             <div class="col-auto text-secondary">{millisecondsToMinutes(track.duration_ms)}</div>
             <div class="col-auto">
-              <a href="#" class="link-secondary">
-                <button class="switch-icon" data-bs-toggle="switch-icon">
-                  <span class="switch-icon-a text-muted">
-                    <Icon name="heart" />
-                  </span>
-                  <span class="switch-icon-b text-red">
-                    <Icon name="heart" class="icon-filled" />
-                  </span>
-                </button>
-              </a>
+              <button class="switch-icon" data-bs-toggle="switch-icon">
+                <span class="switch-icon-a text-muted">
+                  <Icon name="heart" />
+                </span>
+                <span class="switch-icon-b text-red">
+                  <Icon name="heart" class="icon-filled" />
+                </span>
+              </button>
             </div>
             <div class="col-auto lh-1">
               <div class="dropdown">

shared/components/modals/ReportModalContent.astro

@@ -27,7 +27,7 @@ const visibilityOptions = ['Private', 'Public', 'Hidden']
         reports.map((report, index) => (
           <div class="col-lg-6">
             <label class="form-selectgroup-item">
-              <input type="radio" name="report-type" value="1" class="form-selectgroup-input" checked={index === 0} />
+              <input type="radio" name="report-type" value={index + 1} class="form-selectgroup-input" checked={index === 0} />
               <span class="form-selectgroup-label d-flex align-items-center p-3">
                 <span class="me-3">
                   <span class="form-selectgroup-check" />