Nick Szaunig
d31aa79f50
Replace the list-row layout with a responsive box grid (EntityCard):
icon avatar, title, badge, and 1-2 key fields visible at a glance per
box, matching what the user asked for ("Kaestchen" over rows).
Add an Aktiv/Historie tab split (ActiveHistoryTabs) so deactivated or
terminal-status entries move out of the default view instead of mixing
in with active ones:
- Apiaries, Colonies, Queens: split on deactivatedAt (the field the app
already uses everywhere for "Historie statt Loeschen").
- Task templates: split on the existing active boolean.
- Tasks: OPEN/IN_PROGRESS vs DONE/CANCELLED.
- Honey batches: everything vs SOLD/CONSUMED.
- Products: ACTIVE vs DISCONTINUED.
- Storage containers: everything vs OUT_OF_SERVICE.
Equipment and stock items have no lifecycle field in the schema, so
they keep the plain grid without a Historie tab.
Verified live: deactivating a Bienenstand moves it out of Aktiv into
Historie immediately, both counts update, reactivating moves it back.
54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
export type EntityLifecycleTab = "active" | "history";
|
|
|
|
interface ActiveHistoryTabsProps {
|
|
value: EntityLifecycleTab;
|
|
onChange: (value: EntityLifecycleTab) => void;
|
|
activeCount?: number;
|
|
historyCount?: number;
|
|
}
|
|
|
|
export function ActiveHistoryTabs({
|
|
value,
|
|
onChange,
|
|
activeCount,
|
|
historyCount,
|
|
}: ActiveHistoryTabsProps) {
|
|
return (
|
|
<div
|
|
role="tablist"
|
|
className="inline-flex w-fit rounded-xl border border-border/60 bg-muted/40 p-1"
|
|
>
|
|
<button
|
|
type="button"
|
|
role="tab"
|
|
aria-selected={value === "active"}
|
|
onClick={() => onChange("active")}
|
|
className={cn(
|
|
"rounded-lg px-4 py-1.5 text-sm font-medium transition-colors",
|
|
value === "active"
|
|
? "bg-card text-foreground shadow-[var(--shadow-soft)]"
|
|
: "text-muted-foreground hover:text-foreground",
|
|
)}
|
|
>
|
|
Aktiv{activeCount !== undefined ? ` (${activeCount})` : ""}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
role="tab"
|
|
aria-selected={value === "history"}
|
|
onClick={() => onChange("history")}
|
|
className={cn(
|
|
"rounded-lg px-4 py-1.5 text-sm font-medium transition-colors",
|
|
value === "history"
|
|
? "bg-card text-foreground shadow-[var(--shadow-soft)]"
|
|
: "text-muted-foreground hover:text-foreground",
|
|
)}
|
|
>
|
|
Historie{historyCount !== undefined ? ` (${historyCount})` : ""}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|