697 lines
21 KiB
HTML
697 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>POSFuku | ERP Restoran</title>
|
|
<meta name="description" content="POSFuku adalah halaman masuk ERP restoran untuk kasir, dapur, pelanggan, stok, belanja, dan rekap operasional.">
|
|
<style>
|
|
:root {
|
|
--bg: #0f172a;
|
|
--bg-2: #111827;
|
|
--panel: rgba(255,255,255,.08);
|
|
--panel-strong: rgba(15,23,42,.72);
|
|
--line: rgba(255,255,255,.12);
|
|
--text: #f8fafc;
|
|
--muted: #cbd5e1;
|
|
--soft: #94a3b8;
|
|
--primary: #fb7185;
|
|
--primary-2: #e11d48;
|
|
--accent: #f59e0b;
|
|
--ok: #22c55e;
|
|
--shadow: 0 24px 70px rgba(2, 6, 23, .35);
|
|
--radius-xl: 28px;
|
|
--radius-lg: 20px;
|
|
--radius-md: 16px;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html { scroll-behavior: smooth; }
|
|
body {
|
|
margin: 0;
|
|
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
color: var(--text);
|
|
background:
|
|
radial-gradient(circle at top left, rgba(251, 113, 133, .22), transparent 26%),
|
|
radial-gradient(circle at top right, rgba(245, 158, 11, .18), transparent 22%),
|
|
linear-gradient(140deg, #020617 0%, var(--bg) 40%, var(--bg-2) 100%);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
a { color: inherit; }
|
|
.wrap { max-width: 1200px; margin: 0 auto; padding: 26px 18px 52px; }
|
|
|
|
.topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
margin-bottom: 22px;
|
|
padding: 14px 18px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
background: rgba(15, 23, 42, .62);
|
|
backdrop-filter: blur(14px);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.logo {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 14px;
|
|
display: grid;
|
|
place-items: center;
|
|
font-weight: 900;
|
|
color: white;
|
|
background: linear-gradient(135deg, var(--primary), var(--primary-2));
|
|
box-shadow: 0 14px 28px rgba(225, 29, 72, .35);
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.brand small {
|
|
display: block;
|
|
color: var(--soft);
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
font-weight: 800;
|
|
font-size: 11px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.brand strong {
|
|
display: block;
|
|
font-size: 18px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.top-links {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.chip-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 38px;
|
|
padding: 0 14px;
|
|
border-radius: 999px;
|
|
text-decoration: none;
|
|
font-weight: 800;
|
|
font-size: 13px;
|
|
border: 1px solid var(--line);
|
|
background: rgba(255,255,255,.06);
|
|
color: var(--text);
|
|
}
|
|
|
|
.chip-link.primary {
|
|
background: linear-gradient(135deg, var(--primary), var(--primary-2));
|
|
border-color: transparent;
|
|
box-shadow: 0 14px 28px rgba(225, 29, 72, .3);
|
|
}
|
|
|
|
.hero {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.3fr) minmax(320px, .95fr);
|
|
gap: 22px;
|
|
margin-bottom: 22px;
|
|
}
|
|
|
|
.panel {
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-xl);
|
|
background: var(--panel);
|
|
backdrop-filter: blur(14px);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.hero-main {
|
|
padding: 34px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-main::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: -70px;
|
|
bottom: -90px;
|
|
width: 260px;
|
|
height: 260px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, rgba(251,113,133,.22) 0%, transparent 70%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.eyebrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 12px;
|
|
border-radius: 999px;
|
|
background: rgba(251,113,133,.12);
|
|
color: #fecdd3;
|
|
font-size: 12px;
|
|
font-weight: 900;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
h1 {
|
|
margin: 18px 0 12px;
|
|
font-size: clamp(34px, 5.7vw, 56px);
|
|
line-height: 1.04;
|
|
max-width: 760px;
|
|
}
|
|
|
|
.lead {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 18px;
|
|
line-height: 1.65;
|
|
max-width: 760px;
|
|
}
|
|
|
|
.hero-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
margin-top: 26px;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
min-height: 50px;
|
|
padding: 0 18px;
|
|
border-radius: 16px;
|
|
text-decoration: none;
|
|
font-weight: 900;
|
|
transition: transform .14s ease, opacity .14s ease;
|
|
}
|
|
|
|
.btn:hover,
|
|
.chip-link:hover,
|
|
.module-card:hover,
|
|
.step:hover,
|
|
.quick-card:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.btn.primary {
|
|
color: #fff;
|
|
background: linear-gradient(135deg, var(--primary), var(--primary-2));
|
|
box-shadow: 0 16px 32px rgba(225, 29, 72, .28);
|
|
}
|
|
|
|
.btn.secondary {
|
|
color: #fff;
|
|
border: 1px solid var(--line);
|
|
background: rgba(255,255,255,.07);
|
|
}
|
|
|
|
.hero-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 12px;
|
|
margin-top: 22px;
|
|
}
|
|
|
|
.quick-card,
|
|
.stat,
|
|
.module-card,
|
|
.step,
|
|
.help-card { transition: transform .14s ease, border-color .14s ease; }
|
|
|
|
.quick-card {
|
|
padding: 16px;
|
|
border-radius: 18px;
|
|
border: 1px solid rgba(255,255,255,.12);
|
|
background: rgba(15,23,42,.42);
|
|
}
|
|
|
|
.quick-card strong,
|
|
.stat .value,
|
|
.module-card h2,
|
|
.step strong,
|
|
.help-card h3 { display: block; }
|
|
|
|
.quick-card strong { font-size: 15px; margin-bottom: 4px; }
|
|
.quick-card span,
|
|
.stat .label,
|
|
.module-card p,
|
|
.step p,
|
|
.help-card p,
|
|
.help-card li { color: var(--muted); }
|
|
|
|
.hero-side {
|
|
padding: 28px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
}
|
|
|
|
.section-kicker {
|
|
margin: 0;
|
|
color: #fde68a;
|
|
font-size: 12px;
|
|
font-weight: 900;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.stat-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 14px;
|
|
}
|
|
|
|
.stat {
|
|
padding: 16px;
|
|
border-radius: 18px;
|
|
border: 1px solid var(--line);
|
|
background: rgba(15,23,42,.5);
|
|
}
|
|
|
|
.stat .label {
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: .08em;
|
|
color: var(--soft);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.stat .value {
|
|
font-size: 22px;
|
|
font-weight: 900;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.note {
|
|
padding: 16px;
|
|
border-radius: 18px;
|
|
background: rgba(34,197,94,.12);
|
|
border: 1px solid rgba(34,197,94,.22);
|
|
color: #dcfce7;
|
|
line-height: 1.6;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.section-head {
|
|
display: flex;
|
|
align-items: end;
|
|
justify-content: space-between;
|
|
gap: 14px;
|
|
margin: 28px 0 16px;
|
|
}
|
|
|
|
.section-head h2 {
|
|
margin: 0;
|
|
font-size: clamp(24px, 4vw, 34px);
|
|
}
|
|
|
|
.section-head p {
|
|
margin: 6px 0 0;
|
|
color: var(--muted);
|
|
max-width: 760px;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.module-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 18px;
|
|
}
|
|
|
|
.module-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100%;
|
|
padding: 22px;
|
|
border-radius: 22px;
|
|
border: 1px solid var(--line);
|
|
background: rgba(255,255,255,.06);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
width: fit-content;
|
|
min-height: 30px;
|
|
padding: 0 10px;
|
|
border-radius: 999px;
|
|
font-size: 12px;
|
|
font-weight: 900;
|
|
letter-spacing: .04em;
|
|
background: rgba(255,255,255,.08);
|
|
border: 1px solid var(--line);
|
|
color: #e2e8f0;
|
|
}
|
|
|
|
.module-card h2 { margin: 16px 0 10px; font-size: 22px; }
|
|
.module-card p { margin: 0 0 16px; line-height: 1.62; min-height: 78px; }
|
|
.module-meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
|
|
.module-actions { display: flex; flex-wrap: wrap; gap: 10px; }
|
|
|
|
.text-link {
|
|
color: #fda4af;
|
|
text-decoration: none;
|
|
font-weight: 800;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.steps {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 18px;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.step {
|
|
padding: 22px;
|
|
border-radius: 22px;
|
|
border: 1px solid var(--line);
|
|
background: rgba(15,23,42,.42);
|
|
}
|
|
|
|
.step .num {
|
|
width: 42px;
|
|
height: 42px;
|
|
border-radius: 14px;
|
|
display: grid;
|
|
place-items: center;
|
|
font-weight: 900;
|
|
margin-bottom: 14px;
|
|
background: linear-gradient(135deg, rgba(251,113,133,.24), rgba(245,158,11,.18));
|
|
border: 1px solid rgba(251,255,255,.12);
|
|
}
|
|
|
|
.step strong { font-size: 18px; margin-bottom: 8px; }
|
|
.step p { margin: 0; line-height: 1.65; }
|
|
|
|
.help-grid {
|
|
display: grid;
|
|
grid-template-columns: 1.05fr .95fr;
|
|
gap: 18px;
|
|
margin-top: 22px;
|
|
}
|
|
|
|
.help-card {
|
|
padding: 24px;
|
|
border-radius: 22px;
|
|
border: 1px solid var(--line);
|
|
background: rgba(255,255,255,.06);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.help-card h3 { margin: 0 0 8px; font-size: 22px; }
|
|
.help-card p { margin: 0 0 14px; line-height: 1.65; }
|
|
.help-card ul { margin: 0; padding-left: 18px; line-height: 1.75; }
|
|
|
|
.footer {
|
|
margin-top: 26px;
|
|
padding: 18px 20px;
|
|
border-radius: 22px;
|
|
border: 1px solid var(--line);
|
|
background: rgba(15,23,42,.46);
|
|
color: var(--soft);
|
|
line-height: 1.7;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
}
|
|
|
|
@media (max-width: 1040px) {
|
|
.hero,
|
|
.module-grid,
|
|
.steps,
|
|
.help-grid { grid-template-columns: 1fr; }
|
|
.module-card p { min-height: 0; }
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.wrap { padding: 16px 14px 36px; }
|
|
.topbar,
|
|
.hero-main,
|
|
.hero-side,
|
|
.module-card,
|
|
.step,
|
|
.help-card { padding: 20px; }
|
|
.topbar { border-radius: 24px; }
|
|
.top-links,
|
|
.hero-actions,
|
|
.module-actions { flex-direction: column; }
|
|
.hero-list,
|
|
.stat-grid { grid-template-columns: 1fr; }
|
|
.btn,
|
|
.chip-link { width: 100%; }
|
|
.section-head { align-items: start; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="wrap">
|
|
<header class="topbar">
|
|
<div class="brand">
|
|
<div class="logo">PF</div>
|
|
<div>
|
|
<small>ERP Restoran</small>
|
|
<strong>POSFuku Workspace</strong>
|
|
</div>
|
|
</div>
|
|
<nav class="top-links" aria-label="Navigasi cepat">
|
|
<a class="chip-link" href="#modul">Daftar Modul</a>
|
|
<a class="chip-link" href="#panduan">Cara Mulai</a>
|
|
<a class="chip-link primary" href="/POSFuku/Index.html">Buka Kasir</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<section class="hero">
|
|
<div class="panel hero-main">
|
|
<div class="eyebrow">Satu pintu untuk operasional restoran</div>
|
|
<h1>Kelola kasir, dapur, stok, belanja, pelanggan, dan rekap dari satu halaman yang mudah dibuka.</h1>
|
|
<p class="lead">Halaman utama ini dirapikan khusus untuk kebutuhan bisnis restoran. Anda bisa langsung masuk ke modul kasir, memantau antrean dapur, meninjau stok dan pembelian, lalu melihat rekap operasional tanpa harus mencari file satu per satu.</p>
|
|
|
|
<div class="hero-actions">
|
|
<a class="btn primary" href="/POSFuku/Index.html">Masuk ke POS Kasir</a>
|
|
<a class="btn secondary" href="/POSFuku/Stok%20%26%20Belanja/Index.html">Buka Stok & Pembelian</a>
|
|
<a class="btn secondary" href="/RekapTransaksi/Index.html">Lihat Dashboard Rekap</a>
|
|
</div>
|
|
|
|
<div class="hero-list" aria-label="Keunggulan utama">
|
|
<div class="quick-card">
|
|
<strong>Alur kerja lebih jelas</strong>
|
|
<span>Kasir, dapur, pelanggan, dan back office terhubung dari satu beranda.</span>
|
|
</div>
|
|
<div class="quick-card">
|
|
<strong>Ramah untuk non-teknis</strong>
|
|
<span>Tiap modul diberi nama, fungsi, dan tombol masuk yang mudah dikenali.</span>
|
|
</div>
|
|
<div class="quick-card">
|
|
<strong>Aman untuk demo lokal</strong>
|
|
<span>Mode preview tetap dapat dijelajahi walau backend Google Apps Script belum aktif.</span>
|
|
</div>
|
|
<div class="quick-card">
|
|
<strong>Siap untuk operasional harian</strong>
|
|
<span>Mulai dari pesanan meja sampai pemantauan belanja dan laporan.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="panel hero-side">
|
|
<div>
|
|
<p class="section-kicker">Ringkasan cepat</p>
|
|
<div class="stat-grid">
|
|
<div class="stat">
|
|
<span class="label">Jenis bisnis</span>
|
|
<span class="value">Restoran</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="label">Tipe aplikasi</span>
|
|
<span class="value">ERP operasional</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="label">Jumlah modul utama</span>
|
|
<span class="value">7 modul</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="label">Mode saat ini</span>
|
|
<span class="value">Preview lokal</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="note">
|
|
<strong>Catatan preview:</strong> versi yang berjalan di VM ini adalah mode pratinjau lokal. Halaman tetap bisa dieksplorasi untuk demo, sedangkan data bisnis nyata dan sinkronisasi penuh tetap memerlukan backend Google Apps Script saat dihubungkan nanti.
|
|
</div>
|
|
</aside>
|
|
</section>
|
|
|
|
<section id="modul" aria-labelledby="judul-modul">
|
|
<div class="section-head">
|
|
<div>
|
|
<h2 id="judul-modul">Modul operasional</h2>
|
|
<p>Pilih modul sesuai alur kerja restoran Anda. Setiap kartu di bawah ini sudah diarahkan ke halaman yang tepat supaya staf atau pemilik usaha bisa langsung mulai.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="module-grid">
|
|
<article class="module-card">
|
|
<span class="badge">Front Office</span>
|
|
<h2>POS Kasir</h2>
|
|
<p>Mencatat pesanan meja, checkout, metode pembayaran, pelanggan, riwayat transaksi, hingga operasional kasir dalam satu layar kerja utama.</p>
|
|
<div class="module-meta">
|
|
<span class="badge">Pesanan</span>
|
|
<span class="badge">Pembayaran</span>
|
|
<span class="badge">Riwayat</span>
|
|
</div>
|
|
<div class="module-actions">
|
|
<a class="btn primary" href="/POSFuku/Index.html">Buka POS</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="module-card">
|
|
<span class="badge">Produksi</span>
|
|
<h2>Dapur</h2>
|
|
<p>Memantau antrean pesanan aktif, memisahkan item prioritas, dan berkomunikasi dengan kasir saat pesanan siap diantar ke meja.</p>
|
|
<div class="module-meta">
|
|
<span class="badge">Antrean</span>
|
|
<span class="badge">Status siap</span>
|
|
<span class="badge">Chat internal</span>
|
|
</div>
|
|
<div class="module-actions">
|
|
<a class="btn primary" href="/POSFuku/Dapur.html">Buka Dapur</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="module-card">
|
|
<span class="badge">Layanan pelanggan</span>
|
|
<h2>Pelanggan & Poin</h2>
|
|
<p>Menangani pesanan pelanggan, review, bukti promo, dan pengecekan poin loyalitas dengan alur yang lebih aman di mode preview.</p>
|
|
<div class="module-meta">
|
|
<span class="badge">Customer</span>
|
|
<span class="badge">Review</span>
|
|
<span class="badge">Loyalitas</span>
|
|
</div>
|
|
<div class="module-actions">
|
|
<a class="btn primary" href="/POSFuku/Pelanggan.html">Buka Halaman Pelanggan</a>
|
|
<a class="text-link" href="/POSFuku/Poin.html">Lihat modul poin</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="module-card">
|
|
<span class="badge">Back Office</span>
|
|
<h2>Belanja Harian</h2>
|
|
<p>Mencatat pembelian harian, impor data belanja, sinkron satu arah, dan menjaga daftar pengeluaran tetap rapi untuk kebutuhan operasional.</p>
|
|
<div class="module-meta">
|
|
<span class="badge">Belanja</span>
|
|
<span class="badge">Supplier</span>
|
|
<span class="badge">Sinkron</span>
|
|
</div>
|
|
<div class="module-actions">
|
|
<a class="btn primary" href="/POSFuku/Belanja.html">Buka Belanja</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="module-card">
|
|
<span class="badge">Inventori</span>
|
|
<h2>Stok & Pembelian</h2>
|
|
<p>Mengelola stok bahan, belanja, operasional, pegawai, supplier, dan pengaturan pendukung lain dari satu dashboard inventori.</p>
|
|
<div class="module-meta">
|
|
<span class="badge">Stok</span>
|
|
<span class="badge">Operasional</span>
|
|
<span class="badge">Pegawai</span>
|
|
</div>
|
|
<div class="module-actions">
|
|
<a class="btn primary" href="/POSFuku/Stok%20%26%20Belanja/Index.html">Buka Stok & Pembelian</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="module-card">
|
|
<span class="badge">Analitik</span>
|
|
<h2>Rekap Transaksi</h2>
|
|
<p>Melihat rekap harian atau rentang tanggal, grafik, pengeluaran, catatan kalender, serta ringkasan performa penjualan restoran.</p>
|
|
<div class="module-meta">
|
|
<span class="badge">Dashboard</span>
|
|
<span class="badge">Grafik</span>
|
|
<span class="badge">Laporan</span>
|
|
</div>
|
|
<div class="module-actions">
|
|
<a class="btn primary" href="/RekapTransaksi/Index.html">Buka Rekap</a>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="panduan" aria-labelledby="judul-panduan">
|
|
<div class="section-head">
|
|
<div>
|
|
<h2 id="judul-panduan">Cara mulai untuk pemilik restoran</h2>
|
|
<p>Jika Anda belum punya pengalaman web development, gunakan urutan sederhana ini untuk mulai mencoba aplikasi dengan nyaman.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="steps">
|
|
<article class="step">
|
|
<div class="num">1</div>
|
|
<strong>Mulai dari kasir</strong>
|
|
<p>Buka modul POS Kasir untuk melihat alur pesanan, meja, checkout, dan riwayat. Ini modul inti yang paling mudah dipahami lebih dulu.</p>
|
|
</article>
|
|
<article class="step">
|
|
<div class="num">2</div>
|
|
<strong>Lanjut ke dapur & stok</strong>
|
|
<p>Setelah memahami alur pesanan, buka Dapur dan Stok & Pembelian untuk melihat bagaimana pesanan diteruskan ke produksi dan kebutuhan bahan.</p>
|
|
</article>
|
|
<article class="step">
|
|
<div class="num">3</div>
|
|
<strong>Tutup dengan rekap</strong>
|
|
<p>Gunakan Rekap Transaksi untuk menilai penjualan, belanja, dan catatan operasional agar keputusan bisnis bisa diambil lebih cepat.</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="help-grid" aria-label="Bantuan penggunaan">
|
|
<article class="help-card">
|
|
<h3>Yang sudah saya rapikan</h3>
|
|
<p>Beranda ini dibuat lebih jelas untuk penggunaan restoran dan lebih nyaman bagi pengguna non-teknis.</p>
|
|
<ul>
|
|
<li>Navigasi modul disusun ulang supaya fungsi tiap halaman langsung terlihat.</li>
|
|
<li>Bahasa pada elemen baru dibuat konsisten ke Bahasa Indonesia.</li>
|
|
<li>Mode preview lokal dibuat lebih informatif agar tetap berguna saat backend belum tersambung.</li>
|
|
<li>Audit modul awal difokuskan ke POS, Dapur, dan Stok untuk mengurangi titik bingung saat demo.</li>
|
|
</ul>
|
|
</article>
|
|
|
|
<article class="help-card">
|
|
<h3>Saran alur uji coba</h3>
|
|
<p>Untuk demo ke tim restoran, biasanya urutan berikut paling mudah dipahami.</p>
|
|
<ul>
|
|
<li>Buka <strong>POS Kasir</strong> untuk simulasi input pesanan dan pembayaran.</li>
|
|
<li>Buka <strong>Dapur</strong> untuk melihat antrean dan status siap saji.</li>
|
|
<li>Buka <strong>Stok & Pembelian</strong> untuk stok bahan dan pengeluaran.</li>
|
|
<li>Buka <strong>Rekap</strong> untuk melihat gambaran hasil operasional.</li>
|
|
</ul>
|
|
</article>
|
|
</section>
|
|
|
|
<div class="footer">
|
|
POSFuku berjalan di halaman ini sebagai pusat akses modul restoran. Jika nanti Anda ingin, beranda ini juga bisa dikembangkan lagi menjadi dashboard pemilik dengan KPI harian, shortcut staf, dan ringkasan penjualan otomatis.
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html>
|