How to use the site.

08

Create a family.

1. Name it once

id

A short word, lowercase, no spaces. handsets is one. It has to be unique among families. The homepage tile opens the card with this id, so a typo here opens an empty filter.

name

The heading people read. Android handsets. Search looks at this, and so does the chip above the lines. Do not put a region or a model in the heading.

blurb

One sentence under the heading: what the family includes, and the limit. For handsets, that limit is Samsung, US and international as different lines, not every model.

image

The homepage tile. Use a picture that is already on the site: /media/crates.jpg, /media/dock.jpg, /media/reels.jpg, /media/panels.jpg, /media/power.jpg, /media/harness.jpg, /media/network-gear.jpg, or /media/campus.jpg. A path you invent is a broken tile.

lines

The rows under the heading. Do not leave this empty. A family with no lines still makes a homepage tile, and that tile opens a card that says nothing matches.

2. Write the heading with its first line

This is the shape. The handset family is already on the card, so do not paste it a second time. Copy the shape only when the card has no heading for these goods. Change every word. Put at least one real line in lines before you stop. The next chapter is how that line is written.

{
  id: "handsets",
  name: "Android handsets",
  blurb: "Samsung, sealed in the manufacturer carton. United States and international are different lines. Not every model.",
  image: "/media/crates.jpg",
  lines: [
    {
      id: "samsung-s-us",
      name: "Galaxy S series, United States",
      detail: "Flagship Samsung handsets built for the US. Factory sealed.",
      pack: "Master carton",
      moq: "10 units",
      lead: "On hand",
      bay: "central",
      status: "On hand",
    },
  ],
},

3. What not to split

4. Check the heading

09

Create a line card.

1. Decide the family

2. Write one line

Put the line inside that family’s lines list. A comma separates it from the line before it. Eight fields. Leave one out and the card will not build.

id

Unique across the whole card, not just the family. samsung-s-us is one. Add remembers the line by this id. Reusing an id merges two different goods into one staged row.

name

The words on the row. Put the region in the name when the packs must not be mixed: Galaxy S series, United States.

detail

What is sealed, what the desk still has to name, and what will not be done. The exact model of a series is named on the allocation, not by listing every model here. No prices.

pack

How it leaves. Master carton, reel, tray, crate. Search looks at this word, so use the pack a buyer would type.

moq

The smallest release, written as people say it. 10 units. 1 reel. 1 crate. The card shows it. It does not enforce it.

lead

When it can move. On hand, or a range such as 2–4 weeks. On review if the line is not ready to be promised.

bay

Exactly one of north, central, west, bonded. Handset cartons sit in central. Large or fragile faces sit in west. Anything you cannot identify sits in bonded.

status

Exactly one of On hand, Inbound, Allocated, Hold. Capital letters matter. Hold is visible and cannot be staged. The button reads Not offered.

One finished line. Copy the shape. Change the words. Do not add a second line for every model inside the series.

{
  id: "samsung-s-us",
  name: "Galaxy S series, United States",
  detail: "Flagship Samsung handsets built for the US. Factory sealed. The exact model is named on the allocation.",
  pack: "Master carton",
  moq: "10 units",
  lead: "On hand",
  bay: "central",
  status: "On hand",
}

3. Add only the lines that differ

4. Check the card

10

Write an office.

• desk@esepillc.comA new request, or one you already hold a reference for.
• line@esepillc.comA family, a pack, a status, or a line that should be on the card.
• support@esepillc.comA question that is not yet an allocation.
• ceo@esepillc.comjoseph@esepillc.com
  Joseph James, Chief Executive Officer. Allocation policy, customer priority, and the release standard.
• coo@esepillc.com
  R. Okonkwo, Chief Operating Officer. The floor: receiving, inspection, kitting, and the four bays.
• corporate@esepillc.com
  A. Shah, Corporate Officer. The line card, commercial terms, and OEM programs including imaging.
• quality@esepillc.comelena@esepillc.com
  Elena Voss, Senior Officer, Quality. Incoming inspection, date codes, and the right to hold a lot.
• warehouse@esepillc.commarcus@esepillc.com
  Marcus Hale, Senior Officer, Warehousing. Bay layout, crate build, and what is allowed to leave the dock.
• programs@esepillc.compriya@esepillc.com
  Priya Raman, Senior Officer, Programs. OEM build schedules and the families those builds actually draw.
• finance@esepillc.comdavid@esepillc.com
  David Cho, Senior Officer, Finance. Terms on a release, and the record that a reference was received.
• export@esepillc.comnaomi@esepillc.com
  Naomi Berg, Senior Officer, Export. What may leave the building, and the paperwork that has to travel with it.

The same list sits on the allocation desk, under Write, and on each biography.

11

Reference.

Status

On hand

The goods are in a bay and can be discussed. Add will stage the line.

Inbound

The goods are expected. They are not a promise that they are here. Add will still stage the request.

Allocated

A quantity is already spoken for. Add stages a request. It does not take the quantity from someone else.

Hold

Not offered. The button reads Not offered. The usual bay is Bonded Hold.

Bays

NorthBAY N

High velocity. Reels, cut tape, trays, moisture-barrier bags. The short aisle. Small packs move here, with the same lot identity the bulk floor uses.

CentralBAY C

Bulk and crated OEM. Master cartons, open-frame power, memory trays. Where the heavy stock lives. If it needs a pallet, it is staged in Central.

WestBAY W

Displays, imaging, harnesses. Panel crates, imaging kits, kitted cable. Large faces and finished kits. Crates are built here so the mark sits square on the side.

Bonded HoldHOLD

Unreleased. Unmatched paperwork, open date-code questions. Nothing in Hold is offered. It stays unmixed until it is cleared or it goes back.

Where to go

Line card

Header, footer, and Lines on a phone. Families and the lines under them.

Warehouses

Header, footer, and Bays on a phone. The four bays and inbound.

Leadership

Header, People on a phone, and the footer. The eight officers and their addresses.

Privacy

Header, and the footer. What the site stores and what it does not.

Terms

Header, and the footer. The agreement for using the site.

Company

Header, and Standards in the footer. The release standard.

Desk

Header on a wide screen, Desk on a phone, and Request in the footer. The allocation form.

Desk list

Footer only. The private lookup. It is not the Desk button.

Tutorial

Header on a wide screen, Help on a phone, and the footer. This page.

Clipboard

Header. Opens the staged lines. It is not a page.

The code that signs a desk reference, looks one up, and draws the list is still below, under the file it lives in.

REFERENCE

Where the desk code lives.

A request is stored under a reference such as ESEPI-4821. The list that reads those references is three files. Each name below is the place that code resides. The live desk key is not printed here.

1. 01 src/lib/desk.server.ts
2. 02 src/lib/desk.ts
3. 03 src/routes/desk.tsx

import { createHmac, timingSafeEqual } from "node:crypto";
import { getRequest, setCookie } from "@tanstack/react-start/server";

const COOKIE = "esepi_desk";
const KEY = "not printed here";
const DAY = 60 * 60 * 12;

const attempts = new Map<string, { n: number; at: number }>();

function secret() {
  return process.env.DESK_KEY?.trim() || KEY;
}

function safeEqual(a: string, b: string) {
  const left = Buffer.from(a);
  const right = Buffer.from(b);
  if (left.length !== right.length) return false;
  return timingSafeEqual(left, right);
}

function token() {
  const exp = Date.now() + DAY * 1000;
  const payload = String(exp);
  const mac = createHmac("sha256", secret()).update(payload).digest("hex");
  return `${payload}.${mac}`;
}

export function deskOpen() {
  const request = getRequest();
  const raw = request?.headers.get("cookie") ?? "";
  const found = raw
    .split(";")
    .map((part) => part.trim())
    .find((part) => part.startsWith(`${COOKIE}=`));
  if (!found) return false;
  const value = decodeURIComponent(found.slice(COOKIE.length + 1));
  const [payload, mac] = value.split(".");
  if (!payload || !mac) return false;
  const expected = createHmac("sha256", secret()).update(payload).digest("hex");
  if (!safeEqual(mac, expected)) return false;
  return Number(payload) > Date.now();
}

function caller() {
  const request = getRequest();
  return request?.headers.get("x-forwarded-for")?.split(",")[0]?.trim() || "local";
}

export function tooManyAttempts() {
  const now = Date.now();
  const slot = attempts.get(caller());
  if (!slot || now - slot.at > 10 * 60 * 1000) return false;
  return slot.n >= 8;
}

export function noteAttempt(ok: boolean) {
  const id = caller();
  const now = Date.now();
  const slot = attempts.get(id);
  if (!ok) {
    if (!slot || now - slot.at > 10 * 60 * 1000) attempts.set(id, { n: 1, at: now });
    else slot.n += 1;
    return;
  }
  attempts.delete(id);
}

function cookieFlags() {
  const request = getRequest();
  const proto = request?.headers.get("x-forwarded-proto")?.split(",")[0]?.trim();
  const secure = proto === "https" || request?.url.startsWith("https:") === true;
  return { path: "/", httpOnly: true, sameSite: "lax" as const, secure, maxAge: DAY };
}

export function openDesk(key: string) {
  if (!safeEqual(key, secret())) return false;
  setCookie(COOKIE, token(), cookieFlags());
  return true;
}

export function closeDesk() {
  setCookie(COOKIE, "", { ...cookieFlags(), maxAge: 0 });
}

import { createServerFn } from "@tanstack/react-start";

export type DeskRow = {
  ref: string;
  company: string;
  name: string;
  email: string;
  build: string;
  note: string;
  lines: string;
  at: string;
};

function stamp(value: unknown) {
  if (value instanceof Date) return value.toISOString();
  return String(value ?? "");
}

export const deskSession = createServerFn({ method: "POST" }).handler(async () => {
  const { deskOpen } = await import("./desk.server");
  return { open: deskOpen() };
});

export const unlockDesk = createServerFn({ method: "POST" })
  .inputValidator((input: unknown) => {
    const key = String((input as { key?: unknown } | null)?.key ?? "").slice(0, 200);
    return { key };
  })
  .handler(async ({ data }) => {
    const { openDesk, tooManyAttempts, noteAttempt } = await import("./desk.server");
    if (tooManyAttempts()) return { ok: false as const, limited: true as const };
    const ok = openDesk(data.key);
    noteAttempt(ok);
    return { ok, limited: false as const };
  });

export const lockDesk = createServerFn({ method: "POST" }).handler(async () => {
  const { closeDesk } = await import("./desk.server");
  closeDesk();
  return { ok: true as const };
});

export const listDesk = createServerFn({ method: "POST" })
  .inputValidator((input: unknown) => {
    const query = String((input as { query?: unknown } | null)?.query ?? "")
      .trim()
      .slice(0, 80);
    return { query };
  })
  .handler(async ({ data }) => {
    const { deskOpen } = await import("./desk.server");
    if (!deskOpen()) return { open: false as const, rows: [] as DeskRow[] };
    const { getSql } = await import("@/lib/db");
    const sql = await getSql();
    const like = `%${data.query.replace(/[%_]/g, "")}%`;
    const rows = data.query
      ? await sql.query(
          `select ref, company, contact_name, email, build, note, lines, created_at
           from allocation_requests
           where ref ilike $1 or company ilike $1 or contact_name ilike $1 or email ilike $1
           order by created_at desc
           limit 40`,
          [like],
        )
      : await sql`
          select ref, company, contact_name, email, build, note, lines, created_at
          from allocation_requests
          order by created_at desc
          limit 40
        `;
    return {
      open: true as const,
      rows: rows.map((row) => ({
        ref: String(row.ref ?? ""),
        company: String(row.company ?? ""),
        name: String(row.contact_name ?? ""),
        email: String(row.email ?? ""),
        build: String(row.build ?? ""),
        note: String(row.note ?? ""),
        lines: String(row.lines ?? ""),
        at: stamp(row.created_at),
      })),
    };
  });

import { createFileRoute } from "@tanstack/react-router";
import { useEffect, useState, type FormEvent } from "react";
import { listDesk, lockDesk, unlockDesk, deskSession, type DeskRow } from "@/lib/desk";

export const Route = createFileRoute("/desk")({
  head: () => ({
    meta: [{ title: "Desk list — ESEPI LLC" }],
  }),
  component: DeskPage,
});

function when(value: string) {
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return value;
  return date.toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" });
}

function DeskPage() {
  const [checking, setChecking] = useState(true);
  const [open, setOpen] = useState(false);
  const [key, setKey] = useState("");
  const [error, setError] = useState("");
  const [query, setQuery] = useState("");
  const [rows, setRows] = useState<DeskRow[]>([]);
  const [loading, setLoading] = useState(false);

  async function load(next: string) {
    setLoading(true);
    try {
      const result = await listDesk({ data: { query: next } });
      if (!result.open) {
        setOpen(false);
        setRows([]);
        return;
      }
      setOpen(true);
      setRows(result.rows);
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    let live = true;
    deskSession()
      .then(async (session) => {
        if (!live) return;
        if (!session.open) return;
        await load("");
      })
      .finally(() => {
        if (live) setChecking(false);
      });
    return () => {
      live = false;
    };
  }, []);

  async function onUnlock(event: FormEvent) {
    event.preventDefault();
    setError("");
    const result = await unlockDesk({ data: { key } });
    if (!result.ok) {
      setError(
        result.limited
          ? "Too many tries. Wait and use the key again."
          : "That key does not open the list.",
      );
      return;
    }
    setKey("");
    setOpen(true);
    await load("");
  }

  async function onFind(event: FormEvent) {
    event.preventDefault();
    await load(query);
  }

  async function onLock() {
    await lockDesk();
    setOpen(false);
    setRows([]);
    setQuery("");
  }

  return (
    <div className="mx-auto max-w-3xl px-4 py-16 sm:px-6 lg:py-24">
      <p className="text-xs tracking-widest text-accent">DESK LIST</p>
      <h1 className="mt-3 text-4xl sm:text-5xl">Check a reference.</h1>
      {checking ? <p className="mt-10 text-sm text-muted">Checking the desk.</p> : null}
      {!checking && !open ? (
        <form onSubmit={onUnlock} className="mt-10 grid max-w-md gap-4">
          <label className="block">
            <span className="text-xs tracking-widest text-subtle">DESK KEY</span>
            <input type="password" value={key} onChange={(event) => setKey(event.target.value)} className="field mt-2" />
          </label>
          {error ? <p className="text-sm text-warn">{error}</p> : null}
          <button type="submit" className="btn btn-accent">Open the list</button>
        </form>
      ) : null}
      {!checking && open ? (
        <form onSubmit={onFind}>
          <input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="ESEPI-4821, a company, or an email" className="field" />
          <button type="submit" className="btn btn-accent">{loading ? "Looking" : "Find"}</button>
          <button type="button" onClick={onLock} className="btn btn-quiet">Lock</button>
        </form>
      ) : null}
    </div>
  );
}