store user login

src/features/nearle-admin/pages/StoresPage.tsx

@@ -4,6 +4,7 @@ import { Badge } from '@astryxdesign/core/Badge';
 import { Button } from '@astryxdesign/core/Button';
 import { Card } from '@astryxdesign/core/Card';
 import { Table, type TableColumn } from '@astryxdesign/core/Table';
+import { HStack } from '@astryxdesign/core/HStack';
 import { Text } from '@astryxdesign/core/Text';
 import { TextInput } from '@astryxdesign/core/TextInput';
 import { VStack } from '@astryxdesign/core/VStack';
@@ -12,7 +13,7 @@ import { DataState } from '@/components/DataState';
 import { KpiCard } from '@/components/KpiCard';
 import { PageHeader } from '@/components/PageHeader';
 import { SectionHeader } from '@/components/SectionHeader';
-import { useTenants } from '@/queries/hooks';
+import { useTenants, useTenantsByApproval } from '@/queries/hooks';
 import type { TenantInfo } from '@/api/types';
 
 /** A tenant, with its branches folded in. */
@@ -34,15 +35,39 @@ interface TenantRow extends Record<string, unknown> {
  * grouped by tenantid here rather than shown raw — otherwise a tenant with six
  * branches reads as six tenants.
  */
+type Tab = 'directory' | 'pending';
+
+/** Rows per page. One more than this is fetched, to know whether there is a next. */
+const PAGE_SIZE = 50;
+
 export function StoresPage() {
-  const { data, isLoading, error } = useTenants();
+  const [tab, setTab] = useState<Tab>('directory');
   const [search, setSearch] = useState('');
+  const [page, setPage] = useState(1);
+
+  /**
+   * A page at a time, newest first — `getalltenants` orders by `tenantid DESC`
+   * and has no total, so paging is "ask for one more than we show and see if it
+   * comes back". A platform list read whole is fine at twenty tenants and not
+   * at two thousand.
+   */
+  const { data, isLoading, error } = useTenants({ pageno: page, pagesize: PAGE_SIZE + 1 });
+
+  /**
+   * The queue of merchants awaiting approval.
+   *
+   * A separate endpoint, not a filter: `approved = 0` rows do not appear in
+   * `getalltenants` at all, so without this they are invisible. Nothing here
+   * can approve one — `approved` is writable only at creation — so this lists
+   * and says so.
+   */
+  const pending = useTenantsByApproval('pending');
 
   const rows = useMemo<TenantRow[]>(() => {
     if (!data) return [];
     const grouped = new Map<number, TenantRow>();
 
-    for (const tenant of data as TenantInfo[]) {
+    for (const tenant of (data as TenantInfo[]).slice(0, PAGE_SIZE)) {
       const existing = grouped.get(tenant.tenantid);
       if (existing) {
         existing.branches += 1;
@@ -196,6 +221,23 @@ export function StoresPage() {
         />
       </div>
 
+      <HStack gap={0.5} wrap="wrap">
+        <TabButton
+          label="Directory"
+          isActive={tab === 'directory'}
+          onClick={() => setTab('directory')}
+        />
+        <TabButton
+          label="Awaiting approval"
+          isActive={tab === 'pending'}
+          badge={pending.data?.length || undefined}
+          onClick={() => setTab('pending')}
+        />
+      </HStack>
+
+      {tab === 'pending' ? (
+        <PendingPanel rows={pending.data ?? []} isLoading={pending.isLoading} />
+      ) : (
       <VStack gap={1.5}>
         <SectionHeader
           title="Tenant directory"
@@ -246,7 +288,200 @@ export function StoresPage() {
             </div>
           </DataState>
         </Card>
+
+        <HStack justify="between" align="center" gap={1} wrap="wrap">
+          <Text type="body" size="sm" color="secondary">
+            Page {page}
+            {search ? ` · filtered from ${rows.length} on this page` : ''}
+          </Text>
+          <HStack gap={1}>
+            <Button
+              label="Previous"
+              variant="secondary"
+              size="sm"
+              isDisabled={page === 1}
+              onClick={() => setPage((current) => Math.max(1, current - 1))}
+            />
+            <Button
+              label="Next"
+              variant="secondary"
+              size="sm"
+              isDisabled={(data?.length ?? 0) <= PAGE_SIZE}
+              onClick={() => setPage((current) => current + 1)}
+            />
+          </HStack>
+        </HStack>
       </VStack>
+      )}
     </VStack>
   );
 }
+
+/**
+ * Merchants that have been created but never approved.
+ *
+ * Read-only, and it says why on the panel rather than offering a button that
+ * cannot work: `tenants.approved` is written once, at creation, and there is no
+ * update or approve endpoint anywhere in the backend. Until there is, this is
+ * the only place these rows are visible at all — `getalltenants` cannot see
+ * them.
+ */
+function PendingPanel({ rows, isLoading }: { rows: TenantInfo[]; isLoading: boolean }) {
+  if (isLoading) {
+    return (
+      <Card padding={0} elevation="low">
+        <VStack padding={3}>
+          <Text type="body" size="sm" color="secondary">
+            Reading the approval queue…
+          </Text>
+        </VStack>
+      </Card>
+    );
+  }
+
+  if (rows.length === 0) {
+    return (
+      <Card padding={0} elevation="low">
+        <VStack gap={0.5} padding={3}>
+          <Text type="label" size="sm" weight="semibold">
+            Nothing waiting
+          </Text>
+          <Text type="body" size="sm" color="secondary">
+            Every merchant on the platform has been approved.
+          </Text>
+        </VStack>
+      </Card>
+    );
+  }
+
+  return (
+    <VStack gap={1.5}>
+      <Text type="body" size="sm" color="secondary" style={{ lineHeight: 1.6 }}>
+        These merchants exist but are not approved, so they do not appear in the directory.
+        Approving is a database change today — the backend has no endpoint for it.
+      </Text>
+      <Card padding={0} elevation="low">
+        <div className="table-scroll">
+          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
+            <thead>
+              <tr>
+                <Th>Merchant</Th>
+                <Th>Company</Th>
+                <Th>Contact</Th>
+                <Th>City</Th>
+                <Th>Tenant id</Th>
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((row) => (
+                <tr key={`${row.tenantid}-${row.locationid}`}>
+                  <Td isStrong>{row.tenantname}</Td>
+                  <Td isMuted>{row.companyname || '—'}</Td>
+                  <Td isMuted>{row.primaryemail || row.primarycontact || '—'}</Td>
+                  <Td isMuted>{row.city || '—'}</Td>
+                  <Td isMuted>{row.tenantid}</Td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+    </VStack>
+  );
+}
+
+function TabButton({
+  label,
+  isActive,
+  onClick,
+  badge,
+}: {
+  label: string;
+  isActive: boolean;
+  onClick: () => void;
+  badge?: number;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-pressed={isActive}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 6,
+        height: 32,
+        padding: '0 12px',
+        borderRadius: 12,
+        border: 0,
+        background: isActive ? 'var(--color-brand-tint)' : 'transparent',
+        color: isActive ? 'var(--color-brand)' : 'var(--color-ink-3)',
+        fontSize: 13,
+        fontWeight: isActive ? 600 : 500,
+        cursor: 'pointer',
+      }}
+    >
+      {label}
+      {badge ? (
+        <span
+          style={{
+            minWidth: 18,
+            height: 18,
+            padding: '0 5px',
+            borderRadius: 999,
+            background: 'var(--color-warning, #b7860b)',
+            color: '#fff',
+            fontSize: 11,
+            fontWeight: 700,
+            display: 'grid',
+            placeItems: 'center',
+          }}
+        >
+          {badge}
+        </span>
+      ) : null}
+    </button>
+  );
+}
+
+function Th({ children }: { children?: React.ReactNode }) {
+  return (
+    <th
+      style={{
+        textAlign: 'center',
+        padding: '10px',
+        borderBottom: '1px solid var(--color-line)',
+        fontSize: 12,
+        fontWeight: 600,
+        color: 'var(--color-ink-3)',
+        whiteSpace: 'nowrap',
+      }}
+    >
+      {children}
+    </th>
+  );
+}
+
+function Td({
+  children,
+  isMuted,
+  isStrong,
+}: {
+  children: React.ReactNode;
+  isMuted?: boolean;
+  isStrong?: boolean;
+}) {
+  return (
+    <td
+      style={{
+        textAlign: 'center',
+        padding: '10px',
+        borderBottom: '1px solid color-mix(in oklab, var(--color-line) 55%, transparent)',
+        color: isMuted ? 'var(--color-ink-3)' : 'var(--color-ink-1)',
+        fontWeight: isStrong ? 600 : 400,
+      }}
+    >
+      {children}
+    </td>
+  );
+}