186 lines
8.7 KiB
HTML
186 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ZynkTime - Time Reporting</title>
|
|
<link rel="stylesheet" href="/static/css/style.css?v=3">
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="logo">
|
|
<svg class="logo-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<polyline points="12 6 12 12 16 14"></polyline>
|
|
</svg>
|
|
<h1>ZynkTime</h1>
|
|
</div>
|
|
<div class="status-badge" id="statusBadge">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Checking...</span>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<!-- Upload Section -->
|
|
<section class="card upload-section">
|
|
<div class="card-header">
|
|
<h2>Report Your Time</h2>
|
|
<p>Upload your CSV file and select a project to report time</p>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<!-- File Upload -->
|
|
<div class="upload-zone" id="uploadZone">
|
|
<input type="file" id="fileInput" accept=".csv,.xlsx" hidden>
|
|
<svg class="upload-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
|
<polyline points="17 8 12 3 7 8"></polyline>
|
|
<line x1="12" y1="3" x2="12" y2="15"></line>
|
|
</svg>
|
|
<h3>Drop your CSV or XLSX file here</h3>
|
|
<p>or <span class="browse-link" id="browseLink">browse files</span></p>
|
|
<span class="file-formats">Supports: CSV (comma or semicolon separated) and XLSX (AGRESSO sheet)</span>
|
|
</div>
|
|
|
|
<div class="file-preview" id="filePreview" style="display: none;">
|
|
<div class="file-info">
|
|
<svg class="file-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
|
|
<polyline points="13 2 13 9 20 9"></polyline>
|
|
</svg>
|
|
<div class="file-details">
|
|
<span class="file-name" id="fileName"></span>
|
|
<span class="file-size" id="fileSize"></span>
|
|
</div>
|
|
<button class="btn-icon" id="removeFile" title="Remove file">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Time Entries Preview Table -->
|
|
<div id="previewContainer" style="display: none; margin-top: 1.5rem;">
|
|
<h4>Preview Time Entries</h4>
|
|
<p class="text-sm text-muted mb-2">Click on a row or checkbox to exclude it from reporting.</p>
|
|
<div class="table-responsive">
|
|
<table class="preview-table">
|
|
<thead>
|
|
<tr>
|
|
<th width="50"><input type="checkbox" id="selectAllPreview" checked></th>
|
|
<th>Date</th>
|
|
<th>Hours</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="previewTableBody">
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<td colspan="2" align="right"><strong>Total Selected:</strong></td>
|
|
<td><strong id="previewTotalHours">0.00</strong></td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project Selection -->
|
|
<div class="form-group">
|
|
<label for="projectSelect">Select Project</label>
|
|
<div class="select-wrapper">
|
|
<select id="projectSelect" disabled>
|
|
<option value="">Loading projects...</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Submit Button -->
|
|
<button class="btn btn-primary" id="submitBtn" disabled>
|
|
<span class="btn-text">Report Time</span>
|
|
<svg class="btn-icon-right" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
<polyline points="12 5 19 12 12 19"></polyline>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Results Section -->
|
|
<section class="card results-section" id="resultsSection" style="display: none;">
|
|
<div class="card-header">
|
|
<h2>Results</h2>
|
|
</div>
|
|
<div class="card-body" id="resultsContent"></div>
|
|
</section>
|
|
|
|
<!-- Approvals Section -->
|
|
<section class="card projects-section">
|
|
<div class="card-header">
|
|
<h2>Approve Events</h2>
|
|
</div>
|
|
<div class="card-body approvals-body">
|
|
<div class="form-group">
|
|
<label for="startDate">Start Date</label>
|
|
<input type="date" id="startDate">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="endDate">End Date</label>
|
|
<input type="date" id="endDate">
|
|
</div>
|
|
<div class="approval-actions">
|
|
<button class="btn btn-secondary" id="loadEvents">Load Events</button>
|
|
<button class="btn btn-primary" id="approveEvents">Approve Events</button>
|
|
<div id="eventsTotal" class="events-total" style="display: none;"></div>
|
|
</div>
|
|
<div class="events-list" id="eventsList">
|
|
<div class="loading">No events loaded yet</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Projects Info Section -->
|
|
<section class="card projects-section">
|
|
<div class="card-header">
|
|
<h2>Available Projects</h2>
|
|
<button class="btn-icon" id="refreshProjects" title="Refresh projects">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<polyline points="23 4 23 10 17 10"></polyline>
|
|
<polyline points="1 20 1 14 7 14"></polyline>
|
|
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="projects-list" id="projectsList">
|
|
<div class="loading">Loading projects...</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<p>ZynkTime v1.0 - Powered by Kleer API</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- Toast Notifications -->
|
|
<div class="toast-container" id="toastContainer"></div>
|
|
|
|
<!-- Loading Overlay -->
|
|
<div class="loading-overlay" id="loadingOverlay" style="display: none;">
|
|
<div class="spinner"></div>
|
|
<p>Processing your request...</p>
|
|
</div>
|
|
|
|
<script src="/static/js/app.js?v=3"></script>
|
|
</body>
|
|
</html>
|