update manage reward

src/pages/master/currency/blocks/EditDialog.tsx

@@ -97,9 +97,9 @@ const EditDialog = () => {
       setFormField((prev) => ({
         ...prev,
         status: response.data.status,
-        code:response.data.code,
+        code: response.data.code,
-        name:response.data.name,
+        name: response.data.name,
-        prefix:response.data.prefix,
+        prefix: response.data.prefix
       }));
     }
     // console.log('form fieldd Transaction Type: ', formField);

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

@@ -15,7 +15,7 @@ const ListToolbar = () => {
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search Conversion"
+                placeholder="Search Currency"
                 value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
                 onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
               />

src/pages/master/products/hooks/ManageProductsContext.tsx

@@ -80,6 +80,9 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
         enableHiding: false,
         meta: {
           headerClassName: 'w-[250px]'
+        },
+        filterFn: (row, id, value) => {
+          return row.original.products_name.toLowerCase().includes(value.toLowerCase());
         }
       },
       {

src/pages/master/reward/Reward.tsx

@@ -0,0 +1,37 @@
+import AddDialog from './blocks/AddDialog';
+import EditDialog from './blocks/EditDialog';
+import DeleteDialog from './blocks/DeleteDialog';
+import { ManageRewardContextProvider } from './hooks/ManageRewardContext';
+import { Container, DataGridInner } from '@/components';
+import { Breadcrumbs, Link } from '@mui/material';
+
+const RewardMaster = () => {
+  return (
+    <ManageRewardContextProvider>
+      <Container>
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Reward</h1>
+        <Breadcrumbs sx={{ mb: 2 }}>
+          <Link underline="none" color="inherit" href="/">
+            <span className="text-sm hover:underline">Dashboard</span>
+          </Link>
+
+          <Link underline="none" color="inherit">
+            <span className="text-sm">Master Data</span>
+          </Link>
+
+          <Link underline="none" color="inherit">
+            <span className="text-sm">Manage Reward</span>
+          </Link>
+        </Breadcrumbs>
+        <div className="grid gap-5 lg:gap-7.5">
+          <DataGridInner />
+        </div>
+        <AddDialog />
+        <EditDialog />
+        <DeleteDialog />
+      </Container>
+    </ManageRewardContextProvider>
+  );
+};
+
+export default RewardMaster;

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

@@ -0,0 +1,216 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
+import { Alert, KeenIcon, useDataGrid } from '@/components';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { apiConfig } from '@/config/api.config';
+import { toast } from 'sonner';
+import { getAuth } from '@/auth';
+import { useCallApi } from '@/hooks';
+import { useManageRewardContext } from '../hooks/useManageRewardContext';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+
+const API_URL = apiConfig.service_master_data;
+
+const AddDialog = () => {
+  const parentRef = useRef<any | null>(null);
+  const { showAddDialog, handleAddDialog } = useManageRewardContext();
+  const { reload } = useDataGrid();
+  const { PostData } = useCallApi();
+  const parsedUser = getAuth()?.user;
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
+
+  const initialState = {
+    name: '',
+    type: '',
+    amount: 0,
+    status: '',
+    created_by: '',
+    created_at: ''
+  };
+
+  const [formField, setFormField] = useState(initialState);
+  const created_time = new Date();
+  const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
+
+  const resetForm = () => {
+    setFormField(initialState);
+    setAlert({ show: false, message: '' });
+  };
+
+  const doCreateReward = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      console.log('Data yang akan dikirim:', formField);
+      const response = await PostData(`${API_URL}/reward/create`, formField);
+
+      if (response?.status) {
+        handleAddDialog(false);
+        resetForm();
+        reload();
+        toast.success('Reward Create successfully!');
+      } else {
+        toast.error('Failed to create reward.');
+        setAlert({ show: true, message: 'Failed to create reward. Please try again.' });
+      }
+    },
+    [formField]
+  );
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (
+      formField.name.trim() === '' ||
+      formField.type.trim() === '' ||
+      formField.amount === 0 ||
+      formField.status.trim() === ''
+    ) {
+      setAlert({ show: true, message: 'Please fill name field.' });
+      return;
+    }
+
+    doCreateReward(e);
+    // console.log(formField);
+    setAlert({ show: false, message: '' });
+  };
+
+  const handleReset = () => {
+    resetForm();
+    setAlert({ show: false, message: '' });
+  };
+
+  useEffect(() => {
+    if (showAddDialog) {
+      setFormField({
+        ...formField,
+        created_by: parsedUser?.username,
+        created_at: formattedTime
+      });
+    }
+  }, [formattedTime]);
+
+  useEffect(() => {
+    if (showAddDialog === false) {
+      resetForm();
+    }
+  }, [showAddDialog]);
+
+  return (
+    <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
+      <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
+        <DialogHeader>
+          <DialogTitle>Reward - Create</DialogTitle>
+          <DialogDescription></DialogDescription>
+        </DialogHeader>
+        <DialogBody ref={parentRef}>
+          <div className="flex flex-col">
+            {alert.show && <Alert variant="danger">{alert.message}</Alert>}
+            <form onSubmit={handleSubmit}>
+              <div className="card-body grid gap-5">
+                <div className="grid grid-cols-8 gap-2 w-full items-center">
+                  <label className="form-label flex items-center gap-1 col-span-2">
+                    Name<span className="text-red-500">*</span>
+                  </label>
+
+                  <Input
+                    className="input col-span-6"
+                    type="text"
+                    autoComplete="off"
+                    value={formField.name}
+                    onChange={({ target }) =>
+                      setFormField((prev) => ({ ...prev, name: target.value }))
+                    }
+                  />
+                </div>
+                <div className="grid grid-cols-8 gap-2 w-full items-center">
+                  <label className="form-label flex items-center gap-1 col-span-2">
+                    Type<span className="text-red-500">*</span>
+                  </label>
+
+                  <Input
+                    className="input col-span-6"
+                    type="text"
+                    autoComplete="off"
+                    value={formField.type}
+                    onChange={({ target }) =>
+                      setFormField((prev) => ({ ...prev, type: target.value }))
+                    }
+                  />
+                </div>
+                <div className="grid grid-cols-8 gap-2 w-full items-center">
+                  <label className="form-label flex items-center gap-1 col-span-2">
+                    Amount<span className="text-red-500">*</span>
+                  </label>
+
+                  <Input
+                    className="input col-span-6"
+                    type="number"
+                    min={0}
+                    step={0.01}
+                    value={formField.amount}
+                    onChange={(e) => {
+                      const value = parseFloat(e.target.value);
+                      setFormField({
+                        ...formField,
+                        amount: isNaN(value) ? 0 : value
+                      });
+                    }}
+                  />
+                </div>
+                <div className="grid grid-cols-8 gap-2 w-full items-center">
+                  <label className="form-label flex items-center gap-1 col-span-2">
+                    Status<span className="text-red-500">*</span>
+                  </label>
+
+                  <div className="col-span-6">
+                    <Select
+                      value={formField.status}
+                      onValueChange={(value) =>
+                        setFormField((prev) => ({ ...prev, status: value }))
+                      }
+                    >
+                      <SelectTrigger className="w-full">
+                        <SelectValue placeholder="Select" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="Y">Active</SelectItem>
+                        <SelectItem value="N">InActive</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+                <div className="flex justify-end gap-5">
+                  <Button type="button" variant="outline" onClick={resetForm}>
+                    Reset
+                  </Button>
+                  <Button variant="default" type="submit">
+                    Save Change
+                  </Button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default AddDialog;

src/pages/master/reward/blocks/DeleteDialog.tsx

@@ -0,0 +1,77 @@
+import { Alert, useDataGrid } from '@/components';
+import { useCallback, useState } from 'react';
+import { apiConfig } from '@/config/api.config';
+import { useCallApi } from '@/hooks';
+import { toast } from 'sonner';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { DialogDescription } from '@radix-ui/react-dialog';
+import { useManageRewardContext } from '../hooks/useManageRewardContext';
+
+const API_URL = apiConfig.service_master_data;
+
+const DeleteDialog = () => {
+  const { showDeleteDialog, handleDeleteDialog, selectedReward } = useManageRewardContext();
+  const { reload } = useDataGrid();
+  const { DeleteData } = useCallApi();
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
+
+  const doDeleteReward = useCallback(async () => {
+    if (!selectedReward) {
+      toast.error('No Reward selected');
+      return;
+    }
+    const response = await DeleteData(`${API_URL}/reward/delete/${selectedReward}`, {
+      id: selectedReward
+    });
+
+    if (response?.status) {
+      setAlert({ show: false, message: '' });
+      handleDeleteDialog(false, null);
+      toast.success('Success Delete Reward');
+      reload();
+    } else {
+      setAlert({ show: true, message: response?.message });
+      toast.error('Failed Delete Reward');
+    }
+  }, [selectedReward, DeleteData, handleDeleteDialog, reload]);
+
+  return (
+    <Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}>
+      <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
+        <DialogHeader className="p-0 border-0 block">
+          <DialogTitle></DialogTitle>
+          <DialogDescription></DialogDescription>
+          <Alert variant="warning">
+            <h3 className="text-lg">Are you sure?</h3>
+            <span className="text-sm">You will delete this data!</span>
+          </Alert>
+          {alert.show && (
+            <Alert variant="danger">
+              <h3>{alert.message}</h3>
+            </Alert>
+          )}
+        </DialogHeader>
+        <DialogFooter className="flex justify-end items-center gap-4 mt-3">
+          <Button variant="outline" onClick={() => handleDeleteDialog(false, null)}>
+            Cancel
+          </Button>
+          <Button variant="destructive" onClick={doDeleteReward}>
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default DeleteDialog;

src/pages/master/reward/blocks/EditDialog.tsx

@@ -0,0 +1,222 @@
+import { apiConfig } from '@/config/api.config';
+import { Alert, useDataGrid } from '@/components';
+import { useCallApi } from '@/hooks';
+import { getAuth } from '@/auth';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { toast } from 'sonner';
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+import { useManageRewardContext } from '../hooks/useManageRewardContext';
+
+const API_URL = apiConfig.service_master_data;
+
+const EditDialog = () => {
+  const parentRef = useRef<any | null>(null);
+  const { showEditDialog, handleEditDialog, selectedReward } = useManageRewardContext();
+  const { reload } = useDataGrid();
+  const { PutData, GetData } = useCallApi();
+  const parsedUser = getAuth()?.user;
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
+
+  const initialState = {
+    name: '',
+    type: '',
+    amount: 0,
+    status: '',
+    updated_by: '',
+    updated_at: ''
+  };
+
+  const [formField, setFormField] = useState(initialState);
+  const updated_time = new Date();
+  const formattedTime = updated_time.toISOString().slice(0, 19).replace('T', ' ');
+
+  const resetForm = () => {
+    setFormField(initialState);
+    setAlert({ show: false, message: '' });
+  };
+
+  const doUpdateReward = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+
+      const response = await PutData(`${API_URL}/reward/update/${selectedReward}`, formField);
+
+      if (response?.status) {
+        resetForm();
+        handleEditDialog(false, null);
+        toast.success('Success Update Reward');
+        reload();
+      } else {
+        toast.error('Error Update Reward');
+        setAlert({ show: true, message: 'Failed to Update Reward. Please try again.' });
+      }
+    },
+    [selectedReward, formField]
+  );
+
+  const doFetchData = useCallback(async (id: string) => {
+    const response = await GetData(`${API_URL}/reward/getdata/${id}`, { id });
+    console.log('API Response:', response);
+
+    if (response?.status) {
+      setFormField((prev) => ({
+        ...prev,
+        name: response?.data.name,
+        type: response?.data.type,
+        amount: response?.data.amount,
+        status: response?.data.status
+      }));
+    }
+  }, []);
+
+  // const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
+  //   e.preventDefault();
+
+  //   if (
+  //     formField.name === '' ||
+  //     formField.type === '' ||
+  //     formField.amount === 0 ||
+  //     formField.status === ''
+  //   ) {
+  //     setAlert({ show: true, message: 'Please fill in all required fields.' });
+  //     return;
+  //   }
+
+  //   doUpdateReward(e);
+  //   // console.log(formField);
+  //   setAlert({ show: false, message: '' });
+  // };
+
+  useEffect(() => {
+    // console.log('Selected Reward:', selectedReward);
+    if (selectedReward) {
+      doFetchData(selectedReward);
+    }
+  }, [selectedReward]);
+
+  useEffect(() => {
+    if (showEditDialog) {
+      setFormField({
+        ...formField,
+        updated_by: parsedUser.username,
+        updated_at: formattedTime
+      });
+    }
+  }, [formattedTime]);
+
+  useEffect(() => {
+    if (showEditDialog === false) {
+      resetForm();
+    }
+  }, [showEditDialog]);
+
+  return (
+    <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
+      <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
+        <DialogHeader>
+          <DialogTitle>Reward - Update</DialogTitle>
+          <DialogDescription></DialogDescription>
+        </DialogHeader>
+        <DialogBody ref={parentRef}>
+          <div className="flex flex-col">
+            {alert.show && <Alert variant="danger">{alert.message}</Alert>}
+
+            <form onSubmit={doUpdateReward}>
+              <div className="card-body grid gap-5">
+                <div className="w-full">
+                  <label className="form-label">
+                    Name<span className="text-red-500">*</span>
+                  </label>
+
+                  <Input
+                    className="input"
+                    type="text"
+                    value={formField.name}
+                    onChange={(e) => setFormField((prev) => ({ ...prev, name: e.target.value }))}
+                  />
+                </div>
+                <div className="w-full">
+                  <label className="form-label">
+                    Type<span className="text-red-500">*</span>
+                  </label>
+
+                  <Input
+                    className="input"
+                    type="text"
+                    value={formField.type}
+                    onChange={(e) => setFormField({ ...formField, type: e.target.value })}
+                  />
+                </div>
+                <div className="w-full">
+                  <label className="form-label">
+                    Amount<span className="text-red-500">*</span>
+                  </label>
+
+                  <Input
+                    className="input"
+                    type="number"
+                    min={0}
+                    step={0.01}
+                    value={formField.amount}
+                    onChange={(e) => {
+                      const value = parseFloat(e.target.value);
+                      setFormField({
+                        ...formField,
+                        amount: isNaN(value) ? 0 : value
+                      });
+                    }}
+                  />
+                </div>
+                <div className="w-full">
+                  <label className="form-label">
+                    Status<span className="text-red-500">*</span>
+                  </label>
+
+                  <Select
+                    value={formField.status}
+                    onValueChange={(value) => setFormField((prev) => ({ ...prev, status: value }))}
+                  >
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder="Select" defaultValue={formField.status} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="Y">Active</SelectItem>
+                      <SelectItem value="N">InActive</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="flex justify-end gap-5">
+                  <Button type="button" variant="outline" onClick={resetForm}>
+                    Reset
+                  </Button>
+                  <Button variant="default">Save Changes</Button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default EditDialog;

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

@@ -0,0 +1,44 @@
+import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
+import { Button } from '@/components/ui/button';
+import { useManageRewardContext } from '../hooks/useManageRewardContext';
+
+const ListToolbar = () => {
+  const { table, reload } = useDataGrid();
+  const { handleAddDialog } = useManageRewardContext();
+
+  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">
+            <label className="input input-sm w-1/3">
+              <KeenIcon icon="magnifier" />
+              <input
+                type="text"
+                placeholder="Search Reward"
+                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
+                onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
+              />
+            </label>
+          </div>
+          <div className="flex gap-3 items-center">
+            <Button
+              variant="outline"
+              className="h-7.5 text-[0.8rem]"
+              onClick={() => handleAddDialog(true)}
+            >
+              Add Data
+            </Button>
+            <DefaultTooltip title={'Refresh'} placement={'top'}>
+              <Button variant="outline" className="h-7.5" onClick={() => reload()}>
+                <KeenIcon icon="arrows-circle" />
+              </Button>
+            </DefaultTooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ListToolbar;

src/pages/master/reward/hooks/ManageRewardContext.tsx

@@ -0,0 +1,213 @@
+import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
+import { apiConfig } from '@/config/api.config';
+import { useCallApi } from '@/hooks';
+import { ColumnDef } from '@tanstack/react-table';
+import React, { createContext, useCallback, useMemo, useState } from 'react';
+import { Toaster } from 'sonner';
+import ListToolbar from '../blocks/ListToolbar';
+
+interface Reward {
+  id: number;
+  name: string;
+  type: string;
+  amount: number;
+  status: string;
+}
+
+const initialState = {
+  id: '',
+  name: '',
+  type: '',
+  amount: '',
+  status: ''
+};
+
+interface ContextProps {
+  showAddDialog: boolean;
+  handleAddDialog: (show: boolean) => void;
+  showEditDialog: boolean;
+  handleEditDialog: (show: boolean, selected_reward: string | null) => void;
+  showDeleteDialog: boolean;
+  handleDeleteDialog: (show: boolean, selected_rewad: string | null) => void;
+  selectedReward: string | null;
+  reward: string | null;
+}
+
+const initialProps: ContextProps = {
+  showAddDialog: false,
+  handleAddDialog: (show: boolean) => {},
+  showEditDialog: false,
+  handleEditDialog: () => {},
+  showDeleteDialog: false,
+  handleDeleteDialog: () => {},
+  selectedReward: null,
+  reward: null
+};
+
+const ManageRewardContext = createContext<ContextProps>(initialProps);
+const API_URL_MASTER_DATA = apiConfig.service_master_data;
+
+const ManageRewardContextProvider = ({ children }: { children: React.ReactNode }) => {
+  const [reward, setRewards] = useState<string | null>(null);
+  const [showAddDialog, setShowAddDialog] = useState(false);
+  const [showEditDialog, setShowEditDialog] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [selectedReward, setSelectedReward] = useState<string | null>(null);
+  const { GetData } = useCallApi();
+
+  const handleAddDialog = useCallback((show: boolean) => {
+    setShowAddDialog(show);
+  }, []);
+
+  const handleEditDialog = useCallback((show: boolean, selected_reward: string | null) => {
+    setShowEditDialog(show);
+    setSelectedReward(show ? selected_reward : null);
+  }, []);
+
+  const handleDeleteDialog = useCallback((show: boolean, selected_reward: string | null) => {
+    setShowDeleteDialog(show);
+    setSelectedReward(show ? selected_reward : null);
+  }, []);
+
+  const columns = useMemo<ColumnDef<any>[]>(
+    () => [
+      {
+        accessorKey: 'name',
+        id: 'name',
+        header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
+      {
+        accessorKey: 'type',
+        id: 'type',
+        header: ({ column }) => <DataGridColumnHeader title="Type" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
+      {
+        accessorKey: 'amount',
+        id: 'amount',
+        header: ({ column }) => <DataGridColumnHeader title="Amount" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
+      {
+        accessorKey: 'status',
+        id: 'status',
+        header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        cell: ({ row }) => {
+          const isActive = row.original.status === 'Y';
+
+          return (
+            <span
+              className={`px-2 py-1 text-xs font-semibold rounded-full ${
+                isActive ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'
+              }`}
+            >
+              {isActive ? 'Active' : 'Inactive'}
+            </span>
+          );
+        },
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
+      {
+        id: 'actions',
+        header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        cell: (data) => {
+          const row = data.row.original;
+          return (
+            <>
+              <button
+                className="btn btn-sm btn-icon btn-clear btn-light"
+                onClick={() => handleEditDialog(true, row)}
+              >
+                <KeenIcon icon="notepad-edit" />
+              </button>
+              <button
+                className="btn btn-sm btn-icon btn-clear btn-light"
+                onClick={() => handleDeleteDialog(true, row)}
+              >
+                <KeenIcon icon="trash" />
+              </button>
+            </>
+          );
+        },
+        meta: {
+          heaaderClassName: 'w-[100px]',
+          cellClassName: 'text-center'
+        }
+      }
+    ],
+    []
+  );
+
+  const getRewardList = 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() };
+      const response = await GetData(`${API_URL_MASTER_DATA}/reward/list`, {
+        limit,
+        page: page + 1,
+        with_deleted: false,
+        order_field: sorting[0].id,
+        order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
+        filter: JSON.stringify(filter)
+      });
+      // console.log('API Response:', response?.data.list); // Cek data dari API
+      // console.log('reward list :', response);
+      setRewards(response?.data.list);
+      return { data: response?.data.list, totalCount: response?.data.total_count };
+    } catch (error) {
+      console.error('Error fethcing reward', error);
+    }
+  };
+
+  return (
+    <ManageRewardContext.Provider
+      value={{
+        reward,
+        showAddDialog,
+        handleAddDialog,
+        showEditDialog,
+        handleEditDialog,
+        showDeleteDialog,
+        handleDeleteDialog,
+        selectedReward
+      }}
+    >
+      <Toaster expand visibleToasts={9} duration={3000} />
+      <DataGridProvider
+        columns={columns}
+        pagination={{ size: 5 }}
+        toolbar={<ListToolbar />}
+        layout={{ card: true }}
+        sorting={[{ id: 'id', desc: false }]}
+        serverSide={true}
+        onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
+          getRewardList(pageIndex, pageSize, sorting, columnFilters)
+        }
+      >
+        {children}
+      </DataGridProvider>
+    </ManageRewardContext.Provider>
+  );
+};
+
+export { ManageRewardContext, ManageRewardContextProvider };
+export type { Reward };

src/pages/master/reward/hooks/useManageRewardContext.tsx

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { ManageRewardContext } from './ManageRewardContext';
+
+const useManageRewardContext = () => {
+  const context = useContext(ManageRewardContext);
+
+  if (!context) throw new Error('useManageRewardContext must be used within AuthProvider');
+
+  return context;
+};
+
+export { useManageRewardContext };

src/pages/master/sucos/blocks/EditDialog.tsx

@@ -118,6 +118,8 @@ const EditDialog = () => {
         name: ''
       }));
     }
+    console.log('Responnya nih:', response);
+    console.log('Data Posto nya nih:', response?.data?.posto);
   }, []);
 
   const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {

src/pages/settings/user/manage-user/blocks/DeleteDialog.tsx

@@ -51,7 +51,7 @@ const DeleteDialog = () => {
           <Alert variant="warning">
             <h3 className="text-lg">Are you sure?</h3>
             <span className="text-sm">you will delete this data!</span>
-            <div className="mt-2 flex items-center gap-x-2">
+            {/* <div className="mt-2 flex items-center gap-x-2">
               <label className="form-label max-w-56">Hard Delete</label>
               <EnforceSwitch
                 enforce={enforce}
@@ -59,7 +59,7 @@ const DeleteDialog = () => {
                   setEnforce(e.target.checked);
                 }}
               />
-            </div>
+            </div> */}
           </Alert>
           {alert.show && (
             <Alert variant="danger">

src/pages/settings/user/manage-user/hooks/ManageUserContext.tsx

@@ -120,7 +120,7 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
         enableHiding: false,
         cell: (data: any) => {
           const { role } = data.row.original;
-          console.log('role :', role);
+          // console.log('role :', role);
           let html = <p className="text-danger italic">Unassigned</p>;
           if (role && role.name) html = role.name;
           return html;
@@ -198,6 +198,7 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
       order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
       filter: JSON.stringify(filter)
     });
+    console.log('response api:', response);
 
     return { data: response?.data.list, totalCount: response?.data.total_count };
   };

src/routing/AppRoutingSetup.tsx

@@ -33,6 +33,7 @@ import ProfessionMaster from '@/pages/master/profession/ProfessionMaster';
 import ProductsMaster from '@/pages/master/products/ProductsMaster';
 import ProviderMaster from '@/pages/master/provider/ProviderMaster';
 import ConversionMaster from '@/pages/master/conversion/ConversionMaster';
+import RewardMaster from '@/pages/master/reward/Reward';
 import WalletRuleMaster from '@/pages/master/walletRule/WalletRuleMaster';
 import WalletHistory from '@/pages/wallet/wallet-history/WalletHistory';
 import WalletMaster from '@/pages/master/wallet/WalletMaster';
@@ -61,6 +62,8 @@ const AppRoutingSetup = (): ReactElement => {
 
           <Route path="/master-data/currency/" element={<CurrencyMaster />} />
 
+          <Route path="/master-data/reward/" element={<RewardMaster />} />
+
           <Route path="/master-data/wallet" element={<WalletMaster />} />
 
           <Route path="/master-data/wallet-rule" element={<WalletRuleMaster />} />