Merge pull request 'feat: email receipts and repair estimates' (#13) from feature/email-receipts into main

Reviewed-on: #13

packages/admin/src/components/pos/pos-payment-dialog.tsx

@@ -84,6 +84,7 @@ export function POSPaymentDialog({ open, onOpenChange, paymentMethod, transactio
     queryKey: ['pos', 'receipt', result?.id],
     queryFn: () => api.get<{
       transaction: Transaction & { lineItems: { description: string; qty: number; unitPrice: string; taxAmount: string; lineTotal: string; discountAmount: string }[] }
+      customerEmail: string | null
       company: { name: string; phone: string | null; email: string | null; address: { street?: string; city?: string; state?: string; zip?: string } | null }
       location: { name: string; phone: string | null; email: string | null; address: { street?: string; city?: string; state?: string; zip?: string } | null }
     }>(`/v1/transactions/${result!.id}/receipt`),
@@ -91,6 +92,19 @@ export function POSPaymentDialog({ open, onOpenChange, paymentMethod, transactio
   })
 
   const [showReceipt, setShowReceipt] = useState(false)
+  const [emailMode, setEmailMode] = useState(false)
+  const [emailAddress, setEmailAddress] = useState('')
+  const [emailSent, setEmailSent] = useState(false)
+
+  const emailReceiptMutation = useMutation({
+    mutationFn: () => api.post<{ message: string }>(`/v1/transactions/${result!.id}/email-receipt`, { email: emailAddress }),
+    onSuccess: () => {
+      toast.success('Receipt emailed')
+      setEmailMode(false)
+      setEmailSent(true)
+    },
+    onError: (err) => toast.error(err.message),
+  })
 
   if (completed && result) {
     const changeGiven = parseFloat(result.changeGiven ?? '0')
@@ -140,14 +154,47 @@ export function POSPaymentDialog({ open, onOpenChange, paymentMethod, transactio
               )}
             </div>
 
+            {emailMode ? (
+              <div className="w-full space-y-2">
+                <Label className="text-xs text-muted-foreground">Email receipt to:</Label>
+                <div className="flex gap-2">
+                  <Input
+                    type="email"
+                    value={emailAddress}
+                    onChange={(e) => setEmailAddress(e.target.value)}
+                    placeholder="customer@example.com"
+                    className="h-9"
+                    autoFocus
+                  />
+                  <Button
+                    size="sm"
+                    className="h-9 px-4"
+                    onClick={() => emailReceiptMutation.mutate()}
+                    disabled={!emailAddress || emailReceiptMutation.isPending}
+                  >
+                    {emailReceiptMutation.isPending ? 'Sending...' : 'Send'}
+                  </Button>
+                </div>
+                <Button variant="ghost" size="sm" className="text-xs" onClick={() => setEmailMode(false)}>Cancel</Button>
+              </div>
+            ) : (
               <div className="w-full grid grid-cols-2 gap-2">
                 <Button variant="outline" className="h-11 gap-2" onClick={() => setShowReceipt(true)}>
                   <Printer className="h-4 w-4" />Receipt
                 </Button>
-              <Button variant="outline" className="h-11 gap-2" disabled>
-                <Mail className="h-4 w-4" />Email
+                <Button
+                  variant="outline"
+                  className="h-11 gap-2"
+                  onClick={() => {
+                    setEmailAddress(receiptData?.customerEmail ?? '')
+                    setEmailMode(true)
+                  }}
+                  disabled={emailSent}
+                >
+                  <Mail className="h-4 w-4" />{emailSent ? 'Sent' : 'Email'}
                 </Button>
               </div>
+            )}
 
             <Button className="w-full h-12 text-base" onClick={handleDone}>
               New Sale

packages/admin/src/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

packages/admin/src/routes/_authenticated.tsx

@@ -1,5 +1,5 @@
 import { createFileRoute, Outlet, Link, redirect, useRouter } from '@tanstack/react-router'
-import { useQuery } from '@tanstack/react-query'
+import { useQuery, useQueryClient, useMutation } from '@tanstack/react-query'
 import { queryOptions } from '@tanstack/react-query'
 import { useEffect, useState } from 'react'
 import { api } from '@/lib/api-client'
@@ -9,6 +9,9 @@ import { moduleListOptions } from '@/api/modules'
 import { Avatar } from '@/components/shared/avatar-upload'
 import { Button } from '@/components/ui/button'
 import { Users, UserRound, HelpCircle, Shield, UserCog, LogOut, User, Wrench, Package, ClipboardList, FolderOpen, KeyRound, Settings, PanelLeftClose, PanelLeft, CalendarDays, GraduationCap, CalendarRange, BookOpen, BookMarked, Package2, Tag, Truck, ShoppingCart } from 'lucide-react'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { toast } from 'sonner'
 
 export const Route = createFileRoute('/_authenticated')({
   beforeLoad: () => {
@@ -104,6 +107,58 @@ function NavGroup({ label, children, collapsed }: { label: string; children: Rea
   )
 }
 
+function SetPinModal() {
+  const queryClient = useQueryClient()
+  const [pin, setPin] = useState('')
+  const [confirmPin, setConfirmPin] = useState('')
+  const [error, setError] = useState('')
+
+  const setPinMutation = useMutation({
+    mutationFn: () => api.post('/v1/auth/set-pin', { pin }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['auth', 'me'] })
+      toast.success('PIN set successfully')
+    },
+    onError: (err) => setError(err.message),
+  })
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setError('')
+    if (pin.length < 4 || pin.length > 6) { setError('PIN must be 4-6 digits'); return }
+    if (!/^\d+$/.test(pin)) { setError('PIN must be digits only'); return }
+    if (pin !== confirmPin) { setError('PINs do not match'); return }
+    setPinMutation.mutate()
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
+      <div className="w-full max-w-sm rounded-xl border bg-card p-6 shadow-xl">
+        <h2 className="text-lg font-semibold mb-1">Set your POS PIN</h2>
+        <p className="text-sm text-muted-foreground mb-4">
+          A PIN is required to use the Point of Sale. Choose a 4-6 digit PIN you'll use to unlock the terminal.
+        </p>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label>PIN</Label>
+              <Input type="password" inputMode="numeric" maxLength={6} value={pin} onChange={(e) => setPin(e.target.value)} placeholder="****" autoFocus />
+            </div>
+            <div className="space-y-2">
+              <Label>Confirm PIN</Label>
+              <Input type="password" inputMode="numeric" maxLength={6} value={confirmPin} onChange={(e) => setConfirmPin(e.target.value)} placeholder="****" />
+            </div>
+          </div>
+          {error && <p className="text-sm text-destructive">{error}</p>}
+          <Button type="submit" className="w-full" disabled={setPinMutation.isPending}>
+            {setPinMutation.isPending ? 'Setting...' : 'Set PIN'}
+          </Button>
+        </form>
+      </div>
+    </div>
+  )
+}
+
 function AuthenticatedLayout() {
   const router = useRouter()
   const user = useAuthStore((s) => s.user)
@@ -112,6 +167,13 @@ function AuthenticatedLayout() {
   const setPermissions = useAuthStore((s) => s.setPermissions)
   const permissionsLoaded = useAuthStore((s) => s.permissionsLoaded)
 
+  // Fetch profile for PIN warning
+  const { data: profile } = useQuery(queryOptions({
+    queryKey: ['auth', 'me'],
+    queryFn: () => api.get<{ hasPin: boolean }>('/v1/auth/me'),
+    enabled: !!useAuthStore.getState().token,
+  }))
+
   // Fetch permissions on mount
   const { data: permData } = useQuery({
     ...myPermissionsOptions(),
@@ -263,6 +325,7 @@ function AuthenticatedLayout() {
           </div>
         </nav>
         <main className="flex-1 p-6 min-h-screen">
+          {profile && !profile.hasPin && <SetPinModal />}
           <Outlet />
         </main>
       </div>

packages/admin/src/routes/_authenticated/profile.tsx

@@ -11,10 +11,22 @@ import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Separator } from '@/components/ui/separator'
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
 import { Sun, Moon, Monitor } from 'lucide-react'
 import { toast } from 'sonner'
 import { AvatarUpload } from '@/components/shared/avatar-upload'
 
+interface Profile {
+  id: string
+  email: string
+  firstName: string
+  lastName: string
+  role: string
+  employeeNumber: string | null
+  hasPin: boolean
+  createdAt: string
+}
+
 export const Route = createFileRoute('/_authenticated/profile')({
   component: ProfilePage,
 })
@@ -22,21 +34,56 @@ export const Route = createFileRoute('/_authenticated/profile')({
 function profileOptions() {
   return queryOptions({
     queryKey: ['auth', 'me'],
-    queryFn: () => api.get<{ id: string; email: string; firstName: string; lastName: string }>('/v1/auth/me'),
+    queryFn: () => api.get<Profile>('/v1/auth/me'),
   })
 }
 
 function ProfilePage() {
+  const { tab } = Route.useSearch() as { tab?: string }
+
   const queryClient = useQueryClient()
   const setAuth = useAuthStore((s) => s.setAuth)
   const storeUser = useAuthStore((s) => s.user)
   const storeToken = useAuthStore((s) => s.token)
-  const { mode, colorTheme, setMode, setColorTheme } = useThemeStore()
 
   const { data: profile } = useQuery(profileOptions())
 
-  const [firstName, setFirstName] = useState('')
-  const [lastName, setLastName] = useState('')
+  return (
+    <div className="space-y-6 max-w-2xl">
+      <h1 className="text-2xl font-bold">Profile</h1>
+
+      <Tabs defaultValue={tab === 'security' || tab === 'appearance' ? tab : 'account'}>
+        <TabsList>
+          <TabsTrigger value="account">Account</TabsTrigger>
+          <TabsTrigger value="security">Security</TabsTrigger>
+          <TabsTrigger value="appearance">Appearance</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="account">
+          <AccountTab profile={profile} queryClient={queryClient} setAuth={setAuth} storeUser={storeUser} storeToken={storeToken} />
+        </TabsContent>
+
+        <TabsContent value="security">
+          <SecurityTab profile={profile} queryClient={queryClient} />
+        </TabsContent>
+
+        <TabsContent value="appearance">
+          <AppearanceTab />
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
+
+function AccountTab({ profile, queryClient, setAuth, storeUser, storeToken }: {
+  profile: Profile | undefined
+  queryClient: ReturnType<typeof useQueryClient>
+  setAuth: (token: string, user: any) => void
+  storeUser: any
+  storeToken: string | null
+}) {
+  const [firstName, setFirstName] = useState(profile?.firstName ?? '')
+  const [lastName, setLastName] = useState(profile?.lastName ?? '')
   const [nameLoaded, setNameLoaded] = useState(false)
 
   if (profile && !nameLoaded) {
@@ -45,12 +92,8 @@ function ProfilePage() {
     setNameLoaded(true)
   }
 
-  const [currentPassword, setCurrentPassword] = useState('')
-  const [newPassword, setNewPassword] = useState('')
-  const [confirmPassword, setConfirmPassword] = useState('')
-
   const updateProfileMutation = useMutation({
-    mutationFn: (data: Record<string, unknown>) => api.patch<{ id: string; email: string; firstName: string; lastName: string }>('/v1/auth/me', data),
+    mutationFn: (data: Record<string, unknown>) => api.patch<Profile>('/v1/auth/me', data),
     onSuccess: (updated) => {
       queryClient.invalidateQueries({ queryKey: ['auth', 'me'] })
       if (storeToken && storeUser) {
@@ -61,33 +104,7 @@ function ProfilePage() {
     onError: (err) => toast.error(err.message),
   })
 
-  const changePasswordMutation = useMutation({
-    mutationFn: () => api.post('/v1/auth/change-password', { currentPassword, newPassword }),
-    onSuccess: () => {
-      setCurrentPassword('')
-      setNewPassword('')
-      setConfirmPassword('')
-      toast.success('Password changed')
-    },
-    onError: (err) => toast.error(err.message),
-  })
-
-  function handlePasswordChange() {
-    if (newPassword.length < 12) {
-      toast.error('Password must be at least 12 characters')
-      return
-    }
-    if (newPassword !== confirmPassword) {
-      toast.error('Passwords do not match')
-      return
-    }
-    changePasswordMutation.mutate()
-  }
-
   return (
-    <div className="space-y-6 max-w-2xl">
-      <h1 className="text-2xl font-bold">Profile</h1>
-
     <Card>
       <CardHeader>
         <CardTitle className="text-lg">Account</CardTitle>
@@ -99,6 +116,9 @@ function ProfilePage() {
             <div>
               <p className="font-medium">{profile.firstName} {profile.lastName}</p>
               <p className="text-sm text-muted-foreground">{profile.email}</p>
+              {profile.employeeNumber && (
+                <p className="text-xs text-muted-foreground">Employee #{profile.employeeNumber}</p>
+              )}
             </div>
           </div>
         )}
@@ -124,7 +144,80 @@ function ProfilePage() {
         </Button>
       </CardContent>
     </Card>
+  )
+}
 
+function SecurityTab({ profile, queryClient }: {
+  profile: Profile | undefined
+  queryClient: ReturnType<typeof useQueryClient>
+}) {
+  const [currentPassword, setCurrentPassword] = useState('')
+  const [newPassword, setNewPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [pin, setPin] = useState('')
+  const [confirmPin, setConfirmPin] = useState('')
+
+  const changePasswordMutation = useMutation({
+    mutationFn: () => api.post('/v1/auth/change-password', { currentPassword, newPassword }),
+    onSuccess: () => {
+      setCurrentPassword('')
+      setNewPassword('')
+      setConfirmPassword('')
+      toast.success('Password changed')
+    },
+    onError: (err) => toast.error(err.message),
+  })
+
+  const setPinMutation = useMutation({
+    mutationFn: () => api.post('/v1/auth/set-pin', { pin }),
+    onSuccess: () => {
+      setPin('')
+      setConfirmPin('')
+      queryClient.invalidateQueries({ queryKey: ['auth', 'me'] })
+      toast.success('PIN set')
+    },
+    onError: (err) => toast.error(err.message),
+  })
+
+  const removePinMutation = useMutation({
+    mutationFn: () => api.del('/v1/auth/pin'),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['auth', 'me'] })
+      toast.success('PIN removed')
+    },
+    onError: (err) => toast.error(err.message),
+  })
+
+  function handlePasswordChange() {
+    if (newPassword.length < 12) {
+      toast.error('Password must be at least 12 characters')
+      return
+    }
+    if (newPassword !== confirmPassword) {
+      toast.error('Passwords do not match')
+      return
+    }
+    changePasswordMutation.mutate()
+  }
+
+  function handleSetPin() {
+    if (pin.length < 4 || pin.length > 6) {
+      toast.error('PIN must be 4-6 digits')
+      return
+    }
+    if (!/^\d+$/.test(pin)) {
+      toast.error('PIN must be digits only')
+      return
+    }
+    if (pin !== confirmPin) {
+      toast.error('PINs do not match')
+      return
+    }
+    setPinMutation.mutate()
+  }
+
+  return (
+    <div className="space-y-6">
       <Card>
         <CardHeader>
           <CardTitle className="text-lg">Change Password</CardTitle>
@@ -148,6 +241,67 @@ function ProfilePage() {
         </CardContent>
       </Card>
 
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-lg">POS PIN</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {profile?.employeeNumber && (
+            <p className="text-sm text-muted-foreground">
+              Your employee number is <span className="font-mono font-medium text-foreground">{profile.employeeNumber}</span>.
+              To unlock the POS, enter your employee number followed by your PIN.
+            </p>
+          )}
+          {profile?.hasPin ? (
+            <>
+              <p className="text-sm text-muted-foreground">You have a PIN set. You can change or remove it below.</p>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label>New PIN (4-6 digits)</Label>
+                  <Input type="password" inputMode="numeric" maxLength={6} value={pin} onChange={(e) => setPin(e.target.value)} placeholder="****" />
+                </div>
+                <div className="space-y-2">
+                  <Label>Confirm PIN</Label>
+                  <Input type="password" inputMode="numeric" maxLength={6} value={confirmPin} onChange={(e) => setConfirmPin(e.target.value)} placeholder="****" />
+                </div>
+              </div>
+              <div className="flex gap-2">
+                <Button onClick={handleSetPin} disabled={setPinMutation.isPending}>
+                  {setPinMutation.isPending ? 'Saving...' : 'Change PIN'}
+                </Button>
+                <Button variant="outline" onClick={() => removePinMutation.mutate()} disabled={removePinMutation.isPending}>
+                  {removePinMutation.isPending ? 'Removing...' : 'Remove PIN'}
+                </Button>
+              </div>
+            </>
+          ) : (
+            <>
+              <p className="text-sm text-muted-foreground">Set a PIN to unlock the Point of Sale terminal.</p>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label>PIN (4-6 digits)</Label>
+                  <Input type="password" inputMode="numeric" maxLength={6} value={pin} onChange={(e) => setPin(e.target.value)} placeholder="****" />
+                </div>
+                <div className="space-y-2">
+                  <Label>Confirm PIN</Label>
+                  <Input type="password" inputMode="numeric" maxLength={6} value={confirmPin} onChange={(e) => setConfirmPin(e.target.value)} placeholder="****" />
+                </div>
+              </div>
+              <Button onClick={handleSetPin} disabled={setPinMutation.isPending}>
+                {setPinMutation.isPending ? 'Saving...' : 'Set PIN'}
+              </Button>
+            </>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+function AppearanceTab() {
+  const { mode, colorTheme, setMode, setColorTheme } = useThemeStore()
+
+  return (
     <Card>
       <CardHeader>
         <CardTitle className="text-lg">Appearance</CardTitle>
@@ -197,6 +351,5 @@ function ProfilePage() {
         </div>
       </CardContent>
     </Card>
-    </div>
   )
 }

packages/admin/src/routes/_authenticated/repairs/$ticketId.tsx

@@ -21,7 +21,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Skeleton } from '@/components/ui/skeleton'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
-import { ArrowLeft, Plus, Trash2, RotateCcw, Save, Search } from 'lucide-react'
+import { ArrowLeft, Plus, Trash2, RotateCcw, Save, Search, Mail } from 'lucide-react'
 import { PdfModal } from '@/components/repairs/pdf-modal'
 import { toast } from 'sonner'
 import { useAuthStore } from '@/stores/auth.store'
@@ -78,6 +78,17 @@ function RepairTicketDetailPage() {
   const { data: lineItemsData, isLoading: itemsLoading } = useQuery(repairLineItemListOptions(ticketId, params))
 
   const [editFields, setEditFields] = useState<Record<string, string>>({})
+  const [emailEstimateOpen, setEmailEstimateOpen] = useState(false)
+  const [estimateEmail, setEstimateEmail] = useState('')
+
+  const emailEstimateMutation = useMutation({
+    mutationFn: () => api.post<{ message: string }>(`/v1/repair-tickets/${ticketId}/email-estimate`, { email: estimateEmail }),
+    onSuccess: () => {
+      toast.success('Estimate emailed')
+      setEmailEstimateOpen(false)
+    },
+    onError: (err) => toast.error(err.message),
+  })
 
   const statusMutation = useMutation({
     mutationFn: (status: string) => repairTicketMutations.updateStatus(ticketId, status),
@@ -188,6 +199,37 @@ function RepairTicketDetailPage() {
           <h1 className="text-2xl font-bold">Ticket #{ticket.ticketNumber}</h1>
           <p className="text-sm text-muted-foreground">{ticket.customerName} — {ticket.itemDescription ?? 'No item description'}</p>
         </div>
+        <Dialog open={emailEstimateOpen} onOpenChange={setEmailEstimateOpen}>
+          <DialogTrigger asChild>
+            <Button variant="outline" size="sm" className="gap-2" onClick={() => setEstimateEmail((ticket as any).customerEmail ?? '')}>
+              <Mail className="h-4 w-4" />Email Estimate
+            </Button>
+          </DialogTrigger>
+          <DialogContent className="max-w-sm">
+            <DialogHeader>
+              <DialogTitle>Email Estimate</DialogTitle>
+            </DialogHeader>
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <Label>Send to</Label>
+                <Input
+                  type="email"
+                  value={estimateEmail}
+                  onChange={(e) => setEstimateEmail(e.target.value)}
+                  placeholder="customer@example.com"
+                  autoFocus
+                />
+              </div>
+              <Button
+                className="w-full"
+                onClick={() => emailEstimateMutation.mutate()}
+                disabled={!estimateEmail || emailEstimateMutation.isPending}
+              >
+                {emailEstimateMutation.isPending ? 'Sending...' : 'Send Estimate'}
+              </Button>
+            </div>
+          </DialogContent>
+        </Dialog>
         <PdfModal ticket={ticket} lineItems={lineItemsData?.data ?? []} ticketId={ticketId} />
       </div>
 

packages/backend/__tests__/utils/email-templates.test.ts

@@ -0,0 +1,144 @@
+import { describe, it, expect } from 'bun:test'
+import {
+  renderReceiptEmailHtml,
+  renderReceiptEmailText,
+  renderEstimateEmailHtml,
+  renderEstimateEmailText,
+} from '../../src/utils/email-templates.js'
+
+const mockReceipt = {
+  transaction: {
+    transactionNumber: 'TXN-20260405-001',
+    subtotal: '100.00',
+    discountTotal: '10.00',
+    taxTotal: '7.43',
+    total: '97.43',
+    paymentMethod: 'cash',
+    amountTendered: '100.00',
+    changeGiven: '2.57',
+    roundingAdjustment: null,
+    completedAt: '2026-04-05T12:00:00Z',
+    lineItems: [
+      { description: 'Guitar Strings', qty: 2, unitPrice: '12.99', taxAmount: '2.14', lineTotal: '25.98', discountAmount: null },
+      { description: 'Tuner', qty: 1, unitPrice: '74.02', taxAmount: '5.29', lineTotal: '74.02', discountAmount: null },
+    ],
+  },
+  company: { name: 'Test Store', phone: '555-1234', email: 'store@test.com', address: { street: '123 Main St', city: 'Austin', state: 'TX', zip: '78701' } },
+  location: null,
+}
+
+const mockTicket = {
+  ticketNumber: 'RPR-001',
+  customerName: 'Jane Doe',
+  customerPhone: '555-5678',
+  itemDescription: 'Acoustic Guitar',
+  serialNumber: 'AG-12345',
+  problemDescription: 'Cracked neck joint',
+  estimatedCost: '250.00',
+  promisedDate: '2026-04-12',
+  status: 'pending_approval',
+}
+
+const mockLineItems = [
+  { itemType: 'labor', description: 'Neck repair', qty: 1, unitPrice: '150.00', totalPrice: '150.00' },
+  { itemType: 'part', description: 'Wood glue & clamps', qty: 1, unitPrice: '25.00', totalPrice: '25.00' },
+  { itemType: 'flat_rate', description: 'Setup & restring', qty: 1, unitPrice: '75.00', totalPrice: '75.00' },
+]
+
+const mockCompany = { name: 'Test Store', phone: '555-1234', email: 'store@test.com', address: null }
+
+describe('renderReceiptEmailHtml', () => {
+  it('renders HTML with transaction details', () => {
+    const html = renderReceiptEmailHtml(mockReceipt as any)
+    expect(html).toContain('TXN-20260405-001')
+    expect(html).toContain('Test Store')
+    expect(html).toContain('Guitar Strings')
+    expect(html).toContain('Tuner')
+    expect(html).toContain('$97.43')
+    expect(html).toContain('$100.00')
+    expect(html).toContain('Powered by LunarFront')
+  })
+
+  it('includes discount when present', () => {
+    const html = renderReceiptEmailHtml(mockReceipt as any)
+    expect(html).toContain('Discount')
+    expect(html).toContain('$10.00')
+  })
+
+  it('includes payment details for cash', () => {
+    const html = renderReceiptEmailHtml(mockReceipt as any)
+    expect(html).toContain('Cash')
+    expect(html).toContain('$2.57')
+  })
+
+  it('includes receipt config when provided', () => {
+    const config = { receipt_footer: 'Thank you!', receipt_return_policy: '30-day returns' }
+    const html = renderReceiptEmailHtml(mockReceipt as any, config)
+    expect(html).toContain('Thank you!')
+    expect(html).toContain('30-day returns')
+  })
+
+  it('includes company address', () => {
+    const html = renderReceiptEmailHtml(mockReceipt as any)
+    expect(html).toContain('123 Main St')
+    expect(html).toContain('Austin')
+  })
+})
+
+describe('renderReceiptEmailText', () => {
+  it('renders plain text with transaction details', () => {
+    const text = renderReceiptEmailText(mockReceipt as any)
+    expect(text).toContain('TXN-20260405-001')
+    expect(text).toContain('Guitar Strings')
+    expect(text).toContain('Total: $97.43')
+    expect(text).toContain('Cash')
+  })
+})
+
+describe('renderEstimateEmailHtml', () => {
+  it('renders HTML with ticket details', () => {
+    const html = renderEstimateEmailHtml(mockTicket as any, mockLineItems as any, mockCompany as any)
+    expect(html).toContain('RPR-001')
+    expect(html).toContain('Jane Doe')
+    expect(html).toContain('Acoustic Guitar')
+    expect(html).toContain('AG-12345')
+    expect(html).toContain('Cracked neck joint')
+    expect(html).toContain('$250.00')
+    expect(html).toContain('Powered by LunarFront')
+  })
+
+  it('renders line items with types', () => {
+    const html = renderEstimateEmailHtml(mockTicket as any, mockLineItems as any, mockCompany as any)
+    expect(html).toContain('Labor')
+    expect(html).toContain('Neck repair')
+    expect(html).toContain('Part')
+    expect(html).toContain('Flat Rate')
+    expect(html).toContain('Setup & restring')
+  })
+
+  it('includes promised date', () => {
+    const html = renderEstimateEmailHtml(mockTicket as any, mockLineItems as any, mockCompany as any)
+    expect(html).toContain('Estimated completion')
+    expect(html).toContain('Apr')
+  })
+
+  it('renders without line items using estimatedCost', () => {
+    const html = renderEstimateEmailHtml(mockTicket as any, [], mockCompany as any)
+    expect(html).toContain('$250.00')
+  })
+
+  it('includes company phone', () => {
+    const html = renderEstimateEmailHtml(mockTicket as any, mockLineItems as any, mockCompany as any)
+    expect(html).toContain('555-1234')
+  })
+})
+
+describe('renderEstimateEmailText', () => {
+  it('renders plain text with ticket details', () => {
+    const text = renderEstimateEmailText(mockTicket as any, mockLineItems as any, mockCompany as any)
+    expect(text).toContain('RPR-001')
+    expect(text).toContain('Jane Doe')
+    expect(text).toContain('Neck repair')
+    expect(text).toContain('$250.00')
+  })
+})

packages/backend/api-tests/run.ts

@@ -114,6 +114,10 @@ async function setupDatabase() {
     await testSql`INSERT INTO module_config (slug, name, description, licensed, enabled) VALUES (${m.slug}, ${m.name}, ${m.description}, true, ${m.enabled}) ON CONFLICT (slug) DO NOTHING`
   }
 
+  // Seed test email provider so email endpoints work without real provider
+  await testSql`INSERT INTO app_settings (key, value, is_encrypted) VALUES ('email.provider', 'test', false) ON CONFLICT (key) DO NOTHING`
+  await testSql`INSERT INTO app_settings (key, value, is_encrypted) VALUES ('email.from_address', 'Test Store <noreply@test.com>', false) ON CONFLICT (key) DO NOTHING`
+
   await testSql.end()
   console.log('  Database ready')
 }

packages/backend/api-tests/suites/pos.ts

@@ -1051,4 +1051,48 @@ suite('POS', { tags: ['pos'] }, (t) => {
     // Cleanup
     await t.api.post(`/v1/drawer/${drawer.data.id}/close`, { closingBalance: 100 })
   })
+
+  // ─── Email Receipt ──────────────────────────────────────────────────────────
+
+  t.test('emails a receipt for a completed transaction', { tags: ['transactions', 'email'] }, async () => {
+    // Create and complete a transaction
+    const txn = await t.api.post('/v1/transactions', { transactionType: 'sale', locationId: LOCATION_ID })
+    await t.api.post(`/v1/transactions/${txn.data.id}/line-items`, { description: 'Email Test Item', qty: 1, unitPrice: 25 })
+    await t.api.post(`/v1/transactions/${txn.data.id}/complete`, { paymentMethod: 'card_present' })
+
+    const res = await t.api.post(`/v1/transactions/${txn.data.id}/email-receipt`, { email: 'customer@test.com' })
+    t.assert.status(res, 200)
+    t.assert.equal(res.data.message, 'Receipt sent')
+    t.assert.equal(res.data.sentTo, 'customer@test.com')
+  })
+
+  t.test('rejects email receipt with invalid email', { tags: ['transactions', 'email', 'validation'] }, async () => {
+    const txn = await t.api.post('/v1/transactions', { transactionType: 'sale', locationId: LOCATION_ID })
+    await t.api.post(`/v1/transactions/${txn.data.id}/line-items`, { description: 'Bad Email Item', qty: 1, unitPrice: 10 })
+    await t.api.post(`/v1/transactions/${txn.data.id}/complete`, { paymentMethod: 'card_present' })
+
+    const res = await t.api.post(`/v1/transactions/${txn.data.id}/email-receipt`, { email: 'not-an-email' })
+    t.assert.status(res, 400)
+  })
+
+  t.test('rejects email receipt with missing body', { tags: ['transactions', 'email', 'validation'] }, async () => {
+    const txn = await t.api.post('/v1/transactions', { transactionType: 'sale', locationId: LOCATION_ID })
+    await t.api.post(`/v1/transactions/${txn.data.id}/line-items`, { description: 'No Body Item', qty: 1, unitPrice: 10 })
+    await t.api.post(`/v1/transactions/${txn.data.id}/complete`, { paymentMethod: 'card_present' })
+
+    const res = await t.api.post(`/v1/transactions/${txn.data.id}/email-receipt`, {})
+    t.assert.status(res, 400)
+  })
+
+  t.test('receipt response includes customerEmail', { tags: ['transactions', 'email'] }, async () => {
+    // Create account with email
+    const acct = await t.api.post('/v1/accounts', { name: 'Email Customer', email: 'acct@test.com', billingMode: 'consolidated' })
+    const txn = await t.api.post('/v1/transactions', { transactionType: 'sale', locationId: LOCATION_ID, accountId: acct.data.id })
+    await t.api.post(`/v1/transactions/${txn.data.id}/line-items`, { description: 'Account Item', qty: 1, unitPrice: 50 })
+    await t.api.post(`/v1/transactions/${txn.data.id}/complete`, { paymentMethod: 'card_present' })
+
+    const receipt = await t.api.get(`/v1/transactions/${txn.data.id}/receipt`)
+    t.assert.status(receipt, 200)
+    t.assert.equal(receipt.data.customerEmail, 'acct@test.com')
+  })
 })

packages/backend/api-tests/suites/repairs.ts

@@ -510,4 +510,55 @@ suite('Repairs', { tags: ['repairs'] }, (t) => {
     const fileRes = await fetch(`${t.baseUrl}${signedRes.data.url}`)
     t.assert.equal(fileRes.status, 200)
   })
+
+  // ─── Email Estimate ─────────────────────────────────────────────────────────
+
+  t.test('emails a repair estimate', { tags: ['tickets', 'email'] }, async () => {
+    const ticket = await t.api.post('/v1/repair-tickets', {
+      customerName: 'Email Estimate Customer',
+      itemDescription: 'Broken Laptop',
+      problemDescription: 'Won\'t power on',
+      conditionIn: 'poor',
+      estimatedCost: 200,
+    })
+    await t.api.post(`/v1/repair-tickets/${ticket.data.id}/line-items`, {
+      itemType: 'labor',
+      description: 'Diagnostic fee',
+      qty: 1,
+      unitPrice: 50,
+    })
+
+    const res = await t.api.post(`/v1/repair-tickets/${ticket.data.id}/email-estimate`, { email: 'customer@test.com' })
+    t.assert.status(res, 200)
+    t.assert.equal(res.data.message, 'Estimate sent')
+    t.assert.equal(res.data.sentTo, 'customer@test.com')
+  })
+
+  t.test('rejects estimate email with invalid email', { tags: ['tickets', 'email', 'validation'] }, async () => {
+    const ticket = await t.api.post('/v1/repair-tickets', {
+      customerName: 'Bad Email Customer',
+      problemDescription: 'Test',
+      conditionIn: 'good',
+    })
+    const res = await t.api.post(`/v1/repair-tickets/${ticket.data.id}/email-estimate`, { email: 'bad' })
+    t.assert.status(res, 400)
+  })
+
+  t.test('returns 404 for estimate email on nonexistent ticket', { tags: ['tickets', 'email', 'validation'] }, async () => {
+    const res = await t.api.post('/v1/repair-tickets/00000000-0000-0000-0000-000000000000/email-estimate', { email: 'test@test.com' })
+    t.assert.status(res, 404)
+  })
+
+  t.test('ticket detail includes customerEmail from account', { tags: ['tickets', 'email'] }, async () => {
+    const acct = await t.api.post('/v1/accounts', { name: 'Repair Email Acct', email: 'repair@test.com', billingMode: 'consolidated' })
+    const ticket = await t.api.post('/v1/repair-tickets', {
+      customerName: 'Repair Email Acct',
+      accountId: acct.data.id,
+      problemDescription: 'Email test',
+      conditionIn: 'good',
+    })
+    const detail = await t.api.get(`/v1/repair-tickets/${ticket.data.id}`)
+    t.assert.status(detail, 200)
+    t.assert.equal(detail.data.customerEmail, 'repair@test.com')
+  })
 })

packages/backend/src/db/migrations/0046_auto-employee-number.sql

@@ -0,0 +1,31 @@
+-- Auto-assign employee_number on user insert if not provided
+CREATE OR REPLACE FUNCTION assign_employee_number()
+RETURNS TRIGGER AS $$
+DECLARE next_num INT;
+BEGIN
+  IF NEW.employee_number IS NULL OR NEW.employee_number = '' THEN
+    SELECT COALESCE(MAX(employee_number::int), 1000) + 1
+    INTO next_num
+    FROM "user"
+    WHERE employee_number ~ '^\d+$';
+    NEW.employee_number := next_num::text;
+  END IF;
+  RETURN NEW;
+END;
+$$ LANGUAGE plpgsql;
+
+DROP TRIGGER IF EXISTS trg_assign_employee_number ON "user";
+CREATE TRIGGER trg_assign_employee_number
+  BEFORE INSERT ON "user"
+  FOR EACH ROW
+  EXECUTE FUNCTION assign_employee_number();
+
+-- Backfill any users missing an employee number
+DO $$ DECLARE r RECORD; num INT;
+BEGIN
+  SELECT COALESCE(MAX(employee_number::int), 1000) INTO num FROM "user" WHERE employee_number ~ '^\d+$';
+  FOR r IN (SELECT id FROM "user" WHERE employee_number IS NULL OR employee_number = '' ORDER BY created_at) LOOP
+    num := num + 1;
+    UPDATE "user" SET employee_number = num::text WHERE id = r.id;
+  END LOOP;
+END $$;

packages/backend/src/db/migrations/meta/_journal.json

@@ -323,6 +323,13 @@
       "when": 1775770000000,
       "tag": "0045_registers-reports",
       "breakpoints": true
+    },
+    {
+      "idx": 46,
+      "version": "7",
+      "when": 1775860000000,
+      "tag": "0046_auto-employee-number",
+      "breakpoints": true
     }
   ]
 }

packages/backend/src/main.ts

@@ -37,8 +37,10 @@ import { RbacService } from './services/rbac.service.js'
 import { ModuleService } from './services/module.service.js'
 import { AppConfigService } from './services/config.service.js'
 import { SettingsService } from './services/settings.service.js'
+import { eq } from 'drizzle-orm'
 import { users } from './db/schema/users.js'
 import { companies } from './db/schema/stores.js'
+import { roles, userRoles } from './db/schema/rbac.js'
 import { EmailService } from './services/email.service.js'
 import bcrypt from 'bcryptjs'
 
@@ -55,6 +57,13 @@ async function seedInitialUser(app: Awaited<ReturnType<typeof buildApp>>) {
   const tempPassword = crypto.randomUUID()
   const passwordHash = await bcrypt.hash(tempPassword, 10)
   const [user] = await app.db.insert(users).values({ email, passwordHash, firstName, lastName, role: 'admin' }).returning({ id: users.id })
+
+  // Assign the Admin RBAC role
+  const [adminRole] = await app.db.select({ id: roles.id }).from(roles).where(eq(roles.name, 'Admin')).limit(1)
+  if (adminRole) {
+    await app.db.insert(userRoles).values({ userId: user.id, roleId: adminRole.id })
+  }
+
   app.log.info({ email }, 'Initial admin user created')
 
   // Send welcome email with password setup link

packages/backend/src/routes/v1/auth.ts

@@ -274,6 +274,8 @@ export const authRoutes: FastifyPluginAsync = async (app) => {
         firstName: users.firstName,
         lastName: users.lastName,
         role: users.role,
+        employeeNumber: users.employeeNumber,
+        pinHash: users.pinHash,
         createdAt: users.createdAt,
       })
       .from(users)
@@ -281,7 +283,16 @@ export const authRoutes: FastifyPluginAsync = async (app) => {
       .limit(1)
 
     if (!user) return reply.status(404).send({ error: { message: 'User not found', statusCode: 404 } })
-    return reply.send(user)
+    return reply.send({
+      id: user.id,
+      email: user.email,
+      firstName: user.firstName,
+      lastName: user.lastName,
+      role: user.role,
+      employeeNumber: user.employeeNumber,
+      hasPin: !!user.pinHash,
+      createdAt: user.createdAt,
+    })
   })
 
   // Update current user profile

packages/backend/src/routes/v1/repairs.ts

@@ -13,7 +13,13 @@ import {
   RepairServiceTemplateCreateSchema,
   RepairServiceTemplateUpdateSchema,
 } from '@lunarfront/shared/schemas'
+import { eq } from 'drizzle-orm'
+import { z } from 'zod'
 import { RepairTicketService, RepairLineItemService, RepairBatchService, RepairNoteService, RepairServiceTemplateService } from '../../services/repair.service.js'
+import { accounts } from '../../db/schema/accounts.js'
+import { companies } from '../../db/schema/stores.js'
+import { EmailService } from '../../services/email.service.js'
+import { renderEstimateEmailHtml, renderEstimateEmailText } from '../../utils/email-templates.js'
 
 export const repairRoutes: FastifyPluginAsync = async (app) => {
   // --- Repair Tickets ---
@@ -59,7 +65,14 @@ export const repairRoutes: FastifyPluginAsync = async (app) => {
     const { id } = request.params as { id: string }
     const ticket = await RepairTicketService.getById(app.db, id)
     if (!ticket) return reply.status(404).send({ error: { message: 'Repair ticket not found', statusCode: 404 } })
-    return reply.send(ticket)
+
+    let customerEmail: string | null = null
+    if (ticket.accountId) {
+      const [acct] = await app.db.select({ email: accounts.email }).from(accounts).where(eq(accounts.id, ticket.accountId)).limit(1)
+      customerEmail = acct?.email ?? null
+    }
+
+    return reply.send({ ...ticket, customerEmail })
   })
 
   app.patch('/repair-tickets/:id', { preHandler: [app.authenticate, app.requirePermission('repairs.edit')] }, async (request, reply) => {
@@ -84,6 +97,42 @@ export const repairRoutes: FastifyPluginAsync = async (app) => {
     return reply.send(ticket)
   })
 
+  app.post('/repair-tickets/:id/email-estimate', { preHandler: [app.authenticate, app.requirePermission('repairs.view')] }, async (request, reply) => {
+    const { id } = request.params as { id: string }
+    const parsed = z.object({ email: z.string().email() }).safeParse(request.body)
+    if (!parsed.success) {
+      return reply.status(400).send({ error: { message: 'Valid email is required', statusCode: 400 } })
+    }
+
+    // Rate limit: max 5 emails per ticket per hour
+    const rateKey = `email-estimate:${id}`
+    const count = await app.redis.incr(rateKey)
+    if (count === 1) await app.redis.expire(rateKey, 3600)
+    if (count > 5) {
+      return reply.status(429).send({ error: { message: 'Too many emails for this estimate. Try again later.', statusCode: 429 } })
+    }
+
+    const ticket = await RepairTicketService.getById(app.db, id)
+    if (!ticket) return reply.status(404).send({ error: { message: 'Repair ticket not found', statusCode: 404 } })
+
+    const lineItemsResult = await RepairLineItemService.listByTicket(app.db, id, { page: 1, limit: 500 })
+    const [company] = await app.db.select().from(companies).limit(1)
+    if (!company) return reply.status(500).send({ error: { message: 'Store not configured', statusCode: 500 } })
+
+    const html = renderEstimateEmailHtml(ticket as any, lineItemsResult.data as any[], { name: company.name, phone: company.phone, email: company.email, address: company.address as any })
+    const text = renderEstimateEmailText(ticket as any, lineItemsResult.data as any[], { name: company.name, phone: company.phone, email: company.email, address: company.address as any })
+
+    await EmailService.send(app.db, {
+      to: parsed.data.email,
+      subject: `Repair Estimate — Ticket #${ticket.ticketNumber}`,
+      html,
+      text,
+    })
+
+    request.log.info({ ticketId: id, email: parsed.data.email, userId: request.user.id }, 'Estimate email sent')
+    return reply.send({ message: 'Estimate sent', sentTo: parsed.data.email })
+  })
+
   app.delete('/repair-tickets/:id', { preHandler: [app.authenticate, app.requirePermission('repairs.admin')] }, async (request, reply) => {
     const { id } = request.params as { id: string }
     const ticket = await RepairTicketService.delete(app.db, id)

packages/backend/src/routes/v1/transactions.ts

@@ -7,7 +7,11 @@ import {
   ApplyDiscountSchema,
   CompleteTransactionSchema,
 } from '@lunarfront/shared/schemas'
+import { inArray } from 'drizzle-orm'
 import { TransactionService } from '../../services/transaction.service.js'
+import { appConfig } from '../../db/schema/stores.js'
+import { EmailService } from '../../services/email.service.js'
+import { renderReceiptEmailHtml, renderReceiptEmailText } from '../../utils/email-templates.js'
 
 const FromRepairBodySchema = z.object({
   locationId: z.string().uuid().optional(),
@@ -64,6 +68,45 @@ export const transactionRoutes: FastifyPluginAsync = async (app) => {
     return reply.send(receipt)
   })
 
+  app.post('/transactions/:id/email-receipt', { preHandler: [app.authenticate, app.requirePermission('pos.view')] }, async (request, reply) => {
+    const { id } = request.params as { id: string }
+    const parsed = z.object({ email: z.string().email() }).safeParse(request.body)
+    if (!parsed.success) {
+      return reply.status(400).send({ error: { message: 'Valid email is required', statusCode: 400 } })
+    }
+
+    // Rate limit: max 5 emails per transaction per hour
+    const rateKey = `email-receipt:${id}`
+    const count = await app.redis.incr(rateKey)
+    if (count === 1) await app.redis.expire(rateKey, 3600)
+    if (count > 5) {
+      return reply.status(429).send({ error: { message: 'Too many emails for this receipt. Try again later.', statusCode: 429 } })
+    }
+
+    const receipt = await TransactionService.getReceipt(app.db, id)
+    const storeName = receipt.company?.name ?? 'Store'
+
+    // Fetch receipt config
+    const configRows = await app.db.select({ key: appConfig.key, value: appConfig.value })
+      .from(appConfig)
+      .where(inArray(appConfig.key, ['receipt_header', 'receipt_footer', 'receipt_return_policy', 'receipt_social']))
+    const config: Record<string, string> = {}
+    for (const row of configRows) if (row.value) config[row.key] = row.value
+
+    const html = renderReceiptEmailHtml(receipt as any, config)
+    const text = renderReceiptEmailText(receipt as any, config)
+
+    await EmailService.send(app.db, {
+      to: parsed.data.email,
+      subject: `Your receipt from ${storeName} — ${receipt.transaction.transactionNumber}`,
+      html,
+      text,
+    })
+
+    request.log.info({ transactionId: id, email: parsed.data.email, userId: request.user.id }, 'Receipt email sent')
+    return reply.send({ message: 'Receipt sent', sentTo: parsed.data.email })
+  })
+
   app.post('/transactions/:id/line-items', { preHandler: [app.authenticate, app.requirePermission('pos.edit')] }, async (request, reply) => {
     const { id } = request.params as { id: string }
     const parsed = TransactionLineItemCreateSchema.safeParse(request.body)

packages/backend/src/services/email.service.ts

@@ -87,6 +87,21 @@ class SmtpProvider implements EmailProvider {
   }
 }
 
+class TestProvider implements EmailProvider {
+  static lastEmail: SendOpts | null = null
+  static emails: SendOpts[] = []
+
+  async send(opts: SendOpts): Promise<void> {
+    TestProvider.lastEmail = opts
+    TestProvider.emails.push(opts)
+  }
+
+  static reset() {
+    TestProvider.lastEmail = null
+    TestProvider.emails = []
+  }
+}
+
 export const EmailService = {
   async send(db: PostgresJsDatabase<any>, opts: SendOpts): Promise<void> {
     const provider = await SettingsService.get(db, 'email.provider')
@@ -99,8 +114,14 @@ export const EmailService = {
         return new SendGridProvider(db).send(opts)
       case 'smtp':
         return new SmtpProvider().send(opts)
+      case 'test':
+        return new TestProvider().send(opts)
       default:
         throw new Error('Email provider not configured. Set email.provider in app_settings.')
     }
   },
+
+  getTestEmails: () => TestProvider.emails,
+  getLastTestEmail: () => TestProvider.lastEmail,
+  resetTestEmails: () => TestProvider.reset(),
 }

packages/backend/src/services/transaction.service.ts

@@ -10,6 +10,7 @@ import {
 import { products, inventoryUnits } from '../db/schema/inventory.js'
 import { repairTickets, repairLineItems } from '../db/schema/repairs.js'
 import { companies, locations } from '../db/schema/stores.js'
+import { accounts } from '../db/schema/accounts.js'
 import { NotFoundError, ValidationError, ConflictError } from '../lib/errors.js'
 import { TaxService } from './tax.service.js'
 import type {
@@ -473,8 +474,16 @@ export const TransactionService = {
       location = loc ?? null
     }
 
+    // Resolve customer email from linked account
+    let customerEmail: string | null = null
+    if (txn.accountId) {
+      const [acct] = await db.select({ email: accounts.email }).from(accounts).where(eq(accounts.id, txn.accountId)).limit(1)
+      customerEmail = acct?.email ?? null
+    }
+
     return {
       transaction: txn,
+      customerEmail,
       company: company
         ? {
             name: company.name,

packages/backend/src/utils/email-templates.ts

@@ -0,0 +1,319 @@
+/**
+ * Server-side HTML email template renderers for receipts and repair estimates.
+ * Uses inline CSS for email-client compatibility.
+ */
+
+interface Address {
+  street?: string
+  city?: string
+  state?: string
+  zip?: string
+}
+
+interface CompanyInfo {
+  name: string
+  phone?: string | null
+  email?: string | null
+  address?: Address | null
+}
+
+interface ReceiptLineItem {
+  description: string
+  qty: number
+  unitPrice: string
+  taxAmount: string
+  lineTotal: string
+  discountAmount?: string | null
+}
+
+interface ReceiptTransaction {
+  transactionNumber: string
+  subtotal: string
+  discountTotal: string
+  taxTotal: string
+  total: string
+  paymentMethod: string | null
+  amountTendered: string | null
+  changeGiven: string | null
+  roundingAdjustment: string | null
+  completedAt: string | null
+  lineItems: ReceiptLineItem[]
+}
+
+interface ReceiptConfig {
+  receipt_header?: string
+  receipt_footer?: string
+  receipt_return_policy?: string
+  receipt_social?: string
+}
+
+interface ReceiptData {
+  transaction: ReceiptTransaction
+  company: CompanyInfo | null
+  location: CompanyInfo | null
+}
+
+interface RepairLineItem {
+  itemType: string
+  description: string
+  qty: number
+  unitPrice: string
+  totalPrice: string
+}
+
+interface RepairTicket {
+  ticketNumber: string
+  customerName: string
+  customerPhone?: string | null
+  itemDescription?: string | null
+  serialNumber?: string | null
+  problemDescription?: string | null
+  estimatedCost?: string | null
+  promisedDate?: string | null
+  status: string
+}
+
+// ── Shared layout ──────────────────────────────────────────────────────────
+
+function wrapEmailLayout(storeName: string, bodyHtml: string): string {
+  return `
+    <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 480px; margin: 0 auto; padding: 40px 20px; color: #333;">
+      <h2 style="color: #1a1a2e; margin: 0 0 24px 0; font-size: 20px;">${esc(storeName)}</h2>
+      ${bodyHtml}
+      <hr style="border: none; border-top: 1px solid #eee; margin: 32px 0;" />
+      <p style="color: #aaa; font-size: 11px; margin: 0;">Powered by LunarFront</p>
+    </div>
+  `
+}
+
+function esc(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
+}
+
+function formatAddress(addr?: Address | null): string {
+  if (!addr) return ''
+  const parts = [addr.street, [addr.city, addr.state].filter(Boolean).join(', '), addr.zip].filter(Boolean)
+  return parts.join('<br />')
+}
+
+function formatDate(dateStr: string | null): string {
+  if (!dateStr) return ''
+  const d = new Date(dateStr)
+  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit' })
+}
+
+function formatDateOnly(dateStr: string | null): string {
+  if (!dateStr) return ''
+  const d = new Date(dateStr)
+  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+}
+
+const PAYMENT_LABELS: Record<string, string> = {
+  cash: 'Cash',
+  card_present: 'Card',
+  card_keyed: 'Card (Keyed)',
+  check: 'Check',
+  store_credit: 'Store Credit',
+  other: 'Other',
+}
+
+const TYPE_LABELS: Record<string, string> = {
+  labor: 'Labor',
+  part: 'Part',
+  flat_rate: 'Flat Rate',
+  misc: 'Misc',
+  consumable: 'Consumable',
+}
+
+// ── Receipt email ──────────────────────────────────────────────────────────
+
+export function renderReceiptEmailHtml(data: ReceiptData, config?: ReceiptConfig): string {
+  const txn = data.transaction
+  const storeName = data.company?.name ?? 'Store'
+
+  let companyBlock = ''
+  if (data.company) {
+    const addr = formatAddress(data.company.address)
+    companyBlock = `
+      <div style="font-size: 13px; color: #666; margin-bottom: 16px;">
+        ${addr ? `<div>${addr}</div>` : ''}
+        ${data.company.phone ? `<div>${esc(data.company.phone)}</div>` : ''}
+      </div>
+    `
+  }
+
+  const headerText = config?.receipt_header ? `<p style="font-size: 13px; color: #555; margin: 0 0 16px 0;">${esc(config.receipt_header)}</p>` : ''
+
+  const lineRows = txn.lineItems.map(item => `
+    <tr>
+      <td style="padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px;">${esc(item.description)}</td>
+      <td style="padding: 6px 8px; border-bottom: 1px solid #f0f0f0; font-size: 13px; text-align: center;">${item.qty}</td>
+      <td style="padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; text-align: right;">$${item.unitPrice}</td>
+      <td style="padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; text-align: right;">$${item.lineTotal}</td>
+    </tr>
+  `).join('')
+
+  const discountRow = parseFloat(txn.discountTotal) > 0
+    ? `<tr><td style="padding: 4px 0; font-size: 13px;">Discount</td><td style="padding: 4px 0; font-size: 13px; text-align: right; color: #e57373;">-$${txn.discountTotal}</td></tr>`
+    : ''
+
+  const roundingRow = txn.roundingAdjustment && parseFloat(txn.roundingAdjustment) !== 0
+    ? `<tr><td style="padding: 4px 0; font-size: 13px;">Rounding</td><td style="padding: 4px 0; font-size: 13px; text-align: right;">$${txn.roundingAdjustment}</td></tr>`
+    : ''
+
+  const paymentBlock = txn.paymentMethod ? `
+    <div style="margin-top: 16px; font-size: 13px; color: #666;">
+      <div>Paid by: ${PAYMENT_LABELS[txn.paymentMethod] ?? txn.paymentMethod}</div>
+      ${txn.amountTendered && txn.paymentMethod === 'cash' ? `<div>Tendered: $${txn.amountTendered}</div>` : ''}
+      ${txn.changeGiven && parseFloat(txn.changeGiven) > 0 ? `<div>Change: $${txn.changeGiven}</div>` : ''}
+    </div>
+  ` : ''
+
+  const footerText = config?.receipt_footer ? `<p style="font-size: 12px; color: #888; margin: 16px 0 0 0; text-align: center;">${esc(config.receipt_footer)}</p>` : ''
+  const policyText = config?.receipt_return_policy ? `<p style="font-size: 11px; color: #999; margin: 8px 0 0 0; text-align: center;">${esc(config.receipt_return_policy)}</p>` : ''
+  const socialText = config?.receipt_social ? `<p style="font-size: 11px; color: #999; margin: 4px 0 0 0; text-align: center;">${esc(config.receipt_social)}</p>` : ''
+
+  const body = `
+    ${companyBlock}
+    ${headerText}
+    <div style="background: #f9f9f9; border-radius: 8px; padding: 16px; margin-bottom: 16px;">
+      <div style="font-size: 13px; color: #666;">
+        <strong style="color: #333;">Receipt #${esc(txn.transactionNumber)}</strong><br />
+        ${formatDate(txn.completedAt)}
+      </div>
+    </div>
+    <table style="width: 100%; border-collapse: collapse; margin-bottom: 16px;">
+      <thead>
+        <tr style="border-bottom: 2px solid #eee;">
+          <th style="padding: 6px 0; font-size: 12px; text-align: left; color: #888; font-weight: 600;">Item</th>
+          <th style="padding: 6px 8px; font-size: 12px; text-align: center; color: #888; font-weight: 600;">Qty</th>
+          <th style="padding: 6px 0; font-size: 12px; text-align: right; color: #888; font-weight: 600;">Price</th>
+          <th style="padding: 6px 0; font-size: 12px; text-align: right; color: #888; font-weight: 600;">Total</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${lineRows}
+      </tbody>
+    </table>
+    <table style="width: 50%; margin-left: auto; border-collapse: collapse;">
+      <tr><td style="padding: 4px 0; font-size: 13px;">Subtotal</td><td style="padding: 4px 0; font-size: 13px; text-align: right;">$${txn.subtotal}</td></tr>
+      ${discountRow}
+      <tr><td style="padding: 4px 0; font-size: 13px;">Tax</td><td style="padding: 4px 0; font-size: 13px; text-align: right;">$${txn.taxTotal}</td></tr>
+      ${roundingRow}
+      <tr style="border-top: 2px solid #333;"><td style="padding: 8px 0; font-size: 15px; font-weight: 700;">Total</td><td style="padding: 8px 0; font-size: 15px; font-weight: 700; text-align: right;">$${txn.total}</td></tr>
+    </table>
+    ${paymentBlock}
+    ${footerText}
+    ${policyText}
+    ${socialText}
+  `
+
+  return wrapEmailLayout(storeName, body)
+}
+
+export function renderReceiptEmailText(data: ReceiptData, config?: ReceiptConfig): string {
+  const txn = data.transaction
+  const storeName = data.company?.name ?? 'Store'
+  const lines = [
+    storeName,
+    `Receipt #${txn.transactionNumber}`,
+    formatDate(txn.completedAt),
+    '',
+    ...txn.lineItems.map(i => `${i.description} x${i.qty} — $${i.lineTotal}`),
+    '',
+    `Subtotal: $${txn.subtotal}`,
+    ...(parseFloat(txn.discountTotal) > 0 ? [`Discount: -$${txn.discountTotal}`] : []),
+    `Tax: $${txn.taxTotal}`,
+    `Total: $${txn.total}`,
+    '',
+    ...(txn.paymentMethod ? [`Paid by: ${PAYMENT_LABELS[txn.paymentMethod] ?? txn.paymentMethod}`] : []),
+    ...(config?.receipt_footer ? ['', config.receipt_footer] : []),
+  ]
+  return lines.join('\n')
+}
+
+// ── Repair estimate email ──────────────────────────────────────────────────
+
+export function renderEstimateEmailHtml(ticket: RepairTicket, lineItems: RepairLineItem[], company: CompanyInfo): string {
+  const storeName = company.name
+
+  const lineRows = lineItems.map(item => `
+    <tr>
+      <td style="padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px;">${TYPE_LABELS[item.itemType] ?? item.itemType}</td>
+      <td style="padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px;">${esc(item.description)}</td>
+      <td style="padding: 6px 8px; border-bottom: 1px solid #f0f0f0; font-size: 13px; text-align: center;">${item.qty}</td>
+      <td style="padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; text-align: right;">$${item.unitPrice}</td>
+      <td style="padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; text-align: right;">$${item.totalPrice}</td>
+    </tr>
+  `).join('')
+
+  const estimatedTotal = ticket.estimatedCost
+    ? `<tr style="border-top: 2px solid #333;"><td colspan="4" style="padding: 8px 0; font-size: 15px; font-weight: 700;">Estimated Total</td><td style="padding: 8px 0; font-size: 15px; font-weight: 700; text-align: right;">$${ticket.estimatedCost}</td></tr>`
+    : ''
+
+  const lineItemTotal = lineItems.reduce((sum, i) => sum + parseFloat(i.totalPrice), 0).toFixed(2)
+  const lineItemTotalRow = !ticket.estimatedCost && lineItems.length > 0
+    ? `<tr style="border-top: 2px solid #333;"><td colspan="4" style="padding: 8px 0; font-size: 15px; font-weight: 700;">Estimated Total</td><td style="padding: 8px 0; font-size: 15px; font-weight: 700; text-align: right;">$${lineItemTotal}</td></tr>`
+    : ''
+
+  const body = `
+    <div style="background: #f9f9f9; border-radius: 8px; padding: 16px; margin-bottom: 16px;">
+      <div style="font-size: 13px; color: #666;">
+        <strong style="color: #333;">Repair Estimate — Ticket #${esc(ticket.ticketNumber)}</strong><br />
+        ${esc(ticket.customerName)}
+      </div>
+    </div>
+
+    <div style="margin-bottom: 16px; font-size: 13px; color: #555;">
+      ${ticket.itemDescription ? `<div><strong>Item:</strong> ${esc(ticket.itemDescription)}${ticket.serialNumber ? ` (S/N: ${esc(ticket.serialNumber)})` : ''}</div>` : ''}
+      ${ticket.problemDescription ? `<div style="margin-top: 4px;"><strong>Issue:</strong> ${esc(ticket.problemDescription)}</div>` : ''}
+      ${ticket.promisedDate ? `<div style="margin-top: 4px;"><strong>Estimated completion:</strong> ${formatDateOnly(ticket.promisedDate)}</div>` : ''}
+    </div>
+
+    ${lineItems.length > 0 ? `
+      <table style="width: 100%; border-collapse: collapse; margin-bottom: 16px;">
+        <thead>
+          <tr style="border-bottom: 2px solid #eee;">
+            <th style="padding: 6px 0; font-size: 12px; text-align: left; color: #888; font-weight: 600;">Type</th>
+            <th style="padding: 6px 0; font-size: 12px; text-align: left; color: #888; font-weight: 600;">Description</th>
+            <th style="padding: 6px 8px; font-size: 12px; text-align: center; color: #888; font-weight: 600;">Qty</th>
+            <th style="padding: 6px 0; font-size: 12px; text-align: right; color: #888; font-weight: 600;">Price</th>
+            <th style="padding: 6px 0; font-size: 12px; text-align: right; color: #888; font-weight: 600;">Total</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${lineRows}
+          ${estimatedTotal}
+          ${lineItemTotalRow}
+        </tbody>
+      </table>
+    ` : `
+      ${ticket.estimatedCost ? `<div style="font-size: 15px; font-weight: 700; margin-bottom: 16px;">Estimated Cost: $${ticket.estimatedCost}</div>` : ''}
+    `}
+
+    <p style="font-size: 12px; color: #888;">This is an estimate and the final cost may vary. Please contact us with any questions.</p>
+    ${company.phone ? `<p style="font-size: 12px; color: #888; margin-top: 4px;">Phone: ${esc(company.phone)}</p>` : ''}
+  `
+
+  return wrapEmailLayout(storeName, body)
+}
+
+export function renderEstimateEmailText(ticket: RepairTicket, lineItems: RepairLineItem[], company: CompanyInfo): string {
+  const lines = [
+    company.name,
+    `Repair Estimate — Ticket #${ticket.ticketNumber}`,
+    `Customer: ${ticket.customerName}`,
+    '',
+    ...(ticket.itemDescription ? [`Item: ${ticket.itemDescription}${ticket.serialNumber ? ` (S/N: ${ticket.serialNumber})` : ''}`] : []),
+    ...(ticket.problemDescription ? [`Issue: ${ticket.problemDescription}`] : []),
+    ...(ticket.promisedDate ? [`Estimated completion: ${formatDateOnly(ticket.promisedDate)}`] : []),
+    '',
+    ...lineItems.map(i => `${TYPE_LABELS[i.itemType] ?? i.itemType}: ${i.description} x${i.qty} — $${i.totalPrice}`),
+    '',
+    ...(ticket.estimatedCost ? [`Estimated Total: $${ticket.estimatedCost}`] : []),
+    '',
+    'This is an estimate and the final cost may vary.',
+    ...(company.phone ? [`Phone: ${company.phone}`] : []),
+  ]
+  return lines.join('\n')
+}