app/routes/workspace.inventory.tsx

Functions

Imports

It imports app/components/lab/lab-ui.tsx, app/lab/actor.server.ts, app/lab/forms.mjs, app/lab/inventory.server.ts, app/lab/titles.mjs, app/lib/context.ts. No module of this repo imports it.

Source

1import { Form, Link, data } from "react-router";
2import { can } from "@dustinedwards/site-runtime/members";
3import { Button } from "capsomer/react/button";
4import { Field } from "capsomer/react/field";
5import { Panel } from "capsomer/react/panel";
6
7import { PageHead } from "capsomer/react/page-head";
8import { LabTable, Result } from "~/components/lab/lab-ui";
9import { labActorContext } from "~/lab/actor.server";
10import { inventoryAction, inventoryPage } from "~/lab/inventory.server";
11import { amountText } from "~/lab/forms.mjs";
12import { PERMISSION } from "~/lab/titles.mjs";
13import { getEnv } from "~/lib/context";
14import type { Route } from "./+types/workspace.inventory";
15
16export function meta() {
17  return [{ title: "Inventory · Lab" }, { name: "robots", content: "noindex" }];
18}
19
20const PRIVATE = { "cache-control": "private, no-store" };
21
22function requireReader(actor: Parameters<typeof can>[0]) {
23  if (!can(actor, PERMISSION.read)) throw data("Not found.", { status: 404, headers: PRIVATE });
24}
25
26export async function loader({ context }: Route.LoaderArgs) {
27  const actor = context.get(labActorContext);
28  requireReader(actor);
29  return data(await inventoryPage(getEnv(context), actor), { headers: PRIVATE });
30}
31
32export async function action({ context, request }: Route.ActionArgs) {
33  const actor = context.get(labActorContext);
34  requireReader(actor);
35  return data(await inventoryAction(getEnv(context), actor, await request.formData(), Date.now()), { headers: PRIVATE });
36}
37
38const STATUS_TEXT = { in_stock: "In stock", empty: "Empty", discarded: "Discarded" } as const;
39
40export default function LabInventory({ loaderData, actionData }: Route.ComponentProps) {
41  const { lots, locations, items, canEdit, canUse } = loaderData;
42  return (
43    <>
44      <PageHead title="Inventory" lead="The lots on the shelf: which lot of each reagent, how much is left, and where it is. Every change is recorded." />
45      <Result result={actionData} />
46      {lots.length === 0 ? (
47        <p className="cap-muted">No lots recorded yet.</p>
48      ) : (
49        <LabTable label="Lots" head={["Item", "Lot", "Left", "Expires", "Where", "Status", ""]}>
50          {lots.map((lot) => (
51            <tr key={lot.id}>
52              <th scope="row">{lot.item}</th>
53              <td>
54                <Link to={`/lab/inventory/${lot.id}`} className="cap-mono">
55                  {lot.lot_number}
56                </Link>
57              </td>
58              <td>{lot.amount === null ? "" : amountText(lot.amount, lot.unit)}</td>
59              <td>{lot.expiry ?? ""}</td>
60              <td>{lot.location ?? ""}</td>
61              <td>
62                {STATUS_TEXT[lot.status]}
63                {lot.opened ? <span className="cap-muted">, opened {lot.opened}</span> : null}
64              </td>
65              <td>
66                {canUse && lot.status === "in_stock" ? (
67                  <Form method="post" className="lab-actions">
68                    <input type="hidden" name="lot" value={lot.id} />
69                    {lot.opened ? null : (
70                      <Button type="submit" size="sm" name="intent" value="mark_opened">
71                        Mark opened<span className="cap-sr-only"> lot {lot.lot_number}</span>
72                      </Button>
73                    )}
74                    <Button type="submit" size="sm" name="intent" value="mark_empty">
75                      Mark empty<span className="cap-sr-only"> lot {lot.lot_number}</span>
76                    </Button>
77                  </Form>
78                ) : null}
79              </td>
80            </tr>
81          ))}
82        </LabTable>
83      )}
84      {canEdit ? (
85        <>
86          <Panel title="Add a lot">
87            <Form method="post" className="lab-form">
88              <input type="hidden" name="intent" value="add_lot" />
89              <div className="lab-fields">
90                <Field label="Item" required>
91                  <select className="cap-input" name="item" required defaultValue="">
92                    <option value="" disabled>
93                      Choose an item
94                    </option>
95                    {items.map((i) => (
96                      <option key={i.value} value={i.value}>
97                        {i.label}
98                      </option>
99                    ))}
100                  </select>
101                </Field>
102                <Field label="Lot number" required>
103                  <input className="cap-input" name="lot_number" required />
104                </Field>
105                <Field label="Amount">
106                  <input className="cap-input" name="amount" inputMode="decimal" />
107                </Field>
108                <Field label="Unit" help="mL, g, tubes">
109                  <input className="cap-input" name="unit" />
110                </Field>
111                <Field label="Expires">
112                  <input className="cap-input" type="date" name="expiry" />
113                </Field>
114                <Field label="Received">
115                  <input className="cap-input" type="date" name="received" />
116                </Field>
117                <Field label="Where">
118                  <select className="cap-input" name="location" defaultValue="">
119                    <option value="">Not recorded</option>
120                    {locations.map((l) => (
121                      <option key={l.id} value={l.id}>
122                        {l.name}
123                      </option>
124                    ))}
125                  </select>
126                </Field>
127              </div>
128              <div>
129                <Button type="submit" variant="primary">
130                  Add lot
131                </Button>
132              </div>
133            </Form>
134          </Panel>
135          <Panel title="Add a location">
136            <Form method="post" className="lab-form">
137              <input type="hidden" name="intent" value="add_location" />
138              <div className="lab-fields">
139                <Field label="Name" required help="Freezer 2, shelf B">
140                  <input className="cap-input" name="name" required />
141                </Field>
142                <Field label="Inside">
143                  <select className="cap-input" name="parent" defaultValue="">
144                    <option value="">Nowhere else</option>
145                    {locations.map((l) => (
146                      <option key={l.id} value={l.id}>
147                        {l.name}
148                      </option>
149                    ))}
150                  </select>
151                </Field>
152              </div>
153              <div>
154                <Button type="submit">Add location</Button>
155              </div>
156            </Form>
157          </Panel>
158        </>
159      ) : null}
160    </>
161  );
162}