payment method modal added in settings sections

src/ui/pages/Dashboard.tsx

@@ -16,7 +16,7 @@ interface Project {
   totalWorkTime: string;
   totalWorkMs: number;
   totalLogs: number;
-  status: string
+  status: string;
 }
 
 interface ProjectTrackingData {

src/ui/pages/Schedule/Schedule.tsx

@@ -38,6 +38,8 @@ const Schedule = () => {
 
     /** Fetch Data */
     const fetchSchedules = async () => {
+        setRefreshing(true);
+         setLoading(true);
         try {
             const res = await window.electron.getSchedules();
 
@@ -58,7 +60,7 @@ const Schedule = () => {
 
     /** Refresh Button */
     const handleRefresh = async () => {
-        setRefreshing(true);
+        
         await fetchSchedules();
     };
 

src/ui/pages/Settings/SettingModal/ChangePaymentModal.tsx

@@ -0,0 +1,157 @@
+import React, { useState, useEffect } from "react";
+import { CreditCard } from "lucide-react";
+import { useSelector, useDispatch } from "react-redux";
+import { RootState } from "../../../store";
+
+interface ChangePaymentModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const ChangePaymentModal: React.FC<ChangePaymentModalProps> = ({
+  isOpen,
+  onClose,
+}) => {
+  const dispatch = useDispatch();
+  const { profile } = useSelector((state: RootState) => state.profile);
+
+  const [method, setMethod] = useState(profile?.paymentMethod || "");
+  const [wiseEmail, setWiseEmail] = useState(profile?.wiseEmail || "");
+  const [veemAccount, setVeemAccount] = useState(profile?.veemAccount || "");
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    if (isOpen) {
+      setMethod(profile?.paymentMethod || "");
+      setWiseEmail(profile?.wiseEmail || "");
+      setVeemAccount(profile?.veemAccount || "");
+      setError("");
+    }
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  const handleSubmit = async () => {
+    setError("");
+
+    // Validation
+    if (!method) {
+      return setError("Please select a payment method.");
+    }
+
+    if (method === "wise" && !wiseEmail.trim()) {
+      return setError("Wise email is required.");
+    }
+
+    if (method === "wise" && !/^\S+@\S+\.\S+$/.test(wiseEmail)) {
+      return setError("Enter a valid Wise email.");
+    }
+
+    if (method === "veem" && !veemAccount.trim()) {
+      return setError("Veem account number is required.");
+    }
+
+    setLoading(true);
+
+    // try {
+    //   // Replace with your electron API
+    //   await window.electron.updatePayment({
+    //     method,
+    //     wiseEmail: method === "wise" ? wiseEmail.trim() : "",
+    //     veemAccount: method === "veem" ? veemAccount.trim() : "",
+    //   });
+
+    //   // Refresh or update Redux
+    //   // dispatch(updateProfile({...}));
+
+    //   onClose();
+    // } catch (err) {
+    //   setError("Failed to update payment info. Try again.");
+    // }
+
+    setLoading(false);
+  };
+
+  return (
+    <dialog open className="modal modal-open">
+      <div className="modal-box w-96">
+
+        <h3 className="font-bold text-lg mb-4 flex items-center gap-2">
+          <CreditCard size={18} /> Change Payment Method
+        </h3>
+
+        {/* Error */}
+        {error && (
+          <div className="alert alert-error py-2 text-xs mb-3">{error}</div>
+        )}
+
+        {/* Dropdown */}
+        <div className="form-control mb-4">
+          <label className="label">
+            <span className="text-sm font-medium">Payment Method</span>
+          </label>
+
+          <select
+            className="select select-bordered select-sm"
+            value={method}
+            onChange={(e) => setMethod(e.target.value)}
+          >
+            <option value="">Select method</option>
+            <option value="wise">Wise</option>
+            <option value="veem">Veem</option>
+          </select>
+        </div>
+
+        {/* Wise Email */}
+        {method === "wise" && (
+          <div className="form-control mb-4">
+            <label className="label">
+              <span className="text-sm font-medium">Wise Email</span>
+            </label>
+            <input
+              type="email"
+              className="input input-bordered input-sm"
+              placeholder="Enter Wise email"
+              value={wiseEmail}
+              onChange={(e) => setWiseEmail(e.target.value)}
+            />
+          </div>
+        )}
+
+        {/* Veem Account */}
+        {method === "veem" && (
+          <div className="form-control mb-4">
+            <label className="label">
+              <span className="text-sm font-medium">Veem Account Number</span>
+            </label>
+            <input
+              type="text"
+              className="input input-bordered input-sm"
+              placeholder="Enter Veem account"
+              value={veemAccount}
+              onChange={(e) => setVeemAccount(e.target.value)}
+            />
+          </div>
+        )}
+
+        <div className="modal-action">
+          <button className="btn btn-sm btn-ghost" onClick={onClose}>
+            Cancel
+          </button>
+
+          <button
+            className={`btn btn-sm btn-primary ${loading ? "loading" : ""}`}
+            onClick={handleSubmit}
+            disabled={loading}
+          >
+            {loading ? "Updating..." : "Update"}
+          </button>
+        </div>
+      </div>
+    </dialog>
+  );
+};
+
+export default ChangePaymentModal;

src/ui/pages/Settings/Settings.tsx

@@ -1,13 +1,15 @@
 
 import React, { useState } from "react";
-import { User, Mail, Phone, Calendar, MapPin, CreditCard, Globe, Lock } from "lucide-react";
+import { User, Mail, Phone, Calendar, MapPin, CreditCard, Globe, Lock, SquarePen } from "lucide-react";
 import { useSelector } from "react-redux";
 import { RootState } from "../../store";
 import ChangePasswordModal from "./ChangePasswordModal";
+import ChangePaymentModal from "./SettingModal/ChangePaymentModal";
 
 const Settings: React.FC = () => {
   const { profile } = useSelector((state: RootState) => state.profile);
   const [modalOpen, setModalOpen] = useState(false);
+  const [showPaymentModal,setShowPaymentModal] = useState(false)
 
   const fullName = `${profile?.firstName || ""} ${profile?.lastName || ""}`.trim();
 
@@ -84,7 +86,10 @@ const Settings: React.FC = () => {
 
 
             {/* Payment Info */}
-            <div className="p-2 rounded bg-base-200/40">
+            <div
+              className=" p-2 rounded bg-base-200/40 cursor-pointer hover:text-primary transition-all duration-200 ease-in-out hover:scale-[1.02] active:scale-[0.98] " onClick={() => setShowPaymentModal(true)}>
+              <div className="flex justify-between items-center">
+                <div>
                   <p className="text-xs text-base-content/60 flex items-center gap-1 mb-0.5">
                     <CreditCard size={11} /> Payment
                   </p>
@@ -92,14 +97,20 @@ const Settings: React.FC = () => {
                     {profile?.paymentMethod || "N/A"}
                   </p>
                 </div>
+                <span>
+                  <SquarePen size={15} />
+                </span>
+              </div>
+            </div>
 
-            {profile?.paymentMethod === "payoneer" && (
+
+            {profile?.paymentMethod === "wise" && (
               <div className="p-2 rounded bg-base-200/40">
                 <p className="text-xs text-base-content/60 flex items-center gap-1 mb-0.5">
-                  💳 Payoneer
+                  💳 Wise
                 </p>
                 <p className="text-xs font-medium truncate" title={profile?.payoneerAccount || "N/A"}>
-                  {maskLast5(profile?.payoneerAccount)}
+                  {maskLast5(profile?.wiseEmail)}
                 </p>
               </div>
             )}
@@ -129,8 +140,9 @@ const Settings: React.FC = () => {
           </div>
         </div>
       </div>
-      {/* Change Password Modal */}
+      {/* Modal */}
       <ChangePasswordModal isOpen={modalOpen} onClose={() => setModalOpen(false)} />
+      <ChangePaymentModal isOpen={showPaymentModal} onClose={() => setShowPaymentModal(false)} />
     </div>
   );
 };

src/ui/store/profileSlice.tsx

@@ -19,6 +19,7 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
   paymentMethod:string;
   payoneerAccount:string;
   veemAccount:string;
+  wiseEmail:string
   _id: string;
 }
 

types.d.ts

@@ -83,6 +83,7 @@ interface ProfileData {
   paymentMethod: string;
   payoneerAccount: string;
   veemAccount: string;
+  wiseEmail:string
   _id: string;
 }