diff --git a/list-patient/components/barcodeDialog.vue b/list-patient/components/barcodeDialog.vue
new file mode 100644
index 0000000..b4504a1
--- /dev/null
+++ b/list-patient/components/barcodeDialog.vue
@@ -0,0 +1,166 @@
+<template>
+  <v-dialog v-model="menuBarcode" width="900">
+    <v-card>
+      <v-card-item class="bg-primary py-3 elevation-6">
+        <v-card-title>
+          {{ $t("message.barcode.title") }}
+        </v-card-title>
+      </v-card-item>
+      <v-card-text class="pt-5">
+        <v-data-table
+          :headers="headers"
+          :items="printItem"
+          hide-default-footer
+          height="200"
+        >
+          <template v-slot:headers="{ columns }">
+            <tr>
+              <template v-for="column in columns" :key="column.key">
+                <td
+                  :class="[
+                    'bg-primary-lighten',
+                    column.class,
+                    { 'd-flex justify-center': column.key === 'checkbox' },
+                  ]"
+                  :style="{ minWidth: column.width, textAlign: column.align }"
+                >
+                  <template v-if="column.key === 'checkbox'">
+                    <v-checkbox
+                      v-model="allSelected"
+                      color="primary"
+                      :indeterminate="someSelected"
+                      @update:modelValue="selectAll(!allSelected)"
+                    ></v-checkbox>
+                  </template>
+                  <template v-else>
+                    <span>{{ column.title }}</span>
+                  </template>
+                </td>
+              </template>
+            </tr>
+          </template>
+          <template v-slot:item="{ item }">
+            <tr>
+              <td class="d-flex justify-center">
+                <v-checkbox
+                  v-model="selected"
+                  color="primary"
+                  :value="item"
+                  @update:modelValue="onSomeSelected()"
+                ></v-checkbox>
+              </td>
+              <td>
+                <p class="font-weight-medium">{{ item.specimen }}</p>
+              </td>
+              <td>
+                <p class="font-weight-medium">{{ item.barcode }}</p>
+              </td>
+              <td>
+                <p class="w-100 d-flex justify-center cursor-pointer">
+                  <iconify-icon
+                    style="font-size: 1.5rem; color: #00bcd4"
+                    icon="fluent:print-48-regular"
+                  ></iconify-icon>
+                </p>
+              </td>
+            </tr>
+          </template>
+        </v-data-table>
+      </v-card-text>
+
+      <v-card-actions class="d-flex justify-space-between px-7">
+        <v-btn
+          :text="$t('message.barcode.close')"
+          variant="text"
+          class="text-error"
+          @click="onCloseMenuBarcode()"
+        ></v-btn>
+        <div>
+          <v-btn
+            :text="$t('message.barcode.printRobo')"
+            variant="flat"
+            class="bg-info text-white"
+            @click="onCloseMenuBarcode()"
+          ></v-btn>
+          <v-btn
+            :text="$t('message.barcode.printSelected')"
+            variant="flat"
+            class="bg-secondary-darken text-white"
+            @click="onCloseMenuBarcode()"
+          ></v-btn>
+        </div>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  name: "BarcodeDialog",
+  data() {
+    return {
+      selected: [],
+      allSelected: false,
+      someSelected: false,
+      headers: [
+        {
+          title: "",
+          key: "checkbox",
+          align: "center",
+          sortable: false,
+          width: "10%",
+          class: "",
+        },
+        {
+          title: this.$t("message.barcode.specimen"),
+          key: "specimen",
+          align: "start",
+          sortable: false,
+          width: "30%",
+          class: "font-weight-bold",
+        },
+        {
+          title: this.$t("message.barcode.barcode"),
+          key: "barcode",
+          align: "start",
+          sortable: false,
+          width: "30%",
+          class: "font-weight-bold",
+        },
+        {
+          title: this.$t("message.barcode.action"),
+          key: "action",
+          align: "center",
+          sortable: false,
+          width: "30%",
+          class: "font-weight-bold",
+        },
+      ],
+    };
+  },
+  computed: {
+    menuBarcode() {
+      return this.$store.state.collection.menuBarcode;
+    },
+    printItem() {
+      return this.$store.state.collection.printItem;
+    },
+  },
+  methods: {
+    onCloseMenuBarcode() {
+      this.$store.commit("setMenuBarcode", false);
+    },
+    selectAll(boolean) {
+      if (!boolean) this.selected = this.printItem;
+      else this.selected = [];
+    },
+    onSomeSelected() {
+      this.someSelected =
+        this.selected.length !== 0 &&
+        this.selected.length !== this.printItem.length;
+      if (this.selected.length === this.printItem.length)
+        this.allSelected = true;
+    },
+  },
+};
+</script>
diff --git a/list-patient/components/changeBirthdayDialog.vue b/list-patient/components/changeBirthdayDialog.vue
new file mode 100644
index 0000000..2544938
--- /dev/null
+++ b/list-patient/components/changeBirthdayDialog.vue
@@ -0,0 +1,95 @@
+<template>
+  <v-dialog v-model="menuChangeBirthday" width="900">
+    <v-card>
+      <v-card-item class="bg-primary py-3 elevation-6">
+        <v-card-title>
+          {{ $t("message.changeBirthday.title") }}
+        </v-card-title>
+      </v-card-item>
+      <v-card-text
+        class="font-weight-bold d-flex justify-center ga-3 text-h6 pt-5"
+      >
+        <v-menu
+          v-model="menuBirthday"
+          :close-on-content-click="false"
+          transition="scale-transition"
+          offset-y
+          min-width="330px"
+          max-width="290px"
+        >
+          <template v-slot:activator="{ props }">
+            <v-text-field
+              :model-value="formatBirthday()"
+              :label="$t('message.changeBirthday.datePicker')"
+              prepend-inner-icon="mdi-calendar"
+              hide-details
+              readonly
+              variant="outlined"
+              v-bind="props"
+            ></v-text-field>
+          </template>
+          <v-date-picker
+            hide-header
+            show-adjacent-months
+            rounded="lg"
+            color="primary"
+            v-model="birthday"
+            @update:modelValue="menuBirthday = false"
+          ></v-date-picker>
+        </v-menu>
+      </v-card-text>
+
+      <v-card-actions class="px-7">
+        <v-btn
+          :text="$t('message.changeBirthday.close')"
+          variant="text"
+          class="text-error"
+          @click="onCloseMenuChangeBirthday()"
+        ></v-btn>
+        <v-btn
+          :text="$t('message.changeBirthday.save')"
+          variant="text"
+          class="text-primary"
+          @click="onSaveChangeBirthday()"
+        ></v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  name: "ChangeBirthdayDialog",
+  data() {
+    return {
+      menuBirthday: false,
+    };
+  },
+  computed: {
+    menuChangeBirthday() {
+      return this.$store.state.collection.menuChangeBirthday;
+    },
+    birthday: {
+      get() {
+        return this.$store.state.collection.birthday;
+      },
+      set(val) {
+        this.$store.commit("setBirthday", val);
+      },
+    },
+  },
+  methods: {
+    onCloseMenuChangeBirthday() {
+      this.$store.commit("setMenuChangeBirthday", false);
+    },
+    formatBirthday() {
+      if (!this.birthday) return null;
+
+      return moment(this.birthday).format("DD-MM-YYYY");
+    },
+    onSaveChangeBirthday() {
+      this.$store.commit("setMenuChangeBirthday", false);
+    },
+  },
+};
+</script>
diff --git a/list-patient/components/filter.vue b/list-patient/components/filter.vue
new file mode 100644
index 0000000..494e1df
--- /dev/null
+++ b/list-patient/components/filter.vue
@@ -0,0 +1,166 @@
+<template>
+  <div>
+    <v-container class="bg-white rounded-lg" fluid>
+      <v-row>
+        <v-col cols="2.2">
+          <div class="d-flex align-center ga-2">
+            <v-menu
+              v-model="menuStartDate"
+              :close-on-content-click="false"
+              transition="scale-transition"
+              offset-y
+              min-width="auto"
+              max-width="290px"
+            >
+              <template v-slot:activator="{ props }">
+                <v-text-field
+                  :model-value="formatStartDate()"
+                  :label="$t('message.filter.startDate')"
+                  prepend-inner-icon="mdi-calendar"
+                  hide-details
+                  readonly
+                  variant="outlined"
+                  v-bind="props"
+                ></v-text-field>
+              </template>
+              <v-date-picker
+                hide-header
+                show-adjacent-months
+                rounded="lg"
+                color="primary"
+                v-model="startDate"
+                @update:modelValue="menuStartDate = false"
+              ></v-date-picker>
+            </v-menu>
+          </div>
+        </v-col>
+        <v-col cols="2.2">
+          <div class="d-flex align-center ga-2">
+            <v-menu
+              v-model="menuEndDate"
+              :close-on-content-click="false"
+              transition="scale-transition"
+              offset-y
+              min-width="auto"
+              max-width="290px"
+            >
+              <template v-slot:activator="{ props }">
+                <v-text-field
+                  :model-value="formatEndDate()"
+                  :label="$t('message.filter.endDate')"
+                  prepend-inner-icon="mdi-calendar"
+                  hide-details
+                  readonly
+                  variant="outlined"
+                  v-bind="props"
+                ></v-text-field>
+              </template>
+              <v-date-picker
+                hide-header
+                show-adjacent-months
+                rounded="lg"
+                color="primary"
+                v-model="endDate"
+                @update:modelValue="menuEndDate = false"
+              ></v-date-picker>
+            </v-menu>
+          </div>
+        </v-col>
+        <v-col cols="2.2">
+          <v-text-field
+            :label="$t('message.filter.noRegOrName')"
+            append-inner-icon="mdi-magnify"
+            hide-details
+            variant="outlined"
+          ></v-text-field>
+        </v-col>
+        <v-col cols="2.2">
+          <v-autocomplete
+            :label="$t('message.filter.doctor')"
+            variant="outlined"
+            hide-details
+            menu-icon="mdi-chevron-down"
+            :items="doctor_dropdown"
+          ></v-autocomplete>
+        </v-col>
+        <v-col cols="2.2">
+          <v-autocomplete
+            :label="$t('message.filter.customerComplaint')"
+            variant="outlined"
+            hide-details
+            menu-icon="mdi-chevron-down"
+            :items="cust_complaint_dropdown"
+          ></v-autocomplete>
+        </v-col>
+        <v-col cols="1">
+          <div
+            style="
+              height: 100%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            "
+            class="rounded-lg bg-primary pa-2 h-100 pointer"
+          >
+            <iconify-icon
+              style="font-size: 2rem"
+              icon="fluent:search-20-regular"
+            ></iconify-icon>
+          </div>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script type="module">
+export default {
+  name: "Filter",
+  data() {
+    return {
+      menuStartDate: false,
+      menuEndDate: false,
+    };
+  },
+  computed: {
+    startDate: {
+      get() {
+        return this.$store.state.collection.startDate;
+      },
+      set(val) {
+        this.$store.commit("setStartDate", val);
+      },
+    },
+    endDate: {
+      get() {
+        return this.$store.state.collection.endDate;
+      },
+      set(val) {
+        this.$store.commit("setEndDate", val);
+      },
+    },
+    doctor_dropdown: {
+      get() {
+        return this.$store.state.collection.doctor_dropdown;
+      },
+    },
+    cust_complaint_dropdown: {
+      get() {
+        return this.$store.state.collection.cust_complaint_dropdown;
+      },
+    },
+  },
+  methods: {
+    formatStartDate() {
+      if (!this.startDate) return null;
+
+      return moment(this.startDate).format("DD-MM-YYYY");
+    },
+    formatEndDate() {
+      if (!this.endDate) return null;
+
+      return moment(this.endDate).format("DD-MM-YYYY");
+    },
+  },
+};
+</script>
diff --git a/list-patient/components/infoDialog.vue b/list-patient/components/infoDialog.vue
new file mode 100644
index 0000000..ef52b0c
--- /dev/null
+++ b/list-patient/components/infoDialog.vue
@@ -0,0 +1,102 @@
+<template>
+  <v-dialog v-model="menuSelectedPatient" max-width="900">
+    <v-card>
+      <v-card-item class="bg-primary py-3">
+        <v-card-title>
+          {{ $t("message.infoDialog.title") }}
+        </v-card-title>
+      </v-card-item>
+      <v-card-text
+        class="font-weight-bold d-flex justify-center ga-3 text-h6 pt-5"
+      >
+        <p>{{ selectedPatient.noReg1 }}</p>
+        <p>/</p>
+        <p v-if="selectedPatient.noReg2" class="text-error">
+          {{ selectedPatient.noReg2 }}
+        </p>
+      </v-card-text>
+      <v-card-actions class="d-flex justify-space-between px-7">
+        <div>
+          <v-btn
+            v-if="selectedPatient.process"
+            :text="$t('message.infoDialog.material')"
+            variant="flat"
+            class="bg-primary text-white"
+            @click="onMenuMaterial()"
+          ></v-btn>
+          <v-btn
+            :text="$t('message.infoDialog.barcode')"
+            variant="flat"
+            class="bg-info text-white"
+            @click="onMenuBarcode(selectedPatient.noReg2)"
+          ></v-btn>
+          <v-btn
+            :text="$t('message.infoDialog.changeBirthday')"
+            variant="flat"
+            class="bg-secondary-darken text-white"
+            @click="onMenuChangeBirthday(selectedPatient.birthday)"
+          ></v-btn>
+        </div>
+        <v-btn
+          :text="$t('message.infoDialog.close')"
+          variant="text"
+          class="text-error"
+          @click="onDiselectPatient()"
+        ></v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  name: "InfoDialog",
+  computed: {
+    menuSelectedPatient() {
+      return this.$store.state.collection.menuSelectedPatient;
+    },
+    selectedPatient() {
+      return this.$store.state.collection.selectedPatient;
+    },
+    menuMaterial() {
+      return this.$store.state.collection.menuMaterial;
+    },
+    menuBarcode() {
+      return this.$store.state.collection.menuBarcode;
+    },
+    menuChangeBirthday() {
+      return this.$store.state.collection.menuChangeBirthday;
+    },
+  },
+  methods: {
+    onDiselectPatient() {
+      this.$store.commit("setMenuSelectedPatient", false);
+      setTimeout(() => this.$store.commit("setSelectedPatient", {}), 1000);
+    },
+    onMenuChangeBirthday(birthday) {
+      this.$store.commit("setMenuChangeBirthday", true);
+      const time = birthday.split("-");
+      this.$store.commit(
+        "setBirthday",
+        new Date(Date.parse(`${time[1]}/${time[0]}/${time[2]}`))
+      );
+    },
+    onMenuBarcode(noReg) {
+      this.$store.commit("setMenuBarcode", true);
+      this.$store.commit("setPrintItem", [
+        {
+          specimen: this.$t("message.barcode.form"),
+          barcode: noReg,
+        },
+        {
+          specimen: this.$t("message.barcode.label"),
+          barcode: noReg,
+        },
+      ]);
+    },
+    onMenuMaterial() {
+      this.$store.commit("setMenuMaterial", true);
+    },
+  },
+};
+</script>
diff --git a/list-patient/components/lists.vue b/list-patient/components/lists.vue
new file mode 100644
index 0000000..51f44e8
--- /dev/null
+++ b/list-patient/components/lists.vue
@@ -0,0 +1,268 @@
+<template>
+  <div>
+    <v-container class="bg-white rounded-lg" fluid>
+      <div
+        class="bg-secondary-lighten rounded-lg d-flex justify-space-between pa-5 mb-5"
+      >
+        <h3 class="primary-lighten">
+          {{ $t("message.tableListPatient.title") }}
+        </h3>
+        <h3 class="primary-lighten">{{ patients.length }}</h3>
+      </div>
+      <v-data-table
+        v-model:page="page"
+        height="275px"
+        :items="patients"
+        :headers="headers"
+        :items-per-page="itemsPerPage"
+        hide-default-footer
+        class="row-pointer"
+      >
+        <template v-slot:headers="{ columns }">
+          <tr>
+            <template v-for="column in columns" :key="column.key">
+              <td
+                :class="column.class"
+                :style="{ width: column.width, textAlign: column.align }"
+              >
+                <span>{{ column.title }}</span>
+              </td>
+            </template>
+          </tr>
+        </template>
+        <template v-slot:item="{ item }">
+          <tr>
+            <td>
+              <v-btn
+                icon="mdi-pencil"
+                variant="flat"
+                :class="[
+                  'rounded-0 w-100 h-100 pa-2 text-white',
+                  { 'bg-info': item.process },
+                  { 'bg-secondary': !item.process },
+                ]"
+                @click="onSelectPatient(item)"
+              ></v-btn>
+            </td>
+            <td>
+              <p class="font-weight-medium">{{ item.no }}</p>
+            </td>
+            <td>
+              <div>
+                <p class="font-weight-medium mt-2">{{ item.noReg1 }}</p>
+                <p
+                  v-if="item.noReg2"
+                  class="font-weight-medium text-error mb-2"
+                >
+                  {{ item.noReg2 }}
+                </p>
+              </div>
+            </td>
+            <td>
+              <div>
+                <p class="mt-2 mb-2" style="font-size: 12px">{{ item.name }}</p>
+                <p class="mb-2">
+                  <v-chip label size="small">
+                    {{ item.staff }}
+                  </v-chip>
+                </p>
+                <p class="mb-2">
+                  <v-chip label size="small">
+                    {{ item.orderTime }}
+                  </v-chip>
+                </p>
+              </div>
+            </td>
+            <td>
+              <p style="font-size: 12px">{{ item.agreement }}</p>
+            </td>
+            <td>
+              <div>
+                <p class="mt-2" style="font-size: 12px">{{ item.doctor.no }}</p>
+                <p class="mb-2" style="font-size: 12px">
+                  {{ item.doctor.name }}
+                </p>
+              </div>
+            </td>
+            <td>
+              <div>
+                <p
+                  v-for="result in item.result"
+                  :key="result"
+                  style="font-size: 12px"
+                >
+                  {{ result }}
+                </p>
+              </div>
+            </td>
+            <td>
+              <div>
+                <p
+                  v-for="inspection in item.inspection"
+                  :key="inspection"
+                  style="font-size: 12px"
+                >
+                  {{ inspection }}
+                </p>
+              </div>
+            </td>
+            <td>
+              <div>
+                <p v-for="delivery in item.delivery">
+                  <v-chip variant="flat" color="primary" class="rounded">{{
+                    delivery
+                  }}</v-chip>
+                </p>
+              </div>
+            </td>
+            <td>
+              <div>
+                <p class="font-weight-medium">{{ item.total.all }}</p>
+                <p v-if="item.total.disc" class="font-weight-medium text-error">
+                  {{ item.total.disc }}
+                </p>
+              </div>
+            </td>
+          </tr>
+        </template>
+
+        <template v-slot:bottom>
+          <div class="text-center pt-2">
+            <v-pagination v-model="page" :length="pageCount"></v-pagination>
+          </div>
+        </template>
+      </v-data-table>
+    </v-container>
+  </div>
+
+  <info-dialog></info-dialog>
+  <change-birthday-dialog></change-birthday-dialog>
+  <barcode-dialog></barcode-dialog>
+  <material-dialog></material-dialog>
+</template>
+
+<script>
+import InfoDialogComponent from "./infoDialog.vue";
+import ChangeBirthdayDialogComponent from "./changeBirthdayDialog.vue";
+import BarcodeDialogComponent from "./barcodeDialog.vue";
+import MaterialDialogComponent from "./materialDialog.vue";
+
+export default {
+  name: "MainLists",
+  components: {
+    "info-dialog": InfoDialogComponent,
+    "change-birthday-dialog": ChangeBirthdayDialogComponent,
+    "barcode-dialog": BarcodeDialogComponent,
+    "material-dialog": MaterialDialogComponent,
+  },
+  mounted() {},
+  data() {
+    return {
+      page: 1,
+      itemsPerPage: 3,
+      headers: [
+        {
+          title: "",
+          align: "start",
+          sortable: false,
+          key: "actionButton",
+          width: "4%",
+          class: "",
+        },
+        {
+          title: this.$t("message.tableListPatient.no"),
+          align: "center",
+          sortable: false,
+          key: "no",
+          width: "4%",
+          class: "font-weight-bold",
+        },
+        {
+          title: this.$t("message.tableListPatient.noreg"),
+          align: "start",
+          sortable: false,
+          key: "noreg",
+          width: "12%",
+          class: "font-weight-bold",
+        },
+        {
+          title: this.$t("message.tableListPatient.name"),
+          align: "start",
+          sortable: false,
+          key: "noreg",
+          width: "12%",
+          class: "font-weight-bold",
+        },
+        {
+          title: this.$t("message.tableListPatient.agreement"),
+          align: "start",
+          sortable: false,
+          key: "noreg",
+          width: "14%",
+          class: "font-weight-bold",
+        },
+        {
+          title: this.$t("message.tableListPatient.doctor"),
+          align: "start",
+          sortable: false,
+          key: "noreg",
+          width: "12%",
+          class: "font-weight-bold",
+        },
+        {
+          title: this.$t("message.tableListPatient.result"),
+          align: "start",
+          sortable: false,
+          key: "noreg",
+          width: "14%",
+          class: "font-weight-bold",
+        },
+        {
+          title: this.$t("message.tableListPatient.inspection"),
+          align: "start",
+          sortable: false,
+          key: "noreg",
+          width: "12%",
+          class: "font-weight-bold",
+        },
+        {
+          title: this.$t("message.tableListPatient.delivery"),
+          align: "start",
+          sortable: false,
+          key: "noreg",
+          width: "12%",
+          class: "font-weight-bold",
+        },
+        {
+          title: this.$t("message.tableListPatient.total"),
+          align: "start",
+          sortable: false,
+          key: "noreg",
+          width: "4%",
+          class: "font-weight-bold",
+        },
+      ],
+    };
+  },
+  computed: {
+    patients() {
+      return this.$store.state.collection.patients;
+    },
+    pageCount() {
+      return Math.ceil(this.patients.length / this.itemsPerPage);
+    },
+  },
+  methods: {
+    onSelectPatient(patient) {
+      this.$store.commit("setMenuSelectedPatient", true);
+      this.$store.commit("setSelectedPatient", patient);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.row-pointer >>> tbody tr :hover {
+  cursor: pointer;
+}
+</style>
diff --git a/list-patient/components/main.vue b/list-patient/components/main.vue
new file mode 100644
index 0000000..0e21134
--- /dev/null
+++ b/list-patient/components/main.vue
@@ -0,0 +1,40 @@
+<template>
+  <v-app id="inspire">
+    <one-navbar></one-navbar>
+    <v-main>
+      <div class="pa-5 bg-primary-lighten ml-2 rounded-xl h-100">
+        <v-row>
+          <v-col cols="12" md="12" sm="12" xs="12">
+            <filter-component></filter-component>
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col cols="12" md="12" sm="12" xs="12">
+            <list-component></list-component>
+          </v-col>
+        </v-row>
+      </div>
+    </v-main>
+  </v-app>
+</template>
+
+<script type="module">
+import NavbarComponent from "../../globalcomponent/one-navbar.vue";
+import FilterComponent from "./filter.vue";
+import ListComponent from "./lists.vue";
+
+export default {
+  name: "ListPatient",
+  components: {
+    "one-navbar": NavbarComponent,
+    "filter-component": FilterComponent,
+    "list-component": ListComponent,
+  },
+  mountend() {},
+  data() {
+    return {
+      visible: false,
+    };
+  },
+};
+</script>
diff --git a/list-patient/components/materialDialog.vue b/list-patient/components/materialDialog.vue
new file mode 100644
index 0000000..9bd0244
--- /dev/null
+++ b/list-patient/components/materialDialog.vue
@@ -0,0 +1,53 @@
+<template>
+  <v-dialog v-model="menuMaterial" width="900">
+    <v-card>
+      <v-card-item class="bg-primary py-3">
+        <v-card-title>
+          {{ $t("message.material.title") }}
+        </v-card-title>
+      </v-card-item>
+      <v-card-text class="pt-5">
+        <div>
+          <h3 class="mb-4">{{ $t("message.material.materialYet") }}</h3>
+          <v-chip variant="flat" color="error" class="rounded">{{
+            $t("message.material.blood")
+          }}</v-chip>
+        </div>
+      </v-card-text>
+
+      <v-card-actions class="px-7">
+        <v-btn
+          :text="$t('message.material.correct')"
+          variant="text"
+          class="text-primary"
+          @click="onCorrectMenuMaterial()"
+        ></v-btn>
+        <v-btn
+          :text="$t('message.material.cancel')"
+          variant="text"
+          class="text-error"
+          @click="onCancelMenuMaterial()"
+        ></v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  name: "MaterialDialog",
+  computed: {
+    menuMaterial() {
+      return this.$store.state.collection.menuMaterial;
+    },
+  },
+  methods: {
+    onCancelMenuMaterial() {
+      this.$store.commit("setMenuMaterial", false);
+    },
+    onCorrectMenuMaterial() {
+      this.$store.commit("setMenuMaterial", false);
+    },
+  },
+};
+</script>
diff --git a/list-patient/index.html b/list-patient/index.html
new file mode 100644
index 0000000..843c256
--- /dev/null
+++ b/list-patient/index.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>WESTONE</title>
+    <!-- Vuetify CSS -->
+    <link href="../css/vuetify.css" rel="stylesheet" />
+    <!-- Local Stylesheet for Fonts -->
+    <link rel="stylesheet" href="../css/styles.css" />
+    <link href="../css/materialdesignicon.css" rel="stylesheet" />
+    <script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- Moment -->
+    <script src="../libraries/moment.js"></script>
+    <!-- Vue.js -->
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <!-- Vuex -->
+    <script src="../libraries/vuex.js"></script>
+    <!-- Vuetify -->
+    <script src="../libraries/vuetify3.js"></script>
+    <!-- vue-i18n -->
+    <script src="../libraries/vue-i18n.global.js"></script>
+    <!-- Axios -->
+    <script src="../libraries/axios.js"></script>
+
+    <script src="../globalscript/theme.js"></script>
+    <script src="../globalscript/global.js"></script>
+    <!-- loader single file component -->
+    <script src="../libraries/vue3-sfc-loader.js"></script>
+    <script src="./language.js"></script>
+
+    <script type="module">
+      const { loadModule } = window["vue3-sfc-loader"];
+
+      import system from "../globalstore/globalstore.js";
+      import collection from "./modules/collection.js";
+
+      const options = {
+        moduleCache: {
+          vue: Vue,
+        },
+        getFile(url) {
+          return fetch(url).then((response) =>
+            response.ok ? response.text() : Promise.reject(response)
+          );
+        },
+        addStyle(textContent) {
+          const style = document.createElement("style");
+          style.textContent = textContent;
+          const ref = document.head.getElementsByTagName("style")[0] || null;
+          document.head.insertBefore(style, ref);
+        },
+      };
+      // Locale messages
+      const messages = CustomMessages;
+
+      // Get the browser's preferred language
+      const browserLocale = navigator.language || navigator.languages[0];
+
+      // Initialize vue-i18n
+      const i18n = VueI18n.createI18n({
+        locale: browserLocale.startsWith("id") ? "id" : "en", // Set locale based on browser setting
+        fallbackLocale: "en", // Set fallback Locale
+        messages, // Set locale messages
+      });
+      window.i18n = i18n;
+
+      const store = Vuex.createStore({
+        modules: {
+          system: system,
+          collection: collection,
+        },
+      });
+
+      // Vue App
+      const app = Vue.createApp({
+        data() {
+          return {
+            visible: false,
+            bg_src: "",
+            loading: false, // Initialize loading state
+          };
+        },
+
+        template: `
+            <main-component></main-component>
+            `,
+      });
+
+      const vuetify = Vuetify.createVuetify({
+        theme: {
+          themes: CustomTheme,
+        },
+      });
+
+      app.use(store);
+      app.use(vuetify);
+      app.use(i18n);
+      const components = {
+        "main-component": "./components/main.vue",
+      };
+      Promise.all(
+        Object.entries(components).map(([name, path]) => {
+          return loadModule(path, options).then((component) => {
+            app.component(name, component);
+          });
+        })
+      )
+        .then(() => {
+          app.mount("#app");
+        })
+        .catch((error) => {
+          console.error("Error loading components:", error);
+        });
+    </script>
+  </body>
+</html>
diff --git a/list-patient/language.js b/list-patient/language.js
new file mode 100644
index 0000000..41914d1
--- /dev/null
+++ b/list-patient/language.js
@@ -0,0 +1,110 @@
+var CustomMessages = {
+  en: {
+    message: {
+      barcode: {
+        action: "ACTION",
+        barcode: "BARCODE",
+        close: "Close",
+        form: "Form",
+        label: "Special Labels",
+        printRobo: "Robo Print",
+        printSelected: "Selected Print",
+        specimen: "SPECIMEN",
+        title: "Barcode Print",
+      },
+      changeBirthday: {
+        close: "Close",
+        datePicker: "Birthday",
+        save: "Save",
+        title: "Change Birthday",
+      },
+      filter: {
+        customerComplaint: "Cust. Complaint",
+        doctor: "Doctor",
+        endDate: "End Date",
+        noRegOrName: "Registration No./Name",
+        startDate: "Start Date",
+      },
+      infoDialog: {
+        barcode: "Barcode",
+        changeBirthday: "Change Birthday",
+        close: "Close",
+        material: "Materials arrived",
+        title: "INFORMATION",
+      },
+      material: {
+        blood: "BLOOD",
+        cancel: "Cancel",
+        correct: "Correct",
+        materialYet: "MATERIAL YET:",
+        title: "WARNING",
+      },
+      tableListPatient: {
+        agreement: "AGREEMENT",
+        delivery: "DELIVERY",
+        doctor: "DOCTOR",
+        inspection: "INSPECTION",
+        name: "NAME",
+        no: "NO.",
+        noreg: "REGISTRATION NO",
+        result: "SCHEDULE",
+        title: "LIST PATIENT",
+        total: "TOTAL",
+      },
+    },
+  },
+  id: {
+    message: {
+      barcode: {
+        action: "AKSI",
+        barcode: "BARCODE",
+        close: "Tutup",
+        form: "Formulir",
+        label: "Label Khusus",
+        printRobo: "Cetak Robo",
+        printSelected: "Cetak Terpilih",
+        specimen: "SPECIMEN",
+        title: "Cetak Barcode",
+      },
+      changeBirthday: {
+        close: "Tutup",
+        datePicker: "Tanggal Lahir",
+        save: "Simpan",
+        title: "Revisi Tanggal Lahir",
+      },
+      filter: {
+        customerComplaint: "Kel. Pelanggan",
+        doctor: "Dokter",
+        endDate: "Tanggal Akhir",
+        noRegOrName: "No Reg/Nama",
+        startDate: "Tanggal Awal",
+      },
+      infoDialog: {
+        barcode: "Barcode",
+        changeBirthday: "Revisi Tanggal Lahir",
+        close: "Tutup",
+        material: "Bahan Datang",
+        title: "INFO",
+      },
+      material: {
+        blood: "DARAH",
+        cancel: "Tidak Jadi",
+        correct: "Benar",
+        materialYet: "BAHAN BELUM:",
+        title: "PERINGATAN",
+      },
+      tableListPatient: {
+        agreement: "AGREEMENT",
+        delivery: "PENGIRIMAN",
+        doctor: "DOKTER",
+        inspection: "PEMERIKSAAN",
+        name: "NAMA",
+        no: "NO.",
+        noreg: "NO REG",
+        result: "JANJI HASIL",
+        title: "LIST PASIEN",
+        total: "TOTAL",
+      },
+    },
+  },
+};
diff --git a/list-patient/modules/collection.js b/list-patient/modules/collection.js
new file mode 100644
index 0000000..8014115
--- /dev/null
+++ b/list-patient/modules/collection.js
@@ -0,0 +1,148 @@
+const store = {
+  state() {
+    return {
+      startDate: new Date(),
+      endDate: new Date(),
+      birthday: null,
+      doctor_dropdown: ["Lorem", "ipsum", "dolor", "sit", "amet"],
+      cust_complaint_dropdown: ["Lorem", "ipsum", "dolor", "sit", "amet"],
+      selectedPatient: {},
+      menuSelectedPatient: false,
+      menuMaterial: false,
+      menuBarcode: false,
+      menuChangeBirthday: false,
+      patients: [
+        {
+          no: 1,
+          process: false,
+          noReg1: "05600011LA",
+          noReg2: "056M3T65LA",
+          name: "Tn. ARI ANTONI KALBUADI",
+          birthday: "06-01-1987",
+          staff: "admin",
+          orderTime: "19-08-2024 09:46",
+          agreement: "PASIEN MANDIRI - PROMO PAKET IMLEK 2024",
+          doctor: { name: "drg. A. B. DARMADI", no: "3101004815" },
+          result: [
+            "19-08-2024 13:46:39",
+            "20-08-2024 12:00:00",
+            "21-08-2024 17:00:00",
+          ],
+          inspection: ["Hermatologi Lengkap", "Urine Lengkap", "SGOT"],
+          delivery: ["Ambil Sendiri"],
+          total: { all: "359.000" },
+        },
+        {
+          no: 2,
+          process: true,
+          noReg1: "05600012LA",
+          noReg2: "056R9G95LA",
+          name: "Tn. HANDOYO",
+          birthday: "07-06-1989",
+          staff: "adminsas",
+          orderTime: "19-08-2024 12:32",
+          agreement: "PASIEN KLINISI - PASIEN UMUM 2021",
+          doctor: { name: "-", no: "3101006048" },
+          result: [
+            "",
+            "19-08-2024 16:32:49",
+            "20-08-2024 12:00:00",
+            "21-08-2024 17:00:00",
+          ],
+          inspection: [
+            "SGOT",
+            "Glukosa Darah Puasa",
+            "Hermatologi Lengkap",
+            "Home Sevice Zone 1 (sekali kedatangan)",
+          ],
+          delivery: ["Ambil Sendiri"],
+          total: { all: "339.000" },
+        },
+        {
+          no: 3,
+          process: false,
+          noReg1: "05600013LA",
+          noReg2: "056P8M39LA",
+          name: "Tn. COCOBA",
+          birthday: "06-1-1987",
+          staff: "admin",
+          orderTime: "20-08-2024 08:57",
+          agreement: "SASONE - MCU KARYAWAN 2024",
+          doctor: { name: "ASEP TRI HANDOKO, dr.", no: "3104129" },
+          result: [
+            "19-08-2024 13:57:04",
+            "20-08-2024 12:00:00",
+            "21-08-2024 17:00:00",
+          ],
+          inspection: ["Cholesterol", "SGOT", "Hermatologi Lengkap"],
+          delivery: ["Ambil Sendiri"],
+          total: { all: "279.000", disc: "279.000" },
+        },
+        {
+          no: 4,
+          process: false,
+          noReg1: "05600014LA",
+          noReg2: "056U7H2BLA",
+          name: "Tn. HAYASHI SHIDEKI",
+          birthday: "06-01-1987",
+          staff: "admin",
+          orderTime: "20-08-2024 09:25",
+          agreement: "PASIEN MANDIRI - PROMO PAKET IMLEK 2024",
+          doctor: { name: "ASEP TRI HANDOKO, dr.", no: "3104129" },
+          result: ["20-08-2024 13:25:44", "21-08-2024 12:00:00"],
+          inspection: ["SGPT", "SGOT"],
+          delivery: ["Ambil Sendiri"],
+          total: { all: "176.000", disc: "176.000" },
+        },
+        {
+          no: 5,
+          process: false,
+          noReg1: "05600015LA",
+          noReg2: "056U7U56LA",
+          name: "Tn. KUSTIRAONO SUJIMAN",
+          birthday: "06-01-1987",
+          staff: "admin",
+          orderTime: "20-08-2024 11:00",
+          agreement: "PASIEN MANDIRI - PROMO PAKET IMLEK 2024",
+          doctor: { name: "dr. A BENY SETIAWAN", no: "3101210939" },
+          result: ["20-08-2024 15:00:30", "22-08-2024 12:00:00"],
+          inspection: ["SGOT", "SGPT"],
+          delivery: ["Ambil Sendiri"],
+          total: { all: "176.000" },
+        },
+      ],
+      printItem: [],
+    };
+  },
+  mutations: {
+    setStartDate(state, date) {
+      state.startDate = date;
+    },
+    setEndDate(state, date) {
+      state.endDate = date;
+    },
+    setSelectedPatient(state, item) {
+      state.selectedPatient = item;
+    },
+    setMenuSelectedPatient(state, val) {
+      state.menuSelectedPatient = val;
+    },
+    setMenuMaterial(state, val) {
+      state.menuMaterial = val;
+    },
+    setMenuBarcode(state, val) {
+      state.menuBarcode = val;
+    },
+    setMenuChangeBirthday(state, val) {
+      state.menuChangeBirthday = val;
+    },
+    setBirthday(state, birthday) {
+      state.birthday = birthday;
+    },
+    setPrintItem(state, items) {
+      state.printItem = items;
+    },
+  },
+};
+
+export default store;