feat(ui): organization dashboard (#1286)

Author: steveninhle

.github/workflows/push-image.yaml

@@ -38,6 +38,8 @@ env:
   GAR_REGISTRY: asia-docker.pkg.dev
   GO_VERSION: 1.21.10
   GO_BUILD_CONCURRENCY: 4 # Set the same number of apps to build.
+  NODE_VERSION: "22.1"
+
 
 jobs:
   setup:
@@ -81,6 +83,9 @@ jobs:
       - uses: actions/setup-go@v5
         with:
           go-version: ${{ env.GO_VERSION }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
       - name: Install go dependencies
         run: make vendor
       - name: Build web and go applications

ui/dashboard/package.json

@@ -21,16 +21,23 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
+    "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-scroll-area": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.1.2",
     "@tailwindcss/forms": "^0.5.7",
+    "@tanstack/react-query": "^5.55.4",
+    "@tanstack/react-query-devtools": "^5.56.2",
+    "@tanstack/react-table": "^8.20.5",
     "@testing-library/jest-dom": "^6.4.8",
     "@types/js-cookie": "^3.0.6",
     "axios": "^1.7.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "date-fns": "^3.6.0",
     "i18next": "^23.14.0",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-http-backend": "^2.6.1",
@@ -41,11 +48,13 @@
     "query-string": "^9.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-error-boundary": "^4.0.13",
     "react-hook-form": "^7.52.2",
     "react-i18next": "^15.0.1",
     "react-icons-material-design": "^1.0.4",
     "react-router-dom": "^6.26.0",
     "tailwind-merge": "^2.4.0",
+    "timeago.js": "^4.0.2",
     "web-vitals": "^4.2.3",
     "yup": "^1.4.0"
   },
@@ -75,6 +84,7 @@
     "lint-staged": "^15.2.8",
     "postcss": "^8.4.41",
     "prettier-plugin-tailwindcss": "^0.6.5",
+    "react-hot-toast": "^2.4.1",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.9",
     "typescript": "^5.5.3",

ui/dashboard/public/locales/en/common.json

@@ -1,6 +1,9 @@
 {
+  "active": "Active",
+  "archived": "Archived",
   "continue": "Continue",
   "projects": "Projects",
+  "environment": "Environment",
   "environments": "Environments",
   "organizations": "Organizations",
   "members": "Members",
@@ -13,6 +16,29 @@
   "settings": "Settings",
   "integrations": "Integrations",
   "access": "Access",
+  "documentation": "Documentation",
+  "save": "Save",
+  "cancel": "Cancel",
+  "delete": "Delete",
+  "filter": "Filter",
+  "filters": "Filters",
+  "add-filter": "Add Filter",
+  "maintainer": "Maintainer",
+  "name": "Name",
+  "email": "Email",
+  "role": "Role",
+  "users": "Users",
+  "new-project": "New Project",
+  "update-project": "Update Project",
+  "create-project": "Create Project",
+  "new-org": "New Organization",
+  "update-org": "Update Organization",
+  "create-org": "Create Organization",
+  "new-env": "New Environment",
+  "update-env": "Update Environment",
+  "create-env": "Create Environment",
+  "organization-subtitle": "You can see all your clients data",
+  "setting-subtitle": "Manage settings about the current organization",
   "navigation": {
     "my-projects": "My projects",
     "audit-logs": "Audit logs",

ui/dashboard/public/locales/en/form.json

@@ -0,0 +1,26 @@
+{
+  "general-info": "General Information",
+  "placeholder-name": "Enter name",
+  "placeholder-desc": "Enter description",
+  "placeholder-code": "Enter url code",
+  "placeholder-email": "Enter email",
+  "placeholder-role": "Select role",
+  "placeholder-url": "Enter URL",
+  "placeholder-prj-id": "Enter project id",
+  "placeholder-search-type": "Search notification type",
+  "placeholder-firebase": "Enter firebase cloud messaging API key",
+  "placeholder-tags": "Select",
+  "placeholder-search-input": "Search Input",
+  "url-code": "URL Code",
+  "owner-email": "Owner's email",
+  "project-id": "Project ID",
+  "description": "Description",
+  "optional": "Optional",
+  "require-comments-flag": "Require comments for flag changes",
+  "invite-member": "Invite Member",
+  "user-details": "User Details",
+  "add-to-env": "Add to Environment",
+  "env-access": "Environment Access",
+  "env-settings": "Environment Settings",
+  "trial": "Trial"
+}

ui/dashboard/public/locales/en/table.json

@@ -0,0 +1,26 @@
+{
+  "flags": "Flags",
+  "created-at": "Created At",
+  "popover": {
+    "edit-project": "Edit Project",
+    "archive-project": "Archive Project",
+    "edit-env": "Edit Environment",
+    "archive-env": "Archive Environment",
+    "edit-org": "Edit Organization",
+    "archive-org": "Archive Organization",
+    "unarchive-org": "UnArchive Organization",
+    "edit-user": "Edit User",
+    "archive-user": "Archive User"
+  },
+  "empty": {
+    "project-title": "No registered projects",
+    "project-desc": "There are no registered projects. Add a new one to start managing.",
+    "project-org-desc": "There are no registered projects for this organization.",
+    "org-title": "No registered organizations",
+    "org-desc": "There are no registered organizations. Add a new one to start managing.",
+    "env-title": "No registered environments",
+    "env-desc": "There are no registered environments for this organization.",
+    "user-title": "No registered users",
+    "user-desc": "There are no registered users for this organization."
+  }
+}

ui/dashboard/public/locales/ja/common.json

@@ -1,6 +1,9 @@
 {
+  "active": "Active",
+  "archived": "Archived",
   "continue": "Continue",
   "projects": "Projects",
+  "environment": "Environment",
   "environments": "Environments",
   "organizations": "Organizations",
   "members": "Members",
@@ -13,6 +16,29 @@
   "settings": "Settings",
   "integrations": "Integrations",
   "access": "Access",
+  "documentation": "Documentation",
+  "save": "Save",
+  "cancel": "Cancel",
+  "delete": "Delete",
+  "filter": "Filter",
+  "filters": "Filters",
+  "add-filter": "Add Filter",
+  "maintainer": "Maintainer",
+  "name": "Name",
+  "email": "Email",
+  "role": "Role",
+  "users": "Users",
+  "new-project": "New Project",
+  "update-project": "Update Project",
+  "create-project": "Create Project",
+  "new-org": "New Organization",
+  "update-org": "Update Organization",
+  "create-org": "Create Organization",
+  "new-env": "New Environment",
+  "update-env": "Update Environment",
+  "create-env": "Create Environment",
+  "organization-subtitle": "You can see all your clients data",
+  "setting-subtitle": "Manage settings about the current organization",
   "navigation": {
     "my-projects": "My projects",
     "audit-logs": "Audit logs",

ui/dashboard/public/locales/ja/form.json

@@ -0,0 +1,26 @@
+{
+  "general-info": "General Information",
+  "placeholder-name": "Enter name",
+  "placeholder-desc": "Enter description",
+  "placeholder-code": "Enter url code",
+  "placeholder-email": "Enter email",
+  "placeholder-role": "Select role",
+  "placeholder-url": "Enter URL",
+  "placeholder-prj-id": "Enter project id",
+  "placeholder-search-type": "Search notification type",
+  "placeholder-firebase": "Enter firebase cloud messaging API key",
+  "placeholder-tags": "Select",
+  "placeholder-search-input": "Search Input",
+  "url-code": "URL Code",
+  "owner-email": "Owner's email",
+  "project-id": "Project ID",
+  "description": "Description",
+  "optional": "Optional",
+  "require-comments-flag": "Require comments for flag changes",
+  "invite-member": "Invite Member",
+  "user-details": "User Details",
+  "add-to-env": "Add to Environment",
+  "env-access": "Environment Access",
+  "env-settings": "Environment Settings",
+  "trial": "Trial"
+}

ui/dashboard/public/locales/ja/table.json

@@ -0,0 +1,26 @@
+{
+  "flags": "Flags",
+  "created-at": "Created At",
+  "popover": {
+    "edit-project": "Edit Project",
+    "archive-project": "Archive Project",
+    "edit-env": "Edit Environment",
+    "archive-env": "Archive Environment",
+    "edit-org": "Edit Organization",
+    "archive-org": "Archive Organization",
+    "unarchive-org": "UnArchive Organization",
+    "edit-user": "Edit User",
+    "archive-user": "Archive User"
+  },
+  "empty": {
+    "project-title": "No registered projects",
+    "project-desc": "There are no registered projects. Add a new one to start managing.",
+    "project-org-desc": "There are no registered projects for this organization.",
+    "org-title": "No registered organizations",
+    "org-desc": "There are no registered organizations. Add a new one to start managing.",
+    "env-title": "No registered environments",
+    "env-desc": "There are no registered environments for this organization.",
+    "user-title": "No registered users",
+    "user-desc": "There are no registered users for this organization."
+  }
+}

ui/dashboard/src/@api/account/accounts-fetcher.ts

@@ -0,0 +1,22 @@
+import axiosClient from '@api/axios-client';
+import pickBy from 'lodash/pickBy';
+import { AccountCollection, CollectionParams } from '@types';
+import { isNotEmpty } from 'utils/data-type';
+
+export interface AccountsFetcherParams extends CollectionParams {
+  organizationId?: string;
+  organizationRole?: number;
+  environmentId?: string;
+  environmentRole?: number;
+}
+
+export const accountsFetcher = async (
+  params?: AccountsFetcherParams
+): Promise<AccountCollection> => {
+  return axiosClient
+    .post<AccountCollection>(
+      '/v1/account/list_accounts',
+      pickBy(params, v => isNotEmpty(v))
+    )
+    .then(response => response.data);
+};

ui/dashboard/src/@api/account/index.ts

@@ -1,2 +1,3 @@
 export * from './account-organizations-fetcher';
 export * from './account-me-fetcher';
+export * from './accounts-fetcher';