Melvin StroblandClaude Opus 5
1916f7f778
The submodule collapse was only half applied: .gitmodules was deleted but backend/ and frontend/ were still recorded as gitlinks, so none of their files were tracked. Replace the gitlinks with the real trees. Also untrack .env (it carried placeholder secrets) in favour of a tracked .env.example, drop the committed __pycache__, and narrow the blanket *.png ignore that would have swallowed design assets. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
70 lines
1.8 KiB
TypeScript
70 lines
1.8 KiB
TypeScript
import { useSuspenseQuery } from "@tanstack/react-query"
|
|
import { createFileRoute } from "@tanstack/react-router"
|
|
import { Search } from "lucide-react"
|
|
import { Suspense } from "react"
|
|
|
|
import { ItemsService } from "@/client"
|
|
import { DataTable } from "@/components/Common/DataTable"
|
|
import AddItem from "@/components/Items/AddItem"
|
|
import { columns } from "@/components/Items/columns"
|
|
import PendingItems from "@/components/Pending/PendingItems"
|
|
|
|
function getItemsQueryOptions() {
|
|
return {
|
|
queryFn: () => ItemsService.readItems({ skip: 0, limit: 100 }),
|
|
queryKey: ["items"],
|
|
}
|
|
}
|
|
|
|
export const Route = createFileRoute("/_layout/items")({
|
|
component: Items,
|
|
head: () => ({
|
|
meta: [
|
|
{
|
|
title: "Items - FastAPI Cloud",
|
|
},
|
|
],
|
|
}),
|
|
})
|
|
|
|
function ItemsTableContent() {
|
|
const { data: items } = useSuspenseQuery(getItemsQueryOptions())
|
|
|
|
if (items.data.length === 0) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center text-center py-12">
|
|
<div className="rounded-full bg-muted p-4 mb-4">
|
|
<Search className="h-8 w-8 text-muted-foreground" />
|
|
</div>
|
|
<h3 className="text-lg font-semibold">You don't have any items yet</h3>
|
|
<p className="text-muted-foreground">Add a new item to get started</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return <DataTable columns={columns} data={items.data} />
|
|
}
|
|
|
|
function ItemsTable() {
|
|
return (
|
|
<Suspense fallback={<PendingItems />}>
|
|
<ItemsTableContent />
|
|
</Suspense>
|
|
)
|
|
}
|
|
|
|
function Items() {
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold tracking-tight">Items</h1>
|
|
<p className="text-muted-foreground">Create and manage your items</p>
|
|
</div>
|
|
<AddItem />
|
|
</div>
|
|
<ItemsTable />
|
|
</div>
|
|
)
|
|
}
|