# Marketing Investment Management System - Interactive Mockup Prompt

## Overview
Create a fully interactive HTML mockup for a Marketing Investment Management System. This should be a professional, modern web application prototype that demonstrates the complete user interface and key workflows.

## Design Requirements
- **Style**: Modern, clean interface using Tailwind CSS
- **Layout**: Sidebar navigation with main content area
- **Colors**: Professional blue/gray color scheme
- **Components**: Cards, tables, charts, modals, forms
- **Responsive**: Desktop-focused but mobile-friendly
- **Interactive**: Clickable navigation, working buttons, modal dialogs

## Core Sections to Include

### 1. Dashboard (Default Page)
- **Header**: Welcome message, key metrics overview
- **KPI Cards**: Total Investments, Budget Utilization, Pending Invoices, YTD Spending
- **Charts**: Monthly investment trends, budget vs actual spending
- **Recent Activity**: Latest investments and invoice approvals
- **Quick Actions**: Add Investment, Process Invoices, View Reports

### 2. Investments Management
- **Investment List**: Sortable table with filters
- **Columns**: Description, Amount, Campaign Period, Purchase Order, Status, Actions
- **Filters**: Date range, Business Unit, Brand, Status (Accrual/Posted)
- **Actions**: Add, Edit, Delete, Flag for Deletion
- **Add/Edit Form**: Modal with all investment fields

### 3. Invoice Processing
- **Invoice List**: Table with invoice details
- **Columns**: Invoice Number, Supplier, Amount, Date, Status, PDF Link
- **Processing Status**: Pending, Approved, Posted to SAP
- **Actions**: View PDF, Mark as Posted, Process XML files
- **Invoice Details Modal**: Full invoice information with raw data

### 4. Internal Orders
- **Orders Table**: Internal order codes, descriptions, business units
- **CSV Import**: Upload interface for bulk import
- **Validation**: Real-time validation feedback
- **CRUD Operations**: Add, edit, delete internal orders

### 5. Budget Management
- **Budget Overview**: Annual budget allocation vs actual
- **Drill-down**: By Business Unit, Brand, Quarter
- **Progress Bars**: Visual budget utilization
- **Variance Analysis**: Over/under budget indicators

### 6. Admin/Reference Data
- **Tabs**: Business Units, Brands, Lines, Channels, ARCA Accounts
- **CRUD Interface**: Add, edit, delete reference data
- **Validation**: Ensure data integrity

## Sample Data to Include
```javascript
// Sample data for realistic mockup
const sampleInvestments = [
  {
    id: 1,
    description: "Chicco Pacifier Campaign 2025",
    amount: 18296.25,
    campaignStart: "2025-02-01",
    campaignEnd: "2025-04-30",
    purchaseOrder: "PO-2025-001",
    status: "Accrual",
    businessUnit: "Baby Care",
    brand: "Chicco"
  },
  {
    id: 2,
    description: "Digital Marketing - Instagram Ads",
    amount: 4520.25,
    campaignStart: "2025-03-01",
    campaignEnd: "2025-03-31",
    purchaseOrder: "502501265",
    status: "Posted",
    businessUnit: "Marketing",
    brand: "Chicco"
  }
];

const sampleInvoices = [
  {
    id: 1,
    invoiceNumber: "377117394",
    supplier: "24 DE JULHO RELACOES PUBLICAS",
    amount: 18296.25,
    invoiceDate: "2025-02-26",
    status: "Approved",
    pdfLink: "e0dd9ccdd2a686eb5092badf1d750b6c.pdf"
  },
  {
    id: 2,
    invoiceNumber: "50C/3530",
    supplier: "SCHEMA MAQUETAS E DESIGN LDA",
    amount: 4520.25,
    invoiceDate: "2025-04-01",
    status: "Posted to SAP",
    pdfLink: "0b3aa7768129e119f94897340d81b544.pdf"
  }
];

const budgetData = [
  { month: "Jan", budget: 50000, actual: 45000 },
  { month: "Feb", budget: 55000, actual: 52000 },
  { month: "Mar", budget: 60000, actual: 48000 },
  { month: "Apr", budget: 52000, actual: 38000 }
];
```

## Key Interactive Features
1. **Navigation**: Clickable sidebar that switches between sections
2. **Modals**: Add/Edit forms, invoice details, confirmation dialogs
3. **Tables**: Sortable columns, pagination, search/filter
4. **Charts**: Interactive charts showing budget vs actual data
5. **Forms**: Working form validation and submission feedback
6. **Buttons**: Hover effects, loading states, success/error feedback
7. **Tabs**: Switch between different data types in admin section

## UI Components Needed
- **Cards**: Metric cards, section cards with shadows and hover effects
- **Tables**: Striped rows, sortable headers, action buttons
- **Modals**: Overlay dialogs with forms and content
- **Forms**: Input fields, dropdowns, date pickers, file uploads
- **Charts**: Bar charts, line charts for budget tracking
- **Buttons**: Primary, secondary, danger variants with icons
- **Alerts**: Success, warning, error notifications
- **Loading States**: Spinners and skeleton screens

## Technical Requirements
- **Single HTML File**: Complete mockup in one file
- **Tailwind CSS**: Use CDN for styling
- **Chart.js**: For interactive charts
- **Vanilla JavaScript**: For interactivity (no frameworks)
- **Icons**: Use SVG icons or icon libraries
- **Responsive**: Mobile-friendly design
- **Print Styles**: Clean printing layout

## Workflow Demonstrations
1. **Investment Workflow**: Create → Review → Approve → Match with Invoice → Flag for Deletion
2. **Invoice Processing**: Upload XML → Parse → Match with Investment → Approve → Post to SAP
3. **Budget Tracking**: Set Budget → Track Actuals → Analyze Variance → Generate Reports
4. **Reconciliation**: Import SAP Data → Match Records → Resolve Discrepancies → Audit

## Professional Features
- **Search**: Global search functionality
- **Filters**: Multi-criteria filtering for all lists
- **Export**: Mock CSV/Excel export buttons
- **Pagination**: Table pagination with page size options
- **Breadcrumbs**: Navigation breadcrumbs
- **Tooltips**: Helpful tooltips on complex fields
- **Keyboard Navigation**: Tab support for accessibility

Create a professional, enterprise-level mockup that looks and feels like a real production application. Include loading states, error handling, and success feedback to make it feel authentic. The mockup should demonstrate the complete user journey from investment creation through invoice matching and SAP reconciliation.