wirabasalamah/AbelBirdNest-Stock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial import of AbelBirdNest Stock

Browse Source
This commit is contained in:
Wira Irawan
2026-05-16 18:25:51 +07:00
commit 14bb9bf744
472 changed files with 70671 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

366
design-assets/stitch_abel_stock/purchase_form/code.html Normal file
View File

@ -0,0 +1,366 @@
<!DOCTYPE html>
<html class="light" lang="id"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Formulir Pembelian - SwiftLot Walet</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-error-container": "#93000a",
"surface-bright": "#f8fafa",
"tertiary": "#60320f",
"inverse-primary": "#8ed1db",
"error-container": "#ffdad6",
"error": "#ba1a1a",
"surface-container-low": "#f2f4f4",
"secondary-container": "#cfe2f9",
"primary": "#00454c",
"outline-variant": "#bfc8ca",
"on-secondary-fixed-variant": "#36485b",
"on-surface-variant": "#3f484a",
"surface-container-lowest": "#ffffff",
"surface-container-high": "#e6e8e9",
"surface-variant": "#e1e3e3",
"surface-dim": "#d8dadb",
"outline": "#6f797a",
"on-secondary-container": "#526478",
"on-secondary-fixed": "#091d2e",
"tertiary-container": "#7c4824",
"inverse-surface": "#2e3131",
"background": "#f8fafa",
"on-tertiary": "#ffffff",
"on-surface": "#191c1d",
"secondary": "#4e6073",
"primary-container": "#0d5e67",
"on-primary-fixed-variant": "#004f57",
"surface-container": "#eceeee",
"on-primary-container": "#92d5df",
"primary-fixed-dim": "#8ed1db",
"tertiary-fixed-dim": "#feb78a",
"on-tertiary-fixed": "#311300",
"secondary-fixed": "#d1e4fb",
"inverse-on-surface": "#eff1f1",
"on-primary-fixed": "#001f23",
"on-secondary": "#ffffff",
"surface-tint": "#1d6871",
"on-tertiary-container": "#ffbb91",
"primary-fixed": "#aaeef8",
"secondary-fixed-dim": "#b5c8df",
"on-primary": "#ffffff",
"surface": "#f8fafa",
"surface-container-highest": "#e1e3e3",
"on-error": "#ffffff",
"on-tertiary-fixed-variant": "#6b3a17",
"tertiary-fixed": "#ffdbc7",
"on-background": "#191c1d"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"spacing": {
"row-height-md": "48px",
"container-margin": "24px",
"compact-padding": "8px",
"gutter": "16px",
"row-height-sm": "32px"
},
"fontFamily": {
"display-lot": ["Inter"],
"table-data": ["Inter"],
"body-sm": ["Inter"],
"label-caps": ["Inter"],
"body-base": ["Inter"],
"h2": ["Inter"],
"h1": ["Inter"]
},
"fontSize": {
"display-lot": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"table-data": ["13px", {"lineHeight": "16px", "fontWeight": "500"}],
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
"label-caps": ["11px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "700"}],
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"h2": ["16px", {"lineHeight": "24px", "fontWeight": "600"}],
"h1": ["20px", {"lineHeight": "28px", "fontWeight": "600"}]
}
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
vertical-align: middle;
}
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
</style>
</head>
<body class="bg-background font-body-base text-on-background antialiased flex">
<!-- SideNavBar (Shared Component) -->
<aside class="fixed left-0 top-0 h-full w-64 border-r border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950 flex flex-col h-screen py-4 z-50">
<div class="px-6 mb-8 flex items-center gap-3">
<div class="w-8 h-8 rounded bg-primary-container flex items-center justify-center text-white">
<span class="material-symbols-outlined" data-icon="inventory_2">inventory_2</span>
</div>
<div>
<h1 class="text-teal-900 dark:text-teal-100 font-black text-[15px] leading-none">Sarang Ops</h1>
<p class="text-[11px] text-slate-500 font-medium">Pabrik Pengolahan A</p>
</div>
</div>
<nav class="flex-1 space-y-1 px-3">
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:text-[#0D5E67] hover:bg-slate-100 dark:hover:bg-slate-900 transition-all duration-150 rounded active:scale-[0.98]" href="#">
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
<span class="font-inter text-[13px] font-medium">Dashboard</span>
</a>
<!-- Active State: Purchase -->
<a class="flex items-center gap-3 px-3 py-2 bg-white dark:bg-slate-900 text-[#0D5E67] border-r-4 border-[#0D5E67] shadow-sm transition-all duration-150 rounded active:scale-[0.98]" href="#">
<span class="material-symbols-outlined" data-icon="shopping_cart">shopping_cart</span>
<span class="font-inter text-[13px] font-medium">Pembelian</span>
</a>
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:text-[#0D5E67] hover:bg-slate-100 dark:hover:bg-slate-900 transition-all duration-150 rounded active:scale-[0.98]" href="#">
<span class="material-symbols-outlined" data-icon="receipt_long">receipt_long</span>
<span class="font-inter text-[13px] font-medium">Kuitansi</span>
</a>
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:text-[#0D5E67] hover:bg-slate-100 dark:hover:bg-slate-900 transition-all duration-150 rounded active:scale-[0.98]" href="#">
<span class="material-symbols-outlined" data-icon="inventory_2">inventory_2</span>
<span class="font-inter text-[13px] font-medium">Inventaris</span>
</a>
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:text-[#0D5E67] hover:bg-slate-100 dark:hover:bg-slate-900 transition-all duration-150 rounded active:scale-[0.98]" href="#">
<span class="material-symbols-outlined" data-icon="monitoring">monitoring</span>
<span class="font-inter text-[13px] font-medium">Analitik</span>
</a>
</nav>
<div class="px-3 mt-auto space-y-1">
<button class="w-full mb-4 bg-[#0D5E67] text-white py-2.5 rounded text-[13px] font-semibold flex items-center justify-center gap-2 hover:opacity-90 active:scale-[0.98] transition-all">
<span class="material-symbols-outlined text-[18px]" data-icon="add">add</span>
Scan Lot Baru
</button>
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:text-[#0D5E67] hover:bg-slate-100 transition-all rounded" href="#">
<span class="material-symbols-outlined" data-icon="settings">settings</span>
<span class="font-inter text-[13px] font-medium">Pengaturan</span>
</a>
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:text-[#0D5E67] hover:bg-slate-100 transition-all rounded" href="#">
<span class="material-symbols-outlined" data-icon="contact_support">contact_support</span>
<span class="font-inter text-[13px] font-medium">Bantuan</span>
</a>
</div>
</aside>
<!-- Main Content -->
<main class="flex-1 ml-64 min-h-screen flex flex-col">
<!-- TopNavBar (Shared Component) -->
<header class="sticky top-0 z-40 w-full flex justify-between items-center h-14 px-6 bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 shadow-sm">
<div class="flex items-center gap-4">
<span class="font-inter text-lg font-bold text-[#0D5E67] dark:text-white tracking-tight">SwiftLot Walet</span>
<div class="h-6 w-[1px] bg-slate-200 mx-2"></div>
<h2 class="font-h2 text-h2 text-primary">Formulir Pembelian Baru</h2>
</div>
<div class="flex items-center gap-5">
<div class="relative group">
<span class="material-symbols-outlined text-slate-600 dark:text-slate-400 cursor-pointer" data-icon="notifications">notifications</span>
<span class="absolute top-0 right-0 w-2 h-2 bg-error rounded-full"></span>
</div>
<span class="material-symbols-outlined text-slate-600 dark:text-slate-400 cursor-pointer" data-icon="help_outline">help_outline</span>
<div class="flex items-center gap-2 pl-2 cursor-pointer">
<img alt="User profile" class="w-8 h-8 rounded-full border border-slate-200 object-cover" data-alt="portrait of a professional supply chain manager in a bright office environment" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD-y__w3tcRMOguNsqtAJT7TMj2QhhJLYkYzmTuwzT-Izil12sZY-sPq8oPDMsQdTn3xwo4VoFKGu6E4BBlMVWCw1Zdlo6fdurR9yFabpj-jPvpKVzo8q2JnfX63jMZUcRU5OxZGINUXCz2OAYJ8wWF-6XtZIVi_FzpsWyJ7pAJCA4dc5eBuC1CpX4YfCl2JdVWWdYh0PJOimMZjaDw50yetwvPN3pGF-SpQWVkasvM4z8H-2foOC6kgDkELSxHpa9Osa_JQWM8KQ"/>
</div>
</div>
</header>
<!-- Canvas -->
<div class="p-container-margin flex-1 flex flex-col gap-gutter">
<!-- Header Section: Form Fields -->
<section class="bg-surface-container-lowest border border-outline-variant rounded shadow-sm p-6">
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
<div class="flex flex-col gap-1">
<label class="font-label-caps text-label-caps text-outline uppercase">No. Pembelian</label>
<input class="bg-surface-container-low border-outline-variant rounded px-3 py-2 text-body-sm font-medium focus:ring-0 cursor-not-allowed" readonly="" type="text" value="PUR-20231027-001"/>
</div>
<div class="flex flex-col gap-1">
<label class="font-label-caps text-label-caps text-outline uppercase">Pemasok</label>
<select class="border-outline-variant rounded px-3 py-2 text-body-sm focus:ring-2 focus:ring-[#0D5E67] focus:border-[#0D5E67] outline-none transition-all">
<option>Seafood Harvest Co.</option>
<option>West Coast Walet Hub</option>
<option>Global Nest Exporters</option>
</select>
</div>
<div class="flex flex-col gap-1">
<label class="font-label-caps text-label-caps text-outline uppercase">Tanggal Pembelian</label>
<div class="relative">
<input class="w-full border-outline-variant rounded px-3 py-2 text-body-sm focus:ring-2 focus:ring-[#0D5E67] focus:border-[#0D5E67] outline-none" type="date" value="2023-10-27"/>
</div>
</div>
<div class="flex flex-col gap-1">
<label class="font-label-caps text-label-caps text-outline uppercase">No. Faktur Pemasok</label>
<input class="border-outline-variant rounded px-3 py-2 text-body-sm focus:ring-2 focus:ring-[#0D5E67] focus:border-[#0D5E67] outline-none" placeholder="INV/2023/X12" type="text"/>
</div>
<div class="md:col-span-2 lg:col-span-3 flex flex-col gap-1">
<label class="font-label-caps text-label-caps text-outline uppercase">Catatan</label>
<textarea class="border-outline-variant rounded px-3 py-2 text-body-sm focus:ring-2 focus:ring-[#0D5E67] focus:border-[#0D5E67] outline-none" placeholder="Masukkan detail spesifik transaksi..." rows="1"></textarea>
</div>
<div class="flex flex-col gap-1">
<label class="font-label-caps text-label-caps text-outline uppercase">Pratinjau Info Bank</label>
<div class="bg-surface-container-low border border-dashed border-outline-variant rounded px-3 py-2 h-full">
<div class="flex items-center gap-2 mb-1">
<span class="material-symbols-outlined text-primary text-sm" data-icon="account_balance">account_balance</span>
<span class="text-body-sm font-semibold">Standard Chartered</span>
</div>
<p class="text-[12px] text-on-surface-variant font-mono">Acc: 9920-xxxx-1122</p>
</div>
</div>
</div>
</section>
<!-- Line Items Section: Table -->
<section class="flex-1 bg-surface-container-lowest border border-outline-variant rounded shadow-sm overflow-hidden flex flex-col">
<div class="px-6 py-4 border-b border-outline-variant flex justify-between items-center bg-surface-bright">
<h3 class="font-h2 text-h2 text-primary">Item Inventaris</h3>
<button class="flex items-center gap-1.5 text-[#0D5E67] hover:bg-[#0D5E67]/5 px-3 py-1.5 rounded transition-all active:scale-95">
<span class="material-symbols-outlined text-[20px]" data-icon="add_circle">add_circle</span>
<span class="font-table-data text-table-data">Tambah Baris</span>
</button>
</div>
<div class="overflow-x-auto flex-1">
<table class="w-full text-left border-collapse min-w-[1000px]">
<thead>
<tr class="bg-surface-container text-on-surface-variant font-label-caps text-[11px] uppercase tracking-wider">
<th class="px-6 py-3 border-b border-outline-variant">Jenis Item</th>
<th class="px-4 py-3 border-b border-outline-variant">Kualitas</th>
<th class="px-4 py-3 border-b border-outline-variant text-right">Jumlah</th>
<th class="px-4 py-3 border-b border-outline-variant">Satuan</th>
<th class="px-4 py-3 border-b border-outline-variant text-right">Harga Satuan</th>
<th class="px-4 py-3 border-b border-outline-variant text-right">Subtotal</th>
<th class="px-4 py-3 border-b border-outline-variant">Status</th>
<th class="px-4 py-3 border-b border-outline-variant">Catatan</th>
<th class="px-6 py-3 border-b border-outline-variant text-center w-10"></th>
</tr>
</thead>
<tbody class="text-table-data font-table-data divide-y divide-outline-variant/30">
<!-- Row 1 -->
<tr class="hover:bg-slate-50 transition-colors group">
<td class="px-6 py-compact-padding">
<select class="w-full bg-transparent border-none p-0 focus:ring-0 text-table-data cursor-pointer">
<option>Sarang Mentah - Mangkok</option>
<option>Sarang Mentah - Sudut</option>
</select>
</td>
<td class="px-4 py-compact-padding">
<select class="w-full bg-transparent border-none p-0 focus:ring-0 text-table-data cursor-pointer">
<option>Super AAA</option>
<option>Grade A</option>
<option>Grade B</option>
</select>
</td>
<td class="px-4 py-compact-padding text-right">
<input class="w-20 text-right bg-transparent border-none p-0 focus:ring-0 text-table-data" type="number" value="12.50"/>
</td>
<td class="px-4 py-compact-padding">
<span class="text-on-surface-variant">kg</span>
</td>
<td class="px-4 py-compact-padding text-right">
<input class="w-24 text-right bg-transparent border-none p-0 focus:ring-0 text-table-data" type="number" value="12500"/>
</td>
<td class="px-4 py-compact-padding text-right font-semibold text-primary">156,250.00</td>
<td class="px-4 py-compact-padding">
<span class="inline-flex items-center px-2 py-0.5 rounded-full bg-green-100 text-green-800 text-[11px] font-bold">
RAW_MAT
</span>
</td>
<td class="px-4 py-compact-padding">
<input class="w-full bg-transparent border-none p-0 focus:ring-0 text-table-data placeholder:opacity-30" placeholder="-" type="text"/>
</td>
<td class="px-6 py-compact-padding text-center">
<span class="material-symbols-outlined text-slate-300 hover:text-error cursor-pointer transition-colors" data-icon="delete">delete</span>
</td>
</tr>
<!-- Row 2 -->
<tr class="hover:bg-slate-50 transition-colors group">
<td class="px-6 py-compact-padding">
<select class="w-full bg-transparent border-none p-0 focus:ring-0 text-table-data cursor-pointer">
<option>Sarang Mentah - Sudut</option>
<option>Sarang Mentah - Mangkok</option>
</select>
</td>
<td class="px-4 py-compact-padding">
<select class="w-full bg-transparent border-none p-0 focus:ring-0 text-table-data cursor-pointer">
<option>Grade B</option>
<option>Super AAA</option>
<option>Grade A</option>
</select>
</td>
<td class="px-4 py-compact-padding text-right">
<input class="w-20 text-right bg-transparent border-none p-0 focus:ring-0 text-table-data" type="number" value="4.25"/>
</td>
<td class="px-4 py-compact-padding">
<span class="text-on-surface-variant">kg</span>
</td>
<td class="px-4 py-compact-padding text-right">
<input class="w-24 text-right bg-transparent border-none p-0 focus:ring-0 text-table-data" type="number" value="8200"/>
</td>
<td class="px-4 py-compact-padding text-right font-semibold text-primary">34,850.00</td>
<td class="px-4 py-compact-padding">
<span class="inline-flex items-center px-2 py-0.5 rounded-full bg-blue-100 text-blue-800 text-[11px] font-bold">
PENDING_QC
</span>
</td>
<td class="px-4 py-compact-padding">
<input class="w-full bg-transparent border-none p-0 focus:ring-0 text-table-data" type="text" value="Kelembaban tinggi"/>
</td>
<td class="px-6 py-compact-padding text-center">
<span class="material-symbols-outlined text-slate-300 hover:text-error cursor-pointer transition-colors" data-icon="delete">delete</span>
</td>
</tr>
<!-- Empty Add Row Helper -->
<tr class="bg-surface-container-low border-t border-outline-variant">
<td class="px-6 py-2 text-center" colspan="9">
<button class="text-body-sm font-medium text-outline hover:text-primary transition-colors flex items-center justify-center gap-2 mx-auto">
<span class="material-symbols-outlined text-[18px]" data-icon="add">add</span>
Masukkan entri lot baru
</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Footer Summary Section -->
<div class="bg-surface-container px-6 py-4 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
<div class="flex gap-8">
<div class="flex flex-col">
<span class="font-label-caps text-label-caps text-outline uppercase">Total Baris</span>
<span class="font-display-lot text-[18px] text-primary">02 Entri</span>
</div>
<div class="flex flex-col">
<span class="font-label-caps text-label-caps text-outline uppercase">Total Berat</span>
<span class="font-display-lot text-[18px] text-primary">16.75 kg</span>
</div>
</div>
<div class="flex items-baseline gap-4 bg-primary-container px-6 py-3 rounded shadow-lg text-white">
<span class="font-label-caps text-label-caps uppercase opacity-80">Total Keseluruhan</span>
<span class="font-display-lot text-display-lot">USD 191,100.00</span>
</div>
</div>
</section>
<!-- Actions Footer -->
<footer class="flex justify-between items-center py-4">
<button class="px-6 py-2 text-body-base font-semibold text-error hover:bg-error/5 rounded transition-all">
Batal
</button>
<div class="flex gap-3">
<button class="px-8 py-2.5 bg-white border border-[#0D5E67] text-[#0D5E67] font-semibold rounded-lg hover:bg-[#0D5E67]/5 active:scale-95 transition-all">
Simpan Draft
</button>
<button class="px-10 py-2.5 bg-[#0D5E67] text-white font-semibold rounded-lg shadow-md hover:opacity-90 active:scale-95 transition-all">
Kirim Pembelian
</button>
</div>
</footer>
</div>
</main>
</body></html>

BIN
design-assets/stitch_abel_stock/purchase_form/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 184 KiB