feat: enhance documentation and localization for TrackGo

- Updated user documentation to include new sections for mobile and web functionalities, ensuring comprehensive guidance for users in both English and Bahasa Indonesia.
- Added new pages for mobile check-in, daily work, and web import processes, improving clarity and usability for field users.
- Revised the VitePress configuration to support dual language navigation and sidebar structures, enhancing user experience across different locales.
- Introduced a new developer sidebar for better access to technical documentation, streamlining the development process.

These changes significantly improve the accessibility and organization of documentation, providing a better experience for both users and developers.

.cursor/rules/user-docs.mdc

@@ -28,6 +28,10 @@ apps/docs-dev/src/user/mobile/
 
 Register new pages in `src/.vitepress/config.mts` sidebar/nav.
 
+## Languages
+
+User guides ship in **English** (root) and **Bahasa Indonesia** (`src/id/`). When you add or edit a user page, update both locales. Keep in-app labels from web `languages/id` JSON and mobile `app_localizations_id.dart`.
+
 Do **not** add new pages under the legacy architecture sidebar paths (`/packages/*`, `/apps/desktop/*`, `/setup`, `/overview`). Those stay until a later migration; do not expand them.
 
 Existing user how-tos (e.g. `src/apps/web/SALES_WORKFLOW.md`): keep user-facing; when editing, convert Mermaid to PlantUML and remove emoji.

apps/docs-dev/src/.vitepress/config.mts

@@ -2,6 +2,34 @@ import { defineConfig } from 'vitepress';
 import { withMermaid } from 'vitepress-plugin-mermaid';
 import { plantumlPlugin } from './plantuml';
 
+const giteaIcon = {
+  svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><title>Gitea</title><path d="M4.209 4.603c-0.247 0 -0.525 0.02 -0.84 0.088 -0.333 0.07 -1.28 0.283 -2.054 1.027C-0.403 7.25 0.035 9.685 0.089 10.052c0.065 0.446 0.263 1.687 1.21 2.768 1.749 2.141 5.513 2.092 5.513 2.092s0.462 1.103 1.168 2.119c0.955 1.263 1.936 2.248 2.89 2.367 2.406 0 7.212 -0.004 7.212 -0.004s0.458 0.004 1.08 -0.394c0.535 -0.324 1.013 -0.893 1.013 -0.893s0.492 -0.527 1.18 -1.73c0.21 -0.37 0.385 -0.729 0.538 -1.068 0 0 2.107 -4.471 2.107 -8.823 -0.042 -1.318 -0.367 -1.55 -0.443 -1.627 -0.156 -0.156 -0.366 -0.153 -0.366 -0.153s-4.475 0.252 -6.792 0.306c-0.508 0.011 -1.012 0.023 -1.512 0.027v4.474l-0.634 -0.301c0 -1.39 -0.004 -4.17 -0.004 -4.17 -1.107 0.016 -3.405 -0.084 -3.405 -0.084s-5.399 -0.27 -5.987 -0.324c-0.187 -0.011 -0.401 -0.032 -0.648 -0.032zm0.354 1.832h0.111s0.271 2.269 0.6 3.597C5.549 11.147 6.22 13 6.22 13s-0.996 -0.119 -1.641 -0.348c-0.99 -0.324 -1.409 -0.714 -1.409 -0.714s-0.73 -0.511 -1.096 -1.52C1.444 8.73 2.021 7.7 2.021 7.7s0.32 -0.859 1.47 -1.145c0.395 -0.106 0.863 -0.12 1.072 -0.12zm8.33 2.554c0.26 0.003 0.509 0.127 0.509 0.127l0.868 0.422 -0.529 1.075a0.686 0.686 0 0 0 -0.614 0.359 0.685 0.685 0 0 0 0.072 0.756l-0.939 1.924a0.69 0.69 0 0 0 -0.66 0.527 0.687 0.687 0 0 0 0.347 0.763 0.686 0.686 0 0 0 0.867 -0.206 0.688 0.688 0 0 0 -0.069 -0.882l0.916 -1.874a0.667 0.667 0 0 0 0.237 -0.02 0.657 0.657 0 0 0 0.271 -0.137 8.826 8.826 0 0 1 1.016 0.512 0.761 0.761 0 0 1 0.286 0.282c0.073 0.21 -0.073 0.569 -0.073 0.569 -0.087 0.29 -0.702 1.55 -0.702 1.55a0.692 0.692 0 0 0 -0.676 0.477 0.681 0.681 0 1 0 1.157 -0.252c0.073 -0.141 0.141 -0.282 0.214 -0.431 0.19 -0.397 0.515 -1.16 0.515 -1.16 0.035 -0.066 0.218 -0.394 0.103 -0.814 -0.095 -0.435 -0.48 -0.638 -0.48 -0.638 -0.467 -0.301 -1.116 -0.58 -1.116 -0.58s0 -0.156 -0.042 -0.27a0.688 0.688 0 0 0 -0.148 -0.241l0.516 -1.062 2.89 1.401s0.48 0.218 0.583 0.619c0.073 0.282 -0.019 0.534 -0.069 0.657 -0.24 0.587 -2.1 4.317 -2.1 4.317s-0.232 0.554 -0.748 0.588a1.065 1.065 0 0 1 -0.393 -0.045l-0.202 -0.08 -4.31 -2.1s-0.417 -0.218 -0.49 -0.596c-0.083 -0.31 0.104 -0.691 0.104 -0.691l2.073 -4.272s0.183 -0.37 0.466 -0.497a0.855 0.855 0 0 1 0.35 -0.077z" fill="currentColor" stroke-width="1"></path></svg>',
+};
+
+const developerSidebar = {
+  text: 'Developer reference',
+  collapsed: true,
+  items: [
+    { text: 'Project Overview', link: '/overview' },
+    { text: 'Development Setup', link: '/setup' },
+    { text: 'API Engine', link: '/packages/core-api' },
+    { text: 'Data Transformers', link: '/packages/core-api/transformers' },
+    { text: 'Event Bus System', link: '/packages/core-events/' },
+    { text: 'Storage & Persistence', link: '/packages/core-storage/' },
+    { text: 'I18n & Localization', link: '/packages/core-i18n/' },
+    { text: 'UI Overview', link: '/packages/ui/' },
+    { text: 'App Layout', link: '/packages/ui/CORE-APP-SHELL' },
+    { text: 'Action Tools', link: '/packages/ui/ACTION-TOOLS' },
+    { text: 'Form Primitives', link: '/packages/ui/FORM-COMPONENTS' },
+    { text: 'Web Overview', link: '/apps/web/' },
+    { text: 'Sales Workflow (legacy)', link: '/apps/web/SALES_WORKFLOW' },
+    { text: 'Desktop Overview', link: '/apps/desktop/' },
+    { text: 'Lifecycle & Configuration', link: '/apps/desktop/CONFIGURATION' },
+    { text: 'IPC & Bridge Architecture', link: '/apps/desktop/IPC_ARCHITECTURE' },
+    { text: 'Distribution & Auto-Update', link: '/apps/desktop/AUTO_UPDATER' },
+  ],
+};
+
 const config = withMermaid(
   defineConfig({
     title: 'TrackGo',
@@ -12,78 +40,137 @@ const config = withMermaid(
         plantumlPlugin(md);
       },
     },
+    locales: {
+      root: {
+        label: 'English',
+        lang: 'en',
+        themeConfig: {
+          nav: [
+            { text: 'User guides', link: '/user/' },
+            { text: 'Web', link: '/user/web/' },
+            { text: 'Mobile', link: '/user/mobile/' },
+          ],
+          sidebar: [
+            {
+              text: 'User guides',
+              items: [{ text: 'What is TrackGo', link: '/user/' }],
+            },
+            {
+              text: 'Web',
+              collapsed: false,
+              items: [
+                { text: 'Overview', link: '/user/web/' },
+                { text: 'Set up your company', link: '/user/web/setup' },
+                { text: 'Plans and visits', link: '/user/web/plans' },
+                { text: 'Sales workflow', link: '/user/web/sales-workflow' },
+                { text: 'Logistics', link: '/user/web/logistics' },
+                { text: 'Timeline', link: '/user/web/timeline' },
+                { text: 'Import CSV', link: '/user/web/import' },
+              ],
+            },
+            {
+              text: 'Mobile',
+              collapsed: false,
+              items: [
+                { text: 'Overview', link: '/user/mobile/' },
+                { text: 'Check in', link: '/user/mobile/check-in' },
+                { text: 'Daily work', link: '/user/mobile/daily-work' },
+              ],
+            },
+            developerSidebar,
+          ],
+        },
+      },
+      id: {
+        label: 'Bahasa Indonesia',
+        lang: 'id',
+        link: '/id/',
+        description: 'Panduan pengguna TrackGo untuk web dan mobile',
+        themeConfig: {
+          nav: [
+            { text: 'Panduan pengguna', link: '/id/user/' },
+            { text: 'Web', link: '/id/user/web/' },
+            { text: 'Mobile', link: '/id/user/mobile/' },
+          ],
+          sidebar: [
+            {
+              text: 'Panduan pengguna',
+              items: [{ text: 'Apa itu TrackGo', link: '/id/user/' }],
+            },
+            {
+              text: 'Web',
+              collapsed: false,
+              items: [
+                { text: 'Ringkasan', link: '/id/user/web/' },
+                { text: 'Siapkan perusahaan', link: '/id/user/web/setup' },
+                { text: 'Rencana dan kunjungan', link: '/id/user/web/plans' },
+                { text: 'Alur penjualan', link: '/id/user/web/sales-workflow' },
+                { text: 'Logistik', link: '/id/user/web/logistics' },
+                { text: 'Timeline', link: '/id/user/web/timeline' },
+                { text: 'Impor CSV', link: '/id/user/web/import' },
+              ],
+            },
+            {
+              text: 'Mobile',
+              collapsed: false,
+              items: [
+                { text: 'Ringkasan', link: '/id/user/mobile/' },
+                { text: 'Check-in', link: '/id/user/mobile/check-in' },
+                { text: 'Kerja harian', link: '/id/user/mobile/daily-work' },
+              ],
+            },
+          ],
+          outline: { label: 'Di halaman ini', level: [2, 3] },
+          docFooter: {
+            prev: 'Halaman sebelumnya',
+            next: 'Halaman berikutnya',
+          },
+          darkModeSwitchLabel: 'Tema',
+          lightModeSwitchTitle: 'Ubah ke mode terang',
+          darkModeSwitchTitle: 'Ubah ke mode gelap',
+          sidebarMenuLabel: 'Menu',
+          returnToTopLabel: 'Kembali ke atas',
+          langMenuLabel: 'Ubah bahasa',
+        },
+      },
+    },
     themeConfig: {
       search: {
         provider: 'local',
         options: {
           detailedView: true,
+          locales: {
+            id: {
+              translations: {
+                button: {
+                  buttonText: 'Cari',
+                  buttonAriaLabel: 'Cari',
+                },
+                modal: {
+                  displayDetails: 'Tampilkan tampilan terperinci',
+                  resetButtonTitle: 'Reset pencarian',
+                  backButtonTitle: 'Tutup pencarian',
+                  noResultsText: 'Tidak ada hasil untuk',
+                  footer: {
+                    selectText: 'pilih',
+                    selectKeyAriaLabel: 'Enter',
+                    navigateText: 'navigasi',
+                    navigateUpKeyAriaLabel: 'Panah atas',
+                    navigateDownKeyAriaLabel: 'Panah bawah',
+                    closeText: 'tutup',
+                    closeKeyAriaLabel: 'Escape',
+                  },
+                },
+              },
+            },
+          },
         },
       },
       logo: '/logo.svg',
-      nav: [
-        { text: 'User guides', link: '/user/' },
-        { text: 'Web', link: '/user/web/' },
-        { text: 'Mobile', link: '/user/mobile/' },
-      ],
-
-      sidebar: [
-        {
-          text: 'User guides',
-          items: [{ text: 'What is TrackGo', link: '/user/' }],
-        },
-        {
-          text: 'Web',
-          collapsed: false,
-          items: [
-            { text: 'Overview', link: '/user/web/' },
-            { text: 'Set up your company', link: '/user/web/setup' },
-            { text: 'Plans and visits', link: '/user/web/plans' },
-            { text: 'Sales workflow', link: '/user/web/sales-workflow' },
-            { text: 'Logistics', link: '/user/web/logistics' },
-            { text: 'Timeline', link: '/user/web/timeline' },
-            { text: 'Import CSV', link: '/user/web/import' },
-          ],
-        },
-        {
-          text: 'Mobile',
-          collapsed: false,
-          items: [
-            { text: 'Overview', link: '/user/mobile/' },
-            { text: 'Check in', link: '/user/mobile/check-in' },
-            { text: 'Daily work', link: '/user/mobile/daily-work' },
-          ],
-        },
-        {
-          text: 'Developer reference',
-          collapsed: true,
-          items: [
-            { text: 'Project Overview', link: '/overview' },
-            { text: 'Development Setup', link: '/setup' },
-            { text: 'API Engine', link: '/packages/core-api' },
-            { text: 'Data Transformers', link: '/packages/core-api/transformers' },
-            { text: 'Event Bus System', link: '/packages/core-events/' },
-            { text: 'Storage & Persistence', link: '/packages/core-storage/' },
-            { text: 'I18n & Localization', link: '/packages/core-i18n/' },
-            { text: 'UI Overview', link: '/packages/ui/' },
-            { text: 'App Layout', link: '/packages/ui/CORE-APP-SHELL' },
-            { text: 'Action Tools', link: '/packages/ui/ACTION-TOOLS' },
-            { text: 'Form Primitives', link: '/packages/ui/FORM-COMPONENTS' },
-            { text: 'Web Overview', link: '/apps/web/' },
-            { text: 'Sales Workflow (legacy)', link: '/apps/web/SALES_WORKFLOW' },
-            { text: 'Desktop Overview', link: '/apps/desktop/' },
-            { text: 'Lifecycle & Configuration', link: '/apps/desktop/CONFIGURATION' },
-            { text: 'IPC & Bridge Architecture', link: '/apps/desktop/IPC_ARCHITECTURE' },
-            { text: 'Distribution & Auto-Update', link: '/apps/desktop/AUTO_UPDATER' },
-          ],
-        },
-      ],
-
       outline: { level: [2, 3] },
       socialLinks: [
         {
-          icon: {
-            svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><title>Gitea</title><path d="M4.209 4.603c-0.247 0 -0.525 0.02 -0.84 0.088 -0.333 0.07 -1.28 0.283 -2.054 1.027C-0.403 7.25 0.035 9.685 0.089 10.052c0.065 0.446 0.263 1.687 1.21 2.768 1.749 2.141 5.513 2.092 5.513 2.092s0.462 1.103 1.168 2.119c0.955 1.263 1.936 2.248 2.89 2.367 2.406 0 7.212 -0.004 7.212 -0.004s0.458 0.004 1.08 -0.394c0.535 -0.324 1.013 -0.893 1.013 -0.893s0.492 -0.527 1.18 -1.73c0.21 -0.37 0.385 -0.729 0.538 -1.068 0 0 2.107 -4.471 2.107 -8.823 -0.042 -1.318 -0.367 -1.55 -0.443 -1.627 -0.156 -0.156 -0.366 -0.153 -0.366 -0.153s-4.475 0.252 -6.792 0.306c-0.508 0.011 -1.012 0.023 -1.512 0.027v4.474l-0.634 -0.301c0 -1.39 -0.004 -4.17 -0.004 -4.17 -1.107 0.016 -3.405 -0.084 -3.405 -0.084s-5.399 -0.27 -5.987 -0.324c-0.187 -0.011 -0.401 -0.032 -0.648 -0.032zm0.354 1.832h0.111s0.271 2.269 0.6 3.597C5.549 11.147 6.22 13 6.22 13s-0.996 -0.119 -1.641 -0.348c-0.99 -0.324 -1.409 -0.714 -1.409 -0.714s-0.73 -0.511 -1.096 -1.52C1.444 8.73 2.021 7.7 2.021 7.7s0.32 -0.859 1.47 -1.145c0.395 -0.106 0.863 -0.12 1.072 -0.12zm8.33 2.554c0.26 0.003 0.509 0.127 0.509 0.127l0.868 0.422 -0.529 1.075a0.686 0.686 0 0 0 -0.614 0.359 0.685 0.685 0 0 0 0.072 0.756l-0.939 1.924a0.69 0.69 0 0 0 -0.66 0.527 0.687 0.687 0 0 0 0.347 0.763 0.686 0.686 0 0 0 0.867 -0.206 0.688 0.688 0 0 0 -0.069 -0.882l0.916 -1.874a0.667 0.667 0 0 0 0.237 -0.02 0.657 0.657 0 0 0 0.271 -0.137 8.826 8.826 0 0 1 1.016 0.512 0.761 0.761 0 0 1 0.286 0.282c0.073 0.21 -0.073 0.569 -0.073 0.569 -0.087 0.29 -0.702 1.55 -0.702 1.55a0.692 0.692 0 0 0 -0.676 0.477 0.681 0.681 0 1 0 1.157 -0.252c0.073 -0.141 0.141 -0.282 0.214 -0.431 0.19 -0.397 0.515 -1.16 0.515 -1.16 0.035 -0.066 0.218 -0.394 0.103 -0.814 -0.095 -0.435 -0.48 -0.638 -0.48 -0.638 -0.467 -0.301 -1.116 -0.58 -1.116 -0.58s0 -0.156 -0.042 -0.27a0.688 0.688 0 0 0 -0.148 -0.241l0.516 -1.062 2.89 1.401s0.48 0.218 0.583 0.619c0.073 0.282 -0.019 0.534 -0.069 0.657 -0.24 0.587 -2.1 4.317 -2.1 4.317s-0.232 0.554 -0.748 0.588a1.065 1.065 0 0 1 -0.393 -0.045l-0.202 -0.08 -4.31 -2.1s-0.417 -0.218 -0.49 -0.596c-0.083 -0.31 0.104 -0.691 0.104 -0.691l2.073 -4.272s0.183 -0.37 0.466 -0.497a0.855 0.855 0 0 1 0.35 -0.077z" fill="currentColor" stroke-width="1"></path></svg>',
-          },
+          icon: giteaIcon,
           link: 'https://git.eigen.co.id/eigen/fe-monorepo-template',
         },
       ],

apps/docs-dev/src/.vitepress/theme/custom.css

@@ -145,3 +145,170 @@
   display: block;
   margin: 0 auto;
 }
+
+.VPHome {
+  position: relative;
+  z-index: 0;
+}
+
+.VPHome::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100vw;
+  max-width: 1200px;
+  height: 800px;
+  background: radial-gradient(ellipse at top, var(--vp-c-brand-soft) 0%, transparent 70%);
+  filter: blur(100px);
+  z-index: -1;
+  pointer-events: none;
+}
+
+.VPHome::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 600px;
+  background-image: radial-gradient(var(--vp-c-divider) 1px, transparent 1px);
+  background-size: 24px 24px;
+  background-position: top center;
+  z-index: -2;
+  pointer-events: none;
+  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
+  mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
+}
+
+.custom-divider {
+  width: 100%;
+  height: 1px;
+  background-color: var(--vp-c-divider);
+  margin: 80px 0 64px 0;
+}
+
+.bento-container {
+  max-width: 1152px;
+  margin: auto;
+  padding: 0 24px;
+  position: relative;
+}
+
+.bento-header {
+  text-align: center;
+  margin-bottom: 64px;
+}
+
+.bento-header h2 {
+  font-size: 2.5em;
+  font-weight: 700;
+  margin-bottom: 20px;
+  color: var(--vp-c-text-1);
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+  border-top: none;
+  padding-top: 0;
+  margin-top: 0;
+}
+
+.bento-header p {
+  font-size: 1.15em;
+  color: var(--vp-c-text-2);
+  max-width: 760px;
+  margin: 0 auto;
+  line-height: 1.6;
+}
+
+.bento-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 24px;
+}
+
+.bento-card {
+  background: var(--vp-c-bg-soft);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 16px;
+  padding: 40px 32px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.bento-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 20px 25px -5px rgba(101, 46, 217, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  border-color: var(--vp-c-brand-1);
+}
+
+.bento-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  background: var(--vp-c-bg-mute);
+  color: var(--vp-c-brand-1);
+  margin-bottom: 24px;
+  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
+}
+
+.bento-icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+.bento-card:hover .bento-icon {
+  background: var(--vp-c-brand-1);
+  color: #ffffff;
+  transform: scale(1.05);
+}
+
+.bento-card h3 {
+  font-size: 1.3em;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  margin-top: 0;
+  margin-bottom: 16px;
+}
+
+.bento-card p {
+  font-size: 1em;
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+  margin: 0;
+}
+
+@media (max-width: 768px) {
+  .custom-divider {
+    margin: 48px 0;
+  }
+  .bento-header {
+    margin-bottom: 48px;
+  }
+  .bento-header h2 {
+    font-size: 2em;
+  }
+  .bento-header p {
+    font-size: 1.05em;
+  }
+  .bento-card {
+    padding: 32px 24px;
+  }
+}
+
+@media (max-width: 480px) {
+  .bento-grid {
+    grid-template-columns: 1fr;
+  }
+  .bento-card {
+    padding: 24px;
+  }
+}

apps/docs-dev/src/id/index.md

@@ -0,0 +1,75 @@
+---
+layout: home
+
+hero:
+  name: TrackGo
+  text: Panduan penjualan dan logistik
+  tagline: Cara operator, sales, dan driver memakai TrackGo di web dan di mobile.
+  actions:
+    - theme: brand
+      text: Panduan pengguna
+      link: /id/user/
+    - theme: alt
+      text: Web
+      link: /id/user/web/
+
+features:
+  - title: Web
+    details: Siapkan data perusahaan, pengguna, rencana, faktur, pembayaran, surat jalan, dan riwayat aktivitas.
+    link: /id/user/web/
+    linkText: Panduan web
+  - title: Mobile
+    details: Check-in di cabang, ikuti rencana hari ini, kunjungi pelanggan, dan catat pembayaran di lapangan.
+    link: /id/user/mobile/
+    linkText: Panduan mobile
+  - title: Penjualan
+    details: Dari permintaan atau pesanan penjualan sampai faktur dan pembayaran.
+    link: /id/user/web/sales-workflow
+    linkText: Alur penjualan
+  - title: Rencana
+    details: Buat rencana harian sekali jalan, atau generate rencana dari siklus kunjungan mingguan.
+    link: /id/user/web/plans
+    linkText: Rencana dan kunjungan
+---
+
+<script setup>
+import { ShoppingCart, Truck, Smartphone, MapPin } from 'lucide-vue-next'
+</script>
+
+<div class="custom-divider"></div>
+<div class="bento-container">
+  <div class="bento-header">
+    <h2>Cara TrackGo dipakai</h2>
+    <p>Operator menyiapkan data master dan rencana harian di web. Sales dan driver check-in di mobile, lalu mengerjakan rencana: mengunjungi pelanggan, menagih faktur, atau menyelesaikan pengiriman.</p>
+  </div>
+  <div class="bento-grid">
+    <div class="bento-card">
+      <div class="bento-icon">
+        <ShoppingCart :size="24" />
+      </div>
+      <h3>Penjualan di web</h3>
+      <p>Buat permintaan, pesanan, faktur, dan pembayaran. Lampirkan faktur ke rencana penjualan agar tim lapangan tahu apa yang harus ditagih.</p>
+    </div>
+    <div class="bento-card">
+      <div class="bento-icon">
+        <Truck :size="24" />
+      </div>
+      <h3>Logistik di web</h3>
+      <p>Kelola surat jalan dan rencana pengiriman. Lengkapi kuantitas terkirim agar pesanan bisa selesai.</p>
+    </div>
+    <div class="bento-card">
+      <div class="bento-icon">
+        <Smartphone :size="24" />
+      </div>
+      <h3>Kerja lapangan di mobile</h3>
+      <p>Clock in di cabang awal rencana, buka destinasi hari ini, check-in ke pelanggan, lalu catat pembayaran.</p>
+    </div>
+    <div class="bento-card">
+      <div class="bento-icon">
+        <MapPin :size="24" />
+      </div>
+      <h3>Riwayat aktivitas</h3>
+      <p>Tinjau jejak dan peristiwa lapangan hari itu di Timeline. Streaming peta langsung di web masih Segera hadir.</p>
+    </div>
+  </div>
+</div>

apps/docs-dev/src/id/user/index.md

@@ -0,0 +1,60 @@
+# Apa itu TrackGo
+
+TrackGo adalah platform penjualan dan logistik. Staf kantor memakai aplikasi **web**. Sales, driver, dan crew bekerja dari aplikasi **mobile**.
+
+Siapkan dulu perusahaan, orang, produk, dan pelanggan. Setelah itu rencanakan kunjungan harian, lampirkan faktur atau surat jalan, lalu ikuti aktivitas lapangan.
+
+## Siapa yang memakai
+
+| Peran | Tempat kerja | Tugas umum |
+| --- | --- | --- |
+| Operator / admin | Web | Data perusahaan, pengguna, hak akses, rencana, dokumen |
+| Sales | Web dan mobile | Permintaan, pesanan, faktur, pembayaran, kunjungan pelanggan |
+| Driver / crew | Web (rencana) dan mobile | Rencana pengiriman, surat jalan, pemberhentian pelanggan |
+
+Menu yang bisa dibuka tergantung **hak akses** yang ditetapkan ke pengguna. Jika menu tidak muncul, minta administrator memberi izin **Lihat** untuk area itu.
+
+## Alur biasa
+
+```plantuml
+@startuml
+actor Operator
+actor Field as "Sales atau driver"
+
+Operator -> Web: Siapkan perusahaan, pengguna, dan data master
+Operator -> Web: Buat siklus atau rencana sekali jalan
+Operator -> Web: Lampirkan faktur atau surat jalan
+Field -> Mobile: Clock in di cabang awal rencana
+Field -> Mobile: Kunjungi pelanggan di rencana
+Field -> Mobile: Tagih pembayaran atau ikuti tugas packing
+Operator -> Web: Tinjau dokumen dan Timeline
+@enduml
+```
+
+1. Tambahkan pengaturan perusahaan, cabang, divisi, pelanggan, produk, dan karyawan.
+2. Buat pengguna dan hak akses agar setiap orang hanya melihat yang dibutuhkan.
+3. Buat **siklus mingguan** (berulang) atau **rencana sekali jalan** untuk satu tanggal. Lampirkan faktur (penjualan) atau surat jalan (logistik).
+4. Tim lapangan check-in di cabang lewat mobile, lalu mengerjakan rencana.
+5. Sales mencatat pembayaran di mobile atau web. Driver menyelesaikan surat jalan di web.
+
+## Dokumen penjualan
+
+Alur penjualan:
+
+**Permintaan penjualan (opsional) → Pesanan penjualan → Faktur → Pembayaran**
+
+Memproses pesanan juga dapat membuat surat jalan untuk pengiriman. Detail: [Alur penjualan](/id/user/web/sales-workflow).
+
+## Web dan mobile
+
+- [Web](/id/user/web/) — penyiapan, rencana, penjualan, logistik, timeline, impor CSV
+- [Mobile](/id/user/mobile/) — masuk, check-in cabang, rencana hari ini, pelanggan, pembayaran
+
+## Segera hadir
+
+Hal berikut belum ada di produk:
+
+- **Dasbor** web (menu ada; halamannya masih placeholder)
+- Posisi **langsung** di peta web (Timeline memutar ulang rekaman satu hari)
+- Pembaruan **status surat jalan** di mobile (tugas logistik hanya tercantum, tidak diubah di ponsel)
+- Lupa kata sandi, ingat saya, dan daftar akun di layar masuk

apps/docs-dev/src/id/user/mobile/check-in.md

@@ -0,0 +1,40 @@
+<script setup>
+import { MapPin } from 'lucide-vue-next'
+</script>
+
+# Check-in
+
+<p class="doc-lead"><MapPin :size="20" class="doc-icon" /> Clock in di cabang awal rencana sebelum kerja lapangan</p>
+
+Sales dan driver **clock in di cabang awal rencana** sebelum mulai kerja lapangan. Aplikasi tidak memblokir penelusuran Beranda, Rencana, atau Pelanggan tanpa check-in, tetapi buat pelanggan, check-in kunjungan, dokumen penjualan, dan pembayaran tetap nonaktif sampai Anda bertugas.
+
+## Sebelum clock in
+
+Anda membutuhkan **rencana hari ini** dengan cabang awal. Jika tidak ada rencana, Clock In tidak tersedia dan layar menjelaskan tidak ada rencana hari ini. Operator harus [membuat atau men-generate rencana](/id/user/web/plans) di web.
+
+## Clock in dan clock out
+
+1. Dari Beranda, ketuk **Check-in sekarang** jika muncul **Anda belum check-in**, atau buka layar check-in.
+2. Pastikan lokasi di peta (OpenStreetMap). Pakai recenter jika perlu.
+3. Ketuk **Clock In Sekarang**. Aplikasi mengirim koordinat GPS untuk **cabang awal** rencana.
+4. Saat bertugas, aplikasi merekam jejak lokasi di latar belakang (interval berasal dari pengaturan GPS perusahaan).
+5. Ketuk **Clock Out** saat shift selesai. Pelacakan berhenti.
+
+Layar menampilkan nama, tanggal, koordinat, serta waktu clock-in / clock-out.
+
+Lingkaran di peta hanya panduan visual. Tombol Clock In aktif jika rencana ada dan Anda belum check-in — tidak diblokir karena berdiri di luar lingkaran itu.
+
+## Setelah check-in
+
+Selama kehadiran cabang terbuka:
+
+- Anda dapat membuat pelanggan
+- Anda dapat check-in ke pelanggan pada kunjungan
+- Aksi penjualan (permintaan, pesanan, pembayaran) juga membutuhkan check-in **kunjungan pelanggan** untuk pelanggan itu
+
+Jika GPS menjauh terlalu jauh dari kunjungan pelanggan, Beranda dapat menampilkan peringatan checkout agar Anda check-out dari kunjungan.
+
+## Segera hadir
+
+- Check-in lewat **NFC** atau **QR** (layar selalu memakai GPS)
+- Menegakkan radius check-in sebelum tombol Clock In diaktifkan

apps/docs-dev/src/id/user/mobile/daily-work.md

@@ -0,0 +1,83 @@
+<script setup>
+import { Calendar } from 'lucide-vue-next'
+</script>
+
+# Kerja harian
+
+<p class="doc-lead"><Calendar :size="20" class="doc-icon" /> Beranda, Rencana, dan Pelanggan setelah Anda bertugas</p>
+
+Setelah [check-in cabang](/id/user/mobile/check-in), pakai Beranda, Rencana, dan Pelanggan untuk mengerjakan hari itu.
+
+## Beranda
+
+Beranda punya dua tab: **Rencana** dan **Timeline**.
+
+**Tab Rencana**
+
+- Sapaan dan jabatan (Sales, Driver, atau Crew)
+- Banner jika Anda belum check-in di cabang
+- Destinasi hari ini — **Buka** memulai kunjungan pelanggan
+- Kartu kunjungan aktif dengan checkout
+- **Tugas Hari Ini** — faktur (sales) atau kode surat jalan (driver/crew)
+
+**Tab Timeline**
+
+Peristiwa lapangan hari ini dikelompokkan per pelanggan (check-in/out, dokumen penjualan, pelanggan baru). Tarik ke bawah untuk menyegarkan.
+
+Keluar ada di menu avatar.
+
+### Segera hadir di Beranda
+
+- Total **kinerja** kerja (jumlah pelanggan / faktur / pembayaran / packing tidak ditampilkan di layar)
+- Ikon Pesan dan Notifikasi belum berfungsi
+
+## Rencana
+
+Tab **Rencana** menampilkan destinasi hari ini. Buka pemberhentian untuk ke layar kunjungan pelanggan.
+
+Jika rencana ada, pakai **Tambah pelanggan ke rencana**:
+
+1. Cari pelanggan yang belum ada di rencana.
+2. Untuk rencana **penjualan**, Anda dapat memilih faktur belum lunas untuk dilampirkan.
+3. Konfirmasi **Tambah ke rencana**.
+
+Anda tidak dapat membuat rencana harian baru di ponsel — hanya menambah ke rencana yang sudah ada.
+
+### Segera hadir di Rencana
+
+- Memilih **surat jalan** saat menambah pelanggan ke rencana logistik
+
+## Pelanggan
+
+Cari dan urutkan daftar menurut **Nama**, **Kode**, atau **Jarak**. Ketuk baris untuk profil.
+
+**Buat** (tombol FAB) hanya tersedia setelah check-in cabang. Formulir mencakup kode, nama, telepon, NFC ID (diketik), alamat, lokasi peta, dan kontak opsional.
+
+### Kunjungi pelanggan
+
+Buka destinasi dari rencana, atau buka rute kunjungan dari profil.
+
+1. Selesaikan **Check-in pelanggan (GPS)** ketika aksi penjualan terkunci.
+2. Kemudian Anda dapat memakai **Aksi penjualan**.
+
+Tanpa check-in cabang Anda melihat **Check-in cabang diperlukan**. Tanpa check-in kunjungan untuk pelanggan itu, Anda diminta check-in ke pelanggan.
+
+### Permintaan dan pesanan penjualan
+
+**Buat permintaan penjualan** dan **Buat pesanan penjualan (tanpa packing)** mengirim dokumen dengan **produk pertama yang dimuat** dan kuantitas **1**. Tidak ada pemilih produk atau keranjang di ponsel.
+
+Untuk baris item lengkap, buat dokumen di [web](/id/user/web/sales-workflow).
+
+### Pembayaran
+
+Faktur belum lunas di daftar profil/kunjungan punya **Buat pembayaran**.
+
+1. Pastikan kode faktur, status, dan saldo.
+2. Isi **jumlah** (dimulai dari sisa saldo) dan **catatan** opsional.
+3. Catat pembayaran. GPS dilampirkan jika tersedia.
+
+Jumlah harus lebih dari nol dan tidak melebihi saldo. Aturan check-in cabang + kunjungan pelanggan yang sama berlaku.
+
+## Yang dapat dilakukan driver hari ini
+
+Driver dan crew mengikuti rencana logistik dan melihat kode surat jalan di Beranda. **Mengubah status surat jalan di mobile masih Segera hadir** — selesaikan surat jalan di [web](/id/user/web/logistics).

apps/docs-dev/src/id/user/mobile/index.md

@@ -0,0 +1,54 @@
+<script setup>
+import { Smartphone } from 'lucide-vue-next'
+</script>
+
+# Ringkasan mobile
+
+<p class="doc-lead"><Smartphone :size="20" class="doc-icon" /> Aplikasi lapangan untuk sales, driver, dan crew</p>
+
+Aplikasi mobile TrackGo untuk **sales**, **driver**, dan **crew** di lapangan. Tab bawah: **Beranda**, **Rencana**, dan **Pelanggan**. Check-in cabang adalah layar terpisah.
+
+Jabatan karyawan menentukan rencana yang dimuat:
+
+| Jabatan | Jenis rencana | Tugas hari ini di Beranda |
+| --- | --- | --- |
+| Sales | Penjualan | Faktur pada rencana hari ini |
+| Driver atau crew | Logistik | Kode surat jalan pada rencana hari ini |
+
+Jika akun belum tertaut ke karyawan, Beranda dan Rencana menjelaskan bahwa profil belum tertaut.
+
+## Masuk
+
+1. Buka aplikasi.
+2. Masukkan **ID Karyawan** dan **Kata Sandi**.
+3. Ketuk **Masuk**.
+
+Aturan username: 3–32 karakter. Kata sandi: 8–72 karakter.
+
+## Hari kerja biasa
+
+```plantuml
+@startuml
+start
+:Masuk;
+:Buka Beranda atau Check-in;
+:Clock in di cabang awal rencana;
+:Buka rencana hari ini;
+:Check-in ke pelanggan;
+:Catat pembayaran atau buat dokumen penjualan;
+:Clock out kunjungan dan cabang;
+stop
+@enduml
+```
+
+1. [Check-in](/id/user/mobile/check-in) di cabang (wajib sebelum sebagian besar aksi lapangan).
+2. [Kerja harian](/id/user/mobile/daily-work) — rencana, pelanggan, kunjungan, pembayaran, timeline Beranda.
+
+## Segera hadir di layar masuk
+
+Kontrol ini terlihat tetapi belum berfungsi:
+
+- Ingat Saya
+- Lupa Kata Sandi
+- Masuk dengan Email atau Telepon
+- Daftar di Sini

apps/docs-dev/src/id/user/web/import.md

@@ -0,0 +1,29 @@
+<script setup>
+import { FileText } from 'lucide-vue-next'
+</script>
+
+# Impor CSV
+
+<p class="doc-lead"><FileText :size="20" class="doc-icon" /> Impor di daftar dokumen jika hak akses mencakup Impor</p>
+
+Anda dapat memuat banyak dokumen dari berkas **.csv** di halaman indeks berikut:
+
+| Dokumen | Menu |
+| --- | --- |
+| Permintaan penjualan | Penjualan → Aktivitas → Permintaan Penjualan |
+| Pesanan penjualan | Penjualan → Aktivitas → Pesanan Penjualan |
+| Faktur penjualan | Penjualan → Aktivitas → Faktur Penjualan |
+| Pembayaran penjualan | Penjualan → Aktivitas → Pembayaran Penjualan |
+| Surat jalan | Logistik → Aktivitas → Surat Jalan |
+
+## Cara impor
+
+1. Buka daftar.
+2. Klik **Import CSV** (tersembunyi jika Anda tidak punya **Impor** pada area itu).
+3. Pilih berkas `.csv` dan konfirmasi.
+
+Tidak ada wizard impor terpisah selain unggah berkas.
+
+## Yang tidak dapat diimpor di sini
+
+Data master (cabang, pelanggan, produk), pengguna, hak akses, siklus, dan rencana **tidak** punya tombol Import CSV. Buat catatan itu di layar masing-masing, atau generate rencana dari siklus.

apps/docs-dev/src/id/user/web/index.md

@@ -0,0 +1,40 @@
+<script setup>
+import { LayoutDashboard, MapPin, ShoppingCart, Truck, Settings } from 'lucide-vue-next'
+</script>
+
+# Ringkasan web
+
+<p class="doc-lead"><LayoutDashboard :size="20" class="doc-icon" /> Aplikasi browser dan desktop untuk operator, sales, dan logistik.</p>
+
+Masuk dengan **Username** dan **Password** di halaman masuk. Bahasa bisa diganti antara English dan Bahasa Indonesia.
+
+Setelah masuk, sidebar hanya menampilkan menu yang diizinkan hak akses Anda.
+
+## Menu
+
+| Menu | Ikon | Yang dikerjakan |
+| --- | --- | --- |
+| Dasbor | <LayoutDashboard :size="16" class="doc-icon" /> | Segera hadir |
+| Timeline | <MapPin :size="16" class="doc-icon" /> | Putar ulang jejak GPS dan aktivitas lapangan karyawan sales untuk satu hari |
+| Penjualan | <ShoppingCart :size="16" class="doc-icon" /> | Karyawan, siklus, permintaan, pesanan, faktur, pembayaran, rencana, laporan |
+| Logistik | <Truck :size="16" class="doc-icon" /> | Driver dan crew, siklus, surat jalan, rencana, laporan |
+| Pengaturan | <Settings :size="16" class="doc-icon" /> | Cabang, divisi, pelanggan, produk, pengaturan perusahaan, pengguna, hak akses |
+
+## Urutan yang disarankan
+
+1. [Siapkan perusahaan](/id/user/web/setup) — data master, pengguna, dan hak akses
+2. [Rencana dan kunjungan](/id/user/web/plans) — rencana sekali jalan dan siklus mingguan
+3. [Alur penjualan](/id/user/web/sales-workflow) — permintaan, pesanan, faktur, pembayaran
+4. [Logistik](/id/user/web/logistics) — surat jalan dan rencana pengiriman
+5. [Timeline](/id/user/web/timeline) — riwayat aktivitas di peta
+6. [Impor CSV](/id/user/web/import) — unggah dokumen sekaligus
+
+## Laporan
+
+**Penjualan → Laporan Penjualan** dan **Logistik → Laporan Logistik** menampilkan tabel laporan dari server. Jika belum dikonfigurasi, halaman menyatakan tidak ada laporan.
+
+## Status dan izin
+
+Sebagian besar data master memakai **Draft**, **Aktif**, dan **Diarsipkan**. Dokumen penjualan dan logistik punya status sendiri (lihat masing-masing panduan).
+
+Tombol seperti Buat, Process, Submit, dan Approve hanya muncul jika hak akses Anda mencakup aksi itu (**Buat**, **Ubah**, **Hapus**, atau **Impor**).

apps/docs-dev/src/id/user/web/logistics.md

@@ -0,0 +1,74 @@
+<script setup>
+import { Truck, Package, Calendar } from 'lucide-vue-next'
+</script>
+
+# Logistik
+
+<p class="doc-lead"><Truck :size="20" class="doc-icon" /> Menu logistik untuk driver, crew, surat jalan, dan rencana pengiriman</p>
+
+Pakai Logistik jika Anda butuh dokumen pengiriman dan rute driver. Penjualan tetap memiliki permintaan, pesanan, faktur, dan pembayaran.
+
+## Karyawan dan siklus
+
+- **Logistik → Data → Karyawan** — jabatan **driver** dan **crew**
+- **Logistik → Data → Siklus Logistik** — templat kunjungan mingguan untuk karyawan itu
+
+Generate rencana harian dari siklus dengan cara yang sama seperti penjualan. Lihat [Rencana dan kunjungan](/id/user/web/plans).
+
+## Surat jalan
+
+<p class="doc-lead"><Package :size="18" class="doc-icon" /> Logistik → Aktivitas → Surat Jalan</p>
+
+Surat jalan dibuat ketika Anda **Process** pesanan penjualan dengan **Generate packing slip** tercentang. Anda juga dapat membuatnya sendiri dan menautkannya ke pesanan penjualan.
+
+Kolom umum: kode, tanggal, pelanggan, pesanan penjualan, lokasi, produk, catatan.
+
+```plantuml
+@startuml
+start
+if (Status Draft?) then (ya)
+  :Change status ke Processed\natau Cancel;
+endif
+if (Status Processed?) then (ya)
+  :Complete;
+  :Isi kuantitas terkirim per produk;
+  if (Ada sisa kuantitas?) then (ya)
+    :Surat jalan baru dibuat\nuntuk sisa;
+  else (tidak)
+    :Surat jalan Completed;
+  endif
+endif
+stop
+@enduml
+```
+
+1. Jika status **Draft**, pakai **Change status** untuk pindah ke **Processed**, atau **Cancel**. Tidak ada tombol **Process** di sini.
+2. Saat **Processed**, klik **Complete**. Isi **kuantitas terkirim** untuk setiap produk. Sisa kuantitas membuka **surat jalan baru**.
+3. Anda dapat **Cancel** surat jalan saat **Draft** atau **Processed**.
+
+Ketika semua surat jalan terkait selesai, pesanan penjualan terkait dapat pindah ke **Completed**. Jika packing dilewati pada pesanan, pesanan tidak menunggu surat jalan.
+
+### Aksi status
+
+| Status saat ini | Tombol | Change status |
+| --- | --- | --- |
+| Draft | Cancel | Processed, Cancelled |
+| Processed | Complete, Cancel | Completed, Cancelled |
+| Completed | — | — |
+| Cancelled | — | — |
+
+**Complete** selalu meminta kuantitas terkirim.
+
+Anda dapat [impor surat jalan dari CSV](/id/user/web/import) jika hak akses mencakup **Impor**.
+
+## Rencana logistik
+
+<p class="doc-lead"><Calendar :size="18" class="doc-icon" /> Logistik → Aktivitas → Rencana Logistik</p>
+
+Model rencana sama seperti penjualan: karyawan, tanggal, cabang awal/akhir, pelanggan. Lampirkan **surat jalan** bukan faktur.
+
+Driver dan crew membuka rencana hari ini di [mobile](/id/user/mobile/daily-work). Beranda menampilkan kode surat jalan sebagai tugas hari ini.
+
+## Segera hadir
+
+**Memperbarui status surat jalan di mobile** belum tersedia. Driver melihat kode packing yang ditugaskan di Beranda; mereka menyelesaikan surat jalan di aplikasi web (atau operator yang mengerjakannya).

apps/docs-dev/src/id/user/web/plans.md

@@ -0,0 +1,68 @@
+<script setup>
+import { Calendar, Repeat } from 'lucide-vue-next'
+</script>
+
+# Rencana dan kunjungan
+
+<p class="doc-lead"><Calendar :size="20" class="doc-icon" /> Penjualan → Aktivitas → Rencana Penjualan, atau Logistik → Aktivitas → Rencana Logistik</p>
+
+**Rencana** adalah pekerjaan satu karyawan untuk **satu tanggal**: cabang awal, cabang akhir, pelanggan yang dikunjungi, dan dokumen yang harus ditagih atau dikirim.
+
+Tidak ada saklar pengulangan di formulir rencana. Pekerjaan berulang memakai **siklus**, lalu **Generate**.
+
+```plantuml
+@startuml
+start
+if (Perlu rute mingguan berulang?) then (ya)
+  :Buat siklus dengan rute hari kerja;
+  :Generate rencana untuk rentang tanggal;
+else (tidak)
+  :Buat rencana sekali jalan untuk satu tanggal;
+endif
+:Lampirkan faktur (penjualan) atau surat jalan (logistik);
+:Tim lapangan membuka rencana di mobile;
+stop
+@enduml
+```
+
+## Rencana sekali jalan
+
+**Deskripsi halaman buat di aplikasi:** "Buat rencana harian sekali jalan untuk karyawan."
+
+1. Buka **Rencana Penjualan** atau **Rencana Logistik**.
+2. Klik **Buat**.
+3. Pilih **karyawan**, **tanggal** (hari ini atau setelahnya), **cabang awal**, dan **cabang akhir**.
+4. Tambahkan **pelanggan** sebagai destinasi (urutan berpengaruh pada rute).
+5. Setelah pelanggan dipilih:
+   - Rencana penjualan: lampirkan **faktur** pelanggan itu
+   - Rencana logistik: lampirkan **surat jalan** pelanggan itu
+6. Simpan. Status **Draft**, **Aktif**, atau **Diarsipkan** seperti data master lain.
+
+Anda dapat meninjau pratinjau pelanggan dan dokumen terlampir di formulir.
+
+Menyimpan rencana penjualan **tidak** mengubah status faktur.
+
+## Siklus mingguan (berulang)
+
+<p class="doc-lead"><Repeat :size="18" class="doc-icon" /> Penjualan → Data → Siklus Penjualan, atau Logistik → Data → Siklus Logistik</p>
+
+Siklus adalah **templat kunjungan mingguan** untuk satu karyawan: nomor siklus dan, untuk setiap hari, apakah hari itu aktif, cabang awal/akhir, dan pelanggan.
+
+1. Buat siklus untuk karyawan.
+2. Aktifkan hari kerja dan isi rutenya.
+3. Setel siklus ke **Aktif**.
+
+## Generate rencana dari siklus
+
+Di daftar rencana, klik **Generate**.
+
+1. Pilih **karyawan**.
+2. Pilih tanggal **dari** dan **sampai**.
+3. Konfirmasi. Aplikasi membuat rencana harian dari siklus dan melaporkan berapa yang **dibuat** dan **dilewati** (misalnya jika rencana sudah ada).
+
+## Siapa yang memakai rencana
+
+- **Operator web** membuat dan men-generate rencana, lalu melampirkan dokumen.
+- **Sales dan driver di mobile** melihat rencana hari ini setelah rencana itu ada. Mereka dapat menambah pelanggan ke rencana yang sudah ada; mereka tidak dapat membuat rencana baru di ponsel.
+
+Lihat [Kerja harian mobile](/id/user/mobile/daily-work).

apps/docs-dev/src/id/user/web/sales-workflow.md

@@ -0,0 +1,154 @@
+<script setup>
+import { ShoppingCart, ClipboardList, Box, Receipt, CreditCard } from 'lucide-vue-next'
+</script>
+
+# Alur penjualan
+
+<p class="doc-lead"><ShoppingCart :size="20" class="doc-icon" /> Penjualan → Aktivitas</p>
+
+Cara menjalankan penjualan: dari permintaan atau pesanan, melalui packing dan faktur, sampai pembayaran.
+
+Anda perlu izin untuk melihat setiap menu. Tombol status (Process, Complete, Submit, Approve, dan seterusnya) hanya muncul jika Anda boleh mengubah data.
+
+## Sebelum mulai
+
+Siapkan data yang dibutuhkan setiap dokumen penjualan:
+
+| Yang dibutuhkan | Tempat membuat |
+| --- | --- |
+| Divisi, cabang, pelanggan, produk | [Pengaturan → Data](/id/user/web/setup) |
+| Sales | Penjualan → Data → Karyawan |
+
+Jika menu tidak muncul, minta administrator memberi hak akses **Lihat** (dan **Ubah** untuk tombol status) pada area itu.
+
+## Alur biasa
+
+```plantuml
+@startuml
+start
+:Permintaan penjualan (opsional);
+:Pesanan penjualan (Draft);
+:Process pesanan;
+fork
+  :Faktur penjualan dibuat;
+fork again
+  :Surat jalan dibuat\n(kecuali dilewati);
+end fork
+if (Ada surat jalan?) then (ya)
+  :Complete kuantitas terkirim;
+endif
+:Buat pembayaran penjualan;
+:Submit lalu Approve;
+stop
+@enduml
+```
+
+1. Opsional buat dan setujui **permintaan penjualan**.
+2. Buat **pesanan penjualan** (dari permintaan, atau dari awal).
+3. Buka pesanan Draft dan klik **Process**. Biarkan **Generate packing slip** tercentang kecuali Anda tidak butuh surat jalan. Process membuat **faktur penjualan**, dan **surat jalan** kecuali dilewati.
+4. Jika ada surat jalan, buka **Logistik → Surat Jalan**, lalu **Complete** dan isi berapa yang terkirim.
+5. Buka faktur dan klik **Create Sales Payment**. **Submit** pembayaran, lalu **Approve** (atau **Reject** / **Rollback**).
+
+Anda juga dapat [impor CSV](/id/user/web/import) untuk permintaan, pesanan, faktur, dan pembayaran.
+
+## Permintaan penjualan
+
+<p class="doc-lead"><ClipboardList :size="18" class="doc-icon" /> Penjualan → Aktivitas → Permintaan Penjualan</p>
+
+Permintaan bersifat opsional. Anda dapat langsung ke pesanan penjualan.
+
+1. Klik **Buat**. Isi tanggal, sales, cabang, divisi, pelanggan, alamat, dan minimal satu produk beserta kuantitas. Harga produk dan kode dokumen opsional. Simpan.
+2. Saat status **Draft**, klik **Submit** untuk dikirim ke persetujuan. Anda juga dapat memakai **Change status** untuk menandai **Rejected**.
+3. Saat **Pending**, klik **Approve** atau **Reject**. **Change status** dapat mengembalikannya ke **Draft**.
+4. Setelah **Approved**, tidak ada langkah lagi pada permintaan itu sendiri.
+5. Di halaman detail permintaan, klik **Create Sales Order**. Formulir pesanan terbuka dengan pelanggan, lokasi, dan produk dari permintaan.
+
+## Pesanan penjualan
+
+<p class="doc-lead"><Box :size="18" class="doc-icon" /> Penjualan → Aktivitas → Pesanan Penjualan</p>
+
+1. Klik **Buat**. Isi detail yang sama seperti permintaan. Pada pesanan baru Anda dapat memilih permintaan penjualan di **Source**; itu menyalin permintaan ke formulir. Simpan. Pesanan baru berstatus **Draft**.
+2. Pada pesanan **Draft**, klik **Process**.
+   - Anda akan melihat: *Processing creates a sales invoice and, unless skipped, a packing slip.*
+   - **Generate packing slip** tercentang secara default. Hapus centang jika tidak ingin surat jalan.
+3. Pada **Draft** atau **Processed**, Anda dapat **Cancel**. Tidak ada tombol **Complete** pada pesanan. Jika pesanan kemudian menampilkan **Completed**, itu bukan tombol yang Anda klik di layar ini.
+4. Di halaman detail pesanan Anda dapat melihat surat jalan dan faktur terkait, serta klik **Create Sales Invoice**.
+
+Anda dapat memilih beberapa pesanan lalu Process atau Cancel bersama, selama semuanya dalam status yang mengizinkan aksi itu.
+
+## Surat jalan
+
+Surat jalan ada di **Logistik**, bukan Penjualan. Lihat [Logistik](/id/user/web/logistics).
+
+## Faktur penjualan
+
+<p class="doc-lead"><Receipt :size="18" class="doc-icon" /> Penjualan → Aktivitas → Faktur Penjualan</p>
+
+Faktur muncul ketika Anda **Process** pesanan. Anda juga dapat membuatnya sendiri, opsional dari pesanan atau surat jalan.
+
+Pada faktur, satu-satunya tombol status adalah **Cancel** (saat faktur **Draft**, **Processed**, atau **Partial**). Anda tidak dapat memilih Processed, Partial, atau Completed sendiri. Label itu tetap bisa tampil di faktur.
+
+Di halaman detail faktur, klik **Create Sales Payment**. Formulir pembayaran terbuka dengan faktur itu dan sisa saldonya.
+
+Anda dapat melampirkan faktur ke [rencana penjualan](/id/user/web/plans). Menyimpan rencana tidak mengubah status faktur.
+
+## Pembayaran penjualan
+
+<p class="doc-lead"><CreditCard :size="18" class="doc-icon" /> Penjualan → Aktivitas → Pembayaran Penjualan</p>
+
+1. Klik **Buat**. Isi tanggal dan minimal satu baris: faktur dan jumlah. Gambar dan catatan opsional. Simpan. Pembayaran baru berstatus **Draft**.
+2. Klik **Submit** untuk pindah ke **Pending**. Anda juga dapat memakai **Change status** untuk menandai **Rejected**.
+3. Saat **Pending**, klik **Approve**, **Reject**, atau **Rollback** (kembali ke **Draft**).
+4. Setelah **Approved**, status tidak dapat diubah lagi. Pembayaran **Rejected** dapat dikembalikan ke **Draft** dengan **Change status**.
+
+Menyetujui pembayaran tidak mengubah status faktur dari layar ini. Muat ulang faktur jika Anda perlu melihat saldo terbaru.
+
+Tim lapangan juga dapat [mencatat pembayaran di mobile](/id/user/mobile/daily-work) dari faktur belum lunas.
+
+## Yang dapat dilakukan di setiap status
+
+**Tombol** adalah aksi berlabel di daftar atau halaman detail. **Change status** adalah dialog terpisah yang menampilkan status yang boleh dipilih. Faktur tidak punya Change status.
+
+### Permintaan penjualan dan pembayaran penjualan
+
+Keduanya memakai Draft → Pending → Approved atau Rejected.
+
+| Status saat ini | Tombol | Change status |
+| --- | --- | --- |
+| Draft | Submit | Rejected |
+| Pending | Approve, Reject. Pembayaran juga punya Rollback (kembali ke Draft) | Draft, Approved, Rejected |
+| Approved | — | — |
+| Rejected | — | Draft |
+
+### Pesanan penjualan
+
+| Status saat ini | Tombol | Change status |
+| --- | --- | --- |
+| Draft | Process, Cancel | Processed, Cancelled |
+| Processed | Cancel | Cancelled |
+| Completed | — | — |
+| Cancelled | — | — |
+
+**Process** selalu membuka dialog centang surat jalan (bukan Change status).
+
+### Faktur penjualan
+
+Anda mungkin melihat Draft, Processed, Partial, Completed, atau Cancelled.
+
+| Status saat ini | Yang dapat dilakukan |
+| --- | --- |
+| Draft, Processed, atau Partial | Cancel |
+| Completed | Tidak ada tombol status |
+| Cancelled | Tidak ada tombol status |
+
+## Yang tidak perlu diklik
+
+Ini bukan tombol di layar:
+
+- **Complete** pada pesanan penjualan
+- Mengatur faktur ke Processed, Partial, atau Completed sendiri
+- Mengubah status faktur dengan menaruhnya di rencana penjualan
+- Mengubah status faktur dengan menyetujui pembayaran
+- Membatalkan pesanan, surat jalan, atau faktur dalam satu klik untuk semua dokumen terkait — **Cancel** hanya berlaku pada dokumen yang sedang dibuka
+
+Jika status dokumen terkait berubah setelah Anda bertindak, buka dokumen itu lagi untuk melihat nilai terbaru.

apps/docs-dev/src/id/user/web/setup.md

@@ -0,0 +1,78 @@
+<script setup>
+import { Settings, Users, Shield } from 'lucide-vue-next'
+</script>
+
+# Siapkan perusahaan
+
+<p class="doc-lead"><Settings :size="20" class="doc-icon" /> Pengaturan → Data dan Pengaturan → Pengguna</p>
+
+Lakukan ini sebelum membuat rencana atau dokumen penjualan. Data yang dibutuhkan layar lain (cabang, divisi, pelanggan, produk, karyawan) harus sudah ada.
+
+## Pengaturan perusahaan
+
+**Menu:** Pengaturan → Data → Pengaturan perusahaan
+
+Ini formulir tunggal, bukan daftar. Simpan:
+
+| Kolom | Dipakai untuk |
+| --- | --- |
+| Tanggal awal siklus | Kapan siklus kunjungan mingguan mulai dihitung |
+| Radius check-in (meter) | Seberapa dekat tim lapangan saat check-in |
+| Interval GPS (detik) | Seberapa sering aplikasi mobile merekam jejak saat bertugas |
+| Radius peringatan checkout (meter) | Kapan mobile memperingatkan bahwa pengguna meninggalkan kunjungan pelanggan |
+
+## Divisi, cabang, pelanggan, produk
+
+**Menu:** Pengaturan → Data
+
+Masing-masing berupa daftar dengan Buat, Detail, Ubah, dan Duplikat. Status: **Draft**, **Aktif**, atau **Diarsipkan**.
+
+| Data | Kolom umum |
+| --- | --- |
+| Divisi | Nama, kode |
+| Cabang | Kode, nama, telepon, NFC ID, alamat, lokasi peta, divisi, hari dan jam kerja |
+| Pelanggan | Kode, nama, telepon, alamat, lokasi peta, NFC ID; kontak saat membuat |
+| Produk | Kode, nama, satuan, harga, merek |
+
+Pilih lokasi di peta untuk cabang dan pelanggan (atau ketik lintang dan bujur).
+
+## Karyawan
+
+Karyawan dipisah menurut tujuan:
+
+| Menu | Jabatan |
+| --- | --- |
+| Penjualan → Data → Karyawan | Sales |
+| Logistik → Data → Karyawan | Driver, crew |
+
+Kolom: kode, nama, telepon, jabatan. Kemudian tautkan **pengguna** ke karyawan agar mobile tahu harus memuat rencana penjualan atau logistik.
+
+## Hak akses
+
+<p class="doc-lead"><Shield :size="18" class="doc-icon" /> Pengaturan → Pengguna → Hak Akses</p>
+
+Hak akses adalah kumpulan izin bernama. Di formulir, isi **nama**, **kode**, dan matriks izin. Untuk setiap area Anda dapat mengizinkan:
+
+- **Lihat** — tampilkan menu dan buka halaman
+- **Buat** — buat dan duplikat
+- **Ubah** — edit dan ubah status
+- **Hapus** — hapus
+- **Impor** — impor CSV pada daftar yang didukung
+
+Tanpa **Lihat**, item itu disembunyikan dari sidebar.
+
+## Pengguna
+
+<p class="doc-lead"><Users :size="18" class="doc-icon" /> Pengaturan → Pengguna → Pengguna</p>
+
+1. Klik **Buat**.
+2. Isi **username** dan **password** (wajib saat membuat; saat mengubah, kosongkan untuk tetap memakai kata sandi saat ini).
+3. Pilih **hak akses**.
+4. Opsional tautkan **karyawan** agar login lapangan terhubung ke penjualan atau logistik.
+
+Aktifkan pengguna ketika mereka boleh masuk.
+
+## Segera hadir
+
+- **Ingat saya** di formulir masuk web tidak disimpan
+- **Lupa Kata Sandi** belum tersedia

apps/docs-dev/src/id/user/web/timeline.md

@@ -0,0 +1,38 @@
+<script setup>
+import { MapPin } from 'lucide-vue-next'
+</script>
+
+# Timeline
+
+<p class="doc-lead"><MapPin :size="20" class="doc-icon" /> Timeline di sidebar</p>
+
+Timeline menampilkan jejak GPS dan aktivitas lapangan **satu hari** untuk karyawan **sales**. Ini pemutaran ulang dari yang disimpan aplikasi mobile saat orang itu bertugas, bukan umpan langsung.
+
+## Cara memakai
+
+1. Buka **Timeline**.
+2. Pilih **Tanggal**.
+3. Opsional saring **Karyawan** (karyawan sales), atau biarkan semua karyawan.
+4. Cari aktivitas jika daftarnya panjang.
+5. Ganti tab **Di perjalanan** dan **Selesai**.
+6. Pakai **Playback** (Putar, Jeda, Waktu) untuk bergerak di sepanjang rute terekam. Overlay **Lokasi saat ini** adalah kursor playback, bukan titik GPS langsung.
+
+Jika tidak ada data untuk hari itu, peta menampilkan tidak ada data timeline.
+
+## Tampilan aktivitas
+
+Daftar dapat mencakup:
+
+- Check-in cabang / check-out cabang
+- Check-in pelanggan / check-out pelanggan
+- Sales order dibuat
+- Sales request dibuat
+- Pembayaran dibuat
+- Pelanggan dibuat
+
+Jejak direkam di mobile setelah clock-in cabang, memakai **Interval GPS** di [pengaturan perusahaan](/id/user/web/setup).
+
+## Segera hadir
+
+- Pelacakan **langsung** sales atau driver di peta web
+- Timeline khusus **logistik / driver** (layar ini memuat karyawan sales)

apps/docs-dev/src/index.md

@@ -73,205 +73,3 @@ import { ShoppingCart, Truck, Smartphone, MapPin } from 'lucide-vue-next'
     </div>
   </div>
 </div>
-
-<style scoped>
-/* ==========================================================================
-   SECTION 1: GLOBAL & HERO BACKGROUNDS (Masked Dot Grid & Top Glow)
-   ========================================================================== */
-:global(.VPHome) {
-  position: relative;
-  z-index: 0;
-}
-
-/* Efek Brand Glow memancar halus dari atas tengah (Area Hero) */
-:global(.VPHome::before) {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 100vw;
-  max-width: 1200px;
-  height: 800px;
-  background: radial-gradient(ellipse at top, var(--vp-c-brand-soft) 0%, transparent 70%);
-  filter: blur(100px);
-  z-index: -1;
-  pointer-events: none;
-}
-
-/* Efek Dot Grid yang dibatasi hanya setinggi Hero dan memudar ke bawah */
-:global(.VPHome::after) {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 600px;
-  background-image: radial-gradient(var(--vp-c-divider) 1px, transparent 1px);
-  background-size: 24px 24px;
-  background-position: top center;
-  z-index: -2;
-  pointer-events: none;
-  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
-  mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
-}
-
-
-/* ==========================================================================
-   SECTION 2: BENTO CONTAINER & HEADER (Structured Minimalism)
-   ========================================================================== */
-/* Divider dengan jarak vertikal yang presisi dan lega */
-.custom-divider {
-  width: 100%;
-  height: 1px;
-  background-color: var(--vp-c-divider);
-  margin: 80px 0 64px 0; 
-}
-
-.bento-container {
-  max-width: 1152px;
-  margin: auto;
-  padding: 0 24px;
-  position: relative;
-}
-
-.bento-header {
-  text-align: center;
-  margin-bottom: 64px;
-}
-
-.bento-header h2 {
-  font-size: 2.5em;
-  font-weight: 700;
-  margin-bottom: 20px;
-  color: var(--vp-c-text-1);
-  letter-spacing: -0.02em;
-  line-height: 1.2;
-  border-top: none;
-  padding-top: 0;
-  margin-top: 0;
-}
-
-.bento-header p {
-  font-size: 1.15em;
-  color: var(--vp-c-text-2);
-  max-width: 760px; /* Memaksa teks membungkus menjadi 2 baris yang ideal */
-  margin: 0 auto;
-  line-height: 1.6;
-}
-
-
-/* ==========================================================================
-   SECTION 2: BENTO GRID & CARD DESIGN (Premium Glassmorphism)
-   ========================================================================== */
-.bento-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 24px;
-}
-
-.bento-card {
-  background: var(--vp-c-bg-soft);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  border: 1px solid var(--vp-c-divider); /* Border solid yang tipis dan bersih */
-  border-radius: 16px;
-  padding: 40px 32px; /* Spacing dalam yang luas memberikan kesan premium */
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  /* Transisi mulus untuk pergerakan, border, dan bayangan */
-  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
-              border-color 0.4s ease, 
-              box-shadow 0.4s ease;
-
-  /* Perubahan Utama: Bayangan statis yang sangat halus (elegan, tidak berisik) */
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  
-  /* Transisi hover yang lebih lembut dan "mahal" */
-  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
-}
-
-/* Interaksi hover kartu: Terangkat sedikit dengan pendaran tipis warna brand */
-.bento-card:hover {
-  /* Elevasi yang lebih tinggi saat di-hover */
-  transform: translateY(-8px);
-  
-  /* Shadow saat hover: Warna brand dengan opasitas sangat rendah agar tetap profesional */
-  box-shadow: 0 20px 25px -5px rgba(101, 46, 217, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  
-  /* Border sedikit lebih terang */
-  border-color: var(--vp-c-brand-1);
-}
-
-.bento-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 48px;
-  height: 48px;
-  border-radius: 12px;
-  background: var(--vp-c-bg-mute);
-  color: var(--vp-c-brand-1); 
-  margin-bottom: 24px;
-  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
-}
-
-.bento-icon svg {
-  width: 24px;
-  height: 24px;
-}
-
-/* Interaksi hover ikon: Mengisi warna latar dengan warna brand */
-.bento-card:hover .bento-icon {
-  background: var(--vp-c-brand-1);
-  color: #ffffff;
-  transform: scale(1.05);
-}
-
-.bento-card h3 {
-  font-size: 1.3em;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-  margin-top: 0;
-  margin-bottom: 16px;
-}
-
-.bento-card p {
-  font-size: 1em;
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-  margin: 0;
-}
-
-
-/* ==========================================================================
-   9. MEDIA QUERIES (Responsive Adaptations)
-   ========================================================================== */
-@media (max-width: 768px) {
-  .custom-divider {
-    margin: 48px 0;
-  }
-  .bento-header {
-    margin-bottom: 48px;
-  }
-  .bento-header h2 {
-    font-size: 2em;
-  }
-  .bento-header p {
-    font-size: 1.05em;
-  }
-  .bento-card {
-    padding: 32px 24px;
-  }
-}
-
-@media (max-width: 480px) {
-  .bento-grid {
-    grid-template-columns: 1fr; /* Menjadi satu kolom penuh pada ponsel kecil */
-  }
-  .bento-card {
-    padding: 24px;
-  }
-}
-</style>