@withpotter/pages-admin 0.13.0-next.113 → 0.13.0-next.115

package/dist/admin/revenue/merchants-view.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/admin/revenue/merchants-view.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useMemo, useState } from 'react';\nimport Link from 'next/link';\nimport { EmptyNote, TableRow, TableShell, Th } from '@withpotter/ui-kit';\nimport type { MerchantRevenueRow } from '@withpotter/lib/admin-api';\nimport { useMerchantRevenue } from '../hooks';\nimport { LoadFailed } from '../audit/load-failed';\nimport { AdmLoading, FilterSearch, Filters, Pagination } from '../_ui';\nimport { minorToMoney } from './ledger-model';\nimport { useUrlFilters } from './use-url-filters';\nimport styles from './ledger.module.css';\nimport table from './revenue.module.css';\n\nconst PAGE_SIZE = 25;\nconst FILTERS = { q: '' };\nconst integer = new Intl.NumberFormat('en-US');\n\n/** One colour for each way of paying, so a merchant's mix reads at a glance. The words sit under the bar too. */\nconst METHOD_COLOUR: Record<string, string> = {\n  card: '#4f7a28',\n  ussd: '#c68a1b',\n  transfer: '#2f6f9f',\n  opay: '#7a4fa0',\n};\n\n/** Which merchant received how much, and how their customers paid them. */\nexport function MerchantsView({ startDate, endDate }: { startDate?: string; endDate?: string }) {\n  const { values, page, set } = useUrlFilters('mr', FILTERS);\n  const [search, setSearch] = useState(values.q);\n\n  // Typing waits a moment, so a search is one request and not one per key.\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      if (search.trim() !== values.q) set({ q: search.trim() });\n    }, 300);\n\n    return () => clearTimeout(timer);\n    // Only a change the person typed should write to the address.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [search]);\n\n  const filters = useMemo(\n    () => ({ startDate, endDate, q: values.q, page, limit: PAGE_SIZE }),\n    [startDate, endDate, values.q, page],\n  );\n  const { data, isLoading, isError, refetch } = useMerchantRevenue(filters);\n\n  if (isError) {\n    return (\n      <LoadFailed\n        message=\"The merchants could not be loaded. This box may not have this view yet.\"\n        onRetry={() => void refetch()}\n      />\n    );\n  }\n  if (isLoading || !data) return <AdmLoading label=\"Loading merchants…\" />;\n\n  const hasMore = data.rows.length === PAGE_SIZE;\n\n  return (\n    <div>\n      <p className={styles.lede}>\n        This shows which merchants received the most money in this period, and how their customers paid them. Open a\n        merchant to see each payment.\n      </p>\n      <div className={styles.toolbar}>\n        <Filters label=\"Filter merchants\">\n          <FilterSearch value={search} onChange={setSearch} placeholder=\"Search a merchant by name\" label=\"Search merchants\" />\n        </Filters>\n      </div>\n\n      {data.rows.length === 0 ? (\n        <EmptyNote className={table.empty}>No merchant took a payment in this period. Try a wider date range.</EmptyNote>\n      ) : (\n        <TableShell\n          minWidth={760}\n          density=\"compact\"\n          head={\n            <tr>\n              <Th>Merchant</Th>\n              <Th align=\"right\">Money received</Th>\n              <Th align=\"right\">Payments</Th>\n              <Th>How customers paid</Th>\n              <Th> </Th>\n            </tr>\n          }\n        >\n          {data.rows.map((row) => (\n            <MerchantRow key={`${row.merchant.id}-${row.currency}`} row={row} />\n          ))}\n        </TableShell>\n      )}\n\n      <Pagination\n        page={page}\n        totalPages={hasMore ? page + 1 : page}\n        noun=\"merchants\"\n        onPage={(next) => set({ page: next })}\n      />\n    </div>\n  );\n}\n\nfunction MerchantRow({ row }: { row: MerchantRevenueRow }) {\n  const total = Number(row.grossMinor) || 1;\n\n  return (\n    <TableRow>\n      <td className={table.name}>\n        {row.merchant.name ? <Link href={`/admin/tenants/${row.merchant.id}`}>{row.merchant.name}</Link> : 'Unknown merchant'}\n      </td>\n      <td className={table.numStrong}>{minorToMoney(row.grossMinor, row.currency)}</td>\n      <td className={table.num}>{integer.format(row.payments)}</td>\n      <td>\n        <div className={styles.methodBar} role=\"img\" aria-label={row.byMethod.map((m) => `${m.label} ${minorToMoney(m.amountMinor, row.currency)}`).join(', ')}>\n          {row.byMethod.map((m) => (\n            <span\n              key={m.key}\n              className={styles.methodSeg}\n              style={{ width: `${(Number(m.amountMinor) / total) * 100}%`, background: METHOD_COLOUR[m.key] ?? '#8a8f85' }}\n            />\n          ))}\n        </div>\n        <div className={styles.methodText}>\n          {row.byMethod.map((m) => `${m.label} ${Math.round((Number(m.amountMinor) / total) * 100)}%`).join(' · ')}\n        </div>\n      </td>\n      <td>\n        <Link href={`?tab=merchants&mp_merchant=${row.merchant.id}`}>See payments</Link>\n      </td>\n    </TableRow>\n  );\n}\n"],"mappings":"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","names":[]}