# View & Image Improvements — Change Log

All changes are on branch `main`. The work spans the Template Settings feature,
touching 7 existing files and adding 3 new database migrations.

---

## 1. Database Migrations (new files)

### `2026_06_18_000001_add_advanced_options_to_template_settings_table.php`
Adds new columns to `template_settings`:

| Column | Type | Default | Purpose |
|---|---|---|---|
| `header_fixed_desktop` | boolean | true | sticky header on desktop |
| `header_fixed_mobile` | boolean | true | sticky header on mobile |
| `toolbar_width` | string(20) | fluid | toolbar container width |
| `footer_fixed` | boolean | false | sticky footer |
| `footer_width` | string(20) | fluid | footer container width |
| `scrolltop_enabled` | boolean | true | scroll-to-top button visibility |
| `color_secondary` | string(20) | #7E8299 | Bootstrap secondary token |
| `color_light` | string(20) | #F9F9F9 | Bootstrap light token |
| `color_header_bg` | string(20) | #ffffff | header background color |
| `color_body_bg` | string(20) | #f5f8fa | page body background |
| `color_content_bg` | string(20) | #f5f8fa | content area background |
| `color_header_text` | string(20) | #181C32 | header text/icon color |
| `logo_dark` | string (nullable) | — | dark-mode / light-layout logo |
| `favicon` | string (nullable) | — | custom favicon (ico/png/svg) |
| `header_image` | string (nullable) | — | cover image for header bar |

### `2026_06_18_000002_add_layout_builder_options_to_template_settings_table.php`
Adds:

| Column | Type | Default | Purpose |
|---|---|---|---|
| `footer_fixed_mobile` | boolean | false | sticky footer on mobile |
| `aside_enabled` | boolean | false | secondary aside panel |
| `aside_fixed` | boolean | false | sticky aside |
| `toolbar_layout` | string(20) | classic | toolbar style variant |

### `2026_06_18_000003_add_detailed_colors_to_template_settings_table.php`
Adds granular sidebar and body color tokens:

| Column | Type | Default | Purpose |
|---|---|---|---|
| `sidebar_text_color` | string(30) | rgba(255,255,255,0.7) | normal sidebar link text |
| `sidebar_hover_bg_color` | string(30) | rgba(255,255,255,0.1) | link hover background |
| `sidebar_hover_text_color` | string(20) | #ffffff | link hover text |
| `sidebar_heading_color` | string(20) | #9899ac | menu section heading |
| `color_body_text` | string(20) | #071437 | global body text |
| `color_border` | string(20) | #F1F1F4 | global border color |
| `color_heading` | string(20) | #071437 | heading elements color |

---

## 2. Model — `app/Models/TemplateSettings.php`

- Added all new columns to `$attributes` (defaults), `$fillable`, and `$casts`.
- New boolean casts: `header_fixed_desktop`, `header_fixed_mobile`,
  `footer_fixed`, `footer_fixed_mobile`, `aside_enabled`, `aside_fixed`,
  `scrolltop_enabled`.
- New image fields in `$fillable`: `logo_dark`, `favicon`, `header_image`.

---

## 3. Controller — `app/Http/Controllers/Admin/System/TemplateSettingsController.php`

### `update()` method
- Validation rules reorganised into sections (Layout, Sidebar, Header,
  Toolbar, Footer, Colors, Images) for readability.
- Removed old `rtl_mode` and `sidebar_fixed` boolean hacks; all booleans
  now handled via `$request->boolean()` in a dedicated block.
- New booleans handled: `header_fixed_desktop`, `header_fixed_mobile`,
  `footer_fixed`, `footer_fixed_mobile`, `aside_enabled`, `aside_fixed`,
  `scrolltop_enabled`.
- New scalar fields saved: `sidebar_text_color`, `sidebar_hover_bg_color`,
  `sidebar_hover_text_color`, `sidebar_heading_color`, `toolbar_width`,
  `toolbar_layout`, `footer_width`, `color_secondary`, `color_light`,
  `color_header_bg`, `color_body_bg`, `color_content_bg`, `color_header_text`,
  `color_body_text`, `color_border`, `color_heading`.
- Image loop extended to include `logo_dark`, `favicon`, `header_image`.

### New `resetToDefault()` method
- Resets all settings to model defaults and clears the cache.
- Redirects back with a success message.

### `deleteImageField()` method
- Allowed fields list extended with `logo_dark`, `favicon`, `header_image`.

---

## 4. Routes — `routes/admin.php`

Added one route inside the `template-settings` group:

```php
Route::post('/reset', [TemplateSettingsController::class, 'resetToDefault'])
    ->name('reset');
```

---

## 5. Layout — `resources/views/dashboard/admin/layouts/head.blade.php`

### Favicon
**Before:** used `$mainData->image` as favicon fallback.  
**After:** checks `$ts->favicon` from Template Settings first, then falls
back to the old image field, then to the bundled `favicon.ico`.

```blade
{{-- new --}}
{{ $ts->favicon ? asset('storage/'.$ts->favicon) : asset(...) }}
```

### CSS Variable Overrides (`<style>` block)
New CSS variables injected into `:root` when non-default values are set:

| Variable | Source field |
|---|---|
| `--bs-secondary` | `color_secondary` |
| `--bs-light` | `color_light` |
| `--bs-body-color` | `color_body_text` |
| `--bs-border-color` | `color_border` |
| `--bs-heading-color` | `color_heading` |
| `--bs-menu-heading-color` | `sidebar_heading_color` |

### New CSS rules emitted conditionally
- `sidebar_text_color` → `.app-sidebar .menu-link { color }`
- `sidebar_hover_bg_color` / `sidebar_hover_text_color` →
  `.app-sidebar .menu-item:hover > .menu-link` (background + color)
- `sidebar_heading_color` → `.app-sidebar .menu-section .menu-heading`
- `color_body_bg` → `body { background-color }`
- `color_content_bg` → `.app-content { background-color }`
- `color_header_bg` → `.app-header { background-color }`
- `color_header_text` → `.app-header .app-navbar { color }`
- `header_image` → `.app-header` gets `background-image` cover (new)

Active/hover selector was made more specific:

```css
/* before */
.menu-item.here > .menu-link, .menu-item .menu-link.active { … }

/* after — scoped to sidebar only */
.app-sidebar .menu-item.here > .menu-link,
.app-sidebar .menu-item .menu-link.active { … }
```

---

## 6. Sidebar — `resources/views/dashboard/admin/layouts/main-sidebar.blade.php`

Logo image logic now selects the correct asset based on layout:

```blade
{{-- before: always used logo_light --}}
src="{{ $ts->logo_light ? asset('storage/'.$ts->logo_light) : default }}"

{{-- after: uses logo_dark for light-sidebar / light-header layouts --}}
src="{{ ($ts->logo_dark && in_array($ts->app_layout, ['light-sidebar','light-header']))
         ? asset('storage/'.$ts->logo_dark)
         : ($ts->logo_light ? asset('storage/'.$ts->logo_light) : default) }}"
```

---

## 7. Master Layout — `resources/views/dashboard/admin/layouts/master.blade.php`

### `<body>` data attributes
New `data-kt-*` attributes wired to Template Settings fields:

| Attribute | Field |
|---|---|
| `data-kt-app-header-fixed` | `header_fixed_desktop` |
| `data-kt-app-header-fixed-mobile` | `header_fixed_mobile` |
| `data-kt-app-toolbar-fixed` | `toolbar_fixed_desktop` |
| `data-kt-app-toolbar-fixed-mobile` | `toolbar_fixed_mobile` |
| `data-kt-app-toolbar-width` | `toolbar_width` |
| `data-kt-app-toolbar-layout` | `toolbar_layout` |
| `data-kt-app-footer-fixed` | `footer_fixed` |
| `data-kt-app-footer-fixed-mobile` | `footer_fixed_mobile` |
| `data-kt-app-footer-width` | `footer_width` |
| `data-kt-app-aside-enabled` | `aside_enabled` |
| `data-kt-app-aside-fixed` | `aside_fixed` |

**Before:** `data-kt-app-header-fixed` was hard-coded to `"true"`.  
**After:** driven by the database setting.

### Scroll-to-top button
Added conditionally based on `scrolltop_enabled`:

```blade
@if($ts->scrolltop_enabled)
<div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true">
    <i class="ki-duotone ki-arrow-up">…</i>
</div>
@endif
```

---

## 8. Template Settings View — `resources/views/dashboard/admin/system/template_settings/index.blade.php`

### New tabs added to the tab bar
- **Footer** (`#tab-footer`)
- **Aside** (`#tab-aside`)

### Layout tab
- Added **Scroll-to-Top Button** toggle (`scrolltop_enabled`).

### Sidebar tab
New sub-section "Sidebar Menu Colours" with four controls:
- **Normal Link Text Colour** — free text input for `sidebar_text_color`
  (accepts hex or rgba).
- **Section Heading Colour** — color picker + text sync for
  `sidebar_heading_color`.
- **Hover Background Colour** — free text input for `sidebar_hover_bg_color`.
- **Hover Text Colour** — color picker + text sync for
  `sidebar_hover_text_color`.

### Header tab
Two new sticky-header toggles:
- **Fixed on Desktop** (`header_fixed_desktop`)
- **Fixed on Mobile** (`header_fixed_mobile`)

### Toolbar tab
New controls:
- **Toolbar Width** select (`toolbar_width`: fluid / fixed).
- **Toolbar Layout** select (`toolbar_layout`: classic / saas / accounting /
  extended / reports).

### Colors tab
New color pickers for all newly added tokens:
`color_secondary`, `color_light`, `color_header_bg`, `color_body_bg`,
`color_content_bg`, `color_header_text`, `color_body_text`,
`color_border`, `color_heading`.

### Images tab
Three new upload/delete rows:
- **Dark Logo** (`logo_dark`) — shown when layout is `light-sidebar` or
  `light-header`; displays existing stored image with delete button.
- **Favicon** (`favicon`) — replaces the system favicon; accepts ico/png/svg.
- **Header Cover Image** (`header_image`) — used as CSS background-image on
  the header bar.

### Reset to Defaults button
A new "Reset to Defaults" form button posts to `admin.template-settings.reset`
so all settings can be wiped back to the model defaults in one click.

---

## 9. Login Page — `resources/views/dashboard/admin/auth/login.blade.php`

*(commit `335f210` — "new view improve")*

### Background image

**Before:** hard-coded inline `<style>` pointing to `assets/media/app/Background1.jpg` for both light and dark themes.
**After:** uses `assets/media/auth/bg5.jpg` (light) and `assets/media/auth/bg5-dark.jpg` (dark), with `background-size:cover`, `background-position:center`, `min-height:100vh`.

### Page structure — new two-column layout

**Before:** single right-aligned card (`flex-lg-row-auto`) — no branding panel on the left.
**After:** full-viewport two-column layout:

| Column | Visibility | Content |
|---|---|---|
| Left `.login-brand-area` | desktop only (`d-none d-lg-flex`) | gradient panel with logo, app name, module icon grid |
| Right `.login-card` | always | glassmorphism login card |

### New CSS classes added inline

| Class | Purpose |
|---|---|
| `.login-overlay` | semi-transparent dark overlay (`rgba(0,0,0,0.45)`) across full viewport |
| `.login-card` | frosted-glass card (`backdrop-filter:blur(12px)`, `box-shadow: 0 20px 60px`) with dark-mode variant |
| `.login-brand-area` | dark gradient background `(135deg, #1a1a2e → #16213e → #0f3460)` |

### Left brand panel (new)

- Logo: `assets/media/logos/default-dark.svg` with `filter:brightness(0) invert(1)` (white).
- App name from `config('app.name')` and a subtitle line.
- 4 module icons rendered via a `@foreach` loop over an array:
  `[ki-chart-simple → Finance]`, `[ki-people → HR]`, `[ki-package → Inventory]`, `[ki-chart-line-up → Sales]`.

### Login card — form improvements

- **Mobile logo** added above the heading (hidden on desktop): `assets/media/logos/default.svg`.
- **Field labels** added above each input (were absent before).
- **Input groups with icons:**
  - Email: `ki-sms` icon prefix.
  - Password: `ki-lock-2` icon prefix + **show/hide toggle** (`ki-eye` / `ki-eye-slash`) via JavaScript — this did not exist before.
- `old('email')` used to repopulate the email field on validation failure.
- `@error('email')` and `@error('password')` add `is-invalid` class to failing fields.
- **Error alert redesigned:** now shows a `ki-information-5` icon beside the messages instead of a plain `<ul>`.
- Submit button now `btn-lg` with a `ki-entrance-right` icon prefix.

### Language switcher

**Before:** embedded inside a `d-flex flex-stack` footer row beside commented-out Terms/Plans/Contact links.
**After:** standalone centered `d-flex justify-content-center` block below the form; `data-kt-menu-placement` changed from `bottom-start` to `top-start`. The commented-out links were removed entirely.

### Removed images

- `assets/media/app/Gholam_Logo_White_All_Text.png` (was rendered twice with `theme-light-show` / `theme-dark-show` classes in the old left aside) — replaced by the new default SVG logos.

---

## 10. Home / Dashboard Page — `resources/views/dashboard/admin/home.blade.php`

*(commit `335f210` — "new view improve")*

### Branch filter card (top bar)

**Before:** plain card with `card-header` title "Dashboard" and a basic `<select>` + submit button.
**After:**

- Header title removed; replaced by a compact `card-body` filter bar with `shadow-sm border-0`.
- Select uses `form-select-solid`.
- Submit button gets a `ki-filter` icon prefix.
- A live date display (`now()->format('l, d F Y')`) with a `ki-calendar` icon added to the right of the filter row.

### New KPI row (6 cards) — entirely new section

Previously there was no top KPI row. Six metric cards are now rendered via a `@php $kpis = [...]` array:

| Card | Icon | Color | Metric |
|---|---|---|---|
| Total Invoices | `ki-document` | primary | `$analytics['sales']['total_invoices']` |
| Total Sales | `ki-chart-line-up` | success | `$analytics['sales']['total_sales']` |
| Total Employees | `ki-people` | info | `$analytics['hr']['total_employees']` |
| Total Payroll | `ki-wallet` | warning | `$analytics['hr']['total_payroll']` |
| Total Items | `ki-package` | danger | `$analytics['inventory']['total_items']` |
| Total Warehouses | `ki-home-2` | dark | `$analytics['inventory']['total_warehouses']` |

Each card has:

- A `symbol-60px` icon with `bg-opacity-15` tinted background.
- A "Live" badge (`badge-light-{color}`).
- A coloured `h-3px` bottom border strip.
- Hover elevation (`hover-elevate-up` CSS — `translateY(-4px)` on hover).

### Finance + Inventory section — redesigned (8/4 column split)

**Before:** two equal `col-xl-6` cards (Finance left, Sales right) with plain dashed-bordered stat boxes.
**After:**

**Finance card (col-xl-8):**

- Icon header with `ki-finance` symbol.
- 3 stat boxes with coloured `bg-light-*` backgrounds:
  - Posted entries → `bg-light-primary`, large `fs-5x` number.
  - Period debit → `bg-light-success` + `badge-light-success` "Dr" label.
  - Period credit → `bg-light-danger` + `badge-light-danger` "Cr" label.

**Inventory card (col-xl-4) — new dark gradient card:**

- Background: `linear-gradient(135deg, #1a1a2e → #16213e → #0f3460)`.
- White text throughout.
- Shows Items, Warehouses, and Stock Movements in a horizontal trio.
- Progress bar (`h-6px`) showing 72% warehouse utilization.
- Sales data moved out of this area into the KPI row above.

### HR section — redesigned

**Before:** 2 `col-md-6` dashed-bordered boxes (Employees, Payroll) inside a plain card.
**After:**

- Card header now has a `ki-people` symbol icon beside the title.
- Each metric is a horizontal `d-flex align-items-center bg-light rounded-3 p-5` row with a `symbol-50px` icon on the left:
  - Employees: `ki-abstract-41` info-tinted icon.
  - Payroll: `ki-wallet` warning-tinted icon.

### Old sections removed

- Separate **Sales Summary** card (`col-xl-6` beside Finance) — its data is now in the KPI row.
- Old **Inventory Summary** card with 3 dashed boxes — replaced by the dark gradient inventory panel.

### New inline CSS at page bottom

```css
.hover-elevate-up { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.hover-elevate-up:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.1) !important; }
.fs-5x  { font-size: 2.8rem; }
.ls-1   { letter-spacing: 0.05em; }
```

---

## Summary of image fields (before vs after)

| Field | Before | After |
|---|---|---|
| `logo_light` | existed | unchanged |
| `logo_icon` | existed | unchanged |
| `logo_dark` | — | **new** — auto-selected for light layouts |
| `favicon` | — | **new** — replaces site favicon dynamically |
| `header_image` | — | **new** — CSS cover on header bar |
| `login_image` | existed | unchanged |
| `register_image` | existed | unchanged |
| `default_image` | existed | unchanged |