diff --git a/src/pages/notification/blocks/AddDialog.tsx b/src/pages/notification/blocks/AddDialog.tsx index 2e9322c..8087872 100644 --- a/src/pages/notification/blocks/AddDialog.tsx +++ b/src/pages/notification/blocks/AddDialog.tsx @@ -26,9 +26,10 @@ import { Button } from '@/components/ui/button'; import { useManageNotificationContext } from '../hooks/useManageNotificationContext'; import { doSaveLogActivity } from '@/actions/GlobalActions'; import { CustomerProps } from '@/pages/master/provider/blocks/AddDialog'; -import { Check, ChevronDown } from 'lucide-react'; +import { Check, ChevronDown, X } from 'lucide-react'; import { initialStateNotification, selectedNotification, validateFormNotification } from './Types'; import { useDebounce } from './useDebounce'; +import Papa from 'papaparse'; const API_URL_CUSTOMER = apiConfig.service_customer; const API_URL_NOTIFICATION = apiConfig.service_notification; @@ -42,16 +43,23 @@ const AddDialog = () => { const [errors, setErrors] = useState>({}); const [searchQuery, setSearchQuery] = useState(''); const debouncedSearchQuery = useDebounce(searchQuery, 500); + const fileInputRef = useRef(null); const [formField, setFormField] = useState(initialStateNotification); const [open, setOpen] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false); const [customers, setCustomers] = useState([]); + const [uploadedFileName, setUploadedFileName] = useState(''); + const resetForm = () => { setFormField({ ...initialStateNotification }); setIsSubmitting(false); setAlert({ show: false, message: '' }); setErrors({}); + setUploadedFileName(''); + if (fileInputRef.current) { + fileInputRef.current.value = ''; + } }; const handleChange = (e: React.ChangeEvent) => { @@ -79,7 +87,6 @@ const AddDialog = () => { try { const response = await PostData(`${API_URL_NOTIFICATION}/send`, formField); - // console.log('send response :', response); if (response?.status) { handleAddDialog(false); @@ -148,6 +155,90 @@ const AddDialog = () => { } }, [showAddDialog]); + const handleFileUpload = (event: React.ChangeEvent) => { + const file = event.target.files?.[0]; + + if (!file) return; + + // Validasi tipe file + if (!file.name.endsWith('.csv')) { + toast.error('Please upload a CSV file'); + return; + } + + setUploadedFileName(file.name); + + Papa.parse(file, { + header: true, + skipEmptyLines: true, + dynamicTyping: false, + complete: (results) => { + try { + const phoneNumbers: string[] = []; + + // Extract phone numbers from CSV + results.data.forEach((row: any) => { + // Cari kolom yang berisi nomor telepon (bisa MSISDN, phone, atau nama kolom lain) + const phone = row.MSISDN || row.msisdn || row.phone || row.Phone || row.PHONE; + + if (phone) { + // Bersihkan nomor telepon dari karakter non-digit + const cleanPhone = String(phone).replace(/\D/g, ''); + + if (cleanPhone && cleanPhone.length >= 10) { + phoneNumbers.push(cleanPhone); + } + } + }); + + if (phoneNumbers.length === 0) { + toast.error('No valid phone numbers found in CSV. Please check column name (MSISDN)'); + setUploadedFileName(''); + if (fileInputRef.current) { + fileInputRef.current.value = ''; + } + return; + } + + // Update form field dengan phone numbers + setFormField((prev) => ({ + ...prev, + customer_phone: phoneNumbers + })); + + toast.success(`${phoneNumbers.length} phone numbers extracted successfully`); + } catch (error) { + console.error('Error parsing CSV:', error); + toast.error('Failed to parse CSV file'); + setUploadedFileName(''); + if (fileInputRef.current) { + fileInputRef.current.value = ''; + } + } + }, + error: (error) => { + console.error('Error reading CSV:', error); + toast.error('Error reading CSV file'); + setUploadedFileName(''); + if (fileInputRef.current) { + fileInputRef.current.value = ''; + } + } + }); + }; + + const handleRemoveFile = () => { + setFormField((prev) => ({ + ...prev, + customer_phone: [] + })); + setUploadedFileName(''); + if (fileInputRef.current) { + fileInputRef.current.value = ''; + } + toast.info('Phone numbers cleared'); + }; + return ( @@ -358,6 +449,7 @@ const AddDialog = () => { checked={formField.via === 'whatsapp'} onChange={handleChange} className="accent-blue-600" + disabled /> WhatsApp @@ -372,6 +464,38 @@ const AddDialog = () => { )} +
+
+ +
+ + {uploadedFileName && formField.customer_phone.length > 0 && ( +
+ + + {uploadedFileName} - {formField.customer_phone.length} phone numbers + + +
+ )} +
+
+
+