Edit file File name : documentation.html Content :<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Omni Rewards - Application Documentation</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lexend:wght@700&display=swap" rel="stylesheet"> <style> body { font-family: 'Inter', sans-serif; } .font-headline { font-family: 'Lexend', sans-serif; } h1, h2, h3 { font-family: 'Lexend', sans-serif; } .prose { max-width: 80ch; } .prose h2 { padding-bottom: 0.5rem; border-bottom-width: 2px; border-color: #e5e7eb; margin-bottom: 1.5rem; margin-top: 2.5rem; } .prose h3 { margin-top: 2rem; margin-bottom: 1rem; } .prose p, .prose li { color: #4b5563; } .prose strong { color: #1f2937; } .prose a { color: #4f46e5; text-decoration: underline; } .prose code { background-color: #e5e7eb; padding: 0.2rem 0.4rem; border-radius: 0.25rem; font-size: 0.9em; color: #1f2937; } .badge { display: inline-block; padding: 0.25em 0.6em; font-size: 0.75em; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0.375rem; } .badge-purple { background-color: #ede9fe; color: #5b21b6; } .badge-blue { background-color: #dbeafe; color: #1d4ed8; } </style> </head> <body class="bg-slate-50 text-slate-800"> <div class="container mx-auto p-8 md:p-12"> <article class="prose lg:prose-lg bg-white p-8 md:p-12 rounded-xl shadow-lg mx-auto"> <div class="text-center mb-12"> <h1 class="text-5xl font-bold text-slate-900">Omni Rewards Documentation</h1> <p class="text-lg text-slate-500 mt-2">Your complete guide to the Loyalty Reward System.</p> </div> <hr class="my-12"> <!-- For Business Owners Section --> <section> <h2 class="text-3xl font-bold text-slate-800 flex items-center"> <span class="badge badge-purple mr-3">For Business Owners</span> Admin Guide </h2> <p>This section covers all the features available in the Admin Dashboard, helping you manage your loyalty program efficiently.</p> <h3>1. Logging In</h3> <p>To access the management dashboard, navigate to the main login page. Select the <strong>Business</strong> tab, enter your assigned <code>username</code> and <code>password</code>, and click "Sign In as Business".</p> <h3>2. Understanding the Dashboard</h3> <p>The dashboard provides an at-a-glance overview of your loyalty program:</p> <ul> <li><strong>Total Customers:</strong> The total number of customers registered in your system.</li> <li><strong>Points This Month:</strong> The total points awarded to all customers within the current calendar month.</li> <li><strong>Total Points Distributed:</strong> The cumulative number of points ever awarded.</li> <li><strong>Rewards Claimed:</strong> The total number of rewards that have been redeemed by customers.</li> </ul> <p>The dashboard also features a chart showing monthly activity for points added vs. rewards claimed.</p> <h3>3. Adding Points to a Customer's Account</h3> <p>Awarding points is a primary function. You have two convenient methods:</p> <ul> <li><strong>QR Code Scan (Recommended):</strong> Click the green "Add Point" button. This will open your device's camera. Simply scan the customer's QR code from their app to instantly award them one point.</li> <li><strong>Manual Search:</strong> If a customer doesn't have their QR code, you can use the search bar within the "Add Point" modal. Search for them by name or phone number and click the "+1 Point" button next to their name.</li> </ul> <h3>4. Managing Customers</h3> <p>The main section of your dashboard lists all customers. The most loyal customers appear at the top in special "VIP" cards.</p> <p>For any customer, you can click the <strong>three-dot menu icon</strong> to access a range of actions:</p> <ul> <li><strong>Add/Remove Point:</strong> Quickly add or subtract a single point.</li> <li><strong>Reset Points:</strong> Resets a customer's progress toward their next reward to zero. This does not affect already earned rewards.</li> <li><strong>Reset Password:</strong> Generates a new temporary password for the customer if they are locked out.</li> <li><strong>Delete Customer:</strong> Permanently removes the customer and their history from the system. This action is irreversible.</li> </ul> <h3>5. Redeeming Rewards</h3> <p>When a customer has one or more rewards available, a green "Redeem Reward" button will appear on their card or in their table row. Click this button and confirm the action to redeem one reward for the customer.</p> <h3>6. Business Settings</h3> <p>Click the "Settings" button to customize your application:</p> <ul> <li><strong>Business Name & Logo:</strong> Set your brand name and upload a logo for a personalized look.</li> <li><strong>Brand Colors:</strong> Use color pickers to adjust the application's primary, background, and accent colors to match your brand. You can also get color suggestions from your uploaded logo.</li> <li><strong>Manage Credentials:</strong> Update your own admin username and password.</li> <li><strong>Manage Admins:</strong> Add or remove other admin accounts (e.g., for other staff members or checkout stations).</li> <li><strong>Danger Zone:</strong> Contains the "Delete All Customers" function. This is a factory reset that erases all customer data, perfect for starting fresh or re-purposing the app for a new business. <strong>Use with extreme caution.</strong></li> </ul> </section> <hr class="my-12"> <!-- For Customers Section --> <section> <h2 class="text-3xl font-bold text-slate-800 flex items-center"> <span class="badge badge-blue mr-3">For Customers</span> User Guide </h2> <p>This guide explains how you can track your points, view your rewards, and manage your account.</p> <h3>1. Logging In</h3> <p>On the main page, select the <strong>Customer</strong> tab. Enter the <code>phone number</code> you registered with and your <code>password</code> to sign in.</p> <h3>2. The Customer Dashboard</h3> <p>Your dashboard is your central hub for everything related to your loyalty status.</p> <ul> <li><strong>Loyalty Status Card:</strong> This is the main card showing your current points progress. Once you collect 10 points, they automatically convert into 1 available reward.</li> <li><strong>VIP Status:</strong> After redeeming 5 rewards, your card will turn gold to signify your VIP status!</li> <li><strong>Available Rewards:</strong> If you have rewards, a message will appear on your card. Simply ask the cashier to redeem it for you on your next visit.</li> </ul> <h3>3. Using Your QR Code</h3> <p>Your unique QR code is displayed prominently on your dashboard. To earn a point, simply show this code to the cashier during checkout so they can scan it.</p> <p><strong>Offline Access:</strong> After you log in for the first time, your dashboard and QR code are saved to your device. You can open the app from your phone's home screen and show your QR code even if you don't have an internet connection!</p> <h3>4. Points History</h3> <p>Curious about your activity? The "Points History" card shows a list of all the points you've earned and the rewards you've redeemed, so you can easily track your progress.</p> <h3>5. Managing Your Account</h3> <p>Click the "Settings" button at the top of your dashboard to:</p> <ul> <li><strong>Update Your Phone Number.</strong></li> <li><strong>Change Your Password.</strong> We recommend changing the temporary password given to you upon registration.</li> </ul> </section> </article> </div> </body> </html> Save