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

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 = () => {
return (
<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>
<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>
);
};