status kind filter on transfer type

src/pages/transfer/transfertype/blocks/ListToolBar.tsx

@@ -52,7 +52,7 @@ const ListToolbar = () => {
   const { handleAddDialog } = useManageTransferTypeContext();
   const [transferTypes, setTransferTypes] = useState<TransferType[]>([]);
   const { GetData } = useCallApi();
-
+  const [statusKind, setStatusKind] = useState('');
   const [searchValue, setSearchValue] = useState('');
   const [statusTypes, setStatusTypes] = useState('');
   const [approval, setApproval] = useState('');
@@ -83,6 +83,10 @@ const ListToolbar = () => {
     table.getColumn('status_approval')?.setFilterValue(approval);
   }, [approval, table]);
 
+  useEffect(() => {
+    table.getColumn('status_kind')?.setFilterValue(statusKind);
+  }, [statusKind, table]);
+
   const fetchTransferTypes = async () => {
     try {
       const response = await GetData(`${API_URL}/transactiontype/list`, {
@@ -106,7 +110,9 @@ const ListToolbar = () => {
     setSearchValue('');
     setStatusTypes('');
     setApproval('');
+    setStatusKind('');
 
+    table.getColumn('status_kind')?.setFilterValue('');
     table.getColumn('name')?.setFilterValue('');
     table.getColumn('type')?.setFilterValue('');
     table.getColumn('status_approval')?.setFilterValue('');
@@ -122,7 +128,6 @@ const ListToolbar = () => {
       <div className="flex flex-wrap gap-1 w-full">
         <div className="flex justify-between w-full items-center mb-3">
           <div className="flex flex-nowrap items-end gap-3 w-full overflow-x-auto">
-            {/* Fixed Search Input dengan icon yang selalu terlihat */}
             <div className="relative w-48 shrink-0">
               <div className="absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none ">
                 <KeenIcon icon="magnifier" />
@@ -144,7 +149,10 @@ const ListToolbar = () => {
                 onValueChange={setStatusTypes}
               >
                 <SelectTrigger className="h-8">
-                  <SelectValue placeholder="Select Status Transaction Type" className="text-ellipsis overflow-hidden" />
+                  <SelectValue
+                    placeholder="Select Status Transaction Type"
+                    className="text-ellipsis overflow-hidden"
+                  />
                 </SelectTrigger>
                 <SelectContent className="max-h-64 overflow-y-auto">
                   {types.map((opt) => (
@@ -163,7 +171,10 @@ const ListToolbar = () => {
                 onValueChange={setApproval}
               >
                 <SelectTrigger className="h-8">
-                  <SelectValue placeholder="Select Status Approval" className="text-ellipsis overflow-hidden" />
+                  <SelectValue
+                    placeholder="Select Status Approval"
+                    className="text-ellipsis overflow-hidden"
+                  />
                 </SelectTrigger>
                 <SelectContent className="max-h-64 overflow-y-auto">
                   <SelectItem value="Y" className="truncate">
@@ -175,6 +186,31 @@ const ListToolbar = () => {
                 </SelectContent>
               </Select>
             </div>
+            <div className="min-w-[220px] shrink-0">
+              <Select
+                key={`status-kind-filter-${statusKind}`}
+                value={statusKind}
+                onValueChange={setStatusKind}
+              >
+                <SelectTrigger className="h-8">
+                  <SelectValue
+                    placeholder="Select Status Kind"
+                    className="text-ellipsis overflow-hidden"
+                  />
+                </SelectTrigger>
+                <SelectContent className="max-h-64 overflow-y-auto">
+                  <SelectItem value="R">Return</SelectItem>
+                  <SelectItem value="T">Transfer</SelectItem>
+                  <SelectItem value="P">Purchase</SelectItem>
+                  <SelectItem value="W">Withdraw</SelectItem>
+                  <SelectItem value="U">Top Up</SelectItem>
+                  <SelectItem value="N">Top Up Patner</SelectItem>
+                  <SelectItem value="E">Reward</SelectItem>
+                  <SelectItem value="L">Purchase Loja</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
             <DefaultTooltip title={'Reset Filter'} placement={'top'}>
               <Button
                 variant="outline"
@@ -201,7 +237,6 @@ const ListToolbar = () => {
             </DefaultTooltip>
           </div>
         </div>
-
       </div>
     </div>
   );

src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx

@@ -277,8 +277,8 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
             W: { label: 'Withdraw', className: 'bg-fuchsia-100 text-fuchsia-600' },
             U: { label: 'Top Up', className: 'bg-yellow-100 text-yellow-600' },
             N: { label: 'Top Up Patner', className: 'bg-purple-100 text-purple-600' },
-            E: {label: 'Reward', className: 'bg-rose-100 text-rose-600'},
+            E: { label: 'Reward', className: 'bg-rose-100 text-rose-600' },
-            L: {label: 'Purchase Loja', className: 'bg-rose-100 text-rose-600'},
+            L: { label: 'Purchase Loja', className: 'bg-rose-100 text-rose-600' }
           };
 
           const kindInfo = mapping[kind] || {
@@ -369,6 +369,8 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
             filterObject['wallet_origin.name'] = filter.value.toLowerCase();
           } else if (filter.id === 'wallet_destination') {
             filterObject['wallet_destination.name'] = filter.value.toLowerCase();
+          } else if (filter.id === 'status_kind') {
+            filterObject[filter.id] = filter.value;
           } else {
             filterObject[filter.id] = filter.value.toLowerCase();
           }