feat: Mise en place des paiements en plusieurs fois (partie BACK) [#25]

Front-End/src/components/DateTab.js

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { Check } from 'lucide-react';
+import Popup from '@/components/Popup';
+
+const DateTab = ({ dates, activeTab, handleDateChange, handleEdit, type, paymentPlanId }) => {
+  const [popupVisible, setPopupVisible] = useState(false);
+  const [popupMessage, setPopupMessage] = useState("");
+  const [modifiedDates, setModifiedDates] = useState({});
+
+  const submit = (updatedData) => {
+    const dataWithType = {
+      ...updatedData,
+      type: type
+    };
+    handleEdit(paymentPlanId, dataWithType)
+      .then(() => {
+        setPopupMessage(`Mise à jour de la date d'échéance effectuée avec succès`);
+        setPopupVisible(true);
+        setModifiedDates({});
+      })
+      .catch(error => {
+        console.error(error);
+      });
+  };
+
+  const handleDateChangeWithModification = (tab, index, value) => {
+    handleDateChange(tab, index, value);
+    setModifiedDates(prev => ({ ...prev, [`${tab}-${index}`]: true }));
+  };
+
+  return (
+    <div className="bg-white p-4 rounded-lg h-auto max-h-96 overflow-y-auto">
+      <div className="flex flex-col space-y-3">
+        {dates[activeTab]?.map((date, index) => (
+          <div key={index} className="flex items-center space-x-3">
+            <span className="text-emerald-700 font-semibold">Échéance {index + 1}</span>
+            <input
+              type="date"
+              value={date}
+              onChange={(e) => handleDateChangeWithModification(activeTab, index, e.target.value)}
+              className="p-2 border border-emerald-300 rounded focus:outline-none focus:ring-2 focus:ring-emerald-500 cursor-pointer"
+            />
+            {modifiedDates[`${activeTab}-${index}`] && (
+              <button
+                type="button"
+                onClick={() => submit({ frequency: dates[activeTab].length, due_dates: dates[activeTab] })}
+                className="text-emerald-500 hover:text-emerald-800"
+              >
+                <Check className="w-5 h-5" />
+              </button>
+            )}
+          </div>
+        ))}
+      </div>
+      <Popup
+        visible={popupVisible}
+        message={popupMessage}
+        onConfirm={() => setPopupVisible(false)}
+        onCancel={() => setPopupVisible(false)}
+        uniqueConfirmButton={true}
+      />
+    </div>
+  );
+};
+
+export default DateTab;