finished the product table(falta adicionar mensagens de erro e tirar os consoles.log) add tables Mananger add the endpoints

src/lib/assets/cancel_icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ff3333"><path d="m336-280-56-56 144-144-144-143 56-56 144 144 143-144 56 56-144 143 144 144-56 56-143-144-144 144Z"/></svg>

src/lib/assets/check_icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#2eff3c"><path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>

src/lib/assets/edit_icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5985E1"><path d="M560-80v-123l221-220q9-9 20-13t22-4q12 0 23 4.5t20 13.5l37 37q8 9 12.5 20t4.5 22q0 11-4 22.5T903-300L683-80H560Zm300-263-37-37 37 37ZM620-140h38l121-122-18-19-19-18-122 121v38ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v120h-80v-80H520v-200H240v640h240v80H240Zm280-400Zm241 199-19-18 37 37-18-19Z"/></svg>

src/lib/component/Mananger.svelte

@@ -3,58 +3,137 @@
 	import add_icon from '$lib/assets/add_icon.svg';
 	import save_icon from '$lib/assets/save_icon.svg';
 	import trash_icon from '$lib/assets/trash_icon.svg';
+	import { browser } from '$app/environment';
+
+	let token = null;
+	let company = null;
+
+	if (browser) {
+		token = localStorage.getItem('token');
+		company = Number(localStorage.getItem('company'));
+	}
 
 	let users = [];
 	let isAddingUser = false;
 	let newUserForm = {
 		name: '',
 		username: '',
-		email: ''
+		email: '',
+		password: '',
+		role_id: 1
 	};
 
 	function resetUserForm() {
 		newUserForm = {
 			name: '',
 			username: '',
-			email: ''
+			email: '',
+			password: '',
+			role_id: 1
 		};
 		isAddingUser = false;
 	}
 
-	function handleAddUser(event) {
+	async function handleAddUser(event) {
 		event.preventDefault();
 
-		if (!newUserForm.name || !newUserForm.username || !newUserForm.email) {
+		if (!newUserForm.name || !newUserForm.username || !newUserForm.email || !newUserForm.password) {
 			console.error('Preencha todos os campos corretamente');
 			return;
 		}
 
-		const newUser = {
-			id: Date.now(),
-			...newUserForm
+		const token = localStorage.getItem('token');
+		const company = parseInt(localStorage.getItem('company'), 10);
+
+		const requestOptions = {
+			method: 'POST',
+			headers: {
+				Authorization: `Bearer ${token}`,
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({
+				username: newUserForm.username,
+				email: newUserForm.email,
+				password: newUserForm.password,
+				company_id: company,
+				role_id: Number(newUserForm.role_id)
+			}),
+			redirect: 'follow'
 		};
-		users = [...users, newUser];
-		console.log('Usuário criado com sucesso!');
 
-		resetUserForm();
+		try {
+			const response = await fetch('https://dev2.mixtech.dev.br/register', requestOptions);
+			const result = await response.json();
+
+			if (result.status === 'ok') {
+				console.log('Usuário criado com sucesso!');
+				resetUserForm();
+				location.reload();
+			} else {
+				console.error('Erro ao criar usuário:', result.msg || result);
+			}
+		} catch (error) {
+			console.error('Erro de rede ao criar usuário:', error);
+		}
 	}
 
-	function handleDeleteUser(id) {
-		users = users.filter((u) => u.id !== id);
+	async function handleDeleteUser(userName) {
+		const token = localStorage.getItem('token');
+
+		const myHeaders = new Headers();
+		myHeaders.append('Authorization', `Bearer ${token}`);
+		myHeaders.append('Content-Type', 'application/json');
+
+		const raw = JSON.stringify({
+			user_name: userName,
+			company_id: company
+		});
+
+		const requestOptions = {
+			method: 'POST',
+			headers: myHeaders,
+			body: raw,
+			redirect: 'follow'
+		};
+
+		try {
+			const response = await fetch('https://dev2.mixtech.dev.br/user/delete', requestOptions);
+			const result = await response.json();
+
+			if (result.status === 'ok') {
+				users = users.filter((u) => u.name !== userName);
+				console.log('Usuário deletado com sucesso!');
+			} else {
+				console.error('Erro ao deletar usuário:', result.msg || result);
+			}
+		} catch (error) {
+			console.error('Erro na requisição de deleção:', error);
+		}
 	}
 
 	onMount(() => {
-		fetch('https://fakestoreapi.com/users')
+		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) => response.json())
 			.then((data) => {
-				users = data.map((item) => ({
-					id: item.id,
-					name: `${item.name.firstname} ${item.name.lastname}`,
-					username: item.username,
-					email: item.email
+				console.log(data);
+				users = data.data.map((item) => ({
+					id: item.user_id,
+					name: item.user_name,
+					email: item.user_email,
+					role: item.role_id
 				}));
 			})
-			.catch((error) => console.error(error));
+			.catch((error) => console.error('Erro ao buscar usuários:', error));
 	});
 </script>
 
@@ -74,9 +153,9 @@
 			<table class="w-full divide-y divide-gray-700">
 				<thead class="bg-gray-700">
 					<tr>
-						<th class="px-6 py-3 text-left text-sm font-semibold text-gray-300">Nome</th>
 						<th class="px-6 py-3 text-left text-sm font-semibold text-gray-300">Username</th>
 						<th class="px-6 py-3 text-left text-sm font-semibold text-gray-300">Email</th>
+						<th class="px-6 py-3 text-left text-sm font-semibold text-gray-300">Cargo</th>
 						<th class="px-6 py-3 text-left text-sm font-semibold text-gray-300">Ações</th>
 					</tr>
 				</thead>
@@ -89,11 +168,21 @@
 						{#each users as user}
 							<tr class="hover:bg-gray-900">
 								<td class="px-6 py-4 text-sm text-white">{user.name}</td>
-								<td class="px-6 py-4 text-sm text-white">{user.username}</td>
 								<td class="px-6 py-4 text-sm text-white">{user.email}</td>
+								<td class="px-6 py-4 text-sm text-white"
+									>{#if user.role === 1}
+										Admin
+									{:else if user.role === 2}
+										Garçom
+									{:else if user.role === 3}
+										Cozinha
+									{:else if user.role === 4}
+										Caixa
+									{/if}</td
+								>
 								<td class="px-6 py-4">
 									<button
-										on:click={() => handleDeleteUser(user.id)}
+										on:click={() => handleDeleteUser(user.name)}
 										class="rounded-lg p-1.5 text-red-400 hover:bg-red-900/20"
 									>
 										<img src={trash_icon} alt="Deletar" class="h-4 w-4" />
@@ -137,6 +226,26 @@
 						placeholder="Ex: john@example.com"
 					/>
 				</div>
+				<div>
+					<p class="mb-1 block text-sm text-gray-400">Senha</p>
+					<input
+						type="password"
+						bind:value={newUserForm.password}
+						class="w-full rounded-md border border-gray-600 bg-gray-700 px-3 py-2 focus:ring-emerald-500"
+						placeholder="Digite a senha"
+					/>
+				</div>
+				<div>
+					<p class="mb-1 block text-sm text-gray-400">Tipo de Usuário</p>
+					<select
+						bind:value={newUserForm.role_id}
+						class="w-full rounded-md border border-gray-600 bg-gray-700 px-3 py-2 text-white focus:ring-emerald-500"
+					>
+						<option value={1}>Admin</option>
+						<option value={2}>Garçom</option>
+						<option value={3}>Cozinha</option>
+					</select>
+				</div>
 				<div class="flex space-x-2">
 					<button
 						type="button"

src/lib/component/Product.svelte

@@ -3,6 +3,17 @@
 	import add_icon from '$lib/assets/add_icon.svg';
 	import save_icon from '$lib/assets/save_icon.svg';
 	import trash_icon from '$lib/assets/trash_icon.svg';
+	import edit_icon from '$lib/assets/edit_icon.svg';
+	import { browser } from '$app/environment';
+	import check_icon from '$lib/assets/check_icon.svg';
+	import cancel_icon from '$lib/assets/cancel_icon.svg';
+	let token = null;
+	let company = null;
+
+	if (browser) {
+		token = localStorage.getItem('token');
+		company = Number(localStorage.getItem('company'));
+	}
 
 	let products = [];
 	let categories = [];
@@ -55,12 +66,13 @@
 			product_name: productFormData.name,
 			product_price: Number(productFormData.price),
 			category_id: categoryObj.id,
-			company_id: 1
+			company_id: company,
+			product_is_kitchen: productFormData.sendToKitchen
 		};
 
 		const requestOptions = {
 			method: 'POST',
-			headers: { 'Content-Type': 'application/json' },
+			headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
 			body: JSON.stringify(payload),
 			redirect: 'follow'
 		};
@@ -97,6 +109,53 @@
 		isAddingProduct = true;
 	}
 
+	// Função para enviar update para o backend
+	async function handleUpdateProduct(event) {
+		event.preventDefault();
+
+		token = localStorage.getItem('token');
+		company = Number(localStorage.getItem('company'));
+
+		const myHeaders = new Headers();
+		myHeaders.append('Authorization', `Bearer ${token}`);
+		myHeaders.append('Content-Type', 'application/json');
+
+		// Aqui você precisa converter o category (nome) para id, se necessário
+		// Vou supor que você já tem essa informação disponível, por exemplo:
+		// const category_id = getCategoryIdByName(productFormData.category);
+
+		const raw = JSON.stringify({
+			update_product_id: editingProductId,
+			product_name: productFormData.name,
+			product_price: Number(productFormData.price),
+			product_is_kitchen: productFormData.sendToKitchen ? 1 : 0,
+			company_id: company
+		});
+
+		const requestOptions = {
+			method: 'POST',
+			headers: myHeaders,
+			body: raw,
+			redirect: 'follow'
+		};
+
+		try {
+			const response = await fetch('https://dev2.mixtech.dev.br/product/update', requestOptions);
+			const result = await response.json();
+
+			if (result.status === 'ok') {
+				console.log('Produto atualizado com sucesso!');
+				isAddingProduct = false;
+				editingProductId = null;
+				// Aqui você pode recarregar a lista de produtos, se quiser
+			} else {
+				console.error('Erro ao atualizar produto:', result.msg || result);
+			}
+		} catch (error) {
+			console.error('Erro na requisição de atualização:', error);
+		}
+	}
+
 	function handleCategorySubmit(event) {
 		event.preventDefault();
 
@@ -111,11 +170,11 @@
 
 		const requestOptions = {
 			method: 'POST',
-			headers: { 'Content-Type': 'application/json' },
+			headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
 			body: JSON.stringify({
 				category_name: newCategoryName,
 				category_is_kitchen: false,
-				company_id: 1
+				company_id: company
 			}),
 			redirect: 'follow'
 		};
@@ -148,10 +207,10 @@
 
 		fetch('https://dev2.mixtech.dev.br/category/delete', {
 			method: 'POST',
-			headers: { 'Content-Type': 'application/json' },
+			headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
 			body: JSON.stringify({
 				category_name: name,
-				company_id: 1
+				company_id: company
 			}),
 			redirect: 'follow'
 		})
@@ -173,10 +232,10 @@
 	function handleDeleteProduct(productName) {
 		const requestOptions = {
 			method: 'POST',
-			headers: { 'Content-Type': 'application/json' },
+			headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
 			body: JSON.stringify({
 				product_name: productName,
-				company_id: 1
+				company_id: company
 			}),
 			redirect: 'follow'
 		};
@@ -197,13 +256,14 @@
 	}
 
 	onMount(() => {
-		const companyId = 1;
-
 		const requestOptions = {
 			method: 'POST',
-			headers: { 'Content-Type': 'application/json' },
+			headers: {
+				'Content-Type': 'application/json',
+				Authorization: `Bearer ${token}`
+			},
 			redirect: 'follow',
-			body: JSON.stringify({ company_id: companyId })
+			body: JSON.stringify({ company_id: company })
 		};
 
 		fetch('https://dev2.mixtech.dev.br/category/get', requestOptions)
@@ -212,19 +272,18 @@
 				if (res.status === 'ok') {
 					categories = res.data.map((categorie) => ({
 						id: categorie.category_id,
-						name: categorie.category_name,
-						isKitchen: categorie.category_is_kitchen === 1
+						name: categorie.category_name
 					}));
+
+					return fetch('https://dev2.mixtech.dev.br/product/get', requestOptions);
 				} else {
-					console.error('Erro ao carregar categorias:', res.msg);
+					throw new Error(`Erro ao carregar categorias: ${res.msg}`);
 				}
 			})
-			.catch((error) => console.error('Erro ao buscar categorias:', error));
-
-		fetch('https://dev2.mixtech.dev.br/product/get', requestOptions)
 			.then((response) => response.json())
 			.then((res) => {
 				if (res.status === 'ok') {
+					console.log(res);
 					products = res.data.map((item) => {
 						const category = categories.find((c) => c.id === item.category_id);
 						return {
@@ -232,14 +291,16 @@
 							name: item.product_name,
 							category: category?.name || 'Sem categoria',
 							price: Number(item.product_price),
-							sendToKitchen: category?.isKitchen || false
+							sendToKitchen: item.product_is_kitchen
 						};
 					});
 				} else {
 					console.error('Erro ao carregar produtos:', res.msg);
 				}
 			})
-			.catch((error) => console.error('Erro ao buscar produtos:', error));
+			.catch((error) => {
+				console.error('Erro ao buscar dados:', error);
+			});
 	});
 </script>
 
@@ -425,27 +486,55 @@
 					{#if filteredProducts.length === 0}
 						<p class="p-4 text-center text-gray-400">Nenhum produto encontrado</p>
 					{:else}
-						<ul class="divide-y divide-gray-700">
-							{#each filteredProducts as product}
-								<li
-									class="flex items-center justify-between p-4 hover:bg-gray-900"
-									on:click={() => handleEditProduct(product)}
-								>
-									<div>
-										<p class="text-sm font-semibold text-white">{product.name}</p>
-										<p class="text-xs text-gray-400">
-											{product.category} • R$ {product.price.toFixed(2)}
-										</p>
-									</div>
-									<button
-										on:click|stopPropagation={() => handleDeleteProduct(product.name)}
-										class="rounded-lg p-1.5 text-red-400 hover:bg-red-900/20"
-									>
-										<img src={trash_icon} alt="Deletar" class="h-4 w-4" />
-									</button>
-								</li>
-							{/each}
-						</ul>
+						<div class="overflow-x-auto rounded-lg">
+							<table
+								class="min-w-full table-auto divide-y divide-gray-700 text-left text-sm text-white"
+							>
+								<thead class="bg-gray-800">
+									<tr>
+										<th class="px-6 py-3 font-semibold">Nome</th>
+										<th class="px-6 py-3 font-semibold">Categoria</th>
+										<th class="px-6 py-3 font-semibold">Preço</th>
+										<th class="px-6 py-3 font-semibold">Cozinha</th>
+										<th class="px-6 py-3 text-center font-semibold">Ações</th>
+									</tr>
+								</thead>
+								<tbody class="divide-y divide-gray-700 bg-gray-800">
+									{#each filteredProducts as product}
+										<tr class="transition-colors hover:bg-gray-800">
+											<td class="px-6 py-4">{product.name}</td>
+											<td class="px-6 py-4 text-gray-400">{product.category}</td>
+											<td class="px-6 py-4 text-gray-400">R$ {product.price.toFixed(2)}</td>
+											<td class="px-6 py-4">
+												<div class="mr-1 flex items-center justify-center">
+													{#if product.sendToKitchen}
+														<img class="h-4 w-4" src={check_icon} alt="check" />
+													{:else}
+														<img class="h-5 w-5" src={cancel_icon} alt="cancel" />
+													{/if}
+												</div>
+											</td>
+											<td class="px-6 py-4">
+												<div class="flex justify-center gap-4">
+													<button
+														on:click={() => handleEditProduct(product)}
+														class="rounded-lg p-1.5 text-blue-400 hover:bg-blue-900/20"
+													>
+														<img src={edit_icon} alt="Editar" class="h-4 w-4" />
+													</button>
+													<button
+														on:click|stopPropagation={() => handleDeleteProduct(product.name)}
+														class="rounded-lg p-1.5 text-red-400 hover:bg-red-900/20"
+													>
+														<img src={trash_icon} alt="Deletar" class="h-4 w-4" />
+													</button>
+												</div>
+											</td>
+										</tr>
+									{/each}
+								</tbody>
+							</table>
+						</div>
 					{/if}
 				{/if}
 			</div>

src/lib/component/Tables.svelte

@@ -0,0 +1,177 @@
+<script>
+	import { goto } from '$app/navigation';
+	import { browser } from '$app/environment';
+
+	let token = null;
+
+	if (browser) {
+		token = localStorage.getItem('token');
+	}
+
+	// Ícones (substitua os caminhos pelas suas imagens)
+	//import coffeeIcon from '$lib/assets/coffee.svg';
+	//import clockIcon from '$lib/assets/clock.svg';
+	//import creditCardIcon from '$lib/assets/credit-card.svg';
+	//import plusIcon from '$lib/assets/plus.svg';
+	//import trashIcon from '$lib/assets/trash.svg';
+	//import printerIcon from '$lib/assets/printer.svg';
+
+	let order;
+
+	// Dados simulados — substitua depois pela sua API
+	let tables = [
+		{ id: 1, status: 'FREE', startTime: null },
+		{ id: 2, status: 'OCCUPIED', startTime: '2025-07-19T10:00:00' },
+		{ id: 3, status: 'ALERT', startTime: '2025-07-19T08:45:00' }
+	];
+
+	let orders = {
+		2: { items: [{}, {}], totalAmount: 42.5 },
+		3: { items: [{}], totalAmount: 19.99 }
+	};
+
+	function getTableOrder(tableId) {
+		return orders[tableId];
+	}
+
+	function getStatusColor(status) {
+		switch (status) {
+			case 'FREE':
+				return 'bg-green-600 hover:bg-green-700';
+			case 'OCCUPIED':
+				return 'bg-yellow-500 hover:bg-yellow-600';
+			case 'ALERT':
+				return 'bg-red-600 hover:bg-red-700';
+			default:
+				return 'bg-gray-700 hover:bg-gray-800';
+		}
+	}
+
+	function getStatusText(status) {
+		switch (status) {
+			case 'FREE':
+				return 'Livre';
+			case 'OCCUPIED':
+				return 'Ocupada';
+			case 'ALERT':
+				return 'Alerta';
+			default:
+				return 'Desconhecido';
+		}
+	}
+
+	function getOrderTime(startTime) {
+		if (!startTime) return '';
+		const startDateTime = new Date(startTime);
+		const now = new Date();
+		const diff = Math.floor((now.getTime() - startDateTime.getTime()) / 1000 / 60);
+		if (diff < 60) return `${diff} min`;
+		const hours = Math.floor(diff / 60);
+		const mins = diff % 60;
+		return `${hours}h ${mins}m`;
+	}
+
+	async function handleTableClick(tableId) {
+		const table = tables.find((t) => t.id === tableId);
+		if (!table) return;
+
+		if (table.status === 'FREE') {
+			// 🔁 Aqui você pode fazer o fetch para iniciar o pedido
+			// await fetch('/start-order', { method: 'POST', body: JSON.stringify({ tableId }) });
+		}
+
+		goto(`/pos/${tableId}`);
+	}
+
+	function printKitchenOrder(tableId) {
+		// 🔁 Substitua com sua lógica de impressão
+		alert(`Imprimir pedido da mesa ${tableId}`);
+	}
+
+	function cancelOrder(tableId) {
+		// 🔁 Substitua com sua lógica de cancelamento
+		alert(`Cancelar pedido da mesa ${tableId}`);
+	}
+</script>
+
+<div class="container mx-auto">
+	<div class="flex flex-col">
+		<h1 class="mb-6 text-2xl font-bold">Mesas</h1>
+
+		<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+			{#each tables as table}
+				{(order = getTableOrder(table.id))}
+
+				<div
+					class="transform overflow-hidden rounded-lg bg-gray-800 shadow-md transition-transform duration-200 hover:scale-105"
+				>
+					<div class={`flex items-center justify-between p-4 ${getStatusColor(table.status)}`}>
+						<div class="flex items-center">
+							<!--<img src={coffeeIcon} alt="Mesa" class="mr-2 h-5 w-5" />-->
+							<span class="font-medium">Mesa {table.id}</span>
+						</div>
+						<span class="text-sm font-medium">{getStatusText(table.status)}</span>
+					</div>
+
+					<div class="p-4">
+						{#if table.status !== 'FREE' && order}
+							<div class="space-y-3">
+								<div class="flex justify-between text-sm">
+									<div class="flex items-center text-gray-400">
+										<!--<img src={clockIcon} alt="Relógio" class="mr-1 h-4 w-4" />-->
+										<span>{getOrderTime(table.startTime)}</span>
+									</div>
+									<div class="font-medium">
+										{order.items.length}
+										{order.items.length === 1 ? 'item' : 'itens'}
+									</div>
+								</div>
+
+								<div class="flex justify-between text-sm">
+									<span class="text-gray-400">Total:</span>
+									<span class="font-medium">R$ {order.totalAmount.toFixed(2)}</span>
+								</div>
+
+								<div class="mt-2 grid grid-cols-2 gap-2">
+									<button
+										on:click|stopPropagation={() => printKitchenOrder(table.id)}
+										class="flex items-center justify-center rounded bg-blue-600 px-2 py-1.5 text-xs transition-colors hover:bg-blue-700"
+									>
+										<!--<img src={printerIcon} alt="Cozinha" class="mr-1 h-3.5 w-3.5" />-->
+										Cozinha
+									</button>
+
+									<button
+										on:click|stopPropagation={() => cancelOrder(table.id)}
+										class="flex items-center justify-center rounded bg-red-600 px-2 py-1.5 text-xs transition-colors hover:bg-red-700"
+									>
+										<!--<img src={trashIcon} alt="Cancelar" class="mr-1 h-3.5 w-3.5" />-->
+										Cancelar
+									</button>
+								</div>
+
+								<button
+									on:click={() => handleTableClick(table.id)}
+									class="mt-2 flex w-full items-center justify-center rounded bg-indigo-600 px-3 py-2 text-sm transition-colors hover:bg-indigo-700"
+								>
+									<!--<img src={creditCardIcon} alt="Comanda" class="mr-2 h-4 w-4" />-->
+									Ver Comanda
+								</button>
+							</div>
+						{:else}
+							<div class="flex flex-col items-center justify-center py-4">
+								<button
+									on:click={() => handleTableClick(table.id)}
+									class="flex items-center justify-center rounded bg-emerald-600 px-4 py-2 transition-colors hover:bg-emerald-700"
+								>
+									<!--<img src={plusIcon} alt="Abrir Mesa" class="mr-2 h-5 w-5" />-->
+									Abrir Mesa
+								</button>
+							</div>
+						{/if}
+					</div>
+				</div>
+			{/each}
+		</div>
+	</div>
+</div>

src/lib/layout/SideBar.svelte

@@ -35,6 +35,7 @@
 
 	function handleLogout() {
 		localStorage.removeItem('flag');
+		localStorage.removeItem('token');
 		goto('/login');
 	}
 

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

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

src/routes/login/+page.svelte

@@ -46,7 +46,11 @@
 
 			const result = await response.json();
 			data = result;
-
+			const token = data.data.token;
+			const company = data.data.company_id;
+			localStorage.setItem('token', token);
+			localStorage.setItem('company', company);
+			console.log(data);
 			if (data.status === 'ok') {
 				const id = data.data.role_id;
 				switch (id) {