DONE: fix warning and header error

.env.development

@@ -0,0 +1,3 @@
+BASE_URL = http://localhost:8083
+
+VUE_APP_ROOT_URL = http://localhost:8082/api

package.json

@@ -26,7 +26,9 @@
     "primeflex": "^3.2.1",
     "primeicons": "^6.0.1",
     "primevue": "^3.17.0",
+    "sweetalert2": "^11.26.25",
     "v-viewer": "^3.0.11",
+    "viewerjs": "^1.15.2",
     "vue": "^3.2.13",
     "vue-html2pdf": "^1.8.0",
     "vue-router": "^4.0.14",

src/Master.vue

@@ -22,12 +22,12 @@
           odit.</span
         >
       </div>
-      <a class="flex align-items-center ml-2 mr-8">
+      <div class="flex align-items-center ml-2 mr-8">
-        <a class="text-blue" href="#"
+        <a class="text-blue" href="#">
-          ><span class="underline font-bold">Learn More</span></a
+          <span class="underline font-bold">Learn More</span>
-        >
         </a>
       </div>
+    </div>
     <div class="surface-section px-4 py-5 md:px-6 lg:px-8">
       <div class="grid">
         <div class="col-12 md:col-6 lg:col-3">

src/components/list/TheList.vue

@@ -33,7 +33,6 @@
               >
                 {{ data.caw_name }}
               </option>
-              <input type="hidden" />
             </select>
           </div>
           <list-item

src/components/policy/ThePolicy.vue

@@ -3,13 +3,13 @@
     <div class="col-12 lg:col-11 fadein animation-duration-400">
       <Card>
         <template #title>
-          <div class="font-normal">Polisi</div>
+          <div class="font-normal">Panduan</div>
         </template>
         <template #content>
           <TabView>
-            <TabPanel :header="'Panduan E-Rahn Lelong'">
+            <TabPanel :header="'Panduan ArrahnBid'">
               <p>
-                Berikut merupakan video panduan untuk penggunaan E-Rahn Lelong. Sila
+                Berikut merupakan video panduan untuk penggunaan ArrahnBid. Sila
                 tonton
                 <a
                   class="font-bold"
@@ -19,30 +19,8 @@
                 >
                 ini untuk memahami cara penggunaan.
               </p>
-              <div class="lg:flex hidden justify-content-center">
+              <div class="youtube-wrap flex justify-content-center overflow-x-auto">
-                <YouTube v-bind:src="theUrl" />
+                <YouTube :src="theUrl" :width="playerWidth" :height="playerHeight" />
-              </div>
-              <div
-                class="
-                  lg:hidden
-                  md:flex
-                  hidden
-                  overflow-x-auto
-                  justify-content-center
-                "
-              >
-                <YouTube v-bind:src="theUrl" width="480" height="360" />
-              </div>
-              <div
-                class="
-                  lg:hidden
-                  md:hidden
-                  flex
-                  overflow-x-auto
-                  justify-content-center
-                "
-              >
-                <YouTube v-bind:src="theUrl" width="320" height="240" />
               </div>
             </TabPanel>
             <TabPanel :header="'Terma & Syarat'">
@@ -59,12 +37,11 @@
                   "
                 >
                   <div class="col-12 lg:col-5 text-start text-400"><i class="pi pi-phone"></i> Hotline</div>
-                  <div class="col-12 lg:col-6 text-start value-form">097414338</div>
+                  <div class="col-12 lg:col-6 text-start value-form">1300-22-4343</div>
                   <div class="col-12 lg:col-5 text-start text-400"><i class="pi pi-pencil"></i> Emel</div>
-                  <div class="col-12 lg:col-6 text-start value-form">admin@koppkb.com</div>
+                  <div class="col-12 lg:col-6 text-start value-form">arrahncareline@gmail.com</div>
-
+                  <div class="col-12 lg:col-5 text-start text-400"><i class="pi pi-paperclip"></i> Emel</div>
-                  <!-- <div class="col-12 lg:col-5 text-start text-400"><i class="pi pi-paperclip"></i> Emel</div>
+                  <div class="col-12 lg:col-6 text-start value-form">arcc@pkb.net.my</div>
-                  <div class="col-12 lg:col-6 text-start value-form">admin@koppkb.com</div> -->
                 </div>
               </div>
             </TabPanel>
@@ -86,8 +63,32 @@ export default {
   data() {
     return {
       theUrl: "https://www.youtube.com/watch?v=lucYE9bM_PY&t=53s",
+      playerWidth: 640,
+      playerHeight: 360,
     };
   },
+  mounted() {
+    this.updatePlayerSize();
+    window.addEventListener("resize", this.updatePlayerSize);
+  },
+  beforeUnmount() {
+    window.removeEventListener("resize", this.updatePlayerSize);
+  },
+  methods: {
+    updatePlayerSize() {
+      const width = window.innerWidth;
+      if (width < 768) {
+        this.playerWidth = 320;
+        this.playerHeight = 240;
+      } else if (width < 992) {
+        this.playerWidth = 480;
+        this.playerHeight = 360;
+      } else {
+        this.playerWidth = 640;
+        this.playerHeight = 360;
+      }
+    },
+  },
 };
 </script>
 
@@ -98,10 +99,3 @@ export default {
   border-radius: 6px;
 }
 </style>
-
-<!-- export default {
-  components: {
-    "terms-and-conditions-details": TermsAndConditionsDetails,
-  },
-};
-</script> -->

src/interceptors/axios.js

@@ -3,5 +3,4 @@ import axios from "axios";
 const tokenKey = "token";
 axios.defaults.headers.common['X-CSRF-TOKEN'] = tokenKey;
 
-//  axios.defaults.baseURL = process.env.VUE_APP_ROOT_URL;
+axios.defaults.baseURL = process.env.VUE_APP_ROOT_URL;
-  axios.defaults.baseURL = 'https://adminlelong.erahn.com.my/api';

src/main.js

@@ -4,15 +4,13 @@ import Master from './Master.vue'
 import router from './router'
 // import useVuelidate from '@vuelidate/core'
 import './interceptors/axios'
-import "bootstrap/dist/css/bootstrap.css"
+import './styles/primevue-bootstrap.css'
 import "bootstrap/dist/js/bootstrap.js"
 import 'bootstrap-icons/font/bootstrap-icons.css'
 import VueSweetalert2 from 'vue-sweetalert2';
 import 'sweetalert2/dist/sweetalert2.min.css';
 import PrimeVue from 'primevue/config';
 
-import '../public/themes/lara-light-blue/theme.css'
-import 'primevue/resources/primevue.min.css'
 import 'primeicons/primeicons.css'
 import 'primeflex/primeflex.css'
 import ToastService from 'primevue/toastservice';

src/styles/primevue-bootstrap.css

@@ -0,0 +1,13 @@
+/*
+  PrimeVue 3.4x+ ships component structure CSS inside the theme under @layer primevue.
+  Unlayered Bootstrap would otherwise override those rules (e.g. TabView becomes a bullet list).
+*/
+@layer bootstrap, primevue;
+
+@import "bootstrap/dist/css/bootstrap.css" layer(bootstrap);
+@import "primevue/resources/themes/lara-light-blue/theme.css";
+
+:root {
+  --primary-color: #2f68c5;
+  --primary-color-text: #ffffff;
+}