metis-desk/modules/assets/src/web/workstations-page.tsx

import { Button } from "@repo/shadcn-ui/components/button";
import {
  EntityAction,
  EntityListHeader,
  EntityRowActions,
  EntityStatus,
  EntityTable,
} from "@repo/shadcn-ui/components/entity-list";
import { FormDialog } from "@repo/shadcn-ui/components/form-dialog";
import { useQuery } from "@tanstack/react-query";
import { useState } from "react";
import { useTranslation } from "react-i18next";

import type { InventoryLookups } from "./asset-form";
import { inventoryApi, inventoryKeys } from "./inventory-api";
import { InventoryFeedback } from "./inventory-feedback";
import { WorkstationForm } from "./workstation-form";
export function WorkstationsPage({
  companyId,
  csrfToken,
  lookups,
}: {
  companyId: string;
  csrfToken: string;
  lookups: InventoryLookups;
}) {
  const { t, i18n } = useTranslation("assets");
  const [search, setSearch] = useState("");
  const [editor, setEditor] = useState<string>();
  const [view, setView] = useState<string>();
  const query = useQuery({
    queryKey: inventoryKeys.company(companyId),
    queryFn: () => inventoryApi.get(companyId),
  });
  const stations = query.data?.workstations ?? [];
  const assets = query.data?.assets ?? [];
  const edited = stations.find((item) => item.id === editor);
  const viewed = stations.find((item) => item.id === view);
  const personName = (id: string | null) =>
    lookups.people.find((item) => item.id === id)?.name ?? t("noAssignment");
  const siteName = (id: string | null) =>
    lookups.sites.find((item) => item.id === id)?.name ?? t("noAssignment");
  const members = (ids: readonly string[], empty = "noWorkstationAssets") =>
    ids.map((id) => assets.find((item) => item.id === id)?.values.name ?? id).join(" · ") ||
    t(empty);
  const filtered = stations.filter((item) =>
    [item.values.name, personName(item.values.personId), siteName(item.values.siteId)].some(
      (value) => value.toLocaleLowerCase().includes(search.trim().toLocaleLowerCase())
    )
  );
  return (
    <div className="space-y-5">
      <EntityListHeader
        actions={
          <>
            {" "}
            <Button disabled={!query.data} onClick={() => setEditor("new")}>
              {t("newWorkstation")}
            </Button>{" "}
          </>
        }
        locale={i18n.language}
        title={t("workstations")}
      />

      {query.isPending && <p role="status">{t("loading")}</p>}
      <InventoryFeedback error={query.error} />
      {query.isError && (
        <Button
          onClick={() => {
            query.refetch().catch(() => undefined);
          }}
          variant="outline"
        >
          {t("retry")}
        </Button>
      )}
      {query.data && (
        <EntityTable
          columns={[
            {
              id: "name",
              label: t("name"),
              value: (item) => item.values.name,
              hideable: false,
              render: (item) => (
                <button
                  className="font-medium text-left underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-ring"
                  onClick={() => setView(item.id)}
                  type="button"
                >
                  {item.values.name}
                </button>
              ),
            },
            {
              id: "site",
              label: t("site"),
              value: (item) => siteName(item.values.siteId),
              render: (item) => <>{siteName(item.values.siteId)}</>,
            },
            {
              id: "person",
              label: t("person"),
              value: (item) => personName(item.values.personId),
              render: (item) => <>{personName(item.values.personId)}</>,
            },
            {
              id: "state",
              label: t("status"),
              value: (item) => t(item.values.active ? "active" : "inactive"),
              render: (item) => (
                <EntityStatus active={item.values.active}>
                  {t(item.values.active ? "active" : "inactive")}
                </EntityStatus>
              ),
            },
            {
              id: "exclusive",
              label: t("exclusiveWorkstationAssets"),
              render: (item) => <>{members(item.values.assetIds)}</>,
            },
            {
              id: "shared",
              label: t("sharedWorkstationAssets"),
              render: (item) => (
                <>{members(item.values.sharedAssetIds, "noSharedWorkstationAssets")}</>
              ),
            },
            {
              id: "count",
              label: t("characteristics"),
              value: (item) => item.values.assetIds.length + item.values.sharedAssetIds.length,
              render: (item) => (
                <>
                  {t("workstationCount", {
                    count: item.values.assetIds.length + item.values.sharedAssetIds.length,
                  })}
                </>
              ),
            },
            {
              id: "actions",
              label: t("actions"),
              hideable: false,
              render: (item) => (
                <EntityRowActions label={t("actions")}>
                  {" "}
                  <div className="contents">
                    <EntityAction onClick={() => setView(item.id)}>
                      {t("workstationHistory")}
                    </EntityAction>
                    <EntityAction onClick={() => setEditor(item.id)}>{t("edit")}</EntityAction>
                  </div>{" "}
                </EntityRowActions>
              ),
            },
          ]}
          emptyMessage={t("noWorkstations")}
          items={filtered}
          locale={i18n.language}
          onSearchChange={setSearch}
          search={search}
          searchPlaceholder={t("search")}
          title={t("workstations")}
        />
      )}
      {editor && (
        <FormDialog
          cancelLabel={t("cancel")}
          formActions
          onOpenChange={(open) => {
            if (!open) {
              setEditor(undefined);
            }
          }}
          open
          title={t(edited ? "editWorkstation" : "newWorkstation")}
          wide
        >
          <WorkstationForm
            companyId={companyId}
            csrfToken={csrfToken}
            lookups={lookups}
            onSaved={() => setEditor(undefined)}
            workstation={edited}
          />
        </FormDialog>
      )}
      {viewed && (
        <FormDialog
          cancelLabel={t("close")}
          onOpenChange={(open) => {
            if (!open) {
              setView(undefined);
            }
          }}
          open
          title={t("workstationHistory")}
          wide
        >
          <ol className="space-y-4">
            {[...viewed.history].reverse().map((revision) => (
              <li className="space-y-2 rounded-md border p-3 text-sm" key={revision.id}>
                <p className="font-medium">
                  {new Intl.DateTimeFormat(i18n.language, {
                    dateStyle: "medium",
                    timeStyle: "short",
                  }).format(new Date(revision.recordedAt))}{" "}
                  · {t("recordedBy", { name: revision.actorName })}
                </p>
                <p>
                  {revision.values.name} · {t(revision.values.active ? "active" : "inactive")}
                </p>
                <p>
                  {siteName(revision.values.siteId)} · {personName(revision.values.personId)}
                </p>
                <p>
                  {t("exclusiveWorkstationAssets")}: {members(revision.values.assetIds)}
                </p>
                <p>
                  {t("sharedWorkstationAssets")}:{" "}
                  {members(revision.values.sharedAssetIds, "noSharedWorkstationAssets")}
                </p>
              </li>
            ))}
          </ol>
        </FormDialog>
      )}
    </div>
  );
}