add docs link (#254)

src/components/docs-link.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import { useTranslations } from 'next-intl'
+import { BookOpen } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+/**
+ * Link from a page, card or dialog to the matching documentation page.
+ *
+ * `href` is a docs path without a locale (`/docs/features/inventory`). The docs
+ * site resolves the reader's own language, so a locale here would pin them to
+ * ours. Never append a heading anchor either: heading slugs are translated, so
+ * an English one does not exist on a localized page.
+ */
+export function DocsLink({
+  href,
+  className,
+  variant = 'inline',
+}: {
+  href: string
+  className?: string
+  /** `inline` sits beside a heading; `hint` sits under dialog text with an icon. */
+  variant?: 'inline' | 'hint'
+}) {
+  const t = useTranslations('navigation')
+
+  return (
+    <a
+      href={`https://torqvoice.com${href}`}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={cn(
+        'shrink-0 rounded text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        variant === 'hint' ? 'inline-flex items-center gap-1.5 text-xs' : 'text-[11px]',
+        className
+      )}
+    >
+      {variant === 'hint' && <BookOpen className="h-3.5 w-3.5" />}
+      {t('readMore')} →
+    </a>
+  )
+}

src/components/page-header.tsx

@@ -19,6 +19,7 @@ import { AlertTriangle, Search, X, Zap } from 'lucide-react'
 import { useShowWhiteLabelCta } from '@/components/white-label-cta-context'
 import { useLicenseExpiry } from '@/components/license-expiry-context'
 import { QuickCreateMenu } from '@/components/quick-create-menu'
+import { DocsLink } from '@/components/docs-link'
 
 function SearchTrigger() {
   const t = useTranslations('navigation')
@@ -73,6 +74,24 @@ const docsMap: Record<string, string> = {
   '/settings/webhooks': '/docs/integrations/webhooks',
   '/settings/subscription': '/docs/configuration/subscription',
   '/settings/license': '/docs/licensing/white-label',
+  '/': '/docs/features/dashboard',
+  '/settings/company': '/docs/configuration/workshop-profile',
+  '/settings/workshop': '/docs/configuration/workshop-profile',
+  '/settings/localization': '/docs/configuration/localization',
+  '/settings/appearance': '/docs/configuration/localization',
+  '/settings/tax': '/docs/configuration/tax',
+  '/settings/invoice': '/docs/configuration/invoice-numbering',
+  '/settings/payment': '/docs/configuration/payment-providers',
+  '/settings/custom-fields': '/docs/configuration/custom-fields',
+  '/settings/maintenance': '/docs/configuration/predicted-maintenance',
+  '/settings/data': '/docs/configuration/backup-and-restore',
+  '/settings/alerts': '/docs/features/low-stock-alerts',
+  '/settings/ai': '/docs/integrations/ai',
+  '/settings/telegram': '/docs/integrations/telegram',
+  '/telegram': '/docs/integrations/telegram',
+  '/settings/report-schedule': '/docs/features/reports',
+  '/settings/account': '/docs/security/passkeys-and-2fa',
+  '/sales': '/docs/features/work-orders',
 }
 
 const breadcrumbMap: Record<string, BreadcrumbSegment[]> = {
@@ -198,16 +217,7 @@ export function PageHeader() {
         </BreadcrumbList>
       </Breadcrumb>
       <div className="ml-auto flex items-center gap-2">
-        {docsHref && (
-          <a
-            href={`https://torqvoice.com${docsHref}`}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="hidden shrink-0 rounded text-[11px] text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring sm:inline"
-          >
-            {tn('readMore')} →
-          </a>
-        )}
+        {docsHref && <DocsLink href={docsHref} className="hidden sm:inline" />}
         <SearchTrigger />
         <QuickCreateMenu />
         {showWhiteLabelCta && (

src/features/custom-fields/Components/CustomFieldsManager.tsx

@@ -18,6 +18,7 @@ import {
   SelectValue,
 } from '@/components/ui/select'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { DocsLink } from '@/components/docs-link'
 import { useGlassModal } from '@/components/glass-modal'
 import { useConfirm } from '@/components/confirm-dialog'
 import {
@@ -302,6 +303,7 @@ export function CustomFieldsManager({
             <DialogTitle>
               {editing ? t('customFields.editField') : t('customFields.newField')}
             </DialogTitle>
+            <DocsLink href="/docs/configuration/custom-fields" variant="hint" className="self-start" />
           </DialogHeader>
           <div className="space-y-4">
             <div className="space-y-2">

src/features/customers/Components/CustomerForm.tsx

@@ -15,6 +15,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { DocsLink } from "@/components/docs-link";
 import { useGlassModal } from "@/components/glass-modal";
 import { toast } from "sonner";
 import { createCustomer, updateCustomer } from "../Actions/customerActions";
@@ -89,6 +90,7 @@ export function CustomerForm({ open, onOpenChange, customer, onCreated }: Custom
           <DialogTitle>
             {customer ? t("editTitle") : t("addTitle")}
           </DialogTitle>
+          <DocsLink href="/docs/features/customers" variant="hint" className="self-start" />
           <DialogDescription className="sr-only">
             {customer ? t("editTitle") : t("addTitle")}
           </DialogDescription>

src/features/customers/Components/ImportCustomersDialog.tsx

@@ -7,6 +7,7 @@ import { Button } from "@/components/ui/button";
 import {
   Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription,
 } from "@/components/ui/dialog";
+import { DocsLink } from "@/components/docs-link";
 import {
   Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
 } from "@/components/ui/table";
@@ -313,6 +314,7 @@ export function ImportCustomersDialog({
         <DialogHeader>
           <DialogTitle>{t("title")}</DialogTitle>
           <DialogDescription>{t("description")}</DialogDescription>
+          <DocsLink href="/docs/tutorials/migrate-customers" variant="hint" className="self-start" />
         </DialogHeader>
 
         {step === "upload" && (

src/features/dashboard/Components/CustomCardDialog.tsx

@@ -13,6 +13,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { DocsLink } from "@/components/docs-link";
 import {
   Select,
   SelectContent,
@@ -188,6 +189,7 @@ export function CustomCardDialog({
       <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-2xl" aria-describedby={undefined}>
         <DialogHeader>
           <DialogTitle>{widget ? t("editCard") : t("addCard")}</DialogTitle>
+          <DocsLink href="/docs/features/dashboard" variant="hint" className="self-start" />
         </DialogHeader>
 
         <div className="space-y-5">

src/features/inspections/Components/NewInspectionDialog.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, useTransition } from 'react'
 import { useRouter } from 'next/navigation'
 import { useTranslations } from 'next-intl'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { DocsLink } from '@/components/docs-link'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
@@ -121,6 +122,7 @@ export function NewInspectionDialog({
       <DialogContent className="sm:max-w-md" aria-describedby={undefined}>
         <DialogHeader>
           <DialogTitle>{t("title")}</DialogTitle>
+          <DocsLink href="/docs/features/inspections" variant="hint" className="self-start" />
         </DialogHeader>
         <form onSubmit={handleSubmit} className="space-y-4">
           <div className="space-y-2">

src/features/inventory/Components/InventoryPartForm.tsx

@@ -16,6 +16,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { DocsLink } from "@/components/docs-link";
 import { toast } from "sonner";
 import { useGlassModal } from "@/components/glass-modal";
 import { createInventoryPart, updateInventoryPart, deleteOrphanedUploads } from "../Actions/inventoryActions";
@@ -338,6 +339,7 @@ export function InventoryPartForm({ open, onOpenChange, part, markupMultiplier,
             <DialogTitle>
               {part ? t('form.editPart') : t('form.addNewPart')}
             </DialogTitle>
+            <DocsLink href="/docs/features/inventory" className="ml-auto" />
             {/* Only meaningful for a saved part — a new one has no history yet.
                 Opens on top of this dialog rather than replacing it, so
                 in-progress edits and uploads are not discarded. */}

src/features/labor-presets/Components/LaborPresetForm.tsx

@@ -13,6 +13,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { DocsLink } from "@/components/docs-link";
 import { useGlassModal } from "@/components/glass-modal";
 import { createLaborPreset, updateLaborPreset } from "../Actions/laborPresetActions";
 import { Loader2, Plus, Trash2 } from "lucide-react";
@@ -257,6 +258,7 @@ export function LaborPresetForm({ open, onOpenChange, preset, defaultLaborRate =
           <DialogTitle>
             {preset ? t("form.editPackage") : t("form.addPackage")}
           </DialogTitle>
+          <DocsLink href="/docs/configuration/work-orders/labor-presets" variant="hint" className="self-start" />
         </DialogHeader>
 
         {/* Mode tabs */}

src/features/quotes/Components/NewQuoteDialog.tsx

@@ -8,6 +8,7 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { DocsLink } from '@/components/docs-link'
 import { Loader2 } from 'lucide-react'
 import { createQuote } from '../Actions/quoteActions'
 import { VehicleCombobox } from './VehicleCombobox'
@@ -99,6 +100,7 @@ export function NewQuoteDialog({
       <DialogContent className="sm:max-w-md" aria-describedby={undefined}>
         <DialogHeader>
           <DialogTitle>{t('form.newQuote')}</DialogTitle>
+          <DocsLink href="/docs/features/quotes" variant="hint" className="self-start" />
         </DialogHeader>
         <form onSubmit={handleCreate} className="space-y-4">
           <div className="space-y-2">

src/features/scheduled-messages/Components/ScheduleMessageDialog.tsx

@@ -22,6 +22,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { DocsLink } from "@/components/docs-link";
 import { CustomerCombobox } from "@/features/quotes/Components/CustomerCombobox";
 import {
   createScheduledMessage,
@@ -184,6 +185,7 @@ export function ScheduleMessageDialog({
       <DialogContent className="sm:max-w-lg" aria-describedby={undefined}>
         <DialogHeader>
           <DialogTitle>{isEdit ? t("editTitle") : t("title")}</DialogTitle>
+          <DocsLink href="/docs/features/messages" variant="hint" className="self-start" />
         </DialogHeader>
 
         <form onSubmit={handleSubmit} className="space-y-4">

src/features/sms/Components/NewSmsDialog.tsx

@@ -14,6 +14,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { DocsLink } from "@/components/docs-link";
 import { useDebouncedSearch } from "@/hooks/use-debounced-search";
 import { searchSmsRecipients, sendSmsToCustomer } from "../Actions/smsActions";
 import { SmsTemplateMenu } from "./SmsTemplateMenu";
@@ -108,6 +109,7 @@ export function NewSmsDialog({
       <DialogContent className="sm:max-w-md" aria-describedby={undefined}>
         <DialogHeader>
           <DialogTitle>{t("title")}</DialogTitle>
+          <DocsLink href="/docs/integrations/sms" variant="hint" className="self-start" />
         </DialogHeader>
 
         {!recipient ? (

src/features/status-reports/Components/CreateStatusReportDialog.tsx

@@ -6,6 +6,7 @@ import {
   Dialog, DialogContent, DialogHeader, DialogTitle,
   DialogDescription, DialogFooter,
 } from "@/components/ui/dialog";
+import { DocsLink } from "@/components/docs-link";
 import {
   Drawer, DrawerContent, DrawerHeader, DrawerTitle,
   DrawerDescription, DrawerFooter,
@@ -232,6 +233,7 @@ export function CreateStatusReportDialog({
       <DialogContent className="sm:max-w-lg">
         <DialogHeader>
           <DialogTitle>{t("title")}</DialogTitle>
+          <DocsLink href="/docs/features/status-reports" variant="hint" className="self-start" />
           <DialogDescription>{vehicleName}</DialogDescription>
         </DialogHeader>
         {formContent}

src/features/vehicles/Components/ReminderFormDialog.tsx

@@ -25,6 +25,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { DocsLink } from "@/components/docs-link";
 import { CalendarIcon, Check, ChevronsUpDown, Loader2 } from "lucide-react";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
@@ -164,6 +165,7 @@ export function ReminderFormDialog({
       <DialogContent className="sm:max-w-md">
         <DialogHeader>
           <DialogTitle>{isEdit ? tv("editTitle") : tv("addTitle")}</DialogTitle>
+          <DocsLink href="/docs/features/reminders" variant="hint" className="self-start" />
         </DialogHeader>
         <form onSubmit={handleSubmit} className="space-y-4">
           {/* Target: workshop (nothing), customer, or vehicle */}

src/features/vehicles/Components/VehicleForm.tsx

@@ -34,6 +34,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { DocsLink } from "@/components/docs-link";
 import { toast } from "sonner";
 import { useGlassModal } from "@/components/glass-modal";
 import { createVehicle, updateVehicle } from "../Actions/vehicleActions";
@@ -196,6 +197,7 @@ export function VehicleForm({ open, onOpenChange, vehicle, customers, defaultCus
           <DialogTitle>
             {vehicle ? t("editTitle") : t("addTitle")}
           </DialogTitle>
+          <DocsLink href="/docs/features/vehicles" variant="hint" className="self-start" />
           <DialogDescription className="sr-only">
             {vehicle ? t("editTitle") : t("addTitle")}
           </DialogDescription>

src/features/workboard/Components/TechnicianDialog.tsx

@@ -7,6 +7,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { DocsLink } from "@/components/docs-link";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -122,6 +123,7 @@ export function TechnicianDialog({
           <DialogTitle>
             {technician ? t("editTitle") : t("addTitle")}
           </DialogTitle>
+          <DocsLink href="/docs/configuration/work-orders/technician-assignment" variant="hint" className="self-start" />
         </DialogHeader>
         <form onSubmit={handleSubmit} className="space-y-4">
           <div className="space-y-2">