Squashed commit of the following:

commit 82c907d
Merge: 307c0cc 8c71fd2
Author: Anji <[email protected]>
Date:   Tue Oct 14 10:59:11 2025 -0400

    Merge branch 'dev-987-asset-usage-limit-offset-pagination' into anji/dev-1013-mirgrate-to-universal-table

commit 307c0cc
Merge: d1bbb52 6e62f77
Author: Anji <[email protected]>
Date:   Tue Oct 14 10:58:28 2025 -0400

    Merge branch 'dev-987-asset-usage-limit-offset-pagination' into anji/dev-1013-mirgrate-to-universal-table

     Conflicts:
    	jsapp/js/account/usage/usageProjectBreakdown.tsx

commit d1bbb52
Author: Kalvis Kalniņš <[email protected]>
Date:   Thu Oct 9 18:45:26 2025 +0300

    fixup! WIP, BROKEN: query error typing mismatch

commit 1314ccc
Author: Kalvis Kalniņš <[email protected]>
Date:   Thu Oct 9 18:40:33 2025 +0300

    refactor(UniversalTable): parameterize error type

commit 133d677
Author: Anji <[email protected]>
Date:   Thu Oct 9 11:33:00 2025 -0400

    WIP, BROKEN: query error typing mismatch

commit bda0843
Author: Leszek <[email protected]>
Date:   Tue Sep 30 21:04:47 2025 +0200

    remove duplicated column

commit f175294
Author: Anji <[email protected]>
Date:   Tue Sep 30 13:44:05 2025 -0400

    Add count

commit a13fdf4
Author: Anji <[email protected]>
Date:   Tue Sep 30 13:26:51 2025 -0400

    add proper link to project label

commit d58cc9f
Author: Anji <[email protected]>
Date:   Thu Sep 25 15:06:54 2025 -0400

    WIP title link

commit 94f54d6
Merge: 9d98814 4e7c317
Author: Anji Tong <[email protected]>
Date:   Thu Sep 25 17:23:27 2025 +0000

    Merge branch 'dev-987-asset-usage-limit-offset-pagination' into anji/dev-1013-mirgrate-to-universal-table

commit 9d98814
Author: Anji <[email protected]>
Date:   Thu Sep 18 19:22:31 2025 -0400

    biome

commit 0772fad
Author: Anji <[email protected]>
Date:   Thu Sep 18 19:21:22 2025 -0400

    fix(assetUsage): migrate asset usage table

commit 3fc4877
Author: Anji <[email protected]>
Date:   Thu Sep 18 18:58:35 2025 -0400

    WIP: table migrated, TODO: remove old code

Author: duvld

jsapp/js/UniversalTable/index.tsx

@@ -1,6 +1,8 @@
 import React, { useMemo } from 'react'
 
 import type { UseQueryResult } from '@tanstack/react-query'
+import type { ErrorObject } from 'schema-utils/declarations/validate'
+import type { ErrorDetail } from '#/api/models/errorDetail'
 import UniversalTableCore from './UniversalTableCore'
 import type { UniversalTableColumn } from './UniversalTableCore'
 
@@ -44,7 +46,7 @@ export namespace PaginatedListResponse {
   }
 }
 
-interface UniversalTableProps<Datum, TError = Error> {
+interface UniversalTableProps<Datum, TError = Error | ErrorDetail | ErrorObject> {
   // Below are props from `UniversalTable` that should come from the parent
   // component (these are kind of "configuration" props). The other
   // `UniversalTable` props are being handled here internally.

jsapp/js/account/usage/assetUsage.api.ts

@@ -1,18 +1,11 @@
 import { fetchGet } from '#/api'
+import type { PaginatedResponse } from '#/dataInterface'
 import { PROJECT_FIELDS } from '#/projects/projectViews/constants'
 import type { ProjectFieldName } from '#/projects/projectViews/constants'
 import type { ProjectsTableOrder } from '#/projects/projectsTable/projectsTable'
 
-export interface AssetUsage {
-  count: string
-  next: string | null
-  previous: string | null
-  results: AssetWithUsage[]
-}
-
 export interface AssetWithUsage {
   asset: string
-  uid: string
   asset__name: string
   nlp_usage_current_period: {
     total_nlp_asr_seconds: number
@@ -31,14 +24,16 @@ export interface AssetWithUsage {
 const ORG_ASSET_USAGE_URL = '/api/v2/organizations/:organization_id/asset_usage/'
 
 export async function getOrgAssetUsage(
-  pageNumber: number | string,
+  limit: number,
+  offset: number,
   organizationId: string,
   order?: ProjectsTableOrder,
 ) {
   const apiUrl = ORG_ASSET_USAGE_URL.replace(':organization_id', organizationId)
 
   const params = new URLSearchParams({
-    page: pageNumber.toString(),
+    limit: limit.toString(),
+    offset: offset.toString(),
   })
 
   if (order?.fieldName && order.direction && (order.direction === 'ascending' || order.direction === 'descending')) {
@@ -47,8 +42,11 @@ export async function getOrgAssetUsage(
     params.set('ordering', orderingPrefix + fieldDefinition.apiOrderingName)
   }
 
-  return fetchGet<AssetUsage>(`${apiUrl}?${params}`, {
-    includeHeaders: true,
-    errorMessageDisplay: t('There was an error fetching asset usage data.'),
-  })
+  return {
+    status: 200 as const,
+    data: await fetchGet<PaginatedResponse<AssetWithUsage>>(`${apiUrl}?${params}`, {
+      includeHeaders: true,
+      errorMessageDisplay: t('There was an error fetching asset usage data.'),
+    }),
+  }
 }

jsapp/js/account/usage/usageProjectBreakdown.module.scss

@@ -30,88 +30,7 @@
   padding: 2%;
 }
 
-.root table {
-  width: 100%;
-  border-collapse: collapse;
-  margin-block-end: 60px;
-}
-
-.root table th {
-  padding: 0 8px;
-}
-
-.projects {
-  padding-right: 15%;
-  padding-left: 8px;
-}
-
-.root th {
-  font-weight: 700;
-  font-size: 13px;
-  color: colors.$kobo-gray-700;
-  text-align: initial;
-  padding-block: 1.5%;
-}
-
-.root tr {
-  font-weight: 400;
-  font-size: 16px;
-  color: colors.$kobo-gray-800;
-  border-bottom: 1px solid colors.$kobo-gray-300;
-}
-
-.root td {
-  padding: 18px 8px;
-}
-
 .link {
   color: colors.$kobo-dark-blue;
   font-weight: 600;
 }
-
-.currentMonth {
-  font-weight: 600;
-}
-
-.pagination {
-  font-weight: 400;
-  font-size: 14px;
-  color: colors.$kobo-gray-800;
-  position: fixed;
-  bottom: 20px;
-  background-color: white;
-  border: 1px solid colors.$kobo-gray-400;
-  width: 150px;
-  border-radius: 4px;
-  padding: 5px 0;
-  display: flex;
-  align-items: center;
-  height: 36px;
-}
-
-.root button {
-  background: transparent;
-  border: none;
-  padding: 0 8px;
-  color: colors.$kobo-gray-400;
-  cursor: pointer;
-
-  &.active {
-    color: colors.$kobo-gray-800;
-  }
-}
-
-.range {
-  padding: 6px;
-  border-right: 1px solid colors.$kobo-gray-400;
-  border-left: 1px solid colors.$kobo-gray-400;
-  flex: 1;
-  text-align: center;
-}
-
-.emptyMessage {
-  padding: 40px;
-  font-size: 1.2rem;
-  justify-content: center;
-  text-align: center;
-}