egullickson/motovaultpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add guide content sections 1-10 with screenshot placeholders (refs #203)

Browse Source 
All 10 guide sections converted from USER-GUIDE.md to styled React
components using GuideTable and GuideScreenshot shared components.
Sections 1-5: Getting Started, Dashboard, Vehicles, Fuel Logs, Maintenance.
Sections 6-10: Gas Stations, Documents, Settings, Subscription Tiers, Mobile Experience.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Eric Gullickson
2026-02-15 16:55:30 -06:00
parent 864da55cec
commit 6196ebfc91
10 changed files with 1556 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
frontend/src/pages/GuidePage/sections/DashboardSection.tsx
View File

@@ -1,8 +1,156 @@
import { GuideTable } from '../components/GuideTable';
import { GuideScreenshot } from '../components/GuideScreenshot';
export const DashboardSection = () => { export const DashboardSection = () => {
return ( return (
<section id="dashboard" className="py-8 border-b border-white/5 scroll-mt-24"> <section id="dashboard" className="py-8 border-b border-white/5 scroll-mt-24">
<h2 className="text-2xl font-bold text-avus mb-4">2. Dashboard</h2> <h2 className="text-2xl font-bold text-avus mb-4">2. Dashboard</h2>
<p className="text-titanio/70">Content loading in Milestone 2...</p>
<p className="text-titanio/70 leading-relaxed mb-4">
After logging in, you land on the Dashboard -- your fleet headquarters.
</p>
{/* Your Fleet Overview */}
<div id="your-fleet-overview" className="scroll-mt-24">
<h3 className="text-xl font-semibold text-avus mb-3 mt-8">Your Fleet Overview</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
<strong className="text-avus">What You See</strong>
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
The Dashboard displays a "Your Fleet" heading with all your vehicles shown as cards in a grid layout. Each vehicle card shows:
</p>
<ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>
<strong className="text-avus">Vehicle icon</strong> -- A small colored indicator badge (varies by vehicle)
</li>
<li>
<strong className="text-avus">Vehicle name</strong> -- The nickname or full name (e.g., "Beast", "MERLOT")
</li>
<li>
<strong className="text-avus">Health status</strong> -- A green dot indicates "All clear" (no overdue maintenance); other colors indicate attention needed
</li>
<li>
<strong className="text-avus">Status text</strong> -- "All clear" or a maintenance alert message
</li>
<li>
<strong className="text-avus">Odometer reading</strong> -- Current mileage (e.g., "35,000 mi")
</li>
</ul>
<GuideScreenshot
src="/guide/dashboard-desktop.webp"
alt="Dashboard showing vehicle fleet overview with health status cards"
caption="The Dashboard displays your vehicle fleet with health status and quick actions"
/>
<p className="text-titanio/70 leading-relaxed mb-4">
<strong className="text-avus">Click any vehicle card</strong> to go directly to that vehicle's detail page.
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
The vehicle health status system provides at-a-glance monitoring of your fleet:
</p>
<ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>
<strong className="text-avus">Green</strong> -- All maintenance is current, no action needed
</li>
<li>
<strong className="text-avus">Yellow</strong> -- Maintenance due soon (within the next 500 miles or 1 month)
</li>
<li>
<strong className="text-avus">Red</strong> -- Maintenance overdue or critical attention required
</li>
</ul>
<p className="text-titanio/70 leading-relaxed mb-4">
The Dashboard layout adapts to your screen size. On desktop, vehicle cards display in a 3-column grid. On tablets, they adjust to 2 columns. On mobile devices, cards stack vertically for easy scrolling.
</p>
</div>
{/* Quick Actions */}
<div id="quick-actions" className="scroll-mt-24">
<h3 className="text-xl font-semibold text-avus mb-3 mt-8">Quick Actions</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
Two action buttons appear in the top-right corner of the Dashboard:
</p>
<GuideTable
headers={['Button', 'Action']}
rows={[
['+ Add Vehicle', 'Opens the Add Vehicle form on the Vehicles page'],
['LOG FUEL', 'Opens the fuel logging modal to quickly record a fill-up'],
]}
/>
<p className="text-titanio/70 leading-relaxed mb-4">
These quick actions let you perform the most common tasks without navigating away from the Dashboard.
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
The <strong className="text-avus">LOG FUEL</strong> button opens a modal where you can quickly record a fuel fill-up for any vehicle. This is the fastest way to log fuel after visiting a gas station. The modal pre-fills with the current date and time, and calculates MPG automatically based on your odometer reading.
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
The <strong className="text-avus">+ Add Vehicle</strong> button takes you directly to the Vehicles page with the add form expanded, ready for you to enter your new vehicle's details.
</p>
<h4 className="text-lg font-semibold text-avus mb-3 mt-6">Navigation Sidebar</h4>
<p className="text-titanio/70 leading-relaxed mb-4">
The left sidebar provides access to all sections of the app:
</p>
<GuideTable
headers={['Menu Item', 'Description']}
rows={[
['Dashboard', 'Fleet overview (home)'],
['Vehicles', 'Manage your vehicle collection'],
['Fuel Logs', 'Track fuel purchases and efficiency'],
['Maintenance', 'Record service history and set schedules'],
['Gas Stations', 'Find and save gas stations'],
['Documents', 'Store vehicle-related documents'],
['Settings', 'Account, preferences, and data management'],
]}
/>
<p className="text-titanio/70 leading-relaxed mb-4">
At the bottom of the sidebar you will see your email address and a <strong className="text-avus">Sign Out</strong> button.
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
The header bar at the top shows a notification bell icon and a "Welcome back" greeting with your email.
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
On mobile devices, the navigation experience changes:
</p>
<ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>
The left sidebar is hidden and replaced by a <strong className="text-avus">bottom navigation bar</strong> for quick access to Dashboard, Vehicles, and Stations
</li>
<li>
A <strong className="text-avus">floating action button (FAB)</strong> appears in the center with quick actions for logging fuel, adding vehicles, and more
</li>
<li>
The full menu is accessible via a <strong className="text-avus">hamburger menu</strong> in the header that slides up from the bottom
</li>
</ul>
<GuideScreenshot
src="/guide/dashboard-mobile.webp"
alt="Dashboard on mobile device showing responsive layout"
caption="The Dashboard adapts to mobile screens with a responsive grid layout"
mobile
/>
<p className="text-titanio/70 leading-relaxed mb-4">
The Dashboard is designed as your central hub for managing your entire fleet. From here, you can monitor vehicle health, access quick actions, and navigate to any section of the application. The responsive design ensures a consistent experience whether you are using a desktop computer, tablet, or mobile phone.
</p>
</div>
</section> </section>
); );
}; };

96
frontend/src/pages/GuidePage/sections/DocumentsSection.tsx
View File

@@ -1,8 +1,102 @@
import { GuideTable } from '../components/GuideTable';
import { GuideScreenshot } from '../components/GuideScreenshot';
export const DocumentsSection = () => { export const DocumentsSection = () => {
return ( return (
<section id="documents" className="py-8 border-b border-white/5 scroll-mt-24"> <section id="documents" className="py-8 border-b border-white/5 scroll-mt-24">
<h2 className="text-2xl font-bold text-avus mb-4">7. Documents</h2> <h2 className="text-2xl font-bold text-avus mb-4">7. Documents</h2>
<p className="text-titanio/70">Content loading in Milestone 3...</p>
<p className="text-titanio/70 leading-relaxed mb-4">
Click <strong className="text-avus">Documents</strong> in the sidebar. This page stores all your vehicle-related paperwork digitally.
</p>
<h3 id="documents-overview" className="text-xl font-semibold text-avus mb-3 mt-8">
Documents Overview
</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
The page shows the title "Documents" with an <strong className="text-avus">Add Document</strong> button in the top-right corner.
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
If you have no documents yet, you will see an empty state:
</p>
<ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>A document icon</li>
<li>"No Documents Yet"</li>
<li>"You haven't added any documents yet. Documents will appear here once you create them."</li>
<li>A <strong className="text-avus">Go to Vehicles</strong> button (since documents are associated with vehicles)</li>
</ul>
<GuideScreenshot
src="/guide/documents-desktop.webp"
alt="Documents page showing document storage"
caption="The Documents page for managing vehicle-related paperwork"
/>
<p className="text-titanio/70 leading-relaxed mb-4">
When documents exist, they appear in a list/grid with preview thumbnails, titles, document types, and associated vehicles.
</p>
<h3 id="adding-a-document" className="text-xl font-semibold text-avus mb-3 mt-8">
Adding a Document
</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
Click <strong className="text-avus">Add Document</strong> to open the "Add Document" modal with these fields:
</p>
<GuideTable
headers={['Field', 'Required', 'Description']}
rows={[
['Vehicle', 'Yes', 'Select which vehicle this document belongs to (dropdown of your vehicles)'],
['Document Type', 'Yes', 'Select the type (see Document Types below)'],
['Title', 'Yes', 'A descriptive title (e.g., "Honda CBR600RR Service Manual")'],
['Notes', 'Optional', 'Any additional notes about this document'],
['Upload image/PDF', 'Yes', 'Click Choose File to upload an image or PDF file'],
]}
/>
<p className="text-titanio/70 leading-relaxed mb-4">
Click <strong className="text-avus">Create Document</strong> to save, or <strong className="text-avus">Cancel</strong> to discard.
</p>
<h3 id="document-types" className="text-xl font-semibold text-avus mb-3 mt-8">
Document Types
</h3>
<GuideTable
headers={['Type', 'What to Store']}
rows={[
['Insurance', 'Insurance policies, cards, declarations pages'],
['Registration', 'Vehicle registration documents'],
['Maintenance Manual', 'Owner\'s manuals and service manuals'],
['Service Records', 'Service history documentation from dealers/shops'],
['Recall Notices', 'Vehicle recall notifications'],
['Inspection Reports', 'State inspection or emissions test reports'],
['Receipts', 'Purchase receipts for parts, accessories, services'],
['Other', 'Any other vehicle-related document'],
]}
/>
<p className="text-titanio/70 leading-relaxed mb-4">
<strong className="text-avus">Insurance documents</strong> have additional fields: Insurance Company, Policy Number, Effective Date, Expiration Date, Coverage amounts (Bodily Injury, Property Damage), and Premium.
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
<strong className="text-avus">Registration documents</strong> have additional fields: License Plate, Expiration Date, and Registration Cost.
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
Documents with expiration dates will show countdown badges so you know when renewals are coming up.
</p>
<div className="bg-primary-500/10 border border-primary-500/30 rounded-lg p-4 my-4">
<p className="text-titanio/70 leading-relaxed">
<strong className="text-avus">Pro Feature:</strong> When uploading a Maintenance Manual PDF, Pro and Enterprise users can check <strong className="text-avus">Scan for Maintenance Schedule</strong> to automatically extract a complete maintenance schedule from the document. See Maintenance Manual PDF Extraction (Pro) for the full workflow.
</p>
</div>
</section> </section>
); );
}; };

136
frontend/src/pages/GuidePage/sections/FuelLogsSection.tsx
View File

@@ -1,8 +1,142 @@
import { GuideTable } from '../components/GuideTable';
import { GuideScreenshot } from '../components/GuideScreenshot';
export const FuelLogsSection = () => { export const FuelLogsSection = () => {
return ( return (
<section id="fuel-logs" className="py-8 border-b border-white/5 scroll-mt-24"> <section id="fuel-logs" className="py-8 border-b border-white/5 scroll-mt-24">
<h2 className="text-2xl font-bold text-avus mb-4">4. Fuel Logs</h2> <h2 className="text-2xl font-bold text-avus mb-4">4. Fuel Logs</h2>
<p className="text-titanio/70">Content loading in Milestone 2...</p>
{/* Fuel Logs Overview */}
<div id="fuel-logs-overview" className="scroll-mt-24">
<h3 className="text-xl font-semibold text-avus mb-3 mt-8">Fuel Logs Overview</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
Click <strong className="text-avus">Fuel Logs</strong> in the sidebar to see the Fuel Logs page. At the top, you see summary statistics:
</p>
<GuideTable
headers={['Metric', 'Description']}
rows={[
['LOGS', 'Total number of fuel entries'],
['TOTAL FUEL', 'Total gallons (or liters) across all fill-ups'],
['TOTAL COST', 'Total amount spent on fuel'],
]}
/>
<p className="text-titanio/70 leading-relaxed mb-4">
Below the summary, a table lists all your fuel log entries. If you have no entries yet, you will see "No fuel logs yet."
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
The <strong className="text-avus">+ Add Fuel Log</strong> button is in the top-right corner.
</p>
<GuideScreenshot
src="/guide/fuel-logs-desktop.webp"
alt="Fuel Logs page showing summary statistics and fuel log entries table"
caption="The Fuel Logs page displays summary statistics and all fuel entries"
/>
</div>
{/* Logging Fuel */}
<div id="logging-fuel" className="scroll-mt-24">
<h3 className="text-xl font-semibold text-avus mb-3 mt-8">Logging Fuel</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
Click <strong className="text-avus">+ Add Fuel Log</strong> (or the <strong className="text-avus">LOG FUEL</strong> button from the Dashboard) to open the "Log Fuel" modal. The modal title reads "Add Fuel Log" with a note showing your current unit system (e.g., "Displaying in Imperial (miles, gallons, MPG)").
</p>
<h4 className="text-lg font-semibold text-avus mb-3 mt-6">Receipt Scanning</h4>
<p className="text-titanio/70 leading-relaxed mb-4">
At the top of the form, click <strong className="text-avus">SCAN RECEIPT</strong> to use your camera to photograph a fuel receipt. The OCR system will automatically extract:
</p>
<ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>Fuel amount (gallons)</li>
<li>Cost per gallon</li>
<li>Total cost</li>
<li>Date and time</li>
<li>Fuel grade</li>
<li>Station name</li>
</ul>
<p className="text-titanio/70 leading-relaxed mb-4">
You can review and edit any extracted values before saving.
</p>
<h4 className="text-lg font-semibold text-avus mb-3 mt-6">Form Fields</h4>
<GuideTable
headers={['Field', 'Required', 'Description']}
rows={[
['Select Vehicle', 'Yes', 'Choose which vehicle this fill-up is for'],
['Date & Time', 'Yes', 'Pre-filled with the current date and time; click the calendar icon to change'],
['MPG', 'Auto', 'Calculated automatically from distance and fuel amount'],
['Trip Distance / Odometer Reading', 'One required', 'Toggle between entering trip distance (miles driven since last fill) or odometer reading. Click the toggle button to switch modes.'],
['Fuel Type', 'Yes', 'Dropdown: Gasoline, Diesel, Electric, Hybrid, etc.'],
['Fuel Grade', 'Optional', 'Dropdown: 87 (Regular), 89 (Midgrade), 91 (Premium), 93 (Premium), etc.'],
['Fuel Amount', 'Yes', 'Number of gallons (or liters) purchased'],
['Cost Per Gallon', 'Yes', 'Price per gallon (or liter)'],
['Total Cost', 'Auto', 'Calculated from Fuel Amount x Cost Per Gallon. Displays "Enter fuel amount and cost per unit to see total cost." until both values are provided.'],
['Location', 'Optional', 'Type a station name to search and select'],
['Notes', 'Optional', 'Any additional notes about this fill-up'],
]}
/>
<GuideScreenshot
src="/guide/log-fuel-modal-desktop.webp"
alt="Log Fuel modal with form fields for fuel entry"
caption="The Log Fuel modal with all fields for recording a fill-up"
/>
<p className="text-titanio/70 leading-relaxed mb-4">
Click <strong className="text-avus">Add Fuel Log</strong> to save the entry. The button is disabled until all required fields are completed.
</p>
</div>
{/* Receipt Scanning */}
<div id="receipt-scanning" className="scroll-mt-24">
<h3 className="text-xl font-semibold text-avus mb-3 mt-8">Receipt Scanning</h3>
<div className="bg-primary-500/10 border border-primary-500/30 rounded-lg p-4 my-4">
<p className="text-titanio/70 leading-relaxed">
<strong className="text-avus">Pro Feature:</strong> Receipt scanning requires a Pro or Enterprise subscription. See <a href="#fuel-receipt-scanning" className="text-primary-400 hover:text-primary-300 underline">Fuel Receipt Scanning (Pro)</a> for full details on what is extracted and the review workflow.
</p>
</div>
<p className="text-titanio/70 leading-relaxed mb-4">
The receipt scanning feature uses OCR technology:
</p>
<ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>Click <strong className="text-avus">SCAN RECEIPT</strong> at the top of the Log Fuel form</li>
<li>Use your camera to photograph the receipt</li>
<li>The system extracts fuel data with confidence indicators</li>
<li>A review modal appears showing extracted values</li>
<li>Edit any incorrect values inline</li>
<li>Click <strong className="text-avus">Accept</strong> to auto-fill the form, or <strong className="text-avus">Reject</strong> to enter manually</li>
</ol>
<GuideScreenshot
src="/guide/receipt-scan-mobile.webp"
alt="Mobile device showing receipt scanning with camera"
caption="Receipt scanning uses your device camera to extract fuel data"
mobile
/>
</div>
{/* Editing and Deleting Fuel Logs */}
<div id="editing-and-deleting-fuel-logs" className="scroll-mt-24">
<h3 className="text-xl font-semibold text-avus mb-3 mt-8">Editing and Deleting Fuel Logs</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
From the fuel logs table, each entry has action buttons:
</p>
<ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>
<strong className="text-avus">Edit</strong> -- Opens the fuel log in edit mode to update any fields
</li>
<li>
<strong className="text-avus">Delete</strong> -- Removes the fuel log entry (with confirmation)
</li>
</ul>
</div>
</section> </section>
); );
}; };

99
frontend/src/pages/GuidePage/sections/GasStationsSection.tsx
View File

@@ -1,8 +1,105 @@
import { GuideTable } from '../components/GuideTable';
import { GuideScreenshot } from '../components/GuideScreenshot';
export const GasStationsSection = () => { export const GasStationsSection = () => {
return ( return (
<section id="gas-stations" className="py-8 border-b border-white/5 scroll-mt-24"> <section id="gas-stations" className="py-8 border-b border-white/5 scroll-mt-24">
<h2 className="text-2xl font-bold text-avus mb-4">6. Gas Stations</h2> <h2 className="text-2xl font-bold text-avus mb-4">6. Gas Stations</h2>
<p className="text-titanio/70">Content loading in Milestone 3...</p>
<p className="text-titanio/70 leading-relaxed mb-4">
Click <strong className="text-avus">Gas Stations</strong> in the sidebar. This page helps you find gas stations near you and save your favorites.
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
The page is split into two sections:
</p>
<ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li><strong className="text-avus">Left:</strong> An interactive Google Map showing station locations as markers</li>
<li><strong className="text-avus">Right:</strong> Search controls</li>
</ul>
<h3 id="finding-stations" className="text-xl font-semibold text-avus mb-3 mt-8">
Finding Stations
</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
<strong className="text-avus">Search Options</strong>
</p>
<GuideTable
headers={['Control', 'Description']}
rows={[
['Use Current Location', 'Large red button -- uses your device\'s GPS to center the search on your current location'],
['Street', 'Enter a street address (e.g., 123 Main St)'],
['City', 'Enter a city name'],
['State', 'Select from dropdown'],
['ZIP', 'Enter a ZIP code'],
['Search Radius', 'Slider from 1 mi to 25 mi (default: 5 mi)'],
['Search Stations', 'Click to execute the search'],
]}
/>
<GuideScreenshot
src="/guide/gas-stations-desktop.webp"
alt="Gas Stations page showing map and search controls"
caption="The Gas Stations page with interactive map and search options"
/>
<p className="text-titanio/70 leading-relaxed mb-4">
You can either use your current location OR manually enter an address. Search results appear below the map.
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
<strong className="text-avus">Search Results</strong>
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
Below the map, there are three tabs:
</p>
<GuideTable
headers={['Tab', 'Description']}
rows={[
['RESULTS (n)', 'Stations found by your search, showing count'],
['SAVED (n)', 'Your saved/favorite stations'],
['PREMIUM 93', 'Stations verified to carry true 93-octane fuel'],
]}
/>
<p className="text-titanio/70 leading-relaxed mb-4">
Each station result shows:
</p>
<ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>Station name (e.g., "Costco Gas Station", "Mobil")</li>
<li>Street address and city</li>
<li>Star rating (community-verified)</li>
<li>Fuel grade badges (e.g., "93 Octane - w/ Ethanol")</li>
<li>Save/unsave button</li>
</ul>
<h3 id="saved-stations" className="text-xl font-semibold text-avus mb-3 mt-8">
Saved Stations
</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
Click the <strong className="text-avus">SAVED</strong> tab to see your favorite stations. Saved stations also appear as yellow star markers on the map. You can:
</p>
<ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>View station details</li>
<li>Remove a station from your saved list</li>
<li>Navigate on the map by clicking a station card</li>
</ul>
<h3 id="premium-93-stations" className="text-xl font-semibold text-avus mb-3 mt-8">
Premium 93 Stations
</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
Click the <strong className="text-avus">PREMIUM 93</strong> tab to see your "Your Premium 93 Stations" -- stations that have been community-verified to carry genuine 93-octane fuel. This is especially useful for performance vehicles that require premium fuel.
</p>
</section> </section>
); );
}; };

156
frontend/src/pages/GuidePage/sections/GettingStartedSection.tsx
View File

@@ -1,8 +1,162 @@
import { GuideTable } from '../components/GuideTable';
import { GuideScreenshot } from '../components/GuideScreenshot';
export const GettingStartedSection = () => { export const GettingStartedSection = () => {
return ( return (
<section id="getting-started" className="py-8 border-b border-white/5 scroll-mt-24"> <section id="getting-started" className="py-8 border-b border-white/5 scroll-mt-24">
<h2 className="text-2xl font-bold text-avus mb-4">1. Getting Started</h2> <h2 className="text-2xl font-bold text-avus mb-4">1. Getting Started</h2>
<p className="text-titanio/70">Content loading in Milestone 2...</p>
{/* Creating an Account */}
<div id="creating-an-account" className="scroll-mt-24">
<h3 className="text-xl font-semibold text-avus mb-3 mt-8">Creating an Account</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
Navigate to <a href="https://motovaultpro.com" className="text-primary-400 hover:text-primary-300 underline">motovaultpro.com</a> and click the <strong className="text-avus">Sign Up</strong> button in the top-right corner of the navigation bar.
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
<strong className="text-avus">Sign Up Page</strong>
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
The registration page displays the MotoVaultPro logo and a clean form with the following fields:
</p>
<GuideTable
headers={['Field', 'Required', 'Details']}
rows={[
['Email Address', 'Yes', 'Your email address (e.g., your.email@example.com)'],
['Password', 'Yes', 'Minimum 8 characters, must include one uppercase letter and one number'],
['Confirm Password', 'Yes', 'Re-enter your password to confirm'],
['Terms & Conditions', 'Yes', 'Checkbox -- you must agree to the Terms & Conditions before creating your account'],
]}
/>
<GuideScreenshot
src="/guide/signup-desktop.webp"
alt="Sign Up page with registration form"
caption="The Sign Up form with email, password, and terms & conditions fields"
/>
<p className="text-titanio/70 leading-relaxed mb-4">
After filling in all fields, click the <strong className="text-avus">Create Account</strong> button.
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
If you already have an account, click the <strong className="text-avus">Login</strong> link at the bottom of the form.
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
After registration, you will receive a verification email. Click the link in the email to verify your account before logging in.
</p>
</div>
{/* Logging In */}
<div id="logging-in" className="scroll-mt-24">
<h3 className="text-xl font-semibold text-avus mb-3 mt-8">Logging In</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
Click the <strong className="text-avus">Login</strong> button in the top-right corner of the navigation bar. You will be redirected to the secure login page powered by Auth0.
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
<strong className="text-avus">Login Page</strong>
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
Enter your registered email address, then click <strong className="text-avus">Continue</strong>. On the next screen, enter your password and click <strong className="text-avus">Continue</strong> to log in.
</p>
<GuideScreenshot
src="/guide/login-desktop.webp"
alt="Login page showing email and password entry"
caption="The secure Auth0 login page"
/>
<p className="text-titanio/70 leading-relaxed mb-4">
After successful authentication, you will be redirected to the Dashboard.
</p>
</div>
{/* Onboarding */}
<div id="onboarding" className="scroll-mt-24">
<h3 className="text-xl font-semibold text-avus mb-3 mt-8">Onboarding</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
First-time users see an onboarding flow with three steps:
</p>
<ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>
<strong className="text-avus">Preferences</strong> -- Choose your preferred unit system (Imperial or Metric), distance units, and notification preferences.
</li>
<li>
<strong className="text-avus">Add Your First Vehicle</strong> -- Enter your first vehicle's details (you can skip this step and add vehicles later).
</li>
<li>
<strong className="text-avus">Complete</strong> -- A welcome screen with quick links to get started exploring the app.
</li>
</ol>
<GuideScreenshot
src="/guide/onboarding-desktop.webp"
alt="Onboarding flow showing preferences step"
caption="The onboarding flow guides new users through initial setup"
/>
<p className="text-titanio/70 leading-relaxed mb-4">
The onboarding experience is designed to get you up and running quickly. During the preferences step, you can configure:
</p>
<ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>Your preferred unit system (Imperial or Metric) for distance, volume, and fuel economy</li>
<li>Notification preferences for maintenance reminders</li>
<li>Default settings for fuel logging and vehicle tracking</li>
</ul>
<p className="text-titanio/70 leading-relaxed mb-4">
The optional vehicle setup step allows you to add your first vehicle immediately, but you can skip it and add vehicles later from the Vehicles page.
</p>
<GuideScreenshot
src="/guide/onboarding-mobile.webp"
alt="Mobile onboarding showing vehicle setup step"
caption="The onboarding flow is fully responsive and works on mobile devices"
mobile
/>
<p className="text-titanio/70 leading-relaxed mb-4">
Once onboarding is complete, you will land on the Dashboard and can begin managing your fleet immediately.
</p>
</div>
{/* Trouble Logging In */}
<div id="trouble-logging-in" className="scroll-mt-24">
<h3 className="text-xl font-semibold text-avus mb-3 mt-8">Trouble Logging In</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
If you are having trouble logging in, click the <strong className="text-avus">Trouble logging in?</strong> link in the top-right corner of the navigation bar. This will guide you through password reset and account recovery options.
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
Common login issues and solutions:
</p>
<ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>
<strong className="text-avus">Forgot Password</strong> -- Use the password reset link to receive a reset email
</li>
<li>
<strong className="text-avus">Account Not Verified</strong> -- Check your email for the verification link sent during signup
</li>
<li>
<strong className="text-avus">Locked Account</strong> -- Contact support if your account has been locked due to multiple failed login attempts
</li>
<li>
<strong className="text-avus">Browser Issues</strong> -- Try clearing your browser cache or using a different browser
</li>
</ul>
<p className="text-titanio/70 leading-relaxed mb-4">
MotoVaultPro uses Auth0 for secure authentication, ensuring your account credentials are protected with industry-standard security measures including encryption and multi-factor authentication support.
</p>
</div>
</section> </section>
); );
}; };

131
frontend/src/pages/GuidePage/sections/MaintenanceSection.tsx
View File

@@ -1,8 +1,137 @@
import { GuideTable } from '../components/GuideTable';
import { GuideScreenshot } from '../components/GuideScreenshot';
export const MaintenanceSection = () => { export const MaintenanceSection = () => {
return ( return (
<section id="maintenance" className="py-8 border-b border-white/5 scroll-mt-24"> <section id="maintenance" className="py-8 border-b border-white/5 scroll-mt-24">
<h2 className="text-2xl font-bold text-avus mb-4">5. Maintenance</h2> <h2 className="text-2xl font-bold text-avus mb-4">5. Maintenance</h2>
<p className="text-titanio/70">Content loading in Milestone 2...</p>
<p className="text-titanio/70 leading-relaxed mb-4">
Click <strong className="text-avus">Maintenance</strong> in the sidebar. This page has two tabs: <strong className="text-avus">RECORDS</strong> and <strong className="text-avus">SCHEDULES</strong>.
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
At the top is a <strong className="text-avus">Vehicle</strong> dropdown to select which vehicle you are viewing or adding maintenance for.
</p>
{/* Maintenance Records */}
<div id="maintenance-records" className="scroll-mt-24">
<h3 className="text-xl font-semibold text-avus mb-3 mt-8">Maintenance Records</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
The <strong className="text-avus">RECORDS</strong> tab shows your maintenance history for the selected vehicle. Below the list is the "Add Maintenance Record" form.
</p>
<GuideScreenshot
src="/guide/maintenance-records-desktop.webp"
alt="Maintenance Records tab showing history and add form"
caption="The Maintenance Records tab displays service history and an add form"
/>
</div>
{/* Adding a Maintenance Record */}
<div id="adding-a-maintenance-record" className="scroll-mt-24">
<h3 className="text-xl font-semibold text-avus mb-3 mt-8">Adding a Maintenance Record</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
The form on the RECORDS tab includes:
</p>
<h4 className="text-lg font-semibold text-avus mb-3 mt-6">Receipt Upload</h4>
<div className="bg-primary-500/10 border border-primary-500/30 rounded-lg p-4 my-4">
<p className="text-titanio/70 leading-relaxed">
<strong className="text-avus">Pro Feature:</strong> Maintenance receipt scanning requires a Pro or Enterprise subscription. See <a href="#maintenance-receipt-scanning" className="text-primary-400 hover:text-primary-300 underline">Maintenance Receipt Scanning (Pro)</a> for full details.
</p>
</div>
<p className="text-titanio/70 leading-relaxed mb-4">
Click the <strong className="text-avus">ADD RECEIPT</strong> button (dashed outline area) to upload or photograph a maintenance receipt. The OCR system can extract:
</p>
<ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>Category and service type</li>
<li>Cost</li>
<li>Date</li>
<li>Shop name</li>
</ul>
<h4 className="text-lg font-semibold text-avus mb-3 mt-6">Form Fields</h4>
<GuideTable
headers={['Field', 'Required', 'Description']}
rows={[
['Category', 'Yes', 'Dropdown with options: Routine Maintenance, Repair, Performance Upgrade. Each category has specific subtypes.'],
['Date', 'Yes', 'Pre-filled with today\'s date; click the calendar icon to change'],
['Odometer Reading', 'Optional', 'Vehicle mileage at time of service'],
['Cost', 'Optional', 'Total cost of the service (in $)'],
['Shop Name', 'Optional', 'Name of the service shop'],
['Notes', 'Optional', 'Additional details about the service (max 1,000 characters)'],
]}
/>
<p className="text-titanio/70 leading-relaxed mb-4">
Click <strong className="text-avus">Add Record</strong> to save the maintenance record.
</p>
<h4 className="text-lg font-semibold text-avus mb-3 mt-6">Maintenance Categories</h4>
<GuideTable
headers={['Category', 'Example Services']}
rows={[
['Routine Maintenance', 'Oil change, air filter, tire rotation, battery, brakes, coolant flush, transmission fluid, spark plugs, fuel filter, cabin air filter, brake fluid, detailing'],
['Repair', 'Engine repair, transmission repair, brake repair, electrical, cooling system, suspension, steering, fuel system, body work, paint, glass'],
['Performance Upgrade', 'Engine tuning, suspension upgrade, wheels/tires, brake upgrade, exhaust, intake, lighting, audio'],
]}
/>
<GuideScreenshot
src="/guide/add-maintenance-mobile.webp"
alt="Mobile view of Add Maintenance Record form"
caption="The Add Maintenance Record form on mobile with category selection"
mobile
/>
</div>
{/* Maintenance Schedules */}
<div id="maintenance-schedules" className="scroll-mt-24">
<h3 className="text-xl font-semibold text-avus mb-3 mt-8">Maintenance Schedules</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
Click the <strong className="text-avus">SCHEDULES</strong> tab to set up recurring maintenance reminders.
</p>
<GuideScreenshot
src="/guide/maintenance-schedules-desktop.webp"
alt="Maintenance Schedules tab showing schedule creation form and active schedules"
caption="The Maintenance Schedules tab for setting up recurring reminders"
/>
</div>
{/* Creating a Schedule */}
<div id="creating-a-schedule" className="scroll-mt-24">
<h3 className="text-xl font-semibold text-avus mb-3 mt-8">Creating a Schedule</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
The "Create Maintenance Schedule" form includes:
</p>
<GuideTable
headers={['Field', 'Required', 'Description']}
rows={[
['Category', 'Yes', 'Same categories as maintenance records'],
['Schedule Type', 'Yes', 'Three options (radio buttons):'],
['', '', 'Interval-based -- Every X months or miles (e.g., oil change every 5,000 miles or 6 months)'],
['', '', 'Fixed date -- A specific calendar date'],
['', '', 'Time since last service -- Based on when service was last performed'],
['Interval (Months)', 'Conditional', 'Number of months between services. Optional if miles are specified.'],
['Interval (Miles)', 'Conditional', 'Number of miles between services. Optional if months are specified.'],
['Reminders', 'Optional', 'Set up to 3 reminders (Reminder 1, Reminder 2, Reminder 3) via dropdowns'],
['Email notifications', 'Optional', 'Toggle to receive email reminders when service is due'],
]}
/>
<p className="text-titanio/70 leading-relaxed mb-4">
Click <strong className="text-avus">Create Schedule</strong> to save.
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
Below the form, the "Maintenance Schedules" section lists all active schedules for the selected vehicle, showing when each service is next due.
</p>
</div>
</section> </section>
); );
}; };

63
frontend/src/pages/GuidePage/sections/MobileExperienceSection.tsx
View File

@@ -1,8 +1,69 @@
import { GuideScreenshot } from '../components/GuideScreenshot';
export const MobileExperienceSection = () => { export const MobileExperienceSection = () => {
return ( return (
<section id="mobile-experience" className="py-8 scroll-mt-24"> <section id="mobile-experience" className="py-8 scroll-mt-24">
<h2 className="text-2xl font-bold text-avus mb-4">10. Mobile Experience</h2> <h2 className="text-2xl font-bold text-avus mb-4">10. Mobile Experience</h2>
<p className="text-titanio/70">Content loading in Milestone 3...</p>
<p className="text-titanio/70 leading-relaxed mb-4">
MotoVaultPro is fully responsive and works on both desktop and mobile devices.
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
<strong className="text-avus">Mobile Navigation</strong>
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
On mobile, the sidebar is replaced by:
</p>
<ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>
A <strong className="text-avus">bottom navigation bar</strong> with icons for: Dashboard, Vehicles, Stations
</li>
<li>
A <strong className="text-avus">floating action button (FAB)</strong> in the center with quick actions:
<ul className="list-disc list-inside ml-6 mt-2 space-y-1">
<li>Log Fuel</li>
<li>Add Vehicle</li>
<li>Add Document</li>
<li>Add Maintenance</li>
</ul>
</li>
<li>
A <strong className="text-avus">hamburger menu</strong> (accessed from the header) that slides up from the bottom, providing access to all sections: Dashboard, Vehicles, Log Fuel, Maintenance, Documents, Settings
</li>
</ul>
<GuideScreenshot
src="/guide/mobile-bottom-nav.webp"
alt="Mobile bottom navigation bar with FAB quick actions"
caption="The mobile bottom navigation bar and floating action button"
mobile
/>
<GuideScreenshot
src="/guide/mobile-hamburger.webp"
alt="Mobile hamburger drawer menu"
caption="The mobile hamburger menu provides access to all sections"
mobile
/>
<p className="text-titanio/70 leading-relaxed mb-4">
<strong className="text-avus">Mobile Optimizations</strong>
</p>
<ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>Touch-friendly buttons and targets (minimum 44px)</li>
<li>Swipe gestures for image viewing</li>
<li>Camera integration for VIN scanning and receipt capture</li>
<li>Full-screen forms for data entry</li>
<li>Responsive card layouts that stack vertically on smaller screens</li>
</ul>
<p className="text-titanio/70 leading-relaxed mb-4">
All features available on desktop are also available on mobile -- no functionality is lost on smaller screens.
</p>
</section> </section>
); );
}; };

142
frontend/src/pages/GuidePage/sections/SettingsSection.tsx
View File

@@ -1,8 +1,148 @@
import { GuideTable } from '../components/GuideTable';
import { GuideScreenshot } from '../components/GuideScreenshot';
export const SettingsSection = () => { export const SettingsSection = () => {
return ( return (
<section id="settings" className="py-8 border-b border-white/5 scroll-mt-24"> <section id="settings" className="py-8 border-b border-white/5 scroll-mt-24">
<h2 className="text-2xl font-bold text-avus mb-4">8. Settings</h2> <h2 className="text-2xl font-bold text-avus mb-4">8. Settings</h2>
<p className="text-titanio/70">Content loading in Milestone 3...</p>
<p className="text-titanio/70 leading-relaxed mb-4">
Click <strong className="text-avus">Settings</strong> in the sidebar to manage your account, preferences, and data.
</p>
<h3 id="profile" className="text-xl font-semibold text-avus mb-3 mt-8">
Profile
</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
The Profile section displays your account information:
</p>
<GuideTable
headers={['Field', 'Description']}
rows={[
['Avatar', 'Shows your initial in a circle'],
['Name', 'Your display name (e.g., "Eric Gullickson")'],
['Email', 'Your account email address'],
['Account Status', 'Shows "Verified account" if email is verified'],
['Display Name', 'Your public-facing name'],
['Notification Email', 'The email address used for notifications (defaults to "Using primary email")'],
]}
/>
<GuideScreenshot
src="/guide/settings-desktop.webp"
alt="Settings page showing profile and account options"
caption="The Settings page with profile, security, subscription, and preferences"
/>
<p className="text-titanio/70 leading-relaxed mb-4">
Click the <strong className="text-avus">Edit</strong> button to update your display name or notification email.
</p>
<h3 id="security-and-privacy" className="text-xl font-semibold text-avus mb-3 mt-8">
Security and Privacy
</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
The Security & Privacy row shows "Password, two-factor authentication" with a <strong className="text-avus">Manage</strong> button. Click it to:
</p>
<ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>Change your password</li>
<li>Set up two-factor authentication</li>
<li>Manage active sessions</li>
<li>Log out all devices</li>
</ul>
<h3 id="subscription" className="text-xl font-semibold text-avus mb-3 mt-8">
Subscription
</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
Shows your current subscription plan with a <strong className="text-avus">Manage</strong> button.
</p>
<GuideTable
headers={['Plan', 'Features']}
rows={[
['FREE', 'Basic vehicle management, up to 2 vehicles, basic fuel tracking, document storage'],
['Pro', 'Up to 10 vehicles, receipt OCR scanning, maintenance schedules, email ingestion'],
['Enterprise', 'Unlimited vehicles, all Pro features'],
]}
/>
<p className="text-titanio/70 leading-relaxed mb-4">
"Upgrade to Pro or Enterprise for more features and vehicle slots."
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
Click <strong className="text-avus">Manage</strong> to view plan details, change your subscription, manage payment methods, and view billing history.
</p>
<h3 id="notifications" className="text-xl font-semibold text-avus mb-3 mt-8">
Notifications
</h3>
<GuideTable
headers={['Setting', 'Description', 'Default']}
rows={[
['Push Notifications', 'Receive notifications about your vehicles (maintenance due, etc.)', 'ON'],
['Email Updates', 'Receive maintenance reminders and updates via email', 'OFF'],
]}
/>
<p className="text-titanio/70 leading-relaxed mb-4">
Toggle each setting on or off.
</p>
<h3 id="appearance-and-units" className="text-xl font-semibold text-avus mb-3 mt-8">
Appearance and Units
</h3>
<GuideTable
headers={['Setting', 'Description', 'Options']}
rows={[
['Dark Mode', 'Use dark theme for better night viewing', 'Toggle ON/OFF (default: OFF)'],
['Units for distance and capacity', 'Choose between measurement systems', 'Imperial: miles, gallons, MPG, USD / Metric: km, liters, L/100km, EUR'],
]}
/>
<p className="text-titanio/70 leading-relaxed mb-4">
The unit system you select here applies throughout the entire application -- Dashboard, Fuel Logs, Maintenance, and Vehicle Details all update to reflect your preference.
</p>
<h3 id="data-import-and-export" className="text-xl font-semibold text-avus mb-3 mt-8">
Data Import and Export
</h3>
<GuideTable
headers={['Action', 'Description', 'Button']}
rows={[
['Import Data', 'Upload and restore your vehicle data from a backup file', 'Import'],
['Export Data', 'Download your vehicle and fuel log data as a backup file', 'Export'],
]}
/>
<p className="text-titanio/70 leading-relaxed mb-4">
Export creates a downloadable archive of all your data. Import accepts a previously exported backup file to restore your data.
</p>
<h3 id="account-actions" className="text-xl font-semibold text-avus mb-3 mt-8">
Account Actions
</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
At the bottom of the Settings page:
</p>
<GuideTable
headers={['Button', 'Action']}
rows={[
['Sign Out', 'Log out of your account'],
['DELETE ACCOUNT', 'Permanently delete your account and all data. This initiates a 30-day grace period during which you can cancel the deletion by logging back in.'],
]}
/>
</section> </section>
); );
}; };

378
frontend/src/pages/GuidePage/sections/SubscriptionSection.tsx
View File

@@ -1,8 +1,384 @@
import { GuideTable } from '../components/GuideTable';
export const SubscriptionSection = () => { export const SubscriptionSection = () => {
return ( return (
<section id="subscription-tiers" className="py-8 border-b border-white/5 scroll-mt-24"> <section id="subscription-tiers" className="py-8 border-b border-white/5 scroll-mt-24">
<h2 className="text-2xl font-bold text-avus mb-4">9. Subscription Tiers and Pro Features</h2> <h2 className="text-2xl font-bold text-avus mb-4">9. Subscription Tiers and Pro Features</h2>
<p className="text-titanio/70">Content loading in Milestone 3...</p>
<p className="text-titanio/70 leading-relaxed mb-4">
MotoVaultPro offers three subscription tiers. Higher tiers automatically include all features from lower tiers.
</p>
<h3 id="tier-comparison" className="text-xl font-semibold text-avus mb-3 mt-8">
Tier Comparison
</h3>
<GuideTable
headers={['Feature', 'Free', 'Pro', 'Enterprise']}
rows={[
['Vehicle Slots', '2', '5', 'Unlimited'],
['Vehicle management', 'Yes', 'Yes', 'Yes'],
['Fuel log tracking', 'Yes', 'Yes', 'Yes'],
['Document storage', 'Yes', 'Yes', 'Yes'],
['Gas station finder', 'Yes', 'Yes', 'Yes'],
['Maintenance records', 'Yes', 'Yes', 'Yes'],
['Maintenance schedules', 'Yes', 'Yes', 'Yes'],
['Data import/export', 'Yes', 'Yes', 'Yes'],
['VIN camera scan and decode', '--', 'Yes', 'Yes'],
['Fuel receipt OCR scanning', '--', 'Yes', 'Yes'],
['Maintenance receipt OCR scanning', '--', 'Yes', 'Yes'],
['Maintenance manual PDF extraction', '--', 'Yes', 'Yes'],
['Email ingestion (forward receipts)', '--', 'Yes', 'Yes'],
['Shared vehicle documents', '--', 'Yes', 'Yes'],
['Community station submissions', '--', 'Yes', 'Yes'],
]}
/>
<p className="text-titanio/70 leading-relaxed mb-4">
When you attempt to use a Pro feature on the Free tier, an <strong className="text-avus">Upgrade Required</strong> dialog appears explaining the feature and offering a direct link to upgrade.
</p>
<h3 id="vin-camera-scanning" className="text-xl font-semibold text-avus mb-3 mt-8">
VIN Camera Scanning and Decode (Pro)
</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
<strong className="text-avus">What it does:</strong> Use your device camera to photograph your vehicle's VIN plate, and the system automatically reads the VIN using OCR (Optical Character Recognition) and decodes it from the NHTSA database.
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
<strong className="text-avus">How to use it:</strong>
</p>
<ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>Go to <strong className="text-avus">Vehicles</strong> and click <strong className="text-avus">+ Add Vehicle</strong></li>
<li>In the VIN Number field, click the <strong className="text-avus">camera icon</strong></li>
<li>Point your camera at the VIN plate on your vehicle (typically on the driver-side dashboard or door jamb)</li>
<li>The OCR system reads the 17-character VIN from the image</li>
<li>A <strong className="text-avus">VIN OCR Review modal</strong> appears showing the detected VIN with confidence indicators</li>
<li>Confirm or correct the VIN, then click <strong className="text-avus">Accept</strong></li>
<li>Click the <strong className="text-avus">Decode VIN</strong> button</li>
<li>The system queries the NHTSA database and auto-populates: Year, Make, Model, Engine, Transmission, and Trim</li>
<li>Review the pre-filled fields and complete the remaining details</li>
</ol>
<p className="text-titanio/70 leading-relaxed mb-4">
This eliminates manual data entry errors and ensures accurate vehicle specifications.
</p>
<h3 id="fuel-receipt-scanning" className="text-xl font-semibold text-avus mb-3 mt-8">
Fuel Receipt Scanning (Pro)
</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
<strong className="text-avus">What it does:</strong> Photograph a fuel receipt and the OCR system extracts all relevant data, automatically filling in your fuel log entry.
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
<strong className="text-avus">How to use it:</strong>
</p>
<ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>Open the <strong className="text-avus">Log Fuel</strong> modal (from Dashboard or Fuel Logs page)</li>
<li>Click the <strong className="text-avus">SCAN RECEIPT</strong> button at the top of the form</li>
<li>Use your camera to photograph the fuel receipt</li>
<li>The system processes the image and extracts relevant data</li>
</ol>
<GuideTable
headers={['Extracted Field', 'Description']}
rows={[
['Fuel Amount', 'Gallons or liters purchased'],
['Cost Per Unit', 'Price per gallon/liter'],
['Total Cost', 'Total transaction amount'],
['Date & Time', 'Transaction timestamp'],
['Fuel Grade', 'Regular, Midgrade, Premium, etc.'],
['Station Name', 'Merchant name matched to known stations'],
]}
/>
<ol start={5} className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>A <strong className="text-avus">Receipt OCR Review modal</strong> appears showing all extracted values with confidence scores</li>
<li>Each field can be edited inline if the OCR got something wrong</li>
<li>The station name is automatically matched against known gas stations in the system</li>
<li>Click <strong className="text-avus">Accept</strong> to auto-fill the Log Fuel form with the extracted values</li>
<li>Click <strong className="text-avus">Reject</strong> to discard the scan and enter data manually</li>
<li>Review the pre-filled form and click <strong className="text-avus">Add Fuel Log</strong></li>
</ol>
<p className="text-titanio/70 leading-relaxed mb-4">
<strong className="text-avus">Tips for best results:</strong>
</p>
<ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>Photograph the receipt on a flat, well-lit surface</li>
<li>Ensure the entire receipt is visible in the frame</li>
<li>Avoid wrinkled or faded receipts when possible</li>
</ul>
<h3 id="maintenance-receipt-scanning" className="text-xl font-semibold text-avus mb-3 mt-8">
Maintenance Receipt Scanning (Pro)
</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
<strong className="text-avus">What it does:</strong> Photograph a maintenance or service receipt to automatically extract service details into a maintenance record.
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
<strong className="text-avus">How to use it:</strong>
</p>
<ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>Go to <strong className="text-avus">Maintenance</strong> and select a vehicle</li>
<li>On the <strong className="text-avus">RECORDS</strong> tab, click the <strong className="text-avus">ADD RECEIPT</strong> button (dashed outline area)</li>
<li>Use your camera to photograph the service receipt</li>
<li>The system processes the image and extracts relevant data</li>
</ol>
<GuideTable
headers={['Extracted Field', 'Description']}
rows={[
['Category', 'Service type (Routine, Repair, Performance)'],
['Subtypes', 'Specific services performed (e.g., Oil Change, Tire Rotation)'],
['Cost', 'Total service cost'],
['Date', 'Service date'],
['Shop Name', 'Name of the service shop'],
]}
/>
<ol start={5} className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>A <strong className="text-avus">Maintenance Receipt Review modal</strong> shows extracted values with confidence indicators</li>
<li>Edit any incorrect values inline</li>
<li>Click <strong className="text-avus">Accept</strong> to auto-fill the maintenance record form</li>
<li>Review and click <strong className="text-avus">Add Record</strong></li>
</ol>
<h3 id="maintenance-manual-pdf" className="text-xl font-semibold text-avus mb-3 mt-8">
Maintenance Manual PDF Extraction (Pro)
</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
<strong className="text-avus">What it does:</strong> Upload your vehicle's owner's manual or maintenance manual as a PDF, and the system automatically extracts the recommended maintenance schedule -- creating maintenance schedules with the correct intervals for your specific vehicle.
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
<strong className="text-avus">How to use it:</strong>
</p>
<ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>Go to <strong className="text-avus">Documents</strong> and click <strong className="text-avus">Add Document</strong></li>
<li>Select your vehicle and choose <strong className="text-avus">Maintenance Manual</strong> as the document type</li>
<li>Upload the PDF file</li>
<li>Check the <strong className="text-avus">Scan for Maintenance Schedule</strong> checkbox (Pro feature -- indicated by a lock icon for Free tier users)</li>
<li>Click <strong className="text-avus">Create Document</strong></li>
<li>The system submits the PDF for asynchronous processing</li>
<li>A progress indicator shows while the document is being analyzed</li>
<li>When processing completes, the <strong className="text-avus">Maintenance Schedule Review</strong> screen appears</li>
</ol>
<GuideTable
headers={['Column', 'Description']}
rows={[
['Checkbox', 'Select which items to create as schedules'],
['Service Name', 'Extracted maintenance service (e.g., "Engine Oil and Filter Change")'],
['Interval', 'Recommended interval in months and/or miles'],
['Details', 'Additional notes or specifications'],
['Confidence', 'How confident the system is in the extraction (High/Medium/Low)'],
]}
/>
<ol start={9} className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>Check the boxes next to the maintenance items you want to create</li>
<li>Edit any service names, intervals, or details inline</li>
<li>Click <strong className="text-avus">Create Selected Schedules</strong> to batch-create all selected items as maintenance schedules for your vehicle</li>
</ol>
<p className="text-titanio/70 leading-relaxed mb-4">
This turns a 50-page owner's manual into a complete set of maintenance reminders in minutes.
</p>
<h3 id="email-ingestion" className="text-xl font-semibold text-avus mb-3 mt-8">
Email Ingestion (Pro)
</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
<strong className="text-avus">What it does:</strong> Forward vehicle-related emails (service receipts, insurance documents, registration notices) to a dedicated email address, and they automatically appear in your MotoVaultPro account ready to be associated with a vehicle.
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
<strong className="text-avus">How to use it:</strong>
</p>
<ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>Forward any vehicle-related email to your dedicated MotoVaultPro ingestion address</li>
<li>The system processes the email and any attachments</li>
<li>On your <strong className="text-avus">Dashboard</strong>, a <strong className="text-avus">Pending Associations</strong> banner appears showing how many items are waiting</li>
<li>Click the banner to open the <strong className="text-avus">Pending Association List</strong></li>
<li>For each pending item, you see a preview of the document or receipt and a vehicle selector dropdown</li>
<li>Select the correct vehicle for each item and click <strong className="text-avus">Associate</strong></li>
<li>Or click <strong className="text-avus">Discard</strong> to remove items you do not want</li>
</ol>
<p className="text-titanio/70 leading-relaxed mb-4">
<strong className="text-avus">Bulk actions</strong> are available to discard all pending items at once.
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
This is especially useful for:
</p>
<ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>Forwarding digital receipts from auto parts stores</li>
<li>Forwarding service confirmation emails from your mechanic</li>
<li>Forwarding insurance policy documents from your provider</li>
<li>Forwarding registration renewal notices</li>
</ul>
<h3 id="shared-vehicle-documents" className="text-xl font-semibold text-avus mb-3 mt-8">
Shared Vehicle Documents (Pro)
</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
<strong className="text-avus">What it does:</strong> Associate a single document with multiple vehicles. Useful for fleet insurance policies, multi-vehicle service agreements, or shared maintenance contracts.
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
<strong className="text-avus">How to use it:</strong>
</p>
<ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>Open an existing document's detail page</li>
<li>In the <strong className="text-avus">Shared Vehicles</strong> section, click <strong className="text-avus">Add Vehicle</strong></li>
<li>Select additional vehicles from the dropdown</li>
<li>The document now appears in the Documents section for each associated vehicle</li>
<li>To remove a vehicle association, click the <strong className="text-avus">Remove</strong> button next to that vehicle</li>
</ol>
<h3 id="community-station-submissions" className="text-xl font-semibold text-avus mb-3 mt-8">
Community Station Submissions (Pro)
</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
<strong className="text-avus">What it does:</strong> Submit new gas stations to the MotoVaultPro community database, helping other enthusiasts find quality fuel locations -- especially stations carrying true 93-octane premium fuel.
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
<strong className="text-avus">How to use it:</strong>
</p>
<ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>Go to <strong className="text-avus">Gas Stations</strong></li>
<li>Look for the option to submit a new community station</li>
<li>Fill in the submission form</li>
</ol>
<GuideTable
headers={['Field', 'Description']}
rows={[
['Station Name', 'Name of the gas station'],
['Location', 'Address or location'],
['Fuel Types', 'Available fuel types and grades'],
['Amenities', 'Available amenities (bathrooms, ATM, convenience store, etc.)'],
['Notes', 'Any additional information'],
['Photo', 'Optional photo of the station'],
]}
/>
<ol start={4} className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>Submit for community review</li>
<li>An admin reviews and approves or rejects the submission</li>
<li>Approved stations appear in the <strong className="text-avus">PREMIUM 93</strong> tab and search results with a community-verified badge</li>
</ol>
<h3 id="managing-your-subscription" className="text-xl font-semibold text-avus mb-3 mt-8">
Managing Your Subscription
</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
<strong className="text-avus">Viewing Your Plan</strong>
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
Go to <strong className="text-avus">Settings</strong> and find the <strong className="text-avus">Subscription</strong> section. It shows your current plan (FREE, Pro, or Enterprise) with a <strong className="text-avus">Manage</strong> button.
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
<strong className="text-avus">Upgrading</strong>
</p>
<ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>Click <strong className="text-avus">Manage</strong> in the Subscription section</li>
<li>The Subscription page shows tier comparison cards with pricing</li>
<li>Toggle between <strong className="text-avus">Monthly</strong> and <strong className="text-avus">Annual</strong> billing (annual saves money)</li>
<li>Click <strong className="text-avus">Upgrade</strong> on the plan you want</li>
<li>Enter your payment details using the secure Stripe payment form</li>
<li>Your new features are available immediately</li>
</ol>
<p className="text-titanio/70 leading-relaxed mb-4">
<strong className="text-avus">Payment Methods</strong>
</p>
<ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>Payment is processed through Stripe (credit/debit cards)</li>
<li>You can save a card for recurring billing</li>
<li>Update or remove your payment method at any time</li>
<li>View billing history and download invoices as PDFs</li>
</ul>
<p className="text-titanio/70 leading-relaxed mb-4">
<strong className="text-avus">Billing History</strong>
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
The billing history table shows all past invoices with:
</p>
<ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>Date</li>
<li>Description</li>
<li>Amount</li>
<li>Status (Paid, Pending, Failed)</li>
<li>Download PDF button for each invoice</li>
</ul>
<p className="text-titanio/70 leading-relaxed mb-4">
<strong className="text-avus">Downgrading</strong>
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
If you downgrade from a higher tier, you may need to reduce your vehicles to fit within the lower tier's limit:
</p>
<ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>Click <strong className="text-avus">Downgrade</strong> on the lower plan</li>
<li>A <strong className="text-avus">Vehicle Selection dialog</strong> appears if you exceed the new tier's vehicle limit</li>
<li>Select which vehicles to keep (e.g., keep 2 for Free tier)</li>
<li>A warning explains that removed vehicles and their data will be deleted</li>
<li>Confirm the downgrade</li>
</ol>
<GuideTable
headers={['Tier', 'Vehicle Limit']}
rows={[
['Free', '2'],
['Pro', '5'],
['Enterprise', 'Unlimited'],
]}
/>
<p className="text-titanio/70 leading-relaxed mb-4">
<strong className="text-avus">Cancelling</strong>
</p>
<ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>On the Subscription page, click <strong className="text-avus">Cancel Subscription</strong></li>
<li>A confirmation dialog appears with retention options</li>
<li>Confirm cancellation</li>
<li>Your subscription remains active until the end of the current billing period</li>
<li>After expiration, your account reverts to the Free tier</li>
<li>Click <strong className="text-avus">Reactivate</strong> at any time before expiration to keep your plan</li>
</ol>
</section> </section>
); );
}; };

215
frontend/src/pages/GuidePage/sections/VehiclesSection.tsx
View File

@@ -1,8 +1,221 @@
import { GuideTable } from '../components/GuideTable';
import { GuideScreenshot } from '../components/GuideScreenshot';
export const VehiclesSection = () => { export const VehiclesSection = () => {
return ( return (
<section id="vehicles" className="py-8 border-b border-white/5 scroll-mt-24"> <section id="vehicles" className="py-8 border-b border-white/5 scroll-mt-24">
<h2 className="text-2xl font-bold text-avus mb-4">3. Vehicles</h2> <h2 className="text-2xl font-bold text-avus mb-4">3. Vehicles</h2>
<p className="text-titanio/70">Content loading in Milestone 2...</p>
{/* Viewing Your Vehicles */}
<div id="viewing-your-vehicles" className="scroll-mt-24">
<h3 className="text-xl font-semibold text-avus mb-3 mt-8">Viewing Your Vehicles</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
Click <strong className="text-avus">Vehicles</strong> in the sidebar to see the "My Vehicles" page. This page shows:
</p>
<ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>
<strong className="text-avus">Search bar</strong> -- Search vehicles by name, make, model, or VIN
</li>
<li>
<strong className="text-avus">+ Add Vehicle</strong> button -- Top-right corner
</li>
<li>
<strong className="text-avus">Vehicle cards</strong> in a grid layout (3 columns on desktop), each displaying:
<ul className="list-disc list-inside ml-6 mt-2 space-y-1">
<li>Manufacturer logo (e.g., Chevrolet bowtie, GMC logo)</li>
<li>Vehicle nickname or full name</li>
<li>Year, Make, and Model</li>
<li>License plate number</li>
<li>Current odometer reading (in miles or kilometers)</li>
<li><strong className="text-avus">Edit</strong> (pencil icon) and <strong className="text-avus">Delete</strong> (trash icon) buttons at the bottom of each card</li>
</ul>
</li>
</ul>
<GuideScreenshot
src="/guide/vehicles-list-desktop.webp"
alt="Vehicles page showing grid of vehicle cards with details"
caption="The Vehicles page displays all your vehicles in a searchable grid"
/>
</div>
{/* Adding a Vehicle */}
<div id="adding-a-vehicle" className="scroll-mt-24">
<h3 className="text-xl font-semibold text-avus mb-3 mt-8">Adding a Vehicle</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
Click the <strong className="text-avus">+ Add Vehicle</strong> button to expand the "Add New Vehicle" form directly on the Vehicles page. The form has the following sections:
</p>
<h4 className="text-lg font-semibold text-avus mb-3 mt-6">Vehicle Photo</h4>
<p className="text-titanio/70 leading-relaxed mb-4">
Upload a photo of your vehicle. Click <strong className="text-avus">ADD PHOTO</strong> to select an image file.
</p>
<ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>Accepted formats: JPEG or PNG</li>
<li>Maximum file size: 5MB</li>
</ul>
<h4 className="text-lg font-semibold text-avus mb-3 mt-6">VIN Number</h4>
<p className="text-titanio/70 leading-relaxed mb-4">
Enter your vehicle's 17-character VIN (Vehicle Identification Number).
</p>
<ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>Type the VIN manually in the text field, OR</li>
<li>Click the <strong className="text-avus">camera icon</strong> to scan the VIN using your device camera (uses OCR technology)</li>
<li>Click the <strong className="text-avus">Decode VIN</strong> button to automatically populate vehicle details from the VIN</li>
</ul>
<p className="text-titanio/70 leading-relaxed mb-4">
Note: VIN is optional if you provide a License Plate instead.
</p>
<h4 className="text-lg font-semibold text-avus mb-3 mt-6">Vehicle Specifications</h4>
<p className="text-titanio/70 leading-relaxed mb-4">
These fields use cascading dropdowns -- each selection narrows the options for the next field:
</p>
<GuideTable
headers={['Field', 'How It Works']}
rows={[
['Year', 'Select the model year from the dropdown'],
['Make', 'Available after selecting Year (e.g., Chevrolet, GMC, Ford)'],
['Model', 'Available after selecting Make (e.g., Silverado, Camaro, Sierra)'],
['Trim', 'Available after selecting Model (e.g., LT Double Cab 4WD)'],
['Engine', 'Available after selecting Trim (e.g., 6.6L 401 HP V8)'],
['Transmission', 'Available after selecting Trim (e.g., 10-Speed Automatic)'],
]}
/>
<GuideScreenshot
src="/guide/add-vehicle-form-desktop.webp"
alt="Add Vehicle form showing cascading dropdowns for specifications"
caption="The Add Vehicle form with cascading dropdowns for easy data entry"
/>
<h4 className="text-lg font-semibold text-avus mb-3 mt-6">Additional Details</h4>
<GuideTable
headers={['Field', 'Example', 'Notes']}
rows={[
['Nickname', 'Beast, Family Car', 'A friendly name for your vehicle'],
['Color', 'Black, Blue, Red', 'Vehicle color'],
['License Plate', 'ABC-123', 'Required if VIN is not provided'],
['Current Odometer Reading', '50000', 'Current mileage in your selected unit'],
]}
/>
<h4 className="text-lg font-semibold text-avus mb-3 mt-6">Purchase Information</h4>
<GuideTable
headers={['Field', 'Example', 'Notes']}
rows={[
['Purchase Price', '25000', 'What you paid for the vehicle'],
['Purchase Date', 'mm/dd/yyyy', 'When you purchased the vehicle'],
]}
/>
<p className="text-titanio/70 leading-relaxed mb-4">
Click <strong className="text-avus">Add Vehicle</strong> to save, or <strong className="text-avus">Cancel</strong> to discard.
</p>
</div>
{/* VIN Decode */}
<div id="vin-decode" className="scroll-mt-24">
<h3 className="text-xl font-semibold text-avus mb-3 mt-8">VIN Decode</h3>
<div className="bg-primary-500/10 border border-primary-500/30 rounded-lg p-4 my-4">
<p className="text-titanio/70 leading-relaxed">
<strong className="text-avus">Pro Feature:</strong> VIN camera scanning and automatic decode require a Pro or Enterprise subscription. Free tier users can still type a VIN manually. See <a href="#vin-camera-scanning" className="text-primary-400 hover:text-primary-300 underline">VIN Camera Scanning and Decode (Pro)</a> for full details.
</p>
</div>
<p className="text-titanio/70 leading-relaxed mb-4">
The VIN Decode feature automatically fills in vehicle details from a VIN:
</p>
<ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>Enter or scan your 17-character VIN</li>
<li>Click the <strong className="text-avus">Decode VIN</strong> button</li>
<li>The system looks up the VIN and auto-populates: Year, Make, Model, Engine, Transmission, and Trim</li>
<li>Review the pre-filled fields and make any corrections</li>
<li>Continue filling in the remaining fields (Nickname, Color, etc.)</li>
</ol>
<GuideScreenshot
src="/guide/vin-decode-desktop.webp"
alt="VIN Decode feature showing auto-populated vehicle specifications"
caption="The VIN Decode feature automatically fills in vehicle details from the NHTSA database"
/>
</div>
{/* Vehicle Detail Page */}
<div id="vehicle-detail-page" className="scroll-mt-24">
<h3 className="text-xl font-semibold text-avus mb-3 mt-8">Vehicle Detail Page</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
Click any vehicle card (from Dashboard or Vehicles list) to open the Vehicle Detail Page. This page shows everything about a single vehicle:
</p>
<h4 className="text-lg font-semibold text-avus mb-3 mt-6">Header Area</h4>
<ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>Back arrow and <strong className="text-avus">BACK</strong> link to return to the previous page</li>
<li>Vehicle nickname as the page title (e.g., "Beast")</li>
<li><strong className="text-avus">Edit Vehicle</strong> button (top-right)</li>
<li>Quick action buttons: <strong className="text-avus">Add Fuel Log</strong> and <strong className="text-avus">Add Maintenance</strong></li>
</ul>
<h4 className="text-lg font-semibold text-avus mb-3 mt-6">Vehicle Details Section</h4>
<ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>Manufacturer logo</li>
<li>Full vehicle description (e.g., "2022 Chevrolet Silverado 2500HD")</li>
<li>VIN Number</li>
<li>Year, Make, and Model (displayed in a 3-column row)</li>
<li>Trim, Engine, and Transmission (displayed in a 3-column row)</li>
<li>Nickname</li>
<li>Color and License Plate (side by side)</li>
<li>Current Odometer Reading</li>
</ul>
<GuideScreenshot
src="/guide/vehicle-detail-desktop.webp"
alt="Vehicle Detail page showing complete vehicle information and records"
caption="The Vehicle Detail page displays all information and records for a single vehicle"
/>
<h4 className="text-lg font-semibold text-avus mb-3 mt-6">Purchase Information Section</h4>
<ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>Purchase Price</li>
<li>Purchase Date</li>
</ul>
<h4 className="text-lg font-semibold text-avus mb-3 mt-6">Ownership Costs Section</h4>
<ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>Tracks insurance, registration, taxes, and other recurring vehicle costs</li>
<li>Shows "No ownership costs recorded yet" until costs are added</li>
</ul>
<h4 className="text-lg font-semibold text-avus mb-3 mt-6">Vehicle Records Section</h4>
<ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
<li>A table showing all records associated with this vehicle (fuel logs, maintenance records)</li>
<li>Columns: Date, Type, Summary, Amount, Actions</li>
<li><strong className="text-avus">Filter</strong> dropdown to filter by record type (All, Fuel, Maintenance)</li>
</ul>
</div>
{/* Editing a Vehicle */}
<div id="editing-a-vehicle" className="scroll-mt-24">
<h3 className="text-xl font-semibold text-avus mb-3 mt-8">Editing a Vehicle</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
From the Vehicle Detail Page, click the <strong className="text-avus">Edit Vehicle</strong> button. This opens the vehicle form pre-filled with the current values. Make your changes and save.
</p>
<p className="text-titanio/70 leading-relaxed mb-4">
From the Vehicles list, click the <strong className="text-avus">pencil icon</strong> on any vehicle card to edit it directly.
</p>
</div>
{/* Deleting a Vehicle */}
<div id="deleting-a-vehicle" className="scroll-mt-24">
<h3 className="text-xl font-semibold text-avus mb-3 mt-8">Deleting a Vehicle</h3>
<p className="text-titanio/70 leading-relaxed mb-4">
From the Vehicles list, click the <strong className="text-avus">trash icon</strong> on any vehicle card. You will be asked to confirm the deletion. Deleting a vehicle is permanent and removes all associated records.
</p>
</div>
</section> </section>
); );
}; };