docs: rename template file and fix vue interpolation

.vitepress/config/sidebars.ts

@@ -59,7 +59,7 @@ export const sidebarEn: DefaultTheme.Sidebar = {
         { text: 'Introduction', link: '/docs/manual/settings/' },
         { text: 'Plugins', link: '/docs/manual/settings/plugins' },
         { text: 'Routers', link: '/docs/manual/settings/routers' },
-        { text: 'Voucher Templates', link: '/docs/manual/settings/templates' },
+        { text: 'Voucher Templates', link: '/docs/manual/settings/voucher-templates' },
         { text: 'Logos', link: '/docs/manual/settings/logos' },
         { text: 'API & CORS', link: '/docs/manual/settings/api-cors' },
         { text: 'System', link: '/docs/manual/settings/system' }

docs/manual/settings/voucher-templates.md

@@ -0,0 +1,33 @@
+# Voucher Templates
+
+MIVO features a powerful template engine to create beautiful, printable vouchers.
+
+## <Icon name="FileCode" color="primary" /> Customizing Templates
+
+Templates use HTML and specialized placeholders to display voucher data.
+
+### Supported Variables
+
+| <code v-pre>{{username}}</code> | User's login username |
+| <code v-pre>{{password}}</code> | User's login password |
+| <code v-pre>{{server_name}}</code> | Hotspot server name |
+| <code v-pre>{{dns_name}}</code> | DNS name for login (e.g., `hotspot.lan`) |
+| <code v-pre>{{profile}}</code> | User profile/package name |
+| <code v-pre>{{price}}</code> | Plan price (formatted) |
+| <code v-pre>{{validity}}</code> | Validity duration |
+| <code v-pre>{{time_limit}}</code> | Time limit session |
+| <code v-pre>{{data_limit}}</code> | Data quota limit |
+| <code v-pre>{{ip_address}}</code> | User's IP address |
+| <code v-pre>{{mac_address}}</code> | User's MAC address |
+| <code v-pre>{{comment}}</code> | User comment |
+| <code v-pre>{{copyright}}</code> | Copyright text |
+| <code v-pre>{{qrcode}}</code> | Generates a QR Code for login URL |
+
+> [!TIP]
+> The <code v-pre>{{qrcode}}</code> variable supports custom attributes for styling, for example: <code v-pre>{{qrcode size=100 fg=red}}</code>.
+- **Preview**: Test your template instantly from the editor.
+
+## <Icon name="Printer" color="info" /> Quick Print
+
+Once a template is saved, it becomes available in the **Quick Print** menu within your router sessions.
+

id/docs/manual/settings/voucher-templates.md

@@ -0,0 +1,33 @@
+# Template Voucher
+
+MIVO memiliki engine template yang mumpuni untuk membuat voucher yang cantik dan siap cetak.
+
+## <Icon name="FileCode" color="primary" /> Kustomisasi Template
+
+Template menggunakan HTML dan placeholder khusus untuk menampilkan data voucher.
+
+### Variabel yang Didukung
+
+| <code v-pre>{{username}}</code> | Username login pengguna |
+| <code v-pre>{{password}}</code> | Password login pengguna |
+| <code v-pre>{{server_name}}</code> | Nama server hotspot |
+| <code v-pre>{{dns_name}}</code> | Nama DNS untuk login (cth: `hotspot.lan`) |
+| <code v-pre>{{profile}}</code> | Nama profil/paket pengguna |
+| <code v-pre>{{price}}</code> | Harga paket (terformat) |
+| <code v-pre>{{validity}}</code> | Durasi masa aktif |
+| <code v-pre>{{time_limit}}</code> | Batas waktu sesi |
+| <code v-pre>{{data_limit}}</code> | Batas kuota data |
+| <code v-pre>{{ip_address}}</code> | Alamat IP pengguna |
+| <code v-pre>{{mac_address}}</code> | Alamat MAC pengguna |
+| <code v-pre>{{comment}}</code> | Komentar pengguna |
+| <code v-pre>{{copyright}}</code> | Teks hak cipta |
+| <code v-pre>{{qrcode}}</code> | Menghasilkan kode QR untuk URL login |
+
+> [!TIP]
+> Variabel <code v-pre>{{qrcode}}</code> mendukung atribut kustom untuk gaya, contohnya: <code v-pre>{{qrcode size=100 fg=red}}</code>.
+- **Preview**: Uji template Anda secara instan dari editor.
+
+## <Icon name="Printer" color="info" /> Cetak Cepat
+
+Setelah template disimpan, template tersebut akan tersedia di menu **Cetak Cepat** (Quick Print) di dalam sesi router Anda.
+