diff --git a/globalcomponent/one-navbar.vue b/globalcomponent/one-navbar.vue
index a32b658..f278185 100644
--- a/globalcomponent/one-navbar.vue
+++ b/globalcomponent/one-navbar.vue
@@ -19,8 +19,7 @@ export default {
     "one-menu": MenuComponent,
   },
   mounted() {
-    console.log("drawer");
-    console.log(this.$store.state.system.drawer);
+    // console.log(this.$store.state.system.drawer);
   },
   data() {
     return {};
diff --git a/globalstore/globalstore.js b/globalstore/globalstore.js
index 313864e..820a276 100644
--- a/globalstore/globalstore.js
+++ b/globalstore/globalstore.js
@@ -8,7 +8,7 @@ const store = {
             menu_level_0: [],
             menu_level_1: [],
             menu_level_2: [],
-            drawer: true,
+            drawer: false,
             bread_crumb: "",
             search_error_message: "",
             branch: {},
@@ -67,7 +67,6 @@ const store = {
                     context.commit("update_search_error_message", resp.message)
                 } else {
                     context.commit("update_search_error_message", "")
-                    console.log("menu", resp.data.data.bread_crumb)
                     context.commit("update_bread_crumb", resp.data.data.bread_crumb)
                     context.commit("update_branch", resp.data.data.branch)
                     context.commit("update_page_allowed", resp.data.is_page_allowed)
diff --git a/send-to-fo/components/filterfo.vue b/send-to-fo/components/filterfo.vue
new file mode 100644
index 0000000..fe06873
--- /dev/null
+++ b/send-to-fo/components/filterfo.vue
@@ -0,0 +1,97 @@
+<template>
+  <v-card>
+    <v-row class="pa-5">
+      <v-col cols="8">
+        <!-- Baris 1 -->
+        <v-row>
+          <!-- Input Search -->
+          <v-col cols="3" class="">
+            <v-menu v-model="menuDate" :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="formatDate()" :label="$t('message.search.date')"
+                  prepend-inner-icon="mdi-calendar" hide-details readonly density="compact" variant="outlined"
+                  v-bind="props"></v-text-field>
+              </template>
+              <v-date-picker hide-header show-adjacent-months rounded="lg" color="primary" v-model="date"
+                @update:modelValue="menuDate = false"></v-date-picker>
+            </v-menu>
+            <!-- <v-text-field :label="$t('message.search.date')" variant="outlined" density="compact" min-width="auto"
+              hide-details single-line>
+            </v-text-field> -->
+          </v-col>
+          <v-col cols="4" class="">
+            <v-text-field :label="$t('message.search.noReg')" variant="outlined" density="compact" min-width="auto"
+              hide-details single-line>
+            </v-text-field>
+          </v-col>
+          <v-col cols="4" class="">
+            <v-autocomplete :label="$t('message.search.customerGroup')" variant="outlined" density="compact"
+              hide-details menu-icon="mdi-chevron-down"
+              :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"></v-autocomplete>
+            <!-- <v-text-field :label="$t('message.search.customerGroup')" variant="outlined" density="compact"
+              min-width="auto" hide-details single-line>
+            </v-text-field> -->
+          </v-col>
+          <v-col cols="1">
+            <v-btn variant="flat" small style="height: 42px;" class="bg-primary rounded-lg">
+              <v-icon size="x-large">mdi-magnify</v-icon>
+            </v-btn>
+          </v-col>
+
+        </v-row>
+      </v-col>
+
+      <v-col cols="4">
+        <!-- Baris 2 -->
+        <v-row>
+          <!-- Input Search -->
+          <v-spacer></v-spacer>
+          <v-col cols="auto" class="">
+            <v-btn density="default" size='large' color="primary" @click="send">{{ $t('message.send') }}</v-btn>
+          </v-col>
+
+        </v-row>
+      </v-col>
+    </v-row>
+  </v-card>
+</template>
+
+<script type="module">
+export default {
+  name: "FilterFo",
+  data() {
+    return {
+      menuDate: false,
+    };
+  },
+  computed: {
+    date: {
+      get() {
+        return this.$store.state.sendtofo.date;
+      },
+      set(val) {
+        console.log(val)
+        this.$store.commit("sendtofo/setDate", val);
+      },
+    },
+  },
+  methods: {
+    formatDate() {
+      if (!this.date) return null;
+      return moment(this.date).format("DD-MM-YYYY");
+    },
+    deFormatedDate(date) {
+      if (!date) return null;
+
+      const [day, month, year] = date.split("-");
+      return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
+    },
+    send() {
+      console.log("Send Button Clicked");
+    }
+  },
+};
+</script>
+
+<style scoped></style>
diff --git a/send-to-fo/components/main.vue b/send-to-fo/components/main.vue
new file mode 100644
index 0000000..6b01d3a
--- /dev/null
+++ b/send-to-fo/components/main.vue
@@ -0,0 +1,34 @@
+<template class="bg-primary-lighten">
+    <v-app id="inspire">
+        <one-navbar></one-navbar>
+        <v-main class="bg-primary-lighten">
+            <v-row class="ma-5">
+                <v-col cols="12"><filter-fo></filter-fo></v-col>
+                <v-col cols="4"><pasien-component></pasien-component></v-col>
+                <v-col cols="8"><report-component></report-component></v-col>
+            </v-row>
+        </v-main>
+    </v-app>
+</template>
+
+<script type="module">
+import FilterFo from "./filterfo.vue";
+import PasienComponent from "./pasien.vue";
+import ReportComponent from "./report.vue";
+import NavbarComponent from "../../globalcomponent/one-navbar.vue";
+export default {
+    name: "component2",
+    components: {
+        "filter-fo": FilterFo,
+        "one-navbar": NavbarComponent,
+        "pasien-component": PasienComponent,
+        "report-component": ReportComponent,
+    },
+    computed: {
+    },
+    methods: {
+    },
+};
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/send-to-fo/components/pasien.vue b/send-to-fo/components/pasien.vue
new file mode 100644
index 0000000..520b03a
--- /dev/null
+++ b/send-to-fo/components/pasien.vue
@@ -0,0 +1,106 @@
+<template>
+    <div>
+        <v-container class="bg-white rounded-lg" fluid>
+
+            <v-data-table
+                :headers="headers"
+                :items="xpatients"
+                return-object
+                hide-default-footer
+                class="row-pointer"
+            >
+                <template v-slot:top>
+                    <v-toolbar flat class="bg-secondary-lighten rounded-lg">
+                        <v-toolbar-title class="text-black font-weight-bold">{{ $t('message.toolbalTitle') }}</v-toolbar-title>
+                    </v-toolbar>
+                </template>
+
+                <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 v-bind:class="{'bg-primary-lighten':isSelected(item)}" @click="selectMe(item)">
+                        <td>
+                            <div>
+                                <p class="mt-2 mb-2">{{ item.noreg }}</p>
+                                <p class="mb-2" >
+                                    <v-chip label size="small">
+                                    {{ item.orderdate }}
+                                    </v-chip>
+                                </p>
+                            </div>
+                        </td>
+                        <td>
+                            <p>{{ item.name }}</p>
+                        </td>
+                    </tr>
+                </template>
+            </v-data-table>
+        </v-container>
+    </div>
+</template>
+    
+<style scoped>
+    .row-pointer >>> tbody tr :hover {
+        cursor: pointer;
+    }
+</style>
+    
+<script type="module">
+    export default {
+        name: "ListPatient",
+        data() {
+            return {
+                headers: [
+                    {
+                        align: 'start',
+                        key: 'name',
+                        sortable: false,
+                        width: "50%",
+                        title: this.$t('message.tableListPatient.noreg'),
+                        class: "font-weight-bold",
+                    },
+                    { 
+                        align: 'start',
+                        key: 'name', 
+                        sortable: false,
+                        width: "50%",
+                        title: this.$t('message.tableListPatient.name'),
+                        class: "font-weight-bold",
+                    },
+                ],
+            };
+        },
+        computed: {
+            xpatients() {
+                return this.$store.state.sendtofo.patients
+            },
+            selected_patient: {
+                get() {
+                    return this.$store.state.sendtofo.selected_patient
+                },
+                set(val) {
+                    this.$store.commit("sendtofo/setSelectedPatient", val)
+                }
+            }
+        },
+        methods: {
+            isSelected(p) {
+                return p.id == this.$store.state.sendtofo.selected_patient.id
+            },
+            selectMe(data) {
+                this.$store.commit("sendtofo/setSelectedPatient", data)
+                this.$store.commit("sendtofo/setSelectedDetail", data)
+            }
+        },
+        wacth: {
+
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/send-to-fo/components/report.vue b/send-to-fo/components/report.vue
new file mode 100644
index 0000000..a5b3870
--- /dev/null
+++ b/send-to-fo/components/report.vue
@@ -0,0 +1,74 @@
+<template>
+    <v-card>
+        <v-row class="pa-5">
+            <v-col cols="12">
+                <v-row>
+                    <v-spacer></v-spacer>
+                    <v-col cols="auto" class="px-2">
+                        <v-btn variant="tonal" class="text-body-1" @click="selfService">{{
+                            $t('message.report.selfservice') }}</v-btn>
+                    </v-col>
+                    <v-col cols="auto" class="px-2">
+                        <v-btn variant="tonal" class="text-body-1" @click="patientAddress">{{
+                            $t('message.report.patientAddress') }}</v-btn>
+                    </v-col>
+                    <v-col cols="auto" class="px-2">
+                        <v-btn variant="tonal" class="text-body-1" @click="senderAddress">{{
+                            $t('message.report.senderAddress') }}</v-btn>
+                    </v-col>
+                </v-row>
+            </v-col>
+            <v-col cols="12">
+                <v-card-text>
+                    <object style="overflow: hidden;" width="100%" :height="xheight" :data="xurl"></object>
+                </v-card-text>
+                <!-- <v-card-text> -->
+                <!-- <object style="overflow: hidden;" width="100%" :height="xheight" :data="xurl"></object> -->
+                <!-- <one-dialog-print :title="printtitle" :width="printwidth" :height="550" :status="openprintnote"
+                        :urlprint="urlprintnote" @close-dialog-print="openprintnote = false"></one-dialog-print> -->
+
+                <!-- </v-card-text> -->
+                <!-- <v-card-actions>
+                    <v-spacer></v-spacer>
+
+                    <v-btn color="primary" flat onClick="window.location.reload();" @click="savetutup()">
+                        TUTUP
+                    </v-btn>
+                </v-card-actions> -->
+            </v-col>
+        </v-row>
+    </v-card>
+</template>
+
+<script>
+export default {
+    name: "ReportComponent",
+    data() {
+        return {
+            xheight: 800,
+
+            printtitle: '',
+            printwidth: '90%',
+            urlprintnote: '',
+
+            xurl: "http://riau/birt/run?__report=report/one/rekap/executive_summary_mcu_001.rptdesign&__format=pdf&PID=12&username=Administrator"
+        };
+    },
+    methods: {
+        selfService() {
+            // Implementasi fungsi selfService
+            console.log("Self Service button clicked");
+        },
+        patientAddress() {
+            // Implementasi fungsi patientAddress
+            console.log("Patient Address button clicked");
+        },
+        senderAddress() {
+            // Implementasi fungsi senderAddress
+            console.log("Sender Address button clicked");
+        },
+    },
+};
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/send-to-fo/index.html b/send-to-fo/index.html
new file mode 100644
index 0000000..333a487
--- /dev/null
+++ b/send-to-fo/index.html
@@ -0,0 +1,125 @@
+<!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" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- Moment -->
+    <script src="../libraries/moment.js"></script>
+    <!-- Vue.js -->
+    <!-- DEV -->
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <!-- PROD -->
+    <!-- <script src="../libraries/vue3.4.36.global.prod.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 sendtofo from "./modules/sendtofo.js";
+
+      //   if (one_token()) {
+      //     let usr = JSON.parse(localStorage.getItem("user"));
+      //     location.replace("/" + usr.M_UserGroupDashboard);
+      //   }
+      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,
+          sendtofo: sendtofo,
+        },
+      });
+      // 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",
+        "filter-fo": "./components/filterfo.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/send-to-fo/language.js b/send-to-fo/language.js
new file mode 100644
index 0000000..b4ef1ca
--- /dev/null
+++ b/send-to-fo/language.js
@@ -0,0 +1,42 @@
+var CustomMessages = {
+    en: {
+        message: {
+            search:{
+                date: "Tanggal",
+                noReg: "No Reg / Nama",
+                customerGroup: "Kel. Pelanggan",
+            },
+            toolbalTitle: "PASIEN",
+            tableListPatient: {
+                noreg: "NO. REG",
+                name: "NAME",
+            },
+            report:{
+                selfservice: "Ambil Sendiri",
+                patientAddress: "Alamat Pasien",
+                senderAddress: "Alamat Pengirim"
+            },
+            send:"Serahkan",
+        },
+    },
+    id: {
+        message: {
+            search:{
+                date: "Date",
+                noReg: "No Reg / Name",
+                customerGroup: "Customer Group",
+            },
+            toolbalTitle: "PASIEN",
+            tableListPatient: {
+                noreg: "NO. REG",
+                name: "NAMA",
+            },
+            report:{
+                selfservice: "SelfService",
+                patientAddress: "Patient Address",
+                senderAddress: "Sender Address",
+                send: "Send",
+            }
+        },
+    },
+};
\ No newline at end of file
diff --git a/send-to-fo/modules/sendtofo.js b/send-to-fo/modules/sendtofo.js
new file mode 100644
index 0000000..ce84185
--- /dev/null
+++ b/send-to-fo/modules/sendtofo.js
@@ -0,0 +1,55 @@
+
+// const URL = "/westone-api/v1/system/auth";
+// const URL = "https://devcpone.aplikasi.web.id/westone-api/v1/system/auth/";
+
+const store = {
+    namespaced: true,
+    state() {
+        return {
+            date: new Date(),
+            patients: [
+                {
+                    id: 1,
+                    name: "Tn. COCOBA",
+                    noreg: "055000035LA",
+                    orderdate: "01-08-2024 15:02"
+                },
+                {
+                    id: 2,
+                    name: "Ny. LINA MARLINA",
+                    noreg: "055000034LA",
+                    orderdate: "01-08-2024 14:32"
+                },
+                {
+                    id: 3,
+                    name: "Ny. LINA MARLINA",
+                    noreg: "055000034LA",
+                    orderdate: "01-08-2024 14:32"
+                },
+            ],
+            selected_patient: {},
+        };
+    },
+    mutations: {
+        setDate(state, data) {
+            state.date = data
+        },
+        setPatients(state, data)  {
+            state.patients = data
+        },
+        setSelectedPatient(state, data) {
+            state.selected_patient = data
+        },
+        setDetails(state, data) {
+            state.details = data
+        },
+        setSelectedDetail(state, data) {
+            state.selected_detail = data
+        }
+    },
+    actions: {
+
+    }
+};
+
+export default store
\ No newline at end of file