classify web

2026-02-24 12:52:49 +05:00
commit 64af77101f
310 changed files with 45449 additions and 0 deletions
--- a/components/PagesComponent/Transactions/UploadReceiptModal.jsx
+++ b/components/PagesComponent/Transactions/UploadReceiptModal.jsx
@@ -0,0 +1,136 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { t } from "@/utils";
+import { updateBankTransferApi } from "@/utils/api";
+import { useState, useCallback } from "react";
+import { useDropzone } from "react-dropzone";
+import { MdClose } from "react-icons/md";
+import { toast } from "sonner";
+
+const UploadReceiptModal = ({
+  IsUploadRecipt,
+  setIsUploadRecipt,
+  transactionId,
+  setData,
+}) => {
+  const [selectedFile, setSelectedFile] = useState(null);
+  const [isUploading, setIsUploading] = useState(false);
+  const [preview, setPreview] = useState(null);
+
+  const onDrop = useCallback((acceptedFiles) => {
+    const file = acceptedFiles[0];
+    setSelectedFile(file);
+
+    // Create preview URL
+    const previewUrl = URL.createObjectURL(file);
+    setPreview(previewUrl);
+  }, []);
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    accept: {
+      "image/*": [".png", ".jpg", ".jpeg"],
+    },
+    maxFiles: 1,
+    multiple: false,
+  });
+
+  const clearSelection = () => {
+    if (preview) {
+      URL.revokeObjectURL(preview);
+    }
+    setSelectedFile(null);
+    setPreview(null);
+  };
+
+  const handleReceiptSubmit = async () => {
+    try {
+      setIsUploading(true);
+      const res = await updateBankTransferApi.updateBankTransfer({
+        payment_transection_id: transactionId,
+        payment_receipt: selectedFile,
+      });
+
+      if (res?.data?.error === false) {
+        setData((prevData) =>
+          prevData.map((item) =>
+            item.id === transactionId ? res?.data?.data : item
+          )
+        );
+        toast.success(t("receiptUploaded"));
+        setIsUploadRecipt(false);
+      } else {
+        toast.error(res?.data?.message);
+      }
+    } catch (error) {
+      console.log("Failed To Upload Receipt", error);
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  return (
+    <Dialog open={IsUploadRecipt} onOpenChange={setIsUploadRecipt}>
+      <DialogContent onInteractOutside={(e) => e.preventDefault()}>
+        <DialogHeader>
+          <DialogTitle className="text-xl font-semibold">
+            {t("uploadPaymentReceipt")}
+          </DialogTitle>
+          <DialogDescription className="!text-base">
+            {t("uploadReceiptDescription")}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-4 mt-4">
+          {!selectedFile ? (
+            <div
+              {...getRootProps()}
+              className={`border-2 border-dashed border-gray-300 rounded-lg p-8 text-center transition-all duration-200 cursor-pointer hover:border-primary hover:bg-gray-50 ${
+                isDragActive ? "border-primary bg-gray-50" : ""
+              }`}
+            >
+              <input {...getInputProps()} />
+              {/* <FileImage className="receipt-icon" /> */}
+              <p className="text-sm text-black opacity-60">
+                {isDragActive
+                  ? t("dropYourReceiptHere")
+                  : t("dragAndDropReceipt")}
+              </p>
+              <p className="text-sm text-black opacity-60">
+                {t("clickToSelect")}
+              </p>
+            </div>
+          ) : (
+            <div className="relative">
+              <img
+                src={preview}
+                alt="Receipt preview"
+                className="w-full h-48 object-contain rounded-lg border border-gray-200"
+              />
+              <button
+                className="absolute top-2 right-2 bg-red-500 text-white border-none rounded flex items-center justify-center w-8 h-8 cursor-pointer"
+                onClick={clearSelection}
+              >
+                <MdClose size={24} />
+              </button>
+            </div>
+          )}
+          <button
+            className="border-0 bg-primary text-white px-3 py-1.5 rounded w-max self-end disabled:opacity-65"
+            onClick={handleReceiptSubmit}
+            disabled={!selectedFile || isUploading}
+          >
+            {t("submit")}
+          </button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default UploadReceiptModal;