# JDE Scoping Tool (LotFinder) - Legacy Web UI Documentation

This document describes the layout, look and feel, and navigation of the legacy .NET Framework 4.8 web application located in `OLD/WebInterface/`.

---

## Table of Contents

1. [Technology Stack](#technology-stack)
2. [Visual Design & Theming](#visual-design--theming)
3. [Page Layout Structure](#page-layout-structure)
4. [Navigation Flow](#navigation-flow)
5. [View Inventory](#view-inventory)
6. [UI Components & Patterns](#ui-components--patterns)
7. [Real-Time Features](#real-time-features)
8. [Form Interactions](#form-interactions)
9. [File Structure Reference](#file-structure-reference)

---

## Technology Stack

| Technology | Version | Purpose |
|------------|---------|---------|
| ASP.NET MVC | 5 | Web framework |
| Bootstrap | 3.0.0 | Responsive CSS framework |
| Kendo UI | 2019.2.619 | Enterprise UI components |
| jQuery | 1.10.2 | DOM manipulation |
| jQuery UI | 1.9.0 | UI widgets (datepicker support) |
| SignalR | 2.2.1 | Real-time bidirectional communication |
| jQuery File Upload | - | File upload handling |

---

## Visual Design & Theming

### Color Palette

The application uses Bootstrap's default color scheme with the **inverse navbar** (dark theme):

| Element | Color | Usage |
|---------|-------|-------|
| Navbar background | `#222` (dark gray) | Fixed top navigation |
| Navbar brand text | `#9d9d9d` (light gray) | "JDE Scoping Tool" title |
| Primary buttons | `#337ab7` (blue) | Submit, Login, action buttons |
| Success background | `#dff0d8` (light green) | Completed status, Download Results |
| Danger background | `#f2dede` (light red) | Error states, validation errors |
| Warning background | `#fcf8e3` (light yellow) | Readonly notices |
| Default background | `#eeeeee` (light gray) | Neutral states |
| Error status color | `#FF6347` (tomato red) | Error status field |

### Typography

- **Font**: Browser default (system fonts)
- **Kendo UI**: Uses Bootstrap theme styling for consistent appearance

### Layout Dimensions

```css
body {
    padding-top: 50px;    /* Space for fixed navbar */
    padding-bottom: 20px;
}

.body-content {
    padding-left: 15px;
    padding-right: 15px;
}
```

---

## Page Layout Structure

### Master Layout (`_Layout.cshtml`)

```
+----------------------------------------------------------+
|  [Navbar - Fixed Top]                                     |
|  +------------------------------------------------------+ |
|  | JDE Scoping Tool           [Username] [Login/Logout] | |
|  +------------------------------------------------------+ |
+----------------------------------------------------------+
|                                                          |
|  [Page Content - Container]                              |
|  +------------------------------------------------------+ |
|  |                                                      | |
|  |  @RenderBody()                                       | |
|  |                                                      | |
|  +------------------------------------------------------+ |
|                                                          |
|  -------------------------------------------------------- |
|  [Footer: JDE Scoping Tool Version 4]                    |
+----------------------------------------------------------+
```

### Navbar Components

1. **Brand link**: "JDE Scoping Tool" - links to Home/Index
2. **Hamburger menu**: Collapsible on mobile (3 icon bars)
3. **Logon control** (right-aligned):
   - Unauthenticated: `[Login]` button
   - Authenticated: `Username [Logout]`

---

## Navigation Flow

```
                    +----------------+
                    | Login Page     |
                    | /Account/Login |
                    +-------+--------+
                            |
                   [LDAP Authentication]
                            |
                            v
+----------------------------------------------------------+
|                    AUTHENTICATED AREA                     |
+----------------------------------------------------------+
|                                                          |
|    +------------------+                                  |
|    | Home/Index       |-----> Redirects to               |
|    +------------------+       Search/Index               |
|                                                          |
|    +------------------+        +--------------------+    |
|    | Search/Index     |<------>| Search/Create      |    |
|    | (My Searches)    |        | (New/Edit Search)  |    |
|    +------------------+        +--------------------+    |
|           |                            |                 |
|           v                            v                 |
|    +------------------+        +--------------------+    |
|    | Search/Queue     |        | Download Results   |    |
|    | (All Searches)   |        | (Excel file)       |    |
|    +------------------+        +--------------------+    |
|                                                          |
|    +------------------+                                  |
|    | RefreshStatus    |  (Admin: Cache sync status)     |
|    +------------------+                                  |
|                                                          |
+----------------------------------------------------------+

Error States:
- /Account/NotAuthorized  -> Access denied page
- /InvalidUA/InvalidUserAgent -> Browser not supported
- Error.cshtml -> Generic error page
```

### Page Descriptions

| Page | URL | Purpose |
|------|-----|---------|
| Login | `/Account/Login` | LDAP authentication form |
| My Searches | `/Search/Index` | List user's saved searches |
| New/Edit Search | `/Search/Create?id=X` | Create or view a search |
| Copy Search | `/Search/Create?copySearchID=X` | Copy existing search |
| Search Queue | `/Search/Queue` | Monitor all queued searches |
| Refresh Status | `/RefreshStatus` | View data cache sync history |

---

## View Inventory

### Core Views

| View File | Title | Description |
|-----------|-------|-------------|
| `Views/Shared/_Layout.cshtml` | (Master) | Main layout template |
| `Views/Account/Login.cshtml` | "Login" | Username/password form |
| `Views/Account/NotAuthorized.cshtml` | "Authorization Error" | Access denied message |
| `Views/Search/Index.cshtml` | "Searches" | Kendo Grid of user's searches |
| `Views/Search/Create.cshtml` | "Search" | Complex search form (1459 lines) |
| `Views/Search/Queue.cshtml` | "Search Queue" | Real-time queue monitor |
| `Views/RefreshStatus/Index.cshtml` | "Cache Refresh Status" | Data sync history table |
| `Views/InvalidUA/InvalidUserAgent.cshtml` | "Unapproved Browser" | IE/Chrome only warning |
| `Views/Shared/Error.cshtml` | "Error" | Generic error page |

### Editor Templates (Kendo UI)

Located in `Views/Shared/EditorTemplates/`:

- `Currency.cshtml`, `Date.cshtml`, `DateTime.cshtml`
- `Email.cshtml`, `EmailAddress.cshtml`
- `Integer.cshtml`, `Number.cshtml`
- `Password.cshtml`, `String.cshtml`
- `Time.cshtml`, `Url.cshtml`
- `GridForeignKey.cshtml`

---

## UI Components & Patterns

### Bootstrap Components Used

| Component | Usage |
|-----------|-------|
| `navbar navbar-inverse navbar-fixed-top` | Top navigation bar |
| `container` | Content wrapper |
| `panel panel-default` | Grouped form sections |
| `form-horizontal` | Horizontal form layout |
| `form-group` | Form field grouping |
| `form-control` | Input styling |
| `btn btn-primary/default/success` | Buttons |
| `alert alert-danger/warning` | Notification messages |
| `col-md-*` | Grid columns |

### Kendo UI Components Used

| Component | Usage |
|-----------|-------|
| `kendo.ui.Grid` | Data tables with sorting, paging |
| `kendo.ui.ComboBox` | Autocomplete dropdowns |
| `kendo.ui.DatePicker` | Date selection |
| `kendo.ui.DropDownList` | Search type selection |
| `kendo.ui.Validator` | Form validation |
| `kendo.ui.Alert` | Modal alert dialogs |
| `kendo.data.DataSource` | Data binding |
| `kendo.observable` | MVVM view models |

### Common UI Patterns

#### 1. Panel with Header and Body
```html
<div class="panel panel-default">
    <div class="panel-heading">
        Panel Title
        <div class="btn-group" style="float: right;">
            [Action Buttons]
        </div>
    </div>
    <div class="panel-body container">
        [Form Fields / Grid]
    </div>
</div>
```

#### 2. Page Header with Actions
```html
<h2>
    Page Title
    <span class="btn-group" style="padding-left: 25px;">
        <a class="btn btn-sm btn-primary">Primary Action</a>
        <a class="btn btn-sm btn-default">Secondary Action</a>
    </span>
</h2>
```

#### 3. Readonly Warning Notice
```html
<div class="alert alert-warning" data-bind="visible: IsReadOnly">
    <strong>Note:</strong> search is readonly...
    <button class="btn btn-default" id="copyBTN">Copy</button>
</div>
```

---

## Real-Time Features

### SignalR Hub Integration

The application uses SignalR for real-time status updates:

```javascript
// Connection setup
var statusHub = $.connection.statusHub;

// Event handlers
statusHub.client.statusUpdate = function(statusUpdate) {
    // Update status display
};

statusHub.client.searchUpdate = function(searchUpdate) {
    // Update search grid
};

// Start connection with auto-reconnect
$.connection.hub.start().done(function() { });

$.connection.hub.disconnected(function() {
    setTimeout(function() {
        $.connection.hub.start();
    }, 5000);  // Reconnect after 5 seconds
});
```

### Real-Time Updates

| Event | Triggered When | UI Update |
|-------|----------------|-----------|
| `searchUpdate` | Search status changes | Grid row updates |
| `statusUpdate` | Worker service status changes | Status panel updates |

---

## Form Interactions

### Search/Index Page

**My Searches Grid:**
- Columns: Name, Submitted (formatted date), Status, Actions
- Sortable with multi-column support
- Pageable (10 per page)
- Row double-click opens search in new window
- "View" button opens search in new window

**Action Buttons:**
- "Start New Search" - Opens `/Search/Create` (new window)
- "View Search Queue" - Opens `/Search/Queue` (new window)

### Search/Create Page

**Search Details Panel:**

| Field | Type | Behavior |
|-------|------|----------|
| Search Type | Dropdown | Changes visible filter sections |
| Name | Text input | Required, editable when New |
| Submitted At | Text (readonly) | Shows submit timestamp |
| Started At | Text (readonly) | Shows processing start |
| Completed At | Text (readonly) | Shows completion time |
| User | Text (readonly) | Shows owner username |
| Status | Text (readonly) | Color-coded background |
| Download Results | Button | Visible when status=Ended |

**Filter Sections (shown based on Search Type):**

| Section | Controls |
|---------|----------|
| Timespan | Min Date (datepicker), Max Date (datepicker) |
| Work Order | Grid, Upload/Download/Clear buttons |
| Item Number | ComboBox (autocomplete), Add button, Grid |
| Profit Center | ComboBox (autocomplete), Add button, Grid |
| Work Center | ComboBox (autocomplete), Add button, Grid |
| Component Lot | Grid, Upload/Download/Clear buttons |
| Operator | ComboBox (autocomplete), Add button, Grid |
| Item/Operation/MIS | Grid, Upload/Download/Clear buttons |
| Extract MIS Data | Checkbox (readonly display) |

**Valid Search Type Combinations:**

```javascript
// From models.js - 16 valid combinations
1.  "Work Order"
2.  "Component Lot"
3.  "Time Span + Profit Center"
4.  "Time Span + Work Center"
5.  "Time Span + Operator"
6.  "Time Span + Profit Center + Item Number"
7.  "Time Span + Profit Center + Item/Operation/MIS"
8.  "Time Span + Profit Center + Work Order + Item/Operation/MIS"
9.  "Time Span + Profit Center + Extract MIS"
10. "Time Span + Work Center + Item Number"
11. "Time Span + Work Center + Extract MIS"
12. "Time Span + Work Center + Item/Operation/MIS"
13. "Time Span + Work Center + Work Order + Item/Operation/MIS"
14. "Time Span + Item Number"
15. "Time Span + Work Center + Operator"
16. "Time Span + Profit Center + Operator"
```

**Button States:**

| Status | Submit | Copy | Download |
|--------|--------|------|----------|
| New | Visible | Hidden | Hidden |
| Queued/Running | Hidden | Visible | Hidden |
| Ended | Hidden | Visible | Visible |
| Error | Hidden | Visible | Hidden |

### Search/Queue Page

**Status Panel:**
- Status Message (readonly text)
- Last Update Timestamp (readonly text)

**Queue Grid:**
- Columns: Owner, Name, Submitted, Started, Ended, Status
- Sortable with multi-column support
- Pageable (20 per page)
- Searches removed when status=Ended or Error

### Login Page

Simple horizontal form:
- Username (text input, 400px width)
- Password (password input, 400px width)
- Login button (btn-primary)
- Error messages in alert-danger divs

---

## File Structure Reference

### Views Directory
```
Views/
├── _ViewStart.cshtml              # Sets default layout
├── web.config                     # View configuration
├── Account/
│   ├── Login.cshtml               # Login form
│   └── NotAuthorized.cshtml       # Access denied
├── InvalidUA/
│   └── InvalidUserAgent.cshtml    # Browser warning
├── RefreshStatus/
│   └── Index.cshtml               # Cache status table
├── Search/
│   ├── Index.cshtml               # My searches grid
│   ├── Create.cshtml              # Search form (1459 lines)
│   └── Queue.cshtml               # Queue monitor
└── Shared/
    ├── _Layout.cshtml             # Master layout
    ├── Error.cshtml               # Error page
    └── EditorTemplates/           # Kendo editor templates
```

### JavaScript Files
```
Scripts/
├── Custom/
│   ├── widgets.js                 # Kendo widget extensions
│   ├── kendoHelpers.js            # Grid/DataSource helpers
│   ├── confirmationDialog.js      # Confirmation modal
│   └── model/models.js            # View models, ValidCombinations
├── Vendor/
│   ├── jquery-1.10.2.js
│   ├── jquery-ui-1.9.0.min.js
│   ├── jquery.validate.js
│   ├── jquery.validate.unobtrusive.js
│   ├── jquery.signalR-2.2.1.js
│   ├── bootstrap.js
│   ├── modernizr-2.6.2.js
│   └── respond.js
├── jQuery.FileUpload/             # File upload plugin
│   ├── jquery.fileupload.js
│   ├── jquery.iframe-transport.js
│   ├── jquery.fileupload-process.js
│   └── jquery.fileupload-ui.js
├── js-cookie/
│   └── js.cookie.js
└── kendo/2019.2.619/              # Full Kendo UI suite
    ├── kendo.all.min.js
    ├── kendo.aspnetmvc.min.js
    ├── jszip.min.js
    └── kendo.modernizr.custom.js
```

### CSS/Styling Files
```
Content/
├── Site.css                       # Custom styles (minimal)
├── bootstrap.css                  # Bootstrap 3.0.0
├── bootstrap.min.css
├── themes/base/                   # jQuery UI theme
├── jQuery.FileUpload/css/         # File upload styling
└── kendo/2019.2.619/              # Kendo themes
    ├── kendo.common-bootstrap.min.css
    ├── kendo.bootstrap.min.css
    ├── kendo.mobile.all.min.css
    ├── kendo.dataviz.min.css
    ├── kendo.dataviz.bootstrap.min.css
    ├── fonts/                     # DejaVu fonts
    └── images/                    # Kendo sprites
```

### Controllers
```
Controllers/
├── CrudController.cs              # Base controller
├── AccountController.cs           # Login/Logout
├── HomeController.cs              # Redirect to Search
├── SearchController.cs            # Main search operations
├── FileIOController.cs            # Excel upload/download
├── LookupController.cs            # Autocomplete APIs
├── SessionController.cs           # Session management
└── InvalidUAController.cs         # Browser validation
```

---

## Migration Notes for Blazor WebAssembly

When migrating to Blazor WebAssembly, consider these UI/UX elements to preserve:

1. **Layout**: Bootstrap 5 navbar with similar dark theme
2. **Grids**: MudBlazor DataGrid or similar component
3. **Forms**: Cascading validation, panel-based grouping
4. **Real-time**: SignalR Core for status updates
5. **Autocomplete**: Server-filtered dropdowns with debounce
6. **File uploads**: InputFile component with progress
7. **Dialogs**: Confirmation modals before destructive actions
8. **State**: Similar readonly/editable state management
9. **Date formatting**: MM/dd/yyyy hh:mm:ss tt pattern
10. **Valid combinations**: Same 16 search type combinations