Merge pull request #157 from reqcore-inc/fix/issues

Fix issues #156-153

Author: JoachimLK

.env.example

@@ -97,6 +97,24 @@ NUXT_PUBLIC_SITE_URL=http://localhost:3000
 # Display name for the SSO button (default: "SSO")
 # OIDC_PROVIDER_NAME=Company SSO
 
+# ─── Optional: Transactional Email ───────────────────────────────────────────
+# Reqcore logs emails to the console by default (safe for local dev).
+# For production, configure one of the providers below.
+# SMTP takes priority over Resend when SMTP_HOST is set.
+
+# Option A: SMTP (recommended for self-hosted / enterprise setups)
+# Supports any SMTP server: Postfix, Gmail, Exchange, Mailcow, Mailu, etc.
+# SMTP_HOST=smtp.example.com
+# SMTP_PORT=587
+# SMTP_USER=reqcore@example.com
+# SMTP_PASS=your-smtp-password
+# SMTP_FROM="Reqcore <noreply@example.com>"
+# SMTP_SECURE=false   # true = implicit TLS (port 465), false = STARTTLS (port 587)
+
+# Option B: Resend (free tier: 3,000 emails/month — resend.com)
+# RESEND_API_KEY=re_xxxxxxxxxxxx
+# RESEND_FROM_EMAIL="Reqcore <noreply@yourcompany.com>"
+
 # ─── Optional: Social Sign-In (Google, GitHub, Microsoft) ────────────────────
 # Enable social login buttons on the sign-in and sign-up pages.
 # Each provider requires both CLIENT_ID and CLIENT_SECRET to be set.

.gitignore

@@ -28,6 +28,7 @@ test-results/
 playwright-report/
 blob-report/
 playwright/.cache/
+.playwright-mcp/
 
 
 *.code-workspace

SELF-HOSTING.md

@@ -440,7 +440,37 @@ docker compose up --build -d
 
 By default, Reqcore logs email content to the console (useful for development). For production, configure a transactional email service.
 
-### Using Resend (Recommended)
+**Priority:** When `SMTP_HOST` is set, SMTP is used. Otherwise, if `RESEND_API_KEY` is set, Resend is used. If neither is configured, emails are logged to the console.
+
+### Option A: SMTP (recommended for self-hosted setups)
+
+SMTP works with any mail server — Postfix, Gmail, Exchange, Mailcow, Mailu, etc. No external service dependency.
+
+1. Add to your `.env` file:
+
+```bash
+SMTP_HOST=smtp.example.com
+SMTP_PORT=587
+SMTP_USER=reqcore@example.com
+SMTP_PASS=your-smtp-password
+SMTP_FROM="Reqcore <noreply@example.com>"
+SMTP_SECURE=false    # true for implicit TLS (port 465), false for STARTTLS (port 587)
+```
+
+2. Restart: `docker compose up --build -d`
+
+**Common setups:**
+
+| Provider | SMTP_HOST | SMTP_PORT | SMTP_SECURE |
+|---|---|---|---|
+| Gmail (App Password) | `smtp.gmail.com` | `587` | `false` |
+| Outlook / Office 365 | `smtp.office365.com` | `587` | `false` |
+| Mailcow / Mailu | your server hostname | `587` | `false` |
+| Custom Postfix | your server hostname | `587` or `465` | `false` / `true` |
+
+> For Gmail, generate an [App Password](https://support.google.com/accounts/answer/185833) — your regular Gmail password will not work.
+
+### Option B: Resend
 
 1. Sign up at [resend.com](https://resend.com) (free tier: 3,000 emails/month)
 2. Verify your sending domain
@@ -454,11 +484,6 @@ RESEND_FROM_EMAIL="Reqcore <noreply@yourcompany.com>"
 
 5. Restart: `docker compose up --build -d`
 
-This enables:
-- Team member invitation emails
-- Interview scheduling notifications
-- Candidate communication emails
-
 ---
 
 ## Security Best Practices

app/components/AppTopBar.vue

@@ -144,6 +144,22 @@ watch(() => route.path, () => {
   showGetStartedMenu.value = false
 })
 
+// ─────────────────────────────────────────────
+// New Job button
+// ─────────────────────────────────────────────
+
+const newJobResetSignal = useState('new-job-reset-signal', () => 0)
+
+function handleNewJobClick() {
+  const newJobPath = localePath('/dashboard/jobs/new')
+  if (route.path === newJobPath) {
+    // Already on the page: signal the wizard to reset instead of navigating
+    newJobResetSignal.value++
+  } else {
+    navigateTo(newJobPath)
+  }
+}
+
 // Close user menu on outside click
 const userMenuRef = useTemplateRef<HTMLElement>('userMenuRoot')
 function onClickOutsideUser(e: MouseEvent) {
@@ -264,13 +280,13 @@ onUnmounted(() => {
           </div>
 
           <!-- New Job button (desktop) -->
-          <NuxtLink
-            :to="$localePath('/dashboard/jobs/new')"
-            class="hidden sm:inline-flex items-center gap-1.5 rounded-lg bg-brand-600 px-3.5 py-1.5 text-[13px] font-semibold text-white shadow-sm shadow-brand-600/20 hover:bg-brand-700 hover:shadow-md hover:shadow-brand-600/25 active:bg-brand-800 transition-all duration-200 no-underline"
+          <button
+            class="hidden sm:inline-flex items-center gap-1.5 rounded-lg bg-brand-600 px-3.5 py-1.5 text-[13px] font-semibold text-white shadow-sm shadow-brand-600/20 hover:bg-brand-700 hover:shadow-md hover:shadow-brand-600/25 active:bg-brand-800 transition-all duration-200 border-0 cursor-pointer"
+            @click="handleNewJobClick"
           >
             <Plus class="size-3.5" />
             New Job
-          </NuxtLink>
+          </button>
 
           <!-- Org Switcher -->
           <div class="hidden lg:block ml-1">
@@ -494,13 +510,13 @@ onUnmounted(() => {
             </span>
           </NuxtLink>
 
-          <NuxtLink
-            :to="$localePath('/dashboard/jobs/new')"
-            class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium bg-brand-600 text-white hover:bg-brand-700 transition-colors no-underline sm:hidden mt-1"
+          <button
+            class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium bg-brand-600 text-white hover:bg-brand-700 transition-colors sm:hidden mt-1 border-0 cursor-pointer w-full"
+            @click="handleNewJobClick(); showMobileMenu = false"
           >
             <Plus class="size-4" />
             New Job
-          </NuxtLink>
+          </button>
 
           <!-- Get Started CTA (demo mode, mobile) -->
           <template v-if="isDemo">

app/components/ApplyCandidateModal.vue

@@ -37,6 +37,7 @@ const { data: candidateData, status: searchStatus } = useFetch('/api/candidates'
 
 const candidates = computed(() => candidateData.value?.data ?? [])
 const { handlePreviewReadOnlyError } = usePreviewReadOnly()
+const { formatCandidateName } = useOrgSettings()
 
 // Apply candidate
 const isApplying = ref(false)
@@ -117,7 +118,7 @@ async function applyCandidate(candidateId: string) {
             >
               <div class="min-w-0">
                 <p class="text-sm font-medium text-surface-900 dark:text-surface-100 truncate">
-                  {{ c.firstName }} {{ c.lastName }}
+                  {{ formatCandidateName(c) }}
                 </p>
                 <p class="text-xs text-surface-400 truncate">{{ c.email }}</p>
               </div>

app/components/CandidateDetailSidebar.vue

@@ -19,6 +19,7 @@ const emit = defineEmits<{
 const { handlePreviewReadOnlyError } = usePreviewReadOnly()
 const toast = useToast()
 const { track } = useTrack()
+const { formatCandidateName } = useOrgSettings()
 
 // Detect if the job sub-nav bar is visible (adds 40px / 2.5rem)
 const route = useRoute()
@@ -467,7 +468,7 @@ function formatInterviewDate(dateStr: string) {
             </div>
             <div class="min-w-0">
               <h2 class="text-lg font-semibold text-surface-900 dark:text-surface-50 truncate">
-                {{ application.candidate.firstName }} {{ application.candidate.lastName }}
+                {{ formatCandidateName(application.candidate) }}
               </h2>
               <div class="flex items-center gap-3 text-sm text-surface-500 dark:text-surface-400">
                 <a
@@ -617,7 +618,7 @@ function formatInterviewDate(dateStr: string) {
                 <div>
                   <dt class="text-xs font-medium text-surface-400 dark:text-surface-500 mb-1">Name</dt>
                   <dd class="text-surface-800 dark:text-surface-200 font-medium">
-                    {{ application.candidate.firstName }} {{ application.candidate.lastName }}
+                    {{ formatCandidateName(application.candidate) }}
                   </dd>
                 </div>
                 <div>

app/components/InterviewEmailModal.vue

@@ -16,6 +16,7 @@ const emit = defineEmits<{
 }>()
 
 const { templates, createTemplate, deleteTemplate, sendInvitation } = useEmailTemplates()
+const { formatPersonName } = useOrgSettings()
 
 // ─── System templates (from shared utility — auto-imported) ────
 
@@ -171,7 +172,7 @@ const canSend = computed(() => {
                   Send Interview Invitation
                 </h2>
                 <p class="text-xs text-surface-500 dark:text-surface-400">
-                  to {{ interview.candidateFirstName }} {{ interview.candidateLastName }} · {{ interview.candidateEmail }}
+                  to {{ formatPersonName(interview.candidateFirstName, interview.candidateLastName) }} · {{ interview.candidateEmail }}
                 </p>
               </div>
             </div>

app/components/PipelineCard.vue

@@ -33,6 +33,8 @@ const transitionClasses: Record<string, string> = {
   hired: 'text-green-700 dark:text-green-300 hover:bg-green-100 dark:hover:bg-green-900',
   rejected: 'text-danger-600 dark:text-danger-400 hover:bg-danger-50 dark:hover:bg-danger-950',
 }
+
+const { formatPersonName, formatDateTime } = useOrgSettings()
 </script>
 
 <template>
@@ -42,7 +44,7 @@ const transitionClasses: Record<string, string> = {
       class="block mb-2 group"
     >
       <h4 class="text-sm font-semibold text-surface-900 dark:text-surface-100 group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors truncate">
-        {{ candidateFirstName }} {{ candidateLastName }}
+        {{ formatPersonName(candidateFirstName, candidateLastName) }}
       </h4>
       <div class="flex items-center gap-2 text-xs text-surface-400 mt-0.5">
         <a
@@ -60,7 +62,7 @@ const transitionClasses: Record<string, string> = {
     <div class="flex items-center justify-between text-xs text-surface-400">
       <span class="inline-flex items-center gap-1">
         <Calendar class="size-3" />
-        {{ new Date(createdAt).toLocaleDateString() }}
+        {{ formatDateTime(createdAt) }}
       </span>
       <span v-if="score != null" class="inline-flex items-center rounded-md px-1.5 py-0.5 text-[10px] font-semibold ring-1 ring-inset"
         :class="score >= 75

app/components/SettingsMobileNav.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {
-  Building2, Users, UserCircle, ChevronLeft, Plug, Brain, ShieldCheck,
+  Building2, Users, UserCircle, ChevronLeft, Plug, Brain, ShieldCheck, Globe,
 } from 'lucide-vue-next'
 
 const route = useRoute()
@@ -13,6 +13,12 @@ const settingsNav = [
     icon: Building2,
     exact: true,
   },
+  {
+    label: 'Localization',
+    to: '/dashboard/settings/localization',
+    icon: Globe,
+    exact: true,
+  },
   {
     label: 'Members',
     to: '/dashboard/settings/members',

app/components/SettingsSidebar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {
-  Building2, Users, UserCircle, ChevronLeft, Settings, Plug, Brain, ShieldCheck,
+  Building2, Users, UserCircle, ChevronLeft, Settings, Plug, Brain, ShieldCheck, Globe,
 } from 'lucide-vue-next'
 
 const route = useRoute()
@@ -14,6 +14,13 @@ const settingsNav = [
     icon: Building2,
     exact: true,
   },
+  {
+    label: 'Localization',
+    description: 'Names & date formats',
+    to: '/dashboard/settings/localization',
+    icon: Globe,
+    exact: true,
+  },
   {
     label: 'Members',
     description: 'Team & invitations',