●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Multi-page printable quotation layout with a cover page and several detail sheets.
- Responsive Bootstrap tables summarizing coverages and premiums, using .table and .table-responsive.
- Client and policy information sections laid out with Bootstrap grid (row / col-*).
- Visual elements: colored header band, small color squares, Font Awesome icons, and a faint watermark image on internal sheets.
- Print-friendly rules: page-break-after on .sheet and a @media print override for full-width output.
## Key components
- Static Razor UI: HTML markup inside a Blazor .razor component (no EditForm or @bind present).
- Bootstrap classes: container, row, col-md-6, table, table-responsive.
- Styling: component-scoped CSS file (TravelQuotePage.razor.css) with .sheet, .cover-page, .page-sheet::before, media queries.
- Icons: Font Awesome classes (fa-*) used in headings.
## How it works
- The component renders static HTML markup that mimics a multi-page document; each .sheet element represents a print page and uses CSS page-break-after to separate pages when printing.
- Tables present plan columns (Light, Premium, Silver) and static cells for coverage and premium values; no data binding is included so values are hard-coded placeholders.
- The watermark is implemented with a pseudo-element (::before) on .page-sheet and positioned behind content via z-index.
- Responsive behavior is provided by Bootstrap grid and CSS @media rules; print-specific styles override the cover background for printer-friendly output.
## Styling
- Primary layout and components rely on Bootstrap classes and grid system (Bootstrap layout, tables).
- Component-scoped CSS adds print-friendly rules, min-height to emulate page size, watermark (background-image), and visual tokens (colored squares, header-band).
- Print styles include removing shadows and forcing full-width sheets; .page-sheet::before implements the faint watermark.
## Reuse steps
1. Add this Razor file to a Blazor project and include Bootstrap (via CDN or package) and Font Awesome in index.html/_Host.cshtml.
2. Keep TravelQuotePage.razor.css alongside the component so Blazor scoped CSS applies; ensure image placeholders are available or replace URLs with local assets.
3. Replace hard-coded values with a model or component parameters (create a Quote model and pass via @page parameters or inject a service).
4. For server data, add a service and register it in Program.cs; fetch quote, coverage and client data and bind table cells using @bind- or property interpolation.
5. Use window.print() or a PDF generation tool at the app level to print or export the sheets when needed.
## Limitations & next steps
- The component is static and generated by Instruct UI; it contains placeholders for client name, dates and dynamic amounts that require model binding or a data service.
- No authentication, localization, or server-side wiring is included; date formatting and currency localization must be added per project needs.
- Consider adding a view model, parameterized components for tables, and a PDF export service or print dialog integration for production use.