chore: upload parte 1 - logica
DevSecOps Enterprise Pipeline / security-gate-and-deploy (push) Failing after 41s
DevSecOps Enterprise Pipeline / security-gate-and-deploy (push) Failing after 41s
This commit is contained in:
@@ -0,0 +1,229 @@
|
||||
"use client";
|
||||
|
||||
import React from "react"
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import useSWR from "swr";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
|
||||
import { Search, Check, ChevronsUpDown } from "lucide-react";
|
||||
import type { BomItem, Component } from "@/lib/types";
|
||||
|
||||
const fetcher = (url: string) => fetch(url).then((r) => r.json());
|
||||
|
||||
interface BomItemDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
bomItem: BomItem | null;
|
||||
productId: number;
|
||||
onSave: (data: Partial<BomItem>) => Promise<void>;
|
||||
}
|
||||
|
||||
export function BomItemDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
bomItem,
|
||||
onSave,
|
||||
}: BomItemDialogProps) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [componentSearch, setComponentSearch] = useState("");
|
||||
const [dropdownOpen, setDropdownOpen] = useState(false);
|
||||
const { data: components = [] } = useSWR<Component[]>(
|
||||
"/api/components",
|
||||
fetcher
|
||||
);
|
||||
|
||||
const filteredComponents = components.filter((comp) => {
|
||||
if (!componentSearch.trim()) return true;
|
||||
const q = componentSearch.toLowerCase();
|
||||
return (
|
||||
comp.part_number.toLowerCase().includes(q) ||
|
||||
comp.name.toLowerCase().includes(q)
|
||||
);
|
||||
});
|
||||
|
||||
const [form, setForm] = useState({
|
||||
component_id: "",
|
||||
quantity: "1",
|
||||
reference_designator: "",
|
||||
notes: "",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (bomItem) {
|
||||
setForm({
|
||||
component_id: String(bomItem.component_id),
|
||||
quantity: String(bomItem.quantity),
|
||||
reference_designator: bomItem.reference_designator || "",
|
||||
notes: bomItem.notes || "",
|
||||
});
|
||||
} else {
|
||||
setForm({
|
||||
component_id: "",
|
||||
quantity: "1",
|
||||
reference_designator: "",
|
||||
notes: "",
|
||||
});
|
||||
}
|
||||
setComponentSearch("");
|
||||
setDropdownOpen(false);
|
||||
}, [bomItem, open]);
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
try {
|
||||
await onSave({
|
||||
component_id: Number(form.component_id),
|
||||
quantity: Number(form.quantity),
|
||||
reference_designator: form.reference_designator || null,
|
||||
notes: form.notes || null,
|
||||
});
|
||||
onOpenChange(false);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{bomItem ? "Edit BOM Item" : "Add Component to BOM"}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleSubmit} className="flex flex-col gap-4 pt-2">
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="bom_component">Component *</Label>
|
||||
<div className="relative">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
className="w-full justify-between font-normal"
|
||||
onClick={() => setDropdownOpen(!dropdownOpen)}
|
||||
>
|
||||
{form.component_id ? (
|
||||
<span className="truncate">
|
||||
<span className="font-mono text-xs mr-2">
|
||||
{components.find((c) => String(c.id) === form.component_id)?.part_number}
|
||||
</span>
|
||||
{components.find((c) => String(c.id) === form.component_id)?.name}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground">Select a component</span>
|
||||
)}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
|
||||
{dropdownOpen && (
|
||||
<div className="absolute z-50 mt-1 w-full rounded-md border bg-popover shadow-lg">
|
||||
<div className="flex items-center gap-2 border-b px-3 py-2">
|
||||
<Search className="h-4 w-4 text-muted-foreground shrink-0" />
|
||||
<input
|
||||
type="text"
|
||||
className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
|
||||
placeholder="Search by part number or name..."
|
||||
value={componentSearch}
|
||||
onChange={(e) => setComponentSearch(e.target.value)}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div className="max-h-[200px] overflow-y-auto p-1">
|
||||
{filteredComponents.length === 0 ? (
|
||||
<div className="py-4 text-center text-sm text-muted-foreground">
|
||||
No components found
|
||||
</div>
|
||||
) : (
|
||||
filteredComponents.map((comp) => (
|
||||
<button
|
||||
key={comp.id}
|
||||
type="button"
|
||||
className="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent/50 cursor-pointer"
|
||||
onClick={() => {
|
||||
setForm({ ...form, component_id: String(comp.id) });
|
||||
setDropdownOpen(false);
|
||||
setComponentSearch("");
|
||||
}}
|
||||
>
|
||||
{form.component_id === String(comp.id) ? (
|
||||
<Check className="h-3.5 w-3.5 text-primary shrink-0" />
|
||||
) : (
|
||||
<span className="w-3.5 shrink-0" />
|
||||
)}
|
||||
<span className="font-mono text-xs text-muted-foreground min-w-[80px]">
|
||||
{comp.part_number}
|
||||
</span>
|
||||
<span className="truncate">{comp.name}</span>
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="bom_qty">Quantity *</Label>
|
||||
<Input
|
||||
id="bom_qty"
|
||||
type="number"
|
||||
min="1"
|
||||
value={form.quantity}
|
||||
onChange={(e) => setForm({ ...form, quantity: e.target.value })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="ref_des">Reference Designator</Label>
|
||||
<Input
|
||||
id="ref_des"
|
||||
value={form.reference_designator}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, reference_designator: e.target.value })
|
||||
}
|
||||
placeholder="e.g. R1, C4, U2"
|
||||
className="font-mono"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="bom_notes">Notes</Label>
|
||||
<Textarea
|
||||
id="bom_notes"
|
||||
value={form.notes}
|
||||
onChange={(e) => setForm({ ...form, notes: e.target.value })}
|
||||
placeholder="Additional notes..."
|
||||
rows={2}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => onOpenChange(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={loading || !form.component_id}>
|
||||
{loading ? "Saving..." : bomItem ? "Update" : "Add to BOM"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user