AgriPilot/dashboard.html at main · AdaviDigital/AgriPilot · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Executive Dashboard | AgriPilot System</title>
<meta name="description" content="Live executive dashboard for AgriPilot System — animal counts, health, finance, feed and AI recommendations at a glance.">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://www.agripilotsystem.com/{PATH}">
<meta property="og:title" content="Executive Dashboard | AgriPilot System">
<meta property="og:description" content="Live executive dashboard for AgriPilot System — animal counts, health, finance, feed and AI recommendations at a glance.">
<meta property="og:type" content="website">
<meta property="og:image" content="images/og-cover.svg">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" type="image/svg+xml" href="images/favicon.svg">
<link rel="stylesheet" href="css/style.css">

</head>
<body class="">
<div class="app-shell">
<aside class="sidebar">
  <div class="sidebar-brand"><img src="images/logo.svg" alt="AgriPilot" height="30"></div>
  <nav class="sidebar-nav"><div class="nav-group-label">Overview</div><a href="dashboard.html" class="side-link active"><span class="ic">📊</span>Dashboard</a>
<a href="notifications.html" class="side-link"><span class="ic">🔔</span>Notifications</a>
<a href="weather.html" class="side-link"><span class="ic">☀️</span>Weather</a>
<a href="farm-map.html" class="side-link"><span class="ic">🗺️</span>Farm Map</a><div class="nav-group-label">Livestock</div><a href="livestock.html" class="side-link"><span class="ic">🐄</span>Livestock Registry</a>
<a href="livestock-profile.html" class="side-link"><span class="ic">🪪</span>Animal Profile</a>
<a href="health.html" class="side-link"><span class="ic">❤️‍🩹</span>AI Health Monitoring</a>
<a href="breeding.html" class="side-link"><span class="ic">🧬</span>Breeding &amp; Reproduction</a>
<a href="growth.html" class="side-link"><span class="ic">📈</span>Growth Monitoring</a>
<a href="production.html" class="side-link"><span class="ic">🥚</span>Production</a><div class="nav-group-label">Operations</div><a href="feed.html" class="side-link"><span class="ic">🌾</span>Feed Management</a>
<a href="inventory.html" class="side-link"><span class="ic">📦</span>Inventory</a>
<a href="workforce.html" class="side-link"><span class="ic">👷</span>Workforce</a>
<a href="suppliers.html" class="side-link"><span class="ic">🚚</span>Suppliers</a><div class="nav-group-label">Business</div><a href="finance.html" class="side-link"><span class="ic">💰</span>Finance</a>
<a href="sales.html" class="side-link"><span class="ic">🧾</span>Sales &amp; Orders</a>
<a href="reports.html" class="side-link"><span class="ic">📄</span>Reports</a><div class="nav-group-label">Intelligence</div><a href="ai-advisor.html" class="side-link"><span class="ic">🤖</span>AI Farm Advisor</a><div class="nav-group-label">Administration</div><a href="users.html" class="side-link"><span class="ic">🛡️</span>Users &amp; Roles</a>
<a href="settings.html" class="side-link"><span class="ic">⚙️</span>Settings</a></nav>
  <div class="sidebar-foot">AgriPilot System v1.0<br>Ikorodu, Lagos, Nigeria</div>
</aside>
<div>
<header class="topbar">
  <div class="flex items-center gap-16">
    <button class="icon-btn" data-sidebar-toggle aria-label="Toggle menu">☰</button>
    <div class="topbar-search"><span>🔍</span><input type="text" placeholder="Search animals, records, reports..."></div>
  </div>
  <div class="topbar-actions">
    <button class="theme-toggle" data-theme-toggle aria-label="Toggle dark mode">🌙</button>
    <button class="icon-btn" aria-label="Alerts">🔔<span class="dot"></span></button>
    <button class="icon-btn" aria-label="Messages">✉️</button>
    <a href="settings.html" class="user-chip">
      <span class="avatar">JD</span>
      <span class="who"><b>Jide Adavi</b><span>Farm Owner</span></span>
    </a>
  </div>
</header>
<main class="page-wrap">

<div class="page-head">
  <div><div class="breadcrumb">OVERVIEW</div><h1>Executive Dashboard</h1></div>
  <div class="page-actions">
    <button class="btn btn-outline btn-sm">📄 Export Report</button>
    <a href="livestock.html" class="btn btn-primary btn-sm">+ Register Animal</a>
  </div>
</div>

<div class="grid grid-4 mt-16">
  <div class="kpi-card"><div class="kpi-top"><span class="kpi-icon" style="background:var(--c-primary-light);color:var(--c-primary);">🐄</span><span class="kpi-delta up">+2.1%</span></div><div class="kpi-value">4,812</div><div class="kpi-label">Total Animals</div></div>
  <div class="kpi-card"><div class="kpi-top"><span class="kpi-icon" style="background:#E4F5E5;color:var(--c-success);">💚</span><span class="kpi-delta up">+1.2%</span></div><div class="kpi-value">4,721</div><div class="kpi-label">Healthy Animals</div></div>
  <div class="kpi-card"><div class="kpi-top"><span class="kpi-icon" style="background:#FCE7E6;color:var(--c-error);">🤒</span><span class="kpi-delta down">-0.4%</span></div><div class="kpi-value">91</div><div class="kpi-label">Sick Animals</div></div>
  <div class="kpi-card"><div class="kpi-top"><span class="kpi-icon" style="background:var(--c-secondary-light);color:var(--c-secondary);">🤰</span><span class="kpi-delta up">+3.0%</span></div><div class="kpi-value">142</div><div class="kpi-label">Pregnant Animals</div></div>

  <div class="kpi-card"><div class="kpi-top"><span class="kpi-icon" style="background:var(--c-primary-light);color:var(--c-primary);">💉</span><span class="kpi-delta up">+0.8%</span></div><div class="kpi-value">4,120</div><div class="kpi-label">Vaccinated Animals</div></div>
  <div class="kpi-card"><div class="kpi-top"><span class="kpi-icon" style="background:#FFF3E0;color:var(--c-warning);">📅</span><span class="kpi-delta down">-1.1%</span></div><div class="kpi-value">18</div><div class="kpi-label">Due for Vaccination</div></div>
  <div class="kpi-card"><div class="kpi-top"><span class="kpi-icon" style="background:var(--c-secondary-light);color:var(--c-secondary);">🌾</span><span class="kpi-delta up">+4.5%</span></div><div class="kpi-value">18.4t</div><div class="kpi-label">Feed Inventory</div></div>
  <div class="kpi-card"><div class="kpi-top"><span class="kpi-icon" style="background:#FCE7E6;color:var(--c-error);">☠️</span><span class="kpi-delta down">-0.2%</span></div><div class="kpi-value">1.3%</div><div class="kpi-label">Mortality Rate</div></div>
</div>

<div class="grid grid-2 mt-24" style="grid-template-columns:2fr 1fr;">
  <div class="panel">
    <div class="panel-head"><h3>Financial Overview</h3><button class="btn btn-ghost btn-sm">This Month ▾</button></div>
    <div class="grid grid-3 gap-16 mt-16" style="margin-bottom:18px;">
      <div><div class="kpi-label">Revenue</div><div class="kpi-value" style="font-size:1.4rem;color:var(--c-success);">₦8.42M</div></div>
      <div><div class="kpi-label">Expenses</div><div class="kpi-value" style="font-size:1.4rem;color:var(--c-error);">₦5.59M</div></div>
      <div><div class="kpi-label">Profit</div><div class="kpi-value" style="font-size:1.4rem;color:var(--c-secondary);">₦2.83M</div></div>
    </div>
    <div class="chart-placeholder" data-values="30,45,38,52,49,61,58,66,63,70,68,75"></div>
  </div>
  <div class="panel">
    <div class="panel-head"><h3>Herd Composition</h3></div>
    <div class="donut"><span>4,812</span></div>
    <div class="flex justify-between mt-16" style="font-size:.8rem;">
      <span>🟢 Cattle 62%</span><span>🔵 Poultry 20%</span><span>🟡 Other 18%</span>
    </div>
  </div>
</div>

<div class="grid grid-2 mt-24" style="grid-template-columns:1.3fr 1fr;">
  <div class="panel">
    <div class="panel-head"><h3>AI Recommendations</h3><a href="ai-advisor.html" class="btn btn-ghost btn-sm">Open Advisor →</a></div>
    <div class="alert-item"><span class="alert-dot" style="background:#FCE7E6;color:var(--c-error);">⚠️</span><div><strong>3 animals show elevated mortality risk.</strong><p class="mb-0 text-muted">Recommend veterinary review within 24 hours — see Health Monitoring.</p></div></div>
    <div class="alert-item"><span class="alert-dot" style="background:#FFF3E0;color:var(--c-warning);">🌾</span><div><strong>Feed Zone 2 waste is 6% above target.</strong><p class="mb-0 text-muted">Adjust feeder timing to reduce spillage and cut monthly cost by ~₦140,000.</p></div></div>
    <div class="alert-item"><span class="alert-dot" style="background:var(--c-secondary-light);color:var(--c-secondary);">🧬</span><div><strong>Best breeding window for 5 goats opens this week.</strong><p class="mb-0 text-muted">AI predicts optimal fertility window based on heat-cycle data.</p></div></div>
    <div class="alert-item"><span class="alert-dot" style="background:#E4F5E5;color:var(--c-success);">📈</span><div><strong>White Fulani line outperforming farm average by 12%.</strong><p class="mb-0 text-muted">Consider prioritising this bloodline in next breeding cycle.</p></div></div>
  </div>
  <div class="panel">
    <div class="panel-head"><h3>Vaccination Calendar</h3></div>
    <div class="calendar-grid" data-calendar data-events="3,7,12,18,22,27"></div>
  </div>
</div>

<div class="grid grid-2 mt-24">
  <div class="panel">
    <div class="panel-head"><h3>Recent Births &amp; Sales</h3><a href="production.html" class="btn btn-ghost btn-sm">View All →</a></div>
    <div class="table-wrap"><table>
      <thead><tr><th>Event</th><th>Animal ID</th><th>Species</th><th>Date</th><th>Status</th></tr></thead>
      <tbody>
        <tr><td>Birth</td><td class="mono">A-2291</td><td>Cattle</td><td>Jul 06, 2026</td><td><span class="badge badge-success">Healthy</span></td></tr>
        <tr><td>Sale</td><td class="mono">P-0044</td><td>Poultry (Broiler)</td><td>Jul 05, 2026</td><td><span class="badge badge-info">Completed</span></td></tr>
        <tr><td>Birth</td><td class="mono">G-1187</td><td>Goat</td><td>Jul 04, 2026</td><td><span class="badge badge-success">Healthy</span></td></tr>
        <tr><td>Sale</td><td class="mono">C-0932</td><td>Cattle</td><td>Jul 02, 2026</td><td><span class="badge badge-info">Completed</span></td></tr>
      </tbody>
    </table></div>
  </div>
  <div class="panel">
    <div class="weather-widget">
      <div class="flex justify-between items-center"><h3 class="mb-0">Ikorodu, Lagos</h3><span>🌤️</span></div>
      <div class="weather-now"><span class="temp">29°C</span><div><p class="mb-0">Partly Cloudy</p><p class="mb-0" style="font-size:.8rem;opacity:.8;">Humidity 78% · Wind 11km/h</p></div></div>
      <div class="weather-days">
        <div>Thu<br>🌤️<br>30°</div><div>Fri<br>🌧️<br>27°</div><div>Sat<br>⛅<br>28°</div><div>Sun<br>☀️<br>31°</div><div>Mon<br>🌦️<br>27°</div>
      </div>
    </div>
  </div>
</div>

</main>
</div>
</div>
<script src="js/script.js"></script>

</body>
</html>