crema-app-aifirst-template/app/routes/resources.tsx

import { useEffect, useMemo, useState } from "react"
import { Plus, Search, Trash2 } from "lucide-react"

import { AppShell } from "~/components/layout/app-shell"
import { Button } from "~/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "~/components/ui/card"
import { Input } from "~/components/ui/input"
import {
  createResource,
  deleteResource,
  seedResourcesIfEmpty,
  updateResource,
  useResources,
  type Resource,
} from "~/lib/resources"
import { pageTitle } from "~/lib/page-meta"

export const meta = () => pageTitle("Resources")

const statuses: Resource["status"][] = ["active", "paused", "archived"]

export default function ResourcesRoute() {
  const items = useResources()
  const [query, setQuery] = useState("")
  const [draftName, setDraftName] = useState("")

  useEffect(() => {
    seedResourcesIfEmpty()
  }, [])

  const filtered = useMemo(() => {
    const q = query.trim().toLowerCase()
    return q
      ? items.filter(
          (r) =>
            r.name.toLowerCase().includes(q) ||
            r.owner.toLowerCase().includes(q) ||
            r.status.includes(q),
        )
      : items
  }, [items, query])

  const create = () => {
    const name = draftName.trim()
    if (!name) return
    createResource({ name, owner: "You" })
    setDraftName("")
  }

  return (
    <AppShell title="Resources">
      <Card>
        <CardHeader>
          <CardTitle>Resources</CardTitle>
          <CardDescription>
            Example domain entity. CRUD goes through{" "}
            <code className="font-mono text-xs">~/lib/resources.ts</code> —
            swap that file's calls for{" "}
            <code className="font-mono text-xs">api.get/post/put/del</code>{" "}
            from <code className="font-mono text-xs">~/lib/api.ts</code> when
            you have a backend.
          </CardDescription>
        </CardHeader>
        <CardContent className="flex flex-col gap-4">
          <div className="flex flex-wrap items-center gap-2">
            <div className="relative flex-1 min-w-48">
              <Search className="pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                data-action="resources-search"
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Search name, owner, status…"
                className="pl-8"
              />
            </div>
            <Input
              data-action="resources-new-name"
              value={draftName}
              onChange={(e) => setDraftName(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === "Enter") create()
              }}
              placeholder="New resource name…"
              className="max-w-64"
            />
            <Button
              data-action="resources-create"
              onClick={create}
              disabled={!draftName.trim()}
            >
              <Plus className="size-4" /> Add
            </Button>
          </div>

          <div className="overflow-hidden rounded-lg border bg-card/40">
            <table className="w-full text-sm">
              <thead className="bg-muted/50 text-xs uppercase tracking-wide text-muted-foreground">
                <tr>
                  <th className="px-3 py-2 text-left font-medium">Name</th>
                  <th className="px-3 py-2 text-left font-medium">Owner</th>
                  <th className="px-3 py-2 text-left font-medium">Status</th>
                  <th className="px-3 py-2 text-left font-medium">Updated</th>
                  <th className="w-10 px-3 py-2"></th>
                </tr>
              </thead>
              <tbody>
                {filtered.length === 0 ? (
                  <tr>
                    <td
                      colSpan={5}
                      className="px-3 py-8 text-center text-muted-foreground"
                    >
                      {items.length === 0
                        ? "No resources yet — add one above."
                        : "No matches."}
                    </td>
                  </tr>
                ) : (
                  filtered.map((r) => (
                    <tr
                      key={r.id}
                      className="border-t transition-colors hover:bg-accent/30"
                    >
                      <td className="px-3 py-2 font-medium">{r.name}</td>
                      <td className="px-3 py-2 text-muted-foreground">
                        {r.owner}
                      </td>
                      <td className="px-3 py-2">
                        <select
                          data-action={`resources-status-${r.id}`}
                          value={r.status}
                          onChange={(e) =>
                            updateResource(r.id, {
                              status: e.target.value as Resource["status"],
                            })
                          }
                          className="rounded-md border bg-background px-1.5 py-0.5 text-xs"
                        >
                          {statuses.map((s) => (
                            <option key={s} value={s}>
                              {s}
                            </option>
                          ))}
                        </select>
                      </td>
                      <td className="px-3 py-2 text-xs text-muted-foreground tabular-nums">
                        {new Date(r.updatedAt).toLocaleDateString()}
                      </td>
                      <td className="px-2 py-2 text-right">
                        <Button
                          data-action={`resources-delete-${r.id}`}
                          variant="ghost"
                          size="icon-sm"
                          aria-label="Delete"
                          onClick={() => {
                            if (window.confirm(`Delete "${r.name}"?`))
                              deleteResource(r.id)
                          }}
                        >
                          <Trash2 className="size-4 text-destructive" />
                        </Button>
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>

          <p className="text-xs text-muted-foreground">
            {items.length} total · {filtered.length} shown
          </p>
        </CardContent>
      </Card>
    </AppShell>
  )
}