1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
|
"use client"
import * as React from "react"
import { toast } from "sonner"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { VendorWithTbeFields } from "@/config/vendorTbeColumnsConfig"
import { getErrorMessage } from "@/lib/handle-error"
import { saveTbeResult } from "@/lib/rfqs/service"
// Define the props for the TbeResultDialog component
interface TbeResultDialogProps {
open: boolean
onOpenChange: (open: boolean) => void
tbe: VendorWithTbeFields | null
onRefresh?: () => void
}
// Define TBE result options
const TBE_RESULT_OPTIONS = [
{ value: "pass", label: "Pass", badgeVariant: "default" },
{ value: "non-pass", label: "Non-Pass", badgeVariant: "destructive" },
{ value: "conditional pass", label: "Conditional Pass", badgeVariant: "secondary" },
] as const
type TbeResultOption = typeof TBE_RESULT_OPTIONS[number]["value"]
export function TbeResultDialog({
open,
onOpenChange,
tbe,
onRefresh,
}: TbeResultDialogProps) {
// Initialize state for form inputs
const [result, setResult] = React.useState<TbeResultOption | "">("")
const [note, setNote] = React.useState("")
const [isSubmitting, setIsSubmitting] = React.useState(false)
// Update form values when the tbe prop changes
React.useEffect(() => {
if (tbe) {
setResult((tbe.tbeResult as TbeResultOption) || "")
setNote(tbe.tbeNote || "")
}
}, [tbe])
// Reset form when dialog closes
React.useEffect(() => {
if (!open) {
// Small delay to avoid visual glitches when dialog is closing
const timer = setTimeout(() => {
if (!tbe) {
setResult("")
setNote("")
}
}, 300)
return () => clearTimeout(timer)
}
}, [open, tbe])
// Handle form submission with server action
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
if (!tbe || !result) return
setIsSubmitting(true)
try {
// Call the server action to save the TBE result
const response = await saveTbeResult({
id: tbe.tbeId ?? 0, // This is the id in the rfq_evaluations table
vendorId: tbe.vendorId, // This is the vendorId in the rfq_evaluations table
result: result, // The selected evaluation result
notes: note, // The evaluation notes
})
if (!response.success) {
throw new Error(response.message || "Failed to save TBE result")
}
// Show success toast
toast.success("TBE result saved successfully")
// Close the dialog
onOpenChange(false)
// Refresh the data if refresh callback is provided
if (onRefresh) {
onRefresh()
}
} catch (error) {
// Show error toast
toast.error(`Failed to save: ${getErrorMessage(error)}`)
} finally {
setIsSubmitting(false)
}
}
// Find the selected result option
const selectedOption = TBE_RESULT_OPTIONS.find(option => option.value === result)
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-[500px]">
<DialogHeader>
<DialogTitle className="text-xl font-semibold">
{tbe?.tbeResult ? "Edit TBE Result" : "Enter TBE Result"}
</DialogTitle>
{tbe && (
<DialogDescription className="text-sm text-muted-foreground mt-1">
<div className="flex flex-col gap-1">
<span>
<strong>Vendor:</strong> {tbe.vendorName}
</span>
<span>
<strong>RFQ Code:</strong> {tbe.rfqCode}
</span>
{tbe.email && (
<span>
<strong>Email:</strong> {tbe.email}
</span>
)}
</div>
</DialogDescription>
)}
</DialogHeader>
<form onSubmit={handleSubmit} className="space-y-6 py-2">
<div className="space-y-2">
<Label htmlFor="tbe-result" className="text-sm font-medium">
Evaluation Result
</Label>
<Select
value={result}
onValueChange={(value) => setResult(value as TbeResultOption)}
required
>
<SelectTrigger id="tbe-result" className="w-full">
<SelectValue placeholder="Select a result" />
</SelectTrigger>
<SelectContent>
{TBE_RESULT_OPTIONS.map((option) => (
<SelectItem key={option.value} value={option.value}>
<div className="flex items-center">
<Badge variant={option.badgeVariant as any} className="mr-2">
{option.label}
</Badge>
</div>
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label htmlFor="tbe-note" className="text-sm font-medium">
Evaluation Note
</Label>
<Textarea
id="tbe-note"
placeholder="Enter evaluation notes..."
value={note}
onChange={(e) => setNote(e.target.value)}
className="min-h-[120px] resize-y"
/>
</div>
<DialogFooter className="gap-2 sm:gap-0">
<Button
type="button"
variant="outline"
onClick={() => onOpenChange(false)}
disabled={isSubmitting}
>
Cancel
</Button>
<Button
type="submit"
disabled={!result || isSubmitting}
className="min-w-[100px]"
>
{isSubmitting ? "Saving..." : "Save"}
</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
)
}
|
