diff --git a/specimen-collection/components/filter.vue b/specimen-collection/components/filter.vue
index 8e024d9..e77ae44 100644
--- a/specimen-collection/components/filter.vue
+++ b/specimen-collection/components/filter.vue
@@ -14,7 +14,7 @@
                         <template v-slot:activator="{ props }">
                             <v-text-field
                                 :model-value="formatDate()"
-                                label="Tanggal"
+                                :label="$t('message.filter.date')"
                                 prepend-inner-icon="mdi-calendar"
                                 hide-details
                                 readonly
@@ -34,7 +34,7 @@
                 </v-col>
                 <v-col cols="2.2">
                     <v-text-field
-                        label="No Reg / Nama"
+                        :label="$t('message.filter.noreg')"
                         variant="outlined"
                         hide-details
                         append-inner-icon="mdi-magnify"
@@ -42,29 +42,29 @@
                 </v-col>
                 <v-col cols="2.2">
                     <v-autocomplete
-                        label="Kel Pelanggan"
+                        :label="$t('message.filter.group')"
                         variant="outlined"
                         hide-details
                         menu-icon="mdi-chevron-down"
-                        :items="['lorem', 'ipsum', 'dolor', 'is', 'amet']"
+                        :items="temp_dropdown"
                     ></v-autocomplete>
                 </v-col>
                 <v-col cols="2.2">
                     <v-autocomplete
-                        label="Station"
+                        :label="$t('message.filter.station')"
                         variant="outlined"
                         hide-details
                         menu-icon="mdi-chevron-down"
-                        :items="['lorem', 'ipsum', 'dolor', 'is', 'amet']"
+                        :items="temp_dropdown"
                     ></v-autocomplete>
                 </v-col>
                 <v-col cols="2.2">
                     <v-autocomplete
-                        label="Lokasi"
+                        :label="$t('message.filter.location')"
                         variant="outlined"
                         hide-details
                         menu-icon="mdi-chevron-down"
-                        :items="['lorem', 'ipsum', 'dolor', 'is', 'amet']"
+                        :items="temp_dropdown"
                     ></v-autocomplete>
                 </v-col>
                 <v-col cols="1">
@@ -98,8 +98,18 @@
         },
         computed: {
             date: {
-
+                get() {
+                    return this.$store.state.collection.date;
+                },
+                set(val) {
+                    this.$store.commit("collection/setDate", val);
+                }
             },
+            temp_dropdown: {
+                get() {
+                    return this.$store.state.collection.temp_dropdown;
+                },
+            }
         },
         methods: {
             formatDate() {
@@ -107,6 +117,11 @@
 
                 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")}`;
+            }
         },
     };
 </script>
diff --git a/specimen-collection/components/left.vue b/specimen-collection/components/left.vue
index d67566d..951bc3f 100644
--- a/specimen-collection/components/left.vue
+++ b/specimen-collection/components/left.vue
@@ -2,7 +2,7 @@
     <div>
         <v-container class="bg-white rounded-lg" fluid>
             <div class="bg-secondary-lighten rounded-lg pa-5 mb-5">
-                <h3 class="primary-lighten">PASIEN</h3>
+                <h3 class="primary-lighten">{{ $t('message.tablePatient.title') }}</h3>
             </div>
             <v-data-table
                 v-model="selected_patients"
@@ -49,7 +49,15 @@ export default {
             selectedItems: [],
             headers: [
                 {
-                    title: "TANGGAL",
+                    title: this.$t('message.tablePatient.date'),
+                    align: "start",
+                    sortable: false,
+                    key: "name",
+                    width: "15%",
+                    class: "font-weight-bold",
+                },
+                {
+                    title: this.$t('message.tablePatient.noreg'),
                     align: "start",
                     sortable: false,
                     key: "name",
@@ -57,35 +65,27 @@ export default {
                     class: "font-weight-bold",
                 },
                 {
-                    title: "NO. REG",
+                    title: this.$t('message.tablePatient.group'),
                     align: "start",
                     sortable: false,
                     key: "name",
-                    width: "20%",
+                    width: "25%",
                     class: "font-weight-bold",
                 },
                 {
-                    title: "KEL. PELANGGAN",
+                    title: this.$t('message.tablePatient.name'),
                     align: "start",
                     sortable: false,
                     key: "name",
-                    width: "20%",
+                    width: "25%",
                     class: "font-weight-bold",
                 },
                 {
-                    title: "NAMA",
+                    title: this.$t('message.tablePatient.status'),
                     align: "start",
                     sortable: false,
                     key: "name",
-                    width: "20%",
-                    class: "font-weight-bold",
-                },
-                {
-                    title: "STATUS",
-                    align: "start",
-                    sortable: false,
-                    key: "name",
-                    width: "20%",
+                    width: "15%",
                     class: "font-weight-bold",
                 },
             ],
@@ -93,20 +93,21 @@ export default {
     },
     computed: {
         patients() {
-            return this.$store.state.collection.patients
+            return this.$store.state.collection.patients;
         },
         selected_patients: {
             get() {
-                return this.$store.state.collection.selected_patients
+                return this.$store.state.collection.selected_patients;
             },
             set(data) {
-                this.$store.commit("setSelectedPatients", data)
+                this.$store.commit("setSelectedPatients", data);
             }
         }
     },
     methods: {
         selectItem(data) {
-            this.$store.commit("setSelectedPatients", data);
+            // this.$store.commit("setSelectedPatients", data);
+            this.selected_patients = data;
         },
         isItemSelected(data) {
             return data.noreg === this.$store.state.collection.selected_patients.noreg
diff --git a/specimen-collection/components/right.vue b/specimen-collection/components/right.vue
index 100a384..3b4f885 100644
--- a/specimen-collection/components/right.vue
+++ b/specimen-collection/components/right.vue
@@ -26,12 +26,12 @@
                         <div
                             style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
                             class="rounded-lg bg-secondary-lighten pa-2 pointer"
+                            @click="setCall(selected)"
                         >
                             <iconify-icon
                                 class="text-secondary-darken"
                                 style="font-size: 1.5rem;"
-                                icon="fluent:speaker-2-24-regular"
-                                icon="fluent:arrow-sync-24-regular"
+                                :icon="setIconCall(selected.status)"
                             ></iconify-icon>
                         </div>
                     </v-col>
@@ -41,7 +41,7 @@
                         <p class="font-weight-medium">PID</p>
                     </v-col>
                     <v-col cols="2" class="text-end">
-                        <p class="font-weight-medium" style="color: slategray;">asd</p>
+                        <p class="font-weight-medium" style="color: slategray;">-</p>
                     </v-col>
                 </v-row>
                 <v-row no-gutters>
@@ -61,7 +61,7 @@
             <div class="bg-secondary-lighten rounded-lg pa-5 mb-5">
                 <v-row>
                     <v-col cols="10" align-self="center">
-                        <h3 class="primary-lighten">STAF: NOVITA</h3>
+                        <h3 class="primary-lighten">{{ $t('message.tableDetail.title') }}: {{ details.staff }}</h3>
                     </v-col>
                     <v-col cols="2" align-self="center" class="d-flex justify-end">
                         <div
@@ -88,7 +88,7 @@
                 </v-row>
             </div>
             <v-data-table
-                :items="items"
+                :items="details.specimen"
                 :headers="headers"
                 hide-default-footer
             >
@@ -139,18 +139,15 @@
                 </template>
             </v-data-table>
             <div class="ml-3">
-                <v-chip class="mr-5 mt-2" color="primary">DARAH</v-chip>
-                <v-chip class="mr-5 mt-2" color="primary">SWAB/SEKRET</v-chip>
+                <v-chip v-for="y in details.jenis" class="mr-2 mt-2" color="primary">{{  y }}</v-chip>
             </div>
         </v-container>
         <v-container class="bg-white rounded-lg mt-5" fluid>
             <div class="bg-secondary-lighten rounded-lg pa-5">
-                <h3 class="primary-lighten">PEMERIKSAAN</h3>
+                <h3 class="primary-lighten">{{ $t('message.examination') }}</h3>
             </div>
             <div>
-                <v-chip class="mr-5 mt-5" color="success">Hematologi Lengkap</v-chip>
-                <v-chip class="mr-5 mt-5" color="success">Golongan Darah Rhesus</v-chip>
-                <v-chip class="mr-5 mt-5" color="success">Kultur Usap Tenggorok (Vitek)</v-chip>
+                <v-chip v-for="x in pemeriksaan" class="mt-5 mr-2" color="success">{{ x }}</v-chip>
             </div>
         </v-container>
     </div>
@@ -167,19 +164,9 @@
             return {
                 menu: false,
                 visible: false,
-                items: [
-                    {
-                        specimen: "EDTA Rutin",
-                        barcode: "055000035LSE1A",
-                    },
-                    {
-                        specimen: "EDTA Rutin",
-                        barcode: "0550000AA223FF",
-                    },
-                ],
                 headers: [
                     {
-                        title: "SPECIMEN",
+                        title: this.$t('message.tableDetail.speciment'),
                         align: "start",
                         sortable: false,
                         key: "name",
@@ -187,7 +174,7 @@
                         class: "font-weight-bold",
                     },
                     {
-                        title: "BARCODE",
+                        title: this.$t('message.tableDetail.barcode'),
                         align: "start",
                         sortable: false,
                         key: "name",
@@ -195,7 +182,7 @@
                         class: "font-weight-bold",
                     },
                     {
-                        title: "REQUIREMENT",
+                        title: this.$t('message.tableDetail.requirement'),
                         align: "center",
                         sortable: false,
                         key: "name",
@@ -203,7 +190,7 @@
                         class: "font-weight-bold",
                     },
                     {
-                        title: "AKSI",
+                        title: this.$t('message.tableDetail.action'),
                         align: "center",
                         sortable: false,
                         key: "name",
@@ -214,12 +201,36 @@
             };
         },
         computed: {
-            selected() {
-                return this.$store.state.collection.selected_patients;
+            selected: {
+                get() {
+                    return this.$store.state.collection.selected_patients;
+                },
+                set(data) {
+                    this.$store.commit("setSelectedPatients", data);
+                }
+            },
+            details: {
+                get() {
+                    return this.$store.state.collection.details;
+                }
+            },
+            pemeriksaan() {
+                return this.$store.state.collection.pemeriksaan;
             }
         },
         methods: {
-
+            setIconCall(status) {
+                switch (status.toLowerCase()) {
+                    case "call":
+                        return "fluent:arrow-sync-24-regular";
+                    default:
+                        return "fluent:speaker-2-24-regular";
+                }
+            },
+            setCall(data) {
+                data.status = "Call";
+                this.selected = data;
+            }
         },
     }
 </script>
diff --git a/specimen-collection/language.js b/specimen-collection/language.js
index b3b6368..cdf32a9 100644
--- a/specimen-collection/language.js
+++ b/specimen-collection/language.js
@@ -1,32 +1,56 @@
 var CustomMessages = {
     en: {
         message: {
-            login: "Log in",
-            title: "Log in to your account",
-            sublogin: "Enter your details below",
-            email: "Email",
-            password: "Password",
-            forgotPassword: "Forgot password?",
-            placeholderEmail: "Enter your email",
-            placeholderPassword: "Enter your password",
-            msgInfo: 'Enter the registered account',
-            errorQuery: "Error get data",
-            invalid: "Invalid username / password"
+            filter: {
+                date: "Date",
+                noreg: "No. Reg / Name",
+                group: "Customer Group",
+                station: "Station",
+                location: "Location",
+            },
+            tablePatient: {
+                title: "PATIENT",
+                date: "DATE",
+                noreg: "NO. REG",
+                group: "CUSTOMER GROUP",
+                name: "NAME",
+                status: "STATUS"
+            },
+            tableDetail: {
+                title: "STAFF",
+                speciment: "SPECIMENT",
+                barcode: "BARCODE",
+                requirement: "REQUIREMENT",
+                action: "ACTION"
+            },
+            examination: "EXAMINATION"
         },
     },
     id: {
         message: {
-            login: "Masuk",
-            title: "Masuk ke akun Anda",
-            sublogin: "Masukkan detail Anda di bawah ini",
-            email: "Surel",
-            password: "Kata Sandi",
-            forgotPassword: "Lupa kata sandi?",
-            placeholderEmail: "Isikan email anda",
-            placeholderPassword: "Isikan kata sandi anda",
-            msgInfo: "Masukkan akun terdaftar",
-            errorQuery: "Gagal mendapatkan data",
-            invalid: "Nama pengguna / kata sandi tidak valid"
+            filter: {
+                date: "Tanggal",
+                noreg: "No. Reg / Nama",
+                group: "Kel. Pelanggan",
+                station: "Station",
+                location: "Lokasi",
+            },
+            tablePatient: {
+                title: "PASIEN",
+                date: "TANGGAL",
+                noreg: "NO. REG",
+                group: "KEL. PELANGGAN",
+                name: "NAMA",
+                status: "STATUS"
+            },
+            tableDetail: {
+                title: "STAF",
+                speciment: "SPECIMEN",
+                barcode: "BARCODE",
+                requirement: "PRASYARAT",
+                action: "AKSI"
+            },
+            examination: "PEMERIKSAAN"
         },
     },
 };
\ No newline at end of file
diff --git a/specimen-collection/modules/collection.js b/specimen-collection/modules/collection.js
index 4c4e9cf..dd81ea7 100644
--- a/specimen-collection/modules/collection.js
+++ b/specimen-collection/modules/collection.js
@@ -1,13 +1,15 @@
 const store = {
     state() {
         return {
+            date: new Date(),
+            temp_dropdown: ["Lorem", "ipsum", "dolor", "sit", "amet"],
             patients: [
                 {
                     tanggal: "31-07-2024",
                     noreg: "055000037LA",
                     kelpelanggan: "PASIEN MANDIRI",
                     nama: "Tn. Alpha",
-                    status: "call",
+                    status: "New",
                 },
                 {
                     tanggal: "31-07-2024",
@@ -31,6 +33,24 @@ const store = {
                 nama: "-",
                 status: "-",
             },
+            details: {
+                staff: "NOVITA",
+                specimen: [
+                    {
+                        specimen: "EDTA Rutin",
+                        barcode: "055000035LSE1A",
+                    },
+                    {
+                        specimen: "EDTA Rutin",
+                        barcode: "0550000AA223FF",
+                    },
+                ],
+                jenis: ["DARAH", "SWAB/SEKRET" ]
+            },
+
+            pemeriksaan: [
+                "Hematologi Lengkap", "Golongan Darah Rhesus", "Kultur Usap Tenggorokan (Vitek)",
+            ]
         };
     },
     mutations: {
@@ -40,11 +60,12 @@ const store = {
         setSelectedPatients(state, data) {
             state.selected_patients = data
         },
+        setDate(state, date) {
+            state.date = date;
+        }
     },
     actions: {
-        selectPatient({ commit, data }) {
-            commit('setSelectedPatients', data);
-        }
+
     }
 }