diff options
| author | dujinkim <dujin.kim@dtsolution.co.kr> | 2025-04-28 02:13:30 +0000 |
|---|---|---|
| committer | dujinkim <dujin.kim@dtsolution.co.kr> | 2025-04-28 02:13:30 +0000 |
| commit | ef4c533ebacc2cdc97e518f30e9a9350004fcdfb (patch) | |
| tree | 345251a3ed0f4429716fa5edaa31024d8f4cb560 /components/form-data/sedp-components.tsx | |
| parent | 9ceed79cf32c896f8a998399bf1b296506b2cd4a (diff) | |
~20250428 작업사항
Diffstat (limited to 'components/form-data/sedp-components.tsx')
| -rw-r--r-- | components/form-data/sedp-components.tsx | 173 |
1 files changed, 173 insertions, 0 deletions
diff --git a/components/form-data/sedp-components.tsx b/components/form-data/sedp-components.tsx new file mode 100644 index 00000000..4865e23d --- /dev/null +++ b/components/form-data/sedp-components.tsx @@ -0,0 +1,173 @@ +"use client"; + +import * as React from "react"; +import { Button } from "@/components/ui/button"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle +} from "@/components/ui/dialog"; +import { Loader, Send, AlertTriangle, CheckCircle } from "lucide-react"; +import { Badge } from "@/components/ui/badge"; +import { Progress } from "@/components/ui/progress"; + +// SEDP Send Confirmation Dialog +export function SEDPConfirmationDialog({ + isOpen, + onClose, + onConfirm, + formName, + tagCount, + isLoading +}: { + isOpen: boolean; + onClose: () => void; + onConfirm: () => void; + formName: string; + tagCount: number; + isLoading: boolean; +}) { + return ( + <Dialog open={isOpen} onOpenChange={onClose}> + <DialogContent className="sm:max-w-md"> + <DialogHeader> + <DialogTitle>Send Data to SEDP</DialogTitle> + <DialogDescription> + You are about to send form data to the Samsung Engineering Design Platform (SEDP). + </DialogDescription> + </DialogHeader> + + <div className="py-4"> + <div className="grid grid-cols-2 gap-4 mb-4"> + <div className="text-muted-foreground">Form Name:</div> + <div className="font-medium">{formName}</div> + + <div className="text-muted-foreground">Total Tags:</div> + <div className="font-medium">{tagCount}</div> + </div> + + <div className="bg-amber-50 p-3 rounded-md border border-amber-200 flex items-start gap-2"> + <AlertTriangle className="h-5 w-5 text-amber-500 mt-0.5 flex-shrink-0" /> + <div className="text-sm text-amber-800"> + Data sent to SEDP cannot be easily reverted. Please ensure all information is correct before proceeding. + </div> + </div> + </div> + + <DialogFooter className="gap-2 sm:gap-0"> + <Button variant="outline" onClick={onClose} disabled={isLoading}> + Cancel + </Button> + <Button + variant="samsung" + onClick={onConfirm} + disabled={isLoading} + className="gap-2" + > + {isLoading ? ( + <> + <Loader className="h-4 w-4 animate-spin" /> + Sending... + </> + ) : ( + <> + <Send className="h-4 w-4" /> + Send to SEDP + </> + )} + </Button> + </DialogFooter> + </DialogContent> + </Dialog> + ); +} + +// SEDP Status Dialog - shows the result of the SEDP operation +export function SEDPStatusDialog({ + isOpen, + onClose, + status, + message, + successCount, + errorCount, + totalCount +}: { + isOpen: boolean; + onClose: () => void; + status: 'success' | 'error' | 'partial'; + message: string; + successCount: number; + errorCount: number; + totalCount: number; +}) { + // Calculate percentage for the progress bar + const percentage = Math.round((successCount / totalCount) * 100); + + return ( + <Dialog open={isOpen} onOpenChange={onClose}> + <DialogContent className="sm:max-w-md"> + <DialogHeader> + <DialogTitle> + {status === 'success' ? 'Data Sent Successfully' : + status === 'partial' ? 'Partially Successful' : + 'Failed to Send Data'} + </DialogTitle> + </DialogHeader> + + <div className="py-4"> + {/* Status Icon */} + <div className="flex justify-center mb-4"> + {status === 'success' ? ( + <div className="h-12 w-12 rounded-full bg-green-100 flex items-center justify-center"> + <CheckCircle className="h-8 w-8 text-green-600" /> + </div> + ) : status === 'partial' ? ( + <div className="h-12 w-12 rounded-full bg-amber-100 flex items-center justify-center"> + <AlertTriangle className="h-8 w-8 text-amber-600" /> + </div> + ) : ( + <div className="h-12 w-12 rounded-full bg-red-100 flex items-center justify-center"> + <AlertTriangle className="h-8 w-8 text-red-600" /> + </div> + )} + </div> + + {/* Message */} + <p className="text-center mb-4">{message}</p> + + {/* Progress Stats */} + <div className="space-y-2 mb-4"> + <div className="flex justify-between text-sm"> + <span>Progress</span> + <span>{percentage}%</span> + </div> + <Progress value={percentage} className="h-2" /> + <div className="flex justify-between text-sm pt-1"> + <div> + <Badge variant="outline" className="bg-green-50 text-green-700 hover:bg-green-50"> + {successCount} Successful + </Badge> + </div> + {errorCount > 0 && ( + <div> + <Badge variant="outline" className="bg-red-50 text-red-700 hover:bg-red-50"> + {errorCount} Failed + </Badge> + </div> + )} + </div> + </div> + </div> + + <DialogFooter> + <Button onClick={onClose}> + Close + </Button> + </DialogFooter> + </DialogContent> + </Dialog> + ); +}
\ No newline at end of file |
