|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
|
|
<title>Drilling & Workover Saving Tracker</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet"/> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
} |
|
|
.sidebar { |
|
|
transition: 0.3s ease-in-out; |
|
|
} |
|
|
.sidebar.collapsed { |
|
|
transform: translateX(-100%); |
|
|
} |
|
|
.main-content { |
|
|
transition: 0.3s ease-in-out; |
|
|
margin-left: 16rem; |
|
|
} |
|
|
.main-content.expanded { |
|
|
margin-left: 0; |
|
|
} |
|
|
.modal { |
|
|
display: none; |
|
|
position: fixed; |
|
|
z-index: 50; |
|
|
left: 0; |
|
|
top: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
overflow: auto; |
|
|
background-color: rgba(0,0,0,0.5); |
|
|
} |
|
|
.toast { |
|
|
position: fixed; |
|
|
top: 20px; |
|
|
right: 20px; |
|
|
z-index: 100; |
|
|
min-width: 250px; |
|
|
background-color: #333; |
|
|
color: #fff; |
|
|
text-align: center; |
|
|
border-radius: 4px; |
|
|
padding: 16px; |
|
|
font-size: 16px; |
|
|
visibility: hidden; |
|
|
opacity: 0; |
|
|
transition: opacity 0.6s; |
|
|
} |
|
|
.toast.show { |
|
|
visibility: visible; |
|
|
opacity: 1; |
|
|
} |
|
|
.custom-input { |
|
|
border: 1px solid #d1d5db; |
|
|
border-radius: 0.5rem; |
|
|
} |
|
|
.tag { |
|
|
display: inline-block; |
|
|
padding: 0.25rem 0.75rem; |
|
|
border-radius: 9999px; |
|
|
font-size: 0.875rem; |
|
|
margin: 0.25rem; |
|
|
background-color: #e5e7eb; |
|
|
position: relative; |
|
|
} |
|
|
.tag .remove { |
|
|
margin-left: 0.5rem; |
|
|
cursor: pointer; |
|
|
color: #9ca3af; |
|
|
} |
|
|
.tag .remove:hover { |
|
|
color: #ef4444; |
|
|
} |
|
|
.process-tag { |
|
|
background-color: #dbeafe; |
|
|
color: #1e40af; |
|
|
} |
|
|
.material-tag { |
|
|
background-color: #ecfccb; |
|
|
color: #65a30d; |
|
|
} |
|
|
.process-tag .remove, .material-tag .remove { |
|
|
color: #3b82f6; |
|
|
} |
|
|
.process-tag .remove:hover, .material-tag .remove:hover { |
|
|
color: #ef4444; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
|
|
|
|
|
|
<div id="toast" class="toast">Data saved successfully!</div> |
|
|
|
|
|
|
|
|
<div class="sidebar fixed top-0 left-0 h-full w-64 bg-gradient-to-b from-blue-800 to-blue-600 text-white shadow-lg z-40"> |
|
|
<div class="p-5"> |
|
|
<h1 class="text-2xl font-bold">WellSave</h1> |
|
|
<p class="text-sm opacity-90">Drilling & Workover Tracker</p> |
|
|
</div> |
|
|
<nav class="mt-8"> |
|
|
<a href="#" class="nav-link block py-3 px-6 bg-blue-700" data-page="dashboard"> |
|
|
<i class="fas fa-tachometer-alt mr-3"></i> Dashboard |
|
|
</a> |
|
|
<a href="#" class="nav-link block py-3 px-6 hover:bg-blue-700" data-page="input"> |
|
|
<i class="fas fa-plus-circle mr-3"></i> Input New Saving |
|
|
</a> |
|
|
<a href="#" class="nav-link block py-3 px-6 hover:bg-blue-700" data-page="records"> |
|
|
<i class="fas fa-list-alt mr-3"></i> Records |
|
|
</a> |
|
|
<a href="#" class="nav-link block py-3 px-6 hover:bg-blue-700" data-page="charts"> |
|
|
<i class="fas fa-chart-bar mr-3"></i> Analytics |
|
|
</a> |
|
|
<a href="#" class="nav-link block py-3 px-6 hover:bg-blue-700" data-page="import"> |
|
|
<i class="fas fa-file-import mr-3"></i> Import Data |
|
|
</a> |
|
|
<a href="#" class="nav-link block py-3 px-6 hover:bg-blue-700" data-page="settings"> |
|
|
<i class="fas fa-cog mr-3"></i> Settings |
|
|
</a> |
|
|
</nav> |
|
|
</div> |
|
|
|
|
|
|
|
|
<button id="mobile-menu-toggle" class="md:hidden fixed top-4 left-4 z-50 p-2 bg-blue-700 text-white rounded-lg"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
|
|
|
|
|
|
<div class="main-content relative min-h-screen ml-64 bg-gray-50 transition-all duration-300"> |
|
|
<header class="bg-white shadow-sm p-4 flex justify-between items-center"> |
|
|
<h2 class="text-xl font-semibold text-gray-700">Drilling & Workover Saving Tracker</h2> |
|
|
<div class="text-sm text-gray-500"> |
|
|
<i class="far fa-calendar-alt mr-1"></i> <span id="current-date"></span> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main class="p-6"> |
|
|
|
|
|
<section id="dashboard" class="page-content"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> |
|
|
<div class="bg-white p-5 rounded-xl shadow-md border-l-4 border-green-500 transform hover:scale-105 transition-transform"> |
|
|
<h3 class="text-gray-500 text-sm font-medium">Total Savings (Cost)</h3> |
|
|
<p class="text-3xl font-bold text-green-600 mt-2" id="total-cost">Rp 0</p> |
|
|
</div> |
|
|
<div class="bg-white p-5 rounded-xl shadow-md border-l-4 border-blue-500 transform hover:scale-105 transition-transform"> |
|
|
<h3 class="text-gray-500 text-sm font-medium">Total Time Saved</h3> |
|
|
<p class="text-3xl font-bold text-blue-600 mt-2" id="total-time">0 hrs</p> |
|
|
</div> |
|
|
<div class="bg-white p-5 rounded-xl shadow-md border-l-4 border-purple-500 transform hover:scale-105 transition-transform"> |
|
|
<h3 class="text-gray-500 text-sm font-medium">Items Saved</h3> |
|
|
<p class="text-3xl font-bold text-purple-600 mt-2" id="total-material">0 items</p> |
|
|
</div> |
|
|
<div class="bg-white p-5 rounded-xl shadow-md border-l-4 border-orange-500 transform hover:scale-105 transition-transform"> |
|
|
<h3 class="text-gray-500 text-sm font-medium">Operations Saved</h3> |
|
|
<p class="text-3xl font-bold text-orange-600 mt-2" id="total-processes">0</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md mb-8"> |
|
|
<h3 class="text-lg font-semibold mb-4">Recent Activities</h3> |
|
|
<div id="recent-activities" class="space-y-3"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<h3 class="text-lg font-semibold mb-4">Monthly Savings Trend</h3> |
|
|
<canvas id="monthly-chart" height="250"></canvas> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<h3 class="text-lg font-semibold mb-4">Savings by Operation Type</h3> |
|
|
<canvas id="jobtype-chart" height="250"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="input" class="page-content hidden"> |
|
|
<div class="bg-white p-8 rounded-xl shadow-md max-w-4xl mx-auto"> |
|
|
<h2 class="text-2xl font-bold mb-6 text-gray-700">Input New Saving</h2> |
|
|
<form id="saving-form"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-600 mb-1">Operation Type</label> |
|
|
<div class="flex"> |
|
|
<select id="job-type" name="jobType" class="block w-full p-3 border border-gray-300 rounded-lg focus:ring focus:ring-blue-200"> |
|
|
<option value="">Select operation type</option> |
|
|
<option value="Drilling - Tripping">Drilling - Tripping</option> |
|
|
<option value="Drilling - BHA Runs">Drilling - BHA Runs</option> |
|
|
<option value="Drilling - Bit Runs">Drilling - Bit Runs</option> |
|
|
<option value="Drilling - Cementing">Drilling - Cementing</option> |
|
|
<option value="Workover - Tubing Change">Workover - Tubing Change</option> |
|
|
<option value="Workover - Pump Repair">Workover - Pump Repair</option> |
|
|
<option value="Workover - Zone Isolation">Workover - Zone Isolation</option> |
|
|
<option value="Workover - Stimulations">Workover - Stimulations</option> |
|
|
</select> |
|
|
<button type="button" id="add-job-btn" class="ml-2 bg-gray-200 px-3 rounded-lg hover:bg-gray-300"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-600 mb-1">Additional Operation Type (if not listed)</label> |
|
|
<input type="text" id="custom-job-type" placeholder="Enter new operation type" class="block w-full p-3 border border-gray-300 rounded-lg focus:ring focus:ring-blue-200"/> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-600 mb-1">Materials Saved (items)</label> |
|
|
<div class="border border-gray-300 rounded-lg p-3"> |
|
|
<div id="material-tags" class="flex flex-wrap mb-2"> |
|
|
|
|
|
</div> |
|
|
<div class="flex"> |
|
|
<select id="material-select" class="p-2 border border-gray-300 rounded-l-lg flex-grow"> |
|
|
<option value="">Select material</option> |
|
|
<option value="Drill Bits">Drill Bits</option> |
|
|
<option value="Motor Assemblies">Motor Assemblies</option> |
|
|
<option value="Mud Motors">Mud Motors</option> |
|
|
<option value="Measurement While Drilling (MWD)">MWD Tools</option> |
|
|
<option value="Logging While Drilling (LWD)">LWD Tools</option> |
|
|
<option value="Casing/Line Pipe">Casing/Line Pipe</option> |
|
|
<option value="Tubing">Tubing</option> |
|
|
<option value="Packers"> Packers</option> |
|
|
<option value="Safety Valves">Safety Valves</option> |
|
|
<option value="Pump Jacks">Pump Jacks</option> |
|
|
<option value="Gas Lift Valves">Gas Lift Valves</option> |
|
|
<option value="Chokes">Chokes</option> |
|
|
</select> |
|
|
<input type="number" id="material-quantity" placeholder="Qty" min="1" value="1" class="p-2 border border-gray-300 w-24"/> |
|
|
<button type="button" id="add-material-btn" class="bg-blue-600 text-white px-4 rounded-r-lg hover:bg-blue-700"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<small class="text-gray-500">Add materials saved (select item and quantity)</small> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-600 mb-1">Operations/Processes Saved</label> |
|
|
<div class="border border-gray-300 rounded-lg p-3"> |
|
|
<div id="process-tags" class="flex flex-wrap mb-2"> |
|
|
|
|
|
</div> |
|
|
<div class="flex"> |
|
|
<select id="process-select" class="p-2 border border-gray-300 rounded-l-lg flex-grow"> |
|
|
<option value="">Select process</option> |
|
|
<option value="Connection Time">Connection Time</option> |
|
|
<option value="Tripping Time">Tripping Time</option> |
|
|
<option value="Circulation Time">Circulation Time</option> |
|
|
<option value="Rig Move">Rig Move</option> |
|
|
<option value="Blowout Preventer (BOP) Testing">BOP Testing</option> |
|
|
<option value="Casing Running">Casing Running</option> |
|
|
<option value="Cement Evaluation">Cement Evaluation</option> |
|
|
<option value="Well Control">Well Control</option> |
|
|
<option value="Tubing Running">Tubing Running</option> |
|
|
<option value="Perforation">Perforation</option> |
|
|
<option value="Coiled Tubing">Coiled Tubing</option> |
|
|
<option value="Fishing">Fishing</option> |
|
|
<option value="Plug and Abandon">Plug and Abandon</option> |
|
|
</select> |
|
|
<input type="number" id="process-quantity" placeholder="Qty" min="1" value="1" class="p-2 border border-gray-300 w-24"/> |
|
|
<button type="button" id="add-process-btn" class="bg-blue-600 text-white px-4 rounded-r-lg hover:bg-blue-700"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<small class="text-gray-500">Add operations saved (select process and quantity)</small> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-600 mb-1">Time Saved (hours)</label> |
|
|
<input type="number" name="timeSaved" step="0.1" required class="block w-full p-3 border border-gray-300 rounded-lg focus:ring focus:ring-blue-200"/> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-600 mb-1">Cost Saved (Rp)</label> |
|
|
<input type="number" name="costSaved" required class="block w-full p-3 border border-gray-300 rounded-lg focus:ring focus:ring-blue-200"/> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-600 mb-1">Date</label> |
|
|
<input type="date" name="date" required class="block w-full p-3 border border-gray-300 rounded-lg focus:ring focus:ring-blue-200"/> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-600 mb-1">Time</label> |
|
|
<input type="time" name="time" required class="block w-full p-3 border border-gray-300 rounded-lg focus:ring focus:ring-blue-200"/> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label class="block text-sm font-medium text-gray-600 mb-1">Notes / Description</label> |
|
|
<textarea name="notes" rows="3" class="block w-full p-3 border border-gray-300 rounded-lg focus:ring focus:ring-blue-200"></textarea> |
|
|
</div> |
|
|
<div class="flex justify-end space-x-4"> |
|
|
<button type="button" id="cancel-input" class="px-6 py-3 bg-gray-400 text-white rounded-lg hover:bg-gray-500 transition">Cancel</button> |
|
|
<button type="submit" class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"> |
|
|
<i class="fas fa-save mr-2"></i> Save Record |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="records" class="page-content hidden"> |
|
|
<div class="bg-white p-8 rounded-xl shadow-md"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold text-gray-700">Saving Records</h2> |
|
|
<div class="flex space-x-3"> |
|
|
<input type="text" id="search-input" placeholder="Search records..." class="p-2 border border-gray-300 rounded-lg text-sm w-64"/> |
|
|
<button id="export-btn" class="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700"> |
|
|
<i class="fas fa-file-excel mr-1"></i> Export |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full bg-white border rounded-lg overflow-hidden"> |
|
|
<thead class="bg-gray-100 text-gray-600 uppercase text-sm leading-normal"> |
|
|
<tr> |
|
|
<th class="py-3 px-6 text-left">No</th> |
|
|
<th class="py-3 px-6 text-left">Operation Type</th> |
|
|
<th class="py-3 px-6 text-left">Materials Saved</th> |
|
|
<th class="py-3 px-6 text-left">Time (hrs)</th> |
|
|
<th class="py-3 px-6 text-left">Operations</th> |
|
|
<th class="py-3 px-6 text-left">Cost (Rp)</th> |
|
|
<th class="py-3 px-6 text-left">Date & Time</th> |
|
|
<th class="py-3 px-6 text-center">Actions</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody id="records-body" class="text-gray-600 text-sm"> |
|
|
|
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="charts" class="page-content hidden"> |
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<h3 class="text-lg font-semibold mb-4">Material Items vs Time Saved</h3> |
|
|
<canvas id="matrial-time-chart" height="250"></canvas> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<h3 class="text-lg font-semibold mb-4">Top 5 Operations (by Cost)</h3> |
|
|
<canvas id="top-jobs-chart" height="250"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="import" class="page-content hidden"> |
|
|
<div class="bg-white p-8 rounded-xl shadow-md max-w-2xl mx-auto"> |
|
|
<h2 class="text-2xl font-bold mb-6 text-gray-700">Import Data</h2> |
|
|
<div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center"> |
|
|
<i class="fas fa-cloud-upload-alt text-6xl text-gray-400 mb-4"></i> |
|
|
<p class="text-gray-600 mb-4">Drag & drop your CSV file here or click to browse</p> |
|
|
<input type="file" id="import-file" accept=".csv" class="hidden"/> |
|
|
<button id="browse-btn" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"> |
|
|
Browse Files |
|
|
</button> |
|
|
</div> |
|
|
<div class="mt-6 text-sm text-gray-500"> |
|
|
<p><strong>Required Columns:</strong> jobType, materialsSaved, timeSaved, processesSaved, costSaved, date, time (ISO format), notes</p> |
|
|
<p><strong>Materials/Processes Format:</strong> Use semicolon to separate items, e.g., "Drill Bits:2;MWD Tools:1"</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="settings" class="page-content hidden"> |
|
|
<div class="bg-white p-8 rounded-xl shadow-md max-w-2xl mx-auto"> |
|
|
<h2 class="text-2xl font-bold mb-6 text-gray-700">Settings</h2> |
|
|
<div class="space-y-6"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-600 mb-2">Currency Format</label> |
|
|
<select id="currency-select" class="p-3 border border-gray-300 rounded-lg w-full"> |
|
|
<option value="IDR">Indonesian Rupiah (Rp)</option> |
|
|
<option value="USD">US Dollar ($)</option> |
|
|
<option value="EUR">Euro (€)</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-600 mb-2">Date Format</label> |
|
|
<select id="date-format-select" class="p-3 border border-gray-300 rounded-lg w-full"> |
|
|
<option value="DD/MM/YYYY">DD/MM/YYYY</option> |
|
|
<option value="MM/DD/YYYY">MM/DD/YYYY</option> |
|
|
<option value="YYYY-MM-DD">YYYY-MM-DD</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-600 mb-2">Custom Materials</label> |
|
|
<div class="border border-gray-300 rounded-lg p-3 mb-2 max-h-40 overflow-y-auto"> |
|
|
<div id="custom-materials-list"> |
|
|
|
|
|
</div> |
|
|
<div class="flex mt-2"> |
|
|
<input type="text" id="new-material-name" placeholder="New material name" class="p-2 border border-gray-300 rounded-l-lg flex-grow"/> |
|
|
<button id="add-material-setting" class="bg-blue-600 text-white px-3 rounded-r-lg hover:bg-blue-700"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-600 mb-2">Custom Processes</label> |
|
|
<div class="border border-gray-300 rounded-lg p-3 mb-2 max-h-40 overflow-y-auto"> |
|
|
<div id="custom-processes-list"> |
|
|
|
|
|
</div> |
|
|
<div class="flex mt-2"> |
|
|
<input type="text" id="new-process-name" placeholder="New process name" class="p-2 border border-gray-300 rounded-l-lg flex-grow"/> |
|
|
<button id="add-process-setting" class="bg-blue-600 text-white px-3 rounded-r-lg hover:bg-blue-700"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex space-x-4"> |
|
|
<button id="reset-data-btn" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm"> |
|
|
<i class="fas fa-trash mr-2"></i> Reset All Data |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="add-job-modal" class="modal"> |
|
|
<div class="bg-white p-6 rounded-lg shadow-lg max-w-md mx-auto mt-20"> |
|
|
<h3 class="text-lg font-semibold mb-4">Add New Operation Type</h3> |
|
|
<input type="text" id="new-job-input" placeholder="Enter operation type name" class="w-full p-3 border border-gray-300 rounded-lg mb-4"/> |
|
|
<div class="flex justify-end space-x-3"> |
|
|
<button id="cancel-job-btn" class="px-4 py-2 bg-gray-400 text-white rounded-lg">Cancel</button> |
|
|
<button id="save-job-btn" class="px-4 py-2 bg-blue-600 text-white rounded-lg">Save</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="edit-modal" class="modal"> |
|
|
<div class="bg-white p-6 rounded-lg shadow-lg max-w-4xl mx-auto mt-10"> |
|
|
<h3 class="text-xl font-bold mb-6">Edit Record</h3> |
|
|
<form id="edit-form"> |
|
|
<input type="hidden" id="edit-id"/> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-600 mb-1">Operation Type</label> |
|
|
<select id="edit-job-type" class="block w-full p-3 border border-gray-300 rounded-lg focus:ring focus:ring-blue-200"> |
|
|
|
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-600 mb-1">Materials Saved</label> |
|
|
<div class="border border-gray-300 rounded-lg p-3"> |
|
|
<div id="edit-material-tags" class="flex flex-wrap mb-2"> |
|
|
|
|
|
</div> |
|
|
<div class="flex"> |
|
|
<select id="edit-material-select" class="p-2 border border-gray-300 rounded-l-lg flex-grow"> |
|
|
|
|
|
</select> |
|
|
<input type="number" id="edit-material-quantity" placeholder="Qty" min="1" value="1" class="p-2 border border-gray-300 w-24"/> |
|
|
<button type="button" id="edit-add-material-btn" class="bg-blue-600 text-white px-4 rounded-r-lg hover:bg-blue-700"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-600 mb-1">Operations/Processes Saved</label> |
|
|
<div class="border border-gray-300 rounded-lg p-3"> |
|
|
<div id="edit-process-tags" class="flex flex-wrap mb-2"> |
|
|
|
|
|
</div> |
|
|
<div class="flex"> |
|
|
<select id="edit-process-select" class="p-2 border border-gray-300 rounded-l-lg flex-grow"> |
|
|
|
|
|
</select> |
|
|
<input type="number" id="edit-process-quantity" placeholder="Qty" min="1" value="1" class="p-2 border border-gray-300 w-24"/> |
|
|
<button type="button" id="edit-add-process-btn" class="bg-blue-600 text-white px-4 rounded-r-lg hover:bg-blue-700"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-600 mb-1">Time Saved (hours)</label> |
|
|
<input type="number" id="edit-time" step="0.1" class="block w-full p-3 border border-gray-300 rounded-lg"/> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-600 mb-1">Cost Saved</label> |
|
|
<input type="number" id="edit-cost" class="block w-full p-3 border border-gray-300 rounded-lg"/> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-600 mb-1">Date</label> |
|
|
<input type="date" id="edit-date" class="block w-full p-3 border border-gray-300 rounded-lg"/> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-600 mb-1">Time</label> |
|
|
<input type="time" id="edit-time-input" class="block w-full p-3 border border-gray-300 rounded-lg"/> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label class="block text-sm font-medium text-gray-600 mb-1">Notes</label> |
|
|
<textarea id="edit-notes" rows="3" class="block w-full p-3 border border-gray-300 rounded-lg"></textarea> |
|
|
</div> |
|
|
<div class="flex justify-end space-x-4"> |
|
|
<button type="button" id="cancel-edit" class="px-6 py-3 bg-gray-400 text-white rounded-lg hover:bg-gray-500">Cancel</button> |
|
|
<button type="submit" class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Update</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
let savingsData = JSON.parse(localStorage.getItem('savingsData')) || []; |
|
|
let jobTypes = JSON.parse(localStorage.getItem('jobTypes')) || [ |
|
|
"Drilling - Tripping", "Drilling - BHA Runs", "Drilling - Bit Runs", "Drilling - Cementing", |
|
|
"Workover - Tubing Change", "Workover - Pump Repair", "Workover - Zone Isolation", "Workover - Stimulations" |
|
|
]; |
|
|
|
|
|
|
|
|
let materialsList = JSON.parse(localStorage.getItem('materialsList')) || [ |
|
|
"Drill Bits", "Motor Assemblies", "Mud Motors", "Measurement While Drilling (MWD)", |
|
|
"Logging While Drilling (LWD)", "Casing/Line Pipe", "Tubing", "Packers", |
|
|
"Safety Valves", "Pump Jacks", "Gas Lift Valves", "Chokes" |
|
|
]; |
|
|
|
|
|
let processesList = JSON.parse(localStorage.getItem('processesList')) || [ |
|
|
"Connection Time", "Tripping Time", "Circulation Time", "Rig Move", |
|
|
"Blowout Preventer (BOP) Testing", "Casing Running", "Cement Evaluation", |
|
|
"Well Control", "Tubing Running", "Perforation", "Coiled Tubing", "Fishing", "Plug and Abandon" |
|
|
]; |
|
|
|
|
|
|
|
|
function formatCurrency(value) { |
|
|
const currency = localStorage.getItem('currency') || 'IDR'; |
|
|
return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR' }).format(value); |
|
|
} |
|
|
|
|
|
|
|
|
function formatDate(dateStr) { |
|
|
const format = localStorage.getItem('dateFormat') || 'DD/MM/YYYY'; |
|
|
const date = new Date(dateStr); |
|
|
if (format === 'DD/MM/YYYY') { |
|
|
return date.toLocaleDateString('id-ID'); |
|
|
} else if (format === 'MM/DD/YYYY') { |
|
|
return date.toLocaleDateString('en-US'); |
|
|
} else { |
|
|
return date.toISOString().split('T')[0]; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('current-date').textContent = new Date().toLocaleDateString(); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.nav-link').forEach(link => { |
|
|
link.addEventListener('click', (e) => { |
|
|
e.preventDefault(); |
|
|
const page = e.target.closest('a').getAttribute('data-page'); |
|
|
document.querySelectorAll('.page-content').forEach(section => { |
|
|
section.classList.add('hidden'); |
|
|
}); |
|
|
document.getElementById(page).classList.remove('hidden'); |
|
|
document.querySelectorAll('.nav-link').forEach(link => { |
|
|
link.classList.remove('bg-blue-700'); |
|
|
}); |
|
|
e.target.closest('a').classList.add('bg-blue-700'); |
|
|
updatePageContent(page); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('mobile-menu-toggle').addEventListener('click', () => { |
|
|
document.querySelector('.sidebar').classList.toggle('collapsed'); |
|
|
document.querySelector('.main-content').classList.toggle('expanded'); |
|
|
}); |
|
|
|
|
|
|
|
|
function updateJobTypeDropdown() { |
|
|
const select = document.getElementById('job-type'); |
|
|
const editSelect = document.getElementById('edit-job-type'); |
|
|
select.innerHTML = '<option value="">Select operation type</option>'; |
|
|
jobTypes.forEach(type => { |
|
|
select.innerHTML += `<option value="${type}">${type}</option>`; |
|
|
}); |
|
|
|
|
|
|
|
|
if (editSelect) { |
|
|
editSelect.innerHTML = ''; |
|
|
jobTypes.forEach(type => { |
|
|
editSelect.innerHTML += `<option value="${type}">${type}</option>`; |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function updateMaterialsDropdown() { |
|
|
const select = document.getElementById('material-select'); |
|
|
const editSelect = document.getElementById('edit-material-select'); |
|
|
select.innerHTML = '<option value="">Select material</option>'; |
|
|
materialsList.forEach(material => { |
|
|
select.innerHTML += `<option value="${material}">${material}</option>`; |
|
|
}); |
|
|
|
|
|
if (editSelect) { |
|
|
editSelect.innerHTML = '<option value="">Select material</option>'; |
|
|
materialsList.forEach(material => { |
|
|
editSelect.innerHTML += `<option value="${material}">${material}</option>`; |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
function updateProcessesDropdown() { |
|
|
const select = document.getElementById('process-select'); |
|
|
const editSelect = document.getElementById('edit-process-select'); |
|
|
select.innerHTML = '<option value="">Select process</option>'; |
|
|
processesList.forEach(process => { |
|
|
select.innerHTML += `<option value="${process}">${process}</option>`; |
|
|
}); |
|
|
|
|
|
if (editSelect) { |
|
|
editSelect.innerHTML = '<option value="">Select process</option>'; |
|
|
processesList.forEach(process => { |
|
|
editSelect.innerHTML += `<option value="${process}">${process}</option>`; |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('add-job-btn').addEventListener('click', () => { |
|
|
document.getElementById('add-job-modal').style.display = 'block'; |
|
|
}); |
|
|
|
|
|
document.getElementById('cancel-job-btn').addEventListener('click', () => { |
|
|
document.getElementById('add-job-modal').style.display = 'none'; |
|
|
}); |
|
|
|
|
|
document.getElementById('save-job-btn').addEventListener('click', () => { |
|
|
const newJob = document.getElementById('new-job-input').value.trim(); |
|
|
if (newJob && !jobTypes.includes(newJob)) { |
|
|
jobTypes.push(newJob); |
|
|
jobTypes.sort(); |
|
|
localStorage.setItem('jobTypes', JSON.stringify(jobTypes)); |
|
|
updateJobTypeDropdown(); |
|
|
showToast('New operation type added!'); |
|
|
} |
|
|
document.getElementById('new-job-input').value = ''; |
|
|
document.getElementById('add-job-modal').style.display = 'none'; |
|
|
}); |
|
|
|
|
|
|
|
|
function addMaterialTag(material, qty) { |
|
|
const container = document.getElementById('material-tags'); |
|
|
const tag = document.createElement('span'); |
|
|
tag.className = 'tag material-tag'; |
|
|
tag.innerHTML = `${material}: ${qty} <span class="remove material-remove" data-material="${material}">×</span>`; |
|
|
container.appendChild(tag); |
|
|
} |
|
|
|
|
|
|
|
|
function addProcessTag(process, qty) { |
|
|
const container = document.getElementById('process-tags'); |
|
|
const tag = document.createElement('span'); |
|
|
tag.className = 'tag process-tag'; |
|
|
tag.innerHTML = `${process}: ${qty} <span class="remove process-remove" data-process="${process}">×</span>`; |
|
|
container.appendChild(tag); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('add-material-btn').addEventListener('click', () => { |
|
|
const material = document.getElementById('material-select').value; |
|
|
const qty = document.getElementById('material-quantity').value; |
|
|
|
|
|
if (material && qty > 0) { |
|
|
|
|
|
const existing = document.querySelector(`.tag[data-material="${material}"]`); |
|
|
if (existing) existing.remove(); |
|
|
|
|
|
addMaterialTag(material, qty); |
|
|
document.getElementById('material-select').value = ''; |
|
|
document.getElementById('material-quantity').value = '1'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('add-process-btn').addEventListener('click', () => { |
|
|
const process = document.getElementById('process-select').value; |
|
|
const qty = document.getElementById('process-quantity').value; |
|
|
|
|
|
if (process && qty > 0) { |
|
|
|
|
|
const existing = document.querySelector(`.tag[data-process="${process}"]`); |
|
|
if (existing) existing.remove(); |
|
|
|
|
|
addProcessTag(process, qty); |
|
|
document.getElementById('process-select').value = ''; |
|
|
document.getElementById('process-quantity').value = '1'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('material-tags').addEventListener('click', (e) => { |
|
|
if (e.target.classList.contains('material-remove')) { |
|
|
e.target.parentElement.remove(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('process-tags').addEventListener('click', (e) => { |
|
|
if (e.target.classList.contains('process-remove')) { |
|
|
e.target.parentElement.remove(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('saving-form').addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
const formData = new FormData(e.target); |
|
|
const data = Object.fromEntries(formData); |
|
|
|
|
|
|
|
|
if (document.getElementById('custom-job-type').value.trim()) { |
|
|
const customJob = document.getElementById('custom-job-type').value.trim(); |
|
|
if (!jobTypes.includes(customJob)) { |
|
|
jobTypes.push(customJob); |
|
|
jobTypes.sort(); |
|
|
localStorage.setItem('jobTypes', JSON.stringify(jobTypes)); |
|
|
updateJobTypeDropdown(); |
|
|
} |
|
|
data.jobType = customJob; |
|
|
} |
|
|
|
|
|
|
|
|
const materialTags = document.querySelectorAll('#material-tags .tag'); |
|
|
data.materialsSaved = []; |
|
|
materialTags.forEach(tag => { |
|
|
const material = tag.querySelector('.material-remove').getAttribute('data-material'); |
|
|
const qtyText = tag.textContent.trim().split(': ')[1]; |
|
|
const qty = qtyText.split(' ')[0]; |
|
|
data.materialsSaved.push({ name: material, quantity: qty }); |
|
|
}); |
|
|
|
|
|
|
|
|
const processTags = document.querySelectorAll('#process-tags .tag'); |
|
|
data.processesSaved = []; |
|
|
processTags.forEach(tag => { |
|
|
const process = tag.querySelector('.process-remove').getAttribute('data-process'); |
|
|
const qtyText = tag.textContent.trim().split(': ')[1]; |
|
|
const qty = qtyText.split(' ')[0]; |
|
|
data.processesSaved.push({ name: process, quantity: qty }); |
|
|
}); |
|
|
|
|
|
data.timestamp = new Date().toISOString(); |
|
|
data.id = Date.now(); |
|
|
savingsData.push(data); |
|
|
localStorage.setItem('savingsData', JSON.stringify(savingsData)); |
|
|
|
|
|
e.target.reset(); |
|
|
document.getElementById('custom-job-type').value = ''; |
|
|
document.getElementById('material-tags').innerHTML = ''; |
|
|
document.getElementById('process-tags').innerHTML = ''; |
|
|
document.getElementById('material-quantity').value = '1'; |
|
|
document.getElementById('process-quantity').value = '1'; |
|
|
showToast("Data saved successfully!"); |
|
|
updateDashboard(); |
|
|
updateRecords(); |
|
|
updateCharts(); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('cancel-input').addEventListener('click', () => { |
|
|
document.getElementById('saving-form').reset(); |
|
|
document.getElementById('custom-job-type').value = ''; |
|
|
document.getElementById('material-tags').innerHTML = ''; |
|
|
document.getElementById('process-tags').innerHTML = ''; |
|
|
document.getElementById('material-quantity').value = '1'; |
|
|
document.getElementById('process-quantity').value = '1'; |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('export-btn').addEventListener('click', () => { |
|
|
|
|
|
const formatItems = (items) => { |
|
|
return items.map(item => `${item.name}:${item.quantity}`).join(';'); |
|
|
}; |
|
|
|
|
|
const csv = [ |
|
|
['Job Type', 'Materials Saved', 'Time Saved (hrs)', 'Operations Saved', 'Cost Saved', 'Date', 'Time', 'Notes'] |
|
|
].concat(savingsData.map(item => [ |
|
|
item.jobType, |
|
|
formatItems(item.materialsSaved || []), |
|
|
item.timeSaved, |
|
|
formatItems(item.processesSaved || []), |
|
|
item.costSaved, |
|
|
item.date, |
|
|
item.time, |
|
|
item.notes || '' |
|
|
])).map(row => row.join(',')).join('\n'); |
|
|
|
|
|
const blob = new Blob([csv], { type: 'text/csv' }); |
|
|
const url = window.URL.createObjectURL(blob); |
|
|
const a = document.createElement('a'); |
|
|
a.href = url; |
|
|
a.download = 'saving_records.csv'; |
|
|
a.click(); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('browse-btn').addEventListener('click', () => { |
|
|
document.getElementById('import-file').click(); |
|
|
}); |
|
|
|
|
|
document.getElementById('import-file').addEventListener('change', (e) => { |
|
|
const file = e.target.files[0]; |
|
|
if (!file) return; |
|
|
|
|
|
const reader = new FileReader(); |
|
|
reader.onload = (event) => { |
|
|
const content = event.target.result; |
|
|
const lines = content.split('\n'); |
|
|
const headers = lines[0].split(',').map(h => h.trim()); |
|
|
|
|
|
const requiredHeaders = ['Job Type', 'Materials Saved', 'Time Saved (hrs)', 'Operations Saved', 'Cost Saved', 'Date', 'Time']; |
|
|
if (!requiredHeaders.every(h => headers.includes(h))) { |
|
|
alert('CSV file must contain the required columns.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
for (let i = 1; i < lines.length; i++) { |
|
|
if (lines[i].trim() === '') continue; |
|
|
const values = lines[i].split(',').map(v => v.trim()); |
|
|
const obj = {}; |
|
|
|
|
|
|
|
|
headers.forEach((h, idx) => { |
|
|
obj[h.toLowerCase().replace(/ \([^)]*\)/g, '').replace(/ /g, '')] = values[idx] || ''; |
|
|
}); |
|
|
|
|
|
|
|
|
obj.materialsaved = []; |
|
|
if (obj.materialssaved && obj.materialssaved.includes(':')) { |
|
|
obj.materialssaved.split(';').forEach(item => { |
|
|
const [name, qty] = item.split(':'); |
|
|
obj.materialsaved.push({ name: name.trim(), quantity: qty.trim() }); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
obj.processessaved = []; |
|
|
if (obj.operationssaved && obj.operationssaved.includes(':')) { |
|
|
obj.operationssaved.split(';').forEach(item => { |
|
|
const [name, qty] = item.split(':'); |
|
|
obj.processessaved.push({ name: name.trim(), quantity: qty.trim() }); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
delete obj.materialssaved; |
|
|
delete obj.operationssaved; |
|
|
|
|
|
|
|
|
obj.jobtype = obj.jobtype; |
|
|
|
|
|
|
|
|
obj.id = Date.now() + i; |
|
|
obj.timestamp = new Date().toISOString(); |
|
|
|
|
|
savingsData.push(obj); |
|
|
} |
|
|
|
|
|
localStorage.setItem('savingsData', JSON.stringify(savingsData)); |
|
|
showToast('Data imported successfully!'); |
|
|
updateDashboard(); |
|
|
updateRecords(); |
|
|
updateCharts(); |
|
|
}; |
|
|
reader.readAsText(file); |
|
|
}); |
|
|
|
|
|
|
|
|
function editRecord(id) { |
|
|
const record = savingsData.find(r => r.id == id); |
|
|
if (!record) return; |
|
|
|
|
|
document.getElementById('edit-id').value = record.id; |
|
|
document.getElementById('edit-job-type').value = record.jobType; |
|
|
|
|
|
|
|
|
document.getElementById('edit-material-tags').innerHTML = ''; |
|
|
document.getElementById('edit-process-tags').innerHTML = ''; |
|
|
|
|
|
|
|
|
if (record.materialsaved && record.materialsaved.length > 0) { |
|
|
record.materialsaved.forEach(item => { |
|
|
const tag = document.createElement('span'); |
|
|
tag.className = 'tag material-tag'; |
|
|
tag.innerHTML = `${item.name}: ${item.quantity} <span class="remove edit-material-remove" data-material="${item.name}">×</span>`; |
|
|
document.getElementById('edit-material-tags').appendChild(tag); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
if (record.processessaved && record.processessaved.length > 0) { |
|
|
record.processessaved.forEach(item => { |
|
|
const tag = document.createElement('span'); |
|
|
tag.className = 'tag process-tag'; |
|
|
tag.innerHTML = `${item.name}: ${item.quantity} <span class="remove edit-process-remove" data-process="${item.name}">×</span>`; |
|
|
document.getElementById('edit-process-tags').appendChild(tag); |
|
|
}); |
|
|
} |
|
|
|
|
|
document.getElementById('edit-time').value = record.timeSaved; |
|
|
document.getElementById('edit-cost').value = record.costSaved; |
|
|
document.getElementById('edit-date').value = record.date; |
|
|
document.getElementById('edit-time-input').value = record.time; |
|
|
document.getElementById('edit-notes').value = record.notes || ''; |
|
|
|
|
|
document.getElementById('edit-modal').style.display = 'block'; |
|
|
} |
|
|
|
|
|
|
|
|
function addEditMaterialTag(material, qty) { |
|
|
const container = document.getElementById('edit-material-tags'); |
|
|
const tag = document.createElement('span'); |
|
|
tag.className = 'tag material-tag'; |
|
|
tag.innerHTML = `${material}: ${qty} <span class="remove edit-material-remove" data-material="${material}">×</span>`; |
|
|
container.appendChild(tag); |
|
|
} |
|
|
|
|
|
|
|
|
function addEditProcessTag(process, qty) { |
|
|
const container = document.getElementById('edit-process-tags'); |
|
|
const tag = document.createElement('span'); |
|
|
tag.className = 'tag process-tag'; |
|
|
tag.innerHTML = `${process}: ${qty} <span class="remove edit-process-remove" data-process="${process}">×</span>`; |
|
|
container.appendChild(tag); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('edit-add-material-btn').addEventListener('click', () => { |
|
|
const material = document.getElementById('edit-material-select').value; |
|
|
const qty = document.getElementById('edit-material-quantity').value; |
|
|
|
|
|
if (material && qty > 0) { |
|
|
|
|
|
const existing = Array.from(document.querySelectorAll('.edit-material-remove')) |
|
|
.find(el => el.getAttribute('data-material') === material); |
|
|
if (existing) existing.parentElement.remove(); |
|
|
|
|
|
addEditMaterialTag(material, qty); |
|
|
document.getElementById('edit-material-select').value = ''; |
|
|
document.getElementById('edit-material-quantity').value = '1'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('edit-add-process-btn').addEventListener('click', () => { |
|
|
const process = document.getElementById('edit-process-select').value; |
|
|
const qty = document.getElementById('edit-process-quantity').value; |
|
|
|
|
|
if (process && qty > 0) { |
|
|
|
|
|
const existing = Array.from(document.querySelectorAll('.edit-process-remove')) |
|
|
.find(el => el.getAttribute('data-process') === process); |
|
|
if (existing) existing.parentElement.remove(); |
|
|
|
|
|
addEditProcessTag(process, qty); |
|
|
document.getElementById('edit-process-select').value = ''; |
|
|
document.getElementById('edit-process-quantity').value = '1'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('edit-material-tags').addEventListener('click', (e) => { |
|
|
if (e.target.classList.contains('edit-material-remove')) { |
|
|
e.target.parentElement.remove(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('edit-process-tags').addEventListener('click', (e) => { |
|
|
if (e.target.classList.contains('edit-process-remove')) { |
|
|
e.target.parentElement.remove(); |
|
|
} |
|
|
}); |
|
|
|
|
|
document.getElementById('cancel-edit').addEventListener('click', () => { |
|
|
document.getElementById('edit-modal').style.display = 'none'; |
|
|
}); |
|
|
|
|
|
document.getElementById('edit-form').addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
const id = document.getElementById('edit-id').value; |
|
|
const record = savingsData.find(r => r.id == id); |
|
|
if (!record) return; |
|
|
|
|
|
|
|
|
record.jobType = document.getElementById('edit-job-type').value; |
|
|
record.timeSaved = document.getElementById('edit-time').value; |
|
|
record.costSaved = document.getElementById('edit-cost').value; |
|
|
record.date = document.getElementById('edit-date').value; |
|
|
record.time = document.getElementById('edit-time-input').value; |
|
|
record.notes = document.getElementById('edit-notes').value; |
|
|
|
|
|
|
|
|
record.materialsaved = []; |
|
|
const materialTags = document.querySelectorAll('#edit-material-tags .tag'); |
|
|
materialTags.forEach(tag => { |
|
|
const material = tag.querySelector('.edit-material-remove').getAttribute('data-material'); |
|
|
const qtyText = tag.textContent.trim().split(': ')[1]; |
|
|
const qty = qtyText.split(' ')[0]; |
|
|
record.materialsaved.push({ name: material, quantity: qty }); |
|
|
}); |
|
|
|
|
|
|
|
|
record.processessaved = []; |
|
|
const processTags = document.querySelectorAll('#edit-process-tags .tag'); |
|
|
processTags.forEach(tag => { |
|
|
const process = tag.querySelector('.edit-process-remove').getAttribute('data-process'); |
|
|
const qtyText = tag.textContent.trim().split(': ')[1]; |
|
|
const qty = qtyText.split(' ')[0]; |
|
|
record.processessaved.push({ name: process, quantity: qty }); |
|
|
}); |
|
|
|
|
|
localStorage.setItem('savingsData', JSON.stringify(savingsData)); |
|
|
document.getElementById('edit-modal').style.display = 'none'; |
|
|
updateRecords(); |
|
|
updateDashboard(); |
|
|
updateCharts(); |
|
|
showToast('Record updated!'); |
|
|
}); |
|
|
|
|
|
|
|
|
function deleteRecord(id) { |
|
|
if (confirm('Are you sure you want to delete this record?')) { |
|
|
savingsData = savingsData.filter(r => r.id != id); |
|
|
localStorage.setItem('savingsData', JSON.stringify(savingsData)); |
|
|
updateRecords(); |
|
|
updateDashboard(); |
|
|
updateCharts(); |
|
|
showToast('Record deleted!'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('reset-data-btn').addEventListener('click', () => { |
|
|
if (confirm('Are you sure you want to delete ALL data? This cannot be undone.')) { |
|
|
savingsData = []; |
|
|
localStorage.removeItem('savingsData'); |
|
|
updateRecords(); |
|
|
updateDashboard(); |
|
|
updateCharts(); |
|
|
showToast('All data has been reset.'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('search-input').addEventListener('keyup', (e) => { |
|
|
const term = e.target.value.toLowerCase(); |
|
|
const filtered = savingsData.filter(item => |
|
|
item.jobType.toLowerCase().includes(term) || |
|
|
item.notes?.toLowerCase().includes(term) || |
|
|
(item.materialsaved && item.materialsaved.some(m => m.name.toLowerCase().includes(term))) || |
|
|
(item.processessaved && item.processessaved.some(p => p.name.toLowerCase().includes(term))) |
|
|
); |
|
|
populateRecords(filtered); |
|
|
}); |
|
|
|
|
|
|
|
|
function updatePageContent(page) { |
|
|
if (page === 'dashboard') { |
|
|
updateDashboard(); |
|
|
updateCharts(); |
|
|
} else if (page === 'records') { |
|
|
updateRecords(); |
|
|
} else if (page === 'charts') { |
|
|
updateCharts(); |
|
|
} else if (page === 'settings') { |
|
|
updateSettings(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function updateSettings() { |
|
|
|
|
|
const currentCurrency = localStorage.getItem('currency') || 'IDR'; |
|
|
document.getElementById('currency-select').value = currentCurrency; |
|
|
|
|
|
|
|
|
const dateFormat = localStorage.getItem('dateFormat') || 'DD/MM/YYYY'; |
|
|
document.getElementById('date-format-select').value = dateFormat; |
|
|
|
|
|
|
|
|
const materialsListEl = document.getElementById('custom-materials-list'); |
|
|
materialsListEl.innerHTML = ''; |
|
|
materialsList.forEach(material => { |
|
|
const div = document.createElement('div'); |
|
|
div.className = 'flex justify-between items-center py-1 border-b border-gray-100'; |
|
|
div.innerHTML = ` |
|
|
<span>${material}</span> |
|
|
<button class="text-red-500 text-sm remove-material-btn" data-material="${material}">Remove</button> |
|
|
`; |
|
|
materialsListEl.appendChild(div); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.remove-material-btn').forEach(btn => { |
|
|
btn.addEventListener('click', (e) => { |
|
|
const material = e.target.getAttribute('data-material'); |
|
|
materialsList = materialsList.filter(m => m !== material); |
|
|
localStorage.setItem('materialsList', JSON.stringify(materialsList)); |
|
|
updateMaterialsDropdown(); |
|
|
updateSettings(); |
|
|
showToast('Material removed!'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const processesListEl = document.getElementById('custom-processes-list'); |
|
|
processesListEl.innerHTML = ''; |
|
|
processesList.forEach(process => { |
|
|
const div = document.createElement('div'); |
|
|
div.className = 'flex justify-between items-center py-1 border-b border-gray-100'; |
|
|
div.innerHTML = ` |
|
|
<span>${process}</span> |
|
|
<button class="text-red-500 text-sm remove-process-btn" data-process="${process}">Remove</button> |
|
|
`; |
|
|
processesListEl.appendChild(div); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.remove-process-btn').forEach(btn => { |
|
|
btn.addEventListener('click', (e) => { |
|
|
const process = e.target.getAttribute('data-process'); |
|
|
processesList = processesList.filter(p => p !== process); |
|
|
localStorage.setItem('processesList', JSON.stringify(processesList)); |
|
|
updateProcessesDropdown(); |
|
|
updateSettings(); |
|
|
showToast('Process removed!'); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('add-material-setting').addEventListener('click', () => { |
|
|
const newMaterial = document.getElementById('new-material-name').value.trim(); |
|
|
if (newMaterial && !materialsList.includes(newMaterial)) { |
|
|
materialsList.push(newMaterial); |
|
|
materialsList.sort(); |
|
|
localStorage.setItem('materialsList', JSON.stringify(materialsList)); |
|
|
updateMaterialsDropdown(); |
|
|
updateSettings(); |
|
|
showToast('New material added!'); |
|
|
} |
|
|
document.getElementById('new-material-name').value = ''; |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('add-process-setting').addEventListener('click', () => { |
|
|
const newProcess = document.getElementById('new-process-name').value.trim(); |
|
|
if (newProcess && !processesList.includes(newProcess)) { |
|
|
processesList.push(newProcess); |
|
|
processesList.sort(); |
|
|
localStorage.setItem('processesList', JSON.stringify(processesList)); |
|
|
updateProcessesDropdown(); |
|
|
updateSettings(); |
|
|
showToast('New process added!'); |
|
|
} |
|
|
document.getElementById('new-process-name').value = ''; |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('currency-select').addEventListener('change', (e) => { |
|
|
localStorage.setItem('currency', e.target.value); |
|
|
updateDashboard(); |
|
|
updateCharts(); |
|
|
}); |
|
|
|
|
|
document.getElementById('date-format-select').addEventListener('change', (e) => { |
|
|
localStorage.setItem('dateFormat', e.target.value); |
|
|
updateRecords(); |
|
|
updateDashboard(); |
|
|
}); |
|
|
|
|
|
|
|
|
function updateDashboard() { |
|
|
const totalCost = savingsData.reduce((sum, item) => sum + parseFloat(item.costSaved || 0), 0); |
|
|
const totalTime = savingsData.reduce((sum, item) => sum + parseFloat(item.timeSaved || 0), 0); |
|
|
|
|
|
|
|
|
let totalItems = 0; |
|
|
savingsData.forEach(item => { |
|
|
if (item.materialsaved) { |
|
|
item.materialsaved.forEach(material => { |
|
|
totalItems += parseInt(material.quantity) || 0; |
|
|
}); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
let totalOperations = 0; |
|
|
savingsData.forEach(item => { |
|
|
if (item.processessaved) { |
|
|
item.processessaved.forEach(process => { |
|
|
totalOperations += parseInt(process.quantity) || 0; |
|
|
}); |
|
|
} |
|
|
}); |
|
|
|
|
|
document.getElementById('total-cost').textContent = formatCurrency(totalCost); |
|
|
document.getElementById('total-time').textContent = `${totalTime.toFixed(1)} hrs`; |
|
|
document.getElementById('total-material').textContent = `${totalItems} items`; |
|
|
document.getElementById('total-processes').textContent = totalOperations; |
|
|
|
|
|
|
|
|
const recent = savingsData |
|
|
.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp)) |
|
|
.slice(0, 5); |
|
|
const recentContainer = document.getElementById('recent-activities'); |
|
|
recentContainer.innerHTML = ''; |
|
|
recent.forEach(item => { |
|
|
|
|
|
let materialsText = ''; |
|
|
if (item.materialsaved && item.materialsaved.length > 0) { |
|
|
materialsText = item.materialsaved.map(m => `${m.quantity} ${m.name}`).join(', '); |
|
|
} |
|
|
|
|
|
const div = document.createElement('div'); |
|
|
div.className = 'flex justify-between items-center p-3 bg-gray-50 rounded-lg'; |
|
|
div.innerHTML = ` |
|
|
<div> |
|
|
<p class="font-medium">${item.jobType}</p> |
|
|
<p class="text-sm text-gray-500">${formatDate(item.date)} at ${item.time}</p> |
|
|
${materialsText ? `<p class="text-sm text-gray-500">${materialsText}</p>` : ''} |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="font-medium text-green-600">${formatCurrency(item.costSaved)}</p> |
|
|
<p class="text-sm text-gray-500">${totalItems} items saved</p> |
|
|
</div> |
|
|
`; |
|
|
recentContainer.appendChild(div); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function updateRecords() { |
|
|
populateRecords(savingsData); |
|
|
} |
|
|
|
|
|
function populateRecords(data) { |
|
|
const body = document.getElementById('records-body'); |
|
|
body.innerHTML = ''; |
|
|
if (data.length === 0) { |
|
|
body.innerHTML = `<tr><td colspan="8" class="py-4 text-center text-gray-500">No records found</td></tr>`; |
|
|
return; |
|
|
} |
|
|
|
|
|
data.slice().reverse().forEach((item, index) => { |
|
|
|
|
|
let materialsText = ''; |
|
|
if (item.materialsaved && item.materialsaved.length > 0) { |
|
|
materialsText = item.materialsaved.map(m => |
|
|
`<span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full mr-1 mb-1">${m.quantity}×${m.name}</span>` |
|
|
).join(''); |
|
|
} |
|
|
|
|
|
|
|
|
let processesText = ''; |
|
|
if (item.processessaved && item.processessaved.length > 0) { |
|
|
processesText = item.processessaved.map(p => |
|
|
`<span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full mr-1 mb-1">${p.quantity}×${p.name}</span>` |
|
|
).join(''); |
|
|
} |
|
|
|
|
|
const tr = document.createElement('tr'); |
|
|
tr.className = 'border-t border-gray-200 hover:bg-gray-50'; |
|
|
tr.innerHTML = ` |
|
|
<td class="py-3 px-6">${data.length - index}</td> |
|
|
<td class="py-3 px-6">${item.jobType}</td> |
|
|
<td class="py-3 px-6">${materialsText}</td> |
|
|
<td class="py-3 px-6">${parseFloat(item.timeSaved).toFixed(1)}</td> |
|
|
<td class="py-3 px-6">${processesText}</td> |
|
|
<td class="py-3 px-6">${formatCurrency(item.costSaved)}</td> |
|
|
<td class="py-3 px-6">${formatDate(item.date)} ${item.time}</td> |
|
|
<td class="py-3 px-6 text-center"> |
|
|
<button onclick="editRecord(${item.id})" class="text-blue-600 hover:text-blue-800 mx-1"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
<button onclick="deleteRecord(${item.id})" class="text-red-600 hover:text-red-800 mx-1"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</td> |
|
|
`; |
|
|
body.appendChild(tr); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
let monthlyChart, jobtypeChart, materialTimeChart, topJobsChart; |
|
|
function updateCharts() { |
|
|
|
|
|
const months = Array(12).fill(0); |
|
|
const now = new Date(); |
|
|
const currentYear = now.getFullYear(); |
|
|
savingsData.forEach(item => { |
|
|
const date = new Date(item.date); |
|
|
if (date.getFullYear() === currentYear) { |
|
|
months[date.getMonth()] += parseFloat(item.costSaved); |
|
|
} |
|
|
}); |
|
|
|
|
|
const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; |
|
|
const monthlyCtx = document.getElementById('monthly-chart').getContext('2d'); |
|
|
if (monthlyChart) monthlyChart.destroy(); |
|
|
monthlyChart = new Chart(monthlyCtx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: monthNames, |
|
|
datasets: [{ |
|
|
label: 'Cost Saved (monthly)', |
|
|
data: months, |
|
|
backgroundColor: 'rgba(54, 162, 235, 0.2)', |
|
|
borderColor: 'rgba(54, 162, 235, 1)', |
|
|
tension: 0.3, |
|
|
fill: true |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
plugins: { |
|
|
legend: { display: false } |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const jobCounts = {}; |
|
|
savingsData.forEach(item => { |
|
|
jobCounts[item.jobType] = (jobCounts[item.jobType] || 0) + parseFloat(item.costSaved); |
|
|
}); |
|
|
const jobtypeCtx = document.getElementById('jobtype-chart').getContext('2d'); |
|
|
if (jobtypeChart) jobtypeChart.destroy(); |
|
|
jobtypeChart = new Chart(jobtypeCtx, { |
|
|
type: 'pie', |
|
|
data: { |
|
|
labels: Object.keys(jobCounts), |
|
|
datasets: [{ |
|
|
data: Object.values(jobCounts), |
|
|
backgroundColor: [ |
|
|
'#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40', '#C9CBCF', '#46BFBD' |
|
|
] |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
const chartData = savingsData.map(item => { |
|
|
let totalItems = 0; |
|
|
if (item.materialsaved) { |
|
|
item.materialsaved.forEach(material => { |
|
|
totalItems += parseInt(material.quantity) || 0; |
|
|
}); |
|
|
} |
|
|
return { |
|
|
x: totalItems, |
|
|
y: parseFloat(item.timeSaved), |
|
|
r: Math.sqrt(parseFloat(item.costSaved)) / 10, |
|
|
jobType: item.jobType |
|
|
}; |
|
|
}); |
|
|
|
|
|
const materialTimeCtx = document.getElementById('matrial-time-chart').getContext('2d'); |
|
|
if (materialTimeChart) materialTimeChart.destroy(); |
|
|
materialTimeChart = new Chart(materialTimeCtx, { |
|
|
type: 'scatter', |
|
|
data: { |
|
|
datasets: [{ |
|
|
label: 'Items vs Time Saved', |
|
|
data: chartData, |
|
|
backgroundColor: 'rgba(75, 192, 192, 0.6)' |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
scales: { |
|
|
x: { |
|
|
title: { display: true, text: 'Items Saved' }, |
|
|
beginAtZero: true |
|
|
}, |
|
|
y: { |
|
|
title: { display: true, text: 'Time Saved (hours)' }, |
|
|
beginAtZero: true |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const sortedJobs = Object.entries(jobCounts) |
|
|
.sort((a,b) => b[1] - a[1]) |
|
|
.slice(0, 5); |
|
|
const topJobsCtx = document.getElementById('top-jobs-chart').getContext('2d'); |
|
|
if (topJobsChart) topJobsChart.destroy(); |
|
|
topJobsChart = new Chart(topJobsCtx, { |
|
|
type: 'bar', |
|
|
data: { |
|
|
labels: sortedJobs.map(j => j[0]), |
|
|
datasets: [{ |
|
|
label: 'Total Cost Saved', |
|
|
data: sortedJobs.map(j => j[1]), |
|
|
backgroundColor: 'rgba(153, 102, 255, 0.6)' |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
indexAxis: 'y', |
|
|
responsive: true |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function showToast(message) { |
|
|
const toast = document.getElementById('toast'); |
|
|
toast.textContent = message; |
|
|
toast.className = 'toast show'; |
|
|
setTimeout(() => { |
|
|
toast.className = toast.className.replace('show', ''); |
|
|
}, 3000); |
|
|
} |
|
|
|
|
|
|
|
|
updateJobTypeDropdown(); |
|
|
updateMaterialsDropdown(); |
|
|
updateProcessesDropdown(); |
|
|
updateSettings(); |
|
|
updateDashboard(); |
|
|
updateRecords(); |
|
|
updateCharts(); |
|
|
|
|
|
|
|
|
document.getElementById('dashboard').classList.remove('hidden'); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-qwensite.hf.space/logo.svg" alt="qwensite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-qwensite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >QwenSite</a> - 🧬 <a href="https://enzostvs-qwensite.hf.space?remix=alterzick/saving-operation-tracker-v1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
