Merge branch 'master' of https://git.shiblysolution.id/TPAY/dashboard

src/layouts/demo2/header/HeaderTopbar.tsx

@@ -25,21 +25,21 @@ const HeaderTopbar = () => {
   const handleDropdownChatShow = () => {
     window.dispatchEvent(new Event('resize'));
   };
-  
+
   return (
     <div className="flex items-center gap-4">
-      <div className="hidden md:flex flex-col items-end mr-2 text-right">
+      <div className="hidden md:flex flex-col items-end mr-2 text-right mt-1">
         <span
-          className={`font-semibold text-sm leading-tight ${isSticky ? 'text-black' : 'text-white'}`}
+          className={`font-semibold text-lg leading-tight ${isSticky ? 'text-black' : 'text-white'}`}
         >
           {getAuth()?.user.username}
         </span>
-        <span className={`text-xs ${isSticky ? 'text-gray-700' : 'text-gray-400'}`}>
+        <span className={`text-xs ${isSticky ? 'text-gray-700' : 'text-white'}`}>
-          {getAuth()?.role_name}
+          as {getAuth()?.role_name}
         </span>
       </div>
 
-      <Menu>
+      <Menu className="w-12 h-12">
         <MenuItem
           ref={itemUserRef}
           toggle="dropdown"
@@ -56,9 +56,9 @@ const HeaderTopbar = () => {
             ]
           }}
         >
-          <MenuToggle className="btn btn-icon rounded-full">
+          <MenuToggle className="btn btn-icon rounded-full w-12 h-12">
             <img
-              className="w-9 h-9 rounded-full border border-gray-500 object-cover"
+              className="w-12 h-12 rounded-full border border-gray-500 object-cover"
               src={toAbsoluteUrl('/media/avatars/profile.png')}
               alt="User avatar"
             />
@@ -70,4 +70,4 @@ const HeaderTopbar = () => {
   );
 };
 
-export { HeaderTopbar };
+export { HeaderTopbar };

src/pages/account/home/user-profile/AccountUserProfileContent.tsx

@@ -1,4 +1,5 @@
 import { BasicSettings, Password } from './blocks';
+import { PinCode } from './blocks/PinCode';
 import { AccountUserProfileContextProvider } from './hooks';
 
 const AccountUserProfileContent = () => {
@@ -7,6 +8,8 @@ const AccountUserProfileContent = () => {
       <AccountUserProfileContextProvider>
         <BasicSettings />
         <Password />
+        <PinCode />
+        {/* Uncomment the line below to enable the Delete Account feature */}
         {/* <DeleteAccount /> */}
       </AccountUserProfileContextProvider>
     </div>

src/pages/account/home/user-profile/blocks/PinCode.tsx

@@ -0,0 +1,200 @@
+import { useState, useContext, useEffect, useCallback, MouseEvent } from 'react';
+import { AccountUserProfileContext } from '../hooks';
+import { toast } from 'sonner';
+import { useAuthContext } from '@/auth';
+import { KeenIcon } from '@/components';
+import clsx from 'clsx';
+
+type PasswordType = 'password' | 'retype_password' | 'current_password';
+const PinCode = () => {
+  const { setPassword } = useContext(AccountUserProfileContext);
+  const { getUser } = useAuthContext();
+
+  const [newPassword, setNewPassword] = useState('');
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [messagePassword, setMessagePassword] = useState(true);
+  const [showPassword, setShowPassword] = useState({
+    current_password: false,
+    password: false,
+    retype_password: false
+  });
+
+  const [passwordErrors, setPasswordErrors] = useState<string[]>([]);
+
+  const validatePassword = (password: string) => {
+    const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password);
+    const hasCapitalLetter = /[A-Z]/.test(password);
+    const hasNumber = /[0-9]/.test(password);
+    return hasSpecialChar && hasCapitalLetter && hasNumber;
+  };
+
+  useEffect(() => {
+    const passwordsMatch = newPassword === confirmPassword;
+    const isPasswordValid = validatePassword(newPassword);
+    setMessagePassword(passwordsMatch && isPasswordValid);
+
+    const errors: string[] = [];
+    if (newPassword) {
+      if (!/[A-Z]/.test(newPassword)) {
+        errors.push('Password must contain at least one capital letter');
+      }
+      if (!/[0-9]/.test(newPassword)) {
+        errors.push('Password must contain at least one number');
+      }
+      if (!/[!@#$%^&*(),.?":{}|<>]/.test(newPassword)) {
+        errors.push('Password must contain at least one special character');
+      }
+      if (newPassword !== confirmPassword) {
+        errors.push('Passwords do not match');
+      }
+    }
+    setPasswordErrors(errors);
+  }, [newPassword, confirmPassword]);
+
+  const handleResetPassword = useCallback(async () => {
+    const user: any = await getUser();
+
+    if (!messagePassword) {
+      toast.error('Passwords do not match!');
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      await setPassword({
+        current_password: currentPassword,
+        password: newPassword,
+        retype_password: confirmPassword,
+        username: user.data.username ?? ''
+      });
+
+      setNewPassword('');
+      setConfirmPassword('');
+      setCurrentPassword('');
+    } catch (error: any) {
+      const errorMessage =
+        error?.response?.data?.message ||
+        error?.message ||
+        'An error occurred while resetting the password.';
+      toast.error(errorMessage);
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [currentPassword, newPassword, newPassword, messagePassword, getUser]);
+
+  const isButtonDisabled = isSubmitting || !newPassword || !confirmPassword || !messagePassword;
+
+  const togglePassword = useCallback((event: MouseEvent<HTMLButtonElement>, key: string) => {
+    event.preventDefault();
+    setShowPassword((prev) => ({ ...prev, [key]: !prev[key as PasswordType] }));
+  }, []);
+
+  return (
+    <div className="card pb-2.5">
+      <div className="card-header" id="password_settings">
+        <h3 className="card-title">Pin Code</h3>
+      </div>
+      <div className="card-body grid gap-5">
+        <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+          <label className="form-label max-w-56">Current Pin Code</label>
+          <div className="input">
+            <input
+              type={showPassword.current_password ? 'text' : 'password'}
+              className="form-control"
+              placeholder="Current Pin Code"
+              value={currentPassword}
+              onChange={(e) => setCurrentPassword(e.target.value)}
+              disabled={isSubmitting}
+            />
+            <button className="btn btn-icon" onClick={(e) => togglePassword(e, 'current_password')}>
+              <KeenIcon
+                icon="eye"
+                className={clsx('text-gray-500', { hidden: showPassword.current_password })}
+              />
+              <KeenIcon
+                icon="eye-slash"
+                className={clsx('text-gray-500', { hidden: !showPassword.current_password })}
+              />
+            </button>
+          </div>
+        </div>
+        <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+          <label className="form-label max-w-56">Pin Code</label>
+          <div className="input">
+            <input
+              className="form-control"
+              placeholder="New Pin Code"
+              value={newPassword}
+              onChange={(e) => setNewPassword(e.target.value)}
+              disabled={isSubmitting}
+              type={showPassword.password ? 'text' : 'password'}
+            />
+            <button className="btn btn-icon" onClick={(e) => togglePassword(e, 'password')}>
+              <KeenIcon
+                icon="eye"
+                className={clsx('text-gray-500', { hidden: showPassword.password })}
+              />
+              <KeenIcon
+                icon="eye-slash"
+                className={clsx('text-gray-500', { hidden: !showPassword.password })}
+              />
+            </button>
+          </div>
+        </div>
+        <div className="mb-2.5">
+          <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+            <label className="form-label max-w-56">Confirm New Pin Code</label>
+            <div className="input">
+              <input
+                type={showPassword.retype_password ? 'text' : 'password'}
+                className="form-control"
+                placeholder="Confirm New Pin Code"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                disabled={isSubmitting}
+              />
+              <button
+                className="btn btn-icon"
+                onClick={(e) => togglePassword(e, 'retype_password')}
+              >
+                <KeenIcon
+                  icon="eye"
+                  className={clsx('text-gray-500', { hidden: showPassword.retype_password })}
+                />
+                <KeenIcon
+                  icon="eye-slash"
+                  className={clsx('text-gray-500', { hidden: !showPassword.retype_password })}
+                />
+              </button>
+            </div>
+          </div>
+          <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+            <label className="form-label max-w-56 text-white">Confirm New Pin Code</label>
+            {passwordErrors.length > 0 && (
+              <div className="text-xs text-red-500 mt-1 ms-3">
+                {passwordErrors.map((error, index) => (
+                  <p key={index}>{error}</p>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="flex justify-end">
+          <button
+            className="btn btn-primary"
+            onClick={handleResetPassword}
+            disabled={isButtonDisabled}
+          >
+            {isSubmitting ? 'Updating...' : 'Update Pin Code'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { PinCode };

src/pages/master/walletRule/blocks/AddDialog.tsx

@@ -383,9 +383,6 @@ const AddDialog = () => {
                 </div>
 
                 <div className="flex justify-end gap-5">
-                  <Button type="button" variant="outline" onClick={resetForm}>
-                    Reset
-                  </Button>
                   <Button variant="default" type="submit" disabled={isSubmitting}>
                     {isSubmitting ? (
                       <RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />

src/pages/master/walletRule/blocks/ListToolbar.tsx

@@ -1,37 +1,149 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { Button } from '@/components/ui/button';
 import { useManageWalletRuleContext } from '../hooks/useManageWalletRuleContext';
+import { useCallApi } from '@/hooks';
+import { apiConfig } from '@/config/api.config';
+import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+
+const API_URL_WALLET = apiConfig.service_master_data;
+const API_URL_GROUP = apiConfig.service_customer;
 
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
+  const { GetData } = useCallApi();
   const { handleAddDialog } = useManageWalletRuleContext();
+  const [wallets, setWallets] = useState([]);
+  const [groups, setGroups] = useState([]);
+  const [walletFilter, setWalletFilter] = useState<string>('');
+  const [groupFilter, setGroupFilter] = useState<string>('');
+
+  const handleClearFilter = () => {
+    setWalletFilter('');
+    setGroupFilter('');
+    table.getColumn('wallet_name')?.setFilterValue(undefined);
+    table.getColumn('group_name')?.setFilterValue(undefined);
+  };
+
+  useEffect(() => {
+    const fetchWallets = async (sorting: any) => {
+      try {
+        const response = await GetData(`${API_URL_WALLET}/wallet/list`, {
+          limit: 25,
+          page: 1,
+          with_deleted: false,
+          order_field: sorting[0].id,
+          order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+        });
+        setWallets(response?.data.list.map((item: any) => ({ id: item.id, name: item.name })));
+      } catch (error) {
+        toast.error('Failed to get Wallets');
+      }
+    };
+
+    const fetchGroups = async (sorting: any) => {
+      try {
+        const response = await GetData(`${API_URL_GROUP}/groups/list`, {
+          limit: 25,
+          page: 1,
+          with_deleted: false,
+          order_field: sorting[0].id,
+          order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+        });
+        setGroups(response?.data.list.map((item: any) => ({ id: item.id, name: item.name })));
+      } catch (error) {
+        toast.error('Failed to get Groups');
+      }
+    };
+
+    fetchWallets([{ id: 'wallets.name', desc: false }]);
+    fetchGroups([{ id: 'name', desc: false }]);
+  }, []);
+
+  useEffect(() => {
+    const filters: Record<string, any> = {};
+
+    if (walletFilter) {
+      filters['id_wallet'] = walletFilter;
+    }
+
+    if (groupFilter) {
+      filters['id_group'] = groupFilter;
+    }
+
+    table.setColumnFilters([
+      {
+        id: 'custom',
+        value: JSON.stringify(filters)
+      }
+    ]);
+  }, [walletFilter, groupFilter]);
+
+  // console.log(wallets);
 
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
       <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
         <div className="flex justify-between w-full items-center">
-          <div className="flex w-[50%] gap-3 items-center">
+          {/* Left Side: Filters */}
-            {/* <label className="input input-sm w-1/3">
+          <div className="flex w-[60%] gap-3 items-end">
-              <KeenIcon icon="magnifier" />
+            {/* Wallet Filter */}
-              <input
+            <div className="flex flex-col w-1/3">
-                type="text"
+              <label htmlFor="wallet-filter" className="text-sm font-medium text-gray-700 mb-2">
-                placeholder="Search Wallet Rule"
+                Filter by Wallet
-                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
+              </label>
-                onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
+              <Select value={walletFilter} onValueChange={(value) => setWalletFilter(value)}>
-              />
+                <SelectTrigger className="input input-sm h-[31px]">
-            </label> */}
+                  <SelectValue placeholder="Select Wallet" />
-            {/* <DefaultTooltip title={'Filter'} placement={'top'}>
+                </SelectTrigger>
-              <Button
+                <SelectContent>
-                variant="outline"
+                  {wallets.map((wallet: any) => (
-                className="h-7.5 disabled:bg-gray-400"
+                    <SelectItem key={wallet.id} value={wallet.id.toString()}>
-                // disabled={isLoading}
+                      {wallet.name}
-                // onClick={handleFilterData}
+                    </SelectItem>
-              >
+                  ))}
-                {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />}
+                </SelectContent>
-                <KeenIcon icon="filter" />
+              </Select>
-              </Button>
+            </div>
-            </DefaultTooltip> */}
+
+            {/* Group Filter */}
+            <div className="flex flex-col w-1/3">
+              <label htmlFor="group-filter" className="text-sm font-medium text-gray-700 mb-2 ">
+                Filter by Group
+              </label>
+              <Select value={groupFilter} onValueChange={(value) => setGroupFilter(value)}>
+                <SelectTrigger className="input input-sm h-[31px]">
+                  <SelectValue placeholder="Select Group" />
+                </SelectTrigger>
+                <SelectContent>
+                  {groups.map((group: any) => (
+                    <SelectItem key={group.id} value={group.id.toString()}>
+                      {group.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Reset Filter Button */}
+            <div className="flex flex-col">
+              <label className="text-sm font-medium text-transparent mb-1">Reset</label>
+              <DefaultTooltip title="Reset Filter" placement="top">
+                <Button variant="outline" className="h-[31px] w-full" onClick={handleClearFilter}>
+                  <KeenIcon icon="arrow-circle-left" />
+                </Button>
+              </DefaultTooltip>
+            </div>
           </div>
+
+          {/* Right Side: Action Buttons */}
           <div className="flex gap-3 items-center">
             <Button
               variant="outline"
@@ -40,7 +152,7 @@ const ListToolbar = () => {
             >
               Add Data
             </Button>
-            <DefaultTooltip title={'Refresh'} placement={'top'}>
+            <DefaultTooltip title="Refresh" placement="top">
               <Button variant="outline" className="h-7.5" onClick={() => reload()}>
                 <KeenIcon icon="arrows-circle" />
               </Button>

src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx

@@ -205,14 +205,22 @@ const ManageWalletRuleContextProvider = ({ children }: { children: React.ReactNo
   const getWalletRuleLists = async (page: number, limit: number, sorting: any, filter: any) => {
     try {
       sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
-      filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
+
+      let filterObject = {};
+
+      if (filter.length > 0 && filter[0].value) {
+        const parsedFilter = JSON.parse(filter[0].value);
+
+        filterObject = { ...parsedFilter };
+      }
+
       const response = await GetData(`${API_URL_WALLET}/dashboard/wallet_rule`, {
         limit,
         page: page + 1,
         with_deleted: false,
         order_field: sorting[0].id,
         order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
-        filter: JSON.stringify(filter)
+        filter: JSON.stringify(filterObject)
       });
       // console.log(response?.data);
       setWalletRules(response?.data.list);