Here’s a copy-paste prompt you can drop straight into Replit (or any code assistant) to redesign the LIA dashboard UI, using the **same corporate identity and style** as your current service system.

---

**PROMPT FOR REPLIT – LIA RENEWALS DASHBOARD UI REDESIGN**

You are updating an existing React + TypeScript + Tailwind CSS project for a product called **LIA – Renewals**.

### 0. Design references / CI

Use the attached screenshots as the **visual baseline** for the new UI. Keep the current **corporate identity**:

* Re-use the **same colour palette, fonts, spacing and general look** as in the existing service system UI.
* Navigation bar should look/feel like the current Exsto sidebar (dark vertical bar, light text, active item highlight).
* Tables, pills, buttons, icons, card borders etc. should follow the **same style language** as the screenshots.

Design references (treat these as “how it should look” guides):

* `/mnt/data/008a9e4f-2666-454b-8b5d-188c2e3f82b9.png`  – jobs list view
* `/mnt/data/c73ff1cc-f398-4f4f-9e42-4124027d1528.png`  – detailed job view

Please **do not introduce a new brand**: just re-use and extend the existing styling.

---

### 1. Tech stack and scope

* Frontend: **React + TypeScript + Tailwind CSS**.
* You are only working on the **UI and state management** – back-end calls can be mocked for now.
* Goal: build an “Exsto-style” UI for **finance renewals** (LIA) with:

  * Left navigation
  * Campaign/top bar
  * Customer rows with filters
  * Slide-in “T-Card” detail panel
  * Manager data upload screens

---

### 2. Data model (front-end types)

Create the following types (place in a shared `types.ts`):

```ts
export type RenewalStatus =
  | "NOT_CONTACTED"
  | "CONTACT_ATTEMPTED"
  | "ENGAGED"
  | "APPOINTMENT_BOOKED"
  | "APPOINTMENT_ATTENDED"
  | "NO_SHOW"
  | "OFFER_SENT"
  | "DECLINED_OFFER"
  | "DECLINED"
  | "SOLD";

export type Channel = "EMAIL" | "WHATSAPP" | "PHONE" | "SMS";

export interface CustomerRenewal {
  id: string;
  customerName: string;
  title?: string;
  town?: string;

  reg: string;
  model: string;
  variant?: string;
  fuelType?: string;
  isMotability?: boolean;

  status: RenewalStatus;

  currentPayment: number;
  proposedPayment?: number;
  paymentDelta?: number; // proposed - current

  agreementNumber: string;
  startDate: string;      // ISO
  maturityDate: string;   // ISO
  monthsRemaining: number;

  lastContactChannel?: Channel;
  lastContactDate?: string;
  lastContactUser?: string;

  nextAction?: string;
  nextActionDueDate?: string;

  hasServicePlan?: boolean;
  mileage?: number;
}

export interface CampaignSummary {
  id: string;
  name: string;
  description?: string;
  active: boolean;
  createdAt: string; // ISO
}
```

Use these types throughout.

---

### 3. Layout components (keep CI consistent)

Build the UI in the same visual style as the screenshots.

#### 3.1 `SidebarNav`

* Fixed left vertical nav, same width and colours as the current system.

* Sections and items:

  * **Dashboard**
  * **Campaigns**

    * Live Campaign
    * All Customers (DB)
    * Missed Opportunities
  * **Prospecting**

    * No Response 30+ days
    * Declined / Declined Offer
  * **Manager** (only shown when `userRole === "manager"`)

    * Data Uploads
    * Campaign Builder
    * Exports & Reports

* Re-use existing Tailwind classes / component patterns so it visually matches the current “Service / Jobs” menu.

#### 3.2 `TopBar`

* Sits across the top of the main content, under the global header (copy spacing/styling from existing “Workshop / Search” bar).
* Left:

  * Campaign selector (`<select>` or similar) bound to `CampaignSummary[]`.
* Centre:

  * Search box for name / reg / agreement.
* Right:

  * “My Customers only” toggle.
  * Optional simple date range for “Last contact”.

#### 3.3 `StatusFilterStrip`

* Directly above the table, styled like the “All / Outstanding / In progress / Carry Over” tabs.

* Pills:

  * All
  * Engaged
  * Appointment Booked
  * Sold
  * Declined
  * Declined Offer
  * No Response

* Clicking a pill filters the list by `RenewalStatus`.

Mapping:

* Engaged = `ENGAGED` or `OFFER_SENT`
* Appointment Booked = `APPOINTMENT_BOOKED`
* Sold = `SOLD`
* Declined = `DECLINED`
* Declined Offer = `DECLINED_OFFER`
* No Response = `NOT_CONTACTED` or `CONTACT_ATTEMPTED` without reply

Under the pills, add smaller filter chips (same chip styling as current UI):

* 12 / 9 / 6 / 3 payments remaining
* Same Payment / Lower / Higher
* Channels (Email / WhatsApp / Phone)
* “My Portfolio” / “Unassigned”

#### 3.4 `CustomerList`

Create a `CustomerList` component:

Props:

```ts
interface CustomerListProps {
  customers: CustomerRenewal[];
  onSelect: (customer: CustomerRenewal) => void;
  // and any active filter/search props you need
}
```

Row design (match table/row styling from Jobs screen):

* Left: coloured **status pill** (colour palette reused from existing tags).

* Content:

  * Line 1 (bold): `customerName`
  * Line 2 (smaller): `reg` + `model`
  * Small tags: `Retail / Motability / Fleet` etc. if relevant.

* Finance summary block:

  * `Current: £XXX`
  * `Proposed: £YYY`
  * Arrow icon up/down/flat based on `paymentDelta`.

* Term block:

  * `Maturity: dd/mm/yyyy (X mths)`
  * `Start: dd/mm/yyyy` (optional).

* Engagement block:

  * `Last touch: <Channel> · <date> · <user>` if present.
  * Use channel icons similar to existing email / phone icons.

* Next action block:

  * `Next: <nextAction>`
  * `Due: <date>` (with red/orange when overdue).

* Right side:

  * Button: “T-Card” (or an icon) – clicking anywhere on the row should also call `onSelect`.
  * Icon buttons for call / WhatsApp / email (no functional wiring needed yet).

Row background:

* Light green tint for `SOLD`
* Light blue for `ENGAGED` / `APPOINTMENT_BOOKED`
* Light red for `DECLINED` / `DECLINED_OFFER`
* White / neutral for others

Use **the same CI**: same font sizes, borders, hover behaviour, etc., as the jobs list.

#### 3.5 `TCardDrawer`

* Slide-in drawer from the right, matching the style of the detailed job view screenshot.
* Props:

```ts
interface TCardDrawerProps {
  customer: CustomerRenewal | null;
  onClose: () => void;
}
```

* When `customer` is null, hidden.
* When open:

  * Header:

    * Customer name, reg, model, status pill.

  * Three/four summary panels at the top (similar layout to Vehicle / Customer / Visit Details):

    1. **Customer & Contact**: name, town, preferred channel.
    2. **Vehicle & Agreement**: model, reg, mileage, current payment, proposed payment, delta, months remaining, maturity date.
    3. **Engagement**: last contact info, channel.
    4. **Allocation / Owner**: assigned advisor, portfolio owner.

  * Tabs under the summary row:

    * Summary (default)
    * Offers
    * Notes
    * Documents
    * Audit

  * In **Summary** tab, include:

    * Short engagement timeline (dummy list for now).
    * Next action + ability to change status (status dropdown or buttons).

Styling should closely mirror the second screenshot: card headers, spacing, chip styles, etc.

---

### 4. Manager screens – `DataUploadPage`

Only visible when `userRole === "manager"` and nav item “Data Uploads” is clicked.

Structure:

* Page title: “Data Uploads”
* Top-level tabs (use same tab style as VHC / Chat / Contact History etc.):

  * **Monthly Snapshot**
  * **Campaign Offers**

#### 4.1 Monthly Snapshot tab

* Card 1: “Last Snapshot” (read-only, mocked values):

  * Last upload date/time
  * Uploaded by
  * Rows imported
  * Linked campaigns count

* Card 2: “Upload New Snapshot”:

  * `<input type="file">` (CSV/XLSX)
  * Dropdown: Snapshot type (“VWFS Monthly Snapshot”, “Internal CRM Export”)
  * Button: **Validate File**:

    * After click, show a mock preview table (first 5–10 rows) with headings like Reg, Agreement No, Customer, Payment, Term, Maturity Date.
  * Button: **Confirm & Import**:

    * Simulate an import with a success state / toast; no real back-end yet.

Use same card style as existing summary panels: rounded, subtle border, title bar.

#### 4.2 Campaign Offers tab

* Card 1: “Current Campaign”

  * Show mock campaign name, dates, customer count.

* Card 2: “Upload Offer File”

  * `<input type="file">`
  * Dropdown: attach to existing campaign (`CampaignSummary[]`) or “Create new campaign”.
  * **Validate File** -> mock preview with Agreement No, Reg, New Payment, Deposit, Term, OfferCode.
  * **Confirm & Import** -> simulated success.

---

### 5. Routing & state

* Create a top-level `LiaDashboardPage` that composes:

  * `SidebarNav`
  * `TopBar`
  * `StatusFilterStrip`
  * `CustomerList`
  * `TCardDrawer`

* Simple client-side routing (or conditional rendering) for:

  * `/` or `/campaign/live` → main renewals view
  * `/campaign/all` → same view but with “All Customers (DB)” dataset
  * `/prospecting/missed` → same list view with pre-set filters for “missed opportunities”
  * `/manager/uploads` → `DataUploadPage`

* Use mocked data modules for:

  * `mockCampaigns: CampaignSummary[]`
  * `mockCustomers: CustomerRenewal[]`

---

### 6. CI constraints (important)

* **Do not change** the primary brand colours, fonts, or general spacing.
  Re-use existing Tailwind utility patterns or classes that match the current UI.
* New components should look like they’ve always belonged to this system.
* Match:

  * Sidebar background colour and text styles
  * Tab styles (active/inactive)
  * Badge/pill styles for statuses
  * Table row height and hover behaviour
  * Card headers and body spacing

---

Please generate or refactor the necessary React + TypeScript components and Tailwind markup according to the above brief, keeping the existing corporate identity and visual language consistent with the provided screenshots.