[HARD][DASHBOARD] Build exportable reports dashboard with filters and summaries

[Obiajulu-gif]

Overview

Build an exportable reports dashboard for admins to generate operational, payment, investment, repayment, KYC, and fleet summaries.

Problem

Admins need structured reports for decision-making, investor transparency, and operational tracking. A reports dashboard should make it easy to filter records and export useful summaries without manually querying the database.

Expected solution

Create a reports dashboard with:

• report categories: investments, repayments, wallet transactions, KYC, fleet, users
• date range filters
• status/type filters
• summary metric cards
• table previews
• CSV export support
• print-friendly layout or PDF-ready view if practical
• empty/loading/error states

Advanced requirements

• Keep export logic server-safe.
• Scope access to admins only.
• Avoid exporting sensitive fields unless intentionally included.
• Make report generation reusable across categories.
• Use pagination or streaming-safe patterns for large datasets where possible.

Files likely involved

• admin reports dashboard pages/components
• report API routes
• transaction/investment/user/fleet models
• CSV/export utilities
• table/filter components
• route guards

Acceptance criteria

• Admin can select report type and date range.
• Admin can preview report data in dashboard.
• Admin can export CSV for at least one major report type.
• Sensitive fields are excluded by default.
• Report APIs are admin-protected.
• Empty/loading/error states are handled.
• npm run lint and npm run build pass.

Suggested labels

dashboard, reports, admin, export, backend, frontend, hard

Difficulty

Hard

[Hassanmovic98]

I'd start with the API side: build filtered report endpoints for investments and transactions that respect date ranges and status filters. CSV export on the backend keeps it safe — pull the data, exclude sensitive fields, serialize to CSV. Then build the dashboard UI with a filter bar, summary cards showing totals and counts, and a table preview with an export button. Admin middleware protects the routes. For large datasets I'd add pagination. State handling (empty, loading, error) makes it feel finished.

[Johnsource-hub]

Hello, I’m a full stack developer with hands-on experience building with variety of tools including Nextjs, nodejs, nestjs, React, Typescript and more

I focus on writing clear, maintainable code and making sure features work as expected end to end, not just in isolation. I communicate progress regularly and keep things transparent as I work. I’m confident I can complete this task within an ETA of 4 HOURS

[ZuLu0890]

I would love to work on this issue

[Jaydbrown]

Application — Exportable Reports Dashboard

Hi, I'd like to take this issue.

I've read through the existing app/dashboard/admin/reports/page.tsx, app/api/admin/reports/export/route.ts, every relevant model (Transaction, Investment, PoolInvestment, DriverPayment, InvestorCredit, InvestmentPool, User, Vehicle, HirePurchaseContract), the requireAdminAccess guard, DashboardRouteLoading, and the component library (Card, Button, PageHeader). Here's exactly what exists, what's missing, and what I'll build.

---

What already exists

The repo already has a working foundation:

What	Where	Status
Reports page with date range filters	app/dashboard/admin/reports/page.tsx	✅ exists
Summary metric cards (6 cards)	same	✅ exists
Export API (deposits, investments, repayments)	app/api/admin/reports/export/route.ts	✅ exists
Admin auth guard	requireAdminAccess() + role check	✅ exists
CSV escape + serialisation helpers	toCsv(), csvEscape() in export route	✅ exists
Loading skeleton	loading.tsx via DashboardRouteLoading	✅ exists

What's missing against the acceptance criteria

Requirement	Gap
Report categories: KYC, fleet, users, wallet transactions	Export route only handles deposits, investments, repayments
Table preview of report data before export	Page only shows aggregate metric cards — no row-level preview
Status/type filters	No status filter on the page (only date range)
Category selector (switch between report types)	Page is flat — all categories shown at once
Empty / error states on the page	No handling when queries return zero rows
Print-friendly / PDF-ready view	Not implemented
Export for users, kyc, fleet (vehicles)	Not in export route

---

Exact implementation plan

1. Extend the export API — app/api/admin/reports/export/route.ts

Add four new export types alongside the three that exist. The guard, date-windowing helpers, toCsv, and csvEscape functions are reused exactly as-is.

users export — safe fields only, no password or session tokens:

if (type === "users") {
  const users = await User.find({ ...dateMatch("createdAt", startDate, endDate) })
    .select("name fullName email role phoneNumber createdAt")   // password intentionally excluded
    .sort({ createdAt: -1 }).lean()

  const csv = toCsv(
    ["Date Joined", "Name", "Email", "Role", "Phone"],
    users.map((u: any) => [
      u.createdAt ? new Date(u.createdAt).toISOString() : "",
      u.fullName || u.name || "",
      u.email || "",
      u.role || "user",
      u.phoneNumber || "",
    ])
  )
  // … return NextResponse with Content-Disposition: attachment; filename="users-{range}.csv"
}

kyc export — pulls KYC fields from User (kycStatus, kycVerifiedAt, kycRejectedAt):

if (type === "kyc") {
  const users = await User.find({
    kycStatus: { $exists: true },
    ...dateMatch("createdAt", startDate, endDate),
  })
    .select("name fullName email kycStatus kycVerifiedAt kycRejectedAt createdAt")
    .sort({ createdAt: -1 }).lean()

  const csv = toCsv(
    ["Date", "Name", "Email", "KYC Status", "Verified At", "Rejected At"],
    users.map((u: any) => [
      u.createdAt ? new Date(u.createdAt).toISOString() : "",
      u.fullName || u.name || "",
      u.email || "",
      u.kycStatus || "pending",
      u.kycVerifiedAt ? new Date(u.kycVerifiedAt).toISOString() : "",
      u.kycRejectedAt ? new Date(u.kycRejectedAt).toISOString() : "",
    ])
  )
  // … return CSV response
}

fleet export — vehicle registry, no PII:

if (type === "fleet") {
  const vehicles = await Vehicle.find({ ...dateMatch("addedDate", startDate, endDate) })
    .select("name type year price roi status vin fuelType transmission mileage addedDate")
    .sort({ addedDate: -1 }).lean()

  const csv = toCsv(
    ["Date Added", "Name", "Type", "Year", "Price (NGN)", "ROI (%)", "Status", "VIN", "Fuel", "Transmission", "Mileage"],
    vehicles.map((v: any) => [
      v.addedDate ? new Date(v.addedDate).toISOString() : "",
      v.name || "", v.type || "", v.year || "",
      Number(v.price || 0), Number(v.roi || 0),
      v.status || "", v.vin || "",
      v.fuelType || "", v.transmission || "", v.mileage || "",
    ])
  )
  // … return CSV response
}

wallet export — all transaction types, not just deposits:

if (type === "wallet") {
  const txns = await Transaction.find({
    ...dateMatch("timestamp", startDate, endDate),
    ...(statusFilter ? { status: statusFilter } : {}),
    ...(typeFilter  ? { type: typeFilter }   : {}),
  })
    .select("userId amount type method status gatewayReference timestamp")
    .sort({ timestamp: -1 })
    .lean()
  // … join users, return CSV
}

All 7 types are validated against an allowlist before any query runs:

const VALID_TYPES = ["deposits","investments","repayments","users","kyc","fleet","wallet"] as const
if (!VALID_TYPES.includes(type)) return NextResponse.json({ message: "Invalid type" }, { status: 400 })

---

2. Add status/type filter params to the export route

The current route already accepts range, from, to. I'll add status and txType query params:

const statusFilter = searchParams.get("status") || null   // e.g. "CONFIRMED", "Completed"
const txType = searchParams.get("txType") || null          // e.g. "deposit", "withdrawal"

These are passed into the MongoDB $match only when non-null, so existing callers with no extra params are unaffected.

---

3. Upgrade the reports page — app/dashboard/admin/reports/page.tsx

The page is a Next.js server component. I'll keep it server-rendered (no "use client" needed) by driving everything through URL search params — the pattern the page already uses for range/from/to.

a) Report category selector

Add a category search param (deposits | investments | repayments | wallet | kyc | fleet | users). The page header gets a second row of category pills identical in style to the existing range pills:

const CATEGORIES = [
  { id: "deposits",    label: "Deposits"     },
  { id: "investments", label: "Investments"  },
  { id: "repayments",  label: "Repayments"   },
  { id: "wallet",      label: "Wallet Txns"  },
  { id: "kyc",         label: "KYC"          },
  { id: "fleet",       label: "Fleet"        },
  { id: "users",       label: "Users"        },
]

Each pill is a <Link> that appends ?category=X to the current URL (preserving range/from/to), matching the existing hrefForRange pattern.

b) Status filter dropdown

Added to the existing <form> alongside the range <select>:

<select name="status" defaultValue={status}>
  <option value="">All statuses</option>
  <option value="Completed">Completed</option>
  <option value="CONFIRMED">Confirmed</option>
  <option value="Pending">Pending</option>
  <option value="Failed">Failed</option>
</select>

The form already action="/dashboard/admin/reports" so status gets appended to the URL naturally.

c) Per-category summary metrics

Currently the page always shows 6 global cards. I'll make the card set conditional on category. Example for kyc:

if (category === "kyc") {
  const [verified, pending, rejected] = await Promise.all([
    User.countDocuments({ kycStatus: "verified",  ...dateFilter }),
    User.countDocuments({ kycStatus: "pending",   ...dateFilter }),
    User.countDocuments({ kycStatus: "rejected",  ...dateFilter }),
  ])
  // render 3 cards: Verified / Pending / Rejected
}

The existing 6-card layout (deposits, investments, repayments, credits, active pools, funded pools) becomes the default when category is unset or "deposits".

d) Table preview (the main missing piece)

Each category gets a table preview of the first 50 rows, rendered server-side. Columns match the CSV export so the admin knows exactly what they'll download.

Example for repayments:

<Card>
  <CardHeader>
    <CardTitle>Repayments Preview (last 50)</CardTitle>
  </CardHeader>
  <CardContent>
    <div className="overflow-x-auto">
      <table className="w-full text-sm">
        <thead>
          <tr className="border-b text-muted-foreground">
            <th className="py-2 text-left">Date</th>
            <th className="py-2 text-left">Driver</th>
            <th className="py-2 text-left">Vehicle</th>
            <th className="py-2 text-right">Amount (NGN)</th>
            <th className="py-2 text-left">Status</th>
          </tr>
        </thead>
        <tbody>
          {repaymentRows.length === 0 ? (
            <tr><td colSpan={5} className="py-8 text-center text-muted-foreground">No repayments in this period.</td></tr>
          ) : (
            repaymentRows.map((row) => (
              <tr key={row._id} className="border-b last:border-0">
                <td className="py-2">{new Date(row.createdAt).toLocaleDateString()}</td>
                <td className="py-2">{row.driverName}</td>
                <td className="py-2">{row.vehicleName}</td>
                <td className="py-2 text-right">{formatNaira(row.amountNgn)}</td>
                <td className="py-2">{row.status}</td>
              </tr>
            ))
          )}
        </tbody>
      </table>
    </div>
  </CardContent>
</Card>

All previews cap at 50 rows server-side (.limit(50)). The export route has no cap — admins get full data in the CSV.

e) Empty / error / loading states

• Empty: {rows.length === 0 && <p className="py-8 text-center text-muted-foreground">No records found for this period.</p>} inside every table
• Error: wrap DB calls in try/catch, render an <Alert variant="destructive"> if queries fail rather than crashing the page
• Loading: already handled by loading.tsx via DashboardRouteLoading — no changes needed

f) Print-friendly layout

Add print: Tailwind utility classes to hide the filter bar and action buttons during print:

<div className="print:hidden"> {/* filter bar, export buttons */} </div>
<div className="print:block hidden text-xs text-muted-foreground mb-4">
  Generated {new Date().toLocaleString()} · Range: {range}
</div>

This makes Ctrl+P / window.print() produce a clean table-only view without writing a separate PDF library. A "Print" button calls window.print() via a small client component.

---

4. Export button for every category

The existing export card only has 3 buttons. I'll extend it to 7, one per category, each linking to /api/admin/reports/export?type={category}&{exportQuery}:

const EXPORT_LABELS: Record<string, string> = {
  deposits:    "Deposits",
  investments: "Investments",
  repayments:  "Repayments",
  wallet:      "Wallet Transactions",
  kyc:         "KYC Records",
  fleet:       "Fleet / Vehicles",
  users:       "Users",
}

{Object.entries(EXPORT_LABELS).map(([type, label]) => (
  <Button key={type} asChild variant="outline">
    <Link href={`/api/admin/reports/export?type=${type}&${exportQuery.toString()}`}>
      <Download className="mr-2 h-4 w-4" />
      Export {label} CSV
    </Link>
  </Button>
))}

---

Files changed

File	Change
app/api/admin/reports/export/route.ts	Add users, kyc, fleet, wallet export types; add status + txType filter params
app/dashboard/admin/reports/page.tsx	Add category selector, status filter, per-category metrics, table previews, empty/error states, print layout
app/dashboard/admin/reports/loading.tsx	Likely no changes — already uses DashboardRouteLoading

No new npm dependencies. No schema changes. No new models. The only new UI pattern is a <table> — everything else reuses Card, Button, Link, PageHeader, and formatNaira already in the project.

---

Sensitive field policy

Model	Excluded from all exports
User	password, passwordHash, session tokens, notification array
Transaction	Internal gateway secrets if any
HirePurchaseContract	Any fields beyond display name and status

Every export field list is an explicit .select() allowlist — no lean() without a field restriction.

---

Security

• requireAdminAccess() already called at the top of the page — no change needed
• Export route already checks user.role !== "admin" — extended exports inherit this check
• All type values validated against a VALID_TYPES allowlist before any DB query runs
• No user-supplied strings interpolated into queries — only ObjectId lookups and enum matches

I can have a PR ready within 2 days of being assigned.

[grantfox-oss]

🦊 GrantFox — @Jaydbrown has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #51)
2. Your PR will be reviewed by the Chainmove maintainers

Good luck! Track your progress on GrantFox.

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign campaign!

@Jaydbrown's PR #52 was approved and merged by @Obiajulu-gif.

🏆 @Jaydbrown: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (118 total points). Track your full progress on GrantFox.

👏 Great work, @Jaydbrown! Keep contributing to Chainmove.