feat(admin-ui): add org details layout with sidepanel (#897)

* feat: add org details page base layout

* feat: add nav chips, actions and icon

* feat: fetch org details

* feat: show kyc details in side panel

* chore: move usehooks-ts to dependency

* chore: update apsara

* chore: remove table wrapper

* chore: move sidepabel to the seperate folder

* feat: add sidepanel toggle

* feat: add copy button component

* chore: update apsara to v0.37.0

* chore: use new copy button

* refactor: use apsara icons for org and sidebar

* chore: remove extra icons

* chore: show fields in org details

* chore: show app url from config

* fix: org list page link

* feat: add kyc details section

* feat: add plan details section

* feat: add token details section layout

* chore: fetch billing account for org

* chore: update api-client

* feat: show token balance

* chore: update api client

* chore: fix height and width of icon

* refactor: rename showLoader to isDataLoading

* feat: show used token

* feat: add billing details section

* feat: add upcoming invoice data to billing section

* feat: add page title

* fix: style of main content

* chore: rename appUrl to app_url

* feat: add app url to yaml config

* chore: remove height and width from icon

Author: rsbh

pkg/server/config.go

@@ -26,9 +26,10 @@ type GRPCConfig struct {
 func (cfg Config) grpcAddr() string { return fmt.Sprintf("%s:%d", cfg.Host, cfg.GRPC.Port) }
 
 type UIConfig struct {
-	Port  int    `yaml:"port" mapstructure:"port"`
-	Title string `yaml:"title" mapstructure:"title"`
-	Logo  string `yaml:"logo" mapstructure:"logo"`
+	Port   int    `yaml:"port" mapstructure:"port"`
+	Title  string `yaml:"title" mapstructure:"title"`
+	Logo   string `yaml:"logo" mapstructure:"logo"`
+	AppURL string `yaml:"app_url" mapstructure:"app_url"`
 }
 
 type Config struct {

pkg/server/server.go

@@ -58,8 +58,9 @@ const (
 )
 
 type UIConfigApiResponse struct {
-	Title string `json:"title"`
-	Logo  string `json:"logo"`
+	Title  string `json:"title"`
+	Logo   string `json:"logo"`
+	AppUrl string `json:"app_url"`
 }
 
 func ServeUI(ctx context.Context, logger log.Logger, uiConfig UIConfig, apiServerConfig Config) {
@@ -93,8 +94,9 @@ func ServeUI(ctx context.Context, logger log.Logger, uiConfig UIConfig, apiServe
 		http.HandleFunc("/configs", func(w http.ResponseWriter, r *http.Request) {
 			w.Header().Set("Content-Type", "application/json")
 			confResp := UIConfigApiResponse{
-				Title: uiConfig.Title,
-				Logo:  uiConfig.Logo,
+				Title:  uiConfig.Title,
+				Logo:   uiConfig.Logo,
+				AppUrl: uiConfig.AppURL,
 			}
 			json.NewEncoder(w).Encode(confResp)
 		})

ui/package-lock.json

@@ -14,7 +14,7 @@
     "@hookform/resolvers": "^3.0.1",
     "@radix-ui/react-form": "^0.0.2",
     "@radix-ui/react-icons": "^1.3.0",
-    "@raystack/apsara": "^0.34.2",
+    "@raystack/apsara": "^0.37.0",
     "@raystack/frontier": "^0.49.0",
     "@stitches/react": "^1.2.8",
     "@tanstack/react-table": "^8.9.3",
@@ -31,6 +31,7 @@
     "slugify": "^1.6.6",
     "sonner": "^1.4.41",
     "swr": "^2.1.2",
+    "usehooks-ts": "^3.1.1",
     "vite-tsconfig-paths": "^4.0.7",
     "zod": "^3.22.3"
   },
@@ -43,7 +44,6 @@
     "eslint": "^8.56.0",
     "swagger-typescript-api": "^13.0.23",
     "typescript": "^5.8.2",
-    "usehooks-ts": "^3.1.1",
     "vite": "^4.5.9",
     "vite-plugin-svgr": "^4.3.0"
   }

ui/package.json

@@ -189,7 +189,7 @@ export interface GooglerpcStatus {
  *       foo = any.unpack(Foo.getDefaultInstance());
  *     }
  *
- * Example 3: Pack and unpack a message in Python.
+ *  Example 3: Pack and unpack a message in Python.
  *
  *     foo = Foo(...)
  *     any = Any()
@@ -199,7 +199,7 @@ export interface GooglerpcStatus {
  *       any.Unpack(foo)
  *       ...
  *
- * Example 4: Pack and unpack a message in Go
+ *  Example 4: Pack and unpack a message in Go
  *
  *      foo := &pb.Foo{...}
  *      any, err := anypb.New(foo)
@@ -219,7 +219,7 @@ export interface GooglerpcStatus {
  * name "y.z".
  *
  * JSON
- *
+ * ====
  * The JSON representation of an `Any` value uses the regular
  * representation of the deserialized, embedded message, with an
  * additional field `@type` which contains the type URL. Example:
@@ -271,7 +271,8 @@ export interface ProtobufAny {
    *
    * Note: this functionality is not currently available in the official
    * protobuf release, and it is not used for type URLs beginning with
-   * type.googleapis.com.
+   * type.googleapis.com. As of May 2023, there are no widely used type server
+   * implementations and no plans to implement one.
    *
    * Schemes other than `http`, `https` (or the empty scheme) might be
    * used with implementation specific semantics.
@@ -284,7 +285,7 @@ export interface ProtobufAny {
  * `NullValue` is a singleton enumeration to represent the null value for the
  * `Value` type union.
  *
- *  The JSON representation for `NullValue` is JSON `null`.
+ * The JSON representation for `NullValue` is JSON `null`.
  *
  *  - NULL_VALUE: Null value.
  * @default "NULL_VALUE"
@@ -1440,6 +1441,8 @@ export interface V1Beta1ListProjectsResponse {
 
 export interface V1Beta1ListProspectsResponse {
   prospects?: V1Beta1Prospect[];
+  pagination?: V1Beta1RQLQueryPaginationResponse;
+  group?: V1Beta1RQLQueryGroupResponse;
 }
 
 export interface V1Beta1ListRelationsResponse {
@@ -2217,6 +2220,11 @@ export interface V1Beta1Subscription {
   plan?: V1Beta1Plan;
 }
 
+export interface V1Beta1TotalDebitedTransactionsResponse {
+  /** Total debited amount in the billing account */
+  debited?: BillingAccountBalance;
+}
+
 export type V1Beta1UpdateBillingAccountLimitsResponse = object;
 
 export interface V1Beta1UpdateBillingAccountResponse {
@@ -4607,6 +4615,24 @@ export class Api<SecurityDataType extends unknown> extends HttpClient<SecurityDa
         ...params,
       }),
 
+    /**
+     * @description Sum of amount of debited transactions including refunds
+     *
+     * @tags Transaction
+     * @name FrontierServiceTotalDebitedTransactions
+     * @summary Sum of amount of debited transactions including refunds
+     * @request GET:/v1beta1/organizations/{org_id}/billing/{billing_id}/debited_transactions_total
+     * @secure
+     */
+    frontierServiceTotalDebitedTransactions: (orgId: string, billingId: string, params: RequestParams = {}) =>
+      this.request<V1Beta1TotalDebitedTransactionsResponse, GooglerpcStatus>({
+        path: `/v1beta1/organizations/${orgId}/billing/${billingId}/debited_transactions_total`,
+        method: "GET",
+        secure: true,
+        format: "json",
+        ...params,
+      }),
+
     /**
      * @description List all invoices of a billing account.
      *

ui/src/api/frontier.ts

@@ -9,9 +9,8 @@ import {
 import { api } from "~/api";
 
 import styles from "./sidebar.module.css";
-
+import { OrganizationIcon } from "@raystack/apsara/icons";
 import IAMIcon from "~/assets/icons/iam.svg?react";
-import OrganizationsIcon from "~/assets/icons/organization.svg?react";
 import UserIcon from "~/assets/icons/users.svg?react";
 import InvoicesIcon from "~/assets/icons/invoices.svg?react";
 import RolesIcon from "~/assets/icons/roles.svg?react";
@@ -37,7 +36,7 @@ const navigationItems: NavigationItemsTypes[] = [
   {
     name: "Organizations",
     to: `/organisations`,
-    icon: <OrganizationsIcon />,
+    icon: <OrganizationIcon />,
   },
   {
     name: "Users",

ui/src/assets/icons/coin-colored.svg

@@ -2,7 +2,11 @@ import { Flex, Spinner } from "@raystack/apsara/v1";
 
 export default function LoadingState() {
   return (
-    <Flex style={{ height: "100vh" }} justify={"center"} align={"center"}>
+    <Flex
+      style={{ height: "100vh", width: "100%" }}
+      justify={"center"}
+      align={"center"}
+    >
       <Spinner size={6} />
     </Flex>
   );