From f77f913ee8cdf412b70fba461867d3e9d19d14ca Mon Sep 17 00:00:00 2001 From: Trey t Date: Sun, 8 Mar 2026 00:10:43 -0600 Subject: [PATCH] Add public help center with 10 topic pages and improve contractor/residence cards - Create complete help center at /help with getting-started, residences, tasks, contractors, documents, sharing, dashboard, notifications, subscription, and account pages - Add shared help components: sidebar, header, footer, article/section wrappers, screenshot placeholders, and tip/note/warning callouts - Add /help to middleware public paths so it loads without auth - Add Help Center link to landing page footer - Link contractor import dialog to /help/sharing - Make contractor cards fully clickable with consistent height - Add clear button to contractor specialty filter - Fix residence card height consistency in grid Co-Authored-By: Claude Opus 4.6 --- src/app/app/contractors/page.tsx | 17 ++- src/app/help/account/page.tsx | 69 +++++++++ src/app/help/contractors/page.tsx | 88 +++++++++++ src/app/help/dashboard/page.tsx | 76 ++++++++++ src/app/help/documents/page.tsx | 71 +++++++++ src/app/help/getting-started/page.tsx | 88 +++++++++++ src/app/help/layout.tsx | 29 ++++ src/app/help/notifications/page.tsx | 62 ++++++++ src/app/help/page.tsx | 41 +++++ src/app/help/residences/page.tsx | 79 ++++++++++ src/app/help/sharing/page.tsx | 111 ++++++++++++++ src/app/help/subscription/page.tsx | 86 +++++++++++ src/app/help/tasks/page.tsx | 101 +++++++++++++ src/app/page.tsx | 5 + .../contractors/contractor-card.tsx | 142 +++++++++--------- .../contractors/contractor-filters.tsx | 29 +++- src/components/help/help-article.tsx | 21 +++ src/components/help/help-callout.tsx | 41 +++++ src/components/help/help-footer.tsx | 39 +++++ src/components/help/help-header.tsx | 95 ++++++++++++ src/components/help/help-nav-data.ts | 75 +++++++++ src/components/help/help-section.tsx | 18 +++ src/components/help/help-sidebar.tsx | 33 ++++ .../help/screenshot-placeholder.tsx | 38 +++++ src/components/residences/residence-card.tsx | 8 +- src/middleware.ts | 2 +- 26 files changed, 1376 insertions(+), 88 deletions(-) create mode 100644 src/app/help/account/page.tsx create mode 100644 src/app/help/contractors/page.tsx create mode 100644 src/app/help/dashboard/page.tsx create mode 100644 src/app/help/documents/page.tsx create mode 100644 src/app/help/getting-started/page.tsx create mode 100644 src/app/help/layout.tsx create mode 100644 src/app/help/notifications/page.tsx create mode 100644 src/app/help/page.tsx create mode 100644 src/app/help/residences/page.tsx create mode 100644 src/app/help/sharing/page.tsx create mode 100644 src/app/help/subscription/page.tsx create mode 100644 src/app/help/tasks/page.tsx create mode 100644 src/components/help/help-article.tsx create mode 100644 src/components/help/help-callout.tsx create mode 100644 src/components/help/help-footer.tsx create mode 100644 src/components/help/help-header.tsx create mode 100644 src/components/help/help-nav-data.ts create mode 100644 src/components/help/help-section.tsx create mode 100644 src/components/help/help-sidebar.tsx create mode 100644 src/components/help/screenshot-placeholder.tsx diff --git a/src/app/app/contractors/page.tsx b/src/app/app/contractors/page.tsx index 99c2325..d1106c4 100644 --- a/src/app/app/contractors/page.tsx +++ b/src/app/app/contractors/page.tsx @@ -2,7 +2,8 @@ import { useState, useMemo } from "react"; import { useRouter } from "next/navigation"; -import { Upload, Wrench } from "lucide-react"; +import Link from "next/link"; +import { Upload, Wrench, ExternalLink } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, @@ -111,14 +112,14 @@ export default function ContractorsPage() { > @@ -174,7 +175,7 @@ export default function ContractorsPage() { Import Contractor - Import a contractor from a .honeydue file shared with you. + Someone shared a contractor with you? Drop the .honeydue file below to add them to your list. @@ -184,6 +185,14 @@ export default function ContractorsPage() { {createContractor.isPending && (

Importing...

)} + + Learn how to share and import contractors + + diff --git a/src/app/help/account/page.tsx b/src/app/help/account/page.tsx new file mode 100644 index 0000000..ee1a979 --- /dev/null +++ b/src/app/help/account/page.tsx @@ -0,0 +1,69 @@ +import { HelpArticle } from "@/components/help/help-article"; +import { HelpSection } from "@/components/help/help-section"; +import { HelpCallout } from "@/components/help/help-callout"; +import { ScreenshotPlaceholder } from "@/components/help/screenshot-placeholder"; + +export default function AccountHelpPage() { + return ( + + +

+ Update your display name and email address from your profile settings. + Your name appears to other household members when collaborating on + shared residences. +

+ +
    +
  1. Go to Settings → Profile.
    2. +
  2. Edit your name or email.
    3. +
  3. Tap Save to apply changes.
    4. +
+ + + +

+ Change your password at any time from the profile settings. You'll + need to enter your current password for verification. +

+ + If you signed up with Apple Sign In, you don't have a password to + change — authentication is handled by Apple. + + + + +

+ honeyDue supports light, dark, and system-matched themes. Choose the + one that's most comfortable for you. +

+ +

+ The theme affects the app's appearance across all screens. Your + preference syncs across devices when you're logged in. +

+ + + +

+ You can permanently delete your account and all associated data from + the profile settings. +

+ + Account deletion is permanent and cannot be undone. All your + residences, tasks, contractors, documents, and subscription data will + be permanently removed. Household members will lose access to any + residences you own. + +
    +
  1. Go to Settings → Profile.
    2. +
  2. Scroll to the bottom and tap Delete Account.
    3. +
  3. Confirm the deletion by typing your email address.
    4. +
  4. Your account and all data will be permanently removed.
    5. +
+ + + ); +} diff --git a/src/app/help/contractors/page.tsx b/src/app/help/contractors/page.tsx new file mode 100644 index 0000000..4d82a95 --- /dev/null +++ b/src/app/help/contractors/page.tsx @@ -0,0 +1,88 @@ +import { HelpArticle } from "@/components/help/help-article"; +import { HelpSection } from "@/components/help/help-section"; +import { HelpCallout } from "@/components/help/help-callout"; +import { ScreenshotPlaceholder } from "@/components/help/screenshot-placeholder"; + +export default function ContractorsHelpPage() { + return ( + + +

+ Keep track of every plumber, electrician, landscaper, and handyman + you work with. Each contractor record stores their contact details and + specialty. +

+ +
    +
  1. Go to your Contractors list.
    2. +
  2. Tap Add Contractor.
    3. +
  3. Enter their name, phone number, and optionally email.
    4. +
  4. Select their specialty (plumbing, electrical, HVAC, etc.).
    5. +
  5. Add any notes about your experience with them.
    6. +
+ + + +

+ Specialties help you quickly filter and find the right contractor for a + job. honeyDue comes with common home service categories: +

+
    +
  • Plumbing
    • +
  • Electrical
    • +
  • HVAC
    • +
  • Roofing
    • +
  • Landscaping
    • +
  • General Handyman
    • +
  • Pest Control
    • +
  • Cleaning
    • +
  • And more...
    • +
+ + + + +

+ Mark your go-to contractors as favorites for quick access. Favorited + contractors appear at the top of your list and are highlighted when + linking contractors to tasks. +

+ + Tap the star icon on any contractor card to toggle their favorite status. + + + + +

+ Share your trusted contractors with friends, family, or new household + members using the .honeydue file format. +

+ +

+ Export your contractors as a .honeydue file and send it to anyone. + They can import it into their own honeyDue account to instantly add + your recommended pros. +

+

+ See the Sharing guide for + detailed export and import instructions. +

+ + + +

+ When creating or editing a task, you can link a contractor to it. This + creates a handy reference so you know who to call for that specific + maintenance item. +

+

+ Contractors linked to tasks also appear in residence reports, giving + you a complete maintenance history with contact information. +

+ + + ); +} diff --git a/src/app/help/dashboard/page.tsx b/src/app/help/dashboard/page.tsx new file mode 100644 index 0000000..099aa33 --- /dev/null +++ b/src/app/help/dashboard/page.tsx @@ -0,0 +1,76 @@ +import { HelpArticle } from "@/components/help/help-article"; +import { HelpSection } from "@/components/help/help-section"; +import { HelpCallout } from "@/components/help/help-callout"; +import { ScreenshotPlaceholder } from "@/components/help/screenshot-placeholder"; + +export default function DashboardHelpPage() { + return ( + + +

+ The dashboard is your home screen after logging in. It gives you a + bird's-eye view of everything that needs your attention across all + your residences. +

+ + + + +

+ The task summary section shows counts for each status category: +

+
    +
  • Overdue — Tasks that have passed their due date
    • +
  • Due Soon — Tasks coming up in the next 30 days
    • +
  • In Progress — Tasks you're actively working on
    • +
  • Completed — Tasks finished this month
    • +
+

+ Tap any summary card to jump directly to those tasks on the kanban + board. +

+ + + +

+ The "Needs Attention" section highlights items that require + immediate action — overdue tasks, expiring warranties, and tasks + without due dates that may have been forgotten. +

+ + + Check the dashboard daily — it takes just a few seconds to see if + anything needs your attention. + + + + +

+ Quick action buttons let you jump to common tasks without navigating + through menus: +

+
    +
  • Add a new task
    • +
  • Add a new contractor
    • +
  • Upload a document
    • +
  • View your residences
    • +
+ + + +

+ The dashboard may suggest common maintenance tasks based on the time + of year and your property type. These suggestions come from our + template library and can be added to your residence with one tap. +

+ + Suggestions are just that — suggestions. You can dismiss them or add + them to your task list as you see fit. + + + + ); +} diff --git a/src/app/help/documents/page.tsx b/src/app/help/documents/page.tsx new file mode 100644 index 0000000..d1564f3 --- /dev/null +++ b/src/app/help/documents/page.tsx @@ -0,0 +1,71 @@ +import { HelpArticle } from "@/components/help/help-article"; +import { HelpSection } from "@/components/help/help-section"; +import { HelpCallout } from "@/components/help/help-callout"; +import { ScreenshotPlaceholder } from "@/components/help/screenshot-placeholder"; + +export default function DocumentsHelpPage() { + return ( + + +

+ Upload any document related to your home — warranties, appliance + manuals, insurance papers, inspection reports, or receipts. +

+ +
    +
  1. Open a residence and go to the Documents tab.
    2. +
  2. Tap Add Document.
    3. +
  3. Enter a title and select the document type.
    4. +
  4. Upload the file (PDF, image, or other supported formats).
    5. +
  5. Optionally add notes or tags for easier searching.
    6. +
+ + + +

+ Mark documents as warranties and set expiration dates. honeyDue will + help you track when warranties are about to expire so you can take + action before coverage runs out. +

+ + + Upload a photo of the warranty card or receipt right when you purchase + an appliance. You'll thank yourself later when you need to make a + claim. + + + + +

+ All documents for a residence are listed in one place. Tap any + document to view its details, download the file, or see associated + notes. +

+ + + + +

+ Documents can be toggled between active and inactive states. Use this + to archive old documents without deleting them — like an expired + warranty you might still need for reference. +

+ + Inactive documents are hidden from the default view but can be shown + with a filter toggle. + + + + +

+ Update document titles, notes, or warranty dates at any time. You can + also replace the uploaded file if you have a better scan or updated + version. +

+ + + ); +} diff --git a/src/app/help/getting-started/page.tsx b/src/app/help/getting-started/page.tsx new file mode 100644 index 0000000..b679e32 --- /dev/null +++ b/src/app/help/getting-started/page.tsx @@ -0,0 +1,88 @@ +import { HelpArticle } from "@/components/help/help-article"; +import { HelpSection } from "@/components/help/help-section"; +import { HelpCallout } from "@/components/help/help-callout"; +import { ScreenshotPlaceholder } from "@/components/help/screenshot-placeholder"; + +export default function GettingStartedHelpPage() { + return ( + + +

+ Sign up for honeyDue with your email address or use Sign in with Apple + for a faster setup. Your account is free to create and includes + everything you need to manage one property. +

+ +
    +
  1. Visit the Create Account page.
    2. +
  2. Enter your name, email, and a password (or use Apple Sign In).
    3. +
  3. Verify your email address via the confirmation link.
    4. +
  4. You're in! The onboarding flow will guide you through next steps.
    5. +
+ + + +

+ After signing up, you'll be prompted to add your first residence. + This is the property you want to track maintenance for. +

+ +
    +
  1. Tap Add Residence.
    2. +
  2. Enter a name (e.g., "Our House") and optionally an address.
    3. +
  3. Select the property type (house, apartment, condo, etc.).
    4. +
  4. Your residence is created and ready for tasks.
    5. +
+ + You can manage multiple properties by upgrading to Pro. The free plan + includes one residence. + + + + +

+ Tasks are the heart of honeyDue. Add anything from "Change HVAC + filter" to "Schedule annual inspection." +

+ +
    +
  1. Open your residence and tap Add Task.
    2. +
  2. Give it a title and optionally set a category, priority, and due date.
    3. +
  3. For recurring tasks, set a frequency (weekly, monthly, etc.).
    4. +
  4. The task appears on your kanban board, organized by status.
    5. +
+ + + +

+ Home maintenance is a team effort. Invite your partner, roommates, or + family members so everyone can see and manage tasks together. +

+ +
    +
  1. Open your residence settings.
    2. +
  2. Generate a share code.
    3. +
  3. Send the code to your household member.
    4. +
  4. They enter the code on their device to join your residence.
    5. +
+ + See the Sharing guide for + more details on household sharing and contractor exports. + + + + +

Now that you're set up, here are some features to try:

+
    +
  • Kanban boards — Visualize tasks by status (overdue, due soon, in progress, etc.)
    • +
  • Contractors — Build your rolodex of trusted service providers
    • +
  • Documents — Upload warranties, manuals, and important files
    • +
  • Notifications — Set up push reminders so you never miss a due date
    • +
+ + + ); +} diff --git a/src/app/help/layout.tsx b/src/app/help/layout.tsx new file mode 100644 index 0000000..69aefee --- /dev/null +++ b/src/app/help/layout.tsx @@ -0,0 +1,29 @@ +import type { Metadata } from "next"; +import { HelpHeader } from "@/components/help/help-header"; +import { HelpSidebar } from "@/components/help/help-sidebar"; +import { HelpFooter } from "@/components/help/help-footer"; + +export const metadata: Metadata = { + title: "Help Center", + description: + "Learn how to use honeyDue to manage your home maintenance, tasks, contractors, and documents.", +}; + +export default function HelpLayout({ children }: { children: React.ReactNode }) { + return ( +
+ +
+
+ +
{children}
+
+
+ +
+ ); +} diff --git a/src/app/help/notifications/page.tsx b/src/app/help/notifications/page.tsx new file mode 100644 index 0000000..ef550c3 --- /dev/null +++ b/src/app/help/notifications/page.tsx @@ -0,0 +1,62 @@ +import { HelpArticle } from "@/components/help/help-article"; +import { HelpSection } from "@/components/help/help-section"; +import { HelpCallout } from "@/components/help/help-callout"; +import { ScreenshotPlaceholder } from "@/components/help/screenshot-placeholder"; + +export default function NotificationsHelpPage() { + return ( + + +

honeyDue sends notifications for important events:

+
    +
  • Task due reminders — Before a task's due date
    • +
  • Overdue alerts — When a task passes its due date
    • +
  • Household activity — When a member completes a task or joins your residence
    • +
  • Warranty expiration — Before a tracked warranty expires
    • +
+ + + + +

+ Customize which notifications you receive from your account settings. + You can enable or disable each notification type independently. +

+ +
    +
  1. Go to Settings → Notifications.
    2. +
  2. Toggle each notification type on or off.
    3. +
  3. Changes take effect immediately.
    4. +
+ + + +

+ Push notifications are delivered directly to your device — even when + the app isn't open. On the mobile app, you'll be prompted to allow + notifications on first launch. +

+ + Make sure notifications are enabled in your device's system settings. + If you're not receiving notifications, check Settings → honeyDue → + Notifications on your phone. + + + + +

+ Important notifications (like overdue tasks) can also be sent to your + registered email address. Email notifications use the same preferences + — disable a category and it's disabled everywhere. +

+ + Check your spam folder if you're not seeing honeyDue emails. Adding + our email to your contacts helps ensure delivery. + + + + ); +} diff --git a/src/app/help/page.tsx b/src/app/help/page.tsx new file mode 100644 index 0000000..f465362 --- /dev/null +++ b/src/app/help/page.tsx @@ -0,0 +1,41 @@ +import Link from "next/link"; +import { helpNavItems } from "@/components/help/help-nav-data"; + +export default function HelpIndexPage() { + return ( +
+
+

+ Help Center +

+

+ Everything you need to know about managing your home with honeyDue. +

+
+ +
+ {helpNavItems.map((item) => ( + +
+
+ +
+
+

+ {item.label} +

+

+ {item.description} +

+
+
+ + ))} +
+
+ ); +} diff --git a/src/app/help/residences/page.tsx b/src/app/help/residences/page.tsx new file mode 100644 index 0000000..a6fb628 --- /dev/null +++ b/src/app/help/residences/page.tsx @@ -0,0 +1,79 @@ +import { HelpArticle } from "@/components/help/help-article"; +import { HelpSection } from "@/components/help/help-section"; +import { HelpCallout } from "@/components/help/help-callout"; +import { ScreenshotPlaceholder } from "@/components/help/screenshot-placeholder"; + +export default function ResidencesHelpPage() { + return ( + + +

+ A residence represents a property you want to manage. It could be your + house, apartment, rental property, or vacation home. +

+ +
    +
  1. Go to your Residences list.
    2. +
  2. Tap Add Residence.
    3. +
  3. Enter a name and optionally an address.
    4. +
  4. Select the property type.
    5. +
+ + The free plan includes one residence. Upgrade to Pro for unlimited + properties. + + + + +

+ Update your residence details at any time — change the name, address, + or property type from the residence settings. +

+ + + + +

+ Each residence has its own dashboard showing tasks, documents, and + contractors associated with that property. The kanban board gives you a + visual overview of all task statuses. +

+ + + + +

+ Invite household members by generating a share code. Anyone with the + code can join and collaborate on that property's maintenance. +

+

+ See the Sharing guide for + step-by-step instructions on inviting members and managing access. +

+ + + +

+ Generate a PDF report summarizing your residence's maintenance + history — completed tasks, upcoming items, and contractor information. + Great for insurance claims or when selling your home. +

+ + + + +

+ Only the residence owner can delete a property. Deleting a residence + removes all associated tasks, documents, and contractor links. +

+ + Deleting a residence is permanent and cannot be undone. Make sure to + download any reports or documents you need before deleting. + + + + ); +} diff --git a/src/app/help/sharing/page.tsx b/src/app/help/sharing/page.tsx new file mode 100644 index 0000000..37686db --- /dev/null +++ b/src/app/help/sharing/page.tsx @@ -0,0 +1,111 @@ +import { HelpArticle } from "@/components/help/help-article"; +import { HelpSection } from "@/components/help/help-section"; +import { HelpCallout } from "@/components/help/help-callout"; +import { ScreenshotPlaceholder } from "@/components/help/screenshot-placeholder"; + +export default function SharingHelpPage() { + return ( + + +

+ Every residence has a unique share code that lets you invite household + members. When someone joins with your code, they get full access to that + residence's tasks, documents, and contractors. +

+ +

To generate a share code:

+
    +
  1. Open the residence you want to share.
    2. +
  2. Tap the Share button or go to residence settings.
    3. +
  3. Copy the generated code and send it to your household member.
    4. +
+ + Share codes are single-use for security. Generate a new one for each person you invite. + + + + +

+ If someone shared a code with you, you can join their residence from + the residences screen. +

+
    +
  1. Go to your Residences list.
    2. +
  2. Tap Join Residence.
    3. +
  3. Enter the share code you received.
    4. +
  4. The residence will appear in your list immediately.
    5. +
+ + + + +

+ Once someone joins your residence, they can view and manage tasks, + contractors, and documents for that property. All changes sync + automatically for everyone. +

+ + + The residence owner can remove members at any time from the residence + settings page. + + + + +

+ Contractors can be shared between household members who are part of the + same residence. When you add a contractor to a residence, everyone in + that household can see and use them. +

+

+ You can also export your contractors as a .honeydue file to + share with anyone — even people who aren't in your household yet. +

+ + + +

+ A .honeydue file + is a portable way to share contractor contacts. It contains names, + specialties, phone numbers, and notes — everything someone needs to + import your trusted pros. +

+ +

To export:

+
    +
  1. Go to your Contractors list.
    2. +
  2. Tap the Export button.
    3. +
  3. Choose which contractors to include.
    4. +
  4. Download or share the .honeydue file.
    5. +
+

To import:

+
    +
  1. Go to your Contractors list.
    2. +
  2. Tap Import.
    3. +
  3. Select a .honeydue file from your device.
    4. +
  4. Review the contractors and confirm the import.
    5. +
+ + Importing won't create duplicates — if a contractor with the same name + and phone number already exists, it will be skipped. + + + + +

+ Your data stays private. Sharing a residence only gives access to that + specific property — not your other homes or personal account details. +

+
    +
  • Household members can only see residences they've been invited to.
    • +
  • Removing a member revokes their access immediately.
    • +
  • Exported .honeydue files contain only contractor data, never personal information.
    • +
  • Share codes expire and cannot be reused.
    • +
+ + + ); +} diff --git a/src/app/help/subscription/page.tsx b/src/app/help/subscription/page.tsx new file mode 100644 index 0000000..2967a37 --- /dev/null +++ b/src/app/help/subscription/page.tsx @@ -0,0 +1,86 @@ +import { HelpArticle } from "@/components/help/help-article"; +import { HelpSection } from "@/components/help/help-section"; +import { HelpCallout } from "@/components/help/help-callout"; +import { ScreenshotPlaceholder } from "@/components/help/screenshot-placeholder"; + +export default function SubscriptionHelpPage() { + return ( + + +

+ honeyDue is free to use with generous limits for individual homeowners: +

+
    +
  • 1 residence
    • +
  • Up to 25 tasks per residence
    • +
  • Up to 10 contractors
    • +
  • Up to 10 documents per residence
    • +
  • Full kanban board, recurring tasks, and sharing
    • +
+ + The free plan is fully functional — not a trial. It's designed for + homeowners managing a single property. + + + + +

+ Upgrade to Pro for unlimited everything — perfect for landlords, + property managers, or households with multiple properties. +

+ +
    +
  • Unlimited residences
    • +
  • Unlimited tasks per residence
    • +
  • Unlimited contractors
    • +
  • Unlimited documents per residence
    • +
  • Residence reports — PDF exports of maintenance history
    • +
  • Priority support
    • +
+ + + +

+ Upgrade from your account settings or when you hit a free plan limit. + Subscriptions are managed through the App Store (iOS) or Google Play + (Android). +

+ +
    +
  1. Go to Settings → Subscription.
    2. +
  2. Tap Upgrade to Pro.
    3. +
  3. Choose monthly or annual billing.
    4. +
  4. Confirm the purchase through your app store.
    5. +
+ + + +

+ View your current plan, billing period, and renewal date from the + subscription settings. You can cancel at any time — your Pro features + remain active until the end of the current billing period. +

+ + Subscriptions are managed by Apple or Google — to cancel, go to your + device's subscription settings. Your data is never deleted when you + downgrade. + + + + +

+ If you reinstall the app or switch devices, you can restore your + existing subscription: +

+
    +
  1. Go to Settings → Subscription.
    2. +
  2. Tap Restore Purchases.
    3. +
  3. Your Pro status will be restored if an active subscription is found.
    4. +
+ + + ); +} diff --git a/src/app/help/tasks/page.tsx b/src/app/help/tasks/page.tsx new file mode 100644 index 0000000..f669b69 --- /dev/null +++ b/src/app/help/tasks/page.tsx @@ -0,0 +1,101 @@ +import { HelpArticle } from "@/components/help/help-article"; +import { HelpSection } from "@/components/help/help-section"; +import { HelpCallout } from "@/components/help/help-callout"; +import { ScreenshotPlaceholder } from "@/components/help/screenshot-placeholder"; + +export default function TasksHelpPage() { + return ( + + +

+ Tasks represent anything you need to do for your home — from replacing + a filter to scheduling an annual inspection. +

+ +

When creating a task, you can set:

+
    +
  • Title — A short description (e.g., "Replace HVAC filter")
    • +
  • Category — Group tasks by area (plumbing, electrical, exterior, etc.)
    • +
  • Priority — Low, medium, or high
    • +
  • Due date — When the task should be completed
    • +
  • Frequency — For recurring tasks (weekly, monthly, quarterly, etc.)
    • +
  • Notes — Additional details or instructions
    • +
  • Contractor — Link a service provider to the task
    • +
+ + Use task templates for common maintenance items. Start typing and + suggestions will appear based on popular home maintenance tasks. + + + + +

+ Tasks are organized on a kanban board with columns that automatically + sort based on due dates and completion status: +

+ +
    +
  • Overdue — Tasks past their due date
    • +
  • Due Soon — Tasks due within the next 30 days
    • +
  • In Progress — Tasks you've started working on
    • +
  • Not Started — Future tasks with no due date pressure
    • +
  • Completed — Finished tasks
    • +
+

+ Drag and drop tasks between columns to update their status, or tap a + task to edit its details. +

+ + + +

+ Many home maintenance items happen on a schedule. Set a frequency when + creating a task, and honeyDue will automatically create the next + occurrence after you complete the current one. +

+ +

Available frequencies include:

+
    +
  • Weekly
    • +
  • Bi-weekly
    • +
  • Monthly
    • +
  • Quarterly
    • +
  • Semi-annually
    • +
  • Annually
    • +
+ + When you complete a recurring task, the next due date is automatically + calculated based on the frequency. The task moves back to the + appropriate kanban column. + + + + +

+ Mark a task as complete by tapping the completion button. You can + optionally add a note and attach photos documenting the work. +

+ +

+ Completion records are saved as a history — useful for tracking when + maintenance was last performed and what was done. +

+ + + +

+ Associate a contractor with a task to remember who did the work. This + is especially helpful for recurring tasks where you want to call the + same plumber or electrician each time. +

+ + Linked contractors appear on the task card for quick access to their + contact information. + + + + ); +} diff --git a/src/app/page.tsx b/src/app/page.tsx index 220bae3..f9fcea3 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -441,6 +441,11 @@ export default function HomePage() { How It Works +
  • + + Help Center + +
    • diff --git a/src/components/contractors/contractor-card.tsx b/src/components/contractors/contractor-card.tsx index 6bb84f6..5075cd8 100644 --- a/src/components/contractors/contractor-card.tsx +++ b/src/components/contractors/contractor-card.tsx @@ -16,80 +16,80 @@ interface ContractorCardProps { export function ContractorCard({ contractor, onToggleFavorite }: ContractorCardProps) { const { basePath } = useDataProvider(); return ( -
    -
    -
    -
    - {contractor.name[0]?.toUpperCase()} + +
    +
    +
    +
    + {contractor.name[0]?.toUpperCase()} +
    +
    + + {contractor.name} + + {contractor.company && ( +

    {contractor.company}

    + )} +
    -
    - { + e.preventDefault(); + e.stopPropagation(); + onToggleFavorite(contractor.id); + }} + > +
    + + {contractor.specialties.length > 0 && ( +
    + {contractor.specialties.map((s) => ( + + {s.icon && {s.icon}} + {s.name} + + ))} +
    + )} + + + + )} + {contractor.email && ( + e.stopPropagation()} + className="inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-primary transition-colors" + > + + )}
    -
    - - {contractor.specialties.length > 0 && ( -
    - {contractor.specialties.map((s) => ( - - {s.icon && {s.icon}} - {s.name} - - ))} -
    - )} - - -
    + ); } diff --git a/src/components/contractors/contractor-filters.tsx b/src/components/contractors/contractor-filters.tsx index 6c4e325..e5a63fc 100644 --- a/src/components/contractors/contractor-filters.tsx +++ b/src/components/contractors/contractor-filters.tsx @@ -4,7 +4,7 @@ import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; import { LookupSelect } from "@/components/shared/lookup-select"; import { useContractorSpecialties } from "@/lib/hooks/use-lookups"; -import { Search, Star } from "lucide-react"; +import { Search, Star, X } from "lucide-react"; import { cn } from "@/lib/utils"; interface ContractorFiltersProps { @@ -40,13 +40,26 @@ export function ContractorFilters({
    {/* Specialty filter */} -
    - +
    +
    + +
    + {specialtyId != null && ( + + )}
    {/* Favorites toggle */} diff --git a/src/components/help/help-article.tsx b/src/components/help/help-article.tsx new file mode 100644 index 0000000..9f7fc4d --- /dev/null +++ b/src/components/help/help-article.tsx @@ -0,0 +1,21 @@ +interface HelpArticleProps { + title: string; + description: string; + children: React.ReactNode; +} + +export function HelpArticle({ title, description, children }: HelpArticleProps) { + return ( +
    +
    +

    + {title} +

    +

    + {description} +

    +
    +
    {children}
    +
    + ); +} diff --git a/src/components/help/help-callout.tsx b/src/components/help/help-callout.tsx new file mode 100644 index 0000000..d637050 --- /dev/null +++ b/src/components/help/help-callout.tsx @@ -0,0 +1,41 @@ +import { Lightbulb, Info, AlertTriangle } from "lucide-react"; + +interface HelpCalloutProps { + type?: "tip" | "note" | "warning"; + children: React.ReactNode; +} + +const calloutConfig = { + tip: { + icon: Lightbulb, + label: "Tip", + classes: "bg-[#EDF2ED] border-[#6B8F71]/20 text-[#2D3436]", + iconClass: "text-[#6B8F71]", + }, + note: { + icon: Info, + label: "Note", + classes: "bg-[#F2EFE9] border-[#C4856A]/20 text-[#2D3436]", + iconClass: "text-[#8A8F87]", + }, + warning: { + icon: AlertTriangle, + label: "Warning", + classes: "bg-[#FDF3EE] border-[#C4856A]/30 text-[#2D3436]", + iconClass: "text-[#C4856A]", + }, +}; + +export function HelpCallout({ type = "tip", children }: HelpCalloutProps) { + const config = calloutConfig[type]; + const Icon = config.icon; + + return ( +
    + +
    {children}
    +
    + ); +} diff --git a/src/components/help/help-footer.tsx b/src/components/help/help-footer.tsx new file mode 100644 index 0000000..c3dac5f --- /dev/null +++ b/src/components/help/help-footer.tsx @@ -0,0 +1,39 @@ +import Link from "next/link"; +import Image from "next/image"; + +export function HelpFooter() { + return ( +
    +
    +
    + + honeyDue + + honeyDue + + +
    + + Home + + + Demo + + + Get Started + +
    +
    +
    + © {new Date().getFullYear()} honeyDue. All rights reserved. +
    +
    +
    + ); +} diff --git a/src/components/help/help-header.tsx b/src/components/help/help-header.tsx new file mode 100644 index 0000000..6c1f709 --- /dev/null +++ b/src/components/help/help-header.tsx @@ -0,0 +1,95 @@ +"use client"; + +import Link from "next/link"; +import Image from "next/image"; +import { Menu } from "lucide-react"; +import { useState } from "react"; +import { HelpSidebar } from "./help-sidebar"; + +export function HelpHeader() { + const [mobileOpen, setMobileOpen] = useState(false); + + return ( + <> +
    +
    +
    + + + honeyDue + + honeyDue + + + / + + Help Center + +
    + +
    + + Features + + + Demo + + + Sign In + +
    +
    +
    + + {/* Mobile sidebar overlay */} + {mobileOpen && ( +
    +
    setMobileOpen(false)} + /> +
    +
    + + Help Center + + +
    +
    setMobileOpen(false)}> + +
    +
    +
    + )} + + ); +} diff --git a/src/components/help/help-nav-data.ts b/src/components/help/help-nav-data.ts new file mode 100644 index 0000000..ddd2a87 --- /dev/null +++ b/src/components/help/help-nav-data.ts @@ -0,0 +1,75 @@ +import { + BookOpen, + Home, + CheckSquare, + HardHat, + FileText, + Users, + LayoutDashboard, + Bell, + CreditCard, + UserCircle, +} from "lucide-react"; + +export const helpNavItems = [ + { + label: "Getting Started", + href: "/help/getting-started", + icon: BookOpen, + description: "Set up your account and add your first home.", + }, + { + label: "Residences", + href: "/help/residences", + icon: Home, + description: "Manage your properties and household members.", + }, + { + label: "Tasks", + href: "/help/tasks", + icon: CheckSquare, + description: "Track maintenance with kanban boards and schedules.", + }, + { + label: "Contractors", + href: "/help/contractors", + icon: HardHat, + description: "Organize your service providers and share contacts.", + }, + { + label: "Documents", + href: "/help/documents", + icon: FileText, + description: "Store warranties, manuals, and important files.", + }, + { + label: "Sharing", + href: "/help/sharing", + icon: Users, + description: "Invite household members and share contractors.", + }, + { + label: "Dashboard", + href: "/help/dashboard", + icon: LayoutDashboard, + description: "Understand your dashboard overview and metrics.", + }, + { + label: "Notifications", + href: "/help/notifications", + icon: Bell, + description: "Configure push notifications and reminders.", + }, + { + label: "Subscription", + href: "/help/subscription", + icon: CreditCard, + description: "Free vs Pro plans and managing your subscription.", + }, + { + label: "Account", + href: "/help/account", + icon: UserCircle, + description: "Profile, password, theme, and account settings.", + }, +]; diff --git a/src/components/help/help-section.tsx b/src/components/help/help-section.tsx new file mode 100644 index 0000000..0ef65b2 --- /dev/null +++ b/src/components/help/help-section.tsx @@ -0,0 +1,18 @@ +interface HelpSectionProps { + id: string; + title: string; + children: React.ReactNode; +} + +export function HelpSection({ id, title, children }: HelpSectionProps) { + return ( +
    +

    + {title} +

    +
    + {children} +
    +
    + ); +} diff --git a/src/components/help/help-sidebar.tsx b/src/components/help/help-sidebar.tsx new file mode 100644 index 0000000..5cdeac9 --- /dev/null +++ b/src/components/help/help-sidebar.tsx @@ -0,0 +1,33 @@ +"use client"; + +import Link from "next/link"; +import { usePathname } from "next/navigation"; +import { helpNavItems } from "./help-nav-data"; + +export function HelpSidebar() { + const pathname = usePathname(); + + return ( + + ); +} diff --git a/src/components/help/screenshot-placeholder.tsx b/src/components/help/screenshot-placeholder.tsx new file mode 100644 index 0000000..22faab1 --- /dev/null +++ b/src/components/help/screenshot-placeholder.tsx @@ -0,0 +1,38 @@ +import { ImageIcon } from "lucide-react"; + +interface ScreenshotPlaceholderProps { + alt: string; + caption?: string; + aspectRatio?: "video" | "square" | "wide" | "tall"; +} + +const aspectClasses = { + video: "aspect-video", + square: "aspect-square", + wide: "aspect-[21/9]", + tall: "aspect-[9/16]", +}; + +export function ScreenshotPlaceholder({ + alt, + caption, + aspectRatio = "video", +}: ScreenshotPlaceholderProps) { + return ( +
    +
    + + + {alt} + +
    + {caption && ( +
    + {caption} +
    + )} +
    + ); +} diff --git a/src/components/residences/residence-card.tsx b/src/components/residences/residence-card.tsx index d2db807..aefcedb 100644 --- a/src/components/residences/residence-card.tsx +++ b/src/components/residences/residence-card.tsx @@ -20,11 +20,11 @@ export function ResidenceCard({ data }: ResidenceCardProps) { .join(", "); return ( - -
    + +
    -
    -
    +
    +
    diff --git a/src/middleware.ts b/src/middleware.ts index 0f85d71..c5e1ddb 100644 --- a/src/middleware.ts +++ b/src/middleware.ts @@ -6,7 +6,7 @@ export function middleware(request: NextRequest) { const { pathname } = request.nextUrl; // Public paths that don't require auth - const publicPaths = ['/', '/login', '/register', '/forgot-password', '/reset-password', '/verify-email', '/demo']; + const publicPaths = ['/', '/login', '/register', '/forgot-password', '/reset-password', '/verify-email', '/demo', '/help']; const isPublicPath = publicPaths.some(p => pathname === p || pathname.startsWith(p + '/')); const isApiPath = pathname.startsWith('/api/'); const isStaticPath = pathname.startsWith('/_next/') || pathname.startsWith('/favicon') || pathname.match(/\.(png|jpg|jpeg|gif|svg|ico|webp|woff2?|ttf|css|js)$/);