rez-table-listing-mui 0.0.25 → 0.0.27

package/src/App.tsx

@@ -1,103 +1,119 @@
 import { useEffect, useMemo, useState } from "react";
 import { useCraftTable } from "./libs/hooks/useCraftTable";
 import { TableTabs } from "./components/tabs";
-import { makeData, Person } from "./libs/utils/make-hierar-data";
 import { useDefaultColumns } from "./libs/hooks/useDefaultColumns";
 import TableWrapper from "./components/index-table";
-import Papa from "papaparse";
-import { DataFormat } from "./libs/utils/Data-format";
+import { entityTableMetaMaster } from "./libs/utils/apiColumn";
+import {
+  useCommonDropdownAPI,
+  useDeleteFilterAPI,
+  useEntityTableAPI,
+  useSavedFilterAPI,
+  useUpdateFilterAPI,
+} from "./libs/hooks/useEntityTableAPI";
+import {
+  useDetailsQueryAPI,
+  useFetchData,
+} from "./libs/hooks/useEntityTableHooks";
+import LoginButton from "./components/login";
+// import { ENTITY_TYPE } from "./libs/utils/common";
 
 function App() {
   const [mockLoading, setMockLoading] = useState<boolean>(true);
-  const [activeTab, setActiveTab] = useState<string>("ALL");
-  const [jsonData, setJsonData] = useState<any[]>([]);
+  // const [jsonData] = useState<any[]>([]);
   const [columns, setColumns] = useState<any[]>([]);
-  const [metadata, setMetadata] = useState<any[]>([]);
   const [searchTerm, setSearchTerm] = useState("");
+  // const [data, setData] = useState<Person[]>(() => makeData(50, 3, 2));
+  // const [entity_type] = useState(ENTITY_TYPE); //OR UPR BRD
+
+  const [selectedTab, setSelectedTab] = useState("ALL");
+
+  const tableStates = useCraftTable();
+  const { filters, setFilters, filterMaster, filterToDelete } = tableStates;
 
-  //To handle hierarchical data
   const { defaultColumns } = useDefaultColumns();
-  const [data, setData] = useState<Person[]>(() => makeData(50, 3, 2));
+
+  const { metaQuery } = useFetchData("UPR");
+  const { detailsQuery } = useDetailsQueryAPI(
+    filterMaster?.saved_filters?.selectedId
+      ? filterMaster?.saved_filters?.selectedId
+      : metaQuery?.data?.default_filter?.value
+  );
+
+  //API CALL FOR SAVED FILTER
+  const { savedMutation } = useSavedFilterAPI();
+
+  //API FOR DELETING FILTER
+  const { deleteMutation } = useDeleteFilterAPI();
+
+  //API FOR UPDATE FILTER
+  const { updateMutation } = useUpdateFilterAPI();
+
+  // const { dropdownData } = useCommonDropdownAPI(
+  //   metaQuery.data,
+  //   tableStates.filterMaster?.attributes?.selected
+  // );
+
+  const { dropdownData } = useCommonDropdownAPI(metaQuery.data);
 
   useEffect(() => {
     setTimeout(() => {
       setMockLoading(false);
     }, 1000);
+
+    const fetchMeta = async () => {
+      try {
+        const { res } = await entityTableMetaMaster("UPR");
+        setColumns(res);
+      } catch (error) {
+        console.error("Failed to fetch metadata:", error);
+      }
+    };
+
+    fetchMeta();
   }, []);
 
-  const tableStates = useCraftTable();
+  useEffect(() => {
+    setFilters(detailsQuery.data ?? []);
+  }, [detailsQuery.data]);
 
-  const handleMetadataUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (!file) return;
-
-    Papa.parse(file, {
-      delimiter: ",",
-      header: true,
-      skipEmptyLines: true,
-      complete: (result: any) => {
-        const meta = result.data as {
-          header: string;
-          accessorKey: string;
-          id: "string";
-          size: "number";
-          align: "string";
-        }[];
-        setMetadata(meta);
-
-        const dynamicColumns = meta.map(
-          ({ header, accessorKey, size, align }) => ({
-            header,
-            id: header,
-            accessorKey,
-            size: size || 200,
-            meta: { align },
-          })
-        );
+  const enableServerSideSorting = false;
 
-        setColumns(dynamicColumns);
+  const { tableData } = useEntityTableAPI({
+    page: 0,
+    size: 50,
+    entity_type: "UPR",
+    tabs: {
+      columnName: "status",
+      sortBy: "ASC",
+      value: "active",
+    },
+    quickFilter: tableStates.filters,
+    sortby: [
+      {
+        sortColum: "name",
+        sortType: "ASC",
       },
-    });
-  };
+    ],
+    attributeFilter: [],
+  });
 
-  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (!file) return;
-
-    Papa.parse(file, {
-      delimiter: ",",
-      header: true,
-      skipEmptyLines: true,
-      complete: (result: any) => {
-        const data = result.data as object[];
-
-        const dataMap: Record<string, any> = {};
-        data.forEach((row: any) => {
-          const parentId = row.parentId;
-          if (parentId) {
-            if (!dataMap[parentId]) {
-              dataMap[parentId] = [];
-            }
-            dataMap[parentId].push(row);
-          }
-        });
-
-        const formattedData = data.map((row: any) => {
-          let formattedRow: any = {};
-          metadata.forEach(({ accessorKey, type }) => {
-            formattedRow[accessorKey] = DataFormat(row[accessorKey], type);
-          });
-
-          if (dataMap[row.id]) {
-            formattedRow.subRows = dataMap[row.id];
-          }
-
-          return formattedRow;
-        });
-        setJsonData(formattedData);
-      },
-    });
-  };
+  const newData = useMemo(
+    () => tableData?.entity_list || [],
+    [tableData?.entity_list]
+  );
+  const tabsData = tableData?.entity_tabs;
+
+  const totalCount = useMemo(() => {
+    return Number(
+      tableData?.entity_tabs?.find((tab) => {
+        const activeTab = selectedTab || "ALL";
+        return (
+          tab.tab_value?.toLocaleLowerCase() === activeTab.toLocaleLowerCase()
+        );
+      })?.tab_value_count || "0"
+    );
+  }, [tableData, selectedTab]);
 
   const handleRenderStatus = ({ value }: any) => {
     const statusValue = value?.toUpperCase();
@@ -119,57 +135,80 @@ function App() {
   };
 
   const handleRenderAction = ({ row }: any) => {
-    return (
-      <button
-        onClick={() => {
-          alert(JSON.stringify(row));
-        }}
-      >
-        Edit
-      </button>
-    );
+    return <button onClick={() => alert(JSON.stringify(row))}>Edit</button>;
   };
 
-  const entity_tabs = [
-    {
-      tab_value: "Active",
-      tab_value_count: "5",
-    },
-    {
-      tab_value: "INACTIVE",
-      tab_value_count: "4",
-    },
-    {
-      tab_value: "ALL",
-      tab_value_count: 9,
-    },
-  ];
-
-  console.log("+++", handleFileUpload, handleMetadataUpload, setData);
-
-  const rawData = useMemo(() => {
-    return jsonData && jsonData.length > 0 ? jsonData : data;
-  }, [jsonData, data]);
-
   const filteredData = useMemo(() => {
-    if (!searchTerm) return rawData;
+    if (!searchTerm) return newData;
 
-    return rawData.filter((row) =>
+    return newData.filter((row: any) =>
       Object.values(row)
         .join(" ")
         .toLowerCase()
         .includes(searchTerm.toLowerCase())
     );
-  }, [rawData, searchTerm]);
+  }, [newData, searchTerm]);
+
+  // API to handle saving a filter
+  const handleSaveFilter = (name: string) => {
+    const quickFilter = filters.map((f) => ({
+      filter_attribute: f.filter_attribute,
+      filter_operator: f.filter_operator,
+      filter_value: f.filter_value,
+    }));
+    console.log("Quick Filter in App.tsx", quickFilter);
+
+    const payload = {
+      name,
+      is_default: false,
+      mapped_entity_type: "UPR", // For that entity type
+      status: "ACTIVE",
+      entity_type: "SFM", // FIXED entity type
+      filterDetails: quickFilter,
+    };
+    const entity_type = "SFM";
+    savedMutation.mutate({ entity_type, payload });
+  };
+
+  // API to handle removing or deleting a filter
+  const handleRemoveFilter = () => {
+    const payload = {
+      name: filterToDelete?.label,
+      id: filterToDelete?.value,
+      is_default: false,
+      mapped_entity_type: "UPR",
+      status: "INACTIVE",
+      entity_type: "SFM",
+    };
+    const entity_type = "SFM";
+    deleteMutation.mutate({ entity_type, payload });
+  };
+
+  //API to update the filter
+  const handleUpdateFilter = () => {
+    const quickFilter = filters.map((f) => ({
+      filter_attribute: f.filter_attribute,
+      filter_operator: f.filter_operator,
+      filter_value: f.filter_value,
+    }));
+    console.log("Quick Filter in App.tsx", quickFilter);
+
+    const payload = {
+      name: filterMaster?.saved_filters?.selectedName, // Name of the filter
+      is_default: false,
+      id: filterMaster?.saved_filters?.selectedId,
+      mapped_entity_type: "UPR",
+      status: "ACTIVE",
+      entity_type: "SFM",
+      filterDetails: quickFilter,
+    };
+    const entity_type = "SFM";
+    updateMutation.mutate({ entity_type, payload });
+  };
 
   return (
     <div className="app_wrapper">
-      {/* <div>
-        <label>Meta Upload</label>&nbsp;
-        <input type="file" accept=".csv" onChange={handleMetadataUpload} />
-        <label>Data Upload</label>&nbsp;
-        <input type="file" accept=".csv" onChange={handleFileUpload} />
-      </div> */}
+      <LoginButton />
 
       <TableWrapper
         data={filteredData}
@@ -178,48 +217,52 @@ function App() {
         featureOptions={{
           striped: true,
           compactTable: false,
-          enableSorting: false,
+          enableSorting: !enableServerSideSorting,
           enableColumnReordering: true,
           enableColumnResizing: true,
           enableRowSelection: false,
+          enableServerSideSorting: enableServerSideSorting,
         }}
         loadingOptions={{
           isLoading: mockLoading,
           loaderText: "Loading, Please wait...",
-          // loadingComponent: <Loader/>,
         }}
         topbarOptions={{
           tableStates,
           leftSideComponent: (
             <TableTabs
-              activeTab={activeTab}
+              activeTab={selectedTab}
               tableStates={tableStates}
-              tabsData={entity_tabs}
+              tabsData={tabsData}
               onClick={(state) => {
-                setActiveTab(state);
+                setSelectedTab(state);
               }}
             />
           ),
           searchValue: searchTerm,
           onSearchChange: (val) => setSearchTerm(val),
+          showFilterToggle: true,
+          filterOptions: {
+            tableStates: tableStates,
+            columnsData: metaQuery.data || [],
+            defaultFilters: detailsQuery.data || [],
+            tableData: tableData,
+            dropdownData: dropdownData || [],
+            onDeleteFilter: handleRemoveFilter,
+            onSaveFilter: handleSaveFilter,
+            onUpdateFilter: handleUpdateFilter,
+          },
         }}
         paginationOptions={{
           showPagination: true,
           paginationPosition: "top",
           paginationView: "compact",
+          totalRows: totalCount,
         }}
         customRenderFn={{
           renderStatus: handleRenderStatus,
           renderAction: handleRenderAction,
         }}
-        // shouldHideColumn={(accessorKey?: string) =>
-        //   accessorKey === "action" && false
-        // }
-        // styleOptions={{
-        //   wrapperStyle: {
-        //     maxHeight: "calc(100vh - 280px)",
-        //   },
-        // }}
       />
     </div>
   );

package/src/assets/svg.tsx

@@ -170,6 +170,36 @@ export const ArrowDownUp = () => (
     />
   </svg>
 );
+export const EditIcon = () => (
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 12 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1.33331 10.6663H2.17431L8.99865 3.84201L8.15765 3.00101L1.33331 9.82534V10.6663ZM0.93598 11.6663C0.765202 11.6663 0.622091 11.6086 0.506646 11.493C0.391091 11.3776 0.333313 11.2345 0.333313 11.0637V9.90867C0.333313 9.74612 0.364535 9.59118 0.42698 9.44384C0.489313 9.29651 0.575202 9.16812 0.684646 9.05868L9.12698 0.620174C9.22776 0.528619 9.33904 0.457897 9.46081 0.408008C9.5827 0.358008 9.71048 0.333008 9.84415 0.333008C9.97781 0.333008 10.1073 0.35673 10.2325 0.404175C10.3578 0.451619 10.4688 0.527063 10.5653 0.630507L11.3795 1.45484C11.4829 1.5514 11.5566 1.66251 11.6006 1.78817C11.6446 1.91384 11.6666 2.03951 11.6666 2.16517C11.6666 2.29929 11.6438 2.42723 11.598 2.54901C11.5522 2.6709 11.4794 2.78223 11.3795 2.88301L2.94098 11.315C2.83154 11.4245 2.70315 11.5103 2.55581 11.5727C2.40848 11.6351 2.25354 11.6663 2.09098 11.6663H0.93598ZM8.57081 3.42884L8.15765 3.00101L8.99865 3.84201L8.57081 3.42884Z"
+      fill="#0E0C0B"
+      fill-opacity="0.4"
+    />
+  </svg>
+);
+
+export const DeleteIcon = () => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 10 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1.87183 11.6665C1.54039 11.6665 1.25667 11.5485 1.02067 11.3125C0.784667 11.0765 0.666667 10.7928 0.666667 10.4613V1.99982H0.5C0.358333 1.99982 0.239611 1.95188 0.143833 1.85599C0.0479445 1.7601 0 1.64132 0 1.49966C0 1.35788 0.0479445 1.23916 0.143833 1.14349C0.239611 1.04771 0.358333 0.999823 0.5 0.999823H3C3 0.836601 3.0575 0.69749 3.1725 0.58249C3.28739 0.467601 3.42644 0.410156 3.58967 0.410156H6.41033C6.57356 0.410156 6.71261 0.467601 6.8275 0.58249C6.9425 0.69749 7 0.836601 7 0.999823H9.5C9.64167 0.999823 9.76039 1.04777 9.85617 1.14366C9.95206 1.23955 10 1.35832 10 1.49999C10 1.64177 9.95206 1.76049 9.85617 1.85616C9.76039 1.95193 9.64167 1.99982 9.5 1.99982H9.33333V10.4613C9.33333 10.7928 9.21533 11.0765 8.97933 11.3125C8.74333 11.5485 8.45961 11.6665 8.12817 11.6665H1.87183ZM8.33333 1.99982H1.66667V10.4613C1.66667 10.5212 1.68589 10.5704 1.72433 10.6088C1.76278 10.6473 1.81194 10.6665 1.87183 10.6665H8.12817C8.18806 10.6665 8.23722 10.6473 8.27567 10.6088C8.31411 10.5704 8.33333 10.5212 8.33333 10.4613V1.99982ZM3.7695 9.33316C3.91117 9.33316 4.02989 9.28527 4.12567 9.18949C4.22133 9.0936 4.26917 8.97482 4.26917 8.83316V3.83316C4.26917 3.69149 4.22122 3.57271 4.12533 3.47682C4.02956 3.38104 3.91078 3.33316 3.769 3.33316C3.62733 3.33316 3.50861 3.38104 3.41283 3.47682C3.31717 3.57271 3.26933 3.69149 3.26933 3.83316V8.83316C3.26933 8.97482 3.31722 9.0936 3.413 9.18949C3.50889 9.28527 3.62772 9.33316 3.7695 9.33316ZM6.231 9.33316C6.37267 9.33316 6.49139 9.28527 6.58717 9.18949C6.68283 9.0936 6.73067 8.97482 6.73067 8.83316V3.83316C6.73067 3.69149 6.68278 3.57271 6.587 3.47682C6.49111 3.38104 6.37228 3.33316 6.2305 3.33316C6.08883 3.33316 5.97011 3.38104 5.87433 3.47682C5.77867 3.57271 5.73083 3.69149 5.73083 3.83316V8.83316C5.73083 8.97482 5.77878 9.0936 5.87467 9.18949C5.97044 9.28527 6.08922 9.33316 6.231 9.33316Z"
+      fill="#F63D68"
+    />
+  </svg>
+);
 
 export const CrossSearchIcon = () => (
   <svg
@@ -634,7 +664,7 @@ export const SortingIcon = () => {
   );
 };
 
-export const CustomizationIcon = () => {
+export const FilterationIcon = () => {
   return (
     <svg
       width="20"
@@ -796,7 +826,7 @@ export const DropDownIcon = () => {
   );
 };
 
-export const AddIcon = () => {
+export const AddIcon = ({ ...props }) => {
   return (
     <svg
       width="10"
@@ -804,6 +834,7 @@ export const AddIcon = () => {
       viewBox="0 0 10 10"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      {...props}
     >
       <path
         d="M4.50002 5.50002H1.16669C1.02502 5.50002 0.906298 5.45208 0.81052 5.35619C0.714632 5.2603 0.666687 5.14152 0.666687 4.99985C0.666687 4.85808 0.714632 4.73935 0.81052 4.64369C0.906298 4.54791 1.02502 4.50002 1.16669 4.50002H4.50002V1.16669C4.50002 1.02502 4.54797 0.906298 4.64385 0.81052C4.73974 0.714632 4.85852 0.666687 5.00019 0.666687C5.14197 0.666687 5.26069 0.714632 5.35635 0.81052C5.45213 0.906298 5.50002 1.02502 5.50002 1.16669V4.50002H8.83335C8.97502 4.50002 9.09374 4.54797 9.18952 4.64385C9.28541 4.73974 9.33335 4.85852 9.33335 5.00019C9.33335 5.14197 9.28541 5.26069 9.18952 5.35635C9.09374 5.45213 8.97502 5.50002 8.83335 5.50002H5.50002V8.83335C5.50002 8.97502 5.45208 9.09374 5.35619 9.18952C5.2603 9.28541 5.14152 9.33335 4.99985 9.33335C4.85808 9.33335 4.73935 9.28541 4.64369 9.18952C4.54791 9.09374 4.50002 8.97502 4.50002 8.83335V5.50002Z"
@@ -831,3 +862,35 @@ export const ChevronDownIcon = () => {
     </svg>
   );
 };
+export const CheckBox = () => {
+  return (
+    <svg
+      width="13"
+      height="14"
+      viewBox="0 0 13 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.72054 8.43116L4.17187 6.88233C4.07954 6.7901 3.96349 6.74288 3.82371 6.74066C3.68404 6.73855 3.56587 6.78577 3.46921 6.88233C3.37265 6.97899 3.32437 7.0961 3.32437 7.23366C3.32437 7.37121 3.37265 7.48833 3.46921 7.58499L5.29871 9.41449C5.41926 9.53494 5.55987 9.59516 5.72054 9.59516C5.88121 9.59516 6.02182 9.53494 6.14237 9.41449L9.85137 5.70549C9.9436 5.61316 9.99082 5.4971 9.99304 5.35733C9.99515 5.21766 9.94793 5.09949 9.85137 5.00283C9.75471 4.90627 9.6376 4.85799 9.50004 4.85799C9.36249 4.85799 9.24537 4.90627 9.14871 5.00283L5.72054 8.43116ZM6.66787 13.3337C5.79187 13.3337 4.96848 13.1674 4.19771 12.835C3.42693 12.5025 2.75648 12.0514 2.18637 11.4815C1.61626 10.9116 1.16487 10.2414 0.832207 9.47099C0.499652 8.70055 0.333374 7.87738 0.333374 7.00149C0.333374 6.12549 0.499596 5.3021 0.832041 4.53133C1.16449 3.76055 1.61565 3.0901 2.18554 2.51999C2.75543 1.94988 3.4256 1.49849 4.19604 1.16583C4.96649 0.83327 5.78965 0.666992 6.66554 0.666992C7.54154 0.666992 8.36493 0.833214 9.13571 1.16566C9.90649 1.4981 10.5769 1.94927 11.147 2.51916C11.7172 3.08905 12.1685 3.75921 12.5012 4.52966C12.8338 5.3001 13 6.12327 13 6.99916C13 7.87516 12.8338 8.69855 12.5014 9.46933C12.1689 10.2401 11.7178 10.9105 11.1479 11.4807C10.578 12.0508 9.90782 12.5022 9.13737 12.8348C8.36693 13.1674 7.54376 13.3337 6.66787 13.3337Z"
+        fill="#16B364"
+      />
+    </svg>
+  );
+};
+export const CrossBox = () => {
+  return (
+    <svg
+      width="13"
+      height="14"
+      viewBox="0 0 13 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6.66659 7.70283L8.71525 9.75166C8.80759 9.84388 8.92364 9.8911 9.06342 9.89333C9.20309 9.89544 9.32125 9.84821 9.41792 9.75166C9.51447 9.65499 9.56275 9.53788 9.56275 9.40033C9.56275 9.26277 9.51447 9.14566 9.41792 9.04899L7.36909 7.00033L9.41792 4.95166C9.51014 4.85933 9.55736 4.74327 9.55959 4.60349C9.5617 4.46383 9.51447 4.34566 9.41792 4.24899C9.32125 4.15244 9.20414 4.10416 9.06659 4.10416C8.92903 4.10416 8.81192 4.15244 8.71525 4.24899L6.66659 6.29783L4.61792 4.24899C4.52559 4.15677 4.40953 4.10955 4.26975 4.10733C4.13009 4.10521 4.01192 4.15244 3.91525 4.24899C3.8187 4.34566 3.77042 4.46277 3.77042 4.60033C3.77042 4.73788 3.8187 4.85499 3.91525 4.95166L5.96409 7.00033L3.91525 9.04899C3.82303 9.14133 3.77581 9.25738 3.77359 9.39716C3.77147 9.53683 3.8187 9.65499 3.91525 9.75166C4.01192 9.84821 4.12903 9.89649 4.26659 9.89649C4.40414 9.89649 4.52125 9.84821 4.61792 9.75166L6.66659 7.70283ZM6.66775 13.3337C5.79175 13.3337 4.96836 13.1674 4.19759 12.835C3.42681 12.5025 2.75636 12.0514 2.18625 11.4815C1.61614 10.9116 1.16475 10.2414 0.832085 9.47099C0.49953 8.70055 0.333252 7.87738 0.333252 7.00149C0.333252 6.12549 0.499474 5.3021 0.831919 4.53133C1.16436 3.76055 1.61553 3.0901 2.18542 2.51999C2.75531 1.94988 3.42547 1.49849 4.19592 1.16583C4.96636 0.83327 5.78953 0.666992 6.66542 0.666992C7.54142 0.666992 8.36481 0.833214 9.13559 1.16566C9.90636 1.4981 10.5768 1.94927 11.1469 2.51916C11.717 3.08905 12.1684 3.75921 12.5011 4.52966C12.8336 5.3001 12.9999 6.12327 12.9999 6.99916C12.9999 7.87516 12.8337 8.69855 12.5013 9.46933C12.1688 10.2401 11.7176 10.9105 11.1478 11.4807C10.5779 12.0508 9.9077 12.5022 9.13725 12.8348C8.36681 13.1674 7.54364 13.3337 6.66775 13.3337Z"
+        fill="#F63D68"
+      />
+    </svg>
+  );
+};

package/src/components/common/confirm-modal/index.tsx

@@ -0,0 +1,200 @@
+import React, { useState } from "react";
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Typography,
+  TextField,
+  Button,
+  IconButton,
+  Box,
+  SxProps,
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import { Theme } from "@emotion/react";
+
+// Types for the component props
+export interface ModalButton {
+  label: string;
+  onClick: (inputValue?: string) => void;
+  variant?: "text" | "outlined" | "contained";
+  color?: "primary" | "secondary" | "error" | "info" | "success" | "warning";
+  disabled?: boolean;
+  sx?: SxProps<Theme>;
+}
+
+export interface InputField {
+  label: string;
+  placeholder?: string;
+  required?: boolean;
+  type?: "text" | "email" | "password" | "number";
+  multiline?: boolean;
+  rows?: number;
+  defaultValue?: string;
+}
+
+export interface ConfirmModalProps {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  description?: string;
+  buttons: ModalButton[];
+  input?: InputField;
+  maxWidth?: "xs" | "sm" | "md" | "lg" | "xl";
+  fullWidth?: boolean;
+}
+
+const ConfirmModal: React.FC<ConfirmModalProps> = ({
+  open,
+  onClose,
+  title,
+  description,
+  buttons,
+  input,
+  maxWidth = "sm",
+  fullWidth = true,
+}) => {
+  const [inputValue, setInputValue] = useState(input?.defaultValue || "");
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(event.target.value);
+  };
+
+  const handleButtonClick = (button: ModalButton) => {
+    if (input) {
+      button.onClick(inputValue);
+    } else {
+      button.onClick();
+    }
+    setInputValue("");
+  };
+
+  const handleClose = () => {
+    setInputValue(input?.defaultValue || "");
+    onClose();
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={handleClose}
+      maxWidth={maxWidth}
+      fullWidth={fullWidth}
+      PaperProps={{
+        sx: {
+          borderRadius: 2,
+          padding: 1,
+        },
+      }}
+    >
+      <DialogTitle
+        sx={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          // padding: "16px 0px",
+          px: "0px",
+          marginX: "24px",
+          paddingBottom: description ? "18px" : "20px",
+          borderBottom: "1px solid #eeeeee",
+        }}
+      >
+        <Typography variant="h6" component="h2" fontWeight="bold">
+          {title}
+        </Typography>
+        <IconButton
+          onClick={handleClose}
+          size="small"
+          sx={{
+            color: "text.secondary",
+          }}
+        >
+          <CloseIcon />
+        </IconButton>
+      </DialogTitle>
+
+      <DialogContent sx={{ padding: "0 24px 16px 24px", mt: 2 }}>
+        {description && (
+          <Typography
+            variant="body2"
+            color="text.secondary"
+            sx={{ marginBottom: input ? 3 : 0 }}
+          >
+            {description}
+          </Typography>
+        )}
+
+        {input && (
+          <Box sx={{ marginTop: description ? 0 : 2 }}>
+            <Typography
+              variant="body2"
+              component="label"
+              sx={{
+                display: "block",
+                marginBottom: 1,
+                fontWeight: 500,
+                color: "text.primary",
+              }}
+            >
+              {input.label}
+              {input.required && (
+                <Typography component="span" color="error.main">
+                  {" "}
+                  *
+                </Typography>
+              )}
+            </Typography>
+            <TextField
+              fullWidth
+              value={inputValue}
+              onChange={handleInputChange}
+              placeholder={input.placeholder}
+              type={input.type || "text"}
+              multiline={input.multiline}
+              rows={input.rows}
+              variant="outlined"
+              size="small"
+              sx={{
+                "& .MuiOutlinedInput-root": {
+                  maxWidth: 280,
+                  borderRadius: 1,
+                  "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+                    border: "2px solid #7A5AF8",
+                  },
+                },
+              }}
+            />
+          </Box>
+        )}
+      </DialogContent>
+
+      <DialogActions
+        sx={{
+          padding: "16px 24px 24px 24px",
+          gap: 1,
+        }}
+      >
+        {buttons.map((button, index) => (
+          <Button
+            key={index}
+            variant={button.variant || "outlined"}
+            color={button.color || "primary"}
+            sx={button.sx}
+            onClick={() => handleButtonClick(button)}
+            disabled={
+              button.disabled ||
+              (input?.required &&
+                !inputValue.trim() &&
+                button.variant === "contained")
+            }
+          >
+            {button.label}
+          </Button>
+        ))}
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default ConfirmModal;