diff --git a/package-lock.json b/package-lock.json
index 2605f42..d8d904c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,12 +8,17 @@
       "name": "brainspace",
       "version": "0.1.0",
       "dependencies": {
+        "@dnd-kit/accessibility": "^3.1.1",
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/sortable": "^10.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
         "@reduxjs/toolkit": "^2.5.0",
         "@tsparticles/engine": "^3.7.1",
         "axios": "^1.7.9",
         "brainspace": "file:",
         "cookies-next": "^5.0.2",
         "dayjs": "^1.11.13",
+        "dragula": "^3.7.3",
         "file-saver": "^2.0.5",
         "formik": "^2.4.6",
         "jspdf": "^2.5.2",
@@ -47,6 +52,7 @@
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
+        "@types/dragula": "^3.7.5",
         "@types/file-saver": "^2.0.7",
         "@types/node": "^20",
         "@types/react": "^19",
@@ -84,6 +90,59 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@dnd-kit/accessibility": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
+      "integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/core": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/accessibility": "^3.1.1",
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/sortable": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-10.0.0.tgz",
+      "integrity": "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.3.0",
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/utilities": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
+      "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@emnapi/runtime": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.3.1.tgz",
@@ -1635,6 +1694,12 @@
         "@tsparticles/engine": "3.7.1"
       }
     },
+    "node_modules/@types/dragula": {
+      "version": "3.7.5",
+      "resolved": "https://registry.npmjs.org/@types/dragula/-/dragula-3.7.5.tgz",
+      "integrity": "sha512-jojr2JVJB8DawAKXApGnollMvVOMyiMKpchH8gLeoExx35Eq0BQ4WgAiAHoBoEn7h/9eDrIl0yz//cM6ALIJbg==",
+      "dev": true
+    },
     "node_modules/@types/estree": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@@ -2253,6 +2318,11 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "license": "MIT"
     },
+    "node_modules/atoa": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/atoa/-/atoa-1.0.0.tgz",
+      "integrity": "sha512-VVE1H6cc4ai+ZXo/CRWoJiHXrA1qfA31DPnx6D20+kSI547hQN5Greh51LQ1baMRMfxO5K5M4ImMtZbZt2DODQ=="
+    },
     "node_modules/atob": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
@@ -2717,6 +2787,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/contra": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/contra/-/contra-1.9.4.tgz",
+      "integrity": "sha512-N9ArHAqwR/lhPq4OdIAwH4e1btn6EIZMAz4TazjnzCiVECcWUPTma+dRAM38ERImEJBh8NiCCpjoQruSZ+agYg==",
+      "dependencies": {
+        "atoa": "1.0.0",
+        "ticky": "1.0.1"
+      }
+    },
     "node_modules/cookie": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
@@ -2773,6 +2852,14 @@
         "node": ">= 8"
       }
     },
+    "node_modules/crossvent": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/crossvent/-/crossvent-1.5.5.tgz",
+      "integrity": "sha512-MY4xhBYEnVi+pmTpHCOCsCLYczc0PVtGdPBz6NXNXxikLaUZo4HdAeUb1UqAo3t3yXAloSelTmfxJ+/oUqkW5w==",
+      "dependencies": {
+        "custom-event": "^1.0.0"
+      }
+    },
     "node_modules/css-line-break": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
@@ -2802,6 +2889,11 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/custom-event": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz",
+      "integrity": "sha512-GAj5FOq0Hd+RsCGVJxZuKaIDXDf3h6GQoNEjFgbLLI/trgtavwUbSnZ5pVfg27DVCaWjIohryS0JFwIJyT2cMg=="
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -3008,6 +3100,15 @@
       "license": "(MPL-2.0 OR Apache-2.0)",
       "optional": true
     },
+    "node_modules/dragula": {
+      "version": "3.7.3",
+      "resolved": "https://registry.npmjs.org/dragula/-/dragula-3.7.3.tgz",
+      "integrity": "sha512-/rRg4zRhcpf81TyDhaHLtXt6sEywdfpv1cRUMeFFy7DuypH2U0WUL0GTdyAQvXegviT4PJK4KuMmOaIDpICseQ==",
+      "dependencies": {
+        "contra": "1.9.4",
+        "crossvent": "1.5.5"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -7156,6 +7257,11 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/ticky": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ticky/-/ticky-1.0.1.tgz",
+      "integrity": "sha512-RX35iq/D+lrsqhcPWIazM9ELkjOe30MSeoBHQHSsRwd1YuhJO5ui1K1/R0r7N3mFvbLBs33idw+eR6j+w6i/DA=="
+    },
     "node_modules/tiny-case": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
diff --git a/package.json b/package.json
index 0207951..8b9c9d7 100644
--- a/package.json
+++ b/package.json
@@ -9,12 +9,17 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@dnd-kit/accessibility": "^3.1.1",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@reduxjs/toolkit": "^2.5.0",
     "@tsparticles/engine": "^3.7.1",
     "axios": "^1.7.9",
     "brainspace": "file:",
     "cookies-next": "^5.0.2",
     "dayjs": "^1.11.13",
+    "dragula": "^3.7.3",
     "file-saver": "^2.0.5",
     "formik": "^2.4.6",
     "jspdf": "^2.5.2",
@@ -48,6 +53,7 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
+    "@types/dragula": "^3.7.5",
     "@types/file-saver": "^2.0.7",
     "@types/node": "^20",
     "@types/react": "^19",
diff --git a/src.zip b/src.zip
new file mode 100644
index 0000000..746c56d
Binary files /dev/null and b/src.zip differ
diff --git a/src/Components/DragAndDrop.tsx b/src/Components/DragAndDrop.tsx
new file mode 100644
index 0000000..16c56b5
--- /dev/null
+++ b/src/Components/DragAndDrop.tsx
@@ -0,0 +1,165 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+import dragula from "dragula";
+import "dragula/dist/dragula.css";
+
+interface Task {
+  id: string;
+  title: string;
+  description: string;
+}
+
+interface Section {
+  id: string;
+  name: string;
+  tasks: Task[];
+}
+
+interface DragAndDropProps {
+  initialSections: Section[];
+}
+
+const DragAndDrop: React.FC<DragAndDropProps> = ({ initialSections }) => {
+  const [sections, setSections] = useState<Section[]>(initialSections);
+  const containerRefs = useRef<HTMLDivElement[]>([]);
+
+  useEffect(() => {
+    
+    const mirrorContainer = document.createElement("div");
+    document.body.appendChild(mirrorContainer);
+  
+    const drake = dragula(containerRefs.current.filter(Boolean), {
+      mirrorContainer, 
+    });
+  
+    drake.on("drop", (el: HTMLElement, target: HTMLElement, source: HTMLElement) => {
+      const sourceId = source.dataset.sectionId;
+      const targetId = target.dataset.sectionId;
+      const taskId = el.dataset.taskId;
+  
+      if (sourceId && targetId && taskId) {
+        setSections((prevSections) => {
+          const updatedSections = [...prevSections];
+  
+          const sourceSection = updatedSections.find((s) => s.id === sourceId);
+          const taskToMove = sourceSection?.tasks.find((t) => t.id === taskId);
+          if (sourceSection && taskToMove) {
+            sourceSection.tasks = sourceSection.tasks.filter((t) => t.id !== taskId);
+          }
+  
+          const targetSection = updatedSections.find((s) => s.id === targetId);
+          if (targetSection && taskToMove) {
+            targetSection.tasks.push(taskToMove);
+          }
+  
+          return updatedSections;
+        });
+      }
+    });
+  
+    return () => {
+      drake.destroy(); 
+      document.body.removeChild(mirrorContainer);
+    };
+  }, []);
+  
+  const addTask = (sectionId: string) => {
+    const title = prompt("Enter task title:");
+    const description = prompt("Enter task description:");
+    if (title && description) {
+      setSections((prevSections) =>
+        prevSections.map((section) =>
+          section.id === sectionId
+            ? {
+                ...section,
+                tasks: [
+                  ...section.tasks,
+                  { id: `${Date.now()}`, title, description },
+                ],
+              }
+            : section
+        )
+      );
+    }
+  };
+
+  const deleteTask = (sectionId: string, taskId: string) => {
+    setSections((prevSections) =>
+      prevSections.map((section) =>
+        section.id === sectionId
+          ? {
+              ...section,
+              tasks: section.tasks.filter((task) => task.id !== taskId),
+            }
+          : section
+      )
+    );
+  };
+
+  return (
+    <div style={{ display: "flex", gap: "1rem", padding: "20px" }}>
+      {sections.map((section, index) => (
+        <div
+          key={section.id}
+          ref={(el) => {
+            if (el) containerRefs.current[index] = el;
+          }}
+          data-section-id={section.id}
+          style={{
+            border: "1px solid #ccc",
+            padding: "10px",
+            width: "250px",
+            minHeight: "300px",
+            backgroundColor: "#f9f9f9",
+            borderRadius: "8px",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginBottom: "10px",
+            }}
+          >
+            <h3 style={{ margin: 0 }}>{section.name}</h3>
+            <button
+              onClick={() => addTask(section.id)}
+              style={{
+                background: "transparent",
+                border: "none",
+                fontSize: "16px",
+                cursor: "pointer",
+              }}
+            >
+              +
+            </button>
+          </div>
+          {section.tasks.map((task) => (
+  <div
+    key={task.id}
+    data-task-id={task.id}
+    style={{
+      background: "#fff",
+      margin: "5px 0",
+      padding: "10px",
+      borderRadius: "4px",
+      boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+      cursor: "move",
+    }}
+  >
+    <strong>{task.title}</strong>
+    <p style={{ fontSize: "12px", color: "#666", margin: "5px 0" }}>
+      {task.description}
+    </p>
+  </div>
+))}
+
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default DragAndDrop;
diff --git a/src/app/[locale]/brainspace/components/Modules.tsx b/src/app/[locale]/brainspace/components/Modules.tsx
index 4b9fcab..55f0e0b 100644
--- a/src/app/[locale]/brainspace/components/Modules.tsx
+++ b/src/app/[locale]/brainspace/components/Modules.tsx
@@ -14,7 +14,9 @@ import Loader from "@/common/loader/loader";
 import { Swiper, SwiperSlide } from "swiper/react";
 import { Navigation, Pagination } from "swiper/modules";
 
-const Modules: React.FC<{ additionalModules?: Module[] }> = ({ additionalModules = [] }) => {
+const Modules: React.FC<{ additionalModules?: Module[] }> = ({
+  additionalModules = [],
+}) => {
   const [loading, setLoading] = useState<boolean>(true);
   const [modulesData, setModulesData] = useState<Module[]>([]);
   const { accessToken } = useAuth();
@@ -23,12 +25,15 @@ const Modules: React.FC<{ additionalModules?: Module[] }> = ({ additionalModules
   // Function to fetch modules
   const fetchModules = async () => {
     try {
-      const response = await fetch("https://posnew.smcare.net/v0_0_1-modules/get-modules", {
-        headers: {
-          Authorization: `Bearer ${accessToken}`,
-          "Content-Type": "application/json",
-        },
-      });
+      const response = await fetch(
+        "https://posnew.smcare.net/v0_0_1-modules/get-modules",
+        {
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+            "Content-Type": "application/json",
+          },
+        }
+      );
 
       if (response.ok) {
         const data = await response.json();
@@ -73,16 +78,14 @@ const Modules: React.FC<{ additionalModules?: Module[] }> = ({ additionalModules
       if (width >= 1100) {
         setChunkSize(10); // Large screens (lg)
       } else if (width >= 800) {
-        setChunkSize(9); // Medium screens (md) 
-      }
-      else if (width >= 700) {
+        setChunkSize(9); // Medium screens (md)
+      } else if (width >= 700) {
         setChunkSize(6); // Medium screens (md)
       } else if (width >= 400) {
         setChunkSize(4); // Medium screens (md)
-      } else if ((width >= 300 && width <= 500) && height >= 800) {
+      } else if (width >= 300 && width <= 500 && height >= 800) {
         setChunkSize(4); // Small screens
-      }
-      else {
+      } else {
         setChunkSize(2); // Small screens (sm)
       }
       // if (height >= 1100) {
@@ -92,7 +95,7 @@ const Modules: React.FC<{ additionalModules?: Module[] }> = ({ additionalModules
       // } else if (height <= 800 && width >= 500) {
       //   setChunkSize(2); // Small screens
       // } else if (height >= 800) {
-      //   setChunkSize(9); // Medium screens (md) 
+      //   setChunkSize(9); // Medium screens (md)
       // } else if (height >= 700) {
       //   setChunkSize(6); // Medium screens (md)
       // } else if (height >= 400) {
@@ -136,7 +139,9 @@ const Modules: React.FC<{ additionalModules?: Module[] }> = ({ additionalModules
               <div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-5 gap-4 md:gap-8 justify-center items-center max-w-full">
                 {chunk.map((module: Module) => (
                   <Link
-                    href={`${module.link}?token=${encodeURIComponent(accessToken || "")}`}
+                    href={`${module.link}?token=${encodeURIComponent(
+                      accessToken || ""
+                    )}`}
                     key={module.id}
                     passHref
                   >
@@ -148,7 +153,9 @@ const Modules: React.FC<{ additionalModules?: Module[] }> = ({ additionalModules
                         width={160}
                         height={160}
                       />
-                      <h3 className="text-center mt-3 mb-2 text-lg">{module.name}</h3>
+                      <h3 className="text-center mt-3 mb-2 text-lg">
+                        {module.name}
+                      </h3>
                     </div>
                   </Link>
                 ))}
diff --git a/src/app/[locale]/crm/components/AddCallModal.tsx b/src/app/[locale]/crm/components/AddCallModal.tsx
new file mode 100644
index 0000000..3d382e1
--- /dev/null
+++ b/src/app/[locale]/crm/components/AddCallModal.tsx
@@ -0,0 +1,109 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Dialog } from 'primereact/dialog';
+import { Dropdown } from 'primereact/dropdown';
+import { InputText } from 'primereact/inputtext';
+import { Calendar } from 'primereact/calendar';
+import { Button } from 'primereact/button';
+import { InputTextarea } from 'primereact/inputtextarea';
+
+const AddCallModal: React.FC<{ isOpen: boolean; onClose: () => void }> = ({ isOpen, onClose }) => {
+  const [salesRep, setSalesRep] = useState<string | null>(null);
+  const [callDate, setCallDate] = useState<Date | null>(null);
+  const [duration, setDuration] = useState('');
+  const [outcome] = useState('01/02/2025'); // Default outcome
+  const [note, setNote] = useState('');
+
+  const salesRepOptions = [
+    { label: 'Employee 1', value: 'employee1' },
+    { label: 'Employee 2', value: 'employee2' },
+    { label: 'Employee 3', value: 'employee3' },
+  ];
+
+  return (
+    <Dialog
+      visible={isOpen}
+      onHide={onClose}
+      style={{
+        width: '45vw',
+        maxWidth: '600px',
+        borderRadius: '16px',
+        overflow: 'hidden',
+      }}
+      className="rounded-lg"
+      modal
+      dismissableMask
+    >
+      {/* Header */}
+      <div className="p-4 flex justify-between items-center border-b border-gray-200 bg-white rounded-t-lg">
+        <h2 className="text-lg font-semibold text-gray-800">Add Call</h2>
+        <Button icon="pi pi-times" className="p-button-text text-gray-600" onClick={onClose} />
+      </div>
+
+      {/* Content */}
+      <div className="p-6 bg-white">
+        <div className="grid grid-cols-2 gap-6">
+          {/* Sales Rep ID */}
+          <div className="flex flex-col">
+            <label className="text-sm font-medium text-gray-700 mb-1">Sales rep ID</label>
+            <Dropdown
+              value={salesRep}
+              onChange={(e) => setSalesRep(e.value)}
+              options={salesRepOptions}
+              placeholder="Employee name"
+              className="w-full p-inputtext border-gray-300 rounded-md"
+            />
+          </div>
+
+          {/* Call Date */}
+          <div className="flex flex-col">
+            <label className="text-sm font-medium text-gray-700 mb-1">Call Date</label>
+            <Calendar
+              value={callDate}
+              onChange={(e) => setCallDate(e.value as Date)}
+              placeholder="Enter call date"
+              className="w-full p-inputtext border-gray-300 rounded-md"
+            />
+          </div>
+
+          {/* Call Duration */}
+          <div className="flex flex-col">
+            <label className="text-sm font-medium text-gray-700 mb-1">Call Duration</label>
+            <InputText
+              value={duration}
+              onChange={(e) => setDuration(e.target.value)}
+              placeholder="Enter call duration"
+              className="w-full border-gray-300 rounded-md"
+            />
+          </div>
+
+          {/* Outcome (Pre-filled) */}
+          <div className="flex flex-col">
+            <label className="text-sm font-medium text-gray-700 mb-1">Outcome</label>
+            <InputText value={outcome} disabled className="w-full border-gray-300 bg-gray-100 rounded-md" />
+          </div>
+
+          {/* Note */}
+          <div className="col-span-2 flex flex-col">
+            <label className="text-sm font-medium text-gray-700 mb-1">Note</label>
+            <InputTextarea
+              value={note}
+              onChange={(e) => setNote(e.target.value)}
+              placeholder="Add note"
+              rows={4}
+              className="w-full border-gray-300 rounded-md"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Footer - Create Button */}
+      <div className="p-4 border-t border-gray-200 bg-white flex justify-center">
+        <Button label="Create" className="w-full p-3 bg-blue-500 text-white rounded-lg text-lg font-medium hover:bg-blue-600" />
+      </div>
+    </Dialog>
+  );
+};
+
+export default AddCallModal;
diff --git a/src/app/[locale]/crm/components/CallLogModal.tsx b/src/app/[locale]/crm/components/CallLogModal.tsx
new file mode 100644
index 0000000..6ca08d1
--- /dev/null
+++ b/src/app/[locale]/crm/components/CallLogModal.tsx
@@ -0,0 +1,132 @@
+'use client';
+
+import React from 'react';
+
+interface CallLogModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const salesReps = ['John Doe', 'Jane Smith', 'Alice Johnson', 'Bob Brown'];
+
+const CallLogModal: React.FC<CallLogModalProps> = ({ isOpen, onClose }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        zIndex: 1000,
+      }}
+    >
+      <div
+        style={{
+          backgroundColor: 'white',
+          borderRadius: '8px',
+          padding: '24px',
+          width: '90%',
+          maxWidth: '600px',
+          boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+          position: 'relative',
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            borderBottom: '1px solid #ddd',
+            paddingBottom: '12px',
+          }}
+        >
+          <h2 style={{ fontSize: '1.5rem', fontWeight: 'bold', color: '#6b46c1' }}>
+            Log Call
+          </h2>
+          <button
+            onClick={onClose}
+            style={{
+              fontSize: '1.5rem',
+              color: '#718096',
+              border: 'none',
+              background: 'none',
+              cursor: 'pointer',
+            }}
+          >
+            &times;
+          </button>
+        </div>
+
+        <form
+          style={{
+            display: 'grid',
+            gridTemplateColumns: '1fr 1fr',
+            gap: '16px',
+            marginTop: '16px',
+          }}
+        >
+          <select style={{ padding: '10px', borderRadius: '6px', border: '1px solid #ddd' }}>
+            <option>Employee Name</option>
+            {salesReps.map((rep) => (
+              <option key={rep} value={rep}>
+                {rep}
+              </option>
+            ))}
+          </select>
+          <input
+            type="date"
+            placeholder="Enter call date"
+            style={{ padding: '10px', borderRadius: '6px', border: '1px solid #ddd' }}
+          />
+          <input
+            type="text"
+            placeholder="Enter call duration"
+            style={{ padding: '10px', borderRadius: '6px', border: '1px solid #ddd' }}
+          />
+          <input
+            type="date"
+            placeholder="Outcome"
+            defaultValue="2025-02-01"
+            style={{ padding: '10px', borderRadius: '6px', border: '1px solid #ddd' }}
+          />
+          <textarea
+            placeholder="Add note"
+            rows={3}
+            style={{
+              padding: '10px',
+              borderRadius: '6px',
+              border: '1px solid #ddd',
+              gridColumn: 'span 2',
+            }}
+          />
+        </form>
+
+        <div style={{ marginTop: '24px', display: 'flex', justifyContent: 'center' }}>
+          <button
+            style={{
+              backgroundColor: '#007bff',
+              color: 'white',
+              padding: '12px 24px',
+              borderRadius: '6px',
+              fontSize: '1rem',
+              fontWeight: 'bold',
+              border: 'none',
+              cursor: 'pointer',
+              width: '100%',
+            }}
+          >
+            Create
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CallLogModal;
diff --git a/src/app/[locale]/crm/components/ContactModal.tsx b/src/app/[locale]/crm/components/ContactModal.tsx
new file mode 100644
index 0000000..593f04e
--- /dev/null
+++ b/src/app/[locale]/crm/components/ContactModal.tsx
@@ -0,0 +1,193 @@
+'use client';
+
+import React, { useState } from 'react';
+
+interface ContactModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const industries = ['Technology', 'Finance', 'Healthcare', 'Retail'];
+const assignees = ['John Doe', 'Jane Smith', 'Alice Johnson', 'Bob Brown'];
+const statuses = ['New', 'In Progress', 'Closed', 'Pending'];
+const dealStatuses = ['Open', 'Won', 'Lost', 'Negotiation'];
+
+const ContactModal: React.FC<ContactModalProps> = ({ isOpen, onClose }) => {
+  const [contactType, setContactType] = useState<'individual' | 'company'>('individual');
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        zIndex: 1000,
+      }}
+    >
+      <div
+        style={{
+          backgroundColor: 'white',
+          borderRadius: '8px',
+          padding: '24px',
+          width: '90%',
+          maxWidth: '700px',
+          boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+          position: 'relative',
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            borderBottom: '1px solid #ddd',
+            paddingBottom: '12px',
+          }}
+        >
+          <h2 style={{ fontSize: '1.5rem', fontWeight: 'bold', color: '#6b46c1' }}>
+            Create Lead
+          </h2>
+          <button
+            onClick={onClose}
+            style={{
+              fontSize: '1.5rem',
+              color: '#718096',
+              border: 'none',
+              background: 'none',
+              cursor: 'pointer',
+            }}
+          >
+            &times;
+          </button>
+        </div>
+
+        <div style={{ marginTop: '16px', display: 'flex', gap: '16px' }}>
+          <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <input
+              type="radio"
+              name="contactType"
+              value="individual"
+              checked={contactType === 'individual'}
+              onChange={() => setContactType('individual')}
+            />
+            <span style={{ fontSize: '1rem' }}>Individual</span>
+          </label>
+          <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <input
+              type="radio"
+              name="contactType"
+              value="company"
+              checked={contactType === 'company'}
+              onChange={() => setContactType('company')}
+            />
+            <span style={{ fontSize: '1rem' }}>Company</span>
+          </label>
+        </div>
+
+        <form
+          style={{
+            display: 'grid',
+            gridTemplateColumns: '1fr 1fr',
+            gap: '16px',
+            marginTop: '16px',
+          }}
+        >
+          <input
+            type="text"
+            placeholder="Enter Lead Name"
+            style={{ padding: '10px', borderRadius: '6px', border: '1px solid #ddd' }}
+          />
+          <select style={{ padding: '10px', borderRadius: '6px', border: '1px solid #ddd' }}>
+            <option>Select Industry</option>
+            {industries.map((industry) => (
+              <option key={industry} value={industry}>
+                {industry}
+              </option>
+            ))}
+          </select>
+          <input
+            type="text"
+            placeholder="Enter Deal Value"
+            style={{ padding: '10px', borderRadius: '6px', border: '1px solid #ddd' }}
+          />
+          <input
+            type="text"
+            placeholder="Enter Phone Number"
+            style={{ padding: '10px', borderRadius: '6px', border: '1px solid #ddd' }}
+          />
+          <select style={{ padding: '10px', borderRadius: '6px', border: '1px solid #ddd' }}>
+            <option>Select Assignee</option>
+            {assignees.map((assignee) => (
+              <option key={assignee} value={assignee}>
+                {assignee}
+              </option>
+            ))}
+          </select>
+          <input
+            type="date"
+            placeholder="Closing Date"
+            style={{ padding: '10px', borderRadius: '6px', border: '1px solid #ddd' }}
+          />
+          <input
+            type="email"
+            placeholder="Enter Email"
+            style={{ padding: '10px', borderRadius: '6px', border: '1px solid #ddd' }}
+          />
+          <select style={{ padding: '10px', borderRadius: '6px', border: '1px solid #ddd' }}>
+            <option>Select Status</option>
+            {statuses.map((status) => (
+              <option key={status} value={status}>
+                {status}
+              </option>
+            ))}
+          </select>
+          <select style={{ padding: '10px', borderRadius: '6px', border: '1px solid #ddd' }}>
+            <option>Select Deal Status</option>
+            {dealStatuses.map((dealStatus) => (
+              <option key={dealStatus} value={dealStatus}>
+                {dealStatus}
+              </option>
+            ))}
+          </select>
+          <input
+            type="text"
+            placeholder="Enter Source"
+            style={{ padding: '10px', borderRadius: '6px', border: '1px solid #ddd' }}
+          />
+          <input
+            type="date"
+            placeholder="Next Follow Up"
+            style={{ padding: '10px', borderRadius: '6px', border: '1px solid #ddd' }}
+          />
+        </form>
+
+        <div style={{ marginTop: '24px', display: 'flex', justifyContent: 'center' }}>
+          <button
+            style={{
+              backgroundColor: '#007bff',
+              color: 'white',
+              padding: '12px 24px',
+              borderRadius: '6px',
+              fontSize: '1rem',
+              fontWeight: 'bold',
+              border: 'none',
+              cursor: 'pointer',
+              width: '100%',
+            }}
+          >
+            Create
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ContactModal;
diff --git a/src/app/[locale]/crm/components/Header.tsx b/src/app/[locale]/crm/components/Header.tsx
new file mode 100644
index 0000000..c3c381a
--- /dev/null
+++ b/src/app/[locale]/crm/components/Header.tsx
@@ -0,0 +1,50 @@
+import { Button } from "primereact/button";
+import { ButtonGroup } from "primereact/buttongroup";
+import { InputText } from "primereact/inputtext";
+import React, { useState } from "react";
+import ContactModal from "./ContactModal";
+
+interface HeaderProps {
+  setActive: any;
+  active: string;
+}
+
+export default function Header({ setActive, active }: HeaderProps) {
+  const [isContactModalOpen, setIsContactModalOpen] = useState(false);
+
+  return (
+    <header className="flex absolute box-border w-full p-4  gap-2">
+      <InputText placeholder="Search" className="ml-[43%]" />
+      <div className="flex gap-4 ml-auto">
+        <ButtonGroup>
+          <Button
+            icon="pi pi-objects-column"
+            className={`${
+              active === "kanban" ? "bg-amber-200" : " bg-gray-300"
+            } h-8 w-10`}
+            onClick={() => setActive("kanban")}
+          />
+          <Button
+            className={`${
+              active === "table" ? "bg-amber-200" : " bg-gray-300"
+            } h-8 w-10`}
+            icon="pi pi-list"
+            onClick={() => setActive("table")}
+          />
+        </ButtonGroup>
+        <Button
+          className="w-9 h-9 text-white bg-blue-500"
+          icon="pi pi-plus"
+          rounded
+          onClick={() => setIsContactModalOpen(true)}
+        />
+      </div>
+      {isContactModalOpen && (
+        <ContactModal
+          isOpen={isContactModalOpen}
+          onClose={() => setIsContactModalOpen(false)}
+        />
+      )}
+    </header>
+  );
+}
diff --git a/src/app/[locale]/crm/components/LeadCard.tsx b/src/app/[locale]/crm/components/LeadCard.tsx
new file mode 100644
index 0000000..2f121d4
--- /dev/null
+++ b/src/app/[locale]/crm/components/LeadCard.tsx
@@ -0,0 +1,99 @@
+import React, { useState } from "react";
+import { useDraggable } from "@dnd-kit/core";
+import { CSS } from "@dnd-kit/utilities";
+import { useSortable } from "@dnd-kit/sortable";
+import { Button } from "primereact/button";
+import { Lead as LeadType } from "@/redux/slices/leadsSlice";
+import OpportunityDetailsModal from "./OpportunityDetailsModal";
+
+interface LeadProps {
+  lead: LeadType;
+  grabbed: boolean;
+}
+
+const borderColors: Record<string, string> = {
+  new: "border-red-500",
+  qualified: "border-blue-500",
+  proposition: "border-purple-500",
+  won: "border-green-500",
+};
+
+const LeadCard: React.FC<LeadProps> = ({ lead, grabbed }) => {
+  const [selectedOpportunity, setSelectedOpportunity] = useState<any | null>(
+    null
+  );
+  const [isOpportunityModalOpen, setIsOpportunityModalOpen] = useState(false);
+
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    isDragging,
+    transform,
+    transition,
+  } = useSortable({
+    id: lead.id,
+    data: {
+      type: "Lead",
+      lead,
+    },
+  });
+
+  const style = {
+    transition,
+    transform: CSS.Translate.toString(transform),
+  };
+
+  const handleLeadClick = (lead: LeadType) => {
+    setSelectedOpportunity(lead);
+    setIsOpportunityModalOpen(true);
+  };
+
+  if (isDragging) {
+    return (
+      <div
+        ref={setNodeRef}
+        style={style}
+        className={`bg-slate-100 p-4 mb-2 rounded-md h-32 border-2 ${
+          borderColors[lead.status]
+        }`}
+      />
+    );
+  }
+
+  return (
+    <div ref={setNodeRef} className={`relative`}>
+      <div
+        {...listeners}
+        {...attributes}
+        style={style}
+        className={`p-4 mb-2 rounded-md h-32 bg-slate-100 border-l-8 cursor-grab  ${
+          grabbed && "cursor-grabbing shadow-xl scale-[1.05] opacity-85"
+        } ${borderColors[lead.status]} `}
+      >
+        <p className="font-semibold">{lead.title}</p>
+        <p>Price: ${lead.price}</p>
+        <p>Contact: {lead.name}</p>
+        <p>{lead.number}</p>
+      </div>
+      <Button
+        icon="pi pi-ellipsis-v"
+        style={style}
+        className={`absolute top-2 right-2 ${grabbed && "scale-[1.03]"}`}
+        onClick={(e) => {
+          e.stopPropagation();
+          handleLeadClick(lead);
+        }}
+      />
+      {selectedOpportunity && (
+        <OpportunityDetailsModal
+          isOpen={isOpportunityModalOpen}
+          onClose={() => setIsOpportunityModalOpen(false)}
+          data={selectedOpportunity}
+        />
+      )}
+    </div>
+  );
+};
+
+export default LeadCard;
diff --git a/src/app/[locale]/crm/components/Leads.tsx b/src/app/[locale]/crm/components/Leads.tsx
new file mode 100644
index 0000000..401dd91
--- /dev/null
+++ b/src/app/[locale]/crm/components/Leads.tsx
@@ -0,0 +1,53 @@
+import React, { useMemo } from "react";
+import LeadCard from "./LeadCard";
+import { SortableContext, useSortable } from "@dnd-kit/sortable";
+import { Lead as LeadType } from "@/redux/slices/leadsSlice";
+
+interface LeadsProps {
+  status: string;
+  leads: LeadType[];
+}
+
+const statusColors: Record<string, string> = {
+  new: "bg-red-500",
+  qualified: "bg-blue-500",
+  proposition: "bg-purple-500",
+  won: "bg-green-500",
+};
+
+const Leads: React.FC<LeadsProps> = ({ status, leads }) => {
+  const leadsIds = useMemo(() => {
+    return leads.map((lead) => lead.id);
+  }, [leads]);
+
+  const { setNodeRef } = useSortable({
+    id: status,
+    data: {
+      type: "Status",
+      status,
+    },
+  });
+
+  return (
+    <div className="relative">
+      <div className="flex gap-2 items-center p-4 absolute z-50 bg-white rounded-t-lg w-[95%]">
+        <div className={`rounded-full w-4 h-4 ${statusColors[status]}`}></div>
+        <h2 className="font-bold">{status.toUpperCase()}</h2>
+      </div>
+      <div
+        ref={setNodeRef}
+        className="border rounded-lg shadow-md h-full bg-white px-4 overflow-y-auto overflow-hidden"
+      >
+        <div className="mt-14 w-80 ">
+          <SortableContext items={leadsIds}>
+            {leads.map((lead) => (
+              <LeadCard key={lead.id} lead={lead} grabbed={false} />
+            ))}
+          </SortableContext>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Leads;
diff --git a/src/app/[locale]/crm/components/LeadsManager.tsx b/src/app/[locale]/crm/components/LeadsManager.tsx
new file mode 100644
index 0000000..4c9b1ae
--- /dev/null
+++ b/src/app/[locale]/crm/components/LeadsManager.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import React, { useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { RootState } from "@/redux/store";
+import { updateLeadStatus, reorderLeads } from "@/redux/slices/leadsSlice";
+import Leads from "./Leads";
+import {
+  DndContext,
+  DragOverlay,
+  DragStartEvent,
+  DragOverEvent,
+} from "@dnd-kit/core";
+import { createPortal } from "react-dom";
+import LeadCard from "./LeadCard";
+import Header from "./Header";
+import { Lead } from "@/redux/slices/leadsSlice";
+
+const statusColumns = ["new", "qualified", "proposition", "won"];
+
+const LeadsManager: React.FC = () => {
+  const dispatch = useDispatch();
+  const leads = useSelector((state: RootState) => state.leads.leads);
+  const [activeLead, setActiveLead] = useState<Lead | null>(null);
+  const [active, setActive] = useState("kanban");
+
+  const onDragStart = (event: DragStartEvent) => {
+    if (event.active.data.current?.type === "Lead") {
+      setActiveLead(event.active.data.current.lead as Lead);
+    }
+  };
+
+  const onDragOver = (event: DragOverEvent) => {
+    const { active, over } = event;
+    if (!over) return;
+
+    const activeId = active.id;
+    const overId = over.id;
+
+    if (activeId === overId) return;
+
+    const isActiveLead = active.data.current?.type === "Lead";
+    const isOverLead = over.data.current?.type === "Lead";
+    const isOverStatus = over.data.current?.type === "Status";
+
+    if (!isActiveLead) return;
+
+    if (isActiveLead && isOverLead) {
+      const activeIndex = leads.findIndex((lead) => lead.id === activeId);
+      const overIndex = leads.findIndex((lead) => lead.id === overId);
+
+      ////dropping the lead over in the same column
+      if (leads[activeIndex].status !== leads[overIndex].status) {
+        dispatch(
+          updateLeadStatus({ id: +activeId, status: leads[overIndex].status })
+        );
+      }
+
+      dispatch(reorderLeads({ fromIndex: activeIndex, toIndex: overIndex }));
+    }
+
+    ////dropping the lead over a different column
+    if (isActiveLead && isOverStatus) {
+      dispatch(updateLeadStatus({ id: +activeId, status: overId.toString() }));
+    }
+  };
+
+  return (
+    <div className="overflow-y-hidden h-[91.5vh]">
+      <Header setActive={setActive} active={active} />
+      {active === "kanban" ? (
+        <DndContext onDragStart={onDragStart} onDragOver={onDragOver}>
+          <div className="w-fit mt-14 flex gap-4 p-8 h-[90%]">
+            {statusColumns.map((status) => (
+              <Leads
+                key={status}
+                status={status}
+                leads={leads.filter((lead) => lead.status === status)}
+              />
+            ))}
+          </div>
+          {createPortal(
+            <DragOverlay>
+              {activeLead && <LeadCard lead={activeLead} grabbed />}
+            </DragOverlay>,
+            document.body
+          )}
+        </DndContext>
+      ) : (
+        "add table component here"
+      )}
+    </div>
+  );
+};
+
+export default LeadsManager;
diff --git a/src/app/[locale]/crm/components/OpportunityCalls.tsx b/src/app/[locale]/crm/components/OpportunityCalls.tsx
new file mode 100644
index 0000000..67adbd4
--- /dev/null
+++ b/src/app/[locale]/crm/components/OpportunityCalls.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import { DataTable } from "primereact/datatable";
+import { Column } from "primereact/column";
+import { Button } from "primereact/button";
+
+interface Call {
+  id: number;
+  salesRep: string;
+  callDate: string;
+  duration: string;
+  outcome: string;
+  note: string;
+}
+
+interface OpportunityCallsProps {
+  calls: Call[];
+  onAddCall: () => void;
+}
+
+const OpportunityCalls: React.FC<OpportunityCallsProps> = ({ calls, onAddCall }) => {
+  return (
+    <div className="relative p-4 bg-white rounded-md shadow-md">
+      <Button
+        icon="pi pi-plus"
+        className="p-button-rounded p-button-secondary absolute top-[-45px] right-0 w-10 h-10 flex items-center justify-center border border-gray-300 shadow-lg"
+        onClick={onAddCall}
+        tooltip="Add Call"
+      />
+      <DataTable value={calls} paginator rows={5} className="mt-4">
+        <Column selectionMode="multiple" headerStyle={{ width: "3em" }}></Column>
+        <Column field="id" header="ID" sortable filter filterPlaceholder="Filter ID"></Column>
+        <Column field="salesRep" header="Sales Rep" sortable filter filterPlaceholder="Filter Rep"></Column>
+        <Column field="callDate" header="Call Date" sortable filter filterPlaceholder="Filter Date"></Column>
+        <Column field="duration" header="Call Duration" sortable filter filterPlaceholder="Filter Duration"></Column>
+        <Column field="outcome" header="Outcome" sortable filter filterPlaceholder="Filter Outcome"></Column>
+        <Column field="note" header="Note" sortable filter filterPlaceholder="Filter Note"></Column>
+      </DataTable>
+    </div>
+  );
+};
+
+export default OpportunityCalls;
diff --git a/src/app/[locale]/crm/components/OpportunityCard.tsx b/src/app/[locale]/crm/components/OpportunityCard.tsx
new file mode 100644
index 0000000..a4cdb33
--- /dev/null
+++ b/src/app/[locale]/crm/components/OpportunityCard.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import React, { useState } from "react";
+import OpportunityDetailsModal from "./OpportunityDetailsModal";
+import { Opportunity } from "@/types/Module";
+
+interface OpportunityCardProps {
+  opportunity: Opportunity;
+}
+
+const OpportunityCard: React.FC<OpportunityCardProps> = ({ opportunity }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <div
+        onClick={() => setIsOpen(true)}
+        className="border rounded p-4 cursor-pointer hover:shadow-md transition"
+      >
+        <h3 className="text-lg font-semibold">Opportunity #{opportunity.id}</h3>
+        <p>{opportunity.name}</p>
+        <p className="text-sm text-gray-600">{opportunity.phone}</p>
+      </div>
+
+      {isOpen && (
+        <OpportunityDetailsModal
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          data={opportunity}
+        />
+      )}
+    </>
+  );
+};
+
+export default OpportunityCard;
diff --git a/src/app/[locale]/crm/components/OpportunityDetails.tsx b/src/app/[locale]/crm/components/OpportunityDetails.tsx
new file mode 100644
index 0000000..d561bf1
--- /dev/null
+++ b/src/app/[locale]/crm/components/OpportunityDetails.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+import { Tag } from "primereact/tag";
+import { Opportunity } from "@/types/Module";
+
+interface OpportunityDetailsProps {
+  data: Opportunity;
+}
+
+const OpportunityDetails: React.FC<OpportunityDetailsProps> = ({ data }) => {
+  return (
+    <div className="p-6 bg-white rounded-md shadow-md">
+      <div className="grid grid-cols-3 gap-6">
+        <div>
+          <p><strong>ID:</strong> {data.id}</p>
+          <p><strong>Lead ID:</strong> {data.leadId}</p>
+          <p><strong>Name:</strong> {data.name}</p>
+          <p><strong>Phone:</strong> {data.phone}</p>
+          <p><strong>Email:</strong> {data.email}</p>
+          <p><strong>Note:</strong></p>
+          <div className="p-3 border rounded bg-gray-50">{data.note}</div>
+        </div>
+        <div>
+          <p><strong>Source:</strong> {data.source}</p>
+          <p><strong>Industry:</strong> {data.industry}</p>
+          <p><strong>Assigned to:</strong> {data.assignedTo}</p>
+          <p><strong>Status:</strong> <Tag severity="success" value={data.status} /></p>
+          <p><strong>Next Follow-up:</strong> {data.nextFollowUp}</p>
+        </div>
+        <div>
+          <p><strong>Deal Value:</strong> {data.dealValue}</p>
+          <p><strong>Closing Date:</strong> {data.closingDate}</p>
+          <p><strong>Deal Status:</strong> <Tag severity="success" value={data.dealStatus} /></p>
+          <p><strong>Created at:</strong> {data.createdAt}</p>
+          <p><strong>Updated at:</strong> {data.updatedAt}</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OpportunityDetails;
diff --git a/src/app/[locale]/crm/components/OpportunityDetailsModal.tsx b/src/app/[locale]/crm/components/OpportunityDetailsModal.tsx
new file mode 100644
index 0000000..b3c74ec
--- /dev/null
+++ b/src/app/[locale]/crm/components/OpportunityDetailsModal.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import React, { useState } from "react";
+import { Dialog } from "primereact/dialog";
+import { Button } from "primereact/button";
+import OpportunityDetails from "./OpportunityDetails";
+import OpportunityTabs from "./OpportunityTabs";
+import AddCallModal from "./AddCallModal";
+import { Opportunity } from "@/types/Module";
+
+interface OpportunityDetailsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  data: Opportunity;
+}
+
+const OpportunityDetailsModal: React.FC<OpportunityDetailsModalProps> = ({ isOpen, onClose, data }) => {
+  const [activeIndex, setActiveIndex] = useState<number>(0);
+  const [isAddCallModalOpen, setIsAddCallModalOpen] = useState<boolean>(false);
+
+  const mockCalls = [
+    { id: 1, salesRep: "Name Here", callDate: "Jan 20,2025", duration: "1 Hour", outcome: "00000", note: "Lorem ipsum dolor sit amet..." },
+    { id: 2, salesRep: "Name Here", callDate: "Jan 20,2025", duration: "30 Min", outcome: "00000", note: "Lorem ipsum dolor sit amet..." },
+    { id: 3, salesRep: "Name Here", callDate: "Jan 20,2025", duration: "45 Min", outcome: "00000", note: "Lorem ipsum dolor sit amet..." },
+  ];
+
+  return (
+    <>
+      <Dialog
+        visible={isOpen}
+        onHide={onClose}
+        maximizable
+        style={{ width: "80vw", height: "80vh", maxWidth: "none" }}
+        modal
+        dismissableMask
+      >
+        {/* Header */}
+        <div className="p-4 bg-gray-900 text-white font-bold text-lg flex justify-between items-center">
+          <span>General Details</span>
+          <Button icon="pi pi-times" className="p-button-text text-white text-xl" onClick={onClose} />
+        </div>
+
+        {/* Main Content */}
+        <div className="p-6 bg-gray-100 h-full overflow-auto">
+          <OpportunityDetails data={data} />
+          <OpportunityTabs activeIndex={activeIndex} onTabChange={setActiveIndex} calls={mockCalls} onAddCall={() => setIsAddCallModalOpen(true)} />
+        </div>
+      </Dialog>
+
+      {/* Add Call Modal */}
+      <AddCallModal isOpen={isAddCallModalOpen} onClose={() => setIsAddCallModalOpen(false)} />
+    </>
+  );
+};
+
+export default OpportunityDetailsModal;
diff --git a/src/app/[locale]/crm/components/OpportunityTabs.tsx b/src/app/[locale]/crm/components/OpportunityTabs.tsx
new file mode 100644
index 0000000..5462e2a
--- /dev/null
+++ b/src/app/[locale]/crm/components/OpportunityTabs.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import { TabView, TabPanel } from "primereact/tabview";
+import OpportunityCalls from "./OpportunityCalls";
+
+interface OpportunityTabsProps {
+  activeIndex: number;
+  onTabChange: (index: number) => void;
+  calls: any[];
+  onAddCall: () => void;
+}
+
+const OpportunityTabs: React.FC<OpportunityTabsProps> = ({ activeIndex, onTabChange, calls, onAddCall }) => {
+  return (
+    <TabView activeIndex={activeIndex} onTabChange={(e) => onTabChange(e.index)} className="mt-6">
+      <TabPanel header="Calls">
+        <OpportunityCalls calls={calls} onAddCall={onAddCall} />
+      </TabPanel>
+      <TabPanel header="Follow up">
+        <div className="p-4 bg-white rounded-md shadow-md">Follow-up content here...</div>
+      </TabPanel>
+      <TabPanel header="Meetings">
+        <div className="p-4 bg-white rounded-md shadow-md">Meetings content here...</div>
+      </TabPanel>
+      <TabPanel header="Notes">
+        <div className="p-4 bg-white rounded-md shadow-md">Notes content here...</div>
+      </TabPanel>
+    </TabView>
+  );
+};
+
+export default OpportunityTabs;
diff --git a/src/app/[locale]/crm/components/opportunityData.ts b/src/app/[locale]/crm/components/opportunityData.ts
new file mode 100644
index 0000000..8f54a1a
--- /dev/null
+++ b/src/app/[locale]/crm/components/opportunityData.ts
@@ -0,0 +1,20 @@
+import { Opportunity } from "@/types/Module";
+
+export const sampleOpportunity: Opportunity = {
+  id: 1,
+  leadId: 20,
+  name: "Lead Name Here",
+  phone: "+961 70 123 456",
+  email: "leademployee@gmail.com",
+  source: "Lead source here",
+  industry: "Trading",
+  assignedTo: "John Smith",
+  status: "Completed",
+  nextFollowUp: "Feb 20, 2025",
+  dealValue: "$10,000",
+  closingDate: "Mar 30, 2025",
+  dealStatus: "Won",
+  createdAt: "Jan 20, 2025",
+  updatedAt: "Jan 25, 2025",
+  note: "Lorem ipsum dolor sit amet consectetur. Fusce morbi quis suspendisse massa dictum in eleifend bibendum. Aliquet mollis sem nulla vestibulum.",
+};
diff --git a/src/app/[locale]/crm/page.tsx b/src/app/[locale]/crm/page.tsx
new file mode 100644
index 0000000..000c070
--- /dev/null
+++ b/src/app/[locale]/crm/page.tsx
@@ -0,0 +1,8 @@
+import React from "react";
+import LeadsManager from "./components/LeadsManager";
+
+const Page = () => {
+  return <LeadsManager />;
+};
+
+export default Page;
diff --git a/src/app/[locale]/globals.css b/src/app/[locale]/globals.css
index 896e8f0..d9299a1 100644
--- a/src/app/[locale]/globals.css
+++ b/src/app/[locale]/globals.css
@@ -12,7 +12,6 @@ body {
   background-color: var(--bg-color);
 }
 
-
 /* Custom Pagination Styles */
 .custom-swiper-pagination .swiper-pagination-bullet {
   width: var(--swiper-pagination-bullet-size) !important;
@@ -121,7 +120,6 @@ body {
   /* Ensure the input doesn't overflow */
 }
 
-
 /* Ensure higher specificity */
 .custom-select-button .p-button, /* For individual buttons */
 .custom-select-button .p-highlight {
@@ -132,14 +130,15 @@ body {
 
 /* Handle hover state */
 .custom-select-button .p-button:hover {
-  background-color: var(--main-color) !important; /* Maintain main color on hover */
+  background-color: var(
+    --main-color
+  ) !important; /* Maintain main color on hover */
   color: white !important;
 }
 
 /* Transition for smooth effect */
 .custom-select-button .p-button {
   transition: background-color 0.3s, color 0.3s;
-
 }
 
 .custom-tooltip {
@@ -150,5 +149,3 @@ body {
   border-radius: 4px; /* Optional: Add rounded corners */
   padding: 5px 10px; /* Optional: Adjust padding */
 }
-
-
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
index 0da2fed..52943e0 100644
--- a/src/app/[locale]/layout.tsx
+++ b/src/app/[locale]/layout.tsx
@@ -4,7 +4,9 @@ import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import ConditionalLayout from "./ConditionalLayout";
 import ReduxProvider from "@/redux/ReduxProvider";
-
+import "primereact/resources/themes/lara-light-blue/theme.css";
+import "primereact/resources/primereact.min.css";
+import "primeicons/primeicons.css";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -51,11 +53,7 @@ export default async function RootLayout({
       >
         <NextIntlClientProvider messages={messages} locale={locale}>
           <ReduxProvider>
-           
-                <ConditionalLayout locale={locale}>
-                  {children}
-                </ConditionalLayout>
-             
+            <ConditionalLayout locale={locale}>{children}</ConditionalLayout>
           </ReduxProvider>
         </NextIntlClientProvider>
       </body>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 915fdd8..77d15e3 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,5 @@
-import { redirect } from 'next/navigation';
+import { redirect } from "next/navigation";
 
 export default function RootPage() {
-  redirect('/en');
+  redirect("/en");
 }
diff --git a/src/data/opportunities.ts b/src/data/opportunities.ts
new file mode 100644
index 0000000..6997a45
--- /dev/null
+++ b/src/data/opportunities.ts
@@ -0,0 +1,37 @@
+export interface OpportunityData {
+    name: string;
+    expectedRevenue: string;
+    probability: number;
+    contact: string;
+    email: string;
+    phone?: string;
+    salesperson: string;
+    expectedClosing: number;
+    stage: string;
+  }
+  
+  export const opportunities: OpportunityData[] = [
+    {
+      name: "Zainab Karaki's Opportunity",
+      expectedRevenue: "0.00 J-J",
+      probability: 50.0,
+      contact: "Zainab Karaki",
+      email: "zainabkaraki@gmail.com",
+      phone: "",
+      salesperson: "Zainab Karaki",
+      expectedClosing: 3,
+      stage: "Proposition",
+    },
+    {
+      name: "John Doe's Opportunity",
+      expectedRevenue: "5,000 USD",
+      probability: 80.0,
+      contact: "John Doe",
+      email: "johndoe@example.com",
+      phone: "123-456-7890",
+      salesperson: "Alice Johnson",
+      expectedClosing: 2,
+      stage: "Qualified",
+    },
+  ];
+  
\ No newline at end of file
diff --git a/src/redux/slices/leadsSlice.ts b/src/redux/slices/leadsSlice.ts
new file mode 100644
index 0000000..679bd7e
--- /dev/null
+++ b/src/redux/slices/leadsSlice.ts
@@ -0,0 +1,149 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { arrayMove } from "@dnd-kit/sortable";
+
+export interface Lead {
+  number: string;
+  title: string;
+  price: number;
+  id: number;
+  status: string;
+  name: string;
+}
+
+export interface Opportunity {
+  lead: Lead;
+  id: number;
+  leadId: number;
+  name: string;
+  phone: string;
+  email: string;
+  source: string;
+  industry: string;
+  assignedTo: string;
+  status: string;
+  nextFollowUp: string;
+  dealValue: string;
+  closingDate: string;
+  dealStatus: string;
+  createdAt: string;
+  updatedAt: string;
+  note: string;
+}
+
+interface LeadsState {
+  leads: Lead[];
+}
+
+const initialState: LeadsState = {
+  leads: [
+    {
+      id: 1,
+      status: "new",
+      title: "beeflex1",
+      price: 10000,
+      name: "contact name",
+      number: "+96176123456",
+    },
+    {
+      id: 2,
+      status: "new",
+      title: "beeflex2",
+      price: 10000,
+      name: "contact name",
+      number: "+96176123456",
+    },
+    {
+      id: 3,
+      status: "new",
+      title: "beeflex3",
+      price: 10000,
+      name: "contact name",
+      number: "+96176123456",
+    },
+    {
+      id: 4,
+      status: "new",
+      title: "beeflex4",
+      price: 10000,
+      name: "contact name",
+      number: "+96176123456",
+    },
+    {
+      id: 5,
+      status: "qualified",
+      title: "beeflex5",
+      price: 10000,
+      name: "contact name",
+      number: "+96176123456",
+    },
+    {
+      id: 6,
+      status: "qualified",
+      title: "beeflex6",
+      price: 10000,
+      name: "contact name",
+      number: "+96176123456",
+    },
+    {
+      id: 7,
+      status: "proposition",
+      title: "beeflex7",
+      price: 10000,
+      name: "contact name",
+      number: "+96176123456",
+    },
+    {
+      id: 8,
+      status: "won",
+      title: "beeflex8",
+      price: 10000,
+      name: "contact name",
+      number: "+96176123456",
+    },
+    {
+      id: 9,
+      status: "won",
+      title: "beeflex9",
+      price: 10000,
+      name: "contact name",
+      number: "+96176123456",
+    },
+    {
+      id: 10,
+      status: "qualified",
+      title: "beeflex10",
+      price: 10000,
+      name: "contact name",
+      number: "+96176123456",
+    },
+  ],
+};
+
+const leadsSlice = createSlice({
+  name: "leads",
+  initialState,
+  reducers: {
+    updateLeadStatus: (
+      state,
+      action: PayloadAction<{ id: number; status: string }>
+    ) => {
+      const lead = state.leads.find((lead) => lead.id === action.payload.id);
+      if (lead) {
+        lead.status = action.payload.status;
+      }
+    },
+    reorderLeads: (
+      state,
+      action: PayloadAction<{ fromIndex: number; toIndex: number }>
+    ) => {
+      state.leads = arrayMove(
+        state.leads,
+        action.payload.fromIndex,
+        action.payload.toIndex
+      );
+    },
+  },
+});
+
+export const { updateLeadStatus, reorderLeads } = leadsSlice.actions;
+export default leadsSlice.reducer;
diff --git a/src/redux/slices/posSlice.ts b/src/redux/slices/posSlice.ts
index 61b696c..7b95fa0 100644
--- a/src/redux/slices/posSlice.ts
+++ b/src/redux/slices/posSlice.ts
@@ -1,11 +1,10 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { Product, InvoiceDraft } from "@/types/PosProTypes";
 import { formatNumber } from "@/utils/formatNumber";
-import { createSelector } from 'reselect';
+import { createSelector } from "reselect";
 import type { WritableDraft } from "immer";
 
-
-type CartItem = Product & { quantity: number ; subtotal: number; };
+type CartItem = Product & { quantity: number; subtotal: number };
 
 type POSState = {
   cart: CartItem[];
@@ -14,31 +13,28 @@ type POSState = {
   activeInvoice: InvoiceDraft | null;
 };
 
-  
-
 const initialState: POSState = {
   cart: [],
   selectedRow: null,
-  invoiceDrafts: [], 
+  invoiceDrafts: [],
   activeInvoice: null,
 };
 
-
-
-
-
 const posSlice = createSlice({
   name: "pos",
   initialState,
   reducers: {
-    addProductToCart(state, action: PayloadAction<{ product: Product; quantity: number }>) {
+    addProductToCart(
+      state,
+      action: PayloadAction<{ product: Product; quantity: number }>
+    ) {
       const { product, quantity } = action.payload;
-    
+
       if (!state.activeInvoice) return;
-    
+
       const priceCategory = state.activeInvoice.priceCategory || 1; // Default price category
       const currencyRate = state.activeInvoice.selectedCurrency?.usdtocurr || 1; // Default to 1 if no currency rate
-    
+
       // Calculate subtotal for a cart item
       const calculateSubtotal = (item: CartItem) => {
         const price = (item.prices[priceCategory] || 0) * currencyRate; // Adjust price by category and currency
@@ -46,9 +42,11 @@ const posSlice = createSlice({
         const discount = item.percentDisc || 0;
         return item.quantity * price * (1 + vat / 100) * (1 - discount / 100);
       };
-    
+
       // Check if the product already exists in the cart
-      const existingCartItem = state.activeInvoice.cart.find((item) => item.code === product.code);
+      const existingCartItem = state.activeInvoice.cart.find(
+        (item) => item.code === product.code
+      );
       if (existingCartItem) {
         existingCartItem.quantity += quantity; // Update quantity
         existingCartItem.subtotal = calculateSubtotal(existingCartItem); // Recalculate subtotal
@@ -61,19 +59,19 @@ const posSlice = createSlice({
         };
         state.activeInvoice.cart.push(newCartItem);
       }
-    
+
       // Recalculate total items
       state.activeInvoice.totalItems = state.activeInvoice.cart.reduce(
         (total, item) => total + item.quantity,
         0
       );
-    
+
       // Recalculate total price
       state.activeInvoice.totalPrice = state.activeInvoice.cart.reduce(
         (total, item) => total + item.subtotal,
         0
       );
-    
+
       // Update the corresponding draft in invoiceDrafts
       const existingDraftIndex = state.invoiceDrafts.findIndex(
         (draft) => draft.draftKey === state.activeInvoice?.draftKey
@@ -81,60 +79,66 @@ const posSlice = createSlice({
       if (existingDraftIndex !== -1) {
         state.invoiceDrafts[existingDraftIndex] = { ...state.activeInvoice };
       }
-    }
-    
-,    
-      
-      
-      
-    updateCartQuantity(state, action: PayloadAction<{ code: string; quantity: number }>) {
-      const item = state.cart.find(cartItem => cartItem.code === action.payload.code);
+    },
+
+    updateCartQuantity(
+      state,
+      action: PayloadAction<{ code: string; quantity: number }>
+    ) {
+      const item = state.cart.find(
+        (cartItem) => cartItem.code === action.payload.code
+      );
       if (item) {
         item.quantity = action.payload.quantity;
       }
     },
     removeProductFromCart(state, action: PayloadAction<string>) {
       const productCode = action.payload;
-    
+
       // Update the cart in the root state
-      state.cart = state.cart.filter(item => item.code !== productCode);
-    
+      state.cart = state.cart.filter((item) => item.code !== productCode);
+
       // Check if activeInvoice is not null before updating it
       if (state.activeInvoice) {
-        state.activeInvoice.cart = state.activeInvoice.cart.filter(item => item.code !== productCode);
-    
+        state.activeInvoice.cart = state.activeInvoice.cart.filter(
+          (item) => item.code !== productCode
+        );
+
         // Recalculate totals
         state.activeInvoice.totalItems = state.activeInvoice.cart.reduce(
           (total, item) => total + item.quantity,
           0
         );
         state.activeInvoice.totalPrice = state.activeInvoice.cart.reduce(
-          (total, item) => total + item.quantity * (item.prices[state.activeInvoice?.priceCategory || 1] || 0),
+          (total, item) =>
+            total +
+            item.quantity *
+              (item.prices[state.activeInvoice?.priceCategory || 1] || 0),
           0
         );
       }
-    }
-,    
+    },
     setSelectedRow(state, action: PayloadAction<CartItem | null>) {
       state.selectedRow = action.payload;
     },
 
-
-
-    updateSelectedRow(state, action: PayloadAction<{ field: string; value: number }>) {
+    updateSelectedRow(
+      state,
+      action: PayloadAction<{ field: string; value: number }>
+    ) {
       if (!state.selectedRow || !state.activeInvoice) {
         console.warn("No selected row or active invoice.");
         return;
       }
-    
+
       const { field, value } = action.payload;
       const priceCategory = state.activeInvoice.priceCategory || 1;
       const usdtocurr = state.activeInvoice.selectedCurrency?.usdtocurr || 1;
-    
+
       const cartItem = state.activeInvoice.cart.find(
         (item) => item.code === state.selectedRow?.code
       );
-    
+
       if (cartItem) {
         if (field === "price") {
           cartItem.prices[priceCategory] = value / usdtocurr;
@@ -143,267 +147,278 @@ const posSlice = createSlice({
           (cartItem as any)[field] = value;
           (state.selectedRow as any)[field] = value;
         }
-    
+
         // Recalculate subtotal for the row
         const price = (cartItem.prices[priceCategory] || 0) * usdtocurr;
         const vat = cartItem.vat || 0;
         const discount = cartItem.percentDisc || 0;
-        cartItem.subtotal = cartItem.quantity * price * (1 + vat / 100) * (1 - discount / 100);
+        cartItem.subtotal =
+          cartItem.quantity * price * (1 + vat / 100) * (1 - discount / 100);
         state.selectedRow.subtotal = cartItem.subtotal; // Update selected row's subtotal
       }
-    
+
       // Recalculate total price
-      state.activeInvoice.totalPrice = state.activeInvoice.cart.reduce((total, item) => total + item.subtotal, 0);
-    
+      state.activeInvoice.totalPrice = state.activeInvoice.cart.reduce(
+        (total, item) => total + item.subtotal,
+        0
+      );
+
       // Trigger a re-render by re-assigning the cart array
       state.activeInvoice.cart = [...state.activeInvoice.cart];
-    }
-,    
-    
-    
-    
-    
+    },
     createDraft(state, action: PayloadAction<InvoiceDraft>) {
       state.invoiceDrafts.push(action.payload);
       state.activeInvoice = action.payload;
       state.cart = []; // Clear cart for the new invoice
     },
-    
+
     saveDraft(state, action: PayloadAction<InvoiceDraft>) {
-    const existingDraftIndex = state.invoiceDrafts.findIndex(
-      (draft) => draft.draftKey === action.payload.draftKey
-    );
-
-    if (existingDraftIndex !== -1) {
-      // Update the existing draft
-      state.invoiceDrafts[existingDraftIndex] = action.payload;
-    } else {
-      // Add a new draft
-      state.invoiceDrafts.push(action.payload);
-    }
+      const existingDraftIndex = state.invoiceDrafts.findIndex(
+        (draft) => draft.draftKey === action.payload.draftKey
+      );
+
+      if (existingDraftIndex !== -1) {
+        // Update the existing draft
+        state.invoiceDrafts[existingDraftIndex] = action.payload;
+      } else {
+        // Add a new draft
+        state.invoiceDrafts.push(action.payload);
+      }
     },
 
-  // Delete a specific draft
-  deleteDraft(state, action: PayloadAction<string>) {
-    state.invoiceDrafts = state.invoiceDrafts.filter(
-      (draft) => draft.draftKey !== action.payload
-    );
-  },
+    // Delete a specific draft
+    deleteDraft(state, action: PayloadAction<string>) {
+      state.invoiceDrafts = state.invoiceDrafts.filter(
+        (draft) => draft.draftKey !== action.payload
+      );
+    },
 
-  updateInvoiceCurrency(state, action: PayloadAction<{ id: number; usdtocurr: number }>) {
-    if (!state.activeInvoice) return;
-  
-    const activeInvoice = state.activeInvoice;
-    activeInvoice.selectedCurrency = action.payload;
-  
-    const priceCategory = activeInvoice.priceCategory;
-    const usdtocurr = action.payload.usdtocurr;
-  
-    // Update subtotals in the cart
-    activeInvoice.cart.forEach((item) => {
-      const price = (item.prices[priceCategory] || 0) * usdtocurr;
-      const vat = item.vat || 0;
-      const discount = item.percentDisc || 0;
-  
-      item.subtotal = item.quantity * price * (1 + vat / 100) * (1 - discount / 100);
-    });
-  
-    // Recalculate the total price
-    activeInvoice.totalPrice = activeInvoice.cart.reduce((total, item) => total + item.subtotal, 0);
-  
-    // Update the corresponding draft in invoiceDrafts
-    const existingDraftIndex = state.invoiceDrafts.findIndex(
-      (draft) => draft.draftKey === activeInvoice.draftKey
-    );
-    if (existingDraftIndex !== -1) {
-      state.invoiceDrafts[existingDraftIndex].selectedCurrency = action.payload;
-    }
-  },
-  
+    updateInvoiceCurrency(
+      state,
+      action: PayloadAction<{ id: number; usdtocurr: number }>
+    ) {
+      if (!state.activeInvoice) return;
+
+      const activeInvoice = state.activeInvoice;
+      activeInvoice.selectedCurrency = action.payload;
+
+      const priceCategory = activeInvoice.priceCategory;
+      const usdtocurr = action.payload.usdtocurr;
+
+      // Update subtotals in the cart
+      activeInvoice.cart.forEach((item) => {
+        const price = (item.prices[priceCategory] || 0) * usdtocurr;
+        const vat = item.vat || 0;
+        const discount = item.percentDisc || 0;
+
+        item.subtotal =
+          item.quantity * price * (1 + vat / 100) * (1 - discount / 100);
+      });
+
+      // Recalculate the total price
+      activeInvoice.totalPrice = activeInvoice.cart.reduce(
+        (total, item) => total + item.subtotal,
+        0
+      );
 
-  updateInvoiceCustomer(state, action: PayloadAction<string>) {
-    if (state.activeInvoice) {
-      state.activeInvoice.customer = action.payload;
-  
       // Update the corresponding draft in invoiceDrafts
       const existingDraftIndex = state.invoiceDrafts.findIndex(
-        (draft) => draft.draftKey === state.activeInvoice?.draftKey
+        (draft) => draft.draftKey === activeInvoice.draftKey
       );
       if (existingDraftIndex !== -1) {
-        state.invoiceDrafts[existingDraftIndex].customer = action.payload;
+        state.invoiceDrafts[existingDraftIndex].selectedCurrency =
+          action.payload;
       }
-    }
-  },
-  
-  updateInvoiceType(state, action: PayloadAction<string>) {
-    if (state.activeInvoice) {
-      state.activeInvoice.invoiceType = action.payload;
-  
+    },
+
+    updateInvoiceCustomer(state, action: PayloadAction<string>) {
+      if (state.activeInvoice) {
+        state.activeInvoice.customer = action.payload;
+
+        // Update the corresponding draft in invoiceDrafts
+        const existingDraftIndex = state.invoiceDrafts.findIndex(
+          (draft) => draft.draftKey === state.activeInvoice?.draftKey
+        );
+        if (existingDraftIndex !== -1) {
+          state.invoiceDrafts[existingDraftIndex].customer = action.payload;
+        }
+      }
+    },
+
+    updateInvoiceType(state, action: PayloadAction<string>) {
+      if (state.activeInvoice) {
+        state.activeInvoice.invoiceType = action.payload;
+
+        // Update the corresponding draft in invoiceDrafts
+        const existingDraftIndex = state.invoiceDrafts.findIndex(
+          (draft) => draft.draftKey === state.activeInvoice?.draftKey
+        );
+        if (existingDraftIndex !== -1) {
+          state.invoiceDrafts[existingDraftIndex].invoiceType = action.payload;
+        }
+      }
+    },
+
+    updateInvoiceInternalNote(state, action: PayloadAction<string>) {
+      if (!state.activeInvoice) {
+        console.warn("No active invoice found.");
+        return;
+      }
+
+      // Update the active invoice's internal note
+      state.activeInvoice.internalNote = action.payload;
+
       // Update the corresponding draft in invoiceDrafts
       const existingDraftIndex = state.invoiceDrafts.findIndex(
         (draft) => draft.draftKey === state.activeInvoice?.draftKey
       );
       if (existingDraftIndex !== -1) {
-        state.invoiceDrafts[existingDraftIndex].invoiceType = action.payload;
+        state.invoiceDrafts[existingDraftIndex].internalNote = action.payload;
       }
-    }
-  },
+    },
 
-  updateInvoiceInternalNote(state, action: PayloadAction<string>) {
-    if (!state.activeInvoice) {
-      console.warn("No active invoice found.");
-      return;
-    }
-
-    // Update the active invoice's internal note
-    state.activeInvoice.internalNote = action.payload;
-
-    // Update the corresponding draft in invoiceDrafts
-    const existingDraftIndex = state.invoiceDrafts.findIndex(
-      (draft) => draft.draftKey === state.activeInvoice?.draftKey
-    );
-    if (existingDraftIndex !== -1) {
-      state.invoiceDrafts[existingDraftIndex].internalNote = action.payload;
-    }
-  },
+    updateInvoiceGeneralNote(state, action: PayloadAction<string>) {
+      if (!state.activeInvoice) {
+        console.warn("No active invoice found.");
+        return;
+      }
 
-  updateInvoiceGeneralNote(state, action: PayloadAction<string>) {
-    if (!state.activeInvoice) {
-      console.warn("No active invoice found.");
-      return;
-    }
-
-    // Update the active invoice's general note
-    state.activeInvoice.generalNote = action.payload;
-
-    // Update the corresponding draft in invoiceDrafts
-    const existingDraftIndex = state.invoiceDrafts.findIndex(
-      (draft) => draft.draftKey === state.activeInvoice?.draftKey
-    );
-    if (existingDraftIndex !== -1) {
-      state.invoiceDrafts[existingDraftIndex].generalNote = action.payload;
-    }
-  },
-  
-  
-  
-  // Set the active invoice
-  setActiveInvoice(state, action: PayloadAction<string>) {
-    const draftKey = action.payload;
-  
-    // Save the current active invoice's state to its draft
-    if (state.activeInvoice) {
+      // Update the active invoice's general note
+      state.activeInvoice.generalNote = action.payload;
+
+      // Update the corresponding draft in invoiceDrafts
       const existingDraftIndex = state.invoiceDrafts.findIndex(
         (draft) => draft.draftKey === state.activeInvoice?.draftKey
       );
       if (existingDraftIndex !== -1) {
-        // Update the existing draft with the current active invoice's data
-        state.invoiceDrafts[existingDraftIndex] = { ...state.activeInvoice };
+        state.invoiceDrafts[existingDraftIndex].generalNote = action.payload;
       }
-    }
-  
-    // Set the new active invoice
-    const newActiveDraft = state.invoiceDrafts.find((draft) => draft.draftKey === draftKey);
-    if (newActiveDraft) {
-      state.activeInvoice = { ...newActiveDraft };
-    }
-  }
-,  
+    },
 
-updateInvoicePriceCategory(state, action: PayloadAction<number>) {
-  if (!state.activeInvoice) return;
+    // Set the active invoice
+    setActiveInvoice(state, action: PayloadAction<string>) {
+      const draftKey = action.payload;
 
-  const activeInvoice = state.activeInvoice;
-  activeInvoice.priceCategory = action.payload;
+      // Save the current active invoice's state to its draft
+      if (state.activeInvoice) {
+        const existingDraftIndex = state.invoiceDrafts.findIndex(
+          (draft) => draft.draftKey === state.activeInvoice?.draftKey
+        );
+        if (existingDraftIndex !== -1) {
+          // Update the existing draft with the current active invoice's data
+          state.invoiceDrafts[existingDraftIndex] = { ...state.activeInvoice };
+        }
+      }
 
-  const priceCategory = action.payload;
-  const usdtocurr = activeInvoice.selectedCurrency?.usdtocurr || 1;
+      // Set the new active invoice
+      const newActiveDraft = state.invoiceDrafts.find(
+        (draft) => draft.draftKey === draftKey
+      );
+      if (newActiveDraft) {
+        state.activeInvoice = { ...newActiveDraft };
+      }
+    },
+    updateInvoicePriceCategory(state, action: PayloadAction<number>) {
+      if (!state.activeInvoice) return;
 
-  // Update subtotals in the cart
-  activeInvoice.cart.forEach((item) => {
-    const price = (item.prices[priceCategory] || 0) * usdtocurr;
-    const vat = item.vat || 0;
-    const discount = item.percentDisc || 0;
+      const activeInvoice = state.activeInvoice;
+      activeInvoice.priceCategory = action.payload;
 
-    item.subtotal = item.quantity * price * (1 + vat / 100) * (1 - discount / 100);
-  });
+      const priceCategory = action.payload;
+      const usdtocurr = activeInvoice.selectedCurrency?.usdtocurr || 1;
 
-  // Recalculate the total price
-  activeInvoice.totalPrice = activeInvoice.cart.reduce((total, item) => total + item.subtotal, 0);
+      // Update subtotals in the cart
+      activeInvoice.cart.forEach((item) => {
+        const price = (item.prices[priceCategory] || 0) * usdtocurr;
+        const vat = item.vat || 0;
+        const discount = item.percentDisc || 0;
 
-  // Update the corresponding draft in invoiceDrafts
-  const existingDraftIndex = state.invoiceDrafts.findIndex(
-    (draft) => draft.draftKey === activeInvoice.draftKey
-  );
-  if (existingDraftIndex !== -1) {
-    state.invoiceDrafts[existingDraftIndex].priceCategory = action.payload;
-  }
-},
-
-  updateInvoiceDiscount(state, action: PayloadAction<number>) {
-    if (!state.activeInvoice) {
-      console.warn("No active invoice found.");
-      return;
-    }
-  
-    state.activeInvoice.discount = action.payload;
-  
-    // Calculate the discounted total immediately
-    const { usdtocurr } = state.activeInvoice.selectedCurrency || { usdtocurr: 1 };
-    const priceCategory = state.activeInvoice.priceCategory;
-  
-    const rawTotal = state.activeInvoice.cart.reduce((total, item) => {
-      const price = (item.prices[priceCategory] || 0) * usdtocurr;
-      const vat = item.vat || 0;
-      const discount = item.percentDisc || 0;
-      const subtotal = item.quantity * price * (1 + vat / 100) * (1 - discount / 100);
-      return total + subtotal;
-    }, 0);
-  
-    state.activeInvoice.totalPrice = rawTotal * (1 - action.payload / 100); // Apply the discount
-  },
-  
-  
-  
-  
-  // Clear the active invoice
-  clearActiveInvoice(state) {
-    state.activeInvoice = null;
-    state.cart = []; // Clear the cart when the invoice is cleared
+        item.subtotal =
+          item.quantity * price * (1 + vat / 100) * (1 - discount / 100);
+      });
+
+      // Recalculate the total price
+      activeInvoice.totalPrice = activeInvoice.cart.reduce(
+        (total, item) => total + item.subtotal,
+        0
+      );
+
+      // Update the corresponding draft in invoiceDrafts
+      const existingDraftIndex = state.invoiceDrafts.findIndex(
+        (draft) => draft.draftKey === activeInvoice.draftKey
+      );
+      if (existingDraftIndex !== -1) {
+        state.invoiceDrafts[existingDraftIndex].priceCategory = action.payload;
+      }
+    },
+
+    updateInvoiceDiscount(state, action: PayloadAction<number>) {
+      if (!state.activeInvoice) {
+        console.warn("No active invoice found.");
+        return;
+      }
+
+      state.activeInvoice.discount = action.payload;
+
+      // Calculate the discounted total immediately
+      const { usdtocurr } = state.activeInvoice.selectedCurrency || {
+        usdtocurr: 1,
+      };
+      const priceCategory = state.activeInvoice.priceCategory;
+
+      const rawTotal = state.activeInvoice.cart.reduce((total, item) => {
+        const price = (item.prices[priceCategory] || 0) * usdtocurr;
+        const vat = item.vat || 0;
+        const discount = item.percentDisc || 0;
+        const subtotal =
+          item.quantity * price * (1 + vat / 100) * (1 - discount / 100);
+        return total + subtotal;
+      }, 0);
+
+      state.activeInvoice.totalPrice = rawTotal * (1 - action.payload / 100); // Apply the discount
+    },
+
+    // Clear the active invoice
+    clearActiveInvoice(state) {
+      state.activeInvoice = null;
+      state.cart = []; // Clear the cart when the invoice is cleared
+    },
   },
-}});
+});
 
 export const {
-    addProductToCart,
-    updateCartQuantity,
-    removeProductFromCart,
-    setSelectedRow,
-    updateSelectedRow,
-    saveDraft,
-    deleteDraft,
-    setActiveInvoice,
-    clearActiveInvoice,
-    updateInvoiceCurrency,
-    updateInvoiceDiscount,
-    updateInvoiceCustomer,
-    updateInvoiceType,
+  addProductToCart,
+  updateCartQuantity,
+  removeProductFromCart,
+  setSelectedRow,
+  updateSelectedRow,
+  saveDraft,
+  deleteDraft,
+  setActiveInvoice,
+  clearActiveInvoice,
+  updateInvoiceCurrency,
+  updateInvoiceDiscount,
+  updateInvoiceCustomer,
+  updateInvoiceType,
   updateInvoicePriceCategory,
   updateInvoiceInternalNote,
   updateInvoiceGeneralNote,
-  } = posSlice.actions;
-  
+} = posSlice.actions;
 
 export default posSlice.reducer;
 
-
 // Selector for total price
-export const selectCartTotal = (state: { pos: POSState }) => 
-    state.pos.cart.reduce((total, item) => total + (item.prices[1] || 0) * item.quantity, 0);
-  
+export const selectCartTotal = (state: { pos: POSState }) =>
+  state.pos.cart.reduce(
+    (total, item) => total + (item.prices[1] || 0) * item.quantity,
+    0
+  );
 
-export const selectInvoiceDrafts = (state: { pos: POSState }) => state.pos.invoiceDrafts;
+export const selectInvoiceDrafts = (state: { pos: POSState }) =>
+  state.pos.invoiceDrafts;
 
-export const selectActiveInvoice = (state: { pos: POSState }) => state.pos.activeInvoice;
+export const selectActiveInvoice = (state: { pos: POSState }) =>
+  state.pos.activeInvoice;
 
 // Memoized selector for active invoice cart
 export const selectActiveInvoiceCart = createSelector(
@@ -413,10 +428,9 @@ export const selectActiveInvoiceCart = createSelector(
 
 export const selectSelectedCurrency = createSelector(
   [selectActiveInvoice],
-  (activeInvoice) => activeInvoice?.selectedCurrency || { id: 1, usdtocurr: 1 } 
+  (activeInvoice) => activeInvoice?.selectedCurrency || { id: 1, usdtocurr: 1 }
 );
 
-
 // Memoized selector for active invoice total
 
 export const selectActiveInvoiceTotal = createSelector(
@@ -429,9 +443,4 @@ export const selectActiveInvoiceTotal = createSelector(
   }
 );
 
-
-
-
-
-
-export const { createDraft } = posSlice.actions;
\ No newline at end of file
+export const { createDraft } = posSlice.actions;
diff --git a/src/redux/store.ts b/src/redux/store.ts
index 53b4439..c3777f3 100644
--- a/src/redux/store.ts
+++ b/src/redux/store.ts
@@ -1,12 +1,14 @@
-import { configureStore } from '@reduxjs/toolkit';
-import refreshReducer from './slices/refreshSlice'; 
-import posReducer from './slices/posSlice';
+import { configureStore } from "@reduxjs/toolkit";
+import refreshReducer from "./slices/refreshSlice";
+import posReducer from "./slices/posSlice";
+import leadsReducer from "./slices/leadsSlice";
 
 const store = configureStore({
-    reducer: {
-        refresh: refreshReducer, // Add reducers here
-        pos: posReducer,
-    },
+  reducer: {
+    refresh: refreshReducer, // Add reducers here
+    pos: posReducer,
+    leads: leadsReducer,
+  },
 });
 
 export type RootState = ReturnType<typeof store.getState>; // Type for root state
diff --git a/src/types/Module.tsx b/src/types/Module.tsx
index 4c4e017..61be9e9 100644
--- a/src/types/Module.tsx
+++ b/src/types/Module.tsx
@@ -15,4 +15,24 @@ export interface Attachment {
     path: string;
     fileName: string;
     type: string;
-}
\ No newline at end of file
+}
+
+export interface Opportunity {
+    id: number;
+    leadId: number;
+    name: string;
+    phone: string;
+    email: string;
+    source: string;
+    industry: string;
+    assignedTo: string;
+    status: string;
+    nextFollowUp: string;
+    dealValue: string;
+    closingDate: string;
+    dealStatus: string;
+    createdAt: string;
+    updatedAt: string;
+    note: string;
+  }
+  
\ No newline at end of file
diff --git a/src/types/dragula.d.ts b/src/types/dragula.d.ts
new file mode 100644
index 0000000..0a5241d
--- /dev/null
+++ b/src/types/dragula.d.ts
@@ -0,0 +1,5 @@
+declare module 'dragula' {
+    const dragula: any;
+    export default dragula;
+  }
+  
\ No newline at end of file