feat: add optional subtitle field for print header

src/main/db/default-templates.ts

@@ -15,6 +15,7 @@ export const defaultSurgeryTemplate = {
       type: 'header',
       props: {
         showHospital: true,
+        showSubtitle: true,
         showUnit: true,
         showTelephone: true,
         showLogo: false,
@@ -193,6 +194,7 @@ export const defaultFollowupTemplate = {
       type: 'header',
       props: {
         showHospital: true,
+        showSubtitle: true,
         showUnit: true,
         showTelephone: true,
         showLogo: false,

src/main/db/migrations.ts

@@ -16,6 +16,7 @@ import * as m_014_sync_default_templates from './migrations/014_sync_default_tem
 import * as m_015_add_discharge_plan from './migrations/015_add_discharge_plan'
 import * as m_016_update_default_templates_discharge_plan from './migrations/016_update_default_templates_discharge_plan'
 import * as m_017_sync_print_templates_with_defaults from './migrations/017_sync_print_templates_with_defaults'
+import * as m_018_subtitle_setting from './migrations/018_subtitle_setting'
 
 export default {
   '000_init': m_000_init,
@@ -35,5 +36,6 @@ export default {
   '014_sync_default_templates': m_014_sync_default_templates,
   '015_add_discharge_plan': m_015_add_discharge_plan,
   '016_update_default_templates_discharge_plan': m_016_update_default_templates_discharge_plan,
-  '017_sync_print_templates_with_defaults': m_017_sync_print_templates_with_defaults
+  '017_sync_print_templates_with_defaults': m_017_sync_print_templates_with_defaults,
+  '018_subtitle_setting': m_018_subtitle_setting
 }

src/main/db/migrations/018_subtitle_setting.ts

@@ -0,0 +1,53 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Kysely } from 'kysely'
+import { defaultSurgeryTemplate, defaultFollowupTemplate } from '../default-templates'
+
+/**
+ * Add subtitle support to print templates.
+ *
+ * This migration:
+ * 1. Updates default_print_templates with the new template structure (includes showSubtitle prop)
+ * 2. Syncs print_templates with the updated defaults
+ */
+export async function up(db: Kysely<any>): Promise<void> {
+  const now = Date.now()
+
+  // Update default_print_templates with new template structures
+  await db
+    .updateTable('default_print_templates')
+    .set({
+      structure: JSON.stringify(defaultSurgeryTemplate)
+    })
+    .where('key', '=', 'surgery-standard')
+    .execute()
+
+  await db
+    .updateTable('default_print_templates')
+    .set({
+      structure: JSON.stringify(defaultFollowupTemplate)
+    })
+    .where('key', '=', 'followup-standard')
+    .execute()
+
+  // Sync print_templates with updated defaults
+  const defaults = await db
+    .selectFrom('default_print_templates')
+    .select(['key', 'type', 'structure'])
+    .execute()
+
+  for (const defaultTemplate of defaults) {
+    await db
+      .updateTable('print_templates')
+      .set({
+        structure: defaultTemplate.structure,
+        updated_at: now
+      })
+      .where('type', '=', defaultTemplate.type)
+      .where('is_default', '=', 1)
+      .execute()
+  }
+}
+
+export async function down(_db: Kysely<any>): Promise<void> {
+  // No-op: This is a data sync migration, not reversible without storing old data
+}

src/renderer/src/components/settings/GeneralSettings.tsx

@@ -31,6 +31,7 @@ type UpdateChannel = 'stable' | 'beta' | 'alpha'
 
 const formSchema = z.object({
   hospital: z.string(),
+  subtitle: z.string().optional(),
   unit: z.string(),
   telephone: z.string()
 })
@@ -44,6 +45,7 @@ export const GeneralSettings = () => {
     resolver: zodResolver(formSchema),
     defaultValues: {
       hospital: '',
+      subtitle: '',
       unit: '',
       telephone: ''
     }
@@ -69,6 +71,7 @@ export const GeneralSettings = () => {
     if (settings) {
       form.reset({
         hospital: settings['hospital'] || '',
+        subtitle: settings['subtitle'] || '',
         unit: settings['unit'] || '',
         telephone: settings['telephone'] || ''
       })
@@ -151,6 +154,32 @@ export const GeneralSettings = () => {
                 )}
               />
 
+              <FormField
+                name="subtitle"
+                control={form.control}
+                render={({ field }) => (
+                  <FormItem>
+                    <div className="flex items-center gap-2 mb-2">
+                      <div className="h-6 w-6 rounded-md bg-blue-500/10 flex items-center justify-center">
+                        <Building2 className="h-3.5 w-3.5 text-blue-500" />
+                      </div>
+                      <FormLabel className="text-sm font-medium">Subtitle</FormLabel>
+                    </div>
+                    <FormControl>
+                      <Input
+                        placeholder="e.g., Teaching Hospital"
+                        {...field}
+                        className="h-11"
+                      />
+                    </FormControl>
+                    <FormDescription className="text-xs">
+                      Optional second line shown below Hospital Name in printed reports
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
               <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                 <FormField
                   name="unit"

src/renderer/src/components/template-builder/SampleDataContext.tsx

@@ -95,11 +95,13 @@ export const SampleDataProvider = ({ templateType, children }: SampleDataProvide
   // Check if real settings are available
   const realSettings = useMemo(() => {
     const hospital = settings.hospital
+    const subtitle = settings.subtitle
     const unit = settings.unit
     const telephone = settings.telephone
 
     return {
       hospital: hospital || null,
+      subtitle: subtitle || null,
       unit: unit || null,
       telephone: telephone || null,
       hasAny: Boolean(hospital || unit || telephone)
@@ -116,6 +118,7 @@ export const SampleDataProvider = ({ templateType, children }: SampleDataProvide
         ...base,
         settings: {
           hospital: realSettings.hospital || base.settings.hospital,
+          subtitle: realSettings.subtitle || base.settings.subtitle,
           unit: realSettings.unit || base.settings.unit,
           telephone: realSettings.telephone || base.settings.telephone
         }

src/renderer/src/components/template-builder/properties/HeaderProperties.tsx

@@ -36,6 +36,17 @@ export const HeaderProperties = ({ block, onUpdate }: HeaderPropertiesProps) =>
           />
         </div>
 
+        <div className="flex items-center justify-between">
+          <Label htmlFor="showSubtitle" className="text-sm">
+            Show Subtitle
+          </Label>
+          <Switch
+            id="showSubtitle"
+            checked={block.props.showSubtitle}
+            onCheckedChange={(checked) => updateProps({ showSubtitle: checked })}
+          />
+        </div>
+
         <div className="flex items-center justify-between">
           <Label htmlFor="showUnit" className="text-sm">
             Show Unit

src/renderer/src/components/template-builder/sample-data/SettingsFields.tsx

@@ -18,27 +18,34 @@ export const SettingsFields = () => {
         </div>
       )}
 
-      {/* Hospital, Unit */}
+      {/* Hospital Name */}
+      <FieldInput
+        label="Hospital Name"
+        value={settings.hospital}
+        onChange={(v) => updateField('settings.hospital', v)}
+      />
+
+      {/* Subtitle */}
+      <FieldInput
+        label="Subtitle"
+        value={settings.subtitle}
+        onChange={(v) => updateField('settings.subtitle', v)}
+      />
+
+      {/* Unit, Telephone */}
       <div className="grid grid-cols-2 gap-2">
-        <FieldInput
-          label="Hospital Name"
-          value={settings.hospital}
-          onChange={(v) => updateField('settings.hospital', v)}
-        />
         <FieldInput
           label="Unit / Department"
           value={settings.unit}
           onChange={(v) => updateField('settings.unit', v)}
         />
+        <FieldInput
+          label="Telephone"
+          value={settings.telephone}
+          onChange={(v) => updateField('settings.telephone', v)}
+        />
       </div>
 
-      {/* Telephone */}
-      <FieldInput
-        label="Telephone"
-        value={settings.telephone}
-        onChange={(v) => updateField('settings.telephone', v)}
-      />
-
       {/* Note */}
       {!usingRealSettings && (
         <p className="text-[10px] text-muted-foreground pt-1">

src/renderer/src/lib/print.ts

@@ -40,6 +40,7 @@ export const surgeryPrintData = (
   },
   settings: {
     hospital: settings?.hospital || '',
+    subtitle: settings?.subtitle || '',
     unit: settings?.unit || '',
     telephone: settings?.telephone || ''
   }
@@ -70,6 +71,7 @@ export const followupPrintData = (
   },
   settings: {
     hospital: settings?.hospital || '',
+    subtitle: settings?.subtitle || '',
     unit: settings?.unit || '',
     telephone: settings?.telephone || ''
   }
@@ -128,6 +130,7 @@ export const createSurgeryContext = (
   },
   settings: {
     hospital: settings?.hospital || 'Hospital Name',
+    subtitle: settings?.subtitle || '',
     unit: settings?.unit || 'Unit Name',
     telephone: settings?.telephone || null
   }

src/renderer/src/lib/template-context.ts

@@ -69,6 +69,7 @@ export const getSampleContext = (type: TemplateType): TemplateContext => {
     },
     settings: {
       hospital: 'General Hospital Colombo',
+      subtitle: 'Teaching Hospital',
       unit: 'Surgical Unit A',
       telephone: '+94 11 234 5678'
     }
@@ -135,6 +136,7 @@ export interface CreateContextParams {
   }
   settings: {
     hospital?: string
+    subtitle?: string
     unit?: string
     telephone?: string | null
   }
@@ -211,6 +213,7 @@ export const createTemplateContext = (params: CreateContextParams): TemplateCont
       : undefined,
     settings: {
       hospital: params.settings.hospital || 'Hospital Name',
+      subtitle: params.settings.subtitle || '',
       unit: params.settings.unit || 'Unit Name',
       telephone: params.settings.telephone || null
     }

src/renderer/src/lib/template-renderer.ts

@@ -91,6 +91,10 @@ const renderHeader = (block: HeaderBlock, context: TemplateContext): string => {
     html += `<h1 class="text-2xl bold">${escapeHtml(context.settings.hospital)}</h1>`
   }
 
+  if (props.showSubtitle && context.settings.subtitle) {
+    html += `<h2 class="text-xl pt-1">${escapeHtml(context.settings.subtitle)}</h2>`
+  }
+
   if (props.showUnit && context.settings.unit) {
     html += `<h2 class="text-lg pt-1">${escapeHtml(context.settings.unit)}</h2>`
   }

src/shared/constants/template-fields.ts

@@ -223,7 +223,14 @@ export const TEMPLATE_FIELDS: FieldDefinition[] = [
     label: 'Hospital Name',
     category: 'settings',
     description: 'Name of the hospital',
-    example: 'General Hospital Colombo'
+    example: 'National Cancer Institute'
+  },
+  {
+    path: 'settings.subtitle',
+    label: 'Subtitle',
+    category: 'settings',
+    description: 'Optional second line below hospital name',
+    example: 'Teaching Hospital'
   },
   {
     path: 'settings.unit',
@@ -263,6 +270,7 @@ export const BLOCK_DEFINITIONS: BlockDefinition[] = [
     description: 'Hospital header with name, unit, and contact info',
     defaultProps: {
       showHospital: true,
+      showSubtitle: true,
       showUnit: true,
       showTelephone: true,
       showLogo: false,

src/shared/types/template-blocks.d.ts

@@ -12,6 +12,7 @@ export interface BaseBlock {
 
 export interface HeaderBlockProps {
   showHospital: boolean
+  showSubtitle: boolean
   showUnit: boolean
   showTelephone: boolean
   showLogo: boolean
@@ -301,6 +302,7 @@ export interface TemplateContext {
   }
   settings: {
     hospital: string
+    subtitle: string
     unit: string
     telephone: string | null
   }