bblaz/lonc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Introduce initial version of the Lonc app with core features, styling, and configurations.

Browse Source 
- Add base app structure, including Bootstrap setup and Alpine.js integration.
- Implement authentication flow with session handling.
- Integrate stock management and label creation functionalities.
- Include responsive styling and theme using CSS variables and custom components.
- Add API clients for Tryton-based backend.
- Set up kitchen and dashboard navigation workflows.
- Configure service worker for PWA support.
This commit is contained in:
Blaž Bregar
2026-04-06 09:24:22 +02:00
commit 929ee6557a
48 changed files with 4879 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/dashboard/dashboard-page.js
+96
View File
@@ -0,0 +1,96 @@
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}.` });
},
};
}