setup for deploying in lan, upgrade dashboard

package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host 192.168.1.41",
     "build": "vite build",
     "preview": "vite preview"
   },

src/api.js

@@ -2,7 +2,7 @@ import axios from 'axios';
 import Cookies from 'js-cookie';
 
 const api = axios.create({
-  baseURL: 'http://127.0.0.1:8000/api',
+  baseURL: 'http://192.168.1.41:8000/api',
   timeout: 2500,
   withCredentials: true,
 });
@@ -13,8 +13,8 @@ export const createUser = async (userData) => {
 
     Cookies.set('access_token', accessToken,{
         expires: 1,
-        secure: true,
-        sameSite: 'strict',
+        secure: false,
+        sameSite: 'lax',
     });
     return response.data
 };
@@ -24,8 +24,8 @@ export const loginUser = async (userData) => {
     const accessToken = response.data.access;
     Cookies.set('access_token', accessToken,{
         expires: 1,
-        secure: true,
-        sameSite: 'strict',
+        secure: false,
+        sameSite: 'lax',
     });
     return response.data;
 };

src/views/Dashboard.vue

@@ -3,7 +3,9 @@ import { ref, onMounted} from 'vue';
 import Chart from 'primevue/chart';
 import Fieldset from 'primevue/fieldset';
 import MeterGroup from 'primevue/metergroup';
+import Carousel from 'primevue/carousel';
 import { getProducts,getWarehouses } from '../api.js';
+import Tag from 'primevue/tag';
 
 const products = ref();
 const warehouses = ref();
@@ -18,6 +20,7 @@ const colorsSchemes = [
 ];
 
 const getProductValues = (warehouse) => {
+    if (!products.value) return [];
     return products.value
         .filter(product => product.warehouses.includes(warehouse.id))
         .map(product => ({
@@ -66,4 +69,26 @@ onMounted(async () => {
             </li>
         </ul>
     </Fieldset>
+    <Fieldset legend="Products" style="max-width: 600px; margin: auto; padding:20px" toggleable>
+        <Carousel :value="products" 
+        :numVisible="3" 
+        :numScroll="1" 
+        >
+            <template #item="slotProps">
+                <span v-if="slotProps.data.alert_enabled && slotProps.data.is_stock_low" style="color:red">
+                    <Tag severity="danger" value="STOCK FAIBLE" rounded> </Tag>
+                </span>
+                <span v-else>
+                    <Tag severity="info" value="STOCK OK" rounded> </Tag>
+                </span>
+                <p>{{ slotProps.data.name }}</p>
+                <p>{{ slotProps.data.quantity }}</p>
+                <img :src="slotProps.data.image" alt="" style="border-radius: 8px; width: 150px;">
+            </template>
+        </Carousel>
+    </Fieldset>
+    <Fieldset legend="Warehouses" style="max-width: 600px; margin: auto; padding:20px" toggleable>
+
+        
+    </Fieldset>
 </template>