1 files changed, 19 insertions, 4 deletions
diff --git a/src/modules/result/components/ImportModal.tsx b/src/modules/result/components/ImportModal.tsx
index fd4c7d3..1bb7b26 100644
--- a/src/modules/result/components/ImportModal.tsx
+++ b/src/modules/result/components/ImportModal.tsx
@@ -1,6 +1,6 @@
 import toast from '@/common/libs/toast'
 import { useResultStore } from '@/common/stores/useResultStore'
-import { Button, Modal, ModalBody, ModalContent, ModalHeader } from '@nextui-org/react'
+import { Button, Input, Modal, ModalBody, ModalContent, ModalHeader, Spacer } from '@nextui-org/react'
 import { useMutation } from '@tanstack/react-query'
 import { AlertTriangleIcon } from 'lucide-react'
 import React, { ChangeEvent, FormEvent, useMemo, useState } from 'react'
@@ -14,6 +14,7 @@ type Props = {
 
 const ImportModal = ({ modal }: Props) => {
   const [file, setFile] = useState<File>()
+  const [confirmation, setConfirmation] = useState<string>('')
   const { companies, filter } = useResultStore()
 
   const selectedCompany = useMemo(() => {
@@ -47,20 +48,34 @@ const ImportModal = ({ modal }: Props) => {
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault()
     importMutation.mutate()
+    setConfirmation('')
   }
 
+  const confirmationText = `Hapus produk dan hasil so ${selectedCompany?.label}`
+  const isConfirmed = confirmation.toLowerCase() === confirmationText.toLowerCase()
+
   return (
     <Modal isOpen={modal.isOpen} onOpenChange={modal.onOpenChange}>
       <ModalContent>
-        <ModalHeader>Import Product</ModalHeader>
+        <ModalHeader>Import Product {selectedCompany?.label}</ModalHeader>
         <ModalBody>
           <form className='pb-6' onSubmit={handleSubmit}>
             <input type='file' onChange={handleFileChange} accept='.xls, .xlsx' />
-            <Button type='submit' color='primary' className='mt-4 w-full' isDisabled={!file || importMutation.isPending}>
+            <Spacer y={4} />
+            <Input
+              type="text"
+              label='Ketik ulang untuk konfirmasi'
+              placeholder={confirmationText}
+              name="confirmation"
+              autoComplete='false'
+              onChange={(e) => setConfirmation(e.target.value)}
+              value={confirmation}
+            />
+            <Button type='submit' color='primary' className='mt-4 w-full' isDisabled={!file || importMutation.isPending || !isConfirmed}>
               {importMutation.isPending ? 'Loading...' : 'Submit'}
             </Button>
 
-            <div className='text-xs font-medium p-4 bg-danger-600 text-neutral-50 rounded-medium mt-4 flex items-center gap-x-4'>
+            <div className='text-xs font-medium p-4 bg-danger-100 border border-danger-200 text-danger-600 rounded-medium mt-4 flex items-center gap-x-4'>
               <div>
                 <AlertTriangleIcon size={28} />
               </div>