diff --git a/client/src/tests/manualInvoiceView.spec.ts b/client/src/tests/manualInvoiceView.spec.ts
index fa1ced9..e39521b 100644
--- a/client/src/tests/manualInvoiceView.spec.ts
+++ b/client/src/tests/manualInvoiceView.spec.ts
@@ -209,6 +209,97 @@ describe('ReservationManualInvoiceView', () => {
     )
   })
 
+  it('renders the invoice.html style page sections and sticky action bar', () => {
+    const wrapper = mountView()
+
+    expect(wrapper.find('[data-testid="manual-invoice-prototype-page"]').exists()).toBe(true)
+    expect(wrapper.text()).toContain('创建 Invoice')
+    expect(wrapper.text()).toContain('01')
+    expect(wrapper.text()).toContain('Basic Information')
+    expect(wrapper.text()).toContain('02')
+    expect(wrapper.text()).toContain('Please refer to the following reservation')
+    expect(wrapper.text()).toContain('03')
+    expect(wrapper.text()).toContain('Description&Amount')
+    expect(wrapper.find('[data-testid="manual-invoice-action-bar"]').exists()).toBe(true)
+  })
+
+  it('shows final-format date previews like the invoice prototype', async () => {
+    const wrapper = mountView()
+
+    await wrapper.find('[data-testid="booking-arrival-date"]').setValue('2026-08-02')
+    await wrapper.find('[data-testid="booking-departure-date"]').setValue('2026-08-05')
+    await wrapper.find('[data-testid="document-due-date"]').setValue('2026-07-22')
+
+    expect(wrapper.find('[data-testid="arrival-date-preview"]').text()).toContain('02/08/2026')
+    expect(wrapper.find('[data-testid="departure-date-preview"]').text()).toContain('05/08/2026')
+    expect(wrapper.find('[data-testid="due-date-preview"]').text()).toContain('22/07/2026')
+  })
+
+  it('keeps primary reservation controls bound to the first charge line', async () => {
+    const wrapper = mountView()
+
+    await wrapper.find('[data-testid="primary-room-rate"]').setValue('3200')
+    await wrapper.find('[data-testid="primary-room-count"]').setValue('4')
+    await wrapper.find('[data-testid="primary-night-count"]').setValue('3')
+
+    expect((wrapper.find('[data-testid="charge-rate-0"]').element as HTMLInputElement).value).toBe('3200')
+    expect((wrapper.find('[data-testid="charge-quantity-0"]').element as HTMLInputElement).value).toBe('4')
+    expect((wrapper.find('[data-testid="charge-nights-0"]').element as HTMLInputElement).value).toBe('3')
+    expect(wrapper.find('[data-testid="charge-amount-0"]').text()).toContain('38,400.00')
+  })
+
+  it('submits comma-formatted numeric inputs as normalized numbers', async () => {
+    vi.mocked(service.generateManualReservationInvoice).mockResolvedValue(createResult())
+    const wrapper = mountView()
+
+    await wrapper.find('[data-testid="recipient-company-code"]').setValue('QBD')
+    await fillMinimumInvoiceForm(wrapper)
+    await wrapper.find('[data-testid="booking-extra-bed-rate"]').setValue('1,200')
+    await wrapper.find('[data-testid="charge-rate-0"]').setValue('3,000')
+    await wrapper.find('[data-testid="manual-invoice-submit"]').trigger('click')
+    await flushPromises()
+
+    expect(service.generateManualReservationInvoice).toHaveBeenCalledWith(
+      expect.objectContaining({
+        invoice_payload: expect.objectContaining({
+          booking: expect.objectContaining({
+            extra_bed_rate: 1200,
+          }),
+          charges: [
+            expect.objectContaining({
+              rate: 3000,
+            }),
+          ],
+        }),
+      }),
+    )
+  })
+
+  it('clears directory contact text when switching company back to manual input', async () => {
+    const wrapper = mountView()
+
+    await wrapper.find('[data-testid="recipient-company-code"]').setValue('HANATOUR')
+    await wrapper.find('[data-testid="recipient-contact-id"]').setValue('HANATOUR_BOLAM_JO')
+    expect((wrapper.find('[data-testid="recipient-email"]').element as HTMLInputElement).value).toBe(
+      'melissa0609@hanatour.com',
+    )
+
+    await wrapper.find('[data-testid="recipient-company-code"]').setValue('MANUAL')
+
+    expect((wrapper.find('[data-testid="recipient-contact-id"]').element as HTMLSelectElement).value).toBe('MANUAL')
+    expect((wrapper.find('input[placeholder="输入 Company"]').element as HTMLInputElement).value).toBe('')
+    expect((wrapper.find('input[placeholder="输入 Attention"]').element as HTMLInputElement).value).toBe('')
+    expect((wrapper.find('[data-testid="recipient-email"]').element as HTMLInputElement).value).toBe('')
+  })
+
+  it('keeps invoice date out of the keyboard focus order while preserving the payload field', () => {
+    const wrapper = mountView()
+    const invoiceDate = wrapper.find('[data-testid="document-invoice-date"]')
+
+    expect(invoiceDate.attributes('type')).toBe('hidden')
+    expect(invoiceDate.attributes('required')).toBeUndefined()
+  })
+
   it('links company and attention seed data while allowing manual overrides before submit', async () => {
     vi.mocked(service.generateManualReservationInvoice).mockResolvedValue(createResult())
     const wrapper = mountView()
diff --git a/client/src/views/reservation/ReservationManualInvoiceView.vue b/client/src/views/reservation/ReservationManualInvoiceView.vue
index 76b6888..2565d9d 100644
--- a/client/src/views/reservation/ReservationManualInvoiceView.vue
+++ b/client/src/views/reservation/ReservationManualInvoiceView.vue
@@ -1,438 +1,610 @@
 <template>
-  <div class="manual-invoice-page">
-    <section class="page-heading">
-      <div>
-        <span class="eyebrow">{{ t('manualInvoice.sourceBadge') }}</span>
-        <h1>{{ t('manualInvoice.title') }}</h1>
-        <p>{{ t('manualInvoice.subtitle') }}</p>
+  <main
+    class="invoice-page"
+    data-testid="manual-invoice-prototype-page"
+  >
+    <header class="invoice-page__header">
+      <div class="invoice-page__title">
+        <h1>创建 Invoice</h1>
+        <span class="draft-badge">
+          <i
+            class="pi pi-pencil"
+            aria-hidden="true"
+          />
+          草稿
+        </span>
       </div>
-      <p class="page-note">
-        {{ t('manualInvoice.independentHint') }}
-      </p>
-    </section>
+      <div class="source-summary">
+        <span>当前来源</span>
+        <strong>{{ sourceGroupName }}</strong>
+        <small>Manual Invoice Mode</small>
+      </div>
+    </header>
 
     <form
-      class="manual-invoice-layout"
+      class="invoice-form"
       @submit.prevent="submitInvoice"
     >
-      <div class="invoice-form-stack">
-        <section class="invoice-panel">
-          <div class="section-heading">
-            <h2>{{ t('manualInvoice.documentSection') }}</h2>
-          </div>
-          <div class="form-grid form-grid--three">
-            <label class="field">
-              <span>{{ t('manualInvoice.invoiceDate') }}</span>
-              <input
-                v-model="form.document.invoice_date"
-                data-testid="document-invoice-date"
-                type="date"
-                required
-                @input="markDocumentDatesEdited"
-              >
-            </label>
-            <label class="field">
-              <span>{{ t('manualInvoice.bookingDate') }}</span>
-              <input
-                v-model="form.document.booking_date"
-                data-testid="document-booking-date"
-                type="date"
-                required
-                @input="markDocumentDatesEdited"
-              >
-            </label>
-            <label class="field">
-              <span>{{ t('manualInvoice.dueDate') }}</span>
-              <input
-                v-model="form.document.due_date"
-                data-testid="document-due-date"
-                type="date"
-                required
-                @input="markDocumentDatesEdited"
-              >
-            </label>
-          </div>
-        </section>
+      <input
+        v-model="form.document.invoice_date"
+        data-testid="document-invoice-date"
+        type="hidden"
+        @input="markDocumentDatesEdited"
+      >
 
-        <section class="invoice-panel">
-          <div class="section-heading">
-            <h2>{{ t('manualInvoice.recipientSection') }}</h2>
-            <p>{{ t('manualInvoice.manualOverrideHint') }}</p>
-          </div>
-          <div class="form-grid form-grid--two">
-            <label class="field">
-              <span>{{ t('manualInvoice.companySeed') }}</span>
-              <select
-                v-model="form.recipient.company_code"
-                data-testid="recipient-company-code"
-              >
-                <option value="">{{ t('manualInvoice.selectCompany') }}</option>
-                <option
-                  v-for="company in recipientCompanies"
-                  :key="company.company_code"
-                  :value="company.company_code"
+      <div class="invoice-form-column">
+        <section
+          class="section-card"
+          aria-labelledby="basic-information-title"
+        >
+          <header class="section-header">
+            <div class="section-title">
+              <span class="section-index">01</span>
+              <h2 id="basic-information-title">
+                Basic Information
+              </h2>
+            </div>
+          </header>
+
+          <div class="form-grid">
+            <div class="field">
+              <div class="field__heading">
+                <label for="invoice-company">Company</label>
+              </div>
+              <div class="directory-control directory-control--manual">
+                <select
+                  id="invoice-company"
+                  v-model="form.recipient.company_code"
+                  data-testid="recipient-company-code"
                 >
-                  {{ company.company }}
-                </option>
-              </select>
-            </label>
-            <label class="field">
-              <span>{{ t('manualInvoice.contactSeed') }}</span>
-              <select
-                v-model="form.recipient.contact_id"
-                data-testid="recipient-contact-id"
-                :disabled="recipientContacts.length === 0"
-              >
-                <option value="">{{ t('manualInvoice.selectContact') }}</option>
-                <option
-                  v-for="contact in recipientContacts"
-                  :key="contact.contact_id"
-                  :value="contact.contact_id"
+                  <option :value="MANUAL_SELECTION">
+                    Manual
+                  </option>
+                  <option
+                    v-for="company in recipientCompanies"
+                    :key="company.company_code"
+                    :value="company.company_code"
+                  >
+                    {{ company.company }}
+                  </option>
+                </select>
+                <input
+                  v-model.trim="form.recipient.company"
+                  type="text"
+                  autocomplete="off"
+                  placeholder="输入 Company"
+                  required
                 >
-                  {{ contact.attention }}
-                </option>
-              </select>
-            </label>
-            <label class="field">
-              <span>{{ t('manualInvoice.company') }}</span>
-              <input
-                v-model.trim="form.recipient.company"
-                type="text"
-                required
-              >
-            </label>
-            <label class="field">
-              <span>{{ t('manualInvoice.attention') }}</span>
-              <input
-                v-model.trim="form.recipient.attention"
-                type="text"
-                required
-              >
-            </label>
+              </div>
+            </div>
+
+            <div class="field">
+              <div class="field__heading">
+                <label for="invoice-attention">Attention</label>
+              </div>
+              <div class="directory-control directory-control--manual">
+                <select
+                  id="invoice-attention"
+                  v-model="form.recipient.contact_id"
+                  data-testid="recipient-contact-id"
+                >
+                  <option :value="MANUAL_SELECTION">
+                    Manual
+                  </option>
+                  <option
+                    v-for="contact in recipientContacts"
+                    :key="contact.contact_id"
+                    :value="contact.contact_id"
+                  >
+                    {{ contact.attention }}
+                  </option>
+                </select>
+                <input
+                  v-model.trim="form.recipient.attention"
+                  type="text"
+                  autocomplete="off"
+                  placeholder="输入 Attention"
+                  required
+                >
+              </div>
+            </div>
+
             <label class="field field--wide">
-              <span>{{ t('manualInvoice.address') }}</span>
+              <span class="field-label">Address</span>
               <textarea
                 v-model.trim="form.recipient.address"
                 rows="3"
+                placeholder="输入客户完整账单地址"
                 required
               />
             </label>
+
             <label class="field">
-              <span>{{ t('manualInvoice.telephone') }}</span>
+              <span class="field-label">Tel</span>
               <input
                 v-model.trim="form.recipient.telephone"
                 data-testid="recipient-telephone"
                 type="tel"
+                autocomplete="off"
                 required
               >
             </label>
+
             <label class="field">
-              <span>{{ t('manualInvoice.email') }}</span>
+              <span class="field-label">Email</span>
               <input
                 v-model.trim="form.recipient.email"
                 data-testid="recipient-email"
                 type="email"
+                autocomplete="off"
                 required
               >
             </label>
+
+            <div class="field">
+              <div class="field__heading">
+                <label for="invoice-booking-date">Booking Date</label>
+              </div>
+              <div class="date-control">
+                <input
+                  id="invoice-booking-date"
+                  v-model="form.document.booking_date"
+                  data-testid="document-booking-date"
+                  type="date"
+                  required
+                  @input="markDocumentDatesEdited"
+                >
+                <output
+                  class="date-preview"
+                  for="invoice-booking-date"
+                >
+                  <small>最终格式</small>
+                  <strong>{{ formatDatePreview(form.document.booking_date) }}</strong>
+                </output>
+              </div>
+            </div>
           </div>
         </section>
 
-        <section class="invoice-panel">
-          <div class="section-heading">
-            <h2>{{ t('manualInvoice.bookingSection') }}</h2>
-          </div>
-          <div class="form-grid form-grid--two">
+        <section
+          class="section-card"
+          aria-labelledby="reservation-title"
+        >
+          <header class="section-header">
+            <div class="section-title">
+              <span class="section-index">02</span>
+              <h2 id="reservation-title">
+                Please refer to the following reservation
+              </h2>
+            </div>
+          </header>
+
+          <div class="form-grid">
             <label class="field field--wide">
-              <span>{{ t('manualInvoice.groupName') }}</span>
+              <span class="field-label">Group Name</span>
               <input
                 v-model.trim="form.booking.group_name"
                 data-testid="booking-group-name"
                 type="text"
+                autocomplete="off"
                 required
               >
+              <small class="field__hint">Group Name 与 Group Code 在本流程中为同一字段。</small>
             </label>
+
+            <div class="field">
+              <div class="field__heading">
+                <label for="invoice-arrival-date">Arrival Date</label>
+              </div>
+              <div class="date-control">
+                <input
+                  id="invoice-arrival-date"
+                  v-model="form.booking.arrival_date"
+                  data-testid="booking-arrival-date"
+                  type="date"
+                  required
+                >
+                <output
+                  class="date-preview"
+                  data-testid="arrival-date-preview"
+                  for="invoice-arrival-date"
+                >
+                  <small>最终格式</small>
+                  <strong>{{ formatDatePreview(form.booking.arrival_date) }}</strong>
+                </output>
+              </div>
+            </div>
+
+            <div class="field">
+              <div class="field__heading">
+                <label for="invoice-departure-date">Departure Date</label>
+              </div>
+              <div class="date-control">
+                <input
+                  id="invoice-departure-date"
+                  v-model="form.booking.departure_date"
+                  data-testid="booking-departure-date"
+                  type="date"
+                  required
+                >
+                <output
+                  class="date-preview"
+                  data-testid="departure-date-preview"
+                  for="invoice-departure-date"
+                >
+                  <small>最终格式</small>
+                  <strong>{{ formatDatePreview(form.booking.departure_date) }}</strong>
+                </output>
+              </div>
+            </div>
+
+            <div class="field">
+              <div class="field__heading">
+                <label for="invoice-due-date">Due Date</label>
+              </div>
+              <div class="date-control">
+                <input
+                  id="invoice-due-date"
+                  v-model="form.document.due_date"
+                  data-testid="document-due-date"
+                  type="date"
+                  required
+                  @input="markDocumentDatesEdited"
+                >
+                <output
+                  class="date-preview"
+                  data-testid="due-date-preview"
+                  for="invoice-due-date"
+                >
+                  <small>最终格式</small>
+                  <strong>{{ formatDatePreview(form.document.due_date) }}</strong>
+                </output>
+              </div>
+            </div>
+
+            <div class="field">
+              <div class="field__heading">
+                <span class="field-label">Room Rate</span>
+              </div>
+              <div class="room-rate-control">
+                <label>
+                  <span class="control-caption">金额</span>
+                  <div class="number-control">
+                    <input
+                      v-model="primaryCharge.rate"
+                      data-testid="primary-room-rate"
+                      type="text"
+                      inputmode="decimal"
+                      autocomplete="off"
+                      required
+                    >
+                    <span
+                      class="number-suffix"
+                      aria-hidden="true"
+                    >rm/n</span>
+                  </div>
+                </label>
+                <label>
+                  <span class="control-caption">说明</span>
+                  <input
+                    v-model.trim="form.booking.room_rate_note"
+                    data-testid="booking-room-rate-note"
+                    type="text"
+                    placeholder="例如 includingBF"
+                    autocomplete="off"
+                  >
+                </label>
+              </div>
+            </div>
+
             <label class="field">
-              <span>{{ t('manualInvoice.arrivalDate') }}</span>
-              <input
-                v-model="form.booking.arrival_date"
-                data-testid="booking-arrival-date"
-                type="date"
-                required
-              >
-            </label>
-            <label class="field">
-              <span>{{ t('manualInvoice.departureDate') }}</span>
-              <input
-                v-model="form.booking.departure_date"
-                data-testid="booking-departure-date"
-                type="date"
-                required
-              >
-            </label>
-            <label class="field">
-              <span>{{ t('manualInvoice.extraBedRate') }}</span>
+              <span class="field-label">Extra bed</span>
               <input
                 v-model="form.booking.extra_bed_rate"
                 data-testid="booking-extra-bed-rate"
-                type="number"
-                min="0"
-                step="0.01"
+                type="text"
+                inputmode="decimal"
+                autocomplete="off"
               >
             </label>
-            <label class="field field--wide">
-              <span>{{ t('manualInvoice.roomRateNote') }}</span>
-              <textarea
-                v-model.trim="form.booking.room_rate_note"
-                data-testid="booking-room-rate-note"
-                rows="3"
-              />
-            </label>
+
+            <div class="field">
+              <div class="field__heading">
+                <label for="invoice-room-count">No.of Room (s)</label>
+              </div>
+              <div class="number-control">
+                <input
+                  id="invoice-room-count"
+                  v-model="primaryCharge.quantity"
+                  data-testid="primary-room-count"
+                  type="text"
+                  inputmode="numeric"
+                  autocomplete="off"
+                  required
+                >
+                <span
+                  class="number-suffix"
+                  aria-hidden="true"
+                >Rooms</span>
+              </div>
+            </div>
+
+            <div class="field">
+              <div class="field__heading">
+                <label for="invoice-night-count">No.of Night (s)</label>
+              </div>
+              <div class="number-control">
+                <input
+                  id="invoice-night-count"
+                  v-model="primaryCharge.nights"
+                  data-testid="primary-night-count"
+                  type="text"
+                  inputmode="numeric"
+                  autocomplete="off"
+                  required
+                >
+                <span
+                  class="number-suffix"
+                  aria-hidden="true"
+                >Nights</span>
+              </div>
+            </div>
           </div>
         </section>
 
-        <section class="invoice-panel">
-          <div class="section-heading section-heading--inline">
-            <div>
-              <h2>{{ t('manualInvoice.chargesSection') }}</h2>
-              <p>{{ t('manualInvoice.maxChargesReached') }}</p>
+        <section
+          class="section-card"
+          aria-labelledby="description-amount-title"
+        >
+          <header class="section-header">
+            <div class="section-title">
+              <span class="section-index">03</span>
+              <h2 id="description-amount-title">
+                Description&amp;Amount
+              </h2>
             </div>
-            <button
-              type="button"
-              class="secondary-button"
-              data-testid="manual-invoice-add-charge"
-              :disabled="form.charges.length >= MAX_CHARGE_LINES"
-              @click="addCharge"
-            >
-              <i
-                class="pi pi-plus"
-                aria-hidden="true"
-              />
-              {{ t('manualInvoice.addCharge') }}
-            </button>
-          </div>
-
-          <div class="charge-list">
-            <div class="charge-row charge-row--head">
-              <span>{{ t('manualInvoice.description') }}</span>
-              <span>{{ t('manualInvoice.roomType') }}</span>
-              <span>{{ t('manualInvoice.quantity') }}</span>
-              <span>{{ t('manualInvoice.rate') }}</span>
-              <span>{{ t('manualInvoice.nights') }}</span>
-              <span>{{ t('manualInvoice.amount') }}</span>
-              <span />
-            </div>
-            <div
-              v-for="(charge, index) in form.charges"
-              :key="charge.id"
-              class="charge-row"
-              :data-testid="`charge-row-${index}`"
-            >
-              <input
-                v-model.trim="charge.description"
-                :data-testid="`charge-description-${index}`"
-                type="text"
-                required
-              >
-              <input
-                v-model.trim="charge.room_type"
-                :data-testid="`charge-room-type-${index}`"
-                type="text"
-                required
-              >
-              <input
-                v-model="charge.quantity"
-                :data-testid="`charge-quantity-${index}`"
-                type="number"
-                min="0"
-                step="1"
-                required
-              >
-              <input
-                v-model="charge.rate"
-                :data-testid="`charge-rate-${index}`"
-                type="number"
-                min="0"
-                step="0.01"
-                required
-              >
-              <input
-                v-model="charge.nights"
-                :data-testid="`charge-nights-${index}`"
-                type="number"
-                min="0"
-                step="1"
-                required
-              >
-              <strong>{{ formatMoney(lineAmount(charge), previewCurrency) }}</strong>
+            <div class="section-actions">
+              <span class="currency-badge">BHT</span>
               <button
+                id="add-charge"
                 type="button"
-                class="icon-button"
-                :disabled="form.charges.length === 1"
-                :aria-label="t('manualInvoice.removeCharge')"
-                @click="removeCharge(index)"
+                class="add-button"
+                data-testid="manual-invoice-add-charge"
+                :disabled="form.charges.length >= MAX_CHARGE_LINES"
+                @click="addCharge"
               >
                 <i
-                  class="pi pi-trash"
+                  class="pi pi-plus"
                   aria-hidden="true"
                 />
+                新增一行
               </button>
             </div>
+          </header>
+
+          <div class="charge-lines">
+            <article
+              v-for="(charge, index) in form.charges"
+              :key="charge.id"
+              class="charge-line"
+              :data-testid="`charge-row-${index}`"
+            >
+              <header class="charge-line__header">
+                <strong>第 {{ index + 1 }} 行</strong>
+                <button
+                  type="button"
+                  class="remove-button"
+                  :disabled="form.charges.length === 1"
+                  :aria-label="`删除第 ${index + 1} 行`"
+                  @click="removeCharge(index)"
+                >
+                  <i
+                    class="pi pi-trash"
+                    aria-hidden="true"
+                  />
+                  删除
+                </button>
+              </header>
+
+              <div class="charge-grid">
+                <label class="field charge-field--description">
+                  <span class="field-label">Description</span>
+                  <input
+                    v-model.trim="charge.description"
+                    :data-testid="`charge-description-${index}`"
+                    type="text"
+                    autocomplete="off"
+                    required
+                  >
+                </label>
+                <label class="field charge-field--room-type">
+                  <span class="field-label">Room Types</span>
+                  <input
+                    v-model.trim="charge.room_type"
+                    :data-testid="`charge-room-type-${index}`"
+                    type="text"
+                    autocomplete="off"
+                    required
+                  >
+                </label>
+                <label class="field">
+                  <span class="field-label">Quantity (s)</span>
+                  <input
+                    v-model="charge.quantity"
+                    :data-testid="`charge-quantity-${index}`"
+                    type="text"
+                    inputmode="numeric"
+                    autocomplete="off"
+                    required
+                  >
+                </label>
+                <label class="field">
+                  <span class="field-label">Rate</span>
+                  <input
+                    v-model="charge.rate"
+                    :data-testid="`charge-rate-${index}`"
+                    type="text"
+                    inputmode="decimal"
+                    autocomplete="off"
+                    required
+                  >
+                </label>
+                <label class="field">
+                  <span class="field-label">Night (s)</span>
+                  <input
+                    v-model="charge.nights"
+                    :data-testid="`charge-nights-${index}`"
+                    type="text"
+                    inputmode="numeric"
+                    autocomplete="off"
+                    required
+                  >
+                </label>
+                <div class="charge-amount">
+                  <span>Amount (Bht)</span>
+                  <output :data-testid="`charge-amount-${index}`">
+                    {{ formatMoney(lineAmount(charge), previewCurrency) }}
+                  </output>
+                </div>
+              </div>
+            </article>
           </div>
+
+          <footer class="results">
+            <dl>
+              <div>
+                <dt>Sub-Total</dt>
+                <dd>{{ formatMoney(previewTotals.subtotal, previewCurrency) }}</dd>
+              </div>
+              <div>
+                <dt>VAT 7%</dt>
+                <dd>{{ formatMoney(previewTotals.vat, previewCurrency) }}</dd>
+              </div>
+              <div class="total-row">
+                <dt>Total amount</dt>
+                <dd>{{ formatMoney(previewTotals.total, previewCurrency) }}</dd>
+              </div>
+            </dl>
+          </footer>
         </section>
       </div>
 
-      <aside class="invoice-side">
-        <section class="invoice-panel">
-          <div class="section-heading">
-            <h2>{{ t('manualInvoice.previewSection') }}</h2>
-            <p>{{ t('manualInvoice.previewDisclaimer') }}</p>
-          </div>
-          <dl class="totals-list">
-            <div>
-              <dt>{{ t('manualInvoice.subtotal') }}</dt>
-              <dd>{{ formatMoney(previewTotals.subtotal, previewCurrency) }}</dd>
-            </div>
-            <div>
-              <dt>{{ t('manualInvoice.vat') }}</dt>
-              <dd>{{ formatMoney(previewTotals.vat, previewCurrency) }}</dd>
-            </div>
-            <div class="total-row">
-              <dt>{{ t('manualInvoice.total') }}</dt>
-              <dd>{{ formatMoney(previewTotals.total, previewCurrency) }}</dd>
-            </div>
-          </dl>
-          <button
-            type="submit"
-            class="primary-button"
-            data-testid="manual-invoice-submit"
-            :disabled="submitting"
-            @click.prevent="submitInvoice"
-          >
-            <i
-              class="pi pi-file-pdf"
-              aria-hidden="true"
-            />
-            {{ submitting ? t('manualInvoice.generating') : t('manualInvoice.generate') }}
-          </button>
-        </section>
-
-        <section
-          v-if="messages.length > 0"
-          class="invoice-alert"
-          :class="`invoice-alert--${alertTone}`"
+      <footer
+        class="action-bar"
+        data-testid="manual-invoice-action-bar"
+      >
+        <button
+          type="submit"
+          class="generate-button"
+          data-testid="manual-invoice-submit"
+          :disabled="submitting"
+          @click.prevent="submitInvoice"
         >
-          <strong>{{ alertTitle }}</strong>
-          <ul data-testid="manual-invoice-user-messages">
+          <i
+            class="pi pi-file-pdf"
+            aria-hidden="true"
+          />
+          {{ submitting ? '生成中' : '确认并生成 PDF' }}
+        </button>
+      </footer>
+
+      <section
+        v-if="messages.length > 0"
+        class="section-card invoice-alert"
+        :class="`invoice-alert--${alertTone}`"
+      >
+        <strong>{{ alertTitle }}</strong>
+        <ul data-testid="manual-invoice-user-messages">
+          <li
+            v-for="message in messages"
+            :key="message"
+          >
+            {{ message }}
+          </li>
+        </ul>
+        <details
+          v-if="technicalDetails.length > 0"
+          class="technical-details"
+          data-testid="manual-invoice-technical-details"
+        >
+          <summary>{{ t('manualInvoice.technicalDetails') }}</summary>
+          <ul>
             <li
-              v-for="message in messages"
-              :key="message"
+              v-for="detail in technicalDetails"
+              :key="detail"
             >
-              {{ message }}
+              {{ detail }}
             </li>
           </ul>
-          <details
-            v-if="technicalDetails.length > 0"
-            class="technical-details"
-            data-testid="manual-invoice-technical-details"
-          >
-            <summary>{{ t('manualInvoice.technicalDetails') }}</summary>
-            <ul>
-              <li
-                v-for="detail in technicalDetails"
-                :key="detail"
-              >
-                {{ detail }}
-              </li>
-            </ul>
-          </details>
-        </section>
+        </details>
+      </section>
 
-        <section
-          v-if="generationResult"
-          class="invoice-panel result-panel"
-        >
-          <div class="section-heading">
+      <section
+        v-if="generationResult"
+        class="section-card result-card"
+      >
+        <header class="section-header">
+          <div class="section-title">
+            <span class="section-index">PDF</span>
             <h2>{{ t('manualInvoice.resultSection') }}</h2>
           </div>
-          <dl class="result-list">
-            <div>
-              <dt>{{ t('manualInvoice.generationId') }}</dt>
-              <dd>{{ generationResult.invoice_generation_id }}</dd>
-            </div>
-            <div>
-              <dt>{{ t('manualInvoice.generationStatus') }}</dt>
-              <dd>{{ formatGenerationStatus(generationResult.generation_status) }}</dd>
-            </div>
-            <div>
-              <dt>{{ t('manualInvoice.hotelId') }}</dt>
-              <dd>{{ generationResult.hotel_id }}</dd>
-            </div>
-            <div>
-              <dt>{{ t('manualInvoice.templateCode') }}</dt>
-              <dd>{{ generationResult.template_code }}</dd>
-            </div>
-            <div>
-              <dt>{{ t('manualInvoice.createdAt') }}</dt>
-              <dd>{{ formatReservationDateTime(generationResult.created_at) }}</dd>
-            </div>
-          </dl>
-
-          <div
-            v-if="generationResult.pdf_url"
-            class="result-actions"
-          >
-            <a
-              class="primary-link"
-              :href="generationResult.pdf_url"
-              target="_blank"
-              rel="noreferrer"
-            >
-              {{ t('manualInvoice.openPdf') }}
-            </a>
-            <button
-              type="button"
-              class="secondary-link"
-              data-testid="manual-invoice-download-pdf"
-              :disabled="downloadingPdf"
-              @click="downloadPdf"
-            >
-              {{ downloadingPdf ? t('manualInvoice.downloadingPdf') : t('manualInvoice.downloadPdf') }}
-            </button>
+        </header>
+        <dl class="result-list">
+          <div>
+            <dt>{{ t('manualInvoice.generationId') }}</dt>
+            <dd>{{ generationResult.invoice_generation_id }}</dd>
           </div>
-          <p
-            v-if="downloadMessage"
-            class="muted-text"
-            data-testid="manual-invoice-download-message"
+          <div>
+            <dt>{{ t('manualInvoice.generationStatus') }}</dt>
+            <dd>{{ formatGenerationStatus(generationResult.generation_status) }}</dd>
+          </div>
+          <div>
+            <dt>{{ t('manualInvoice.createdAt') }}</dt>
+            <dd>{{ formatReservationDateTime(generationResult.created_at) }}</dd>
+          </div>
+          <div>
+            <dt>{{ t('manualInvoice.total') }}</dt>
+            <dd>{{ formatMoney(generationResult.totals.total, generationResult.totals.currency) }}</dd>
+          </div>
+        </dl>
+        <div
+          v-if="generationResult.pdf_url"
+          class="result-actions"
+        >
+          <a
+            class="primary-link"
+            :href="generationResult.pdf_url"
+            target="_blank"
+            rel="noreferrer"
           >
-            {{ downloadMessage }}
-          </p>
-          <p
-            v-if="!generationResult.pdf_url"
-            class="muted-text"
+            {{ t('manualInvoice.openPdf') }}
+          </a>
+          <button
+            type="button"
+            class="secondary-link"
+            data-testid="manual-invoice-download-pdf"
+            :disabled="downloadingPdf"
+            @click="downloadPdf"
           >
-            {{ t('manualInvoice.noPdfUrl') }}
-          </p>
-
-          <h3>{{ t('manualInvoice.backendTotals') }}</h3>
-          <dl class="totals-list totals-list--compact">
-            <div>
-              <dt>{{ t('manualInvoice.subtotal') }}</dt>
-              <dd>{{ formatMoney(generationResult.totals.subtotal, generationResult.totals.currency) }}</dd>
-            </div>
-            <div>
-              <dt>{{ t('manualInvoice.vat') }}</dt>
-              <dd>{{ formatMoney(generationResult.totals.vat, generationResult.totals.currency) }}</dd>
-            </div>
-            <div class="total-row">
-              <dt>{{ t('manualInvoice.total') }}</dt>
-              <dd>{{ formatMoney(generationResult.totals.total, generationResult.totals.currency) }}</dd>
-            </div>
-          </dl>
-        </section>
-      </aside>
+            {{ downloadingPdf ? t('manualInvoice.downloadingPdf') : t('manualInvoice.downloadPdf') }}
+          </button>
+        </div>
+        <p
+          v-if="downloadMessage"
+          class="muted-text"
+          data-testid="manual-invoice-download-message"
+        >
+          {{ downloadMessage }}
+        </p>
+        <p
+          v-if="!generationResult.pdf_url"
+          class="muted-text"
+        >
+          {{ t('manualInvoice.noPdfUrl') }}
+        </p>
+      </section>
     </form>
-  </div>
+  </main>
 </template>
 
 <script setup lang="ts">
@@ -451,6 +623,7 @@ import type {
 import { formatReservationDateTime } from '@/utils/reservationFormat'
 
 const MAX_CHARGE_LINES = 10
+const MANUAL_SELECTION = 'MANUAL'
 const VAT_RATE = 0.07
 const previewCurrency = 'THB'
 
@@ -609,6 +782,10 @@ const recipientContacts = computed(() => {
   return recipientCompanies.find((company) => company.company_code === form.recipient.company_code)?.contacts ?? []
 })
 
+const primaryCharge = computed<ChargeForm>(() => form.charges[0] as ChargeForm)
+
+const sourceGroupName = computed(() => form.booking.group_name.trim() || '未填写')
+
 const previewTotals = computed(() => {
   const total = form.charges.reduce((sum, charge) => sum + lineAmount(charge), 0)
   const subtotal = total / (1 + VAT_RATE)
@@ -630,6 +807,10 @@ const alertTitle = computed(() => {
 watch(
   () => form.recipient.company_code,
   (companyCode) => {
+    if (companyCode === MANUAL_SELECTION) {
+      applyManualCompanySelection()
+      return
+    }
     const company = recipientCompanies.find((item) => item.company_code === companyCode)
     if (!company) {
       form.recipient.contact_id = ''
@@ -646,6 +827,10 @@ watch(
 watch(
   () => form.recipient.contact_id,
   (contactId) => {
+    if (contactId === MANUAL_SELECTION) {
+      clearRecipientContactProfile()
+      return
+    }
     applyContactSeed(contactId)
   },
 )
@@ -760,8 +945,8 @@ function buildRequest(): ManualInvoiceGenerationRequest {
         due_date: form.document.due_date,
       },
       recipient: {
-        company_code: form.recipient.company_code || null,
-        contact_id: form.recipient.contact_id || null,
+        company_code: directoryCodeOrNull(form.recipient.company_code),
+        contact_id: directoryCodeOrNull(form.recipient.contact_id),
         company: form.recipient.company.trim(),
         attention: form.recipient.attention.trim(),
         address: form.recipient.address.trim(),
@@ -885,6 +1070,21 @@ function applyContactSeed(contactId: string): void {
   form.recipient.email = contact.email
 }
 
+function applyManualCompanySelection(): void {
+  form.recipient.company = ''
+  if (form.recipient.contact_id !== MANUAL_SELECTION) {
+    form.recipient.contact_id = MANUAL_SELECTION
+  }
+  clearRecipientContactProfile()
+}
+
+function clearRecipientContactProfile(): void {
+  form.recipient.attention = ''
+  form.recipient.address = ''
+  form.recipient.telephone = ''
+  form.recipient.email = ''
+}
+
 function markDocumentDatesEdited(): void {
   documentDatesEdited.value = true
 }
@@ -921,7 +1121,7 @@ function optionalNumberValue(value: string | number): number | null {
 }
 
 function parseNumericInput(value: string | number): number | null {
-  const trimmed = String(value).trim()
+  const trimmed = String(value).replace(/,/g, '').trim()
   if (!trimmed) {
     return null
   }
@@ -934,6 +1134,13 @@ function trimToNull(value: string): string | null {
   return trimmed || null
 }
 
+function directoryCodeOrNull(value: string): string | null {
+  if (!value || value === MANUAL_SELECTION) {
+    return null
+  }
+  return value
+}
+
 function formatMoney(value: number, currency: string): string {
   return new Intl.NumberFormat(locale.value, {
     style: 'currency',
@@ -943,6 +1150,17 @@ function formatMoney(value: number, currency: string): string {
   }).format(value)
 }
 
+function formatDatePreview(value: string): string {
+  if (!value) {
+    return '—'
+  }
+  const [year, month, day] = value.split('-')
+  if (!year || !month || !day) {
+    return '—'
+  }
+  return `${day}/${month}/${year}`
+}
+
 function formatGenerationStatus(status: string): string {
   const key = `manualInvoice.statuses.${status}`
   return te(key) ? t(key) : status
@@ -1006,272 +1224,486 @@ function isRecord(value: unknown): value is Record<string, unknown> {
 </script>
 
 <style scoped>
-.manual-invoice-page {
-  display: grid;
-  gap: 20px;
-}
-
-.page-heading {
-  display: flex;
-  justify-content: space-between;
-  gap: 24px;
-  align-items: flex-end;
-  background: var(--th-color-white);
-  border: 1px solid var(--th-color-border);
-  border-radius: 8px;
-  box-shadow: var(--th-shadow-panel);
-  padding: 24px 28px;
-}
-
-.page-heading h1,
-.page-heading p {
-  margin: 0;
-}
-
-.page-heading h1 {
-  margin-top: 8px;
-  font-size: 28px;
+.invoice-page {
+  width: min(100%, 1244px);
+  margin: 0 auto;
   color: var(--th-color-navy-950);
+  font-variant-numeric: tabular-nums;
 }
 
-.page-heading p {
-  color: var(--th-color-slate-500);
+.invoice-page__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 28px;
+  padding: 6px 2px 4px;
 }
 
-.eyebrow {
-  color: var(--th-color-blue-600);
-  font-weight: 800;
-  font-size: 13px;
+.invoice-page__title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
 }
 
-.page-note {
-  max-width: 360px;
+.invoice-page__title h1 {
+  margin: 0;
+  color: var(--th-color-navy-950);
+  font-size: clamp(24px, 3vw, 34px);
+  line-height: 1.15;
+}
+
+.draft-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex: 0 0 auto;
+  border-radius: 999px;
+  background: #fff5df;
+  color: #c87905;
+  font-size: 10px;
+  font-weight: 900;
+  padding: 6px 9px;
+}
+
+.source-summary {
+  display: grid;
+  justify-items: end;
+  gap: 3px;
+  flex: 0 0 auto;
   text-align: right;
 }
 
-.manual-invoice-layout {
+.source-summary span,
+.source-summary small {
+  color: var(--th-color-slate-500);
+  font-size: 10px;
+}
+
+.source-summary strong {
+  max-width: 360px;
+  overflow-wrap: anywhere;
+  color: var(--th-color-navy-950);
+  font-size: 14px;
+}
+
+.invoice-form,
+.invoice-form-column {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 360px;
-  gap: 20px;
-  align-items: start;
+  gap: 18px;
+  min-width: 0;
 }
 
-.invoice-form-stack,
-.invoice-side {
-  display: grid;
-  gap: 16px;
+.invoice-form {
+  margin-top: 18px;
 }
 
-.invoice-side {
-  position: sticky;
-  top: 20px;
-}
-
-.invoice-panel,
-.invoice-alert {
-  background: var(--th-color-white);
+.section-card {
+  min-width: 0;
+  overflow: hidden;
   border: 1px solid var(--th-color-border);
   border-radius: 8px;
+  background: var(--th-color-white);
   box-shadow: var(--th-shadow-panel);
-  padding: 20px;
 }
 
-.section-heading {
-  display: grid;
-  gap: 4px;
-  margin-bottom: 16px;
-}
-
-.section-heading--inline {
+.section-header {
   display: flex;
-  justify-content: space-between;
-  gap: 16px;
   align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 20px 22px 18px;
 }
 
-.section-heading h2 {
+.section-title,
+.section-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.section-index {
+  color: var(--th-color-blue-600);
+  font-size: 11px;
+  font-weight: 900;
+  letter-spacing: 0.08em;
+}
+
+.section-title h2 {
   margin: 0;
   color: var(--th-color-navy-950);
-  font-size: 18px;
+  font-size: 17px;
+  line-height: 1.35;
 }
 
-.section-heading p {
-  margin: 0;
+.currency-badge {
+  border: 1px solid var(--th-color-border);
+  border-radius: 999px;
   color: var(--th-color-slate-500);
-  font-size: 13px;
+  font-size: 10px;
+  font-weight: 900;
+  padding: 6px 9px;
 }
 
 .form-grid {
   display: grid;
-  gap: 14px;
-}
-
-.form-grid--two {
   grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.form-grid--three {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 18px;
+  min-width: 0;
+  border-top: 1px solid var(--th-color-border);
+  padding: 20px 22px 24px;
 }
 
 .field {
   display: grid;
-  gap: 7px;
-  color: var(--th-color-slate-500);
-  font-weight: 800;
-  font-size: 13px;
+  align-content: start;
+  gap: 8px;
+  min-width: 0;
 }
 
 .field--wide {
   grid-column: 1 / -1;
 }
 
+.field__heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  min-height: 22px;
+}
+
+.field__heading label,
+.field-label {
+  color: var(--th-color-slate-600);
+  font-size: 12px;
+  font-weight: 800;
+}
+
 .field input,
 .field select,
 .field textarea,
-.charge-row input {
+.charge-grid input {
   width: 100%;
+  min-width: 0;
+  min-height: 40px;
   border: 1px solid var(--th-color-border);
-  border-radius: 8px;
+  border-radius: 6px;
   background: var(--th-color-white);
   color: var(--th-color-navy-950);
   font: inherit;
   font-weight: 700;
-  padding: 11px 12px;
+  padding: 10px 11px;
   outline: none;
+  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
 }
 
 .field textarea {
+  min-height: 88px;
   resize: vertical;
+  line-height: 1.45;
 }
 
-.field input:focus,
-.field select:focus,
-.field textarea:focus,
-.charge-row input:focus {
-  border-color: var(--th-color-blue-600);
-  box-shadow: 0 0 0 3px rgb(37 99 235 / 12%);
+.field input:hover,
+.field select:hover,
+.field textarea:hover,
+.charge-grid input:hover {
+  border-color: #b9c8dc;
 }
 
-.charge-list {
-  display: grid;
-  gap: 8px;
-  overflow-x: auto;
+.field input:focus-visible,
+.field select:focus-visible,
+.field textarea:focus-visible,
+.charge-grid input:focus-visible,
+.add-button:focus-visible,
+.remove-button:focus-visible,
+.generate-button:focus-visible,
+.primary-link:focus-visible,
+.secondary-link:focus-visible {
+  outline: 3px solid rgb(18 103 255 / 24%);
+  outline-offset: 2px;
 }
 
-.charge-row {
-  min-width: 980px;
-  display: grid;
-  grid-template-columns: minmax(220px, 1.5fr) minmax(140px, 1fr) 96px 120px 96px 140px 44px;
-  gap: 10px;
-  align-items: center;
-}
-
-.charge-row--head {
+.field__hint {
+  display: block;
+  min-height: 16px;
   color: var(--th-color-slate-500);
+  font-size: 11px;
+  line-height: 1.45;
+}
+
+.directory-control {
+  display: grid;
+  min-width: 0;
+}
+
+.directory-control--manual {
+  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+  align-items: start;
+  gap: 10px;
+}
+
+.date-control,
+.number-control {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  min-width: 0;
+}
+
+.date-control input,
+.number-control input {
+  border-radius: 6px 0 0 6px;
+}
+
+.date-preview,
+.number-suffix {
+  display: grid;
+  align-content: center;
+  border: 1px solid var(--th-color-border);
+  border-left: 0;
+  border-radius: 0 6px 6px 0;
+  background: var(--th-color-slate-50);
+  padding: 5px 10px;
+}
+
+.date-preview {
+  min-width: 118px;
+}
+
+.date-preview small {
+  color: var(--th-color-slate-500);
+  font-size: 9px;
+}
+
+.date-preview strong {
+  color: var(--th-color-slate-600);
+  font-size: 11px;
+}
+
+.number-suffix {
+  place-items: center;
+  min-width: 62px;
+  color: var(--th-color-slate-500);
+  font-size: 11px;
   font-weight: 800;
-  font-size: 12px;
-  padding: 0 2px;
 }
 
-.charge-row strong {
-  color: var(--th-color-navy-950);
-  font-size: 14px;
+.room-rate-control {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-items: start;
+  gap: 10px;
 }
 
-.primary-button,
-.secondary-button,
-.icon-button,
+.room-rate-control label {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+}
+
+.control-caption {
+  color: var(--th-color-slate-500);
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.add-button,
+.remove-button,
+.generate-button,
 .primary-link,
 .secondary-link {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 8px;
-  border-radius: 8px;
+  gap: 7px;
+  border-radius: 6px;
   font-weight: 800;
   text-decoration: none;
+  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
 }
 
-.primary-button {
-  width: 100%;
-  border: 0;
+.add-button,
+.remove-button {
+  min-height: 34px;
+  font-size: 11px;
+  padding: 0 11px;
+}
+
+.add-button {
+  border: 1px solid var(--th-color-blue-600);
   background: var(--th-color-blue-600);
   color: var(--th-color-white);
-  padding: 12px 16px;
-  cursor: pointer;
 }
 
-.secondary-button {
-  border: 1px solid var(--th-color-border);
-  background: var(--th-color-white);
-  color: var(--th-color-blue-600);
-  padding: 10px 12px;
-  cursor: pointer;
+.add-button:hover {
+  background: #0759e8;
 }
 
-.icon-button {
-  width: 40px;
-  height: 40px;
+.remove-button {
   border: 1px solid var(--th-color-border);
   background: var(--th-color-white);
   color: var(--th-color-slate-500);
-  cursor: pointer;
 }
 
-.primary-button:disabled,
-.secondary-button:disabled,
-.icon-button:disabled,
+.remove-button:hover:not(:disabled) {
+  border-color: #ce2b3f;
+  background: #ffecef;
+  color: #ce2b3f;
+}
+
+.add-button:disabled,
+.remove-button:disabled,
+.generate-button:disabled,
 .secondary-link:disabled {
   cursor: not-allowed;
-  opacity: 0.5;
+  opacity: 0.42;
 }
 
-.totals-list,
-.result-list {
-  display: grid;
+.charge-lines {
+  border-top: 1px solid var(--th-color-border);
+}
+
+.charge-line {
+  padding: 18px 22px 22px;
+}
+
+.charge-line + .charge-line {
+  border-top: 1px solid var(--th-color-border);
+  background: var(--th-color-slate-50);
+}
+
+.charge-line__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   gap: 12px;
+  margin-bottom: 14px;
+}
+
+.charge-line__header strong {
+  color: var(--th-color-slate-500);
+  font-size: 11px;
+}
+
+.charge-grid {
+  display: grid;
+  grid-template-columns: minmax(180px, 2fr) minmax(145px, 1.4fr) repeat(3, minmax(88px, 0.8fr)) minmax(120px, 0.9fr);
+  align-items: start;
+  gap: 14px;
+  min-width: 0;
+}
+
+.charge-amount {
+  display: grid;
+  align-content: start;
+  gap: 8px;
+  min-width: 0;
+}
+
+.charge-amount > span {
+  min-height: 22px;
+  color: var(--th-color-slate-600);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.charge-amount output {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-height: 40px;
+  overflow-wrap: anywhere;
+  border: 1px solid var(--th-color-border);
+  border-radius: 6px;
+  background: var(--th-color-slate-50);
+  color: var(--th-color-navy-950);
+  font-size: 13px;
+  font-weight: 900;
+  padding: 9px 11px;
+}
+
+.results {
+  display: flex;
+  justify-content: flex-end;
+  border-top: 1px solid var(--th-color-border);
+  background: var(--th-color-white);
+  padding: 8px 22px 14px;
+}
+
+.results dl {
+  width: min(100%, 390px);
   margin: 0;
 }
 
-.totals-list div,
+.results dl > div,
 .result-list div {
   display: flex;
+  align-items: center;
   justify-content: space-between;
-  gap: 14px;
-  align-items: baseline;
+  gap: 16px;
+  border-bottom: 1px solid var(--th-color-slate-100);
+  padding: 12px 0;
 }
 
-.totals-list dt,
+.results dl > div:last-child,
+.result-list div:last-child {
+  border-bottom: 0;
+}
+
+.results dt,
 .result-list dt {
   color: var(--th-color-slate-500);
-  font-weight: 800;
+  font-size: 12px;
 }
 
-.totals-list dd,
+.results dd,
 .result-list dd {
   margin: 0;
   color: var(--th-color-navy-950);
+  font-size: 13px;
   font-weight: 900;
   text-align: right;
-  word-break: break-word;
 }
 
-.total-row {
-  border-top: 1px solid var(--th-color-border);
-  padding-top: 12px;
-}
-
-.total-row dd {
+.results .total-row dt,
+.results .total-row dd {
   color: var(--th-color-blue-600);
-  font-size: 20px;
 }
 
-.totals-list--compact .total-row dd {
-  font-size: 16px;
+.action-bar {
+  position: sticky;
+  bottom: 16px;
+  z-index: 8;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-top: 18px;
+  border: 1px solid var(--th-color-border);
+  border-radius: 8px;
+  background: rgb(255 255 255 / 96%);
+  box-shadow: 0 18px 45px rgb(11 31 69 / 16%);
+  padding: 12px 14px;
+  backdrop-filter: blur(12px);
+}
+
+.generate-button {
+  min-height: 44px;
+  border: 0;
+  background: var(--th-color-blue-600);
+  color: var(--th-color-white);
+  font-size: 12px;
+  font-weight: 900;
+  padding: 0 18px;
+}
+
+.generate-button:hover:not(:disabled) {
+  background: #0759e8;
+  box-shadow: 0 8px 18px rgb(18 103 255 / 24%);
 }
 
 .invoice-alert {
+  padding: 18px 22px;
   box-shadow: none;
 }
 
@@ -1304,20 +1736,26 @@ function isRecord(value: unknown): value is Record<string, unknown> {
   word-break: break-word;
 }
 
-.result-panel h3 {
-  margin: 18px 0 12px;
-  color: var(--th-color-navy-950);
-  font-size: 15px;
+.result-card {
+  padding-bottom: 20px;
+}
+
+.result-list {
+  display: grid;
+  gap: 0;
+  margin: 0;
+  padding: 0 22px;
 }
 
 .result-actions {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
+  display: flex;
   gap: 10px;
-  margin-top: 18px;
+  justify-content: flex-end;
+  margin: 18px 22px 0;
 }
 
 .primary-link {
+  border: 1px solid var(--th-color-blue-600);
   background: var(--th-color-blue-600);
   color: var(--th-color-white);
   padding: 10px 12px;
@@ -1333,33 +1771,139 @@ function isRecord(value: unknown): value is Record<string, unknown> {
 }
 
 .muted-text {
+  margin: 12px 22px 0;
   color: var(--th-color-slate-500);
 }
 
-@media (max-width: 1180px) {
-  .manual-invoice-layout {
-    grid-template-columns: 1fr;
+.visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  clip-path: inset(50%) !important;
+}
+
+@media (max-width: 1050px) {
+  .charge-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
-  .invoice-side {
-    position: static;
+  .charge-field--description,
+  .charge-field--room-type {
+    grid-column: span 2;
   }
 }
 
-@media (max-width: 760px) {
-  .page-heading {
-    align-items: flex-start;
-    flex-direction: column;
+@media (max-width: 700px) {
+  .invoice-page__header,
+  .action-bar {
+    align-items: stretch;
+    display: grid;
   }
 
-  .page-note {
-    max-width: none;
+  .invoice-page__title {
+    align-items: flex-start;
+    display: grid;
+  }
+
+  .source-summary {
+    justify-items: start;
     text-align: left;
   }
 
-  .form-grid--two,
-  .form-grid--three {
-    grid-template-columns: 1fr;
+  .form-grid {
+    grid-template-columns: minmax(0, 1fr);
+    padding: 18px 16px 20px;
+  }
+
+  .field--wide {
+    grid-column: auto;
+  }
+
+  .section-header {
+    align-items: stretch;
+    display: grid;
+    padding: 18px 16px 14px;
+  }
+
+  .section-actions {
+    justify-content: space-between;
+  }
+
+  .room-rate-control {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .charge-line {
+    padding: 16px;
+  }
+
+  .charge-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .charge-field--description,
+  .charge-field--room-type {
+    grid-column: 1 / -1;
+  }
+
+  .results {
+    padding: 8px 16px 14px;
+  }
+
+  .action-bar {
+    position: static;
+    padding: 14px;
+  }
+
+  .generate-button {
+    width: 100%;
+  }
+}
+
+@media (max-width: 560px) {
+  .directory-control--manual {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@media (max-width: 480px) {
+  .date-control,
+  .number-control {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .date-control input,
+  .number-control input {
+    border-radius: 6px 6px 0 0;
+  }
+
+  .date-preview,
+  .number-suffix {
+    min-height: 42px;
+    border-top: 0;
+    border-left: 1px solid var(--th-color-border);
+    border-radius: 0 0 6px 6px;
+  }
+
+  .charge-line__header {
+    align-items: stretch;
+    display: grid;
+  }
+
+  .remove-button {
+    width: 100%;
+  }
+
+  .charge-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .charge-field--description,
+  .charge-field--room-type {
+    grid-column: auto;
   }
 }
 </style>
diff --git a/docs/project/frontend-backend/README.md b/docs/project/frontend-backend/README.md
index 8948c71..34b620c 100644
--- a/docs/project/frontend-backend/README.md
+++ b/docs/project/frontend-backend/README.md
@@ -60,7 +60,7 @@
 - 用户 / 权限底座后端 CP1 已完成；前端登录页、动态菜单、管理后台和业务审计 actor 全量迁移仍后置。
 - 真实 OPERA / OHIP 接入后置；当前仅有 OPERA 模拟骨架。
 - 任务卡字段控件契约 V1 后端第一版已完成，任务详情 `fields[]` 已返回 `control_type/edit_scope/write_target/options_source/raw_readonly/control_hint`；前端后续按契约接入，不要硬编码 PMS 房型、Rate Code 或未冻结枚举。
-- Manual Invoice 第一阶段按 M009 推进：后端已提供 `POST /api/reservation/invoices/manual-generations`，前端已新增 `/reservation/invoices/new` 手工开票页面，页面可以不依赖订单或任务，用户手工填写 / 选择字段后由后端业务接口填充 Excel 模板并生成 PDF；前端不得直接调用 M008 的调试上传转换接口来完成业务开票。侧边栏入口仍以登录后端返回的 menus 为准，建议后续在菜单管理中配置 `RESERVATION_MANUAL_INVOICE` / `/reservation/invoices/new` / `RESERVATION_INVOICE_GENERATE`。
+- Manual Invoice 第一阶段按 M009 推进：后端已提供 `POST /api/reservation/invoices/manual-generations`，前端已新增 `/reservation/invoices/new` 手工开票页面，并已按 `invoice.html` 原型的三段式业务结构对齐；页面可以不依赖订单或任务，用户手工填写 / 选择字段后由后端业务接口填充 Excel 模板并生成 PDF；前端不得直接调用 M008 的调试上传转换接口来完成业务开票。侧边栏入口仍以登录后端返回的 menus 为准，建议后续在菜单管理中配置 `RESERVATION_MANUAL_INVOICE` / `/reservation/invoices/new` / `RESERVATION_INVOICE_GENERATE`。
 
 ## 6. 前端开发注意事项
 
diff --git a/docs/project/frontend-backend/backend-to-frontend-notes.md b/docs/project/frontend-backend/backend-to-frontend-notes.md
index 384905a..2ba82a7 100644
--- a/docs/project/frontend-backend/backend-to-frontend-notes.md
+++ b/docs/project/frontend-backend/backend-to-frontend-notes.md
@@ -383,8 +383,9 @@ M009 后端 CP2 已实现：页面可不依赖订单或任务，用户手工填
 
 前端注意：
 
-- 当前 `invoice.html` 可以作为交互原型和控件参考，但不能直接作为生产页面上线。
+- 前端 V1 已按 `invoice.html` 的业务排版和字段关系实现为项目内页面，但不是直接上线原始 HTML。
 - 前端 V1 已新增 `/reservation/invoices/new` 页面，按 `RESERVATION_INVOICE_GENERATE` 路由权限保护，使用登录态 Bearer token 调用正式业务接口。
+- 页面第一版保留原型中的英文业务字段标签，暂不新增 i18n；后续若 Manual Invoice 纳入三语言范围，再统一接入语言包。
 - 页面已支持无订单 / 无任务独立生成，固定提交 `source_type=MANUAL`，`order_id=null`，`task_id=null`；暂不做订单 / 任务自动预填。
 - 侧边栏入口不由前端硬编码公开，仍依赖后端登录态 `menus[]`。如需菜单中展示，建议菜单管理配置 `menu_code=RESERVATION_MANUAL_INVOICE`、`route_path=/reservation/invoices/new`、`permission_code=RESERVATION_INVOICE_GENERATE`。
 - 第一阶段入口建议是独立页面，例如 `/reservation/invoices/new` 或 `/invoices/new`；不要求必须从任务详情或订单详情进入。
diff --git a/docs/project/requirements/M009-manual-invoice-generation-v1.md b/docs/project/requirements/M009-manual-invoice-generation-v1.md
index 51d2347..677f840 100644
--- a/docs/project/requirements/M009-manual-invoice-generation-v1.md
+++ b/docs/project/requirements/M009-manual-invoice-generation-v1.md
@@ -2,9 +2,9 @@
 
 | 项目 | 内容 |
 | --- | --- |
-| 文档状态 | CP2 后端已实现，前端 CP3 待开发 |
+| 文档状态 | CP3 前端 V1 已完成，后续继续推进订单 / 任务预填、客户目录接口和历史查询 |
 | 适用范围 | 无订单 / 无任务场景下的手工 Invoice 创建，以及后续从任务或订单预填 Invoice |
-| 当前目标 | 第一阶段基于现有 `invoice.html` 原型落地 Manual Invoice Mode；后端已支持手工生成 PDF，前端页面待接入 |
+| 当前目标 | 第一阶段已基于现有 `invoice.html` 原型落地 Manual Invoice Mode；前端页面已接入正式业务接口并按原型三段式结构展示 |
 | 依赖能力 | M008 Excel 转 PDF 平台转换能力、阿里云 OSS、登录权限和酒店上下文 |
 
 ## 1. 背景
@@ -363,12 +363,13 @@ server/src/main/resources/templates/reservation-invoice/proforma-invoice-v1.xlsx
 - 已完成：失败记录保留已上传成功的 Excel / PDF object key；业务审计完成后才标记 `SUCCEEDED`。
 - 第一版限制：只支持 `source_type=MANUAL`、`template_code=PROFORMA_INVOICE_V1`、最多 10 条费用明细；暂不提供历史列表、详情查询、任务 / 订单预填和客户联系人目录查询接口。
 
-### CP3：前端 Manual Invoice 页面
+### CP3：前端 Manual Invoice 页面（已完成 V1）
 
-- 基于当前 `invoice.html` 原型改造成前端项目内页面。
-- 字段控件按“输入 / 选择 + 可手填 / 只读计算 / 模板配置”实现。
-- 提交到后端业务接口，不调用调试上传接口。
-- 展示 PDF 生成结果、错误提示和下载 / 预览入口。
+- 已完成：基于当前 `invoice.html` 原型改造成前端项目内 `/reservation/invoices/new` 页面。
+- 已完成：页面按 `01 Basic Information`、`02 Please refer to the following reservation`、`03 Description&Amount` 三段式结构展示，保留原型字段标签；第一版暂不新增 i18n。
+- 已完成：字段控件按“输入 / 选择 + 可手填 / 只读计算 / 模板配置”实现，第一条费用明细和预订摘要区保持联动。
+- 已完成：提交到后端业务接口，不调用调试上传接口。
+- 已完成：展示 PDF 生成结果、错误提示和下载 / 预览入口。
 
 ### CP4：任务 / 订单预填