From ff192d673e9778dbde23e92115cb58143f773a0a Mon Sep 17 00:00:00 2001
From: neajmorshed0 <neajmorshedimon@gmail.com>
Date: Mon, 17 Feb 2025 18:27:16 +0600
Subject: [PATCH] fix issue from johuruls feedback

---
 .gitignore                                    |  1 +
 package.json                                  |  1 +
 src/components/auth/SignInForm.tsx            |  2 +-
 src/components/ecommerce/DemographicCard.tsx  |  2 +-
 .../ecommerce/MonthlySalesChart.tsx           |  2 +-
 src/components/ecommerce/MonthlyTarget.tsx    |  2 +-
 src/components/form/MultiSelect.tsx           |  4 +--
 .../header/NotificationDropdown.tsx           |  5 ++--
 src/components/header/UserDropdown.tsx        | 19 ++++++------
 src/components/ui/dropdown/Dropdown.tsx       | 30 ++++++++++---------
 src/components/user-profile/UserMetaCard.tsx  | 22 +++++++++-----
 src/layout/AppHeader.tsx                      |  5 ++--
 12 files changed, 53 insertions(+), 42 deletions(-)

diff --git a/.gitignore b/.gitignore
index 940999cf..fc0d6213 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
+/.idea
 /node_modules
 /.pnp
 .pnp.js
diff --git a/package.json b/package.json
index c24800ff..2a097ee1 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@types/react-flatpickr": "^3.8.11",
+    "@types/react-transition-group": "^4.4.12",
     "eslint": "^9",
     "eslint-config-next": "15.1.3",
     "postcss": "^8",
diff --git a/src/components/auth/SignInForm.tsx b/src/components/auth/SignInForm.tsx
index 78a71ec4..40f71be0 100644
--- a/src/components/auth/SignInForm.tsx
+++ b/src/components/auth/SignInForm.tsx
@@ -11,7 +11,7 @@ export default function SignInForm() {
   const [showPassword, setShowPassword] = useState(false);
   const [isChecked, setIsChecked] = useState(false);
   return (
-    <div className="flex flex-col flex-1 p-6 rounded-2xl sm:rounded-none sm:border-0 sm:p-8">
+    <div className="flex flex-col flex-1">
       <div className="w-full max-w-md pt-10 mx-auto">
         <Link
           href="/"
diff --git a/src/components/ecommerce/DemographicCard.tsx b/src/components/ecommerce/DemographicCard.tsx
index 368c030d..c824b485 100644
--- a/src/components/ecommerce/DemographicCard.tsx
+++ b/src/components/ecommerce/DemographicCard.tsx
@@ -31,7 +31,7 @@ export default function DemographicCard() {
         </div>
 
         <div className="relative inline-block">
-          <button onClick={toggleDropdown}>
+          <button onClick={toggleDropdown} className="dropdown-toggle">
             <MoreDotIcon className="text-gray-400 hover:text-gray-700 dark:hover:text-gray-300" />
           </button>
           <Dropdown
diff --git a/src/components/ecommerce/MonthlySalesChart.tsx b/src/components/ecommerce/MonthlySalesChart.tsx
index abe98952..ed387cea 100644
--- a/src/components/ecommerce/MonthlySalesChart.tsx
+++ b/src/components/ecommerce/MonthlySalesChart.tsx
@@ -115,7 +115,7 @@ export default function MonthlySalesChart() {
         </h3>
 
         <div className="relative inline-block">
-          <button onClick={toggleDropdown}>
+          <button onClick={toggleDropdown} className="dropdown-toggle">
             <MoreDotIcon className="text-gray-400 hover:text-gray-700 dark:hover:text-gray-300" />
           </button>
           <Dropdown
diff --git a/src/components/ecommerce/MonthlyTarget.tsx b/src/components/ecommerce/MonthlyTarget.tsx
index 95990681..d4f66db5 100644
--- a/src/components/ecommerce/MonthlyTarget.tsx
+++ b/src/components/ecommerce/MonthlyTarget.tsx
@@ -85,7 +85,7 @@ export default function MonthlyTarget() {
             </p>
           </div>
           <div className="relative inline-block">
-            <button onClick={toggleDropdown}>
+            <button onClick={toggleDropdown} className="dropdown-toggle">
               <MoreDotIcon className="text-gray-400 hover:text-gray-700 dark:hover:text-gray-300" />
             </button>
             <Dropdown
diff --git a/src/components/form/MultiSelect.tsx b/src/components/form/MultiSelect.tsx
index d25f7d17..f94a895b 100644
--- a/src/components/form/MultiSelect.tsx
+++ b/src/components/form/MultiSelect.tsx
@@ -57,7 +57,7 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
 
       <div className="relative z-20 inline-block w-full">
         <div className="relative flex flex-col items-center">
-          <div onClick={toggleDropdown} className="w-full">
+          <div onClick={toggleDropdown} className="dropdown-toggle" className="w-full">
             <div className="mb-2 flex h-11 rounded-lg border border-gray-300 py-1.5 pl-3 pr-3 shadow-theme-xs outline-none transition focus:border-brand-300 focus:shadow-focus-ring dark:border-gray-700 dark:bg-gray-900 dark:focus:border-brand-300">
               <div className="flex flex-wrap flex-auto gap-2">
                 {selectedValuesText.length > 0 ? (
@@ -104,7 +104,7 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
               <div className="flex items-center py-1 pl-1 pr-1 w-7">
                 <button
                   type="button"
-                  onClick={toggleDropdown}
+                  onClick={toggleDropdown} className="dropdown-toggle"
                   className="w-5 h-5 text-gray-700 outline-none cursor-pointer focus:outline-none dark:text-gray-400"
                 >
                   <svg
diff --git a/src/components/header/NotificationDropdown.tsx b/src/components/header/NotificationDropdown.tsx
index 3a8df831..fc892d9e 100644
--- a/src/components/header/NotificationDropdown.tsx
+++ b/src/components/header/NotificationDropdown.tsx
@@ -5,6 +5,7 @@ import React, { useState } from "react";
 import { Dropdown } from "../ui/dropdown/Dropdown";
 import { DropdownItem } from "../ui/dropdown/DropdownItem";
 
+
 export default function NotificationDropdown() {
   const [isOpen, setIsOpen] = useState(false);
   const [notifying, setNotifying] = useState(true);
@@ -24,7 +25,7 @@ export default function NotificationDropdown() {
   return (
     <div className="relative">
       <button
-        className="relative flex items-center justify-center text-gray-500 transition-colors bg-white border border-gray-200 rounded-full hover:text-gray-700 h-11 w-11 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white"
+        className="relative flex dropdown-toggle items-center justify-center text-gray-500 transition-colors bg-white border border-gray-200 rounded-full hover:text-gray-700 h-11 w-11 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white"
         onClick={handleClick}
       >
         <span
@@ -59,7 +60,7 @@ export default function NotificationDropdown() {
             Notification
           </h5>
           <button
-            onClick={toggleDropdown}
+            onClick={toggleDropdown} className="dropdown-toggle"
             className="text-gray-500 transition dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
           >
             <svg
diff --git a/src/components/header/UserDropdown.tsx b/src/components/header/UserDropdown.tsx
index d9b079b9..dd399a16 100644
--- a/src/components/header/UserDropdown.tsx
+++ b/src/components/header/UserDropdown.tsx
@@ -8,9 +8,10 @@ import { DropdownItem } from "../ui/dropdown/DropdownItem";
 export default function UserDropdown() {
   const [isOpen, setIsOpen] = useState(false);
 
-  function toggleDropdown() {
-    setIsOpen(!isOpen);
-  }
+function toggleDropdown(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
+  e.stopPropagation();
+  setIsOpen((prev) => !prev);
+}
 
   function closeDropdown() {
     setIsOpen(false);
@@ -18,8 +19,8 @@ export default function UserDropdown() {
   return (
     <div className="relative">
       <button
-        onClick={toggleDropdown}
-        className="flex items-center text-gray-700 dark:text-gray-400"
+        onClick={toggleDropdown} className="dropdown-toggle"
+        className="flex items-center text-gray-700 dark:text-gray-400 dropdown-toggle"
       >
         <span className="mr-3 overflow-hidden rounded-full h-11 w-11">
           <Image
@@ -30,9 +31,7 @@ export default function UserDropdown() {
           />
         </span>
 
-        <span className="block mr-1 font-medium text-theme-sm">
-          Musharof
-        </span>
+        <span className="block mr-1 font-medium text-theme-sm">Musharof</span>
 
         <svg
           className={`stroke-gray-500 dark:stroke-gray-400 transition-transform duration-200 ${
@@ -61,10 +60,10 @@ export default function UserDropdown() {
       >
         <div>
           <span className="block font-medium text-gray-700 text-theme-sm dark:text-gray-400">
-       Musharof Chowdury
+            Musharof Chowdhury
           </span>
           <span className="mt-0.5 block text-theme-xs text-gray-500 dark:text-gray-400">
-           randomuser@pimjo.com
+            randomuser@pimjo.com
           </span>
         </div>
 
diff --git a/src/components/ui/dropdown/Dropdown.tsx b/src/components/ui/dropdown/Dropdown.tsx
index d978e49c..92d65b33 100644
--- a/src/components/ui/dropdown/Dropdown.tsx
+++ b/src/components/ui/dropdown/Dropdown.tsx
@@ -17,21 +17,23 @@ export const Dropdown: React.FC<DropdownProps> = ({
 }) => {
   const dropdownRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node)
-      ) {
-        onClose();
-      }
-    };
+ useEffect(() => {
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      dropdownRef.current &&
+      !dropdownRef.current.contains(event.target as Node) &&
+      !(event.target as HTMLElement).closest('.dropdown-toggle')
+    ) {
+      onClose();
+    }
+  };
+
+  document.addEventListener("mousedown", handleClickOutside);
+  return () => {
+    document.removeEventListener("mousedown", handleClickOutside);
+  };
+}, [onClose]);
 
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [onClose]);
 
   if (!isOpen) return null;
 
diff --git a/src/components/user-profile/UserMetaCard.tsx b/src/components/user-profile/UserMetaCard.tsx
index 80d1dc55..185e78ee 100644
--- a/src/components/user-profile/UserMetaCard.tsx
+++ b/src/components/user-profile/UserMetaCard.tsx
@@ -6,6 +6,7 @@ import Button from "../ui/button/Button";
 import Input from "../form/input/InputField";
 import Label from "../form/Label";
 import Image from "next/image";
+import Link from "next/link";
 
 export default function UserMetaCard() {
   const { isOpen, openModal, closeModal } = useModal();
@@ -42,7 +43,9 @@ export default function UserMetaCard() {
               </div>
             </div>
             <div className="flex items-center order-2 gap-2 grow xl:order-3 xl:justify-end">
-              <button className="flex h-11 w-11 items-center justify-center gap-2 rounded-full border border-gray-300 bg-white text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200">
+              <a        
+        target="_blank"
+        rel="noreferrer" href='https://www.facebook.com/PimjoHQ' className="flex h-11 w-11 items-center justify-center gap-2 rounded-full border border-gray-300 bg-white text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200">
                 <svg
                   className="fill-current"
                   width="20"
@@ -56,9 +59,10 @@ export default function UserMetaCard() {
                     fill=""
                   />
                 </svg>
-              </button>
+              </a>
 
-              <button className="flex h-11 w-11 items-center justify-center gap-2 rounded-full border border-gray-300 bg-white text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200">
+              <a href='https://x.com/PimjoHQ' target="_blank"
+        rel="noreferrer"  className="flex h-11 w-11 items-center justify-center gap-2 rounded-full border border-gray-300 bg-white text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200">
                 <svg
                   className="fill-current"
                   width="20"
@@ -72,9 +76,10 @@ export default function UserMetaCard() {
                     fill=""
                   />
                 </svg>
-              </button>
+              </a>
 
-              <button className="flex h-11 w-11 items-center justify-center gap-2 rounded-full border border-gray-300 bg-white text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200">
+              <a href="https://www.linkedin.com/company/pimjo" target="_blank"
+        rel="noreferrer" className="flex h-11 w-11 items-center justify-center gap-2 rounded-full border border-gray-300 bg-white text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200">
                 <svg
                   className="fill-current"
                   width="20"
@@ -88,9 +93,10 @@ export default function UserMetaCard() {
                     fill=""
                   />
                 </svg>
-              </button>
+              </a>
 
-              <button className="flex h-11 w-11 items-center justify-center gap-2 rounded-full border border-gray-300 bg-white text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200">
+              <a href='https://instagram.com/PimjoHQ' target="_blank"
+        rel="noreferrer" className="flex h-11 w-11 items-center justify-center gap-2 rounded-full border border-gray-300 bg-white text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200">
                 <svg
                   className="fill-current"
                   width="20"
@@ -104,7 +110,7 @@ export default function UserMetaCard() {
                     fill=""
                   />
                 </svg>
-              </button>
+              </a>
             </div>
           </div>
           <button
diff --git a/src/layout/AppHeader.tsx b/src/layout/AppHeader.tsx
index a4734524..838612ac 100644
--- a/src/layout/AppHeader.tsx
+++ b/src/layout/AppHeader.tsx
@@ -165,11 +165,12 @@ const AppHeader: React.FC = () => {
             <ThemeToggleButton />
             {/* <!-- Dark Mode Toggler --> */}
 
-            <NotificationDropdown />
+           <NotificationDropdown /> 
             {/* <!-- Notification Menu Area --> */}
           </div>
           {/* <!-- User Area --> */}
-          <UserDropdown />
+          <UserDropdown /> 
+    
         </div>
       </div>
     </header>