docs: guide for imphen 2025

[igun997]

PR Type

Documentation, Enhancement

---

Description

• Add comprehensive judge guide page for IMPHNEN 2025 hackathon

• Include QR code scanning instructions and NFT claiming process

• Display demo credentials for admin and brand judge accounts

• Add feature exploration links to dashboard, tags, NFTs, and support

• Update login page color consistency and add demo credentials section

---

Diagram Walkthrough

flowchart LR
  A["New Guide Page"] -->|"Scan QR & Claim NFT"| B["Verification"]
  A -->|"Login Dashboard"| C["Admin/Brand Access"]
  A -->|"Explore Features"| D["Dashboard/Tags/NFTs"]
  E["Login Page"] -->|"Display Demo Credentials"| C
  E -->|"Color Updates"| F["UI Consistency"]

Loading

File Walkthrough

	Relevant files
Documentation	page.tsx New judge guide page for IMPHNEN 2025                                        src/app/guide/page.tsx Create new comprehensive judge guide page with 3-step quick start process Step 1: Scan QR code and claim NFT with special judge tag and verification link Step 2: Login dashboard with demo credentials for admin and brand judge accounts Step 3: Explore platform features including dashboard, tag management, NFT collectibles, and Web3 support Display tech stack and team information at bottom of page +306/-0
Enhancement	page.tsx Add demo credentials and update colors                                      src/app/login/page.tsx Update text color from #808080 to #606060 for better consistency Add demo credentials section in login card footer with admin and brand judge accounts Display credentials in styled boxes with role badges (ADMIN/BRAND) Include helpful tips about MetaMask and Base Sepolia network +37/-4

---

[qodo-code-review]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
⚪	Hardcoded credentials Description: Hard-coded demo credentials (e.g., admin@example.com / admin123 and judge@hackathon.imphnen.dev / IMPHNEN2025) are displayed publicly, which can be scraped and abused in non-demo environments if reused or if environment segregation is weak; ensure these accounts are strictly sandboxed, rate-limited, and disabled in production. page.tsx [145-173] Referred Code <div className="p-4 bg-[#2B4C7E]/5 rounded-xl border border-[#2B4C7E]/20"> <div className="flex items-center justify-between mb-2"> <span className="font-semibold text-[#0C2340]"> Admin </span> <span className="px-2 py-0.5 bg-[#2B4C7E] text-white rounded text-xs font-medium"> ADMIN </span> </div> <p className="text-sm text-[#606060] font-mono"> admin@example.com </p> <p className="text-sm text-[#606060] font-mono">admin123</p> </div> <div className="p-4 bg-[#1E3A5F]/5 rounded-xl border border-[#1E3A5F]/20"> <div className="flex items-center justify-between mb-2"> <span className="font-semibold text-[#0C2340]"> Brand (Juri) </span> <span className="px-2 py-0.5 bg-[#1E3A5F] text-white rounded text-xs font-medium"> BRAND ... (clipped 8 lines)
	Public demo accounts Description: Demo credentials are presented on the public login page, enabling credential stuffing or automated abuse if corresponding accounts exist in production or share passwords with real users; limit to demo environments, enforce strict scopes, MFA/rate limiting, and disable in prod. page.tsx [175-205] Referred Code <div className="w-full p-4 bg-[#2B4C7E]/5 border border-[#2B4C7E]/20 rounded-xl space-y-3"> <p className="text-xs font-semibold text-[#0C2340] uppercase tracking-wide"> Demo Credentials </p> <div className="space-y-2 text-xs"> <div className="flex justify-between items-center p-2 bg-white rounded-lg border border-[#A8A8A8]/20"> <div> <span className="font-medium text-[#0C2340]">Admin</span> <p className="text-[#606060]"> admin@example.com / admin123 </p> </div> <span className="px-2 py-0.5 bg-[#2B4C7E] text-white rounded text-[10px] font-medium"> ADMIN </span> </div> <div className="flex justify-between items-center p-2 bg-white rounded-lg border border-[#A8A8A8]/20"> <div> <span className="font-medium text-[#0C2340]"> Brand (Judge) </span> ... (clipped 10 lines)
	External resource embed Description: The guide embeds a third-party QR image URL (https://tags.cylink.site/...) which can lead to mixed-content/tracking or supply-chain risks if the external host is compromised; prefer serving via a trusted domain, proxy, or static asset. page.tsx [80-87] Referred Code <img src="https://tags.cylink.site/api/tags/TAG-1764985700713-X8GZPS/designed" alt="QR Code untuk Juri" width={150} height={150} className="rounded-lg" /> </div>
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Error Handling Objective: To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
🔴	Generic: Secure Logging Practices Objective: To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. Status: Sensitive creds shown: Demo usernames and passwords are displayed in the UI, which risks propagation into screenshots, analytics, or logs and exposes credentials even if they are demo. Referred Code <div className="w-full p-4 bg-[#2B4C7E]/5 border border-[#2B4C7E]/20 rounded-xl space-y-3"> <p className="text-xs font-semibold text-[#0C2340] uppercase tracking-wide"> Demo Credentials </p> <div className="space-y-2 text-xs"> <div className="flex justify-between items-center p-2 bg-white rounded-lg border border-[#A8A8A8]/20"> <div> <span className="font-medium text-[#0C2340]">Admin</span> <p className="text-[#606060]"> admin@example.com / admin123 </p> </div> <span className="px-2 py-0.5 bg-[#2B4C7E] text-white rounded text-[10px] font-medium"> ADMIN </span> </div> <div className="flex justify-between items-center p-2 bg-white rounded-lg border border-[#A8A8A8]/20"> <div> <span className="font-medium text-[#0C2340]"> Brand (Judge) </span> ... (clipped 8 lines) Learn more about managing compliance generic rules or creating your own custom rules
⚪	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: No audit logs: The new UI adds flows for verification scanning, NFT claiming, and login navigation without any visible logging of critical actions, but logging may be implemented in backend routes not shown in this diff. Referred Code <div className="flex flex-col sm:flex-row gap-2"> <Button asChild size="sm" className="bg-[#2B4C7E] hover:bg-[#1E3A5F]" > <Link href="/verify/TAG-1764985700713-X8GZPS"> Buka Halaman Verifikasi <ExternalLink className="w-4 h-4 ml-2" /> </Link> </Button> <Button asChild size="sm" variant="outline"> <Link href="/scan">Buka Scanner</Link> </Button> </div> </div> </div> </div> <div className="mt-4 p-3 bg-amber-50 border border-amber-200 rounded-lg"> <p className="text-sm text-amber-800"> ... (clipped 6 lines) Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: Missing errors: The added demo credentials and navigation add potential user actions without any visible validation or error feedback in this diff, though the actual form handling may be elsewhere. Referred Code {/* Demo Credentials */} <div className="w-full p-4 bg-[#2B4C7E]/5 border border-[#2B4C7E]/20 rounded-xl space-y-3"> <p className="text-xs font-semibold text-[#0C2340] uppercase tracking-wide"> Demo Credentials </p> <div className="space-y-2 text-xs"> <div className="flex justify-between items-center p-2 bg-white rounded-lg border border-[#A8A8A8]/20"> <div> <span className="font-medium text-[#0C2340]">Admin</span> <p className="text-[#606060]"> admin@example.com / admin123 </p> </div> <span className="px-2 py-0.5 bg-[#2B4C7E] text-white rounded text-[10px] font-medium"> ADMIN </span> </div> <div className="flex justify-between items-center p-2 bg-white rounded-lg border border-[#A8A8A8]/20"> <div> <span className="font-medium text-[#0C2340]"> Brand (Judge) ... (clipped 12 lines) Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities Status: Public QR link: The guide exposes a direct verification URL and QR tag identifier which may allow unintended access if not protected by server-side validation and authorization not visible in this diff. Referred Code <Button asChild size="sm" className="bg-[#2B4C7E] hover:bg-[#1E3A5F]" > <Link href="/verify/TAG-1764985700713-X8GZPS"> Buka Halaman Verifikasi <ExternalLink className="w-4 h-4 ml-2" /> </Link> </Button> <Button asChild size="sm" variant="outline"> Learn more about managing compliance generic rules or creating your own custom rules

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[qodo-code-review]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
High-level	Avoid hardcoding event-specific content Avoid hardcoding event-specific content and credentials in the frontend. Instead, abstract this data into a configuration file or a backend endpoint to improve security and maintainability. Examples: src/app/guide/page.tsx [15-173] title: 'Panduan Juri - Etags IMPHNEN 2025', description: 'Panduan cepat untuk juri hackathon IMPHNEN 2025', }; export default function JudgeGuidePage() { return ( <div className="min-h-screen bg-linear-to-b from-white via-[#2B4C7E]/5 to-white"> {/* Header */} <header className="border-b border-[#A8A8A8]/20 bg-white/80 backdrop-blur-sm sticky top-0 z-50"> <div className="container mx-auto px-4 py-4 flex items-center justify-between"> ... (clipped 149 lines) src/app/login/page.tsx [175-205] <div className="w-full p-4 bg-[#2B4C7E]/5 border border-[#2B4C7E]/20 rounded-xl space-y-3"> <p className="text-xs font-semibold text-[#0C2340] uppercase tracking-wide"> Demo Credentials </p> <div className="space-y-2 text-xs"> <div className="flex justify-between items-center p-2 bg-white rounded-lg border border-[#A8A8A8]/20"> <div> <span className="font-medium text-[#0C2340]">Admin</span> <p className="text-[#606060]"> admin@example.com / admin123 ... (clipped 21 lines) Solution Walkthrough: Before: // src/app/guide/page.tsx export default function JudgeGuidePage() { return ( <div> <h1 className="text-3xl ...">Selamat Datang, Juri! 👋</h1> <p>Panduan singkat untuk mencoba fitur utama Etags...</p> {/* Step 1: Hardcoded QR Code */} <img src="https://tags.cylink.site/api/tags/TAG-1764985700713-X8GZPS/designed" /> <Link href="/verify/TAG-1764985700713-X8GZPS">...</Link> {/* Step 2: Hardcoded Credentials */} <div> <p>admin@example.com</p> <p>admin123</p> </div> <div> <p>judge@hackathon.imphnen.dev</p> <p>IMPHNEN2025</p> </div> </div> ); } After: // config/eventConfig.ts (or fetched from backend) export const eventConfig = { name: "IMPHNEN 2025", tagId: "TAG-1764985700713-X8GZPS", // Credentials should ideally not be in frontend code at all demoCredentials: [ { role: "Admin", user: "admin@example.com", pass: "admin123" }, { role: "Brand (Judge)", user: "judge@hackathon.imphnen.dev", pass: "IMPHNEN2025" } ] }; // src/app/guide/page.tsx import { eventConfig } from '@/config/eventConfig'; export default function JudgeGuidePage() { return ( <div> <h1>Selamat Datang, Juri! 👋</h1> <p>Panduan singkat untuk mencoba fitur utama Etags...</p> <img src={`/api/tags/${eventConfig.tagId}/designed`} /> <Link href={`/verify/${eventConfig.tagId}`}>...</Link> {/* Render credentials from eventConfig */} </div> ); } Suggestion importance[1-10]: 9 __ Why: The suggestion correctly identifies a significant security risk by exposing demo credentials and a major design flaw in hardcoding event-specific data, which severely impacts maintainability and reusability.	High
General	Avoid hardcoding values in multiple places Extract the hardcoded tag ID TAG-1764985700713-X8GZPS, which is used in two separate locations, into a single constant to improve maintainability. src/app/guide/page.tsx [80-104] - <img - src="https://tags.cylink.site/api/tags/TAG-1764985700713-X8GZPS/designed" - alt="QR Code untuk Juri" - width={150} - height={150} - className="rounded-lg" - /> -... -<Link href="/verify/TAG-1764985700713-X8GZPS"> - Buka Halaman Verifikasi - <ExternalLink className="w-4 h-4 ml-2" /> -</Link> + const JUDGE_TAG_ID = 'TAG-1764985700713-X8GZPS'; + export default function JudgeGuidePage() { + return ( + // ... + {/* eslint-disable-next-line @next/next/no-img-element */} + <img + src={`https://tags.cylink.site/api/tags/${JUDGE_TAG_ID}/designed`} + alt="QR Code untuk Juri" + width={150} + height={150} + className="rounded-lg" + /> + // ... + > + <Link href={`/verify/${JUDGE_TAG_ID}`}> + Buka Halaman Verifikasi + <ExternalLink className="w-4 h-4 ml-2" /> + </Link> + </Button> + // ... + ); + } + [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 6 __ Why: The suggestion correctly identifies a repeated hardcoded value and proposes using a constant, which improves code maintainability and adheres to the DRY principle.	Low
More