# Template Structure

Recommended file organization for an HTMX + Tailwind rebuild.

## Example Layout

```text
app/
  templates/
    layouts/
      base.html
      auth.html
      shell.html
    pages/
      login.html
      dashboard.html
      orders/
        list.html
        detail.html
        new.html
      results/
        list.html
        detail.html
      fpp/
        list.html
      settings/
        account.html
        change-password.html
    fragments/
      orders/
        table.html
        detail.html
        stepper.html
      results/
        table.html
        detail.html
      fpp/
        list.html
      modals/
        pesan-khusus.html
    components/
      sidebar.html
      topbar.html
      cards.html
      table.html
      empty-state.html
      form-fields.html
      pagination.html
```

## Layouts

### `base.html`

- Includes global Tailwind styles
- Loads HTMX
- Defines meta tags and page title

### `auth.html`

- Used for login and problem-login screens
- Simple centered layout

### `shell.html`

- Used for authenticated app pages
- Includes sidebar on desktop and nav on mobile

## Components

Keep components small and reusable:

- sidebar
- topbar
- action bar
- stat cards
- search/filter bar
- table rows
- empty states
- confirm dialogs
- modal shells

## Fragment Rules

- A fragment should contain only the markup needed for the swap target
- Fragments must be valid standalone HTML snippets
- Do not duplicate full page layout in a fragment

## Tailwind Rules

- Use a consistent spacing scale
- Define semantic color tokens in the design system layer
- Make desktop breakpoints explicit
- Prefer utility composition over custom CSS unless a pattern repeats often

## Responsive Behavior

- Mobile first
- Sidebar becomes drawer or bottom nav
- Tables become cards on small screens
- Forms collapse to one column