Merge pull request #2 from mocasus/docs/readme-and-logo#3
Open
mocasus wants to merge 17 commits into
Open
Conversation
docs: add README, MIT LICENSE, and SVG logo
Major additions: - Admin web dashboard at /admin (Fastify + Tailwind CDN + HTMX) - Login with username/password, signed cookie session (7 days) - Stats: revenue today/7d/all-time, counts by status, stock available - Products: list, create, toggle active - Stock: bulk add via textarea (one per line), per-product view - Orders: filter by status, redeliver button for failed deliveries - Admin Telegram commands: /admin /stats /orders /products /addproduct /addstock (multi-line) /toggle /redeliver - Admin Discord slash commands: /admin-stats /admin-orders /admin-products /admin-add-product /admin-add-stock /admin-toggle /admin-redeliver Bug fixes & UX improvements: - KLIKQRIS_API_KEY/MERCHANT_ID now optional at startup (graceful degradation) — bot/dashboard run, /buy throws clear error if missing - Retry-safe delivery: stock allocated separately from DM send so failed DMs can be retried without double-claiming stock (deliveryPayload JSON on Order, deliveryAttempts counter, lastDeliveryError) - Schema: track orderId on Stock for audit trail - DATABASE_URL default fixed: file:./dev.db (was file:./prisma/dev.db which Prisma resolved relative to schema → prisma/prisma/dev.db) - Discord admin: PermissionFlagsBits.Administrator default + runtime ADMIN_DISCORD_IDS check (defense in depth) - Telegram admin: silently ignores non-admins (doesn't reveal commands) Verified: tsc --noEmit clean, end-to-end runtime test (login, dashboard, products CRUD)
feat: admin commands (Telegram + Discord) and admin web dashboard
Owner system: - New env vars: OWNER_TELEGRAM_ID, OWNER_DISCORD_ID - Owner ID auto-merged into admin set (no need to list twice) - /whoami command (Telegram + Discord) shows role: owner/admin/customer - /start greeting differentiated per role - notifyOwner() helper sends best-effort DMs via both platforms - Owner notifications wired into: - Bot online (on startup ready) - Order PAID + delivered (sales notification) - Delivery failure (alert with retry instructions) Setup wizard (/setup): - Multi-section form: Server, KlikQRIS, Telegram, Discord, Owner, Admins, Dashboard, Database - Auto-generate session secret button - Validates input (admin password >= 8 chars) - Backs up old .env to .env.bak.<timestamp> before overwriting - Allowlist of writable keys prevents env injection - Sensitive values logged as <set>/<empty> only - Auto-disabled in production once configured (redirects to /admin/login) - Always available in NODE_ENV=development for re-config CLI launcher (npm run setup): - scripts/setup.mjs: cross-platform (macOS/Linux/Windows) - Creates .env from .env.example if missing - Spawns dev server - Auto-opens browser to http://localhost:PORT/setup after 1.5s - Forwards SIGINT/SIGTERM to child server Index startup: - First-run banner with prominent setup URL (when .env missing/empty) - Standard log line with admin URL when configured - Restructured warnings (more helpful pointers) Verified: tsc clean, end-to-end runtime tests: - First-run: GET /setup serves form (11KB), all sections present - POST /setup: writes .env (formatted), shows confirmation page - POST /setup with weak password: rejected with validation error - After restart: dashboard available at /admin, login works, all pages render - /setup still accessible in dev mode for re-config
feat: owner system + setup wizard with auto-browser launch
Mengikuti README lama (db:push lalu setup) gagal di first-run karena prisma butuh DATABASE_URL di .env, padahal .env baru dibuat oleh wizard. Fix: scripts/setup.mjs sekarang satu command yang: 1. Bikin .env dari .env.example kalau belum ada 2. Jalanin prisma db push (idempoten) 3. Start dev process 4. Auto-buka browser ke /setup Quickstart jadi: npm install && npm run setup (cuma 2 command). Output juga lebih informatif dengan check-mark per langkah. README sudah diupdate.
fix(setup): wizard auto-runs prisma db push, simpler quickstart
…ierarchy
Visual improvements across the admin dashboard:
Icon library
- Inline SVG icons (Lucide-style) defined as map in layout.ts
- 22 icons covering common actions (dashboard, package, bag, clock,
check, x, alert, refresh, plus, archive, etc)
- Helper: icon("name", "w-4 h-4")
Layout & nav
- Top nav with bot icon logo on gradient pill
- Active nav item with gradient background + ring
- Each nav item has its own icon
- Subtle dot-grid background pattern (radial gradient)
- Page header pattern: title with gradient text + subtitle + breadcrumb
- Logout button with red hover state
- Setup link in nav for quick re-config
Login page
- Centered logo + brand badge above form
- Glassmorphism card (backdrop-blur)
- Radial gradient ambient lighting in corners
- Better focus states (ring-2)
- Link to /setup at bottom for first-time users
Home (dashboard)
- Primary stat cards with icon + glow halo + gradient accent
- Mini stat cards with colored dot indicators (orders by status)
- Status badges now have colored dots + semantic colors
- Platform indicator: "TG" / "DC" colored mini-badges
- Empty state component with icon + helpful subtitle
Products page
- Form section with icon-prefixed heading + helper texts
- Stock progress bar (color-coded: red/amber/emerald based on %)
- Action buttons with icons (kelola stok, enable/disable)
- Active/inactive badges with colored dots
- Type badge as subtle mono pill
Stock page
- Big summary card at top: ID + name + price + 3-column metrics
- Stock progress bar with gradient fill
- 2-column layout (form + table) using lg:grid-cols-5
- Payload displayed as bordered code block
- Status badges with dots
- Breadcrumb back to products
Orders page
- Filter pills with icons (clock for pending, check for paid, x for expired)
- Active filter has gradient ring
- Platform badges as colored mini-pills (TG cyan, DC violet)
- Delivery cell improved: success with checkmark, redeliver with refresh icon
- Order count chip in header
Misc
- Browser tab favicon (inline SVG bot icon)
- Inter font fallback
- Custom scrollbar styling
- Smooth transitions on hover/active states
All pages typecheck clean (tsc --noEmit). Runtime smoke-tested:
all 5 dashboard pages return HTTP 200 with expected content markers.
HTML sizes increased ~3x reflecting richer visual content.
feat(dashboard): polish UI with icons, gradients, and better hierarchy
…, font polish Major UX upgrade dan 3 roadmap features sekaligus. Bot inline buttons (replaces text-only flow) - Telegram: InlineKeyboard menu → catalog list → product detail → qty buttons → QR + cek status - Discord: SelectMenu dropdown → product detail → buy buttons → QR + status button - Callback query routing dengan custom IDs (menu/prod/buy/status) - /start sets bot commands menu via setMyCommands - /buy text command dipertahankan untuk power user Three roadmap features - Cron auto-expire (src/cron/expire-orders.ts): jalan tiap 60 detik, mark PENDING orders yang lewat expiredAt jadi EXPIRED. Idempoten. - Rate limiting di /admin/login: max 10 attempt per 5 menit per IP via @fastify/rate-limit. Gagal login di-log dengan IP. - Analytics page (/admin/analytics): - Stat cards: Revenue 30d, Orders 30d, AOV, Delivery Failure % - SVG line chart revenue per hari (gradient area + hover dots) - Top 10 produk by revenue dengan ranked progress bars - Distribusi status order (PENDING/PAID/EXPIRED) - Penjualan per platform (Telegram vs Discord) - Pure SVG, gak butuh chart library Dashboard polish - Font: Inter dari Google Fonts (with JetBrains Mono untuk code/mono) - font-feature-settings untuk numeric tabular alignment - Subtle dot-grid background pattern - Refined card hover states (translateY + shadow) - Form focus glow (3px ring) - Refined nav: active item dengan gradient underline (subtler) - Custom selection color (cyan tint) - Footer dengan version - New icons: chart, sparkles - Polished scrollbar Verified runtime: - Login page: 5KB with Inter font + tailwind config - Analytics: 16KB, semua 7 sections render - Rate limit: 10 OK then HTTP 429 (rate-limited) - Cron: started log appears - TypeScript: 0 errors
feat: inline buttons, analytics, auto-expire cron, rate limiting, font polish
- Update layout with glass-morphism header, mobile responsive nav, ambient glow effects, noise texture, and smooth animations - Upgrade to TailwindCSS v3.4.17 and htmx v2.0.4 - Redesign all dashboard pages with card-glass containers - Improve tables with divide-y pattern and subtle hover states - Add staggered slide-up animations for stat cards - Enhance status badges with ring borders and glowing dots - Improve charts with gradient line (emerald to cyan) - Add mobile hamburger menu for responsive navigation - Update login page with modern centered card design - Use consistent rounded-2xl containers throughout - Add tabular-nums for better numeric alignment Co-authored-by: Kiro Agent <244629292+kiro-agent@users.noreply.github.com>
) * feat(dashboard): refresh UI/UX with modern glass-morphism design - Update layout with glass-morphism header, mobile responsive nav, ambient glow effects, noise texture, and smooth animations - Upgrade to TailwindCSS v3.4.17 and htmx v2.0.4 - Redesign all dashboard pages with card-glass containers - Improve tables with divide-y pattern and subtle hover states - Add staggered slide-up animations for stat cards - Enhance status badges with ring borders and glowing dots - Improve charts with gradient line (emerald to cyan) - Add mobile hamburger menu for responsive navigation - Update login page with modern centered card design - Use consistent rounded-2xl containers throughout - Add tabular-nums for better numeric alignment Co-authored-by: mocasus <137678581+mocasus@users.noreply.github.com> * fix(setup): modernize setup wizard UI to match dashboard design The screen users see first when running 'npm run setup' is the Setup Wizard at /setup, NOT the admin dashboard. Previously the setup page had its own old design that didn't match the new modern dashboard. Changes: - Redesign /setup with glass-morphism cards, animated sections, and consistent dark theme matching the new dashboard - Add icons next to each section (server, KlikQRIS, Telegram, Discord, owner, admin, dashboard, database) - Add ambient glow background, modern fonts (Inter + JetBrains Mono), staggered slide-up animations - Improve flash messages and saved confirmation banner - Add sticky submit bar with glass effect - Update setup script to print clearer instructions about restart flow - Update README Quick Start with explicit notes about: - Setup Wizard vs Dashboard distinction - Required restart step after saving config - Troubleshooting cache issues with hard refresh --------- Co-authored-by: Kiro Agent <244629292+kiro-agent@users.noreply.github.com>
Previous version used <fieldset> + <legend> elements which have notorious browser quirks (legend cuts into border, hard to align with flexbox). Result: setup page looked broken even though Tailwind classes were correct. Changes: - Replace fieldset/legend with semantic <section> + <header> + <h2> - Move icon + title into card header bar (cleaner alignment) - Add subtitle to each section for context - Add 'Required' pill badge for Web Dashboard section - Bigger hero with sparkle pill badge - Better card styling with subtle gradient background - Improved field component with optional 'help' text below input - Mobile-first submit bar (stacks on small screens) - Fix Tailwind CDN URL: 3.4.17 path is invalid, use root URL (also fixed in dashboard layout.ts) - Better grid background using two linear-gradients (cleaner than dots) - Bigger, more breathable spacing throughout Co-authored-by: Kiro Agent <244629292+kiro-agent@users.noreply.github.com>
…#12) Banner sekarang match dengan desain dashboard baru: Visual changes: - Background ganti ke #0a0e1a dengan grid pattern subtle (sama seperti dashboard) plus ambient glow cyan + violet di kiri/kanan - Bot icon: rounded square frame dengan brand gradient + Lucide-style bot icon line art (sama seperti header dashboard di /admin) - Wordmark split: 'bot' putih-slate gradient + 'not' cyan-violet gradient (sama dengan header dashboard 'bot' + 'not' split) - Eyebrow tag dengan animated cyan dot — 'Auto-order · QRIS · ID' - Tagline lebih ringkas: 'Telegram + Discord bot — pelanggan scan QR, produk auto-deliver.' - 5 feature pills dengan icon mini Lucide-style: - Telegram (cyan) - Discord (violet) - KlikQRIS (emerald, QR icon) - Auto-deliver (amber, lightning) - Dashboard (pink, bar chart) - Dekorasi sparkles random di sudut-sudut Technical: - Inter font family (sama dengan UI) - Width 1280, tinggi 360 (sebelumnya 320, +40px untuk akomodasi pills) - Border 1px white/6 untuk subtle frame - Halo glow di belakang icon untuk depth Co-authored-by: Kiro Agent <244629292+kiro-agent@users.noreply.github.com>
…tion) (#14) When PR #12 was merged, conflict resolution kept the older problematic version of logo.svg that contains: - aria-label with HTML entity & - Multiple linearGradients structure that differs from the proven original - 1280x360 viewBox (taller, wasted space) - More complex path structure This applies the FINAL clean version that mirrors the original SVG structure (which was proven to render on GitHub): - 1280x320 viewBox (matches original aspect ratio) - Same defs structure as original: bg + grad + dots pattern + glow filter - Mascot bot icon (cute style with eyes + QR mouth) - Wordmark split: 'bot' white-slate + 'not' cyan-violet gradient - Indonesian tagline - 5 feature chips: Telegram, Discord, KlikQRIS, Auto-deliver, Dashboard - aria-label uses plain text (no entities) This should render properly on GitHub README. Co-authored-by: Kiro Agent <244629292+kiro-agent@users.noreply.github.com>
Untuk repo yang di-fork, default GitHub tidak generate Open Graph preview yang bagus saat link di-share di Discord / Twitter / WhatsApp. Hasilnya: cuma muncul nama repo polos, tanpa gambar atau deskripsi. Solusi: provide social-preview image (1280x640) yang user tinggal upload ke GitHub repo Settings, plus dokumentasi lengkap cara setup. Files added: - assets/social-preview.svg - source design (Inter font, dark theme, cyan-violet gradient matching dashboard, mascot bot icon, headline 'Pelanggan scan, produk auto-deliver.', 5 feature chips) - assets/social-preview.png - generated 1280x640 PNG (117KB) ready to upload to GitHub Settings -> Social preview README updates: - New section 'Setup Repo GitHub (untuk fork)' between Quick Start and Cara Dapat Kredensial, with 3 steps: 1. Set About section (description + topics + website) 2. Upload social preview image 3. Test preview di Discord / Twitter / Facebook / Telegram - Recommended description text untuk About section - 11 topics untuk discoverability (telegram-bot, discord-bot, qris, klikqris, indonesia, auto-deliver, typescript, prisma, fastify, nodejs, payment-gateway) - Validator URLs untuk test preview di tiap platform - Cache busting tips untuk camo / Twitter / Facebook / Discord - Bonus: cara regenerate PNG dari SVG pakai cairosvg Updated TOC dan struktur project tree Co-authored-by: Kiro Agent <244629292+kiro-agent@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
docs: add README, MIT LICENSE, and SVG logo