Kode Isi File reports.html

Kode Isi File reports.html

Bantu buatkan kode isi file reports.html

FarmerSmartAI - Halaman Laporan

Berikut kode lengkap untuk file reports.html (halaman laporan dan analitik) FarmerSmartAI:

```html

<!DOCTYPE html>

<head>

<title>Laporan & Analitik - FarmerSmartAI</title>

<style>

:root {

--primary: #2e7d32;

--primary-dark: #1b5e20;

--primary-light: #4caf50;

--secondary: #ff9800;

--accent: #8bc34a;

--light: #f5f5f5;

--dark: #333;

--gray: #757575;

--white: #ffffff;

--warning: #ff9800;

--danger: #f44336;

--success: #4caf50;

--info: #2196f3;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

body {

background-color: #f0f4f0;

color: var(--dark);

}

.dashboard {

display: grid;

grid-template-columns: 250px 1fr;

min-height: 100vh;

}

/* Sidebar */

.sidebar {

background-color: var(--primary);

color: white;

padding: 20px 0;

}

.logo {

display: flex;

align-items: center;

padding: 0 20px 20px;

border-bottom: 1px solid rgba(255,255,255,0.1);

margin-bottom: 20px;

}

.logo-icon {

font-size: 2rem;

margin-right: 10px;

}

.logo h1 {

font-size: 1.5rem;

}

.sidebar ul {

list-style: none;

}

.sidebar li {

padding: 15px 20px;

border-bottom: 1px solid rgba(255,255,255,0.05);

cursor: pointer;

transition: background 0.3s;

display: flex;

align-items: center;

}

.sidebar li i {

margin-right: 10px;

width: 20px;

text-align: center;

}

.sidebar li:hover {

background-color: var(--primary-dark);

}

.sidebar li.active {

background-color: var(--primary-dark);

border-left: 4px solid var(--accent);

}

/* Main Content */

.main-content {

padding: 20px;

overflow-y: auto;

}

.header {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 25px;

padding-bottom: 15px;

border-bottom: 1px solid #e0e0e0;

}

.header h1 {

color: var(--primary);

font-size: 1.8rem;

}

.user-info {

display: flex;

align-items: center;

}

.user-avatar {

width: 40px;

height: 40px;

border-radius: 50%;

background-color: var(--primary);

display: flex;

align-items: center;

justify-content: center;

color: white;

font-weight: bold;

margin-right: 10px;

}

/* Report Controls */

.report-controls {

background: white;

border-radius: 10px;

padding: 20px;

box-shadow: 0 4px 6px rgba(0,0,0,0.1);

margin-bottom: 30px;

display: flex;

justify-content: space-between;

align-items: center;

flex-wrap: wrap;

gap: 15px;

}

.date-range {

display: flex;

align-items: center;

gap: 10px;

}

.date-input {

padding: 8px 12px;

border: 1px solid #ddd;

border-radius: 5px;

font-size: 0.9rem;

}

.report-type {

display: flex;

gap: 10px;

}

.btn {

padding: 8px 15px;

border: none;

border-radius: 5px;

cursor: pointer;

font-weight: 600;

transition: background 0.3s;

display: inline-flex;

align-items: center;

justify-content: center;

}

.btn i {

margin-right: 5px;

}

.btn-primary {

background-color: var(--primary);

color: white;

}

.btn-primary:hover {

background-color: var(--primary-dark);

}

.btn-outline {

background-color: transparent;

border: 1px solid var(--primary);

color: var(--primary);

}

.btn-outline:hover {

background-color: var(--light);

}

.btn-success {

background-color: var(--success);

color: white;

}

.btn-success:hover {

background-color: #388e3c;

}

/* Report Cards */

.report-cards {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

gap: 20px;

margin-bottom: 30px;

}

.report-card {

background: white;

border-radius: 10px;

padding: 20px;

box-shadow: 0 4px 6px rgba(0,0,0,0.1);

text-align: center;

transition: transform 0.3s;

}

.report-card:hover {

transform: translateY(-5px);

}

.report-icon {

width: 60px;

height: 60px;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

font-size: 1.5rem;

margin: 0 auto 15px;

color: white;

}

.report-icon.yield {

background-color: var(--success);

}

.report-icon.water {

background-color: var(--info);

}

.report-icon.finance {

background-color: #9c27b0;

}

.report-icon.chemicals {

background-color: var(--warning);

}

.report-value {

font-size: 1.8rem;

font-weight: bold;

margin: 10px 0;

}

.report-label {

color: var(--gray);

font-size: 0.9rem;

}

.report-trend {

display: flex;

align-items: center;

justify-content: center;

margin-top: 10px;

font-size: 0.8rem;

}

.trend-up {

color: var(--success);

}

.trend-down {

color: var(--danger);

}

/* Charts Section */

.charts-section {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));

gap: 20px;

margin-bottom: 30px;

}

@media (max-width: 768px) {

.charts-section {

grid-template-columns: 1fr;

}

.chart-container {

background: white;

border-radius: 10px;

padding: 20px;

box-shadow: 0 4px 6px rgba(0,0,0,0.1);

}

.chart-header {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 15px;

}

.chart-header h2 {

color: var(--primary);

font-size: 1.3rem;

}

.chart-actions select {

padding: 5px 10px;

border-radius: 5px;

border: 1px solid #ddd;

}

.chart {

height: 300px;

position: relative;

}

/* Report Tables */

.tables-section {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));

gap: 20px;

margin-bottom: 30px;

}

@media (max-width: 768px) {

.tables-section {

grid-template-columns: 1fr;

}

.table-container {

background: white;

border-radius: 10px;

padding: 20px;

box-shadow: 0 4px 6px rgba(0,0,0,0.1);

}

.table-header {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 15px;

}

.table-header h2 {

color: var(--primary);

font-size: 1.3rem;

}

.data-table {

width: 100%;

border-collapse: collapse;

}

.data-table th {

background-color: var(--light);

padding: 12px 15px;

text-align: left;

font-weight: 600;

color: var(--dark);

border-bottom: 1px solid #ddd;

}

.data-table td {

padding: 12px 15px;

border-bottom: 1px solid #f0f0f0;

}

.data-table tr:last-child td {

border-bottom: none;

}

.data-table tr:hover {

background-color: #f9f9f9;

}

.status-badge {

padding: 5px 10px;

border-radius: 20px;

font-size: 0.8rem;

font-weight: 600;

}

.status-completed {

background-color: #e8f5e9;

color: var(--success);

}

.status-pending {

background-color: #fff3e0;

color: var(--warning);

}

.status-failed {

background-color: #ffebee;

color: var(--danger);

}

/* Export Section */

.export-section {

background: white;

border-radius: 10px;

padding: 20px;

box-shadow: 0 4px 6px rgba(0,0,0,0.1);

}

.export-options {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

gap: 15px;

margin-top: 20px;

}

.export-option {

border: 1px solid #e0e0e0;

border-radius: 8px;

padding: 20px;

text-align: center;

transition: all 0.3s;

cursor: pointer;

}

.export-option:hover {

border-color: var(--primary);

box-shadow: 0 4px 8px rgba(0,0,0,0.1);

}

.export-icon {

font-size: 2rem;

color: var(--primary);

margin-bottom: 10px;

}

.export-option h3 {

margin-bottom: 10px;

}

.export-option p {

color: var(--gray);

font-size: 0.9rem;

}

/* Responsive Design */

@media (max-width: 768px) {

.dashboard {

grid-template-columns: 1fr;

}

.sidebar {

display: none;

}

.mobile-menu-btn {

display: block;

background: none;

border: none;

font-size: 1.5rem;

color: var(--primary);

cursor: pointer;

}

.report-controls {

flex-direction: column;

align-items: flex-start;

}

.date-range {

flex-direction: column;

align-items: flex-start;

width: 100%;

}

.date-input {

width: 100%;

}

.report-type {

width: 100%;

justify-content: space-between;

}

.mobile-menu-btn {

display: none;

}

</style>

</head>

<body>

<h1>FarmerSmartAI</h1>

</div>

<ul>

<li><a href="index.html" style="color: white; text-decoration: none;"><i class="fas fa-home"></i> Beranda</a></li>

<li><a href="field_monitoring.html" style="color: white; text-decoration: none;"><i class="fas fa-map-marked-alt"></i> Monitoring Lahan</a></li>

<li><a href="farmer_smart_ai_dashboard.html" style="color: white; text-decoration: none;"><i class="fas fa-tachometer-alt"></i> Dashboard</a></li>

<li><a href="ai_recommendations.html" style="color: white; text-decoration: none;"><i class="fas fa-robot"></i> Rekomendasi AI</a></li>

<li><a href="harvest_prediction.html" style="color: white; text-decoration: none;"><i class="fas fa-chart-line"></i> Prediksi Panen</a></li>

<li class="active"><i class="fas fa-clipboard-list"></i> Laporan</li>

<li><i class="fas fa-cog"></i> Pengaturan</li>

</ul>

</div>

<div>

</button>

<h1>Laporan & Analitik</h1>

</div>

<span>Petani Smart</span>

</div>

<label for="endDate">Sampai:</label>

</div>

<i class="fas fa-sync-alt"></i> Refresh

</button>

<i class="fas fa-chart-bar"></i> Generate Laporan

</button>

</div>

</div>

<div class="report-label">Rata-rata Hasil Panen</div>

<i class="fas fa-arrow-up"></i> 12.8% dari periode sebelumnya

</div>

</div>

<div class="report-label">Penggunaan Air</div>

<i class="fas fa-arrow-down"></i> 15.3% lebih efisien

</div>

</div>

<div class="report-label">Pendapatan Bersih</div>

<i class="fas fa-arrow-up"></i> 18.2% dari periode sebelumnya

</div>

</div>

<div class="report-label">Penggunaan Pupuk</div>

<i class="fas fa-arrow-down"></i> 8.5% lebih efisien

</div>

<h2>Trend Hasil Panen</h2>

<option value="6">6 Bulan</option>

<option value="12" selected>1 Tahun</option>

<option value="24">2 Tahun</option>

</select>

</div>

</div>

<h2>Pembiayaan per Kategori</h2>

<option value="3">3 Bulan</option>

<option value="6" selected>6 Bulan</option>

<option value="12">1 Tahun</option>

</select>

</div>

</div>

<h2>Riwayat Aktivitas</h2>

<i class="fas fa-filter"></i> Filter

</button>

</div>

<thead>

<tr>

<th>Tanggal</th>

<th>Aktivitas</th>

<th>Lokasi</th>

<th>Status</th>

</tr>

</thead>

<tbody>

<tr>

<td>Pemupukan Kalium</td>

<td>Area Utara</td>

<td><span class="status-badge status-completed">Selesai</span></td>

</tr>

<tr>

<td>Irigasi Tambahan</td>

<td>Seluruh Area</td>

<td><span class="status-badge status-completed">Selesai</span></td>

</tr>

<tr>

<td>Penyemprotan Pestisida</td>

<td>Area Timur</td>

<td><span class="status-badge status-completed">Selesai</span></td>

</tr>

<tr>

<td>Pemantauan Kesehatan Tanaman</td>

<td>Seluruh Area</td>

<td><span class="status-badge status-completed">Selesai</span></td>

</tr>

<tr>

<td>Pemupukan Nitrogen</td>

<td>Area Selatan</td>

<td><span class="status-badge status-pending">Dalam Proses</span></td>

</tr>

</tbody>

</table>

</div>

<h2>Penggunaan Sumber Daya</h2>

<i class="fas fa-download"></i> Ekspor

</button>

</div>

<thead>

<tr>

<th>Sumber Daya</th>

<th>Jumlah</th>

<th>Biaya</th>

<th>Trend</th>

</tr>

</thead>

<tbody>

<tr>

<td>Air Irigasi</td>

</tr>

<tr>

<td>Pupuk NPK</td>

</tr>

<tr>

<td>Pupuk KCL</td>

</tr>

<tr>

<td>Pestisida</td>

</tr>

<tr>

<td>Tenaga Kerja</td>

</tr>

</tbody>

</table>

</div>

<h2>Ekspor Laporan</h2>

<i class="fas fa-file-export"></i> Ekspor Semua

</button>

</div>

</div>

<h3>Laporan PDF</h3>

<p>Ekspor laporan lengkap dalam format PDF</p>

<i class="fas fa-download"></i> Unduh

</button>

</div>

</div>

<h3>Data Excel</h3>

<p>Ekspor data mentah dalam format Excel</p>

<i class="fas fa-download"></i> Unduh

</button>

</div>

</div>

<h3>Grafik & Visual</h3>

<p>Ekspor grafik dan visualisasi data</p>

<i class="fas fa-download"></i> Unduh

</button>

</div>

</div>

<p>Ekspor data dalam format CSV untuk analisis</p>

<i class="fas fa-download"></i> Unduh

</button>

</div>

// Initialize when page loads

document.addEventListener('DOMContentLoaded', function() {

initCharts();

setupEventListeners();

// Mobile menu toggle

const mobileMenuBtn = document.querySelector('.mobile-menu-btn');

const sidebar = document.querySelector('.sidebar');

if (mobileMenuBtn) {

mobileMenuBtn.addEventListener('click', function() {

sidebar.style.display = sidebar.style.display === 'block' ? 'none' : 'block';

});

}

});

// Initialize Charts

function initCharts() {

// Yield Trend Chart

const yieldCtx = document.getElementById('yieldCanvas').getContext('2d');

const yieldChart = new Chart(yieldCtx, {

type: 'line',

data: {

labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],

datasets: [

{

label: 'Hasil Panen (ton/ha)',

data: [6.2, 6.5, 6.8, 7.1, 7.3, 7.5, 7.8, 7.6, 7.4, 7.2, 7.0, 6.8],

borderColor: '#4caf50',

backgroundColor: 'rgba(76, 175, 80, 0.1)',

borderWidth: 3,

fill: true,

tension: 0.4

{

label: 'Rata-rata Historis',

data: [5.8, 6.0, 6.2, 6.5, 6.7, 6.9, 7.0, 6.9, 6.7, 6.5, 6.3, 6.1],

borderColor: '#ff9800',

backgroundColor: 'rgba(255, 152, 0, 0.1)',

borderWidth: 2,

fill: false,

tension: 0.4,

borderDash: [5, 5]

}

]

options: {

responsive: true,

maintainAspectRatio: false,

scales: {

y: {

beginAtZero: false,

min: 5,

max: 8,

title: {

display: true,

text: 'Ton per Hektar'

}

plugins: {

legend: {

display: true,

position: 'top'

}

});

// Finance Breakdown Chart

const financeCtx = document.getElementById('financeCanvas').getContext('2d');

const financeChart = new Chart(financeCtx, {

type: 'doughnut',

data: {

labels: ['Pupuk', 'Pestisida', 'Air', 'Tenaga Kerja', 'Lainnya'],

datasets: [{

data: [35, 20, 15, 25, 5],

backgroundColor: [

'rgba(76, 175, 80, 0.7)',

'rgba(255, 152, 0, 0.7)',

'rgba(33, 150, 243, 0.7)',

'rgba(156, 39, 176, 0.7)',

'rgba(158, 158, 158, 0.7)'

borderColor: [

'rgba(76, 175, 80, 1)',

'rgba(255, 152, 0, 1)',

'rgba(33, 150, 243, 1)',

'rgba(156, 39, 176, 1)',

'rgba(158, 158, 158, 1)'

borderWidth: 1

}]

options: {

responsive: true,

maintainAspectRatio: false,

plugins: {

legend: {

position: 'bottom'

tooltip: {

callbacks: {

label: function(context) {

return `${context.label}: ${context.parsed}%`;

}

});

// Update charts when range selector changes

document.getElementById('yieldRange').addEventListener('change', function() {

// In a real app, this would fetch new data based on the selected range

console.log('Yield range changed to:', this.value);

});

document.getElementById('financeRange').addEventListener('change', function() {

// In a real app, this would fetch new data based on the selected range

console.log('Finance range changed to:', this.value);

});

}

// Setup event listeners

function setupEventListeners() {

// Generate report button

document.getElementById('generateReport').addEventListener('click', function() {

const startDate = document.getElementById('startDate').value;

const endDate = document.getElementById('endDate').value;

// Show loading state

this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Membuat Laporan...';

this.disabled = true;

// Simulate API call delay

setTimeout(() => {

// Reset button

this.innerHTML = '<i class="fas fa-chart-bar"></i> Generate Laporan';

this.disabled = false;

// Show success message

alert(`Laporan berhasil dibuat untuk periode ${startDate} hingga ${endDate}`);

// In a real app, this would update the charts and tables with new data

updateReportData(startDate, endDate);

}, 2000);

});

// Export buttons

const exportButtons = document.querySelectorAll('.export-option .btn');

exportButtons.forEach(button => {

button.addEventListener('click', function() {

const format = this.closest('.export-option').querySelector('h3').textContent;

// Show loading state

const originalText = this.innerHTML;

this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Memproses...';

this.disabled = true;

// Simulate export process

setTimeout(() => {

// Reset button

this.innerHTML = originalText;

this.disabled = false;

// Show success message

alert(`Ekspor ${format} berhasil! File akan diunduh otomatis.`);

// In a real app, this would trigger the actual file download

}, 1500);

});

}

// Update report data based on date range

function updateReportData(startDate, endDate) {

// In a real app, this would fetch new data from an API

// For demo purposes, we'll just log the dates and simulate data updates

console.log(`Fetching data for range: ${startDate} to ${endDate}`);

// Simulate updating the report cards with new data

const reportCards = document.querySelectorAll('.report-card .report-value');

reportCards.forEach(card => {

const currentValue = parseFloat(card.textContent);

// Add small random variation to simulate new data

const variation = (Math.random() * 0.1) - 0.05; // -5% to +5%

const newValue = currentValue * (1 + variation);

// Format based on content type

if (card.textContent.includes('ton')) {

card.textContent = newValue.toFixed(1) + ' ton/ha';

} else if (card.textContent.includes('Rp')) {

card.textContent = 'Rp ' + (newValue / 1000000).toFixed(1) + ' Jt';

} else if (card.textContent.includes('L')) {

card.textContent = (newValue / 1000000).toFixed(1) + ' juta L';

} else if (card.textContent.includes('kg')) {

card.textContent = Math.round(newValue) + ' kg';

}

});

// Update trend indicators

const trends = document.querySelectorAll('.report-trend');

trends.forEach(trend => {

const isPositive = Math.random() > 0.3; // 70% chance of positive trend

const percentage = (Math.random() * 10 + 5).toFixed(1); // 5-15%

if (isPositive) {

trend.className = 'report-trend trend-up';

trend.innerHTML = `<i class="fas fa-arrow-up"></i> ${percentage}% dari periode sebelumnya`;

} else {

trend.className = 'report-trend trend-down';

trend.innerHTML = `<i class="fas fa-arrow-down"></i> ${percentage}% dari periode sebelumnya`;

}

});

}

// Initialize with current date range

const today = new Date();

const firstDay = new Date(today.getFullYear(), today.getMonth(), 1);

const lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0);

// Format dates as YYYY-MM-DD

function formatDate(date) {

const year = date.getFullYear();

const month = String(date.getMonth() + 1).padStart(2, '0');

const day = String(date.getDate()).padStart(2, '0');

return `${year}-${month}-${day}`;

}

// Set default date range to current month

document.getElementById('startDate').value = formatDate(firstDay);

document.getElementById('endDate').value = formatDate(lastDay);

</script>

</body>

</html>

```

Fitur Halaman Reports:

1. Kontrol Laporan - Panel untuk memilih periode laporan:

· Pilih tanggal mulai dan akhir

· Tombol refresh dan generate laporan

· Filter berdasarkan rentang waktu

2. Kartu Ringkasan - 4 kartu metrik utama:

· Rata-rata hasil panen dengan trend

· Penggunaan air dengan efisiensi

· Pendapatan bersih dengan pertumbuhan

· Penggunaan pupuk dengan efisiensi

3. Grafik Interaktif - Visualisasi data:

· Trend Hasil Panen: Line chart perbandingan dengan rata-rata historis

· Pembiayaan per Kategori: Doughnut chart breakdown biaya operasional

4. Tabel Data - Tampilan data terstruktur:

· Riwayat Aktivitas: Log semua aktivitas pertanian dengan status

· Penggunaan Sumber Daya: Detail konsumsi dan biaya dengan indikator trend

5. Sistem Ekspor - Berbagai format ekspor:

· Laporan PDF lengkap

· Data Excel untuk analisis lebih lanjut

· Grafik dan visualisasi

· Data CSV untuk pemrosesan data

6. Fungsi Real-time:

· Pembaruan data berdasarkan periode yang dipilih

· Indikator loading saat memproses

· Notifikasi keberhasilan operasi

7. Desain Responsif - Tampilan optimal di semua perangkat

Halaman ini memberikan alat analitik 𝗒ang komprehensif untuk melacak 𝗄inerja pertanian, mengidentifikasi tren, dan membuat keputusan berbasis data yang lebih baik

Bersambung ke: Kode Isi File 𝗌𝖾ttings.html

Search This Blog

Aplikasi FarmerSmartAI

Kode Isi File reports.html

Comments

Post a Comment

Popular posts from this blog

logo-placeholder.html

Aplikasi FarmerSmartAI:

icon-generator.html