Content calendarContent calendar

1import { useEffect, useMemo, useState, type FormEvent } from "react";2import { app } from "./app";3import { Icon } from "./Icon";4import type { Field, Row, Tone, Value } from "./types";5 6const TONE: Record<Tone, string> = {7  good: "bg-good/10 text-good ring-good/25",8  warn: "bg-warn/10 text-warn ring-warn/25",9  bad: "bg-bad/10 text-bad ring-bad/25",10  neutral: "bg-surface text-muted ring-line",11  accent: "bg-accent/10 text-accent ring-accent/25",12};13 14const statusField = app.fields.find((f) => f.key === app.statusKey)!;15const statuses = statusField.options ?? [];16const seedRows = (): Row[] => app.seed.map((r, i) => ({ ...r, id: `seed-${i + 1}` }));17 18function load(): Row[] {19  try {20    const raw = localStorage.getItem(app.storageKey);21    if (raw) return JSON.parse(raw) as Row[];22  } catch {23    /* storage blocked: fall back to sample data */24  }25  return seedRows();26}27 28function money(n: number) {29  return `${app.currency ?? "$"}${n.toLocaleString(undefined, { maximumFractionDigits: 2 })}`;30}31 32function show(f: Field, v: Value | undefined) {33  if (v === undefined || v === "") return "—";34  if (f.type === "money") return money(Number(v));35  if (f.type === "date") {36    const d = new Date(`${v}T00:00:00`);37    return Number.isNaN(d.getTime()) ? String(v) : d.toLocaleDateString(undefined, { day: "numeric", month: "short", year: "numeric" });38  }39  if (f.type === "number") return Number(v).toLocaleString();40  return String(v);41}42 43function Pill({ value }: { value: string }) {44  return <span className={`inline-flex items-center whitespace-nowrap rounded-full px-2 py-0.5 text-xs font-medium ring-1 ring-inset ${TONE[app.tones[value] ?? "neutral"]}`}>{value}</span>;45}46 47function Editor({ row, onSave, onClose }: { row: Row | null; onSave: (r: Row) => void; onClose: () => void }) {48  const [draft, setDraft] = useState<Record<string, Value>>(() => row ?? Object.fromEntries(app.fields.map((f) => [f.key, f.type === "select" ? (f.options?.[0] ?? "") : ""])));49  useEffect(() => {50    const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose();51    window.addEventListener("keydown", onKey);52    return () => window.removeEventListener("keydown", onKey);53  }, [onClose]);54  const submit = (e: FormEvent) => {55    e.preventDefault();56    const clean = Object.fromEntries(app.fields.map((f) => [f.key, f.type === "number" || f.type === "money" ? Number(draft[f.key] || 0) : String(draft[f.key] ?? "").trim()]));57    onSave({ ...clean, id: row?.id ?? crypto.randomUUID() });58  };59  const input = "mt-1.5 block w-full rounded-card border border-line bg-bg px-3 text-[15px] outline-none focus:border-accent";60  return (61    <div className="fixed inset-0 z-50 grid place-items-center bg-black/40 p-4" onClick={onClose}>62      <form role="dialog" aria-modal="true" aria-labelledby="editor-title" onSubmit={submit} onClick={(e) => e.stopPropagation()} className="max-h-[90vh] w-full max-w-lg overflow-auto rounded-card border border-line bg-bg p-6 shadow-2xl">63        <h2 id="editor-title" className="font-heading text-xl font-semibold">64          {row ? `Edit ${app.entity.singular.toLowerCase()}` : `New ${app.entity.singular.toLowerCase()}`}65        </h2>66        <div className="mt-5 grid gap-4 sm:grid-cols-2">67          {app.fields.map((f, i) => (68            <label key={f.key} className={`text-sm font-medium ${f.type === "longtext" || i === 0 ? "sm:col-span-2" : ""}`}>69              {f.label}70              {f.type === "select" ? (71                <select value={String(draft[f.key] ?? "")} onChange={(e) => setDraft({ ...draft, [f.key]: e.target.value })} className={`${input} h-11`}>72                  {f.options?.map((o) => (73                    <option key={o}>{o}</option>74                  ))}75                </select>76              ) : f.type === "longtext" ? (77                <textarea value={String(draft[f.key] ?? "")} onChange={(e) => setDraft({ ...draft, [f.key]: e.target.value })} rows={3} className={`${input} py-2.5`} />78              ) : (79                <input80                  autoFocus={i === 0}81                  required={f.required}82                  type={f.type === "money" || f.type === "number" ? "number" : f.type === "date" ? "date" : f.type === "email" ? "email" : "text"}83                  step={f.type === "money" ? "0.01" : undefined}84                  min={f.type === "money" ? 0 : undefined}85                  value={String(draft[f.key] ?? "")}86                  onChange={(e) => setDraft({ ...draft, [f.key]: e.target.value })}87                  className={`${input} h-11`}88                />89              )}90            </label>91          ))}92        </div>93        <div className="mt-6 flex justify-end gap-2">94          <button type="button" onClick={onClose} className="h-10 rounded-card border border-line px-4 font-medium hover:bg-surface">95            Cancel96          </button>97          <button type="submit" className="h-10 rounded-card bg-accent px-4 font-medium text-accent-fg hover:opacity-90">98            Save99          </button>100        </div>101      </form>102    </div>103  );104}105 106export default function App() {107  const [rows, setRows] = useState<Row[]>(load);108  const [query, setQuery] = useState("");109  const [filter, setFilter] = useState("All");110  const [view, setView] = useState(app.views[0]);111  const [editing, setEditing] = useState<Row | "new" | null>(null);112 113  useEffect(() => {114    try {115      localStorage.setItem(app.storageKey, JSON.stringify(rows));116    } catch {117      /* storage blocked: changes last for this visit only */118    }119  }, [rows]);120 121  const shown = useMemo(() => {122    const q = query.trim().toLowerCase();123    return rows.filter((r) => (filter === "All" || r[app.statusKey] === filter) && (!q || Object.values(r).some((v) => String(v).toLowerCase().includes(q))));124  }, [rows, query, filter]);125 126  const columns = app.fields.filter((f) => !f.hideInTable);127  const save = (r: Row) => {128    setRows((list) => (list.some((x) => x.id === r.id) ? list.map((x) => (x.id === r.id ? r : x)) : [r, ...list]));129    setEditing(null);130  };131  const remove = (r: Row) => {132    if (confirm(`Delete "${r[app.titleKey]}"?`)) setRows((list) => list.filter((x) => x.id !== r.id));133  };134  const move = (r: Row, status: string) => setRows((list) => list.map((x) => (x.id === r.id ? { ...x, [app.statusKey]: status } : x)));135 136  return (137    <div className="min-h-screen bg-surface font-body text-fg antialiased">138      <header className="border-b border-line bg-bg">139        <div className="mx-auto flex h-16 max-w-7xl items-center gap-3 px-5 sm:px-8">140          <span className="grid h-9 w-9 place-items-center rounded-card bg-accent text-accent-fg">141            <Icon name={app.icon} className="h-5 w-5" />142          </span>143          <span className="font-heading text-lg font-semibold">{app.brand}</span>144          <button type="button" onClick={() => confirm("Replace your changes with the sample data?") && setRows(seedRows())} className="ml-auto text-sm text-muted hover:text-fg">145            Reset sample data146          </button>147        </div>148      </header>149 150      <main className="mx-auto max-w-7xl space-y-6 px-5 py-8 sm:px-8">151        <div className="flex flex-wrap items-end justify-between gap-4">152          <div>153            <h1 className="font-heading text-2xl font-semibold tracking-tight sm:text-3xl">{app.title}</h1>154            <p className="mt-1 text-muted">{app.subtitle}</p>155          </div>156          <button type="button" onClick={() => setEditing("new")} className="inline-flex h-10 items-center gap-2 rounded-card bg-accent px-4 font-medium text-accent-fg hover:opacity-90">157            <span aria-hidden="true" className="text-lg leading-none">158              +159            </span>160            New {app.entity.singular.toLowerCase()}161          </button>162        </div>163 164        <section aria-label="Summary" className="grid grid-cols-2 gap-4 lg:grid-cols-4">165          {app.summary.map((s) => {166            const subset = s.status ? rows.filter((r) => r[app.statusKey] === s.status) : rows;167            const field = app.fields.find((f) => f.key === s.field);168            const value = s.kind === "count" ? subset.length.toLocaleString() : (() => {169              const total = subset.reduce((n, r) => n + Number(r[s.field ?? ""] ?? 0), 0);170              return field?.type === "money" ? money(total) : total.toLocaleString();171            })();172            return (173              <div key={s.label} className="rounded-card border border-line bg-bg p-5">174                <p className="text-sm text-muted">{s.label}</p>175                <p className="mt-2 font-heading text-2xl font-semibold tabular-nums tracking-tight">{value}</p>176              </div>177            );178          })}179        </section>180 181        <div className="flex flex-wrap items-center gap-3">182          <label className="min-w-0 flex-1 sm:max-w-xs">183            <span className="sr-only">Search {app.entity.plural.toLowerCase()}</span>184            <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder={`Search ${app.entity.plural.toLowerCase()}`} className="h-10 w-full rounded-card border border-line bg-bg px-3.5 text-[15px] outline-none placeholder:text-muted focus:border-accent" />185          </label>186          <label>187            <span className="sr-only">Filter by {statusField.label.toLowerCase()}</span>188            <select value={filter} onChange={(e) => setFilter(e.target.value)} className="h-10 rounded-card border border-line bg-bg px-3 text-[15px] outline-none focus:border-accent">189              <option>All</option>190              {statuses.map((s) => (191                <option key={s}>{s}</option>192              ))}193            </select>194          </label>195          {app.views.length > 1 ? (196            <div className="ml-auto flex rounded-card border border-line bg-bg p-1" role="group" aria-label="View">197              {app.views.map((v) => (198                <button key={v} type="button" aria-pressed={view === v} onClick={() => setView(v)} className={`h-8 rounded-[calc(var(--radius-card)-2px)] px-3 text-sm font-medium capitalize ${view === v ? "bg-fg text-bg" : "text-muted hover:text-fg"}`}>199                  {v}200                </button>201              ))}202            </div>203          ) : null}204        </div>205 206        {view === "table" ? (207          <div className="overflow-hidden rounded-card border border-line bg-bg">208            <div className="overflow-x-auto">209              <table className="w-full min-w-[720px] text-left text-[15px]">210                <thead className="border-b border-line text-sm text-muted">211                  <tr>212                    {columns.map((c) => (213                      <th key={c.key} scope="col" className={`px-5 py-3 font-medium ${c.type === "money" || c.type === "number" ? "text-right" : ""}`}>214                        {c.label}215                      </th>216                    ))}217                    <th scope="col" className="px-5 py-3">218                      <span className="sr-only">Actions</span>219                    </th>220                  </tr>221                </thead>222                <tbody className="divide-y divide-line">223                  {shown.map((r) => (224                    <tr key={r.id} className="group hover:bg-surface/60">225                      {columns.map((c) => (226                        <td key={c.key} className={`px-5 py-3.5 ${c.key === app.titleKey ? "font-medium" : "text-muted"} ${c.type === "money" || c.type === "number" ? "text-right tabular-nums" : ""}`}>227                          {c.key === app.statusKey ? <Pill value={String(r[c.key])} /> : show(c, r[c.key])}228                        </td>229                      ))}230                      <td className="whitespace-nowrap px-5 py-3.5 text-right text-sm">231                        <button type="button" onClick={() => setEditing(r)} className="rounded px-2 py-1 font-medium text-accent hover:underline">232                          Edit233                        </button>234                        <button type="button" onClick={() => remove(r)} className="rounded px-2 py-1 text-muted hover:text-bad">235                          Delete236                        </button>237                      </td>238                    </tr>239                  ))}240                </tbody>241              </table>242            </div>243            {shown.length === 0 ? (244              <div className="px-6 py-16 text-center">245                <p className="font-medium">No {app.entity.plural.toLowerCase()} found</p>246                <p className="mt-1 text-sm text-muted">{rows.length ? "Try a different search or filter." : `Add your first ${app.entity.singular.toLowerCase()} to get started.`}</p>247              </div>248            ) : null}249          </div>250        ) : (251          <div className="grid gap-4 overflow-x-auto pb-2" style={{ gridTemplateColumns: `repeat(${statuses.length}, minmax(240px, 1fr))` }}>252            {statuses.map((s) => {253              const items = shown.filter((r) => r[app.statusKey] === s);254              return (255                <section key={s} aria-label={s} className="rounded-card border border-line bg-bg/60 p-3">256                  <h2 className="flex items-center justify-between px-1 pb-3 text-sm font-semibold">257                    <Pill value={s} />258                    <span className="tabular-nums text-muted">{items.length}</span>259                  </h2>260                  <ul className="space-y-2.5">261                    {items.map((r) => (262                      <li key={r.id} className="rounded-card border border-line bg-bg p-3.5 shadow-sm">263                        <button type="button" onClick={() => setEditing(r)} className="text-left font-medium hover:underline">264                          {String(r[app.titleKey])}265                        </button>266                        <dl className="mt-2 space-y-1 text-sm text-muted">267                          {columns268                            .filter((c) => c.key !== app.titleKey && c.key !== app.statusKey)269                            .slice(0, 2)270                            .map((c) => (271                              <div key={c.key} className="flex justify-between gap-2">272                                <dt>{c.label}</dt>273                                <dd className="truncate text-fg tabular-nums">{show(c, r[c.key])}</dd>274                              </div>275                            ))}276                        </dl>277                        <label className="mt-3 block">278                          <span className="sr-only">Move {String(r[app.titleKey])}</span>279                          <select value={s} onChange={(e) => move(r, e.target.value)} className="h-8 w-full rounded-card border border-line bg-surface px-2 text-sm">280                            {statuses.map((o) => (281                              <option key={o}>{o}</option>282                            ))}283                          </select>284                        </label>285                      </li>286                    ))}287                    {items.length === 0 ? <li className="rounded-card border border-dashed border-line px-3 py-6 text-center text-sm text-muted">Empty</li> : null}288                  </ul>289                </section>290              );291            })}292          </div>293        )}294        <p className="text-center text-sm text-muted">Saved in this browser (localStorage). Connect a database to share it with your team.</p>295      </main>296 297      {editing ? <Editor row={editing === "new" ? null : editing} onSave={save} onClose={() => setEditing(null)} /> : null}298    </div>299  );300}