From 6196ebfc9118adfbff46fdc92de1c49781dd5971 Mon Sep 17 00:00:00 2001 From: Eric Gullickson <16152721+ericgullickson@users.noreply.github.com> Date: Sun, 15 Feb 2026 16:55:30 -0600 Subject: [PATCH] feat: add guide content sections 1-10 with screenshot placeholders (refs #203) 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 --- .../GuidePage/sections/DashboardSection.tsx | 150 ++++++- .../GuidePage/sections/DocumentsSection.tsx | 96 ++++- .../GuidePage/sections/FuelLogsSection.tsx | 136 ++++++- .../GuidePage/sections/GasStationsSection.tsx | 99 ++++- .../sections/GettingStartedSection.tsx | 156 +++++++- .../GuidePage/sections/MaintenanceSection.tsx | 131 +++++- .../sections/MobileExperienceSection.tsx | 63 ++- .../GuidePage/sections/SettingsSection.tsx | 142 ++++++- .../sections/SubscriptionSection.tsx | 378 +++++++++++++++++- .../GuidePage/sections/VehiclesSection.tsx | 215 +++++++++- 10 files changed, 1556 insertions(+), 10 deletions(-) diff --git a/frontend/src/pages/GuidePage/sections/DashboardSection.tsx b/frontend/src/pages/GuidePage/sections/DashboardSection.tsx index 271b7f0..e1cb944 100644 --- a/frontend/src/pages/GuidePage/sections/DashboardSection.tsx +++ b/frontend/src/pages/GuidePage/sections/DashboardSection.tsx @@ -1,8 +1,156 @@ +import { GuideTable } from '../components/GuideTable'; +import { GuideScreenshot } from '../components/GuideScreenshot'; + export const DashboardSection = () => { return (

2. Dashboard

-

Content loading in Milestone 2...

+ +

+ After logging in, you land on the Dashboard -- your fleet headquarters. +

+ + {/* Your Fleet Overview */} +
+

Your Fleet Overview

+

+ What You See +

+ +

+ The Dashboard displays a "Your Fleet" heading with all your vehicles shown as cards in a grid layout. Each vehicle card shows: +

+ +
    +
  • + Vehicle icon -- A small colored indicator badge (varies by vehicle) +
    • +
  • + Vehicle name -- The nickname or full name (e.g., "Beast", "MERLOT") +
    • +
  • + Health status -- A green dot indicates "All clear" (no overdue maintenance); other colors indicate attention needed +
    • +
  • + Status text -- "All clear" or a maintenance alert message +
    • +
  • + Odometer reading -- Current mileage (e.g., "35,000 mi") +
    • +
+ + + +

+ Click any vehicle card to go directly to that vehicle's detail page. +

+ +

+ The vehicle health status system provides at-a-glance monitoring of your fleet: +

+ +
    +
  • + Green -- All maintenance is current, no action needed +
    • +
  • + Yellow -- Maintenance due soon (within the next 500 miles or 1 month) +
    • +
  • + Red -- Maintenance overdue or critical attention required +
    • +
+ +

+ 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. +

+
+ + {/* Quick Actions */} +
+

Quick Actions

+

+ Two action buttons appear in the top-right corner of the Dashboard: +

+ + + +

+ These quick actions let you perform the most common tasks without navigating away from the Dashboard. +

+ +

+ The LOG FUEL 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. +

+ +

+ The + Add Vehicle button takes you directly to the Vehicles page with the add form expanded, ready for you to enter your new vehicle's details. +

+ +

Navigation Sidebar

+ +

+ The left sidebar provides access to all sections of the app: +

+ + + +

+ At the bottom of the sidebar you will see your email address and a Sign Out button. +

+ +

+ The header bar at the top shows a notification bell icon and a "Welcome back" greeting with your email. +

+ +

+ On mobile devices, the navigation experience changes: +

+ +
    +
  • + The left sidebar is hidden and replaced by a bottom navigation bar for quick access to Dashboard, Vehicles, and Stations +
    • +
  • + A floating action button (FAB) appears in the center with quick actions for logging fuel, adding vehicles, and more +
    • +
  • + The full menu is accessible via a hamburger menu in the header that slides up from the bottom +
    • +
+ + + +

+ 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. +

+
); }; diff --git a/frontend/src/pages/GuidePage/sections/DocumentsSection.tsx b/frontend/src/pages/GuidePage/sections/DocumentsSection.tsx index c098c8a..6579f7d 100644 --- a/frontend/src/pages/GuidePage/sections/DocumentsSection.tsx +++ b/frontend/src/pages/GuidePage/sections/DocumentsSection.tsx @@ -1,8 +1,102 @@ +import { GuideTable } from '../components/GuideTable'; +import { GuideScreenshot } from '../components/GuideScreenshot'; + export const DocumentsSection = () => { return (

7. Documents

-

Content loading in Milestone 3...

+ +

+ Click Documents in the sidebar. This page stores all your vehicle-related paperwork digitally. +

+ +

+ Documents Overview +

+ +

+ The page shows the title "Documents" with an Add Document button in the top-right corner. +

+ +

+ If you have no documents yet, you will see an empty state: +

+ + + + + +

+ When documents exist, they appear in a list/grid with preview thumbnails, titles, document types, and associated vehicles. +

+ +

+ Adding a Document +

+ +

+ Click Add Document to open the "Add Document" modal with these fields: +

+ + + +

+ Click Create Document to save, or Cancel to discard. +

+ +

+ Document Types +

+ + + +

+ Insurance documents have additional fields: Insurance Company, Policy Number, Effective Date, Expiration Date, Coverage amounts (Bodily Injury, Property Damage), and Premium. +

+ +

+ Registration documents have additional fields: License Plate, Expiration Date, and Registration Cost. +

+ +

+ Documents with expiration dates will show countdown badges so you know when renewals are coming up. +

+ +
+

+ Pro Feature: When uploading a Maintenance Manual PDF, Pro and Enterprise users can check Scan for Maintenance Schedule to automatically extract a complete maintenance schedule from the document. See Maintenance Manual PDF Extraction (Pro) for the full workflow. +

+
); }; diff --git a/frontend/src/pages/GuidePage/sections/FuelLogsSection.tsx b/frontend/src/pages/GuidePage/sections/FuelLogsSection.tsx index c1e45a2..47bc123 100644 --- a/frontend/src/pages/GuidePage/sections/FuelLogsSection.tsx +++ b/frontend/src/pages/GuidePage/sections/FuelLogsSection.tsx @@ -1,8 +1,142 @@ +import { GuideTable } from '../components/GuideTable'; +import { GuideScreenshot } from '../components/GuideScreenshot'; + export const FuelLogsSection = () => { return (

4. Fuel Logs

-

Content loading in Milestone 2...

+ + {/* Fuel Logs Overview */} +
+

Fuel Logs Overview

+

+ Click Fuel Logs in the sidebar to see the Fuel Logs page. At the top, you see summary statistics: +

+ + + +

+ Below the summary, a table lists all your fuel log entries. If you have no entries yet, you will see "No fuel logs yet." +

+ +

+ The + Add Fuel Log button is in the top-right corner. +

+ + +
+ + {/* Logging Fuel */} +
+

Logging Fuel

+

+ Click + Add Fuel Log (or the LOG FUEL 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)"). +

+ +

Receipt Scanning

+

+ At the top of the form, click SCAN RECEIPT to use your camera to photograph a fuel receipt. The OCR system will automatically extract: +

+ +
    +
  • Fuel amount (gallons)
    • +
  • Cost per gallon
    • +
  • Total cost
    • +
  • Date and time
    • +
  • Fuel grade
    • +
  • Station name
    • +
+ +

+ You can review and edit any extracted values before saving. +

+ +

Form Fields

+ + + + +

+ Click Add Fuel Log to save the entry. The button is disabled until all required fields are completed. +

+
+ + {/* Receipt Scanning */} +
+

Receipt Scanning

+
+

+ Pro Feature: Receipt scanning requires a Pro or Enterprise subscription. See Fuel Receipt Scanning (Pro) for full details on what is extracted and the review workflow. +

+
+ +

+ The receipt scanning feature uses OCR technology: +

+ +
    +
  1. Click SCAN RECEIPT at the top of the Log Fuel form
    2. +
  2. Use your camera to photograph the receipt
    3. +
  3. The system extracts fuel data with confidence indicators
    4. +
  4. A review modal appears showing extracted values
    5. +
  5. Edit any incorrect values inline
    6. +
  6. Click Accept to auto-fill the form, or Reject to enter manually
    7. +
+ + +
+ + {/* Editing and Deleting Fuel Logs */} +
+

Editing and Deleting Fuel Logs

+

+ From the fuel logs table, each entry has action buttons: +

+ +
    +
  • + Edit -- Opens the fuel log in edit mode to update any fields +
    • +
  • + Delete -- Removes the fuel log entry (with confirmation) +
    • +
+
); }; diff --git a/frontend/src/pages/GuidePage/sections/GasStationsSection.tsx b/frontend/src/pages/GuidePage/sections/GasStationsSection.tsx index 0c46913..02f7484 100644 --- a/frontend/src/pages/GuidePage/sections/GasStationsSection.tsx +++ b/frontend/src/pages/GuidePage/sections/GasStationsSection.tsx @@ -1,8 +1,105 @@ +import { GuideTable } from '../components/GuideTable'; +import { GuideScreenshot } from '../components/GuideScreenshot'; + export const GasStationsSection = () => { return (

6. Gas Stations

-

Content loading in Milestone 3...

+ +

+ Click Gas Stations in the sidebar. This page helps you find gas stations near you and save your favorites. +

+ +

+ The page is split into two sections: +

+ + + +

+ Finding Stations +

+ +

+ Search Options +

+ + + + + +

+ You can either use your current location OR manually enter an address. Search results appear below the map. +

+ +

+ Search Results +

+ +

+ Below the map, there are three tabs: +

+ + + +

+ Each station result shows: +

+ +
    +
  • Station name (e.g., "Costco Gas Station", "Mobil")
    • +
  • Street address and city
    • +
  • Star rating (community-verified)
    • +
  • Fuel grade badges (e.g., "93 Octane - w/ Ethanol")
    • +
  • Save/unsave button
    • +
+ +

+ Saved Stations +

+ +

+ Click the SAVED tab to see your favorite stations. Saved stations also appear as yellow star markers on the map. You can: +

+ +
    +
  • View station details
    • +
  • Remove a station from your saved list
    • +
  • Navigate on the map by clicking a station card
    • +
+ +

+ Premium 93 Stations +

+ +

+ Click the PREMIUM 93 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. +

); }; diff --git a/frontend/src/pages/GuidePage/sections/GettingStartedSection.tsx b/frontend/src/pages/GuidePage/sections/GettingStartedSection.tsx index c20832a..c513806 100644 --- a/frontend/src/pages/GuidePage/sections/GettingStartedSection.tsx +++ b/frontend/src/pages/GuidePage/sections/GettingStartedSection.tsx @@ -1,8 +1,162 @@ +import { GuideTable } from '../components/GuideTable'; +import { GuideScreenshot } from '../components/GuideScreenshot'; + export const GettingStartedSection = () => { return (

1. Getting Started

-

Content loading in Milestone 2...

+ + {/* Creating an Account */} +
+

Creating an Account

+

+ Navigate to motovaultpro.com and click the Sign Up button in the top-right corner of the navigation bar. +

+ +

+ Sign Up Page +

+ +

+ The registration page displays the MotoVaultPro logo and a clean form with the following fields: +

+ + + + + +

+ After filling in all fields, click the Create Account button. +

+ +

+ If you already have an account, click the Login link at the bottom of the form. +

+ +

+ After registration, you will receive a verification email. Click the link in the email to verify your account before logging in. +

+
+ + {/* Logging In */} +
+

Logging In

+

+ Click the Login button in the top-right corner of the navigation bar. You will be redirected to the secure login page powered by Auth0. +

+ +

+ Login Page +

+ +

+ Enter your registered email address, then click Continue. On the next screen, enter your password and click Continue to log in. +

+ + + +

+ After successful authentication, you will be redirected to the Dashboard. +

+
+ + {/* Onboarding */} +
+

Onboarding

+

+ First-time users see an onboarding flow with three steps: +

+ +
    +
  1. + Preferences -- Choose your preferred unit system (Imperial or Metric), distance units, and notification preferences. +
    2. +
  2. + Add Your First Vehicle -- Enter your first vehicle's details (you can skip this step and add vehicles later). +
    3. +
  3. + Complete -- A welcome screen with quick links to get started exploring the app. +
    4. +
+ + + +

+ The onboarding experience is designed to get you up and running quickly. During the preferences step, you can configure: +

+ +
    +
  • Your preferred unit system (Imperial or Metric) for distance, volume, and fuel economy
    • +
  • Notification preferences for maintenance reminders
    • +
  • Default settings for fuel logging and vehicle tracking
    • +
+ +

+ 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. +

+ + + +

+ Once onboarding is complete, you will land on the Dashboard and can begin managing your fleet immediately. +

+
+ + {/* Trouble Logging In */} +
+

Trouble Logging In

+

+ If you are having trouble logging in, click the Trouble logging in? link in the top-right corner of the navigation bar. This will guide you through password reset and account recovery options. +

+ +

+ Common login issues and solutions: +

+ +
    +
  • + Forgot Password -- Use the password reset link to receive a reset email +
    • +
  • + Account Not Verified -- Check your email for the verification link sent during signup +
    • +
  • + Locked Account -- Contact support if your account has been locked due to multiple failed login attempts +
    • +
  • + Browser Issues -- Try clearing your browser cache or using a different browser +
    • +
+ +

+ MotoVaultPro uses Auth0 for secure authentication, ensuring your account credentials are protected with industry-standard security measures including encryption and multi-factor authentication support. +

+
); }; diff --git a/frontend/src/pages/GuidePage/sections/MaintenanceSection.tsx b/frontend/src/pages/GuidePage/sections/MaintenanceSection.tsx index f58fbe2..2ea4e36 100644 --- a/frontend/src/pages/GuidePage/sections/MaintenanceSection.tsx +++ b/frontend/src/pages/GuidePage/sections/MaintenanceSection.tsx @@ -1,8 +1,137 @@ +import { GuideTable } from '../components/GuideTable'; +import { GuideScreenshot } from '../components/GuideScreenshot'; + export const MaintenanceSection = () => { return (

5. Maintenance

-

Content loading in Milestone 2...

+ +

+ Click Maintenance in the sidebar. This page has two tabs: RECORDS and SCHEDULES. +

+ +

+ At the top is a Vehicle dropdown to select which vehicle you are viewing or adding maintenance for. +

+ + {/* Maintenance Records */} +
+

Maintenance Records

+

+ The RECORDS tab shows your maintenance history for the selected vehicle. Below the list is the "Add Maintenance Record" form. +

+ + +
+ + {/* Adding a Maintenance Record */} +
+

Adding a Maintenance Record

+

+ The form on the RECORDS tab includes: +

+ +

Receipt Upload

+
+

+ Pro Feature: Maintenance receipt scanning requires a Pro or Enterprise subscription. See Maintenance Receipt Scanning (Pro) for full details. +

+
+ +

+ Click the ADD RECEIPT button (dashed outline area) to upload or photograph a maintenance receipt. The OCR system can extract: +

+ +
    +
  • Category and service type
    • +
  • Cost
    • +
  • Date
    • +
  • Shop name
    • +
+ +

Form Fields

+ + +

+ Click Add Record to save the maintenance record. +

+ +

Maintenance Categories

+ + + +
+ + {/* Maintenance Schedules */} +
+

Maintenance Schedules

+

+ Click the SCHEDULES tab to set up recurring maintenance reminders. +

+ + +
+ + {/* Creating a Schedule */} +
+

Creating a Schedule

+

+ The "Create Maintenance Schedule" form includes: +

+ + + +

+ Click Create Schedule to save. +

+ +

+ Below the form, the "Maintenance Schedules" section lists all active schedules for the selected vehicle, showing when each service is next due. +

+
); }; diff --git a/frontend/src/pages/GuidePage/sections/MobileExperienceSection.tsx b/frontend/src/pages/GuidePage/sections/MobileExperienceSection.tsx index 7f9f764..78e8c89 100644 --- a/frontend/src/pages/GuidePage/sections/MobileExperienceSection.tsx +++ b/frontend/src/pages/GuidePage/sections/MobileExperienceSection.tsx @@ -1,8 +1,69 @@ +import { GuideScreenshot } from '../components/GuideScreenshot'; + export const MobileExperienceSection = () => { return (

10. Mobile Experience

-

Content loading in Milestone 3...

+ +

+ MotoVaultPro is fully responsive and works on both desktop and mobile devices. +

+ +

+ Mobile Navigation +

+ +

+ On mobile, the sidebar is replaced by: +

+ + + + + + + +

+ Mobile Optimizations +

+ +
    +
  • Touch-friendly buttons and targets (minimum 44px)
    • +
  • Swipe gestures for image viewing
    • +
  • Camera integration for VIN scanning and receipt capture
    • +
  • Full-screen forms for data entry
    • +
  • Responsive card layouts that stack vertically on smaller screens
    • +
+ +

+ All features available on desktop are also available on mobile -- no functionality is lost on smaller screens. +

); }; diff --git a/frontend/src/pages/GuidePage/sections/SettingsSection.tsx b/frontend/src/pages/GuidePage/sections/SettingsSection.tsx index a8fcb52..e2aaf16 100644 --- a/frontend/src/pages/GuidePage/sections/SettingsSection.tsx +++ b/frontend/src/pages/GuidePage/sections/SettingsSection.tsx @@ -1,8 +1,148 @@ +import { GuideTable } from '../components/GuideTable'; +import { GuideScreenshot } from '../components/GuideScreenshot'; + export const SettingsSection = () => { return (

8. Settings

-

Content loading in Milestone 3...

+ +

+ Click Settings in the sidebar to manage your account, preferences, and data. +

+ +

+ Profile +

+ +

+ The Profile section displays your account information: +

+ + + + + +

+ Click the Edit button to update your display name or notification email. +

+ +

+ Security and Privacy +

+ +

+ The Security & Privacy row shows "Password, two-factor authentication" with a Manage button. Click it to: +

+ +
    +
  • Change your password
    • +
  • Set up two-factor authentication
    • +
  • Manage active sessions
    • +
  • Log out all devices
    • +
+ +

+ Subscription +

+ +

+ Shows your current subscription plan with a Manage button. +

+ + + +

+ "Upgrade to Pro or Enterprise for more features and vehicle slots." +

+ +

+ Click Manage to view plan details, change your subscription, manage payment methods, and view billing history. +

+ +

+ Notifications +

+ + + +

+ Toggle each setting on or off. +

+ +

+ Appearance and Units +

+ + + +

+ The unit system you select here applies throughout the entire application -- Dashboard, Fuel Logs, Maintenance, and Vehicle Details all update to reflect your preference. +

+ +

+ Data Import and Export +

+ + + +

+ Export creates a downloadable archive of all your data. Import accepts a previously exported backup file to restore your data. +

+ +

+ Account Actions +

+ +

+ At the bottom of the Settings page: +

+ +
); }; diff --git a/frontend/src/pages/GuidePage/sections/SubscriptionSection.tsx b/frontend/src/pages/GuidePage/sections/SubscriptionSection.tsx index 9a0061f..5a6c77a 100644 --- a/frontend/src/pages/GuidePage/sections/SubscriptionSection.tsx +++ b/frontend/src/pages/GuidePage/sections/SubscriptionSection.tsx @@ -1,8 +1,384 @@ +import { GuideTable } from '../components/GuideTable'; + export const SubscriptionSection = () => { return (

9. Subscription Tiers and Pro Features

-

Content loading in Milestone 3...

+ +

+ MotoVaultPro offers three subscription tiers. Higher tiers automatically include all features from lower tiers. +

+ +

+ Tier Comparison +

+ + + +

+ When you attempt to use a Pro feature on the Free tier, an Upgrade Required dialog appears explaining the feature and offering a direct link to upgrade. +

+ +

+ VIN Camera Scanning and Decode (Pro) +

+ +

+ What it does: 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. +

+ +

+ How to use it: +

+ +
    +
  1. Go to Vehicles and click + Add Vehicle
    2. +
  2. In the VIN Number field, click the camera icon
    3. +
  3. Point your camera at the VIN plate on your vehicle (typically on the driver-side dashboard or door jamb)
    4. +
  4. The OCR system reads the 17-character VIN from the image
    5. +
  5. A VIN OCR Review modal appears showing the detected VIN with confidence indicators
    6. +
  6. Confirm or correct the VIN, then click Accept
    7. +
  7. Click the Decode VIN button
    8. +
  8. The system queries the NHTSA database and auto-populates: Year, Make, Model, Engine, Transmission, and Trim
    9. +
  9. Review the pre-filled fields and complete the remaining details
    10. +
+ +

+ This eliminates manual data entry errors and ensures accurate vehicle specifications. +

+ +

+ Fuel Receipt Scanning (Pro) +

+ +

+ What it does: Photograph a fuel receipt and the OCR system extracts all relevant data, automatically filling in your fuel log entry. +

+ +

+ How to use it: +

+ +
    +
  1. Open the Log Fuel modal (from Dashboard or Fuel Logs page)
    2. +
  2. Click the SCAN RECEIPT button at the top of the form
    3. +
  3. Use your camera to photograph the fuel receipt
    4. +
  4. The system processes the image and extracts relevant data
    5. +
+ + + +
    +
  1. A Receipt OCR Review modal appears showing all extracted values with confidence scores
    2. +
  2. Each field can be edited inline if the OCR got something wrong
    3. +
  3. The station name is automatically matched against known gas stations in the system
    4. +
  4. Click Accept to auto-fill the Log Fuel form with the extracted values
    5. +
  5. Click Reject to discard the scan and enter data manually
    6. +
  6. Review the pre-filled form and click Add Fuel Log
    7. +
+ +

+ Tips for best results: +

+ +
    +
  • Photograph the receipt on a flat, well-lit surface
    • +
  • Ensure the entire receipt is visible in the frame
    • +
  • Avoid wrinkled or faded receipts when possible
    • +
+ +

+ Maintenance Receipt Scanning (Pro) +

+ +

+ What it does: Photograph a maintenance or service receipt to automatically extract service details into a maintenance record. +

+ +

+ How to use it: +

+ +
    +
  1. Go to Maintenance and select a vehicle
    2. +
  2. On the RECORDS tab, click the ADD RECEIPT button (dashed outline area)
    3. +
  3. Use your camera to photograph the service receipt
    4. +
  4. The system processes the image and extracts relevant data
    5. +
+ + + +
    +
  1. A Maintenance Receipt Review modal shows extracted values with confidence indicators
    2. +
  2. Edit any incorrect values inline
    3. +
  3. Click Accept to auto-fill the maintenance record form
    4. +
  4. Review and click Add Record
    5. +
+ +

+ Maintenance Manual PDF Extraction (Pro) +

+ +

+ What it does: 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. +

+ +

+ How to use it: +

+ +
    +
  1. Go to Documents and click Add Document
    2. +
  2. Select your vehicle and choose Maintenance Manual as the document type
    3. +
  3. Upload the PDF file
    4. +
  4. Check the Scan for Maintenance Schedule checkbox (Pro feature -- indicated by a lock icon for Free tier users)
    5. +
  5. Click Create Document
    6. +
  6. The system submits the PDF for asynchronous processing
    7. +
  7. A progress indicator shows while the document is being analyzed
    8. +
  8. When processing completes, the Maintenance Schedule Review screen appears
    9. +
+ + + +
    +
  1. Check the boxes next to the maintenance items you want to create
    2. +
  2. Edit any service names, intervals, or details inline
    3. +
  3. Click Create Selected Schedules to batch-create all selected items as maintenance schedules for your vehicle
    4. +
+ +

+ This turns a 50-page owner's manual into a complete set of maintenance reminders in minutes. +

+ +

+ Email Ingestion (Pro) +

+ +

+ What it does: 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. +

+ +

+ How to use it: +

+ +
    +
  1. Forward any vehicle-related email to your dedicated MotoVaultPro ingestion address
    2. +
  2. The system processes the email and any attachments
    3. +
  3. On your Dashboard, a Pending Associations banner appears showing how many items are waiting
    4. +
  4. Click the banner to open the Pending Association List
    5. +
  5. For each pending item, you see a preview of the document or receipt and a vehicle selector dropdown
    6. +
  6. Select the correct vehicle for each item and click Associate
    7. +
  7. Or click Discard to remove items you do not want
    8. +
+ +

+ Bulk actions are available to discard all pending items at once. +

+ +

+ This is especially useful for: +

+ +
    +
  • Forwarding digital receipts from auto parts stores
    • +
  • Forwarding service confirmation emails from your mechanic
    • +
  • Forwarding insurance policy documents from your provider
    • +
  • Forwarding registration renewal notices
    • +
+ +

+ Shared Vehicle Documents (Pro) +

+ +

+ What it does: Associate a single document with multiple vehicles. Useful for fleet insurance policies, multi-vehicle service agreements, or shared maintenance contracts. +

+ +

+ How to use it: +

+ +
    +
  1. Open an existing document's detail page
    2. +
  2. In the Shared Vehicles section, click Add Vehicle
    3. +
  3. Select additional vehicles from the dropdown
    4. +
  4. The document now appears in the Documents section for each associated vehicle
    5. +
  5. To remove a vehicle association, click the Remove button next to that vehicle
    6. +
+ +

+ Community Station Submissions (Pro) +

+ +

+ What it does: Submit new gas stations to the MotoVaultPro community database, helping other enthusiasts find quality fuel locations -- especially stations carrying true 93-octane premium fuel. +

+ +

+ How to use it: +

+ +
    +
  1. Go to Gas Stations
    2. +
  2. Look for the option to submit a new community station
    3. +
  3. Fill in the submission form
    4. +
+ + + +
    +
  1. Submit for community review
    2. +
  2. An admin reviews and approves or rejects the submission
    3. +
  3. Approved stations appear in the PREMIUM 93 tab and search results with a community-verified badge
    4. +
+ +

+ Managing Your Subscription +

+ +

+ Viewing Your Plan +

+ +

+ Go to Settings and find the Subscription section. It shows your current plan (FREE, Pro, or Enterprise) with a Manage button. +

+ +

+ Upgrading +

+ +
    +
  1. Click Manage in the Subscription section
    2. +
  2. The Subscription page shows tier comparison cards with pricing
    3. +
  3. Toggle between Monthly and Annual billing (annual saves money)
    4. +
  4. Click Upgrade on the plan you want
    5. +
  5. Enter your payment details using the secure Stripe payment form
    6. +
  6. Your new features are available immediately
    7. +
+ +

+ Payment Methods +

+ +
    +
  • Payment is processed through Stripe (credit/debit cards)
    • +
  • You can save a card for recurring billing
    • +
  • Update or remove your payment method at any time
    • +
  • View billing history and download invoices as PDFs
    • +
+ +

+ Billing History +

+ +

+ The billing history table shows all past invoices with: +

+ +
    +
  • Date
    • +
  • Description
    • +
  • Amount
    • +
  • Status (Paid, Pending, Failed)
    • +
  • Download PDF button for each invoice
    • +
+ +

+ Downgrading +

+ +

+ If you downgrade from a higher tier, you may need to reduce your vehicles to fit within the lower tier's limit: +

+ +
    +
  1. Click Downgrade on the lower plan
    2. +
  2. A Vehicle Selection dialog appears if you exceed the new tier's vehicle limit
    3. +
  3. Select which vehicles to keep (e.g., keep 2 for Free tier)
    4. +
  4. A warning explains that removed vehicles and their data will be deleted
    5. +
  5. Confirm the downgrade
    6. +
+ + + +

+ Cancelling +

+ +
    +
  1. On the Subscription page, click Cancel Subscription
    2. +
  2. A confirmation dialog appears with retention options
    3. +
  3. Confirm cancellation
    4. +
  4. Your subscription remains active until the end of the current billing period
    5. +
  5. After expiration, your account reverts to the Free tier
    6. +
  6. Click Reactivate at any time before expiration to keep your plan
    7. +
); }; diff --git a/frontend/src/pages/GuidePage/sections/VehiclesSection.tsx b/frontend/src/pages/GuidePage/sections/VehiclesSection.tsx index a4e7fc0..cee1ad1 100644 --- a/frontend/src/pages/GuidePage/sections/VehiclesSection.tsx +++ b/frontend/src/pages/GuidePage/sections/VehiclesSection.tsx @@ -1,8 +1,221 @@ +import { GuideTable } from '../components/GuideTable'; +import { GuideScreenshot } from '../components/GuideScreenshot'; + export const VehiclesSection = () => { return (

3. Vehicles

-

Content loading in Milestone 2...

+ + {/* Viewing Your Vehicles */} +
+

Viewing Your Vehicles

+

+ Click Vehicles in the sidebar to see the "My Vehicles" page. This page shows: +

+ +
    +
  • + Search bar -- Search vehicles by name, make, model, or VIN +
    • +
  • + + Add Vehicle button -- Top-right corner +
    • +
  • + Vehicle cards in a grid layout (3 columns on desktop), each displaying: +
      +
    • Manufacturer logo (e.g., Chevrolet bowtie, GMC logo)
      • +
    • Vehicle nickname or full name
      • +
    • Year, Make, and Model
      • +
    • License plate number
      • +
    • Current odometer reading (in miles or kilometers)
      • +
    • Edit (pencil icon) and Delete (trash icon) buttons at the bottom of each card
      • +
    +
    • +
+ + +
+ + {/* Adding a Vehicle */} +
+

Adding a Vehicle

+

+ Click the + Add Vehicle button to expand the "Add New Vehicle" form directly on the Vehicles page. The form has the following sections: +

+ +

Vehicle Photo

+

+ Upload a photo of your vehicle. Click ADD PHOTO to select an image file. +

+
    +
  • Accepted formats: JPEG or PNG
    • +
  • Maximum file size: 5MB
    • +
+ +

VIN Number

+

+ Enter your vehicle's 17-character VIN (Vehicle Identification Number). +

+
    +
  • Type the VIN manually in the text field, OR
    • +
  • Click the camera icon to scan the VIN using your device camera (uses OCR technology)
    • +
  • Click the Decode VIN button to automatically populate vehicle details from the VIN
    • +
+

+ Note: VIN is optional if you provide a License Plate instead. +

+ +

Vehicle Specifications

+

+ These fields use cascading dropdowns -- each selection narrows the options for the next field: +

+ + + + + +

Additional Details

+ + +

Purchase Information

+ + +

+ Click Add Vehicle to save, or Cancel to discard. +

+
+ + {/* VIN Decode */} +
+

VIN Decode

+
+

+ Pro Feature: VIN camera scanning and automatic decode require a Pro or Enterprise subscription. Free tier users can still type a VIN manually. See VIN Camera Scanning and Decode (Pro) for full details. +

+
+ +

+ The VIN Decode feature automatically fills in vehicle details from a VIN: +

+ +
    +
  1. Enter or scan your 17-character VIN
    2. +
  2. Click the Decode VIN button
    3. +
  3. The system looks up the VIN and auto-populates: Year, Make, Model, Engine, Transmission, and Trim
    4. +
  4. Review the pre-filled fields and make any corrections
    5. +
  5. Continue filling in the remaining fields (Nickname, Color, etc.)
    6. +
+ + +
+ + {/* Vehicle Detail Page */} +
+

Vehicle Detail Page

+

+ Click any vehicle card (from Dashboard or Vehicles list) to open the Vehicle Detail Page. This page shows everything about a single vehicle: +

+ +

Header Area

+
    +
  • Back arrow and BACK link to return to the previous page
    • +
  • Vehicle nickname as the page title (e.g., "Beast")
    • +
  • Edit Vehicle button (top-right)
    • +
  • Quick action buttons: Add Fuel Log and Add Maintenance
    • +
+ +

Vehicle Details Section

+
    +
  • Manufacturer logo
    • +
  • Full vehicle description (e.g., "2022 Chevrolet Silverado 2500HD")
    • +
  • VIN Number
    • +
  • Year, Make, and Model (displayed in a 3-column row)
    • +
  • Trim, Engine, and Transmission (displayed in a 3-column row)
    • +
  • Nickname
    • +
  • Color and License Plate (side by side)
    • +
  • Current Odometer Reading
    • +
+ + + +

Purchase Information Section

+
    +
  • Purchase Price
    • +
  • Purchase Date
    • +
+ +

Ownership Costs Section

+
    +
  • Tracks insurance, registration, taxes, and other recurring vehicle costs
    • +
  • Shows "No ownership costs recorded yet" until costs are added
    • +
+ +

Vehicle Records Section

+
    +
  • A table showing all records associated with this vehicle (fuel logs, maintenance records)
    • +
  • Columns: Date, Type, Summary, Amount, Actions
    • +
  • Filter dropdown to filter by record type (All, Fuel, Maintenance)
    • +
+
+ + {/* Editing a Vehicle */} +
+

Editing a Vehicle

+

+ From the Vehicle Detail Page, click the Edit Vehicle button. This opens the vehicle form pre-filled with the current values. Make your changes and save. +

+

+ From the Vehicles list, click the pencil icon on any vehicle card to edit it directly. +

+
+ + {/* Deleting a Vehicle */} +
+

Deleting a Vehicle

+

+ From the Vehicles list, click the trash icon on any vehicle card. You will be asked to confirm the deletion. Deleting a vehicle is permanent and removes all associated records. +

+
); };