Simplify editable cell signature

Signed-off-by: Jonathan <contact@grafikart.fr>
2025-11-14 19:22:46 +01:00
parent cb5daab175
commit 789775f2fe
21 changed files with 762 additions and 451 deletions
--- a/apps/console/src/components/table/EditableTable.tsx
+++ b/apps/console/src/components/table/EditableTable.tsx
@@ -9,6 +9,7 @@ import {
  Button,
  Cell,
  CellHead,
+  EditableRow,
  IconCheckmark1,
  Row,
  RowButton,
@@ -19,8 +20,8 @@ import { useMutateField } from "/hooks/useMutateField.tsx";
 import { type ReactNode } from "react";
 import { useToggle } from "@probo/hooks";
 import { useStateWithSchema } from "/hooks/useStateWithSchema.ts";
-import { useMutation } from "react-relay";
 import clsx from "clsx";
+import { useMutationWithToasts } from "/hooks/useMutationWithToasts.ts";

 type ColumnDefinition = { label: string; field: string } | string;

@@ -65,7 +66,7 @@ export function EditableTable<

  return (
    <SortableDataTable
-      columns={[...props.columns.map(() => "1fr"), "56px"]}
+      columns={[...props.columns.map(() => "minmax(min-content, 1fr)"), "56px"]}
      refetch={props.pagination.refetch}
      hasNext={props.pagination.hasNext}
      isLoadingNext={props.pagination.isLoadingNext}
@@ -78,14 +79,14 @@ export function EditableTable<
        <CellHead />
      </Row>
      {props.items.map((item) => (
-        <Row key={item.id}>
+        <EditableRow onUpdate={(k, v) => update(item.id, k, v)} key={item.id}>
          {props.row({
            item,
            onUpdate: (key, value) => update(item.id, key as string, value),
            errors: {},
          })}
          <Cell>{props.action({ item })}</Cell>
-        </Row>
+        </EditableRow>
      ))}
      {showAdd ? (
        <NewItemRow
@@ -94,6 +95,7 @@ export function EditableTable<
          connectionId={props.connectionId}
          row={props.row}
          mutation={props.createMutation}
+          onSuccess={toggleAdd}
        />
      ) : (
        <RowButton onClick={toggleAdd}>{props.addLabel}</RowButton>
@@ -107,13 +109,14 @@ function NewItemRow<S extends z.ZodSchema>(props: {
  defaultValue: z.infer<S>;
  connectionId: string;
  mutation: GraphQLTaggedNode;
+  onSuccess: () => void;
  row: (props: EditableTableRowProps<any, S>) => ReactNode;
 }) {
  const { update, errors, value } = useStateWithSchema(
    props.schema,
    props.defaultValue,
  );
-  const [mutate, isMutating] = useMutation(props.mutation);
+  const [mutate, isMutating] = useMutationWithToasts(props.mutation);
  const isOk = Object.keys(errors ?? {}).length === 0;

  const onSubmit = async () => {
@@ -122,15 +125,16 @@ function NewItemRow<S extends z.ZodSchema>(props: {
      alert("Please fix the errors before submitting.");
      return;
    }
-    mutate({
+    await mutate({
      variables: {
        input: value,
        connections: [props.connectionId],
      },
+      onSuccess: props.onSuccess,
    });
  };
  return (
-    <Row>
+    <EditableRow onUpdate={update} errors={errors}>
      {props.row({ errors, onUpdate: update })}
      <Cell>
        <Button
@@ -142,7 +146,7 @@ function NewItemRow<S extends z.ZodSchema>(props: {
          {isMutating ? <Spinner size={16} /> : <IconCheckmark1 size={16} />}
        </Button>
      </Cell>
-    </Row>
+    </EditableRow>
  );
 }

--- a/apps/console/src/components/table/GraphQLCell.tsx
+++ b/apps/console/src/components/table/GraphQLCell.tsx
@@ -0,0 +1,137 @@
+import { type ReactNode, Suspense } from "react";
+import { useEditableCellRef } from "@probo/ui/src/Molecules/Table/EditableCell.tsx";
+import { getKey } from "@probo/ui/src/Molecules/Table/utils.ts";
+import { useStateWithRef } from "@probo/hooks";
+import { useEditableRowContext } from "@probo/ui/src/Molecules/Table/EditableRow.tsx";
+import { EditableCell, selectCell, SelectValue, Spinner } from "@probo/ui";
+import { Command } from "cmdk";
+import type {
+  GraphQLTaggedNode,
+  OperationType,
+  VariablesOf,
+} from "relay-runtime";
+import { useLazyLoadQuery } from "react-relay";
+import { useTranslate } from "@probo/i18n";
+
+type Props<Q extends OperationType, T> = {
+  name: string;
+  query: GraphQLTaggedNode;
+  variables: VariablesOf<Q>;
+  items: (v: ReturnType<typeof useLazyLoadQuery<Q>>) => T[];
+  itemRenderer: (v: { item: T; onRemove?: (item: T) => void }) => ReactNode;
+} & (
+  | { defaultValue?: T; multiple?: undefined }
+  | { defaultValue: T[]; multiple: true }
+);
+
+export function GraphQLCell<Q extends OperationType, T>(props: Props<Q, T>) {
+  const [value, setValue, valueRef] = useStateWithRef<T | T[] | undefined>(
+    props.defaultValue,
+  );
+  const cellRef = useEditableCellRef();
+  const { __ } = useTranslate();
+  const usedKeys = new Set<string>(
+    Array.isArray(value) ? value.map(getKey) : [getKey(value)],
+  );
+  const { onUpdate } = useEditableRowContext();
+
+  const onSelect = (item: T) => {
+    if (props.multiple) {
+      setValue([...((valueRef.current as T[]) ?? []), item]);
+      return;
+    }
+    setValue(item);
+    cellRef.current?.close();
+  };
+
+  const onClose = () => {
+    if (valueRef.current === props.defaultValue) {
+      return;
+    }
+    // Only send ids when updating the value
+    onUpdate(
+      props.name,
+      Array.isArray(valueRef.current)
+        ? valueRef.current.map(getKey)
+        : getKey(valueRef.current),
+    );
+  };
+
+  const classNames = selectCell();
+
+  return (
+    <EditableCell
+      name={props.name}
+      label={<SelectValue value={value} itemRenderer={props.itemRenderer} />}
+      onClose={onClose}
+      ref={cellRef}
+    >
+      <Command className={classNames.command()}>
+        <div
+          className={classNames.value()}
+          style={{
+            paddingLeft: "var(--padding)",
+            minHeight: "var(--height)",
+          }}
+        >
+          {" "}
+          <SelectValue
+            onValueChange={setValue}
+            value={value}
+            itemRenderer={props.itemRenderer}
+          />
+        </div>{" "}
+        {props.multiple && (
+          <Command.Input
+            className={classNames.input()}
+            placeholder={__("Search")}
+          />
+        )}
+        <Command.List>
+          <Suspense
+            fallback={
+              <div className="py-2 px-3 flex items-center justify-center">
+                <Spinner />
+              </div>
+            }
+          >
+            <ItemList
+              {...props}
+              usedKeys={usedKeys}
+              className={classNames.item()}
+              onSelect={onSelect}
+            />
+          </Suspense>
+        </Command.List>
+      </Command>
+    </EditableCell>
+  );
+}
+
+function ItemList<Q extends OperationType, T>(
+  props: Props<Q, T> & {
+    className: string;
+    onSelect: (item: T) => void;
+    usedKeys: Set<string>;
+  },
+) {
+  const data = useLazyLoadQuery<Q>(props.query, props.variables, {
+    fetchPolicy: "network-only",
+  });
+  const items = props.items(data);
+  return (
+    <>
+      {items
+        .filter((item) => !props.usedKeys.has(getKey(item)))
+        .map((item) => (
+          <Command.Item
+            key={getKey(item)}
+            className={props.className}
+            onSelect={() => props.onSelect(item)}
+          >
+            {props.itemRenderer({ item })}
+          </Command.Item>
+        ))}
+    </>
+  );
+}
--- a/apps/console/src/components/table/PeopleCell.tsx
+++ b/apps/console/src/components/table/PeopleCell.tsx
@@ -0,0 +1,33 @@
+import { GraphQLCell } from "/components/table/GraphQLCell.tsx";
+import type { PeopleGraphQuery } from "/hooks/graph/__generated__/PeopleGraphQuery.graphql.ts";
+import { peopleQuery } from "/hooks/graph/PeopleGraph.ts";
+import { Avatar } from "@probo/ui";
+
+type Props = {
+  name: string;
+  defaultValue?: { fullName: string; id: string };
+  organizationId: string;
+};
+
+export function PeopleCell(props: Props) {
+  return (
+    <GraphQLCell<PeopleGraphQuery, { fullName: string }>
+      name={props.name}
+      query={peopleQuery}
+      variables={{
+        organizationId: props.organizationId,
+        filter: { excludeContractEnded: true },
+      }}
+      items={(data) =>
+        data.organization?.peoples?.edges.map((edge) => edge.node) ?? []
+      }
+      itemRenderer={({ item }) => (
+        <div className="flex gap-2 whitespace-nowrap items-center text-xs">
+          <Avatar name={item.fullName} />
+          {item.fullName}
+        </div>
+      )}
+      defaultValue={props.defaultValue}
+    />
+  );
+}
--- a/apps/console/src/components/table/VendorsCell.tsx
+++ b/apps/console/src/components/table/VendorsCell.tsx
@@ -0,0 +1,63 @@
+import { GraphQLCell } from "/components/table/GraphQLCell.tsx";
+import { vendorsSelectQuery } from "/hooks/graph/VendorGraph";
+import { Avatar, Badge, IconCrossLargeX } from "@probo/ui";
+import { faviconUrl } from "@probo/helpers";
+type Vendor = {
+  id: string;
+  name: string;
+  websiteUrl: string | null | undefined;
+};
+import type { VendorGraphSelectQuery } from "/hooks/graph/__generated__/VendorGraphSelectQuery.graphql.ts";
+
+type Props = {
+  name: string;
+  defaultValue?: Vendor[];
+  organizationId: string;
+};
+
+const empty = [] as Vendor[];
+
+export function VendorsCell(props: Props) {
+  return (
+    <GraphQLCell<VendorGraphSelectQuery, Vendor>
+      multiple
+      name={props.name}
+      query={vendorsSelectQuery}
+      variables={{
+        organizationId: props.organizationId,
+      }}
+      items={(data) =>
+        data.organization?.vendors?.edges.map((edge) => edge.node) ?? []
+      }
+      itemRenderer={({ item, onRemove }) => (
+        <VendorBadge vendor={item} onRemove={onRemove} />
+      )}
+      defaultValue={props.defaultValue ?? empty}
+    />
+  );
+}
+
+function VendorBadge({
+  vendor,
+  onRemove,
+}: {
+  vendor: Vendor;
+  onRemove?: (v: Vendor) => void;
+}) {
+  return (
+    <Badge variant="neutral" className="flex items-center gap-1">
+      <Avatar name={vendor.name} src={faviconUrl(vendor.websiteUrl)} size="s" />
+      <span className="max-w-[100px] text-ellipsis overflow-hidden min-w-0 block">
+        {vendor.name}
+      </span>
+      {onRemove && (
+        <button
+          onClick={() => onRemove(vendor)}
+          className="size-4 hover:text-txt-primary cursor-pointer"
+        >
+          <IconCrossLargeX size={14} />
+        </button>
+      )}
+    </Badge>
+  );
+}
--- a/apps/console/src/hooks/graph/AssetGraph.ts
+++ b/apps/console/src/hooks/graph/AssetGraph.ts
@@ -52,7 +52,7 @@ export const createAssetMutation = graphql`
    $connections: [ID!]!
  ) {
    createAsset(input: $input) {
-      assetEdge @prependEdge(connections: $connections) {
+      assetEdge @appendEdge(connections: $connections) {
        node {
          id
          snapshotId
--- a/apps/console/src/hooks/graph/PeopleGraph.ts
+++ b/apps/console/src/hooks/graph/PeopleGraph.ts
@@ -12,14 +12,23 @@ import type { PeopleGraphPaginatedQuery } from "./__generated__/PeopleGraphPagin
 import type { PeopleGraphPaginatedFragment$key } from "./__generated__/PeopleGraphPaginatedFragment.graphql";
 import { useConfirm, useToast } from "@probo/ui";
 import type { PeopleGraphDeleteMutation } from "./__generated__/PeopleGraphDeleteMutation.graphql";
-import { promisifyMutation, sprintf, formatError, type GraphQLError } from "@probo/helpers";
+import {
+  promisifyMutation,
+  sprintf,
+  formatError,
+  type GraphQLError,
+} from "@probo/helpers";
 import { useTranslate } from "@probo/i18n";

-const peopleQuery = graphql`
+export const peopleQuery = graphql`
  query PeopleGraphQuery($organizationId: ID!, $filter: PeopleFilter) {
    organization: node(id: $organizationId) {
      ... on Organization {
-        peoples(first: 1000, orderBy: { direction: ASC, field: FULL_NAME }, filter: $filter) {
+        peoples(
+          first: 1000
+          orderBy: { direction: ASC, field: FULL_NAME }
+          filter: $filter
+        ) {
          edges {
            node {
              id
@@ -36,14 +45,17 @@ const peopleQuery = graphql`
 /**
 * Return a list of people (used for people selectors)
 */
-export function usePeople(organizationId: string, { excludeContractEnded }: { excludeContractEnded?: boolean } = {}) {
+export function usePeople(
+  organizationId: string,
+  { excludeContractEnded }: { excludeContractEnded?: boolean } = {},
+) {
  const data = useLazyLoadQuery<PeopleGraphQuery>(
    peopleQuery,
    {
      organizationId: organizationId,
      filter: excludeContractEnded ? { excludeContractEnded: true } : null,
    },
-    { fetchPolicy: "network-only" }
+    { fetchPolicy: "network-only" },
  );
  return useMemo(() => {
    return data.organization?.peoples?.edges.map((edge) => edge.node) ?? [];
@@ -66,7 +78,10 @@ export const paginatedPeopleFragment = graphql`
  @refetchable(queryName: "PeopleListQuery")
  @argumentDefinitions(
    first: { type: "Int", defaultValue: 50 }
-    order: { type: "PeopleOrder", defaultValue: { direction: ASC, field: FULL_NAME } }
+    order: {
+      type: "PeopleOrder"
+      defaultValue: { direction: ASC, field: FULL_NAME }
+    }
    filter: { type: "PeopleFilter", defaultValue: null }
    after: { type: "CursorKey", defaultValue: null }
    before: { type: "CursorKey", defaultValue: null }
@@ -98,12 +113,12 @@ export const paginatedPeopleFragment = graphql`
 `;

 export function usePeopleQuery(
-  queryRef: PreloadedQuery<PeopleGraphPaginatedQuery>
+  queryRef: PreloadedQuery<PeopleGraphPaginatedQuery>,
 ) {
  const data = usePreloadedQuery(paginatedPeopleQuery, queryRef);
  const pagination = usePaginationFragment(
    paginatedPeopleFragment,
-    data.organization as PeopleGraphPaginatedFragment$key
+    data.organization as PeopleGraphPaginatedFragment$key,
  );
  const people = pagination.data.peoples?.edges.map((edge) => edge.node);
  return {
@@ -128,7 +143,7 @@ export const PeopleConnectionKey = "PeopleGraphPaginatedQuery_peoples";

 export const useDeletePeople = (
  people: { id?: string; fullName?: string },
-  connectionId: string
+  connectionId: string,
 ) => {
  const [mutate] = useMutation<PeopleGraphDeleteMutation>(deletePeopleMutation);
  const confirm = useConfirm();
@@ -151,18 +166,21 @@ export const useDeletePeople = (
        }).catch((error) => {
          toast({
            title: __("Error"),
-            description: formatError(__("Failed to delete people"), error as GraphQLError),
+            description: formatError(
+              __("Failed to delete people"),
+              error as GraphQLError,
+            ),
            variant: "error",
          });
        }),
      {
        message: sprintf(
          __(
-            'This will permanently delete "%s". This action cannot be undone.'
+            'This will permanently delete "%s". This action cannot be undone.',
          ),
-          people.fullName
+          people.fullName,
        ),
-      }
+      },
    );
  };
 };
--- a/apps/console/src/hooks/graph/VendorGraph.ts
+++ b/apps/console/src/hooks/graph/VendorGraph.ts
@@ -37,7 +37,7 @@ export function useCreateVendorMutation() {
    {
      successMessage: __("Vendor created successfully."),
      errorMessage: __("Failed to create vendor"),
-    }
+    },
  );
 }

@@ -54,7 +54,7 @@ const deleteVendorMutation = graphql`

 export const useDeleteVendor = (
  vendor: { id?: string; name?: string },
-  connectionId: string
+  connectionId: string,
 ) => {
  const [mutate] = useMutation<VendorGraphDeleteMutation>(deleteVendorMutation);
  const confirm = useConfirm();
@@ -77,11 +77,11 @@ export const useDeleteVendor = (
      {
        message: sprintf(
          __(
-            'This will permanently delete vendor "%s". This action cannot be undone.'
+            'This will permanently delete vendor "%s". This action cannot be undone.',
          ),
-          vendor.name
+          vendor.name,
        ),
-      }
+      },
    );
  };
 };
@@ -171,7 +171,7 @@ export const vendorNodeQuery = graphql`
  }
 `;

-const vendorsSelectQuery = graphql`
+export const vendorsSelectQuery = graphql`
  query VendorGraphSelectQuery($organizationId: ID!) {
    organization: node(id: $organizationId) {
      ... on Organization {
@@ -195,7 +195,7 @@ export function useVendors(organizationId: string) {
    {
      organizationId: organizationId,
    },
-    { fetchPolicy: "network-only" }
+    { fetchPolicy: "network-only" },
  );
  return useMemo(() => {
    return data.organization?.vendors?.edges.map((edge) => edge.node) ?? [];
--- a/apps/console/src/hooks/graph/generated/AssetGraphCreateMutation.graphql.ts
+++ b/apps/console/src/hooks/graph/generated/AssetGraphCreateMutation.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<0f47a0632a7158414d8c87cf9de16a7a>>
+ * @generated SignedSource<<9ebcbef6d786f85d0b88c881d1478938>>
 * @lightSyntaxTransform
 * @nogrep
 */
@@ -262,7 +262,7 @@ return {
            "alias": null,
            "args": null,
            "filters": null,
-            "handle": "prependEdge",
+            "handle": "appendEdge",
            "key": "",
            "kind": "LinkedHandle",
            "name": "assetEdge",
@@ -290,6 +290,6 @@ return {
 };
 })();

-(node as any).hash = "1d36f3080ab525417516779740f5977c";
+(node as any).hash = "92fca40d88a9ea68f013e9953d46388e";

 export default node;
--- a/apps/console/src/pages/organizations/assets/AssetsPage.tsx
+++ b/apps/console/src/pages/organizations/assets/AssetsPage.tsx
@@ -1,14 +1,14 @@
 import {
  ActionDropdown,
-  Avatar,
  Badge,
  Button,
  DropdownItem,
-  EditableCell,
-  IconCrossLargeX,
+  IconPencil,
  IconPlusLarge,
  IconTrashCan,
  PageHeader,
+  SelectCell,
+  TextCell,
  useConfirm,
 } from "@probo/ui";
 import { useTranslate } from "@probo/i18n";
@@ -21,17 +21,15 @@ import {
  usePreloadedQuery,
 } from "react-relay";
 import { useOrganizationId } from "/hooks/useOrganizationId";
-import { useParams } from "react-router";
-import { CreateAssetDialog } from "./dialogs/CreateAssetDialog";
+import { Link, useParams } from "react-router";
 import {
  assetsQuery,
  createAssetMutation,
  deleteAssetMutation,
  updateAssetMutation,
-} from "../../../hooks/graph/AssetGraph";
+} from "/hooks/graph/AssetGraph";
 import type { AssetGraphListQuery } from "/hooks/graph/__generated__/AssetGraphListQuery.graphql";
 import {
-  faviconUrl,
  getAssetTypeVariant,
  promisifyMutation,
  sprintf,
@@ -39,9 +37,10 @@ import {
 import type { AssetsPageFragment$key } from "./__generated__/AssetsPageFragment.graphql";
 import { SnapshotBanner } from "/components/SnapshotBanner";
 import z from "zod";
-import { usePeople } from "/hooks/graph/PeopleGraph.ts";
-import { useVendors } from "/hooks/graph/VendorGraph.ts";
 import { EditableTable } from "/components/table/EditableTable.tsx";
+import { PeopleCell } from "/components/table/PeopleCell.tsx";
+import { VendorsCell } from "/components/table/VendorsCell.tsx";
+import { CreateAssetDialog } from "./dialogs/CreateAssetDialog";
 import { Authorized, isAuthorized } from "/permissions";

 const paginatedAssetsFragment = graphql`
@@ -98,7 +97,7 @@ type Props = {

 const schema = z.object({
  name: z.string().trim().min(1, "Name is required"),
-  amount: z.coerce.number().min(0, "Amount is required"),
+  amount: z.coerce.number().min(1, "Amount is required"),
  assetType: z.enum(["PHYSICAL", "VIRTUAL"]),
  ownerId: z.string().trim().min(1, "Owner is required"),
  vendorIds: z.array(z.string()).optional(),
@@ -122,6 +121,11 @@ export default function AssetsPage(props: Props) {
  const { snapshotId } = useParams<{ snapshotId?: string }>();
  const isSnapshotMode = Boolean(snapshotId);

+  const assetUrl = (entry: { id: string }) =>
+    isSnapshotMode && snapshotId
+      ? `/organizations/${organizationId}/snapshots/${snapshotId}/assets/${entry.id}`
+      : `/organizations/${organizationId}/assets/${entry.id}`;
+
  const data = usePreloadedQuery(assetsQuery, props.queryRef);
  const pagination = usePaginationFragment(
    paginatedAssetsFragment,
@@ -177,78 +181,59 @@ export default function AssetsPage(props: Props) {
          ...defaultValue,
          organizationId,
        }}
-        action={({ item }) => (
-          <ActionDropdown>
-            <DropdownItem
-              onClick={() => deleteAsset(item)}
-              variant="danger"
-              icon={IconTrashCan}
-            >
-              {__("Delete")}
-            </DropdownItem>
-          </ActionDropdown>
-        )}
-        row={({ item, onUpdate, errors }) => (
+        action={({ item }) =>
+          hasAnyAction ? (
+            <ActionDropdown>
+              <DropdownItem asChild>
+                <Link to={assetUrl(item)}>
+                  <IconPencil size={16} />
+                  {__("Edit")}
+                </Link>
+              </DropdownItem>
+              <DropdownItem
+                onClick={() => deleteAsset(item)}
+                variant="danger"
+                icon={IconTrashCan}
+              >
+                {__("Delete")}
+              </DropdownItem>
+            </ActionDropdown>
+          ) : null
+        }
+        row={({ item }) => (
          <>
-            <EditableCell
-              type="text"
-              value={item?.name ?? ""}
-              onValueChange={(v) => onUpdate("name", v)}
-              blink={Boolean(errors?.name)}
-            />
-            <EditableCell
-              type="select"
+            <TextCell name="name" defaultValue={item?.name ?? ""} required />
+            <SelectCell
+              name="assetType"
              items={["VIRTUAL", "PHYSICAL"]}
-              value={item?.assetType ?? "VIRTUAL"}
              itemRenderer={({ item }) => (
                <Badge variant={getAssetTypeVariant(item ?? "VIRTUAL")}>
                  {item === "PHYSICAL" ? __("Physical") : __("Virtual")}
                </Badge>
              )}
-              onValueChange={(v) => onUpdate("assetType", v)}
-              blink={Boolean(errors?.assetType)}
+              defaultValue={item?.assetType ?? defaultValue.assetType}
            />
-            <EditableCell
-              type="text"
-              value={item?.dataTypesStored ?? ""}
-              onValueChange={(v) => onUpdate("dataTypesStored", v)}
-              blink={Boolean(errors?.dataTypesStored)}
-            />
-            <EditableCell
-              type="text"
-              value={item?.amount.toString() ?? "0"}
-              onValueChange={(v) => onUpdate("amount", v)}
-              blink={Boolean(errors?.amount)}
-            />
-            <EditableCell
-              type="select"
-              items={() =>
-                usePeople(organizationId, { excludeContractEnded: true })
+            <TextCell
+              name="dataTypesStored"
+              defaultValue={
+                item?.dataTypesStored ?? defaultValue.dataTypesStored
              }
-              value={item?.owner}
-              itemRenderer={({ item }) => (
-                <div className="flex gap-2">
-                  <Avatar name={item.fullName} />
-                  {item.fullName}
-                </div>
-              )}
-              onValueChange={(v) => onUpdate("ownerId", v.id)}
-              blink={Boolean(errors?.ownerId)}
+              required
            />
-            <EditableCell
-              type="multiple"
-              items={() => useVendors(organizationId)}
-              value={item?.vendors.edges.map((edge) => edge.node)}
-              itemRenderer={({ item, onRemove }) => (
-                <VendorBadge key={item.id} vendor={item} onRemove={onRemove} />
-              )}
-              onValueChange={(v) =>
-                onUpdate(
-                  "vendorIds",
-                  v.map((v) => v.id),
-                )
-              }
-              blink={Boolean(errors?.vendorIds)}
+            <TextCell
+              name="amount"
+              defaultValue={(item?.amount ?? defaultValue.amount).toString()}
+              required
+            />
+            <PeopleCell
+              name="ownerId"
+              defaultValue={item?.owner}
+              organizationId={organizationId}
+            />
+            <VendorsCell
+              name="vendorIds"
+              organizationId={organizationId}
+              defaultValue={item?.vendors.edges.map((edge) => edge.node) ?? []}
            />
          </>
        )}
@@ -257,37 +242,6 @@ export default function AssetsPage(props: Props) {
  );
 }

-type Vendor = {
-  id: string;
-  name: string;
-  websiteUrl: string | null | undefined;
-};
-
-function VendorBadge({
-  vendor,
-  onRemove,
-}: {
-  vendor: Vendor;
-  onRemove?: () => void;
-}) {
-  return (
-    <Badge variant="neutral" className="flex items-center gap-1">
-      <Avatar name={vendor.name} src={faviconUrl(vendor.websiteUrl)} size="s" />
-      <span className="max-w-[100px] text-ellipsis overflow-hidden min-w-0 block">
-        {vendor.name}
-      </span>
-      {onRemove && (
-        <button
-          onClick={onRemove}
-          className="size-4 hover:text-txt-primary cursor-pointer"
-        >
-          <IconCrossLargeX size={14} />
-        </button>
-      )}
-    </Badge>
-  );
-}
-
 const useDeleteAsset = (connectionId: string) => {
  const [mutate] = useMutation(deleteAssetMutation);
  const confirm = useConfirm();
--- a/apps/console/src/routes/assetRoutes.ts
+++ b/apps/console/src/routes/assetRoutes.ts
@@ -26,6 +26,15 @@ export const assetRoutes = [
      }),
    Component: lazy(() => import("/pages/organizations/assets/AssetsPage")),
  },
+  {
+    path: "assets/:assetId",
+    fallback: PageSkeleton,
+    queryLoader: (params: Record<string, string>) =>
+      loadQuery(relayEnvironment, assetNodeQuery, { assetId: params.assetId }),
+    Component: lazy(
+      () => import("/pages/organizations/assets/AssetDetailsPage"),
+    ),
+  },
  {
    path: "snapshots/:snapshotId/assets/:assetId",
    fallback: PageSkeleton,