d31f394ad5
Created Complete Tab System: - header.php: Shared navigation between Asset Submission and Global to Local tabs - global-to-local.php: Upload page with drag & drop, progress tracker, preview - global-to-local.js: Frontend logic for upload, processing, preview, and Box upload Visual Progress System: - 6-stage progress tracker with icons and status (⏸️ pending, 🔄 processing, ✅ success, ⚠️ warning, ❌ error) - Real-time status updates for each stage - Detailed error cards with actionable messages - Warning cards for data quality issues - Success cards with completion info Features: - Drag & drop CSV upload with file size validation - Step-by-step progress visualization - Error reporting at each stage (upload, parse, campaign, OMG API, business unit, transform) - CSV preview table (first 50 rows) before Box upload - Download preview CSV before committing - User approval required before Box upload - Summary cards showing input/output counts, campaign, business unit Error Handling: - File validation errors (wrong type, too large, empty) - CSV parsing errors (malformed, wrong columns) - Campaign extraction errors (invalid filename) - OMG API errors (404, timeout, auth failure) - Business unit mapping errors (unrecognized brands) - Date transformation errors (invalid formats) - Box upload errors (permissions, folder issues) UI Enhancements: - Tab navigation with active state highlighting - Professional error cards with details and actions - Responsive design for mobile/desktop - Maintains black/yellow L'Oréal brand colors 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
81 lines
2.8 KiB
PHP
81 lines
2.8 KiB
PHP
<?php
|
|
/**
|
|
* L'Oréal Box Asset Submission Form
|
|
* Main application page - Asset Submission Tab
|
|
*/
|
|
|
|
// Load dependencies
|
|
require_once __DIR__ . '/vendor/autoload.php';
|
|
require_once __DIR__ . '/AuthMiddleware.php';
|
|
|
|
// Initialize authentication
|
|
$auth = new AuthMiddleware();
|
|
$user = $auth->requireAuth();
|
|
$ssoEnabled = $auth->isSSOEnabled();
|
|
|
|
$pageTitle = 'Asset Submission - L\'Oréal Box';
|
|
|
|
// Include shared header
|
|
require_once __DIR__ . '/header.php';
|
|
?>
|
|
|
|
<div class="main-container">
|
|
<!-- Left Column: Form -->
|
|
<div class="form-column">
|
|
<form id="assetForm">
|
|
<div class="form-group">
|
|
<label for="boxId">Box ID of Submitted Assets</label>
|
|
<div class="input-with-button">
|
|
<input type="text" id="boxId" name="boxId" required placeholder="Enter Box folder ID">
|
|
<button type="button" id="lookupBtn" class="lookup-btn">Lookup</button>
|
|
</div>
|
|
<div id="boxIdValidation" class="validation-message"></div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="supplyDate">Supply Date</label>
|
|
<input type="date" id="supplyDate" name="supplyDate" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="liveDate">Live Date</label>
|
|
<input type="date" id="liveDate" name="liveDate" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="endDate">End Date</label>
|
|
<input type="date" id="endDate" name="endDate" required>
|
|
</div>
|
|
|
|
<button type="submit" class="submit-btn" id="submitBtn" disabled>
|
|
Submit
|
|
</button>
|
|
</form>
|
|
|
|
<div id="message" class="message"></div>
|
|
</div>
|
|
|
|
<!-- Right Column: Box Preview -->
|
|
<div class="preview-column">
|
|
<div id="previewContainer" class="preview-container">
|
|
<div class="preview-placeholder">
|
|
<svg width="100" height="100" viewBox="0 0 100 100" fill="none">
|
|
<path d="M50 10L80 30V70L50 90L20 70V30L50 10Z" stroke="#FFC407" stroke-width="3" fill="none"/>
|
|
<path d="M50 35V65M35 50H65" stroke="#FFC407" stroke-width="3" stroke-linecap="round"/>
|
|
</svg>
|
|
<p>Enter a Box ID to preview contents</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// User data for tracking
|
|
const currentUser = {
|
|
name: '<?php echo addslashes($user['name']); ?>',
|
|
email: '<?php echo addslashes($user['email']); ?>'
|
|
};
|
|
</script>
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html>
|