feat(dashboard): add "This Month" contributions tab + restyled sort icons

Add a fifth dashboard tab listing every contribution made in the current
calendar month (IST) by active members, in a #/Person/Contribution/Date/
Transaction ID table built on the shared PrDataTable (search + export +
footer total).

- dashboard.ts: getCurrentMonthContributions(monthIso) cached read; month
  key is passed in (not derived from the clock) since Cache Components
  forbids reading the clock inside a 'use cache' scope. Filters to
  transaction_type='contribution' within the month and to active members.
- data-table.tsx: replace PrimeReact's default sort glyph with a
  stacked rounded-chevron indicator via the supported sortIcon render prop
  (the active direction highlights in brand blue). Applies app-wide.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: pkorrakuti-mvrk

src/app/(app)/dashboard/current-month-contributions-table.tsx

@@ -0,0 +1,176 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { formatRupees } from '@/lib/format'
+import { TableExportMenu } from '@/components/table-export'
+import { PrDataTable, type PrColumn } from '@/components/ui/pr/data-table'
+import type { Cell } from '@/lib/table-export'
+
+export type CurrentMonthRow = {
+  id: string
+  transaction_id: string
+  amount: number | string
+  transaction_date: string
+  member_name?: string | null
+  bank_transaction_id?: string | null
+}
+
+/** Flattened fields baked onto each row so the DataTable can sort / filter /
+ *  globally search on flat string/number values. */
+type CurrentMonthRowAug = CurrentMonthRow & {
+  _date_ts: number
+  _amount: number
+  _member: string
+  _search_blob: string
+}
+
+function formatDate(iso: string): string {
+  const d = new Date(iso)
+  const dd = String(d.getUTCDate()).padStart(2, '0')
+  const mm = String(d.getUTCMonth() + 1).padStart(2, '0')
+  const yyyy = d.getUTCFullYear()
+  return `${dd}-${mm}-${yyyy}`
+}
+
+export function CurrentMonthContributionsTable({
+  rows,
+}: {
+  rows: CurrentMonthRow[]
+}) {
+  const augmented = useMemo<CurrentMonthRowAug[]>(
+    () =>
+      rows.map((r) => {
+        const member = r.member_name ?? ''
+        return {
+          ...r,
+          _date_ts: new Date(r.transaction_date).getTime(),
+          _amount: Number(r.amount) || 0,
+          _member: member,
+          _search_blob: [
+            member,
+            r.transaction_id,
+            r.bank_transaction_id ?? '',
+            formatDate(r.transaction_date),
+            String(r.amount),
+          ].join(' '),
+        }
+      }),
+    [rows],
+  )
+
+  // The DataTable reports its current filtered+sorted rows here so the export +
+  // footer summary reflect what's on screen. `null` until the first
+  // onValueChange fires → fall back to the full set.
+  const [processed, setProcessed] = useState<CurrentMonthRowAug[] | null>(null)
+  const [searchQuery, setSearchQuery] = useState('')
+  const visible = processed ?? augmented
+
+  const total = visible.reduce((s, r) => s + r._amount, 0)
+
+  const exportColumns = ['#', 'Person name', 'Contribution (₹)', 'Date', 'Transaction ID']
+  const exportRows: Cell[][] = visible.map((t, i) => [
+    i + 1,
+    t._member,
+    t._amount,
+    formatDate(t.transaction_date),
+    t.transaction_id,
+  ])
+  const exportFooter: Cell[] = ['', '', total, '', 'Total']
+
+  const columns: PrColumn<CurrentMonthRowAug>[] = [
+    {
+      field: 'id',
+      header: '#',
+      align: 'right',
+      bodyClassName: 'w-10 text-right tabular-nums text-gray-500',
+      body: (_t, { rowIndex }) => rowIndex + 1,
+    },
+    {
+      field: '_member',
+      header: 'Person name',
+      sortable: true,
+      dataType: 'text',
+      bodyClassName: 'font-medium text-gray-900',
+      body: (t) => t.member_name ?? <span className="text-gray-400">—</span>,
+    },
+    {
+      field: '_amount',
+      header: 'Contribution',
+      sortable: true,
+      align: 'right',
+      dataType: 'numeric',
+      bodyClassName: 'whitespace-nowrap text-right font-semibold tabular-nums text-gray-900',
+      body: (t) => formatRupees(t.amount),
+    },
+    {
+      field: '_date_ts',
+      header: 'Date',
+      sortable: true,
+      dataType: 'numeric',
+      bodyClassName: 'whitespace-nowrap text-gray-600',
+      body: (t) => formatDate(t.transaction_date),
+    },
+    {
+      field: 'transaction_id',
+      header: 'Transaction ID',
+      sortable: true,
+      bodyClassName: 'whitespace-nowrap font-mono text-xs text-gray-500',
+      body: (t) => (
+        <span>
+          <span>{t.transaction_id}</span>
+          {t.bank_transaction_id && (
+            <span className="ml-2 text-[11px] text-gray-400" title="Bank reference">
+              {t.bank_transaction_id}
+            </span>
+          )}
+        </span>
+      ),
+    },
+  ]
+
+  const exportMenu = (
+    <TableExportMenu
+      filename="current-month-contributions"
+      title="Current month contributions"
+      columns={exportColumns}
+      rows={exportRows}
+      footer={exportFooter}
+    />
+  )
+
+  return (
+    <div className="overflow-clip rounded-2xl border border-gray-200 bg-white">
+      <PrDataTable<CurrentMonthRowAug>
+        value={augmented}
+        columns={columns}
+        dataKey="id"
+        emptyMessage={
+          searchQuery
+            ? `No matches for "${searchQuery}"`
+            : 'No contributions recorded this month yet'
+        }
+        globalFilterFields={rows.length > 0 ? ['_search_blob'] : undefined}
+        globalSearchPlaceholder="Search rows…"
+        header={rows.length > 0 ? exportMenu : undefined}
+        onValueChange={setProcessed}
+        onGlobalFilterChange={setSearchQuery}
+      />
+
+      {visible.length > 0 && (
+        <div className="flex items-center justify-between border-t border-gray-200 bg-gray-50/30 px-5 py-3 text-xs text-gray-500">
+          <span>
+            Showing <span className="font-medium text-gray-900">{visible.length}</span>{' '}
+            {visible.length === 1 ? 'contribution' : 'contributions'}
+            {augmented.length !== visible.length && (
+              <span className="text-gray-400"> · filtered from {augmented.length}</span>
+            )}
+          </span>
+          <span className="font-medium text-gray-400">
+            Total{' '}
+            <span className="ml-1 tabular-nums text-gray-900">{formatRupees(total)}</span>
+          </span>
+        </div>
+      )}
+    </div>
+  )
+}

src/app/(app)/dashboard/dashboard-tabs.tsx

@@ -4,13 +4,14 @@ import { useState, type ReactNode } from 'react'
 import { RefreshButton } from '@/components/ui/refresh-button'
 import { PrTabStrip } from '@/components/ui/pr/tabs'
 
-type Tab = 'inflow' | 'matrix' | 'members' | 'eligibility'
+type Tab = 'inflow' | 'matrix' | 'members' | 'eligibility' | 'thismonth'
 
 const DASHBOARD_TABS: { value: Tab; label: string }[] = [
   { value: 'inflow', label: 'Monthly Inflow' },
   { value: 'matrix', label: 'Member × Month' },
   { value: 'members', label: 'Total Contributions' },
   { value: 'eligibility', label: 'Donation Eligibility' },
+  { value: 'thismonth', label: 'This Month' },
 ]
 
 /**
@@ -37,10 +38,12 @@ export function DashboardTabs({
   matrixChart,
   membersChart,
   eligibilityChart,
+  thisMonthChart,
   inflowSection,
   matrixSection,
   membersSection,
   eligibilitySection,
+  thisMonthSection,
   footer,
 }: {
   initialTab: Tab
@@ -49,10 +52,12 @@ export function DashboardTabs({
   matrixChart: ReactNode
   membersChart: ReactNode
   eligibilityChart: ReactNode
+  thisMonthChart: ReactNode
   inflowSection: ReactNode
   matrixSection: ReactNode
   membersSection: ReactNode
   eligibilitySection: ReactNode
+  thisMonthSection: ReactNode
   footer?: ReactNode
 }) {
   const [tab, setTab] = useState<Tab>(initialTab)
@@ -97,13 +102,15 @@ export function DashboardTabs({
         <div hidden={tab !== 'matrix'}>{mounted.has('matrix') ? matrixChart : null}</div>
         <div hidden={tab !== 'members'}>{mounted.has('members') ? membersChart : null}</div>
         <div hidden={tab !== 'eligibility'}>{mounted.has('eligibility') ? eligibilityChart : null}</div>
+        <div hidden={tab !== 'thismonth'}>{mounted.has('thismonth') ? thisMonthChart : null}</div>
       </section>
 
       <section>
         <div hidden={tab !== 'inflow'}>{mounted.has('inflow') ? inflowSection : null}</div>
         <div hidden={tab !== 'matrix'}>{mounted.has('matrix') ? matrixSection : null}</div>
         <div hidden={tab !== 'members'}>{mounted.has('members') ? membersSection : null}</div>
         <div hidden={tab !== 'eligibility'}>{mounted.has('eligibility') ? eligibilitySection : null}</div>
+        <div hidden={tab !== 'thismonth'}>{mounted.has('thismonth') ? thisMonthSection : null}</div>
         {footer && <div>{footer}</div>}
       </section>
     </>

src/app/(app)/dashboard/page.tsx

@@ -19,6 +19,7 @@ import {
   getDashboardMemberTotals,
   getDashboardMemberMonthMatrix,
   getDashboardTransactions,
+  getCurrentMonthContributions,
   getDashboardEligibilitySummary,
   getDashboardEligibilityLedger,
   type DashboardTxn,
@@ -30,6 +31,7 @@ import { getTotalPendingPrincipal } from '@/lib/actions/loans'
 import { Admonition } from '@/components/ui/admonition'
 import { SubmitPaymentForm } from './submit-payment-form'
 import { DashboardTabs } from './dashboard-tabs'
+import { CurrentMonthContributionsTable } from './current-month-contributions-table'
 import { EligibilityMonthlyChart } from './eligibility-monthly-chart'
 import { getSocialContributionReserve } from '@/lib/actions/exits'
 
@@ -50,7 +52,7 @@ const MONTH_LABELS = [
   'Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec',
 ]
 
-type TabKey = 'inflow' | 'matrix' | 'members' | 'eligibility'
+type TabKey = 'inflow' | 'matrix' | 'members' | 'eligibility' | 'thismonth'
 
 export default async function DashboardPage({
   searchParams,
@@ -75,6 +77,8 @@ export default async function DashboardPage({
       ? 'matrix'
       : tabParam === 'eligibility'
       ? 'eligibility'
+      : tabParam === 'thismonth'
+      ? 'thismonth'
       : 'inflow'
 
   const supabase = await createClient()
@@ -157,6 +161,15 @@ export default async function DashboardPage({
   const todayIST = new Date(new Date().toLocaleString('en-US', { timeZone: 'Asia/Kolkata' }))
   const currentYear = todayIST.getFullYear()
   const currentMonthIdx = todayIST.getMonth() // 0-indexed
+
+  // "This Month" tab — every contribution made this calendar month (IST) by an
+  // active member. The month key is computed here (not inside the cached read)
+  // because Cache Components forbids reading the clock in a `'use cache'` scope.
+  const currentMonthIso = `${currentYear}-${String(currentMonthIdx + 1).padStart(2, '0')}`
+  const currentMonthLabel = `${MONTH_LABELS_LONG[currentMonthIdx]} ${currentYear}`
+  const currentMonthRows = (await getCurrentMonthContributions(currentMonthIso)).map(toTxnRow)
+  const currentMonthTotal = currentMonthRows.reduce((s, r) => s + Number(r.amount || 0), 0)
+
   const eligibilityMonthlyData = buildEligibilityMonthlyData(
     rowsByMonth,
     eligibilityLedger,
@@ -304,6 +317,18 @@ export default async function DashboardPage({
             </div>
           </div>
         }
+        thisMonthChart={
+          <div>
+            <h2 className="text-base font-semibold text-gray-900">
+              Contributions · {currentMonthLabel}
+            </h2>
+            <p className="text-xs text-gray-500">
+              {currentMonthRows.length}{' '}
+              {currentMonthRows.length === 1 ? 'contribution' : 'contributions'} from active
+              members this month · {formatRupees(currentMonthTotal)}
+            </p>
+          </div>
+        }
         matrixSection={null}
         inflowSection={
           <div>
@@ -334,6 +359,7 @@ export default async function DashboardPage({
           </div>
         }
         eligibilitySection={<DonationEligibilityLedger years={eligibilityYears} />}
+        thisMonthSection={<CurrentMonthContributionsTable rows={currentMonthRows} />}
         membersSection={
           <div>
             <div className="mb-3 flex items-start justify-between gap-3">

src/components/ui/pr/data-table.tsx

@@ -109,6 +109,67 @@ type PrDataTableProps<T extends Record<string, unknown>> = {
   paginatorRight?: ReactNode
 }
 
+/**
+ * Sort indicator: two stacked rounded chevrons, both shown faded by default,
+ * with the active direction highlighted in the brand blue and slightly bolder
+ * stroke. Replaces PrimeReact's default single-glyph sort icon (a double
+ * up/down arrow that swaps to one arrow when active).
+ *
+ * Rendered via the DataTable `sortIcon` render prop — which hands us
+ * `{ sortOrder, sorted }` — so we own the markup and style it directly with
+ * Tailwind, sidestepping the unlayered primeicons font (its `::before` glyph
+ * can't be overridden from the `components` cascade layer).
+ */
+function SortIcon({
+  sortOrder,
+  sorted,
+}: {
+  sortOrder?: number | null
+  sorted?: boolean
+}) {
+  const asc = sorted && sortOrder === 1
+  const desc = sorted && sortOrder === -1
+  return (
+    <span
+      aria-hidden="true"
+      className="p-sortable-column-icon ml-1.5 inline-flex flex-col items-center justify-center gap-[1px] leading-none transition-colors"
+    >
+      <svg
+        width="9"
+        height="6"
+        viewBox="0 0 10 6"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={asc ? 2.25 : 1.75}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className={
+          'transition-all duration-150 ' +
+          (asc ? 'text-blue-600' : 'text-gray-300')
+        }
+      >
+        <path d="M1.5 4.75 5 1.25 8.5 4.75" />
+      </svg>
+      <svg
+        width="9"
+        height="6"
+        viewBox="0 0 10 6"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={desc ? 2.25 : 1.75}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className={
+          'transition-all duration-150 ' +
+          (desc ? 'text-blue-600' : 'text-gray-300')
+        }
+      >
+        <path d="M1.5 1.25 5 4.75 8.5 1.25" />
+      </svg>
+    </span>
+  )
+}
+
 /** Pick a sensible default match mode when a column enables filtering. */
 function defaultMatchMode(col: PrColumn<unknown>): FilterMatchMode {
   if (col.filterMatchMode) return col.filterMatchMode
@@ -244,6 +305,10 @@ export function PrDataTable<T extends Record<string, unknown>>({
       currentPageReportTemplate="{first}–{last} of {totalRecords}"
       paginatorLeft={paginatorLeft}
       paginatorRight={paginatorRight}
+      // DataTables.net-style stacked-triangle sort indicator (see SortIcon).
+      sortIcon={(options) => (
+        <SortIcon sortOrder={options.sortOrder} sorted={options.sorted} />
+      )}
       // Third click on a sorted column clears the sort (asc → desc → none).
       removableSort
       // Compact density — Lara's default cell/header padding is large; `small`