83 lines
2.6 KiB
TypeScript
83 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { LineItemsEditor } from "@/components/po/po-line-items-editor";
|
|
import { managerEditLineItems } from "./manager-line-edit-actions";
|
|
import type { LineItemInput } from "@/lib/validations/po";
|
|
|
|
interface Props {
|
|
poId: string;
|
|
initialItems: LineItemInput[];
|
|
}
|
|
|
|
export function ManagerLineItemsEditor({ poId, initialItems }: Props) {
|
|
const [editing, setEditing] = useState(false);
|
|
const [items, setItems] = useState<LineItemInput[]>(initialItems);
|
|
const [pending, setPending] = useState(false);
|
|
const [error, setError] = useState("");
|
|
const [saved, setSaved] = useState(false);
|
|
|
|
async function handleSave() {
|
|
setPending(true);
|
|
setError("");
|
|
const result = await managerEditLineItems({ poId, lineItems: items });
|
|
if ("error" in result) {
|
|
setError(result.error);
|
|
setPending(false);
|
|
} else {
|
|
setSaved(true);
|
|
setEditing(false);
|
|
setPending(false);
|
|
}
|
|
}
|
|
|
|
function handleCancel() {
|
|
setItems(initialItems);
|
|
setEditing(false);
|
|
setError("");
|
|
}
|
|
|
|
if (!editing) {
|
|
return (
|
|
<div className="mt-2">
|
|
{saved && (
|
|
<p className="mb-2 text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded px-3 py-1.5">
|
|
Line items updated. The original values are shown with strikethrough on the detail view.
|
|
</p>
|
|
)}
|
|
<button
|
|
onClick={() => setEditing(true)}
|
|
className="text-sm text-amber-700 hover:text-amber-800 font-medium underline underline-offset-2"
|
|
>
|
|
Edit line items
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="mt-4 rounded-lg border-2 border-amber-300 bg-amber-50 p-4">
|
|
<p className="text-xs font-semibold text-amber-700 mb-3 uppercase tracking-wide">
|
|
Manager — Editing Line Items
|
|
</p>
|
|
<LineItemsEditor items={items} onChange={setItems} />
|
|
{error && <p className="mt-2 text-sm text-danger-700">{error}</p>}
|
|
<div className="mt-4 flex gap-3">
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={pending}
|
|
className="rounded-lg bg-amber-600 px-4 py-2 text-sm font-semibold text-white hover:bg-amber-700 disabled:opacity-60 transition-colors"
|
|
>
|
|
{pending ? "Saving…" : "Save Changes"}
|
|
</button>
|
|
<button
|
|
onClick={handleCancel}
|
|
disabled={pending}
|
|
className="rounded-lg border border-neutral-300 bg-white px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-50 disabled:opacity-60"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|