feat(Organization): Organization edit modal

frontend/src/features/entitlements/api/useAccountsApi.tsx

@@ -8,6 +8,7 @@ import { http } from "@mpt-extension/sdk";
 
 import { AccountRead } from "~api/ffc-api-model";
 import { ListResponse } from "~shared/utils/mapAxiosResponseDataList";
+import { getCustomQueryString } from "~shared/utils/rqlHelper";
 
 const rootPath = "/ops/v1/accounts";
 
@@ -20,7 +21,7 @@ export function useAccountsApi() {
     ) => {
       return http<ListResponse<AccountRead>>({
         method: "GET",
-        url: `${rootPath}${query ? `?${query.toString()}` : ""}`,
+        url: rootPath + getCustomQueryString<AccountRead>(query),
         ...config,
       });
     },

frontend/src/features/entitlements/api/useEntitlementsApi.tsx

@@ -8,6 +8,7 @@ import { http } from "@mpt-extension/sdk";
 
 import { EntitlementCreate } from "~api/ffc-api-model";
 import { ListResponse } from "~shared/utils/mapAxiosResponseDataList";
+import { getCustomQueryString } from "~shared/utils/rqlHelper";
 
 import { Entitlement } from "./model";
 
@@ -21,7 +22,7 @@ export function useEntitlementsApi() {
     ) => {
       return http<ListResponse<Entitlement>>({
         method: "GET",
-        url: `${rootPath}${query ? `?${query.toString()}` : ""}`,
+        url: rootPath + getCustomQueryString<Entitlement>(query),
         ...config,
       });
     },
@@ -31,7 +32,7 @@ export function useEntitlementsApi() {
   const get = useCallback(async (entityId: string, query?: RqlQuery<Entitlement>) => {
     return http<Entitlement>({
       method: "GET",
-      url: `${rootPath}/${entityId}${query ? `?${query.toString()}` : ""}`,
+      url: `${rootPath}/${entityId}` + getCustomQueryString<Entitlement>(query),
     });
   }, []);
 

frontend/src/features/entitlements/create-entitlement-wizard/hooks/useApiCall.tsx

@@ -15,14 +15,16 @@ export function useApiCall(columns: Column<Account>[]) {
   return useCallback(
     async (filter: string, page: number, limit: number) => {
       if (role === "affiliate") {
-        const currentAffiliate = {
-          ...user?.account,
-        } as Account;
-
-        return {
-          data: [currentAffiliate],
-          total: 1,
-        };
+        // If the user is an affiliate, we only want to return their own account, so we create a promise that resolves with their account data.
+        // This is temporary solution.
+        return new Promise<{ data: Account[]; total: number }>((resolve) => {
+          setTimeout(() => {
+            resolve({
+              data: [user?.account as Account],
+              total: 1,
+            });
+          }, 0);
+        });
       }
 
       const { eq } = getExpressionBuilder<Account>();

frontend/src/features/entitlements/list/EntitlementsGrid.config.tsx

@@ -186,7 +186,7 @@ export function useViews() {
           },
           sort: [
             { field: "events.created.at", direction: "desc" },
-            { field: "status", direction: "asc" },
+            { field: "status", direction: "desc" },
           ],
         },
       },

frontend/src/features/organizations/api/model.ts

@@ -1,5 +1,9 @@
-import { EmployeeRead } from "~api/ffc-api-model";
+import { EmployeeRead, OrganizationRead } from "~api/ffc-api-model";
 
 export type Employee = EmployeeRead;
 
 export type EmployeeActions = "make_admin" | "delete" | "re-invite";
+
+export type Organization = OrganizationRead;
+
+export type OrganizationAction = "edit" | "activate" | "terminate" | "delete";

frontend/src/features/organizations/api/useEmployeesApi.tsx

@@ -9,6 +9,7 @@ import { http } from "@mpt-extension/sdk";
 
 import { EmployeeRead } from "~api/ffc-api-model";
 import { AddUserForm } from "~organizations/details/users/modal/AddUserForm.Schema";
+import { getCustomQueryString } from "~shared/utils/rqlHelper";
 
 export interface ListResponse<T> {
   total: number;
@@ -27,7 +28,7 @@ export function useEmployeesApi() {
     ) => {
       return http({
         method: "GET",
-        url: `${rootPath}/${organizationId}/employees${query ? `?${query.toString()}` : ""}`,
+        url: `${rootPath}/${organizationId}/employees` + getCustomQueryString<EmployeeRead>(query),
         ...config,
       });
     },

frontend/src/features/organizations/api/useOrganizationsApi.tsx

@@ -8,6 +8,9 @@ import { Entity } from "@swo/service";
 import { http } from "@mpt-extension/sdk";
 
 import { DatasourceRead, EmployeeRead, OrganizationRead } from "~api/ffc-api-model";
+import { getCustomQueryString } from "~shared/utils/rqlHelper";
+
+import { EditOrganizationForm } from "../list/edit-organization-modal/EditOrganization.Schema";
 
 export interface ListResponse<T> {
   total: number;
@@ -25,7 +28,7 @@ export function useOrganizationsApi() {
     ) => {
       return http<ListResponse<Entity<OrganizationRead>>>({
         method: "GET",
-        url: `${rootPath}${query ? `?${query.toString()}` : ""}`,
+        url: rootPath + getCustomQueryString<Entity<OrganizationRead>>(query),
         ...config,
       });
     },
@@ -35,15 +38,23 @@ export function useOrganizationsApi() {
   const get = useCallback(async (entityId: string, query?: RqlQuery<OrganizationRead>) => {
     return http<OrganizationRead>({
       method: "GET",
-      url: `${rootPath}/${entityId}${query ? `?${query.toString()}` : ""}`,
+      url: `${rootPath}/${entityId}` + getCustomQueryString<OrganizationRead>(query),
+    });
+  }, []);
+
+  const editOrganization = useCallback(async (entityId: string, data: EditOrganizationForm) => {
+    return http<OrganizationRead>({
+      method: "PUT",
+      url: `${rootPath}/${entityId}`,
+      data: { name: data.name },
     });
   }, []);
 
   const listOrganizationEmployees = useCallback(
     async (organizationId: string, query?: RqlQuery<EmployeeRead>) => {
       return http({
         method: "GET",
-        url: `${rootPath}/${organizationId}/employees${query ? `?${query.toString()}` : ""}`,
+        url: `${rootPath}/${organizationId}/employees` + getCustomQueryString<EmployeeRead>(query),
       });
     },
     [],
@@ -52,14 +63,15 @@ export function useOrganizationsApi() {
     async (organizationId: string, query?: RqlQuery<DatasourceRead>) => {
       return http({
         method: "GET",
-        url: `${rootPath}/${organizationId}/datasources${query ? `?${query.toString()}` : ""}`,
+        url:
+          `${rootPath}/${organizationId}/datasources` + getCustomQueryString<DatasourceRead>(query),
       });
     },
     [],
   );
 
   return useMemo(
-    () => ({ list, get, listOrganizationEmployees, listOrganizationDataSources }),
-    [list, get, listOrganizationEmployees, listOrganizationDataSources],
+    () => ({ list, get, editOrganization, listOrganizationEmployees, listOrganizationDataSources }),
+    [list, get, editOrganization, listOrganizationEmployees, listOrganizationDataSources],
   );
 }

frontend/src/features/organizations/list/OrganizationsGrid.config.tsx

@@ -1,21 +1,37 @@
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 
-import { UseAsyncGridConfig, useGridAsync } from "@swo/design-system/grid";
+import { GridEvents, UseAsyncGridConfig, useGridAsync } from "@swo/design-system/grid";
 import { Entity } from "@swo/service";
 
 import { OrganizationRead } from "~api/ffc-api-model";
 
-import { useAsyncOptions } from "./useAsyncOptions";
-import { useColumns } from "./useColumns";
-import { useFields } from "./useFields";
-import { useViews } from "./useViews";
+import { Organization, OrganizationAction } from "../api/model";
+import { useAsyncOptions } from "./hooks/useAsyncOptions";
+import { useColumns } from "./hooks/useColumns";
+import { useFields } from "./hooks/useFields";
+import { useViews } from "./hooks/useViews";
 
-export function useGridConfig() {
+export function useGridConfig(
+  onAction?: (action: OrganizationAction, item: Organization, silentRefresh: () => void) => void,
+) {
   const columns = useColumns();
   const fields = useFields();
   const views = useViews();
   const asyncOptions = useAsyncOptions();
 
+  const onGridActionEvent = useCallback(
+    (event: GridEvents) => {
+      if (event.type === "RowActionTriggered") {
+        onAction?.(
+          event.data.action as OrganizationAction,
+          event.data.item as Organization,
+          asyncOptions.silentRefresh,
+        );
+      }
+    },
+    [asyncOptions.silentRefresh, onAction],
+  );
+
   const config = useMemo(
     () =>
       ({
@@ -26,10 +42,11 @@ export function useGridConfig() {
         isDefaultView: false,
         selectedView: "active",
         ...asyncOptions,
+        onEvent: onGridActionEvent,
       }) as UseAsyncGridConfig<Entity<OrganizationRead>>,
-    [columns, views, fields, asyncOptions],
+    [columns, views, fields, asyncOptions, onGridActionEvent],
   );
 
   const gridProps = useGridAsync(config);
-  return { silentRefresh: asyncOptions.silentRefresh, ...gridProps };
+  return { refresh: asyncOptions.refresh, silentRefresh: asyncOptions.silentRefresh, ...gridProps };
 }

frontend/src/features/organizations/list/OrganizationsGrid.tsx

@@ -3,17 +3,41 @@ import { Grid } from "@swo/design-system/grid";
 import { Entity } from "@swo/service";
 
 import { OrganizationRead } from "~api/ffc-api-model";
+import type { OrganizationAction } from "~features/organizations/api/model";
 import { useFixedT } from "~shared/hooks/useFixedT";
+import { useModalToggle } from "~shared/hooks/useModalToggle";
 
+import { EditOrganizationModal } from "./edit-organization-modal/EditOrganizationModal";
 import { useGridConfig } from "./OrganizationsGrid.config";
 
 export function OrganizationsGrid() {
   const tProperties = useFixedT("shared:grid:columns");
-  const { ...gridProps } = useGridConfig();
+  const { refresh, ...gridProps } = useGridConfig(onAction);
+  const editOrganizationModal = useModalToggle<OrganizationRead>({ onSuccess: refresh });
+
+  function onAction(action: OrganizationAction, item: OrganizationRead) {
+    switch (action) {
+      case "edit":
+        editOrganizationModal.open(item);
+        break;
+      case "terminate":
+        break;
+      default:
+        break;
+    }
+  }
 
   return (
-    <Card testId={"ffc-extension__organizations-grid"} title={tProperties("organizations")}>
-      <Grid<Entity<OrganizationRead>> {...gridProps} />
-    </Card>
+    <>
+      <Card testId={"ffc-extension__organizations-grid"} title={tProperties("organizations")}>
+        <Grid<Entity<OrganizationRead>> {...gridProps} />
+      </Card>
+      <EditOrganizationModal
+        className="edit-organization-modal"
+        organization={editOrganizationModal.data}
+        isOpen={editOrganizationModal.isOpen}
+        onClose={editOrganizationModal.close}
+      />
+    </>
   );
 }

frontend/src/features/organizations/list/edit-organization-modal/EditOrganization.Schema.tsx

@@ -0,0 +1,13 @@
+import { z } from "zod/v4";
+
+const FULL_NAME_MAX_LENGTH = 255;
+const OPERATIONS_EXTERNAL_ID_MAX_LENGTH = 255;
+const CURRENCY_MAX_LENGTH = 5;
+
+export const EditOrganizationFormSchema = z.object({
+  name: z.string().trim().min(1).max(FULL_NAME_MAX_LENGTH),
+  operations_external_id: z.string().trim().min(1).max(OPERATIONS_EXTERNAL_ID_MAX_LENGTH),
+  currency: z.string().trim().min(1).max(CURRENCY_MAX_LENGTH),
+});
+
+export type EditOrganizationForm = z.output<typeof EditOrganizationFormSchema>;

frontend/src/features/organizations/list/edit-organization-modal/EditOrganizationFormFields.tsx

@@ -0,0 +1,62 @@
+import { Control } from "react-hook-form";
+
+import { InlineNotification } from "@swo/design-system/notification";
+
+import { ControlledInput } from "~shared/components/form/ControlledInput";
+import { useFixedT } from "~shared/hooks/useFixedT";
+
+import { EditOrganizationForm } from "./EditOrganization.Schema";
+
+type Props = {
+  control: Control<EditOrganizationForm>;
+  error: string | null;
+};
+
+export const EditOrganizationFormFields = ({ control, error }: Props) => {
+  const tProperties = useFixedT("shared:properties");
+  const tPlaceholders = useFixedT("shared:placeholders");
+
+  return (
+    <div className="modal__content modal__container">
+      {error && (
+        <div className="modal__error">
+          <InlineNotification status="error" isToShowCloseButton={false} width="auto">
+            {error}
+          </InlineNotification>
+        </div>
+      )}
+      <ControlledInput
+        className="modal__input"
+        control={control}
+        name="name"
+        type="default"
+        isPreventAutocomplete={true}
+        label={tProperties("name")}
+        labelType="required"
+        placeholder={tPlaceholders("name")}
+      />
+      <ControlledInput
+        className="modal__input"
+        control={control}
+        name="operations_external_id"
+        type="default"
+        isPreventAutocomplete={true}
+        label={tProperties("operations_external_id")}
+        labelType="required"
+        isDisabled={true}
+        placeholder={tPlaceholders("operations_external_id")}
+      />
+      <ControlledInput
+        className="modal__input"
+        control={control}
+        name="currency"
+        type="default"
+        isPreventAutocomplete={true}
+        label={tProperties("currency")}
+        labelType="required"
+        isDisabled={true}
+        placeholder={tPlaceholders("currency")}
+      />
+    </div>
+  );
+};

frontend/src/features/organizations/list/edit-organization-modal/EditOrganizationModal.scss

@@ -0,0 +1,13 @@
+@use "@swo/design-tokens" as *;
+
+p {
+  margin: 0 0 var(--spacing-3);
+}
+
+.modal__error {
+  margin-bottom: var(--spacing-3);
+}
+
+.modal__input:not(:last-child) {
+  margin-bottom: var(--spacing-3);
+}