diff --git a/src/pages/master/pointiers/PointiersMaster.tsx b/src/pages/master/pointiers/PointiersMaster.tsx
new file mode 100644
index 0000000..152c908
--- /dev/null
+++ b/src/pages/master/pointiers/PointiersMaster.tsx
@@ -0,0 +1,43 @@
+import AddDialog from './blocks/AddDialog';
+import EditDialog from './blocks/EditDialog';
+import DeleteDialog from './blocks/DeleteDialog';
+import { ManagePointiersContextProvider } from './hooks/ManagePointiersContext';
+import { Container, DataGridInner } from '@/components';
+import { Breadcrumbs, Link } from '@mui/material';
+import { Helmet } from 'react-helmet';
+
+const PointiersMaster = () => {
+  return (
+    <>
+      <Helmet>
+        <title>TPAY | Manage Pointiers</title>
+      </Helmet>
+      <ManagePointiersContextProvider>
+        <Container>
+          <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Pointiers</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 Pointiers</span>
+            </Link>
+          </Breadcrumbs>
+          <div className="grid gap-5 lg:gap-7.5">
+            <DataGridInner />
+          </div>
+          <AddDialog />
+          <EditDialog />
+          <DeleteDialog />
+        </Container>
+      </ManagePointiersContextProvider>
+    </>
+  );
+};
+
+export default PointiersMaster;
diff --git a/src/pages/master/pointiers/blocks/AddDialog.tsx b/src/pages/master/pointiers/blocks/AddDialog.tsx
new file mode 100644
index 0000000..5689a8d
--- /dev/null
+++ b/src/pages/master/pointiers/blocks/AddDialog.tsx
@@ -0,0 +1,243 @@
+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 { NumericFormat } from 'react-number-format';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { RefreshCw } from 'lucide-react';
+import { initialStatePointiers, validateFormPointiers } from '../../pointiers/blocks/Types';
+import { Textarea } from '@/components/ui/textarea';
+import { useManagePointiersContext } from '../hooks/useManagePointiersContext';
+
+const API_URL = apiConfig.service_master_data;
+
+const AddDialog = () => {
+  const parentRef = useRef<any | null>(null);
+  const { showAddDialog, handleAddDialog } = useManagePointiersContext();
+  const { reload } = useDataGrid();
+  const { PostData } = useCallApi();
+  const parsedUser = getAuth()?.user;
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  const [formField, setFormField] = useState(initialStatePointiers);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const created_time = new Date();
+  const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
+
+  const resetForm = () => {
+    setFormField(initialStatePointiers);
+    setErrors({});
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setFormField({ ...formField, [e.target.name]: e.target.value });
+  };
+
+  const doCreatePointiers = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      setIsSubmitting(true);
+
+      try {
+        const response = await PostData(`${API_URL}/pointiers/create`, formField);
+
+        if (response?.status) {
+          handleAddDialog(false);
+          resetForm();
+          reload();
+          toast.success('Pointiers Create successfully!');
+          const createActivity = {
+            module: 'Manage Pointiers',
+            description: `Create New Pointiers => ${formField.name}`,
+            action: 'C'
+          };
+
+          doSaveLogActivity(createActivity);
+        } else {
+          toast.error(response?.message);
+        }
+      } catch (error) {
+        toast.error('Something went wrong, please try again.');
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [formField]
+  );
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (!validateFormPointiers(formField, setErrors)) {
+      return;
+    }
+
+    doCreatePointiers(e);
+  };
+
+  useEffect(() => {
+    if (showAddDialog) {
+      setFormField((prev) => ({
+        ...prev,
+        created_by: parsedUser?.username,
+        created_at: formattedTime
+      }));
+    }
+  }, [showAddDialog, parsedUser?.username, formattedTime]);
+
+  useEffect(() => {
+    if (showAddDialog === false) {
+      resetForm();
+    }
+  }, [showAddDialog]);
+
+  return (
+    <Dialog open={showAddDialog} onOpenChange={handleAddDialog}>
+      <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
+        <DialogHeader>
+          <DialogTitle>Pointiers - Create</DialogTitle>
+          <DialogDescription />
+        </DialogHeader>
+        <DialogBody ref={parentRef}>
+          <div className="flex flex-col">
+            <form onSubmit={handleSubmit}>
+              <div className="card-body grid gap-5">
+                {/* Pointiers Name */}
+                <div className="grid grid-cols-8 gap-2 items-center">
+                  <label className="form-label flex items-center gap-1 col-span-2">
+                    Pointiers Name<span className="text-red-500">*</span>
+                  </label>
+                  <Input
+                    className={`input col-span-6 ${errors.name ? 'border-red-500' : ''}`}
+                    type="text"
+                    autoComplete="off"
+                    value={formField.name}
+                    onChange={({ target }) => {
+                      setFormField((prev) => ({ ...prev, name: target.value }));
+                      setErrors((prev) => ({ ...prev, name: '' }));
+                    }}
+                  />
+                  {errors.name && (
+                    <span className="text-red-500 text-xs mt-1 col-span-8 ml-[calc(25%+0.5rem)]">
+                      {errors.name}
+                    </span>
+                  )}
+                </div>
+
+                {/* Description */}
+                <div className="grid grid-cols-8 gap-2 items-center">
+                  <label className="form-label flex items-center gap-1 col-span-2">
+                    Description <span className="text-red-500">*</span>
+                  </label>
+                  <Textarea
+                    className="input col-span-6"
+                    name="description"
+                    placeholder="Enter Description"
+                    value={formField.description}
+                    onChange={handleChange}
+                  />
+                  {errors.type && (
+                    <span className="text-red-500 text-xs mt-1 col-span-8 ml-[calc(25%+0.5rem)]">
+                      {errors.type}
+                    </span>
+                  )}
+                </div>
+
+                {/* Amount */}
+                <div className="grid grid-cols-8 gap-2 items-center">
+                  <label className="form-label flex items-center gap-1 col-span-2">
+                    Minimal Point<span className="text-red-500">*</span>
+                  </label>
+                  <NumericFormat
+                    className={`input col-span-6 ${errors.minimal_point ? 'border-red-500' : ''}`}
+                    value={formField.minimal_point}
+                    thousandSeparator="."
+                    decimalSeparator=","
+                    allowNegative={false}
+                    onValueChange={(values) => {
+                      setFormField((prev) => ({
+                        ...prev,
+                        minimal_point: values.floatValue ?? null
+                      }));
+                      setErrors((prev) => ({ ...prev, minimal_point: '' }));
+                    }}
+                    placeholder="Enter Point"
+                  />
+                  {errors.minimal_point && (
+                    <span className="text-red-500 text-xs mt-1 col-span-8 ml-[calc(25%+0.5rem)]">
+                      {errors.minimal_point}
+                    </span>
+                  )}
+                </div>
+
+                {/* Status */}
+                <div className="grid grid-cols-8 gap-2 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 }));
+                        setErrors((prev) => ({ ...prev, status: '' }));
+                      }}
+                    >
+                      <SelectTrigger className={`w-full ${errors.status ? 'border-red-500' : ''}`}>
+                        <SelectValue placeholder="Select" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="Y">Active</SelectItem>
+                        <SelectItem value="N">Inactive</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  {errors.status && (
+                    <span className="text-red-500 text-xs mt-1 col-span-8 ml-[calc(25%+0.5rem)]">
+                      {errors.status}
+                    </span>
+                  )}
+                </div>
+
+                {/* Actions */}
+                <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" />
+                    ) : (
+                      'Create'
+                    )}
+                  </Button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default AddDialog;
diff --git a/src/pages/master/pointiers/blocks/DeleteDialog.tsx b/src/pages/master/pointiers/blocks/DeleteDialog.tsx
new file mode 100644
index 0000000..5d5af76
--- /dev/null
+++ b/src/pages/master/pointiers/blocks/DeleteDialog.tsx
@@ -0,0 +1,89 @@
+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 { useManagePointiersContext } from '../hooks/useManagePointiersContext';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
+
+const API_URL = apiConfig.service_master_data;
+
+const DeleteDialog = () => {
+  const { showDeleteDialog, handleDeleteDialog, selectedPointiers } = useManagePointiersContext();
+  const { reload } = useDataGrid();
+  const { DeleteData } = useCallApi();
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
+
+  // console.log('ini data :', selectedPointiers);
+
+  const doDeletePointiers = useCallback(async () => {
+    if (!selectedPointiers) {
+      toast.error('No Pointiers selected');
+      return;
+    }
+    // console.log('Ini datanya:', selectedPointiers);
+    const response = await DeleteData(`${API_URL}/pointiers/delete/${selectedPointiers}/true`, {
+      id: selectedPointiers
+    });
+    // console.log('Response Delete:', response);
+
+    if (response?.status) {
+      setAlert((prev) => ({ ...prev, show: false, message: '' }));
+      handleDeleteDialog(false, null);
+      toast.success('Success Delete Pointiers');
+      reload();
+      const createActivity = {
+        module: 'Manage Pointiers',
+        description: `Delete Pointiers => ${selectedPointiers}`,
+        action: 'D'
+      };
+
+      doSaveLogActivity(createActivity);
+    } else {
+      setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
+      toast.error('Failed Delete Pointiers');
+    }
+  }, [selectedPointiers, 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={doDeletePointiers}>
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default DeleteDialog;
diff --git a/src/pages/master/pointiers/blocks/EditDialog.tsx b/src/pages/master/pointiers/blocks/EditDialog.tsx
new file mode 100644
index 0000000..d64e8a5
--- /dev/null
+++ b/src/pages/master/pointiers/blocks/EditDialog.tsx
@@ -0,0 +1,324 @@
+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 { NumericFormat } from 'react-number-format';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+import { useManagePointiersContext } from '../hooks/useManagePointiersContext';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { RefreshCw } from 'lucide-react';
+import { initialStatePointiers, validateFormPointiers } from './Types';
+import { Textarea } from '@/components/ui/textarea';
+
+const API_URL = apiConfig.service_master_data;
+
+const EditDialog = () => {
+  const parentRef = useRef<any | null>(null);
+  const { showEditDialog, handleEditDialog, selectedPointiers } = useManagePointiersContext();
+  const { reload } = useDataGrid();
+  const { PutData, GetData } = useCallApi();
+  const parsedUser = getAuth()?.user;
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  const [formField, setFormField] = useState(initialStatePointiers);
+  const updated_time = new Date();
+  const formattedTime = updated_time.toISOString().slice(0, 19).replace('T', ' ');
+
+  const resetForm = () => {
+    setFormField(initialStatePointiers);
+    setErrors({});
+  };
+
+  const doUpdatePointiers = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      setIsSubmitting(true);
+
+      if (!validateFormPointiers(formField, setErrors)) {
+        setIsSubmitting(false);
+        return;
+      }
+
+      try {
+        const payload = {
+          name: formField.name,
+          description: formField.description,
+          minimal_point: formField.minimal_point,
+          status: formField.status,
+          updated_by: parsedUser.username,
+          updated_at: formattedTime
+        };
+
+        const response = await PutData(`${API_URL}/pointiers/update/${selectedPointiers}`, payload);
+
+        if (response?.status) {
+          resetForm();
+          handleEditDialog(false, null);
+          toast.success('Success Update Pointiers');
+          reload();
+          const editActivity = {
+            module: 'Manage Pointiers',
+            description: `Edit Pointiers => ${formField.name}`,
+            action: 'U'
+          };
+
+          doSaveLogActivity(editActivity);
+        } else {
+          toast.error(response?.message);
+        }
+      } catch (error) {
+        toast.error('Something went wrong, please try again.');
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [selectedPointiers, formField]
+  );
+
+  const handleRestore = useCallback(async () => {
+    setIsSubmitting(true);
+
+    try {
+      const response = await PutData(`${API_URL}/pointiers/restore/${selectedPointiers}`, {
+        updated_by: parsedUser.username,
+        updated_at: formattedTime
+      });
+
+      if (response?.status) {
+        toast.success('Success Restore Pointiers');
+        handleEditDialog(false, null);
+        reload();
+      } else {
+        toast.error(response?.message);
+      }
+    } catch (error) {
+      toast.error('Failed to restore pointiers');
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [selectedPointiers, parsedUser.username, formattedTime]);
+
+  const doFetchData = useCallback(async (id: string) => {
+    setIsLoading(true);
+    const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
+    const fetchData = GetData(`${API_URL}/pointiers/getdata/${id}`, { id });
+    const [response] = await Promise.all([fetchData, minDelay]);
+
+    if (response?.status) {
+      setFormField((prev) => ({
+        ...prev,
+        name: response.data.name,
+        description: response.data.description,
+        minimal_point: response.data.minimal_point,
+        status: response.data.status
+      }));
+    }
+    setIsLoading(false);
+  }, []);
+
+  useEffect(() => {
+    if (selectedPointiers) {
+      doFetchData(selectedPointiers);
+    }
+  }, [selectedPointiers]);
+
+  useEffect(() => {
+    if (showEditDialog && selectedPointiers) {
+      setFormField((prev) => ({
+        ...prev,
+        updated_by: parsedUser.username,
+        updated_at: formattedTime
+      }));
+    }
+  }, [showEditDialog, selectedPointiers]);
+
+  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>Pointiers - Update</DialogTitle>
+          <DialogDescription></DialogDescription>
+        </DialogHeader>
+        <DialogBody ref={parentRef}>
+          <div className="flex flex-col">
+            {isLoading ? (
+              <div className="flex flex-col items-center justify-center p-8">
+                <div className="animate-pulse flex space-x-4 w-full">
+                  <div className="flex-1 space-y-4 py-1">
+                    <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+                    <div className="space-y-2">
+                      <div className="h-4 bg-gray-200 rounded"></div>
+                      <div className="h-4 bg-gray-200 rounded w-5/6"></div>
+                    </div>
+                  </div>
+                </div>
+                <p className="mt-4 text-gray-500">Loading Pointiers Details...</p>
+              </div>
+            ) : (
+              <form onSubmit={doUpdatePointiers}>
+                <div className="card-body grid gap-5">
+                  {/* Pointiers Name */}
+                  <div className="grid grid-cols-8 gap-2 items-center">
+                    <label className="form-label flex items-center gap-1 col-span-2">
+                      Pointiers Name<span className="text-red-500">*</span>
+                    </label>
+                    <Input
+                      className={`input col-span-6 ${errors.name ? 'border-red-500' : ''}`}
+                      type="text"
+                      autoComplete="off"
+                      value={formField.name}
+                      onChange={({ target }) => {
+                        setFormField((prev) => ({ ...prev, name: target.value }));
+                        setErrors((prev) => ({ ...prev, name: '' }));
+                      }}
+                    />
+                    {errors.name && (
+                      <span className="text-red-500 text-xs mt-1 col-span-8 ml-[calc(25%+0.5rem)]">
+                        {errors.name}
+                      </span>
+                    )}
+                  </div>
+
+                  {/* Pointiers Type */}
+                  <div className="grid grid-cols-8 gap-2 items-center">
+                    <label className="form-label flex items-center gap-1 col-span-2">
+                      Description<span className="text-red-500">*</span>
+                    </label>
+                    <Textarea
+                      className={`input col-span-6 ${errors.description ? 'border-red-500' : ''}`}
+                      autoComplete="off"
+                      value={formField.description}
+                      onChange={({ target }) => {
+                        setFormField((prev) => ({ ...prev, description: target.value }));
+                        setErrors((prev) => ({ ...prev, description: '' }));
+                      }}
+                    />
+                    {errors.type && (
+                      <span className="text-red-500 text-xs mt-1 col-span-8 ml-[calc(25%+0.5rem)]">
+                        {errors.type}
+                      </span>
+                    )}
+                  </div>
+
+                  {/* minimal point */}
+                  <div className="grid grid-cols-8 gap-2 items-center">
+                    <label className="form-label flex items-center gap-1 col-span-2">
+                      Minimal Point<span className="text-red-500">*</span>
+                    </label>
+                    <NumericFormat
+                      className={`input col-span-6 ${errors.minimal_point ? 'border-red-500' : ''}`}
+                      value={formField.minimal_point}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          minimal_point: values.floatValue ?? null
+                        }));
+                        setErrors((prev) => ({ ...prev, minimal_point: '' }));
+                      }}
+                      placeholder="Enter Point"
+                    />
+                    {errors.minimal_point && (
+                      <span className="text-red-500 text-xs mt-1 col-span-8 ml-[calc(25%+0.5rem)]">
+                        {errors.minimal_point}
+                      </span>
+                    )}
+                  </div>
+
+                  {/* Status */}
+                  <div className="grid grid-cols-8 gap-2 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 }));
+                          setErrors((prev) => ({ ...prev, status: '' }));
+                        }}
+                      >
+                        <SelectTrigger
+                          className={`w-full ${errors.status ? 'border-red-500' : ''}`}
+                        >
+                          <SelectValue placeholder="Select" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="Y">Active</SelectItem>
+                          <SelectItem value="N">Inactive</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    {errors.status && (
+                      <span className="text-red-500 text-xs mt-1 col-span-8 ml-[calc(25%+0.5rem)]">
+                        {errors.status}
+                      </span>
+                    )}
+                  </div>
+
+                  {/* Actions */}
+                  <div className="flex justify-end gap-5">
+                    {/* <Button type="button" variant="outline" onClick={resetForm}>
+                      Reset
+                    </Button> */}
+                    <div className="flex justify-end gap-5">
+                      <Button
+                        type="button"
+                        variant="outline"
+                        onClick={handleRestore}
+                        disabled={isSubmitting}
+                      >
+                        {isSubmitting ? (
+                          <RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
+                        ) : (
+                          'Restore'
+                        )}
+                      </Button>
+                      <Button variant="default" type="submit" disabled={isSubmitting}>
+                        {isSubmitting ? (
+                          <RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
+                        ) : (
+                          'Update'
+                        )}
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </form>
+            )}
+          </div>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default EditDialog;
diff --git a/src/pages/master/pointiers/blocks/ListToolbar.tsx b/src/pages/master/pointiers/blocks/ListToolbar.tsx
new file mode 100644
index 0000000..33bf9ab
--- /dev/null
+++ b/src/pages/master/pointiers/blocks/ListToolbar.tsx
@@ -0,0 +1,57 @@
+import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
+import { Button } from '@/components/ui/button';
+import { useManagePointiersContext } from '../hooks/useManagePointiersContext';
+import { useEffect, useState } from 'react';
+
+const ListToolbar = () => {
+  const { table, reload } = useDataGrid();
+  const { handleAddDialog } = useManagePointiersContext();
+  const [searchValue, setSearchValue] = useState<string>(
+    (table.getColumn('name')?.getFilterValue() as string) ?? ''
+  );
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      table.getColumn('name')?.setFilterValue(searchValue);
+      table.setPageIndex(0);
+    }, 200);
+
+    return () => clearTimeout(timer);
+  }, [searchValue, table]);
+
+  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 overflow-hidden">
+              <KeenIcon icon="magnifier" />
+              <input
+                type="text"
+                placeholder="Search"
+                value={searchValue}
+                onChange={(event) => setSearchValue(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;
diff --git a/src/pages/master/pointiers/blocks/Types.ts b/src/pages/master/pointiers/blocks/Types.ts
new file mode 100644
index 0000000..247393c
--- /dev/null
+++ b/src/pages/master/pointiers/blocks/Types.ts
@@ -0,0 +1,47 @@
+import { toast } from 'sonner';
+
+export const initialStatePointiers: {
+  name: string;
+  description: string;
+  minimal_point: number | null;
+  status: string;
+  created_by: string;
+  created_at: string;
+} = {
+  name: '',
+  description: '',
+  minimal_point: null,
+  status: '',
+  created_by: '',
+  created_at: ''
+};
+
+export const validateFormPointiers = (
+  formField: typeof initialStatePointiers,
+  setErrors: React.Dispatch<React.SetStateAction<Record<string, string>>>
+) => {
+  const requiredFields = [
+    { key: 'name', label: 'Name' },
+    { key: 'description', label: 'Description' },
+    { key: 'minimal_point', label: 'Minimal Point' },
+    { key: 'status', label: 'Status' }
+  ];
+
+  const newErrors: Record<string, string> = {};
+  let isValid = true;
+
+  requiredFields.forEach(({ key, label }) => {
+    if (
+      formField[key as keyof typeof formField] === '' ||
+      formField[key as keyof typeof formField] === null ||
+      formField[key as keyof typeof formField] === undefined
+    ) {
+      newErrors[key] = `${label} is required`;
+      toast.error(`${label} is required`);
+      isValid = false;
+    }
+  });
+
+  setErrors(newErrors);
+  return isValid;
+};
diff --git a/src/pages/master/pointiers/hooks/ManagePointiersContext.tsx b/src/pages/master/pointiers/hooks/ManagePointiersContext.tsx
new file mode 100644
index 0000000..2bfb99e
--- /dev/null
+++ b/src/pages/master/pointiers/hooks/ManagePointiersContext.tsx
@@ -0,0 +1,199 @@
+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 SelectedPointiers {
+  id: number;
+  name: string;
+  description: string;
+  minimal_point: number;
+  status: string;
+}
+
+interface ContextProps {
+  showAddDialog: boolean;
+  handleAddDialog: (show: boolean) => void;
+  showEditDialog: boolean;
+  handleEditDialog: (show: boolean, selected_pointiers: string | null) => void;
+  showDeleteDialog: boolean;
+  handleDeleteDialog: (show: boolean, selected_pointiers: string | null) => void;
+  selectedPointiers: string | null;
+}
+
+const initialProps: ContextProps = {
+  showAddDialog: false,
+  handleAddDialog: (show: boolean) => {},
+  showEditDialog: false,
+  handleEditDialog: () => {},
+  showDeleteDialog: false,
+  handleDeleteDialog: () => {},
+  selectedPointiers: null
+};
+
+const ManagePointiersContext = createContext<ContextProps>(initialProps);
+const API_URL_MASTER_DATA = apiConfig.service_master_data;
+
+const ManagePointiersContextProvider = ({ children }: { children: React.ReactNode }) => {
+  const [showAddDialog, setShowAddDialog] = useState(false);
+  const [showEditDialog, setShowEditDialog] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [selectedPointiers, setSelectedPointiers] = useState<string | null>(null);
+  const { GetData } = useCallApi();
+
+  const handleAddDialog = useCallback((show: boolean) => {
+    setShowAddDialog(show);
+  }, []);
+
+  const handleEditDialog = useCallback((show: boolean, selected_pointiers: string | null) => {
+    setShowEditDialog(show);
+    setSelectedPointiers(show ? selected_pointiers : null);
+  }, []);
+
+  const handleDeleteDialog = useCallback((show: boolean, selected_pointiers: string | null) => {
+    setShowDeleteDialog(show);
+    setSelectedPointiers(show ? selected_pointiers : 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: 'description',
+        id: 'description',
+        header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[350px]'
+        }
+      },
+      {
+        accessorKey: 'minimal_point',
+        id: 'minimal_point',
+        header: ({ column }) => <DataGridColumnHeader title="Point" 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] text-center',
+          cellClassName: 'text-center'
+        }
+      },
+      {
+        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.id)}
+              >
+                <KeenIcon icon="notepad-edit" />
+              </button>
+              <button
+                className="btn btn-sm btn-icon btn-clear btn-light"
+                onClick={() => handleDeleteDialog(true, row.id)}
+              >
+                <KeenIcon icon="trash" />
+              </button>
+            </>
+          );
+        },
+        meta: {
+          headerClassName: 'w-[100px] text-center',
+          cellClassName: 'text-center'
+        }
+      }
+    ],
+    [handleEditDialog, handleDeleteDialog]
+  );
+
+  const getPointiersList = 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}/pointiers/list`, {
+        limit: limit,
+        page: page + 1,
+        with_deleted: false,
+        order_field: sorting[0].id,
+        order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
+        filter: JSON.stringify(filter)
+      });
+      return { data: response?.data.list, totalCount: response?.data.total_count };
+    } catch (error) {
+      console.error('Error fethcing pointiers', error);
+    }
+  };
+
+  return (
+    <ManagePointiersContext.Provider
+      value={{
+        showAddDialog,
+        handleAddDialog,
+        showEditDialog,
+        handleEditDialog,
+        showDeleteDialog,
+        handleDeleteDialog,
+        selectedPointiers
+      }}
+    >
+      <Toaster expand visibleToasts={9} duration={3000} />
+      <DataGridProvider
+        columns={columns}
+        pagination={{ size: 5 }}
+        toolbar={<ListToolbar />}
+        layout={{ card: true }}
+        sorting={[{ id: 'created_at', desc: true }]}
+        serverSide={true}
+        onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
+          getPointiersList(pageIndex, pageSize, sorting, columnFilters)
+        }
+      >
+        {children}
+      </DataGridProvider>
+    </ManagePointiersContext.Provider>
+  );
+};
+
+export { ManagePointiersContext, ManagePointiersContextProvider };
+export type { SelectedPointiers };
diff --git a/src/pages/master/pointiers/hooks/useManagePointiersContext.tsx b/src/pages/master/pointiers/hooks/useManagePointiersContext.tsx
new file mode 100644
index 0000000..9e0b5f6
--- /dev/null
+++ b/src/pages/master/pointiers/hooks/useManagePointiersContext.tsx
@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { ManagePointiersContext } from './ManagePointiersContext';
+
+const useManagePointiersContext = () => {
+  const context = useContext(ManagePointiersContext);
+
+  if (!context) throw new Error('useManagePointiersContext must be used within AuthProvider');
+
+  return context;
+};
+
+export { useManagePointiersContext };
diff --git a/src/routing/AppRoutingSetup.tsx b/src/routing/AppRoutingSetup.tsx
index d9cd336..8db92a0 100644
--- a/src/routing/AppRoutingSetup.tsx
+++ b/src/routing/AppRoutingSetup.tsx
@@ -30,6 +30,7 @@ import Inbox from '@/pages/message/Inbox';
 import ManageWebServices from '@/pages/webservice/ManageWebServices';
 import TransferType from '@/pages/transfer/transfertype/TransferType';
 import MasterData from '@/pages/master/MasterData';
+import PointiersMaster from '@/pages/master/pointiers/PointiersMaster';
 import PostoAdmsMaster from '@/pages/master/postoadms/PostoAdmsMaster';
 import SucosMaster from '@/pages/master/sucos/SucosMaster';
 import AldeiasMaster from '@/pages/master/aldeias/AldeiasMaster';
@@ -75,6 +76,8 @@ const AppRoutingSetup = (): ReactElement => {
 
           <Route path="/master-data/reward/" element={<RewardMaster />} />
 
+          <Route path="/master-data/pointiers/" element={<PointiersMaster />} />
+
           <Route path="/master-data/wallet" element={<WalletMaster />} />
 
           <Route path="/master-data/wallet-rule" element={<WalletRuleMaster />} />