♻️ Refactor: Replace Grand Total input field with display element

[desoga10]

Description

The Grand Total is currently implemented as a readonly <input> field. Since it's a calculated value that users should never edit, it should be a proper display element (<div> or <span>) instead.

Current Implementation

<input type="text" [value]="invoiceData().grand_total_price" matInput readonly
  style="border:0;background-color: transparent;margin-right: -140px;font-size: inherit;" />

Why Change This?

User Experience Issues:

• Input fields signal "you can edit this" to users
• Users can still click/focus on it (shows cursor)
• Confusing interaction - looks editable but isn't

Code Quality:

• Not semantically correct (it's display data, not input)
• Inline styles with negative margin hack (margin-right: -140px)
• Screen readers announce it as an editable field (accessibility issue)

Best Practice:

• Calculated/readonly values should be display elements, not inputs
• Cleaner, more maintainable code
• Better accessibility

Proposed Solution

Replace the input with a styled display element:

<div class="grand-total-display">
  {{ invoiceData().grand_total_price | currency }}
</div>

Add CSS (in component styles):

.grand-total-display {
  font-size: inherit;
  font-weight: 600;
  text-align: right;
  padding: 8px 0;
}

Files to Update

• Invoice component template (.html file)
• Invoice component styles (.scss or .css file)

Acceptance Criteria

• Grand Total displays as a <div> or <span> (not an input)
• Value shows with proper currency formatting
• Styling matches current appearance
• No negative margins needed
• Users cannot focus/click on it
• Updates automatically when invoice items change

Learning Opportunity

This is a great first issue because it teaches:

• ✅ When to use semantic HTML (div vs input)
• ✅ Angular pipes (currency formatting)
• ✅ Component styling in Angular
• ✅ Accessibility best practices

Priority

Low - Works correctly, but not best practice

Hints for Contributors

1. Find the Grand Total input in the invoice template
2. Replace <input> with <div>
3. Use Angular's currency pipe for formatting
4. Move inline styles to component CSS
5. Test that it still displays correctly
6. Verify it updates when adding/removing items