[YasinDehfuli]

Summary

Redesigns the whole admin panel, from the login page to every dashboard section, on a token-based design system modelled on the Gamepaign design system. The original panel structure is kept (icon rail with a slide-out section drawer, breadcrumb, filter column + table for lists, side widgets + main card for forms, floating action button). No logic changes: no PHP, routes, config, migrations, plain JavaScript or Vue <script> blocks were modified.

Design

• New Crimson night palette for both themes: rose-crimson primary and orchid accent on ink-navy (dark) or mist greys (light), with readable status colours.
• resources/sass/panel/ rebuilt as layers: tokens → foundation (theme tokens + a bridge that maps Bootstrap's CSS variables onto them) → components → layout → pages. The old partials were removed.
• Shell: the rail now shows a label under each icon, the drawer has a section title, the open section is highlighted, and the top bar has the logo, a round theme switch and an account pill.
• Lists: one header card with the title, trash link, Total / From – To counts and search; named statuses (PENDING, PAID, COMPLETED…) shown as labelled pills; quiet row actions that take their colour on hover.
• Forms: the save row is a sticky bar pinned to the bottom of the screen; card headers have a tinted icon chip; the floating action button shows its label on desktop.
• Dashboard home and login rebuilt with the same markup data and an unchanged chart script; report pages render as cards.
• Vue components: only their <style> blocks were restyled to use the tokens.
• Icon/text alignment: Vazirmatn's Persian-first vertical metrics push Latin capitals ~0.11em above the line-box centre, so every centred icon looked low. LTR pages now use Vazirmatn UI, the same font files with ascent-override / descent-override; RTL pages keep the original metrics.
• Rules and token tables: resources/sass/panel/DESIGN_RULES.md.

Logic verification

• New command php artisan logic:guard snapshot|check:
  • snapshot freezes a copy of the SQLite database and the clock, then renders every safe panel page twice to filter out per-request noise.
  • check compares each page's behaviour fingerprint against that baseline: forms, fields, buttons, links, ids, data-*, inline handlers, Vue props, scripts, JS-hook class counts and copy.
  • It also diffs the branch against master: protected paths, plain JS, Vue <script> blocks and every Blade echo/directive.
• Result on this branch: 0 errors across 134 rendered panel/auth pages and the static checks. There are 8 expected warnings, where new visible labels reuse existing translation strings.
• PHPUnit: 73 tests pass on both master and this branch, with identical results.
• Tested by hand in the browser against a throwaway database:
  • Create, edit, delete, restore from trash and bulk delete.
  • Post creation with CKEditor; comment approval; saving settings and switching settings sections.
  • Search, filter, sort, pagination and row selection; drawer and theme switch (saved on the server); tooltips; the product step wizard; Vue selects; the attachments drawer; logout and failed login.
• Checked in dark and light themes, on mobile, and in RTL.

Notes

• Two report pages (forecast, customer behaviour) already fail on SQLite because they use MySQL-only SQL; that is unchanged.
• Validation messages that were hidden by the old CSS now show under their fields.

Screenshots (1280×800, same data)

Screenshots are hosted in a gist, not committed to the repository.

Login

Old panel	New panel

Dashboard home

Old panel	New panel

Products list

Old panel	New panel

Product edit

Old panel	New panel

Post create

Old panel	New panel

Settings

Old panel	New panel

Reports

Old panel	New panel

User edit

Old panel	New panel

Area design

Old panel	New panel

Comments

Old panel	New panel

[A1Gard]

@YasinDehfuli Awesome job, Thanks bro