# Helpdesk (Binshops) Bootstrap → Tailwind Migration Plan

## Objective

Replace the Bootstrap 4 dependency on the Binshops ticket pages with Tailwind CSS, bringing the helpdesk UI into visual consistency with the rest of the Agency Pulse application.

---

## Current Architecture Summary

- The Binshops package resolves its outer layout from the `master_template` database setting, currently set to `"helpdesk"`.
- `resources/views/helpdesk.blade.php` is the outer shell. It loads **both** Bootstrap 4 (CDN) and the Vite/Tailwind bundle simultaneously.
- A large inline `<style>` block in `helpdesk.blade.php` patches the resulting class conflicts with `!important` overrides.
- All ticket page templates (index, create, show, partials) live in `vendor/binshops/laravel-ticket/src/Views/bootstrap4/` and have **not** been published — the app has no direct control over their markup.
- A duplicate `layouts/navigation2.blade.php` is used by the helpdesk layout. It is out of sync with `layouts/navigation.blade.php` (missing the Two Factor Auth link).
- The Binshops internal layout (`laravelticket::layouts.master`) wraps ticket content in Bootstrap 4 `.card`, `.form-group.row`, `.col-lg-*`, `.nav.nav-pills`, and `.btn` classes.

---

## Pre-Migration Checklist

- [ ] Confirm no customisations have been made directly inside `vendor/binshops/` (if any exist, they will be lost on `composer update`).
- [ ] Snapshot the current visual appearance of all ticket pages for comparison after migration:
  - `/tickets` (index — active tickets)
  - `/tickets-complete` (completed tickets)
  - `/tickets/create`
  - `/tickets/{id}` (show / thread view)
  - `/tickets-admin` and all admin sub-pages
- [ ] Confirm which Binshops admin panel pages are actively used (some, like statuses/priorities, may never be visited).

---

## Phase 1 — Publish the Binshops Views

**Goal:** Move all template files out of `vendor/` so they are under source control and editable.

**Steps:**
1. Run `php artisan vendor:publish --tag=laravelticket` (or `--provider="..."` if a tag is not available — check `LaravelTicketServiceProvider` for the registered tag).
2. Confirm the views land in `resources/views/vendor/laravelticket/`.
3. Commit the published views to source control immediately as a clean baseline before any changes. This makes the diff of subsequent edits clean and attributable.

**Risk:** Low. Publishing only copies files; the package code is unchanged.

---

## Phase 2 — Strip Bootstrap 4 from the Outer Shell

**Goal:** Remove Bootstrap 4 CSS from the request entirely so Tailwind is the only CSS framework loaded.

**Steps:**

1. In `resources/views/helpdesk.blade.php`:
   - Remove the Bootstrap 4 CDN `<link>` tag.
   - Remove the entire inline `<style>` override block (it only exists to fight Bootstrap conflicts).
   - Replace the hardcoded `style="background-color: #1f2937;"` on the `<header>` tag with a Tailwind class (`class="bg-gray-800"`).
   - Add `{!! SEO::generate() !!}` to the `<head>` to match `layouts/app.blade.php`.

2. Align `helpdesk.blade.php` to use `layouts.navigation` instead of `layouts.navigation2`, then:
   - Delete `layouts/navigation2.blade.php`.
   - The Two Factor Auth link is already present in `layouts/navigation.blade.php` so this is a net gain.

**Risk:** Medium. The ticket page content will visually break at this point because the published views still use Bootstrap classes. This is expected — Phase 3 resolves it. Do not deploy between Phase 2 and Phase 3.

---

## Phase 3 — Replace Bootstrap Markup in Published Views with Tailwind

**Goal:** Rewrite each published ticket template to use Tailwind classes and the app's existing Blade components (`<x-primary-button>`, `<x-text-input>`, `<x-input-label>`, etc.), matching the style of the dashboard and profile pages.

Work through each view file. Suggested order (user-facing first, admin second):

### User-Facing Views

#### `tickets/index.blade.php`
- Replace `.card` / `.card-header` / `.card-body` with Tailwind card pattern (`bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg`).
- Replace Bootstrap DataTable markup with a plain Tailwind-styled `<table>` (see note on DataTables below).
- Replace `.btn.btn-primary` / `.btn.btn-success` with `<x-primary-button>` or Tailwind `<a>` equivalents.

#### `tickets/create.blade.php`
- Replace `.form-group.row` / `.col-lg-*` grid with Tailwind `space-y-6` form layout.
- Replace `html()->label()` generated labels with `<x-input-label>`.
- Replace `html()->text()` / `html()->textarea()` / `html()->select()` generated inputs with `<x-text-input>` (or bare `<textarea>` / `<select>` styled with Tailwind).
- Replace `.btn.btn-primary` submit with `<x-primary-button>`.
- Replace `.btn.btn-link` back link with a plain Tailwind anchor.

#### `tickets/show.blade.php`
- Replace `.btn` action buttons (mark complete, reopen, edit, delete) with Tailwind equivalents.
- Address Bootstrap modal usage for delete confirmation — replace with a Tailwind/Alpine.js modal or a simple `confirm()` JS call.

#### `tickets/partials/comments.blade.php` and `comment_form.blade.php`
- Replace Bootstrap comment list and form with Tailwind styled equivalents.

#### `tickets/partials/ticket_body.blade.php`
- Replace `.card`, `.badge`, `.table` Bootstrap elements with Tailwind equivalents.

#### `shared/nav.blade.php`
- Replace `.nav.nav-pills` with a Tailwind horizontal nav (e.g., `flex space-x-4 border-b`).
- Replace `.nav-link.active` with Tailwind active state classes.
- Dropdowns currently use Bootstrap `data-toggle="dropdown"` — replace with Alpine.js `x-data` / `@click` pattern.

#### `shared/errors.blade.php`
- Replace Bootstrap alert markup with the app's existing `<x-input-error>` or a Tailwind alert `div`.

### Admin Views

The admin views (`tickets-admin`) are lower priority as they are only accessed internally. Apply the same Bootstrap → Tailwind substitution pattern as above. Admin views use additional Bootstrap components (pagination, dropdowns, badges) that each need individual attention.

---

## Phase 4 — Address Third-Party Dependencies

### DataTables
The `shared/assets.blade.php` partial loads DataTables CSS from CDN. Two options:
- **Option A (preferred):** Remove DataTables entirely. Replace the ticket lists with a plain Tailwind `<table>` with server-side Laravel pagination (already available). This removes the CDN dependency and keeps the codebase simple.
- **Option B:** Keep DataTables but source it via npm so it is bundled with the Vite build, and theme it to match Tailwind styling.

### Summernote WYSIWYG Editor
The `tickets/partials/summernote.blade.php` partial loads Summernote CSS (Bootstrap 4 variant) from CDN. Options:
- **Option A:** Replace with a plain `<textarea>` styled with Tailwind. Simplest path.
- **Option B:** Switch to a Tailwind-compatible WYSIWYG (e.g., Trix, which ships with ActionText-style styling and is easy to theme).
- **Option C:** Keep Summernote but use its standalone build (not the Bootstrap variant) and restyle the toolbar with Tailwind.

**Decision required before Phase 4 begins.**

### Bootstrap JavaScript
Currently no explicit Bootstrap JS CDN link exists in the helpdesk layout. The package's modals and dropdowns may already be non-functional. In Phase 3, replacing Bootstrap modals with Alpine.js patterns and Bootstrap dropdowns with Alpine.js `x-show` will eliminate this dependency entirely. Alpine.js is already available in the Vite bundle.

---

## Phase 5 — Consolidate the Helpdesk Layout

**Goal:** Once Bootstrap is gone from all views, simplify `helpdesk.blade.php` to be as close to `layouts/app.blade.php` as possible.

- Evaluate whether `helpdesk.blade.php` can be eliminated entirely by converting the Binshops master layout to extend `layouts/app.blade.php` directly via the `$master` mechanism (setting `master_template` to `"layouts.app"` in the database), and publishing the Binshops outer layout to accept the `@section('content')` yield that `layouts.app.blade.php` exposes.
- If a separate shell must remain (e.g., because of conflicting yield slot names), keep `helpdesk.blade.php` but strip it down to just the structure of `layouts/app.blade.php` with no inline styles or extra CSS.

---

## Phase 6 — Validation and Cleanup

- [ ] Visual review of all ticket pages against the pre-migration snapshots.
- [ ] Check dark mode on all pages (Tailwind `dark:` classes).
- [ ] Confirm all forms submit correctly (CSRF tokens, method spoofing where needed).
- [ ] Confirm all admin actions work (assign, close, reopen, delete, category/priority management).
- [ ] Run `composer update` and re-publish views to confirm the published overrides take precedence correctly — the local views in `resources/views/vendor/laravelticket/` will survive a composer update.
- [ ] Remove `layouts/navigation2.blade.php` from source control.
- [ ] Remove the commented-out CSS rules from `helpdesk.blade.php` if any residue remains.

---

## Files Involved

| File | Action |
|------|--------|
| `resources/views/helpdesk.blade.php` | Modify: remove Bootstrap CDN, inline styles, navigation2 reference |
| `resources/views/layouts/navigation2.blade.php` | Delete |
| `resources/views/vendor/laravelticket/bootstrap4/**` | Create (via publish), then rewrite all Bootstrap → Tailwind |
| `database` (`laravelticket_settings.master_template`) | Possibly update if layout consolidation in Phase 5 is viable |

---

## Notes

- **Never edit files inside `vendor/`** directly — they will be overwritten by Composer. All edits must be to the published copies under `resources/views/vendor/laravelticket/`.
- The `laravelticket::` view namespace will automatically resolve to published views in `resources/views/vendor/laravelticket/` before falling back to the vendor package.
- Bootstrap 4 utility classes (e.g., `mt-3`, `d-flex`) and Tailwind utility classes (e.g., `mt-3`, `flex`) sometimes have identical names but different values. A find-and-replace approach is **not safe** — each template must be reviewed and rewritten deliberately.
