feat: forced PIN setup modal on all authenticated pages

Replaces the alert banner with a blocking modal dialog that requires users to set a PIN before they can use the app. Cannot be dismissed. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
fix: remove unused Link import from profile page
2026-04-05 20:01:14 +00:00 · 2026-04-05 19:57:31 +00:00 · 2026-04-05 19:51:39 +00:00 · 2026-04-05 19:41:36 +00:00 · 2026-04-05 17:38:53 +00:00 · 2026-04-05 17:19:53 +00:00
22 changed files with 1044 additions and 157 deletions
--- a/.gitea/workflows/ci.yml
+++ b/.gitea/workflows/ci.yml
@@ -21,6 +21,10 @@ jobs:
      - name: Install dependencies
        run: bun install --frozen-lockfile

+      - name: Generate route tree
+        working-directory: packages/admin
+        run: bunx @tanstack/router-cli generate
+
      - name: Lint
        run: bun run lint

--- a/Dockerfile.frontend
+++ b/Dockerfile.frontend
@@ -16,6 +16,7 @@ COPY packages/admin ./packages/admin
 COPY package.json ./
 COPY tsconfig.base.json ./
 WORKDIR /app/packages/admin
+RUN bunx @tanstack/router-cli generate
 RUN bun run build

 FROM nginx:alpine
--- a/chart/templates/backend-deployment.yaml
+++ b/chart/templates/backend-deployment.yaml
@@ -93,18 +93,14 @@ spec:
                secretKeyRef:
                  name: lunarfront-secrets
                  key: business-name
+            - name: APP_URL
+              value: "https://{{ .Values.ingress.host }}"
            - name: INITIAL_USER_EMAIL
              valueFrom:
                secretKeyRef:
                  name: lunarfront-secrets
                  key: initial-user-email
                  optional: true
-            - name: INITIAL_USER_PASSWORD
-              valueFrom:
-                secretKeyRef:
-                  name: lunarfront-secrets
-                  key: initial-user-password
-                  optional: true
            - name: INITIAL_USER_FIRST_NAME
              valueFrom:
                secretKeyRef:
--- a/packages/admin/src/api/auth.ts
+++ b/packages/admin/src/api/auth.ts
@@ -14,3 +14,11 @@ interface LoginResponse {
 export async function login(email: string, password: string): Promise<LoginResponse> {
  return api.post<LoginResponse>('/v1/auth/login', { email, password })
 }
+
+export async function forgotPassword(email: string): Promise<{ message: string }> {
+  return api.post<{ message: string }>('/v1/auth/forgot-password', { email })
+}
+
+export async function resetPassword(token: string, newPassword: string): Promise<{ message: string }> {
+  return api.post<{ message: string }>('/v1/auth/reset-password', { token, newPassword })
+}
--- a/packages/admin/src/components/pos/pos-cart-panel.tsx
+++ b/packages/admin/src/components/pos/pos-cart-panel.tsx
@@ -4,7 +4,6 @@ import { posMutations, posKeys, type Transaction } from '@/api/pos'
 import { Button } from '@/components/ui/button'
 import { Separator } from '@/components/ui/separator'
 import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { X, Banknote, CreditCard, FileText, Ban, UserRound, Tag } from 'lucide-react'
 import { toast } from 'sonner'
--- a/packages/admin/src/components/pos/pos-receipt.tsx
+++ b/packages/admin/src/components/pos/pos-receipt.tsx
@@ -100,7 +100,6 @@ function useStoreLogo(companyId?: string) {
 }

 export function POSReceipt({ data, size = 'thermal', footerText, config }: POSReceiptProps) {
-  const { transaction: txn, company, location } = data
  const isThermal = size === 'thermal'

  if (!isThermal) {
--- a/packages/admin/src/components/ui/alert.tsx
+++ b/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 }
--- a/packages/admin/src/routeTree.gen.ts
+++ b/packages/admin/src/routeTree.gen.ts
@@ -9,6 +9,7 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.

 import { Route as rootRouteImport } from './routes/__root'
+import { Route as ResetPasswordRouteImport } from './routes/reset-password'
 import { Route as PosRouteImport } from './routes/pos'
 import { Route as LoginRouteImport } from './routes/login'
 import { Route as AuthenticatedRouteImport } from './routes/_authenticated'
@@ -27,6 +28,7 @@ import { Route as AuthenticatedFilesIndexRouteImport } from './routes/_authentic
 import { Route as AuthenticatedAccountsIndexRouteImport } from './routes/_authenticated/accounts/index'
 import { Route as AuthenticatedRolesNewRouteImport } from './routes/_authenticated/roles/new'
 import { Route as AuthenticatedRolesRoleIdRouteImport } from './routes/_authenticated/roles/$roleId'
+import { Route as AuthenticatedReportsDailyRouteImport } from './routes/_authenticated/reports/daily'
 import { Route as AuthenticatedRepairsTemplatesRouteImport } from './routes/_authenticated/repairs/templates'
 import { Route as AuthenticatedRepairsNewRouteImport } from './routes/_authenticated/repairs/new'
 import { Route as AuthenticatedRepairsTicketIdRouteImport } from './routes/_authenticated/repairs/$ticketId'
@@ -57,6 +59,11 @@ import { Route as AuthenticatedAccountsAccountIdMembersRouteImport } from './rou
 import { Route as AuthenticatedAccountsAccountIdEnrollmentsRouteImport } from './routes/_authenticated/accounts/$accountId/enrollments'
 import { Route as AuthenticatedLessonsScheduleInstructorsInstructorIdRouteImport } from './routes/_authenticated/lessons/schedule/instructors/$instructorId'

+const ResetPasswordRoute = ResetPasswordRouteImport.update({
+  id: '/reset-password',
+  path: '/reset-password',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const PosRoute = PosRouteImport.update({
  id: '/pos',
  path: '/pos',
@@ -152,6 +159,12 @@ const AuthenticatedRolesRoleIdRoute =
    path: '/roles/$roleId',
    getParentRoute: () => AuthenticatedRoute,
  } as any)
+const AuthenticatedReportsDailyRoute =
+  AuthenticatedReportsDailyRouteImport.update({
+    id: '/reports/daily',
+    path: '/reports/daily',
+    getParentRoute: () => AuthenticatedRoute,
+  } as any)
 const AuthenticatedRepairsTemplatesRoute =
  AuthenticatedRepairsTemplatesRouteImport.update({
    id: '/repairs/templates',
@@ -330,6 +343,7 @@ export interface FileRoutesByFullPath {
  '/': typeof AuthenticatedIndexRoute
  '/login': typeof LoginRoute
  '/pos': typeof PosRoute
+  '/reset-password': typeof ResetPasswordRoute
  '/help': typeof AuthenticatedHelpRoute
  '/profile': typeof AuthenticatedProfileRoute
  '/settings': typeof AuthenticatedSettingsRoute
@@ -344,6 +358,7 @@ export interface FileRoutesByFullPath {
  '/repairs/$ticketId': typeof AuthenticatedRepairsTicketIdRoute
  '/repairs/new': typeof AuthenticatedRepairsNewRoute
  '/repairs/templates': typeof AuthenticatedRepairsTemplatesRoute
+  '/reports/daily': typeof AuthenticatedReportsDailyRoute
  '/roles/$roleId': typeof AuthenticatedRolesRoleIdRoute
  '/roles/new': typeof AuthenticatedRolesNewRoute
  '/accounts/': typeof AuthenticatedAccountsIndexRoute
@@ -377,6 +392,7 @@ export interface FileRoutesByFullPath {
 export interface FileRoutesByTo {
  '/login': typeof LoginRoute
  '/pos': typeof PosRoute
+  '/reset-password': typeof ResetPasswordRoute
  '/help': typeof AuthenticatedHelpRoute
  '/profile': typeof AuthenticatedProfileRoute
  '/settings': typeof AuthenticatedSettingsRoute
@@ -391,6 +407,7 @@ export interface FileRoutesByTo {
  '/repairs/$ticketId': typeof AuthenticatedRepairsTicketIdRoute
  '/repairs/new': typeof AuthenticatedRepairsNewRoute
  '/repairs/templates': typeof AuthenticatedRepairsTemplatesRoute
+  '/reports/daily': typeof AuthenticatedReportsDailyRoute
  '/roles/$roleId': typeof AuthenticatedRolesRoleIdRoute
  '/roles/new': typeof AuthenticatedRolesNewRoute
  '/accounts': typeof AuthenticatedAccountsIndexRoute
@@ -426,6 +443,7 @@ export interface FileRoutesById {
  '/_authenticated': typeof AuthenticatedRouteWithChildren
  '/login': typeof LoginRoute
  '/pos': typeof PosRoute
+  '/reset-password': typeof ResetPasswordRoute
  '/_authenticated/help': typeof AuthenticatedHelpRoute
  '/_authenticated/profile': typeof AuthenticatedProfileRoute
  '/_authenticated/settings': typeof AuthenticatedSettingsRoute
@@ -441,6 +459,7 @@ export interface FileRoutesById {
  '/_authenticated/repairs/$ticketId': typeof AuthenticatedRepairsTicketIdRoute
  '/_authenticated/repairs/new': typeof AuthenticatedRepairsNewRoute
  '/_authenticated/repairs/templates': typeof AuthenticatedRepairsTemplatesRoute
+  '/_authenticated/reports/daily': typeof AuthenticatedReportsDailyRoute
  '/_authenticated/roles/$roleId': typeof AuthenticatedRolesRoleIdRoute
  '/_authenticated/roles/new': typeof AuthenticatedRolesNewRoute
  '/_authenticated/accounts/': typeof AuthenticatedAccountsIndexRoute
@@ -477,6 +496,7 @@ export interface FileRouteTypes {
    | '/'
    | '/login'
    | '/pos'
+    | '/reset-password'
    | '/help'
    | '/profile'
    | '/settings'
@@ -491,6 +511,7 @@ export interface FileRouteTypes {
    | '/repairs/$ticketId'
    | '/repairs/new'
    | '/repairs/templates'
+    | '/reports/daily'
    | '/roles/$roleId'
    | '/roles/new'
    | '/accounts/'
@@ -524,6 +545,7 @@ export interface FileRouteTypes {
  to:
    | '/login'
    | '/pos'
+    | '/reset-password'
    | '/help'
    | '/profile'
    | '/settings'
@@ -538,6 +560,7 @@ export interface FileRouteTypes {
    | '/repairs/$ticketId'
    | '/repairs/new'
    | '/repairs/templates'
+    | '/reports/daily'
    | '/roles/$roleId'
    | '/roles/new'
    | '/accounts'
@@ -572,6 +595,7 @@ export interface FileRouteTypes {
    | '/_authenticated'
    | '/login'
    | '/pos'
+    | '/reset-password'
    | '/_authenticated/help'
    | '/_authenticated/profile'
    | '/_authenticated/settings'
@@ -587,6 +611,7 @@ export interface FileRouteTypes {
    | '/_authenticated/repairs/$ticketId'
    | '/_authenticated/repairs/new'
    | '/_authenticated/repairs/templates'
+    | '/_authenticated/reports/daily'
    | '/_authenticated/roles/$roleId'
    | '/_authenticated/roles/new'
    | '/_authenticated/accounts/'
@@ -622,10 +647,18 @@ export interface RootRouteChildren {
  AuthenticatedRoute: typeof AuthenticatedRouteWithChildren
  LoginRoute: typeof LoginRoute
  PosRoute: typeof PosRoute
+  ResetPasswordRoute: typeof ResetPasswordRoute
 }

 declare module '@tanstack/react-router' {
  interface FileRoutesByPath {
+    '/reset-password': {
+      id: '/reset-password'
+      path: '/reset-password'
+      fullPath: '/reset-password'
+      preLoaderRoute: typeof ResetPasswordRouteImport
+      parentRoute: typeof rootRouteImport
+    }
    '/pos': {
      id: '/pos'
      path: '/pos'
@@ -752,6 +785,13 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof AuthenticatedRolesRoleIdRouteImport
      parentRoute: typeof AuthenticatedRoute
    }
+    '/_authenticated/reports/daily': {
+      id: '/_authenticated/reports/daily'
+      path: '/reports/daily'
+      fullPath: '/reports/daily'
+      preLoaderRoute: typeof AuthenticatedReportsDailyRouteImport
+      parentRoute: typeof AuthenticatedRoute
+    }
    '/_authenticated/repairs/templates': {
      id: '/_authenticated/repairs/templates'
      path: '/repairs/templates'
@@ -1004,6 +1044,7 @@ interface AuthenticatedRouteChildren {
  AuthenticatedRepairsTicketIdRoute: typeof AuthenticatedRepairsTicketIdRoute
  AuthenticatedRepairsNewRoute: typeof AuthenticatedRepairsNewRoute
  AuthenticatedRepairsTemplatesRoute: typeof AuthenticatedRepairsTemplatesRoute
+  AuthenticatedReportsDailyRoute: typeof AuthenticatedReportsDailyRoute
  AuthenticatedRolesRoleIdRoute: typeof AuthenticatedRolesRoleIdRoute
  AuthenticatedRolesNewRoute: typeof AuthenticatedRolesNewRoute
  AuthenticatedAccountsIndexRoute: typeof AuthenticatedAccountsIndexRoute
@@ -1047,6 +1088,7 @@ const AuthenticatedRouteChildren: AuthenticatedRouteChildren = {
  AuthenticatedRepairsTicketIdRoute: AuthenticatedRepairsTicketIdRoute,
  AuthenticatedRepairsNewRoute: AuthenticatedRepairsNewRoute,
  AuthenticatedRepairsTemplatesRoute: AuthenticatedRepairsTemplatesRoute,
+  AuthenticatedReportsDailyRoute: AuthenticatedReportsDailyRoute,
  AuthenticatedRolesRoleIdRoute: AuthenticatedRolesRoleIdRoute,
  AuthenticatedRolesNewRoute: AuthenticatedRolesNewRoute,
  AuthenticatedAccountsIndexRoute: AuthenticatedAccountsIndexRoute,
@@ -1090,6 +1132,7 @@ const rootRouteChildren: RootRouteChildren = {
  AuthenticatedRoute: AuthenticatedRouteWithChildren,
  LoginRoute: LoginRoute,
  PosRoute: PosRoute,
+  ResetPasswordRoute: ResetPasswordRoute,
 }
 export const routeTree = rootRouteImport
  ._addFileChildren(rootRouteChildren)
--- a/packages/admin/src/routes/__root.tsx
+++ b/packages/admin/src/routes/__root.tsx
@@ -1,11 +1,29 @@
 import { createRootRoute, Outlet } from '@tanstack/react-router'
 import { Toaster } from 'sonner'
+import { useEffect } from 'react'

 export const Route = createRootRoute({
  component: RootLayout,
 })

 function RootLayout() {
+  useEffect(() => {
+    fetch('/v1/store/branding')
+      .then((r) => r.ok ? r.json() : null)
+      .then((data: { name: string | null; hasLogo: boolean } | null) => {
+        if (!data) return
+        if (data.name) document.title = data.name
+        if (data.hasLogo) {
+          const link = document.querySelector<HTMLLinkElement>('link[rel="icon"]')
+            ?? document.createElement('link')
+          link.rel = 'icon'
+          link.href = '/v1/store/logo'
+          document.head.appendChild(link)
+        }
+      })
+      .catch(() => {})
+  }, [])
+
  return (
    <>
      <Outlet />
--- a/packages/admin/src/routes/_authenticated.tsx
+++ b/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>
--- a/packages/admin/src/routes/_authenticated/profile.tsx
+++ b/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>
  )
 }
--- a/packages/admin/src/routes/login.tsx
+++ b/packages/admin/src/routes/login.tsx
@@ -1,7 +1,12 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { createFileRoute, useRouter, redirect } from '@tanstack/react-router'
 import { useAuthStore } from '@/stores/auth.store'
-import { login } from '@/api/auth'
+import { login, forgotPassword } from '@/api/auth'
+
+interface Branding {
+  name: string | null
+  hasLogo: boolean
+}

 export const Route = createFileRoute('/login')({
  beforeLoad: () => {
@@ -20,6 +25,16 @@ function LoginPage() {
  const [password, setPassword] = useState('')
  const [error, setError] = useState('')
  const [loading, setLoading] = useState(false)
+  const [branding, setBranding] = useState<Branding | null>(null)
+  const [forgotMode, setForgotMode] = useState(false)
+  const [forgotSent, setForgotSent] = useState(false)
+
+  useEffect(() => {
+    fetch('/v1/store/branding')
+      .then((r) => r.ok ? r.json() : null)
+      .then((data) => { if (data) setBranding(data) })
+      .catch(() => {})
+  }, [])

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
@@ -48,9 +63,81 @@ function LoginPage() {
        style={{ backgroundColor: '#131c2e', borderColor: '#1e2d45' }}
      >
        <div className="text-center mb-8">
-          <h1 className="text-3xl font-bold" style={{ color: '#d8dfe9' }}>LunarFront</h1>
+          {branding?.hasLogo ? (
+            <img src="/v1/store/logo" alt={branding.name ?? 'Store'} className="max-h-14 max-w-[220px] object-contain mx-auto" />
+          ) : (
+            <h1 className="text-3xl font-bold" style={{ color: '#d8dfe9' }}>{branding?.name ?? 'LunarFront'}</h1>
+          )}
+          {branding?.name ? (
+            <p className="text-[10px] mt-2" style={{ color: '#4a5568' }}>Powered by <span style={{ color: '#6b7a8d' }}>LunarFront</span></p>
+          ) : (
            <p className="text-sm mt-1" style={{ color: '#6b7a8d' }}>Small Business Management</p>
+          )}
        </div>
+        {forgotMode ? (
+          forgotSent ? (
+            <div className="text-center space-y-4">
+              <p className="text-sm" style={{ color: '#b0bec5' }}>If an account exists with that email, you will receive a password reset link.</p>
+              <button
+                onClick={() => { setForgotMode(false); setForgotSent(false); setError('') }}
+                className="text-xs"
+                style={{ color: '#6b7a8d' }}
+              >
+                Back to sign in
+              </button>
+            </div>
+          ) : (
+            <form onSubmit={async (e) => {
+              e.preventDefault()
+              setError('')
+              setLoading(true)
+              try {
+                await forgotPassword(email)
+                setForgotSent(true)
+              } catch (err) {
+                setError(err instanceof Error ? err.message : 'Something went wrong')
+              } finally {
+                setLoading(false)
+              }
+            }} className="space-y-4">
+              <p className="text-sm" style={{ color: '#b0bec5' }}>Enter your email and we'll send you a reset link.</p>
+              <div className="space-y-2">
+                <label className="text-sm font-medium" style={{ color: '#b0bec5' }}>Email</label>
+                <input
+                  type="email"
+                  placeholder="you@example.com"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  required
+                  className="h-9 w-full rounded-md border px-3 py-1 text-sm outline-none login-input"
+                />
+              </div>
+              {error && (
+                <p className="text-sm" style={{ color: '#e57373' }}>{error}</p>
+              )}
+              <button
+                type="submit"
+                disabled={loading}
+                className="h-9 w-full rounded-md border text-sm font-medium transition-colors disabled:opacity-50"
+                style={{ backgroundColor: 'transparent', color: '#d0d8e0', borderColor: '#3a4a62' }}
+                onMouseEnter={(e) => { (e.target as HTMLElement).style.backgroundColor = '#1e2d45' }}
+                onMouseLeave={(e) => { (e.target as HTMLElement).style.backgroundColor = 'transparent' }}
+              >
+                {loading ? 'Sending...' : 'Send reset link'}
+              </button>
+              <div className="text-center">
+                <button
+                  type="button"
+                  onClick={() => { setForgotMode(false); setError('') }}
+                  className="text-xs"
+                  style={{ color: '#6b7a8d' }}
+                >
+                  Back to sign in
+                </button>
+              </div>
+            </form>
+          )
+        ) : (
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <label className="text-sm font-medium" style={{ color: '#b0bec5' }}>Email</label>
@@ -86,7 +173,18 @@ function LoginPage() {
            >
              {loading ? 'Signing in...' : 'Sign in'}
            </button>
+            <div className="text-center">
+              <button
+                type="button"
+                onClick={() => { setForgotMode(true); setError('') }}
+                className="text-xs"
+                style={{ color: '#6b7a8d' }}
+              >
+                Forgot password?
+              </button>
+            </div>
          </form>
+        )}
      </div>
    </div>
  )
--- a/packages/admin/src/routes/reset-password.tsx
+++ b/packages/admin/src/routes/reset-password.tsx
@@ -0,0 +1,154 @@
+import { useState, useEffect } from 'react'
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { resetPassword } from '@/api/auth'
+
+interface Branding {
+  name: string | null
+  hasLogo: boolean
+}
+
+export const Route = createFileRoute('/reset-password')({
+  component: ResetPasswordPage,
+})
+
+function ResetPasswordPage() {
+  const { token } = Route.useSearch() as { token?: string }
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [success, setSuccess] = useState(false)
+  const [branding, setBranding] = useState<Branding | null>(null)
+
+  useEffect(() => {
+    fetch('/v1/store/branding')
+      .then((r) => r.ok ? r.json() : null)
+      .then((data) => { if (data) setBranding(data) })
+      .catch(() => {})
+  }, [])
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setError('')
+
+    if (!token) {
+      setError('Missing reset token. Please use the link from your email.')
+      return
+    }
+
+    if (password !== confirmPassword) {
+      setError('Passwords do not match')
+      return
+    }
+
+    if (password.length < 12) {
+      setError('Password must be at least 12 characters')
+      return
+    }
+
+    setLoading(true)
+    try {
+      await resetPassword(token, password)
+      setSuccess(true)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Reset failed. The link may have expired.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div
+      className="flex min-h-screen items-center justify-center"
+      style={{ background: 'linear-gradient(135deg, #0f1724 0%, #142038 100%)' }}
+    >
+      <div
+        className="w-full max-w-sm rounded-xl border p-8 shadow-2xl"
+        style={{ backgroundColor: '#131c2e', borderColor: '#1e2d45' }}
+      >
+        <div className="text-center mb-8">
+          {branding?.hasLogo ? (
+            <img src="/v1/store/logo" alt={branding.name ?? 'Store'} className="max-h-14 max-w-[220px] object-contain mx-auto" />
+          ) : (
+            <h1 className="text-3xl font-bold" style={{ color: '#d8dfe9' }}>{branding?.name ?? 'LunarFront'}</h1>
+          )}
+          {branding?.name ? (
+            <p className="text-[10px] mt-2" style={{ color: '#4a5568' }}>Powered by <span style={{ color: '#6b7a8d' }}>LunarFront</span></p>
+          ) : (
+            <p className="text-sm mt-1" style={{ color: '#6b7a8d' }}>Small Business Management</p>
+          )}
+        </div>
+
+        {success ? (
+          <div className="text-center space-y-4">
+            <p style={{ color: '#81c784' }}>Password reset successfully.</p>
+            <Link
+              to="/login"
+              className="inline-block h-9 rounded-md border px-4 py-2 text-sm font-medium transition-colors"
+              style={{ color: '#d0d8e0', borderColor: '#3a4a62' }}
+            >
+              Sign in
+            </Link>
+          </div>
+        ) : !token ? (
+          <div className="text-center space-y-4">
+            <p style={{ color: '#e57373' }}>Invalid reset link. Please request a new one.</p>
+            <Link
+              to="/login"
+              className="inline-block h-9 rounded-md border px-4 py-2 text-sm font-medium transition-colors"
+              style={{ color: '#d0d8e0', borderColor: '#3a4a62' }}
+            >
+              Back to sign in
+            </Link>
+          </div>
+        ) : (
+          <>
+            <h2 className="text-lg font-semibold text-center mb-4" style={{ color: '#d8dfe9' }}>Set new password</h2>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div className="space-y-2">
+                <label className="text-sm font-medium" style={{ color: '#b0bec5' }}>New password</label>
+                <input
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                  minLength={12}
+                  placeholder="At least 12 characters"
+                  className="h-9 w-full rounded-md border px-3 py-1 text-sm outline-none login-input"
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium" style={{ color: '#b0bec5' }}>Confirm password</label>
+                <input
+                  type="password"
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  required
+                  className="h-9 w-full rounded-md border px-3 py-1 text-sm outline-none login-input"
+                />
+              </div>
+              {error && (
+                <p className="text-sm" style={{ color: '#e57373' }}>{error}</p>
+              )}
+              <button
+                type="submit"
+                disabled={loading}
+                className="h-9 w-full rounded-md border text-sm font-medium transition-colors disabled:opacity-50"
+                style={{ backgroundColor: 'transparent', color: '#d0d8e0', borderColor: '#3a4a62' }}
+                onMouseEnter={(e) => { (e.target as HTMLElement).style.backgroundColor = '#1e2d45' }}
+                onMouseLeave={(e) => { (e.target as HTMLElement).style.backgroundColor = 'transparent' }}
+              >
+                {loading ? 'Resetting...' : 'Reset password'}
+              </button>
+              <div className="text-center">
+                <Link to="/login" className="text-xs" style={{ color: '#6b7a8d' }}>
+                  Back to sign in
+                </Link>
+              </div>
+            </form>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
--- a/packages/backend/src/db/migrations/0046_auto-employee-number.sql
+++ b/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 $$;
--- a/packages/backend/src/db/migrations/meta/_journal.json
+++ b/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
    }
  ]
 }
--- a/packages/backend/src/main.ts
+++ b/packages/backend/src/main.ts
@@ -37,22 +37,66 @@ 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'

 async function seedInitialUser(app: Awaited<ReturnType<typeof buildApp>>) {
  const email = process.env.INITIAL_USER_EMAIL
-  const password = process.env.INITIAL_USER_PASSWORD
  const firstName = process.env.INITIAL_USER_FIRST_NAME
  const lastName = process.env.INITIAL_USER_LAST_NAME
-  if (!email || !password || !firstName || !lastName) return
+  if (!email || !firstName || !lastName) return

  const existing = await app.db.select({ id: users.id }).from(users).limit(1)
  if (existing.length > 0) return

-  const passwordHash = await bcrypt.hash(password, 10)
-  await app.db.insert(users).values({ email, passwordHash, firstName, lastName, role: 'admin' })
+  // Create user with a random password — they'll set their real one via the welcome email
+  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
+  try {
+    const resetToken = app.jwt.sign({ userId: user.id, purpose: 'password-reset' } as any, { expiresIn: '4h' })
+    const appUrl = process.env.APP_URL ?? `https://${process.env.HOSTNAME ?? 'localhost'}`
+    const resetLink = `${appUrl}/reset-password?token=${resetToken}`
+
+    const [store] = await app.db.select({ name: companies.name }).from(companies).limit(1)
+    const storeName = store?.name ?? process.env.BUSINESS_NAME ?? 'LunarFront'
+
+    await EmailService.send(app.db, {
+      to: email,
+      subject: `Welcome to ${storeName} — Set your password`,
+      html: `
+        <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 480px; margin: 0 auto; padding: 40px 20px;">
+          <h2 style="color: #1a1a2e; margin-bottom: 8px;">${storeName}</h2>
+          <p style="color: #555; margin-bottom: 24px;">Hi ${firstName},</p>
+          <p style="color: #555;">Your account has been created. Click the button below to set your password and get started:</p>
+          <div style="text-align: center; margin: 32px 0;">
+            <a href="${resetLink}" style="background-color: #1a1a2e; color: #fff; padding: 12px 32px; border-radius: 6px; text-decoration: none; font-weight: 500;">Set Your Password</a>
+          </div>
+          <p style="color: #888; font-size: 13px;">This link expires in 4 hours. If it expires, you can request a new one from the login page.</p>
+          <hr style="border: none; border-top: 1px solid #eee; margin: 32px 0;" />
+          <p style="color: #aaa; font-size: 11px;">Powered by LunarFront</p>
+        </div>
+      `,
+      text: `Hi ${firstName}, welcome to ${storeName}! Set your password here: ${resetLink} — This link expires in 4 hours.`,
+    })
+    app.log.info({ email }, 'Welcome email sent to initial user')
+  } catch (err) {
+    app.log.error({ email, error: (err as Error).message }, 'Failed to send welcome email — user can use forgot password')
+  }
 }

 async function seedEmailSettings(app: Awaited<ReturnType<typeof buildApp>>) {
@@ -73,6 +117,17 @@ async function seedEmailSettings(app: Awaited<ReturnType<typeof buildApp>>) {
  app.log.info('Email settings seeded from environment')
 }

+async function seedCompany(app: Awaited<ReturnType<typeof buildApp>>) {
+  const name = process.env.BUSINESS_NAME
+  if (!name) return
+
+  const existing = await app.db.select({ id: companies.id }).from(companies).limit(1)
+  if (existing.length > 0) return
+
+  await app.db.insert(companies).values({ name })
+  app.log.info({ name }, 'Company seeded from environment')
+}
+
 export async function buildApp() {
  const app = Fastify({
    logger: {
@@ -209,6 +264,11 @@ export async function buildApp() {
    } catch (err) {
      app.log.error({ err }, 'Failed to seed email settings')
    }
+    try {
+      await seedCompany(app)
+    } catch (err) {
+      app.log.error({ err }, 'Failed to seed company')
+    }
  })

  return app
--- a/packages/backend/src/routes/v1/auth.ts
+++ b/packages/backend/src/routes/v1/auth.ts
@@ -1,8 +1,10 @@
 import type { FastifyPluginAsync } from 'fastify'
 import { eq } from 'drizzle-orm'
 import bcrypt from 'bcryptjs'
-import { RegisterSchema, LoginSchema, PinLoginSchema, SetPinSchema } from '@lunarfront/shared/schemas'
+import { RegisterSchema, LoginSchema, PinLoginSchema, SetPinSchema, ForgotPasswordSchema, ResetPasswordSchema } from '@lunarfront/shared/schemas'
 import { users } from '../../db/schema/users.js'
+import { companies } from '../../db/schema/stores.js'
+import { EmailService } from '../../services/email.service.js'

 const SALT_ROUNDS = 10

@@ -151,24 +153,22 @@ export const authRoutes: FastifyPluginAsync = async (app) => {
    const [user] = await app.db.select({ id: users.id, email: users.email }).from(users).where(eq(users.id, userId)).limit(1)
    if (!user) return reply.status(404).send({ error: { message: 'User not found', statusCode: 404 } })

-    // Generate a signed reset token that expires in 1 hour
-    const resetToken = app.jwt.sign({ userId: user.id, purpose: 'password-reset' } as any, { expiresIn: '1h' })
+    const resetToken = app.jwt.sign({ userId: user.id, purpose: 'password-reset' } as any, { expiresIn: '4h' })
    const resetLink = `${process.env.APP_URL ?? 'http://localhost:5173'}/reset-password?token=${resetToken}`

    request.log.info({ userId, generatedBy: request.user.id }, 'Password reset link generated')
-    return reply.send({ resetLink, expiresIn: '1 hour' })
+    return reply.send({ resetLink, expiresIn: '4 hours' })
  })

  // Reset password with token
  app.post('/auth/reset-password', async (request, reply) => {
-    const { token, newPassword } = request.body as { token?: string; newPassword?: string }
-    if (!token || !newPassword) {
-      return reply.status(400).send({ error: { message: 'token and newPassword are required', statusCode: 400 } })
-    }
-    if (newPassword.length < 12) {
-      return reply.status(400).send({ error: { message: 'Password must be at least 12 characters', statusCode: 400 } })
+    const parsed = ResetPasswordSchema.safeParse(request.body)
+    if (!parsed.success) {
+      return reply.status(400).send({ error: { message: 'Validation failed', details: parsed.error.flatten(), statusCode: 400 } })
    }

+    const { token, newPassword } = parsed.data
+
    try {
      const payload = app.jwt.verify<{ userId: string; purpose: string }>(token)
      if (payload.purpose !== 'password-reset') {
@@ -185,6 +185,86 @@ export const authRoutes: FastifyPluginAsync = async (app) => {
    }
  })

+  // Forgot password / resend welcome — public, always returns success (no user enumeration)
+  // Pass ?type=welcome for welcome emails, defaults to reset
+  app.post('/auth/forgot-password', rateLimitConfig, async (request, reply) => {
+    const parsed = ForgotPasswordSchema.safeParse(request.body)
+    if (!parsed.success) {
+      return reply.status(400).send({ error: { message: 'Validation failed', details: parsed.error.flatten(), statusCode: 400 } })
+    }
+
+    const { email } = parsed.data
+    const isWelcome = (request.query as { type?: string }).type === 'welcome'
+
+    // Rate limit per email — max 3 emails per hour
+    const emailKey = `pwd-reset:${email.toLowerCase()}`
+    const count = await app.redis.incr(emailKey)
+    if (count === 1) await app.redis.expire(emailKey, 3600)
+    if (count > 3) {
+      return reply.send({ message: 'If an account exists with that email, you will receive an email.' })
+    }
+
+    // Always return success — don't reveal whether the email exists
+    const [user] = await app.db.select({ id: users.id, firstName: users.firstName }).from(users).where(eq(users.email, email)).limit(1)
+
+    if (user) {
+      try {
+        const resetToken = app.jwt.sign({ userId: user.id, purpose: 'password-reset' } as any, { expiresIn: '4h' })
+        const appUrl = process.env.APP_URL ?? 'http://localhost:5173'
+        const resetLink = `${appUrl}/reset-password?token=${resetToken}`
+
+        const [store] = await app.db.select({ name: companies.name }).from(companies).limit(1)
+        const storeName = store?.name ?? 'LunarFront'
+
+        if (isWelcome) {
+          await EmailService.send(app.db, {
+            to: email,
+            subject: `Welcome to ${storeName} — Set your password`,
+            html: `
+              <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 480px; margin: 0 auto; padding: 40px 20px;">
+                <h2 style="color: #1a1a2e; margin-bottom: 8px;">${storeName}</h2>
+                <p style="color: #555; margin-bottom: 24px;">Hi ${user.firstName},</p>
+                <p style="color: #555;">Your account has been created. Click the button below to set your password and get started:</p>
+                <div style="text-align: center; margin: 32px 0;">
+                  <a href="${resetLink}" style="background-color: #1a1a2e; color: #fff; padding: 12px 32px; border-radius: 6px; text-decoration: none; font-weight: 500;">Set Your Password</a>
+                </div>
+                <p style="color: #888; font-size: 13px;">This link expires in 4 hours. If it expires, you can request a new one from the login page.</p>
+                <hr style="border: none; border-top: 1px solid #eee; margin: 32px 0;" />
+                <p style="color: #aaa; font-size: 11px;">Powered by LunarFront</p>
+              </div>
+            `,
+            text: `Hi ${user.firstName}, welcome to ${storeName}! Set your password here: ${resetLink} — This link expires in 4 hours.`,
+          })
+        } else {
+          await EmailService.send(app.db, {
+            to: email,
+            subject: `Reset your password — ${storeName}`,
+            html: `
+              <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 480px; margin: 0 auto; padding: 40px 20px;">
+                <h2 style="color: #1a1a2e; margin-bottom: 8px;">${storeName}</h2>
+                <p style="color: #555; margin-bottom: 24px;">Hi ${user.firstName},</p>
+                <p style="color: #555;">We received a request to reset your password. Click the button below to choose a new one:</p>
+                <div style="text-align: center; margin: 32px 0;">
+                  <a href="${resetLink}" style="background-color: #1a1a2e; color: #fff; padding: 12px 32px; border-radius: 6px; text-decoration: none; font-weight: 500;">Reset Password</a>
+                </div>
+                <p style="color: #888; font-size: 13px;">This link expires in 4 hours. If you didn't request this, you can safely ignore this email.</p>
+                <hr style="border: none; border-top: 1px solid #eee; margin: 32px 0;" />
+                <p style="color: #aaa; font-size: 11px;">Powered by LunarFront</p>
+              </div>
+            `,
+            text: `Hi ${user.firstName}, reset your password here: ${resetLink} — This link expires in 4 hours.`,
+          })
+        }
+
+        request.log.info({ userId: user.id, type: isWelcome ? 'welcome' : 'reset' }, 'Password email sent')
+      } catch (err) {
+        request.log.error({ email, error: (err as Error).message }, 'Failed to send password email')
+      }
+    }
+
+    return reply.send({ message: 'If an account exists with that email, you will receive a password reset link.' })
+  })
+
  // Get current user profile
  app.get('/auth/me', { preHandler: [app.authenticate] }, async (request, reply) => {
    const [user] = await app.db
@@ -194,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)
@@ -201,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
--- a/packages/backend/src/routes/v1/store.ts
+++ b/packages/backend/src/routes/v1/store.ts
@@ -1,9 +1,43 @@
 import type { FastifyPluginAsync } from 'fastify'
 import { eq } from 'drizzle-orm'
 import { companies, locations } from '../../db/schema/stores.js'
+import { files } from '../../db/schema/files.js'
 import { ValidationError } from '../../lib/errors.js'

 export const storeRoutes: FastifyPluginAsync = async (app) => {
+  // --- Public branding (no auth — used on login page) ---
+
+  app.get('/store/branding', async (_request, reply) => {
+    const [store] = await app.db.select({
+      name: companies.name,
+      logoFileId: companies.logoFileId,
+    }).from(companies).limit(1)
+    if (!store) return reply.send({ name: null, hasLogo: false })
+    return reply.send({ name: store.name, hasLogo: !!store.logoFileId })
+  })
+
+  app.get('/store/logo', async (_request, reply) => {
+    const [store] = await app.db.select({ logoFileId: companies.logoFileId }).from(companies).limit(1)
+    if (!store?.logoFileId) return reply.status(404).send({ error: { message: 'No logo configured', statusCode: 404 } })
+
+    const [file] = await app.db.select().from(files).where(eq(files.id, store.logoFileId)).limit(1)
+    if (!file) return reply.status(404).send({ error: { message: 'Logo file not found', statusCode: 404 } })
+
+    try {
+      const data = await app.storage.get(file.path)
+      const ext = file.path.split('.').pop()?.toLowerCase()
+      const contentTypeMap: Record<string, string> = {
+        jpg: 'image/jpeg', jpeg: 'image/jpeg', png: 'image/png', webp: 'image/webp', svg: 'image/svg+xml',
+      }
+      return reply
+        .header('Content-Type', contentTypeMap[ext ?? ''] ?? 'application/octet-stream')
+        .header('Cache-Control', 'public, max-age=3600')
+        .send(data)
+    } catch {
+      return reply.status(404).send({ error: { message: 'Logo file not readable', statusCode: 404 } })
+    }
+  })
+
  // --- Company / Store Settings ---

  app.get('/store', { preHandler: [app.authenticate, app.requirePermission('settings.view')] }, async (request, reply) => {
--- a/packages/backend/src/scripts/reset-password.ts
+++ b/packages/backend/src/scripts/reset-password.ts
@@ -0,0 +1,51 @@
+#!/usr/bin/env bun
+/**
+ * Force-reset a user's password from the command line.
+ *
+ * Usage:
+ *   bun run packages/backend/src/scripts/reset-password.ts <email> <new-password>
+ *
+ * From a customer pod:
+ *   kubectl exec -n customer-tvs deploy/customer-tvs-backend -- \
+ *     bun run src/scripts/reset-password.ts user@example.com NewPassword123!
+ */
+import postgres from 'postgres'
+import { drizzle } from 'drizzle-orm/postgres-js'
+import { eq } from 'drizzle-orm'
+import bcrypt from 'bcryptjs'
+import { users } from '../db/schema/users.js'
+
+const [email, newPassword] = process.argv.slice(2)
+
+if (!email || !newPassword) {
+  console.error('Usage: bun run reset-password.ts <email> <new-password>')
+  process.exit(1)
+}
+
+if (newPassword.length < 12) {
+  console.error('Error: Password must be at least 12 characters')
+  process.exit(1)
+}
+
+const databaseUrl = process.env.DATABASE_URL
+if (!databaseUrl) {
+  console.error('Error: DATABASE_URL is not set')
+  process.exit(1)
+}
+
+const sql = postgres(databaseUrl)
+const db = drizzle(sql)
+
+const [user] = await db.select({ id: users.id, email: users.email }).from(users).where(eq(users.email, email)).limit(1)
+
+if (!user) {
+  console.error(`Error: No user found with email "${email}"`)
+  await sql.end()
+  process.exit(1)
+}
+
+const hash = await bcrypt.hash(newPassword, 10)
+await db.update(users).set({ passwordHash: hash, updatedAt: new Date() }).where(eq(users.id, user.id))
+
+console.log(`Password reset for ${email} (user ${user.id})`)
+await sql.end()
--- a/packages/backend/src/services/report.service.ts
+++ b/packages/backend/src/services/report.service.ts
@@ -1,4 +1,4 @@
-import { eq, and, sql, gte, lt } from 'drizzle-orm'
+import { eq, and, gte, lt } from 'drizzle-orm'
 import type { PostgresJsDatabase } from 'drizzle-orm/postgres-js'
 import { transactions, drawerSessions, drawerAdjustments, registers } from '../db/schema/pos.js'
 import { locations } from '../db/schema/stores.js'
--- a/packages/shared/src/schemas/auth.schema.ts
+++ b/packages/shared/src/schemas/auth.schema.ts
@@ -27,3 +27,14 @@ export const SetPinSchema = z.object({
  pin: z.string().min(4).max(6).regex(/^\d+$/, 'PIN must be digits only'),
 })
 export type SetPinInput = z.infer<typeof SetPinSchema>
+
+export const ForgotPasswordSchema = z.object({
+  email: z.string().email(),
+})
+export type ForgotPasswordInput = z.infer<typeof ForgotPasswordSchema>
+
+export const ResetPasswordSchema = z.object({
+  token: z.string().min(1),
+  newPassword: z.string().min(12, 'Password must be at least 12 characters').max(128),
+})
+export type ResetPasswordInput = z.infer<typeof ResetPasswordSchema>
--- a/packages/shared/src/schemas/index.ts
+++ b/packages/shared/src/schemas/index.ts
@@ -1,8 +1,8 @@
 export { PaginationSchema } from './pagination.schema.js'
 export type { PaginationInput, PaginatedResponse } from './pagination.schema.js'

-export { UserRole, RegisterSchema, LoginSchema, PinLoginSchema, SetPinSchema } from './auth.schema.js'
-export type { RegisterInput, LoginInput, PinLoginInput, SetPinInput } from './auth.schema.js'
+export { UserRole, RegisterSchema, LoginSchema, PinLoginSchema, SetPinSchema, ForgotPasswordSchema, ResetPasswordSchema } from './auth.schema.js'
+export type { RegisterInput, LoginInput, PinLoginInput, SetPinInput, ForgotPasswordInput, ResetPasswordInput } from './auth.schema.js'

 export {
  BillingMode,
Author	SHA1	Message	Date
ryan	924a28e201	feat: forced PIN setup modal on all authenticated pages All checks were successful CI / ci (pull_request) Successful in 29s Details CI / e2e (pull_request) Successful in 1m7s Details Replaces the alert banner with a blocking modal dialog that requires users to set a PIN before they can use the app. Cannot be dismissed. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-05 20:01:14 +00:00
ryan	2cd646ddea	fix: remove unused Link import from profile page All checks were successful CI / ci (pull_request) Successful in 27s Details CI / e2e (pull_request) Successful in 1m6s Details Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-05 19:57:31 +00:00
ryan	3f9e125412	fix: move PIN warning banner to authenticated layout for all pages Some checks failed CI / ci (pull_request) Failing after 26s Details CI / e2e (pull_request) Has been skipped Details Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-05 19:51:39 +00:00
ryan	96d2a966d7	feat: tabbed profile page with PIN setup and auto employee numbers All checks were successful CI / ci (pull_request) Successful in 25s Details CI / e2e (pull_request) Successful in 55s Details - Profile page split into Account, Security, Appearance tabs - Security tab: change password + set/change/remove POS PIN - Warning banner with link to Security tab when no PIN is set - /auth/me returns employeeNumber and hasPin - Migration 0046: Postgres trigger auto-assigns sequential employee numbers starting at 1001, backfills existing users - Added shadcn Alert component Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-05 19:41:36 +00:00
ryan	666ae8d59b	fix: assign Admin RBAC role to initial user on seed All checks were successful Build & Release / build (push) Successful in 22s Details Without this, the initial user has no permissions and sees no modules. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-05 17:38:53 +00:00
ryan	67f1e4a26a	Merge pull request 'feat: set browser tab title and favicon from customer branding' (#10 ) from feature/password-reset into main All checks were successful Build & Release / build (push) Successful in 1m20s Details Reviewed-on: #10	2026-04-05 17:19:53 +00:00
ryan	613784a1cc	feat: set browser tab title and favicon from customer branding All checks were successful CI / ci (pull_request) Successful in 27s Details CI / e2e (pull_request) Successful in 1m15s Details Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-05 17:15:32 +00:00
ryan	ea9aceec46	Merge pull request 'feat: password reset flow with welcome emails' (#9 ) from feature/password-reset into main All checks were successful Build & Release / build (push) Successful in 1m16s Details Reviewed-on: #9	2026-04-05 17:12:06 +00:00
ryan	bc8613bbbc	feat: password reset flow with welcome emails All checks were successful CI / ci (pull_request) Successful in 27s Details CI / e2e (pull_request) Successful in 1m0s Details - POST /auth/forgot-password with welcome/reset email templates - POST /auth/reset-password with Zod validation, 4-hour tokens - Per-email rate limiting (3/hr) via Valkey, no user enumeration - Login page "Forgot password?" toggle with inline form - /reset-password page for setting new password from email link - Initial user seed sends welcome email instead of requiring password - CLI script for force-resetting passwords via kubectl exec - APP_URL env var in chart, removed INITIAL_USER_PASSWORD Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-05 17:09:23 +00:00
Ryan Moon	a1dc4b0e47	feat: seed company record from BUSINESS_NAME env var on first startup All checks were successful Build & Release / build (push) Successful in 19s Details	2026-04-05 11:49:51 -05:00
ryan	81de80abb9	Merge pull request 'fix: regenerate route tree to include reports/daily route' (#8 ) from feature/login-branding into main All checks were successful Build & Release / build (push) Successful in 16s Details Reviewed-on: #8	2026-04-05 16:25:46 +00:00
ryan	75c7c28f73	fix: generate route tree in CI and Docker build All checks were successful CI / ci (pull_request) Successful in 23s Details CI / e2e (pull_request) Successful in 1m1s Details Ensures routeTree.gen.ts is always fresh so stale checked-in copies don't break the frontend build or lint. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-05 16:24:08 +00:00
ryan	99fdaaa05a	fix: regenerate route tree to include reports/daily route All checks were successful CI / ci (pull_request) Successful in 21s Details CI / e2e (pull_request) Successful in 55s Details Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-05 16:22:20 +00:00
ryan	6870aea1a5	Merge pull request 'feat: show customer branding on login page' (#7 ) from feature/login-branding into main Some checks failed Build & Release / build (push) Failing after 37s Details Reviewed-on: #7	2026-04-05 16:19:32 +00:00
ryan	e589ff02f0	fix: remove unused imports to pass lint All checks were successful CI / ci (pull_request) Successful in 22s Details CI / e2e (pull_request) Successful in 59s Details Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-05 16:17:42 +00:00
ryan	da4b765b14	feat: show customer branding on login page Some checks failed CI / ci (pull_request) Failing after 20s Details CI / e2e (pull_request) Has been skipped Details Adds public /v1/store/branding and /v1/store/logo endpoints so the login page can display the customer's name and logo without auth, with "Powered by LunarFront" underneath — matching the sidebar style. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-05 16:14:07 +00:00