chore(admin-ui): migrate invoices table to RQL (#1042)

* chore: generate new api client

* chore: update flex props

* fix: css variables typo

* feat: create new invoices page

* chore: add columns to invoice table

* feat: add filter and search to invoices table

* chore: delete old invoices files

* fix: PR issues and update amount component

Author: rsbh

ui/package-lock.json

@@ -14,8 +14,8 @@
     "@hookform/resolvers": "^3.0.1",
     "@radix-ui/react-form": "^0.0.2",
     "@radix-ui/react-icons": "^1.3.0",
-    "@raystack/apsara": "0.46.0-rc.4",
-    "@raystack/frontier": "^0.49.0",
+    "@raystack/apsara": "0.47.0",
+    "@raystack/frontier": "^0.65.0",
     "@stitches/react": "^1.2.8",
     "@tanstack/react-table": "^8.9.3",
     "@tanstack/table-core": "^8.21.3",

ui/package.json

@@ -278,6 +278,35 @@ export interface ApiHttpBody {
   extensions?: ProtobufAny[];
 }
 
+export interface Frontierv1Beta1Invoice {
+  id?: string;
+  customer_id?: string;
+  provider_id?: string;
+  state?: string;
+  currency?: string;
+  /** @format int64 */
+  amount?: string;
+  hosted_url?: string;
+  /**
+   * The date on which payment for this invoice is due
+   * @format date-time
+   */
+  due_date?: string;
+  /**
+   * The date when this invoice is in effect.
+   * @format date-time
+   */
+  effective_at?: string;
+  /** @format date-time */
+  period_start_at?: string;
+  /** @format date-time */
+  period_end_at?: string;
+  metadata?: object;
+  /** @format date-time */
+  created_at?: string;
+  customer?: V1Beta1BillingAccount;
+}
+
 export interface Frontierv1Beta1OrganizationRequestBody {
   /** The name of the organization. The name must be unique within the entire Frontier instance. The name can contain only alphanumeric characters, dashes and underscores.<br/>*Example:*`"frontier-org1-acme"` */
   name: string;
@@ -1222,7 +1251,7 @@ export interface V1Beta1GetSubscriptionResponse {
 
 export interface V1Beta1GetUpcomingInvoiceResponse {
   /** Upcoming invoice */
-  invoice?: V1Beta1Invoice;
+  invoice?: Frontierv1Beta1Invoice;
 }
 
 export interface V1Beta1GetUserResponse {
@@ -1315,35 +1344,6 @@ export interface V1Beta1Invitation {
   role_ids?: string[];
 }
 
-export interface V1Beta1Invoice {
-  id?: string;
-  customer_id?: string;
-  provider_id?: string;
-  state?: string;
-  currency?: string;
-  /** @format int64 */
-  amount?: string;
-  hosted_url?: string;
-  /**
-   * The date on which payment for this invoice is due
-   * @format date-time
-   */
-  due_date?: string;
-  /**
-   * The date when this invoice is in effect.
-   * @format date-time
-   */
-  effective_at?: string;
-  /** @format date-time */
-  period_start_at?: string;
-  /** @format date-time */
-  period_end_at?: string;
-  metadata?: object;
-  /** @format date-time */
-  created_at?: string;
-  customer?: V1Beta1BillingAccount;
-}
-
 /** JSON Web Key as specified in RFC 7517 */
 export interface V1Beta1JSONWebKey {
   /** Key Type. */
@@ -1381,7 +1381,7 @@ export interface V1Beta1ListAllBillingAccountsResponse {
 }
 
 export interface V1Beta1ListAllInvoicesResponse {
-  invoices?: V1Beta1Invoice[];
+  invoices?: Frontierv1Beta1Invoice[];
   /**
    * Total number of records present
    * @format int32
@@ -1466,7 +1466,7 @@ export interface V1Beta1ListGroupsResponse {
 
 export interface V1Beta1ListInvoicesResponse {
   /** List of invoices */
-  invoices?: V1Beta1Invoice[];
+  invoices?: Frontierv1Beta1Invoice[];
 }
 
 export interface V1Beta1ListMetaSchemasResponse {
@@ -2271,6 +2271,26 @@ export interface V1Beta1RoleRequestBody {
   scopes?: string[];
 }
 
+export interface V1Beta1SearchInvoicesResponse {
+  invoices?: V1Beta1SearchInvoicesResponseInvoice[];
+  pagination?: V1Beta1RQLQueryPaginationResponse;
+  group?: V1Beta1RQLQueryGroupResponse;
+}
+
+export interface V1Beta1SearchInvoicesResponseInvoice {
+  id?: string;
+  /** @format int64 */
+  amount?: string;
+  currency?: string;
+  state?: string;
+  invoice_link?: string;
+  /** @format date-time */
+  created_at?: string;
+  org_id?: string;
+  org_name?: string;
+  org_title?: string;
+}
+
 export interface V1Beta1SearchOrganizationInvoicesResponse {
   organization_invoices?: SearchOrganizationInvoicesResponseOrganizationInvoice[];
   pagination?: V1Beta1RQLQueryPaginationResponse;
@@ -2979,6 +2999,29 @@ export class Api<
         ...params,
       }),
 
+    /**
+     * No description
+     *
+     * @tags invoice
+     * @name AdminServiceSearchInvoices
+     * @summary Search invoices across all organizations
+     * @request POST:/v1beta1/admin/invoices/search
+     * @secure
+     */
+    adminServiceSearchInvoices: (
+      query: V1Beta1RQLRequest,
+      params: RequestParams = {},
+    ) =>
+      this.request<V1Beta1SearchInvoicesResponse, GooglerpcStatus>({
+        path: `/v1beta1/admin/invoices/search`,
+        method: "POST",
+        body: query,
+        secure: true,
+        type: ContentType.Json,
+        format: "json",
+        ...params,
+      }),
+
     /**
      * @description Lists all the organizations in a Frontier instance. It can be filtered by user and state.
      *

ui/src/api/frontier.ts

@@ -4,9 +4,9 @@ export default function PlanDetails() {
   const { plan } = usePlan();
 
   return (
-    <Flex direction="column" gap="large">
+    <Flex direction="column" gap={9}>
       <Text size={4}>{plan?.name}</Text>
-      <Flex direction="column" gap="large">
+      <Flex direction="column" gap={9}>
         <Grid columns={2} gap="small">
           <Text size={1}>Name</Text>
           <Text size={1}>{plan?.name}</Text>