add the popUp invalid token

src/lib/component/AddProducts.svelte

@@ -17,12 +17,13 @@
 	let kitchenNote = '';
 	let showKitchenNoteModal = false;
 	let selectedProduct = [];
-	localStorage.setItem('typePage', 'false');
+
 	if (browser) {
 		token = localStorage.getItem('token');
 		company = Number(localStorage.getItem('company'));
 		orderId = Number(localStorage.getItem('order'));
 		tableIdNum = localStorage.getItem('table');
+		localStorage.setItem('typePage', 'false');
 	}
 
 	let selectedCategory = null;
@@ -155,6 +156,9 @@
 					headers: myHeaders,
 					body: JSON.stringify(payload)
 				});
+				if (response.status == '401') {
+					console.log('ativa o popup');
+				}
 				if (!response.ok) {
 					success = false;
 					console.error('Erro ao enviar item para cozinha:', response.statusText);

src/lib/component/Commands.svelte

@@ -18,8 +18,9 @@
 		userId = localStorage.getItem('user');
 		tableId = Number(localStorage.getItem('table'));
 		flag = localStorage.getItem('flag');
+		localStorage.setItem('typePage', 'false');
 	}
-	localStorage.setItem('typePage', 'false');
+
 	let orders = [];
 	let isCreatingOrder = false;
 	let customerName = '';

src/lib/component/DashBoardGuard.svelte

@@ -3,10 +3,40 @@
 	import { goto } from '$app/navigation';
 	let autorizado = false;
 	import { browser } from '$app/environment';
+	import { tokenValidation } from '$lib/utils/store';
 	let flag = null;
+	let token = null;
+	let company = null;
 
 	if (browser) {
 		flag = localStorage.getItem('flag');
+		token = localStorage.getItem('token');
+		company = Number(localStorage.getItem('company'));
+	}
+
+	function fetchUsers() {
+		const token = localStorage.getItem('token');
+		const company = parseInt(localStorage.getItem('company'), 10);
+
+		fetch('https://dev2.mixtech.dev.br/user/get', {
+			method: 'POST',
+			headers: {
+				Authorization: `Bearer ${token}`,
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({ company_id: company })
+		})
+			.then((response) => {
+				if (!response.ok) {
+					console.error(`Erro HTTP: ${response.status}`);
+					if (response.status === 401) {
+						tokenValidation.set(true);
+					}
+				}
+			})
+			.catch((error) => {
+				console.error('Erro de rede ou requisição:', error);
+			});
 	}
 
 	onMount(async () => {
@@ -15,6 +45,9 @@
 		} else {
 			autorizado = true;
 		}
+		setInterval(() => {
+			fetchUsers();
+		}, 5000);
 	});
 </script>
 

src/lib/component/EndCommand.svelte

@@ -19,9 +19,9 @@
 		token = localStorage.getItem('token');
 		company = Number(localStorage.getItem('company'));
 		orderId = Number(localStorage.getItem('order'));
+		localStorage.setItem('typePage', 'false');
 		tableIdNum = localStorage.getItem('table');
 	}
-	localStorage.setItem('typePage', 'false');
 	let selectedCategory = null;
 	let isPaymentModalOpen = false;
 	let itemsOnKitchen = false;

src/lib/component/Kitchen.svelte

@@ -12,7 +12,7 @@
 	let mostrarHistorico = false;
 	let oldData = 0;
 	let hostname = '';
-	localStorage.setItem('typePage', 'false');
+
 	if (browser) {
 		token = localStorage.getItem('token');
 		company = Number(localStorage.getItem('company'));

src/lib/component/Mananger.svelte

@@ -7,10 +7,11 @@
 
 	let token = null;
 	let company = null;
-	localStorage.setItem('typePage', 'false');
+
 	if (browser) {
 		token = localStorage.getItem('token');
 		company = Number(localStorage.getItem('company'));
+		localStorage.setItem('typePage', 'false');
 	}
 
 	let users = [];

src/lib/component/Menu.svelte

@@ -10,9 +10,10 @@
 	let company = null;
 	let categories = [];
 	let products = [];
-	localStorage.setItem('typePage', 'false');
+
 	if (browser) {
 		token = localStorage.getItem('token');
+		localStorage.setItem('typePage', 'false');
 	}
 
 	function filtrarCategoria(categoria) {

src/lib/component/PopUp.svelte

@@ -0,0 +1,28 @@
+<script>
+	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
+	import { tokenValidation } from '$lib/utils/store';
+
+	$: showPopup = $tokenValidation;
+
+	function returnLogin() {
+		goto('/login');
+	}
+</script>
+
+{#if showPopup}
+	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+		<div class="w-full max-w-md space-y-6 rounded-2xl bg-white p-8 text-center shadow-lg">
+			<h1 class="text-xl font-semibold text-gray-800">Token expirado</h1>
+			<p class="text-gray-600">
+				Sua sessão expirou. Retorne ao login para realizar a validação novamente.
+			</p>
+			<button
+				onclick={returnLogin}
+				class="rounded-lg bg-red-400 px-6 py-2 text-white transition duration-300 hover:bg-red-600"
+			>
+				Voltar ao login
+			</button>
+		</div>
+	</div>
+{/if}

src/lib/component/Product.svelte

@@ -13,8 +13,8 @@
 	if (browser) {
 		token = localStorage.getItem('token');
 		company = Number(localStorage.getItem('company'));
+		localStorage.setItem('typePage', 'false');
 	}
-	localStorage.setItem('typePage', 'false');
 	let products = [];
 	let categories = [];
 

src/lib/component/Report.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { onMount } from 'svelte';
 	import { browser } from '$app/environment';
-	localStorage.setItem('typePage', 'false');
+
 	let sales = [];
 	let dateFilter = '';
 	let paymentMethodFilter = '';
@@ -22,6 +22,7 @@
 		token = localStorage.getItem('token');
 		company = Number(localStorage.getItem('company'));
 		orderId = Number(localStorage.getItem('order'));
+		localStorage.setItem('typePage', 'false');
 	}
 
 	onMount(async () => {

src/lib/component/Tables.svelte

@@ -8,11 +8,12 @@
 	let flag = null;
 	let orders = {};
 	let tableHasOrders = {};
-	localStorage.setItem('typePage', 'false');
+
 	if (browser) {
 		token = localStorage.getItem('token');
 		company = Number(localStorage.getItem('company'));
 		flag = localStorage.getItem('flag');
+		localStorage.setItem('typePage', 'false');
 	}
 
 	const statusMap = {

src/lib/utils/store.js

@@ -4,3 +4,4 @@ export const userFlag = writable('');
 export const logo_id = writable('');
 export const companyName_id = writable('');
 export const typePage = writable('');
+export const tokenValidation = writable(false);

src/routes/dashboard/addproducts/+page.svelte

@@ -2,9 +2,11 @@
 	import AddProducts from '$lib/component/AddProducts.svelte';
 	import SideBar from '$lib/layout/SideBar.svelte';
 	import DashBoardGuard from '$lib/component/DashBoardGuard.svelte';
+	import PopUp from '$lib/component/PopUp.svelte';
 </script>
 
 <DashBoardGuard>
+	<PopUp />
 	<SideBar>
 		<AddProducts />
 	</SideBar>

src/routes/dashboard/commands/+page.svelte

@@ -2,9 +2,11 @@
 	import Commands from '$lib/component/Commands.svelte';
 	import SideBar from '$lib/layout/SideBar.svelte';
 	import DashBoardGuard from '$lib/component/DashBoardGuard.svelte';
+	import PopUp from '$lib/component/PopUp.svelte';
 </script>
 
 <DashBoardGuard>
+	<PopUp />
 	<SideBar>
 		<Commands />
 	</SideBar>

src/routes/dashboard/endcommand/+page.svelte

@@ -2,9 +2,11 @@
 	import EndCommand from '$lib/component/EndCommand.svelte';
 	import SideBar from '$lib/layout/SideBar.svelte';
 	import DashBoardGuard from '$lib/component/DashBoardGuard.svelte';
+	import PopUp from '$lib/component/PopUp.svelte';
 </script>
 
 <DashBoardGuard>
+	<PopUp />
 	<SideBar>
 		<EndCommand />
 	</SideBar>

src/routes/dashboard/kitchen/+page.svelte

@@ -2,9 +2,11 @@
 	import DashBoardGuard from '$lib/component/DashBoardGuard.svelte';
 	import SideBar from '$lib/layout/SideBar.svelte';
 	import Kitchen from '$lib/component/Kitchen.svelte';
+	import PopUp from '$lib/component/PopUp.svelte';
 </script>
 
 <DashBoardGuard>
+	<PopUp />
 	<SideBar>
 		<Kitchen />
 	</SideBar>

src/routes/dashboard/mananger/+page.svelte

@@ -2,9 +2,11 @@
 	import SideBar from '$lib/layout/SideBar.svelte';
 	import Mananger from '$lib/component/Mananger.svelte';
 	import DashBoardGuard from '$lib/component/DashBoardGuard.svelte';
+	import PopUp from '$lib/component/PopUp.svelte';
 </script>
 
 <DashBoardGuard>
+	<PopUp />
 	<SideBar>
 		<Mananger />
 	</SideBar>

src/routes/dashboard/products/+page.svelte

@@ -1,10 +1,12 @@
 <script>
 	import Product from '$lib/component/Product.svelte';
 	import SideBar from '$lib/layout/SideBar.svelte';
+	import PopUp from '$lib/component/PopUp.svelte';
 	import DashBoardGuard from '$lib/component/DashBoardGuard.svelte';
 </script>
 
 <DashBoardGuard>
+	<PopUp />
 	<SideBar>
 		<Product />
 	</SideBar>

src/routes/dashboard/reports/+page.svelte

@@ -2,9 +2,11 @@
 	import SideBar from '$lib/layout/SideBar.svelte';
 	import DashBoardGuard from '$lib/component/DashBoardGuard.svelte';
 	import Report from '$lib/component/Report.svelte';
+	import PopUp from '$lib/component/PopUp.svelte';
 </script>
 
 <DashBoardGuard>
+	<PopUp />
 	<SideBar>
 		<Report />
 	</SideBar>

src/routes/dashboard/tables/+page.svelte

@@ -2,9 +2,11 @@
 	import SideBar from '$lib/layout/SideBar.svelte';
 	import DashBoardGuard from '$lib/component/DashBoardGuard.svelte';
 	import Tables from '$lib/component/Tables.svelte';
+	import PopUp from '$lib/component/PopUp.svelte';
 </script>
 
 <DashBoardGuard>
+	<PopUp />
 	<SideBar>
 		<Tables />
 	</SideBar>