Skip to content

Commit 5360b9b

Browse files
JavaDogWebDesignclaude
JavaDogWebDesign
and
claude
committed
Expand FAQ page with user guides and app usage tips
Add new sections covering bulk actions, filtering, backup/restore, mobile features, and settings configuration to help users understand and use the application more effectively. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
1 parent 544e9cb commit 5360b9b

File tree

1 file changed

+362
-1
lines changed

1 file changed

+362
-1
lines changed

‎app/templates/faq.html‎

Lines changed: 362 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -238,9 +238,93 @@ <h2 class="faq-section-title">Flexible Spending Accounts (FSA & DCFSA)</h2>
238238
</div>
239239
</div>
240240

241+
<!-- Getting Started Section -->
242+
<div class="faq-section">
243+
<h2 class="faq-section-title">Getting Started</h2>
244+
245+
<div class="faq-item">
246+
<button class="faq-question" onclick="toggleFAQ(this)">
247+
<span>How do I get started with this app?</span>
248+
<svg class="faq-icon" width="20" height="20" viewBox="0 0 24 24" fill="none">
249+
<path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
250+
</svg>
251+
</button>
252+
<div class="faq-answer">
253+
<p>Welcome! Here's a quick start guide to get you up and running:</p>
254+
255+
<p><strong>Step 1: Set Up Your Benefit Plans</strong></p>
256+
<ul>
257+
<li>Go to <strong>Dashboard</strong> and scroll to "Benefit Plan Management"</li>
258+
<li>Add your current FSA and/or DCFSA plans with their start dates, end dates, and election amounts</li>
259+
<li>For HSA, no benefit plan is needed since there's no "use it or lose it" deadline</li>
260+
</ul>
261+
262+
<p><strong>Step 2: Add Your Providers</strong></p>
263+
<ul>
264+
<li>Go to <strong>Settings</strong> and scroll to "Providers"</li>
265+
<li>Add your common healthcare providers (doctors, pharmacies, hospitals, etc.)</li>
266+
<li>You can also add providers on-the-fly when creating expenses</li>
267+
</ul>
268+
269+
<p><strong>Step 3: Add Family Members</strong></p>
270+
<ul>
271+
<li>In <strong>Settings</strong>, scroll to "Family Members"</li>
272+
<li>Add anyone whose expenses you track (spouse, children, dependents)</li>
273+
</ul>
274+
275+
<p><strong>Step 4: Start Tracking Expenses</strong></p>
276+
<ul>
277+
<li>Click <strong>"+ Add Expense"</strong> to log your first expense</li>
278+
<li>Upload receipts for documentation</li>
279+
<li>The dashboard will show your spending and remaining balances</li>
280+
</ul>
281+
</div>
282+
</div>
283+
284+
<div class="faq-item">
285+
<button class="faq-question" onclick="toggleFAQ(this)">
286+
<span>What does the Dashboard show me?</span>
287+
<svg class="faq-icon" width="20" height="20" viewBox="0 0 24 24" fill="none">
288+
<path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
289+
</svg>
290+
</button>
291+
<div class="faq-answer">
292+
<p>The Dashboard is your command center for tracking all your healthcare spending:</p>
293+
294+
<p><strong>Summary Cards (Top)</strong></p>
295+
<ul>
296+
<li><strong>Total Expenses:</strong> Sum of all expenses you've recorded</li>
297+
<li><strong>Total Reimbursed:</strong> How much you've been reimbursed</li>
298+
<li><strong>Unreimbursed:</strong> Expenses not yet reimbursed (your "shoebox" of receipts)</li>
299+
</ul>
300+
301+
<p><strong>HSA Balance Chart</strong></p>
302+
<ul>
303+
<li>Shows your HSA balance over time</li>
304+
<li>Tracks contributions, withdrawals, and investment growth</li>
305+
<li>Helpful for visualizing your HSA investment strategy</li>
306+
</ul>
307+
308+
<p><strong>Benefit Plan Management</strong></p>
309+
<ul>
310+
<li>Shows active FSA and DCFSA plans</li>
311+
<li>Displays election amount vs. amount spent</li>
312+
<li>Progress bars show how much of your benefit you've used</li>
313+
<li>Helps you avoid forfeiting unused funds</li>
314+
</ul>
315+
316+
<p><strong>Recent Expenses</strong></p>
317+
<ul>
318+
<li>Quick view of your most recent transactions</li>
319+
<li>Click any expense to view or edit details</li>
320+
</ul>
321+
</div>
322+
</div>
323+
</div>
324+
241325
<!-- Using the Tracker Section -->
242326
<div class="faq-section">
243-
<h2 class="faq-section-title">Using the Tracker</h2>
327+
<h2 class="faq-section-title">Managing Expenses</h2>
244328

245329
<div class="faq-item">
246330
<button class="faq-question" onclick="toggleFAQ(this)">
@@ -312,6 +396,283 @@ <h2 class="faq-section-title">Using the Tracker</h2>
312396
</ul>
313397
</div>
314398
</div>
399+
400+
<div class="faq-item">
401+
<button class="faq-question" onclick="toggleFAQ(this)">
402+
<span>How do I use bulk actions to manage multiple expenses?</span>
403+
<svg class="faq-icon" width="20" height="20" viewBox="0 0 24 24" fill="none">
404+
<path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
405+
</svg>
406+
</button>
407+
<div class="faq-answer">
408+
<p>Bulk actions let you update or delete multiple expenses at once, saving time when managing your records:</p>
409+
410+
<p><strong>Selecting Multiple Expenses:</strong></p>
411+
<ul>
412+
<li><strong>Desktop:</strong> Click the checkbox next to each expense you want to select</li>
413+
<li><strong>Mobile:</strong> Tap the circular checkbox on the left side of each row, or press and hold on any expense to quickly select it</li>
414+
<li><strong>Select All:</strong> Use the "Select All" checkbox at the top to select all visible expenses</li>
415+
</ul>
416+
417+
<p><strong>Available Bulk Actions:</strong></p>
418+
<ul>
419+
<li><strong>Change Status:</strong> Update the status of all selected expenses at once (e.g., mark multiple expenses as "Reimbursed")</li>
420+
<li><strong>Delete:</strong> Remove multiple expenses in one action (use with caution—this cannot be undone)</li>
421+
</ul>
422+
423+
<p><strong>Example Use Cases:</strong></p>
424+
<ul>
425+
<li>Received a reimbursement check covering several claims? Select them all and change status to "Reimbursed"</li>
426+
<li>Need to clean up old test entries? Select and delete them in bulk</li>
427+
<li>Submitted a batch of claims? Select them and change status to "Pending"</li>
428+
</ul>
429+
430+
<p><em>Tip:</em> Use the filters first to narrow down your expense list, then use "Select All" to quickly select all matching expenses.</p>
431+
</div>
432+
</div>
433+
434+
<div class="faq-item">
435+
<button class="faq-question" onclick="toggleFAQ(this)">
436+
<span>How do I filter and search my expenses?</span>
437+
<svg class="faq-icon" width="20" height="20" viewBox="0 0 24 24" fill="none">
438+
<path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
439+
</svg>
440+
</button>
441+
<div class="faq-answer">
442+
<p>The Expenses page includes powerful filtering options to help you find specific expenses:</p>
443+
444+
<p><strong>Available Filters:</strong></p>
445+
<ul>
446+
<li><strong>Account Type:</strong> Filter by HSA, FSA, or DCFSA</li>
447+
<li><strong>Status:</strong> Show only Open, Pending, Reimbursed, or other statuses</li>
448+
<li><strong>Provider:</strong> Find expenses from a specific doctor or pharmacy</li>
449+
<li><strong>Family Member:</strong> See expenses for a specific person</li>
450+
<li><strong>Year:</strong> Filter by calendar year</li>
451+
</ul>
452+
453+
<p><strong>Sorting:</strong></p>
454+
<ul>
455+
<li>Click any column header to sort by that field</li>
456+
<li>Click again to reverse the sort order</li>
457+
<li>Default sorting is by date (most recent first)</li>
458+
</ul>
459+
460+
<p><strong>Common Filter Combinations:</strong></p>
461+
<ul>
462+
<li><strong>Unreimbursed HSA receipts:</strong> Account = HSA, Status = Open</li>
463+
<li><strong>This year's FSA spending:</strong> Account = FSA, Year = current year</li>
464+
<li><strong>Pending claims:</strong> Status = Pending</li>
465+
<li><strong>Child's expenses:</strong> Family Member = (child's name)</li>
466+
</ul>
467+
</div>
468+
</div>
469+
</div>
470+
471+
<!-- Import/Export Section -->
472+
<div class="faq-section">
473+
<h2 class="faq-section-title">Backup & Data Management</h2>
474+
475+
<div class="faq-item">
476+
<button class="faq-question" onclick="toggleFAQ(this)">
477+
<span>How do I backup my data?</span>
478+
<svg class="faq-icon" width="20" height="20" viewBox="0 0 24 24" fill="none">
479+
<path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
480+
</svg>
481+
</button>
482+
<div class="faq-answer">
483+
<p>Regular backups protect your expense records and receipts. Here's how to export your data:</p>
484+
485+
<p><strong>To Export Your Data:</strong></p>
486+
<ol>
487+
<li>Go to <strong>Settings</strong></li>
488+
<li>Scroll down to the <strong>"Data Management"</strong> section</li>
489+
<li>Click <strong>"Export Data"</strong></li>
490+
<li>A ZIP file will download containing:
491+
<ul>
492+
<li>All your expenses as a CSV file</li>
493+
<li>All uploaded receipts and proof documents</li>
494+
<li>Benefit plan information</li>
495+
<li>Provider and family member data</li>
496+
</ul>
497+
</li>
498+
</ol>
499+
500+
<p><strong>Backup Best Practices:</strong></p>
501+
<ul>
502+
<li><strong>Regular backups:</strong> Export your data monthly or after adding significant expenses</li>
503+
<li><strong>Store securely:</strong> Keep backups in a secure location (encrypted cloud storage, external drive)</li>
504+
<li><strong>Test restoration:</strong> Periodically verify your backups work by importing into a test account</li>
505+
<li><strong>Keep multiple copies:</strong> Maintain backups from different dates in case you need to recover older data</li>
506+
</ul>
507+
508+
<p><em>Important:</em> Since this tracker stores sensitive financial and medical information, treat your backup files with the same security as you would physical medical records.</p>
509+
</div>
510+
</div>
511+
512+
<div class="faq-item">
513+
<button class="faq-question" onclick="toggleFAQ(this)">
514+
<span>How do I restore or import data?</span>
515+
<svg class="faq-icon" width="20" height="20" viewBox="0 0 24 24" fill="none">
516+
<path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
517+
</svg>
518+
</button>
519+
<div class="faq-answer">
520+
<p>You can import previously exported data to restore your records or migrate to a new installation:</p>
521+
522+
<p><strong>To Import Data:</strong></p>
523+
<ol>
524+
<li>Go to <strong>Settings</strong></li>
525+
<li>Scroll down to the <strong>"Data Management"</strong> section</li>
526+
<li>Click <strong>"Import Data"</strong></li>
527+
<li>Select your backup ZIP file</li>
528+
<li>Review the import summary and confirm</li>
529+
</ol>
530+
531+
<p><strong>What Gets Imported:</strong></p>
532+
<ul>
533+
<li>Expenses with all details (dates, amounts, status, notes)</li>
534+
<li>Receipt files and proof of reimbursement documents</li>
535+
<li>Benefit plans (FSA/DCFSA)</li>
536+
<li>Providers and family members</li>
537+
</ul>
538+
539+
<p><strong>Important Notes:</strong></p>
540+
<ul>
541+
<li><strong>Duplicate handling:</strong> The import process checks for duplicates based on date, amount, and provider to avoid creating duplicate entries</li>
542+
<li><strong>File associations:</strong> Receipt files are automatically linked to their corresponding expenses</li>
543+
<li><strong>Clean import:</strong> For best results when migrating, start with a fresh account before importing</li>
544+
</ul>
545+
</div>
546+
</div>
547+
</div>
548+
549+
<!-- Mobile Tips Section -->
550+
<div class="faq-section">
551+
<h2 class="faq-section-title">Mobile Tips</h2>
552+
553+
<div class="faq-item">
554+
<button class="faq-question" onclick="toggleFAQ(this)">
555+
<span>What mobile features are available?</span>
556+
<svg class="faq-icon" width="20" height="20" viewBox="0 0 24 24" fill="none">
557+
<path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
558+
</svg>
559+
</button>
560+
<div class="faq-answer">
561+
<p>The app is fully responsive and optimized for mobile devices. Here are some helpful features:</p>
562+
563+
<p><strong>Navigation:</strong></p>
564+
<ul>
565+
<li>Use the hamburger menu (☰) to access all pages</li>
566+
<li>The "+ Add Expense" button is always accessible from the menu</li>
567+
</ul>
568+
569+
<p><strong>Expense List:</strong></p>
570+
<ul>
571+
<li><strong>Compact view:</strong> Expenses display in a streamlined two-line format showing provider, date, amount, and status</li>
572+
<li><strong>Tap to edit:</strong> Tap any expense row to open the edit view</li>
573+
<li><strong>Long-press to select:</strong> Press and hold on any expense for about half a second to quickly select it (you'll feel a subtle vibration)</li>
574+
<li><strong>Checkbox selection:</strong> Tap the circular checkbox on the left to select/deselect expenses</li>
575+
</ul>
576+
577+
<p><strong>Adding Receipts:</strong></p>
578+
<ul>
579+
<li>Take photos directly from your phone's camera when adding expenses</li>
580+
<li>Upload existing photos from your gallery</li>
581+
<li>PDFs can be attached from your files app</li>
582+
</ul>
583+
584+
<p><strong>Quick Expense Entry Tip:</strong></p>
585+
<p>After a doctor visit or pharmacy pickup, add the expense immediately while you have the receipt in hand. Use your phone's camera to capture the receipt and you're done!</p>
586+
</div>
587+
</div>
588+
</div>
589+
590+
<!-- Settings Section -->
591+
<div class="faq-section">
592+
<h2 class="faq-section-title">Settings & Preferences</h2>
593+
594+
<div class="faq-item">
595+
<button class="faq-question" onclick="toggleFAQ(this)">
596+
<span>What can I configure in Settings?</span>
597+
<svg class="faq-icon" width="20" height="20" viewBox="0 0 24 24" fill="none">
598+
<path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
599+
</svg>
600+
</button>
601+
<div class="faq-answer">
602+
<p>The Settings page lets you customize the app and manage your reference data:</p>
603+
604+
<p><strong>Appearance:</strong></p>
605+
<ul>
606+
<li><strong>Dark Mode:</strong> Toggle between light and dark themes</li>
607+
<li><strong>Date Format:</strong> Choose your preferred date display format (MM/DD/YYYY, DD/MM/YYYY, etc.)</li>
608+
<li><strong>Currency:</strong> Set your currency symbol and format</li>
609+
</ul>
610+
611+
<p><strong>Providers:</strong></p>
612+
<ul>
613+
<li>Add healthcare providers you visit regularly</li>
614+
<li>Edit or delete existing providers</li>
615+
<li>Providers appear in the dropdown when creating expenses</li>
616+
</ul>
617+
618+
<p><strong>Family Members:</strong></p>
619+
<ul>
620+
<li>Add family members whose expenses you track</li>
621+
<li>Edit names or delete members no longer needed</li>
622+
<li>Useful for filtering expenses by person</li>
623+
</ul>
624+
625+
<p><strong>Data Management:</strong></p>
626+
<ul>
627+
<li>Export all your data (backup)</li>
628+
<li>Import previously exported data</li>
629+
<li>Delete your account and all data</li>
630+
</ul>
631+
632+
<p><strong>Account Security:</strong></p>
633+
<ul>
634+
<li>Change your password</li>
635+
<li>Update email address</li>
636+
</ul>
637+
</div>
638+
</div>
639+
640+
<div class="faq-item">
641+
<button class="faq-question" onclick="toggleFAQ(this)">
642+
<span>How do I manage providers and family members?</span>
643+
<svg class="faq-icon" width="20" height="20" viewBox="0 0 24 24" fill="none">
644+
<path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
645+
</svg>
646+
</button>
647+
<div class="faq-answer">
648+
<p>Providers and family members help you organize expenses and make data entry faster:</p>
649+
650+
<p><strong>Managing Providers:</strong></p>
651+
<ol>
652+
<li>Go to <strong>Settings → Providers</strong></li>
653+
<li>Click <strong>"+ Add Provider"</strong></li>
654+
<li>Enter the provider name (e.g., "Dr. Smith", "CVS Pharmacy", "City Hospital")</li>
655+
<li>Click <strong>"Save"</strong></li>
656+
</ol>
657+
<p><em>Quick add:</em> You can also add providers directly from the expense form by clicking "+ New" next to the provider dropdown.</p>
658+
659+
<p><strong>Managing Family Members:</strong></p>
660+
<ol>
661+
<li>Go to <strong>Settings → Family Members</strong></li>
662+
<li>Click <strong>"+ Add Family Member"</strong></li>
663+
<li>Enter the person's name</li>
664+
<li>Click <strong>"Save"</strong></li>
665+
</ol>
666+
667+
<p><strong>Why Use These Features:</strong></p>
668+
<ul>
669+
<li><strong>Faster data entry:</strong> Select from dropdowns instead of typing each time</li>
670+
<li><strong>Consistent naming:</strong> Avoid variations like "Dr Smith" vs "Dr. Smith" vs "Smith, Dr."</li>
671+
<li><strong>Better filtering:</strong> Easily find all expenses for a specific provider or family member</li>
672+
<li><strong>Reporting:</strong> See spending patterns by provider or family member over time</li>
673+
</ul>
674+
</div>
675+
</div>
315676
</div>
316677
</div>
317678
</div>

0 commit comments

Comments
 (0)