97 lines
4.3 KiB
JavaScript
97 lines
4.3 KiB
JavaScript
|
export function renderDashboardPage() {
|
||
|
|
return `
|
||
|
|
<section class="container-xxl py-4 py-lg-5" x-data="dashboardPage()">
|
||
|
|
<div class="hero-card p-4 p-lg-5 mb-4">
|
||
|
|
<div class="row align-items-center g-4">
|
||
|
|
<div class="col-12 col-lg-7">
|
||
|
|
<p class="eyebrow mb-2">Kitchen stock management</p>
|
||
|
|
<h1 class="display-6 mb-3">Keep labels, stock, and adjustments in one focused workflow.</h1>
|
||
|
|
<p class="lead text-body-secondary mb-4">
|
||
|
|
This MVP is shaped for fast household operations on a phone or desktop, with the Tryton backend staying in charge of business logic.
|
||
|
|
</p>
|
||
|
|
<div class="d-flex flex-wrap gap-2">
|
||
|
|
<a href="#/labels/new" class="btn btn-primary btn-lg">Create label</a>
|
||
|
|
<a href="#/stock" class="btn btn-outline-primary btn-lg">Browse stock</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-12 col-lg-5">
|
||
|
|
<div class="glass-panel p-4">
|
||
|
|
<div class="small text-uppercase text-body-secondary mb-2">Active kitchen</div>
|
||
|
|
<div class="h4 mb-2" x-text="$store.app.activeKitchen?.name || 'Select a kitchen'"></div>
|
||
|
|
<div class="text-body-secondary mb-3">
|
||
|
|
Switch without signing out when you need to work across kitchens in the same Tryton database.
|
||
|
|
</div>
|
||
|
|
<button class="btn btn-outline-secondary" @click="showKitchenPicker = !showKitchenPicker">Switch kitchen</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<template x-if="showKitchenPicker">
|
||
|
|
<div class="mb-4">
|
||
|
|
<div class="card border-0 shadow-sm">
|
||
|
|
<div class="card-body p-4">
|
||
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
||
|
|
<h2 class="h5 mb-0">Choose kitchen</h2>
|
||
|
|
<button class="btn btn-sm btn-outline-secondary" @click="showKitchenPicker = false">Close</button>
|
||
|
|
</div>
|
||
|
|
<div class="row g-3">
|
||
|
|
<template x-for="kitchen in $store.app.kitchens" :key="kitchen.id">
|
||
|
|
<div class="col-12 col-md-6 col-xl-4">
|
||
|
|
<button class="btn kitchen-card w-100 text-start" @click="setKitchen(kitchen)">
|
||
|
|
<div class="fw-semibold" x-text="kitchen.name"></div>
|
||
|
|
<div class="small text-body-secondary" x-text="kitchen.description || 'Kitchen workspace'"></div>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<div class="row g-4">
|
||
|
|
<div class="col-12 col-md-6 col-xl-3">
|
||
|
|
<a class="quick-card" href="#/labels/new">
|
||
|
|
<span class="quick-card-label">Labels</span>
|
||
|
|
<strong>New label & stock entry</strong>
|
||
|
|
<span class="text-body-secondary">Search an item, fill the batch fields, preview, then create.</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="col-12 col-md-6 col-xl-3">
|
||
|
|
<a class="quick-card" href="#/stock">
|
||
|
|
<span class="quick-card-label">Stock</span>
|
||
|
|
<strong>Overview & filters</strong>
|
||
|
|
<span class="text-body-secondary">Browse current entries with mobile-friendly cards and table view.</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="col-12 col-md-6 col-xl-3">
|
||
|
|
<a class="quick-card" href="#/stock">
|
||
|
|
<span class="quick-card-label">Adjustments</span>
|
||
|
|
<strong>Fast quantity updates</strong>
|
||
|
|
<span class="text-body-secondary">Apply increments, decrements, or exact counts with clear feedback.</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="col-12 col-md-6 col-xl-3">
|
||
|
|
<a class="quick-card" href="#/settings">
|
||
|
|
<span class="quick-card-label">Settings</span>
|
||
|
|
<strong>Connection details</strong>
|
||
|
|
<span class="text-body-secondary">Update the Tryton base URL and database without leaving the app.</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function dashboardPageData(store) {
|
||
|
|
return {
|
||
|
|
showKitchenPicker: false,
|
||
|
|
setKitchen(kitchen) {
|
||
|
|
store.setActiveKitchen(kitchen);
|
||
|
|
this.showKitchenPicker = false;
|
||
|
|
store.addAlert({ type: 'success', message: `Working in ${kitchen.name}.` });
|
||
|
|
},
|
||
|
|
};
|
||
|
|
}
|