Hugging Face's logo

Spaces:
Vitrous
/
sites
Running

App Files Community
Vitrous commited on
Commit
5ae839d
·
verified ·
1 Parent(s): c9eb10c

# Aquaculture Biosecurity Ops (Sea‑lice & Mortality)

Browse files

### One‑liner

Mobile‑first ops & compliance platform for salmon farms: **log lice counts, plan treatments, track mortality**, export regulator‑ready reports.

## 1. Personas & JTBD

- **Farm Manager** — early warnings, compliance, KPIs.
- **Veterinarian** — plan/track treatments, withdrawal windows.
- **Technician** — fast offline logging at pens/cages.
- **CFO/Insurer** — risk trends & reporting.

## 2. KPIs

- Reduced treatment cost & mortality; data completeness; alert lead time; DAU of techs; zero late reports.

## 3. Scope

**MVP**: Lice logging (stages), treatment scheduler, mortality/feed, offline-first mobile, reporting exports, basic analytics.

## 4. UX / IA

### 4.1 Navigation — Mobile

- **Sites** → **Pens** → **Log Lice / Mortality / Feed** → **Sync Queue**
- **Planner** → treatments calendar
- **Reports** → regulator/insurer exports
- **Maps** → site status + weather overlays

### 4.2 Key Screens

1. **Pen Overview**: biomass, last lice sample, next treatment, alerts.
2. **Log Lice**: quick‑tap counters (chalimus/preadult/adult/mobile/attached), add photos, notes, water temp/salinity.
3. **Treatment Plan**: choose product, auto dose by biomass, start/end, withdrawal period, supplier order.
4. **Mortality & Feed**: daily counts, cause codes; feed intake vs biomass charts.
5. **Reports**: pick timeframe/site; export CSV/PDF; sign & send.

### 4.3 Layout Standards

- Big tap targets; one-handed operation; offline banner; clear sync status.

## 5. Feature Checklist (MVP)

- Site/pen registry; barcode/NFC pen IDs.
- Lice logging with stages + photo; thresholds & alerts.
- Treatment planner with contraindications & withdrawal windows.
- Mortality & feed logging; analytics.
- Offline-first sync; conflict resolution; audit logs.
- Reporting exports for regulator/insurer. - Initial Deployment

Files changed (5) hide show
  1. README.md +7 -5
  2. index.html +261 -18
  3. pen-detail.html +285 -0
  4. prompts.txt +50 -0
  5. treatment-planner.html +167 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Sites
3
- emoji: 💻
4
- colorFrom: red
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: sites
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,262 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Aquaculture Biosecurity Ops</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ .offline-banner {
15
+ background: linear-gradient(90deg, #f59e0b, #d97706);
16
+ }
17
+ .sync-queue {
18
+ background: linear-gradient(90deg, #3b82f6, #1d4ed8);
19
+ }
20
+ .alert-badge {
21
+ background: linear-gradient(90deg, #ef4444, #dc2626);
22
+ }
23
+ .treatment-card {
24
+ background: linear-gradient(90deg, #10b981, #059669);
25
+ }
26
+ .big-tap-button {
27
+ min-height: 60px;
28
+ min-width: 60px;
29
+ }
30
+ .stage-counter {
31
+ transition: all 0.2s ease;
32
+ }
33
+ .stage-counter:active {
34
+ transform: scale(0.95);
35
+ }
36
+ </style>
37
+ </head>
38
+ <body class="bg-blue-50 min-h-screen font-sans">
39
+ <!-- Offline Status Banner -->
40
+ <div class="offline-banner text-white py-2 px-4 text-center hidden" id="offlineBanner">
41
+ <div class="flex items-center justify-center">
42
+ <i data-feather="wifi-off" class="mr-2"></i>
43
+ <span>Working offline - Data will sync when connection is restored</span>
44
+ </div>
45
+ </div>
46
+
47
+ <!-- Main Navigation -->
48
+ <nav class="bg-white shadow-lg fixed bottom-0 w-full z-50 md:relative md:top-0">
49
+ <div class="flex justify-around items-center py-3 md:py-4">
50
+ <a href="#sites" class="flex flex-col items-center text-blue-600">
51
+ <i data-feather="map-pin" class="w-6 h-6 md:w-7 md:h-7"></i>
52
+ <span class="text-xs mt-1">Sites</span>
53
+ </a>
54
+ <a href="#planner" class="flex flex-col items-center text-gray-600">
55
+ <i data-feather="calendar" class="w-6 h-6 md:w-7 md:h-7"></i>
56
+ <span class="text-xs mt-1">Planner</span>
57
+ </a>
58
+ <a href="#reports" class="flex flex-col items-center text-gray-600">
59
+ <i data-feather="file-text" class="w-6 h-6 md:w-7 md:h-7"></i>
60
+ <span class="text-xs mt-1">Reports</span>
61
+ </a>
62
+ <a href="#maps" class="flex flex-col items-center text-gray-600">
63
+ <i data-feather="map" class="w-6 h-6 md:w-7 md:h-7"></i>
64
+ <span class="text-xs mt-1">Maps</span>
65
+ </a>
66
+ <a href="#sync" class="flex flex-col items-center text-gray-600 relative">
67
+ <i data-feather="refresh-cw" class="w-6 h-6 md:w-7 md:h-7"></i>
68
+ <span class="text-xs mt-1">Sync</span>
69
+ <span class="absolute -top-1 -right-1 bg-red-500 text-white rounded-full text-xs w-4 h-4 flex items-center justify-center hidden" id="syncCount">0</span>
70
+ </a>
71
+ </div>
72
+ </nav>
73
+
74
+ <!-- Main Content -->
75
+ <main class="pb-20 md:pb-0 md:pt-20">
76
+ <!-- Sites Section -->
77
+ <section id="sites" class="p-4" data-aos="fade-up">
78
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">Your Sites</h2>
79
+
80
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
81
+ <!-- Site Card -->
82
+ <div class="bg-white rounded-xl shadow-md p-4">
83
+ <div class="flex justify-between items-start">
84
+ <h3 class="font-semibold text-lg">North Fjord Site</h3>
85
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Active</span>
86
+ </div>
87
+ <p class="text-gray-600 text-sm mt-2">12 pens • 4500 tons biomass</p>
88
+
89
+ <div class="mt-4 space-y-2">
90
+ <div class="flex justify-between items-center">
91
+ <span class="text-sm">Last lice check:</span>
92
+ <span class="font-medium">2 hours ago</span>
93
+ </div>
94
+ <div class="flex justify-between items-center">
95
+ <span class="text-sm">Avg lice count:</span>
96
+ <span class="font-medium text-orange-600">3.2</span>
97
+ </div>
98
+ </div>
99
+
100
+ <button class="w-full bg-blue-600 text-white py-3 rounded-lg mt-4 font-medium flex items-center justify-center">
101
+ <i data-feather="arrow-right" class="mr-2 w-4 h-4"></i>
102
+ View Pens
103
+ </button>
104
+ </div>
105
+
106
+ <!-- Add more site cards as needed -->
107
+ </div>
108
+ </section>
109
+
110
+ <!-- Quick Actions -->
111
+ <section class="p-4 bg-white mt-6" data-aos="fade-up">
112
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Quick Actions</h2>
113
+ <div class="grid grid-cols-2 gap-3">
114
+ <button class="bg-blue-100 text-blue-800 py-4 rounded-lg font-medium flex flex-col items-center justify-center">
115
+ <i data-feather="plus-circle" class="w-8 h-8 mb-2"></i>
116
+ Log Lice Count
117
+ </button>
118
+ <button class="bg-green-100 text-green-800 py-4 rounded-lg font-medium flex flex-col items-center justify-center">
119
+ <i data-feather="activity" class="w-8 h-8 mb-2"></i>
120
+ Record Mortality
121
+ </button>
122
+ <button class="bg-purple-100 text-purple-800 py-4 rounded-lg font-medium flex flex-col items-center justify-center">
123
+ <i data-feather="calendar" class="w-8 h-8 mb-2"></i>
124
+ Plan Treatment
125
+ </button>
126
+ <button class="bg-orange-100 text-orange-800 py-4 rounded-lg font-medium flex flex-col items-center justify-center">
127
+ <i data-feather="bar-chart-2" class="w-8 h-8 mb-2"></i>
128
+ View Reports
129
+ </button>
130
+ </div>
131
+ </section>
132
+
133
+ <!-- Alerts Section -->
134
+ <section class="p-4 mt-6" data-aos="fade-up">
135
+ <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
136
+ <i data-feather="alert-triangle" class="mr-2 text-orange-600"></i>
137
+ Alerts & Notifications
138
+ </h2>
139
+
140
+ <div class="space-y-3">
141
+ <div class="bg-white rounded-xl shadow-md p-4 border-l-4 border-orange-500">
142
+ <div class="flex justify-between items-start">
143
+ <h3 class="font-semibold">High Lice Count</h3>
144
+ <span class="text-xs text-gray-500">1 hour ago</span>
145
+ </div>
146
+ <p class="text-sm text-gray-600 mt-1">Pen #4: Average count 5.8 - exceeds threshold</p>
147
+ </div>
148
+
149
+ <div class="bg-white rounded-xl shadow-md p-4 border-l-4 border-blue-500">
150
+ <div class="flex justify-between items-start">
151
+ <h3 class="font-semibold">Treatment Due</h3>
152
+ <span class="text-xs text-gray-500">3 hours ago</span>
153
+ </div>
154
+ <p class="text-sm text-gray-600 mt-1">Scheduled treatment for North Fjord starts tomorrow</p>
155
+ </div>
156
+ </div>
157
+ </section>
158
+ </main>
159
+
160
+ <!-- Lice Counting Modal (Hidden by default) -->
161
+ <div id="liceModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
162
+ <div class="bg-white rounded-2xl w-full max-w-md max-h-[90vh] overflow-y-auto">
163
+ <div class="p-6">
164
+ <div class="flex justify-between items-center mb-6">
165
+ <h2 class="text-xl font-bold">Log Lice Count</h2>
166
+ <button onclick="closeModal()" class="text-gray-400 hover:text-gray-600">
167
+ <i data-feather="x"></i>
168
+ </button>
169
+ </div>
170
+
171
+ <div class="space-y-4">
172
+ <div>
173
+ <label class="block text-sm font-medium text-gray-700 mb-2">Select Pen</label>
174
+ <select class="w-full p-3 border border-gray-300 rounded-lg">
175
+ <option>Pen #1 - 380 tons</option>
176
+ <option>Pen #2 - 420 tons</option>
177
+ <option>Pen #3 - 395 tons</option>
178
+ <option>Pen #4 - 410 tons</option>
179
+ </select>
180
+ </div>
181
+
182
+ <div class="grid grid-cols-2 gap-3">
183
+ <div class="text-center">
184
+ <label class="block text-sm font-medium text-gray-700 mb-2">Chalimus</label>
185
+ <div class="stage-counter big-tap-button bg-blue-100 text-blue-800 rounded-lg flex items-center justify-center text-2xl font-bold" onclick="incrementCount(this)">
186
+ 0
187
+ </div>
188
+ </div>
189
+ <div class="text-center">
190
+ <label class="block text-sm font-medium text-gray-700 mb-2">Preadult</label>
191
+ <div class="stage-counter big-tap-button bg-green-100 text-green-800 rounded-lg flex items-center justify-center text-2xl font-bold" onclick="incrementCount(this)">
192
+ 0
193
+ </div>
194
+ </div>
195
+ <div class="text-center">
196
+ <label class="block text-sm font-medium text-gray-700 mb-2">Adult</label>
197
+ <div class="stage-counter big-tap-button bg-yellow-100 text-yellow-800 rounded-lg flex items-center justify-center text-2xl font-bold" onclick="incrementCount(this)">
198
+ 0
199
+ </div>
200
+ </div>
201
+ <div class="text-center">
202
+ <label class="block text-sm font-medium text-gray-700 mb-2">Mobile</label>
203
+ <div class="stage-counter big-tap-button bg-purple-100 text-purple-800 rounded-lg flex items-center justify-center text-2xl font-bold" onclick="incrementCount(this)">
204
+ 0
205
+ </div>
206
+ </div>
207
+ </div>
208
+
209
+ <div>
210
+ <label class="block text-sm font-medium text-gray-700 mb-2">Water Temperature (°C)</label>
211
+ <input type="number" step="0.1" class="w-full p-3 border border-gray-300 rounded-lg" placeholder="12.5">
212
+ </div>
213
+
214
+ <div>
215
+ <label class="block text-sm font-medium text-gray-700 mb-2">Salinity (ppt)</label>
216
+ <input type="number" step="0.1" class="w-full p-3 border border-gray-300 rounded-lg" placeholder="32.5">
217
+ </div>
218
+
219
+ <button class="w-full bg-blue-600 text-white py-3 rounded-lg font-medium mt-4">
220
+ Save Count
221
+ </button>
222
+ </div>
223
+ </div>
224
+ </div>
225
+ </div>
226
+
227
+ <script>
228
+ // Initialize AOS
229
+ AOS.init({
230
+ duration: 800,
231
+ once: true
232
+ });
233
+
234
+ // Initialize Feather Icons
235
+ feather.replace();
236
+
237
+ // Simulate offline status (in real app, would check navigator.onLine)
238
+ setTimeout(() => {
239
+ document.getElementById('offlineBanner').classList.remove('hidden');
240
+ }, 2000);
241
+
242
+ // Modal functions
243
+ function openLiceModal() {
244
+ document.getElementById('liceModal').classList.remove('hidden');
245
+ }
246
+
247
+ function closeModal() {
248
+ document.getElementById('liceModal').classList.add('hidden');
249
+ }
250
+
251
+ // Counter increment function
252
+ function incrementCount(element) {
253
+ let count = parseInt(element.textContent);
254
+ element.textContent = count + 1;
255
+ }
256
+
257
+ // Simulate sync queue items
258
+ document.getElementById('syncCount').textContent = '3';
259
+ document.getElementById('syncCount').classList.remove('hidden');
260
+ </script>
261
+ </body>
262
  </html>
pen-detail.html ADDED
@@ -0,0 +1,285 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Pen Details - Aquaculture Biosecurity Ops</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <style>
11
+ .progress-bar {
12
+ height: 8px;
13
+ border-radius: 4px;
14
+ overflow: hidden;
15
+ }
16
+ .stage-counter {
17
+ transition: all 0.2s ease;
18
+ }
19
+ .stage-counter:active {
20
+ transform: scale(0.95);
21
+ }
22
+ </style>
23
+ </head>
24
+ <body class="bg-gray-50 min-h-screen font-sans">
25
+ <!-- Header -->
26
+ <header class="bg-white shadow-sm p-4 sticky top-0 z-10">
27
+ <div class="flex items-center">
28
+ <a href="index.html" class="mr-3">
29
+ <i data-feather="arrow-left"></i>
30
+ </a>
31
+ <h1 class="text-xl font-bold text-gray-800">Pen #4 - North Fjord</h1>
32
+ </div>
33
+ </header>
34
+
35
+ <!-- Main Content -->
36
+ <main class="p-4 pb-20">
37
+ <!-- Pen Overview -->
38
+ <section class="bg-white rounded-xl shadow-md p-4 mb-6">
39
+ <div class="grid grid-cols-2 gap-4">
40
+ <div class="text-center">
41
+ <div class="text-2xl font-bold text-blue-600">410</div>
42
+ <div class="text-sm text-gray-600">Tons Biomass</div>
43
+ </div>
44
+ <div class="text-center">
45
+ <div class="text-2xl font-bold text-orange-600">5.8</div>
46
+ <div class="text-sm text-gray-600">Avg Lice Count</div>
47
+ </div>
48
+ </div>
49
+
50
+ <div class="mt-4">
51
+ <div class="flex justify-between items-center mb-2">
52
+ <span class="text-sm font-medium">Stocking Density</span>
53
+ <span class="text-sm">78%</span>
54
+ </div>
55
+ <div class="progress-bar bg-gray-200">
56
+ <div class="bg-green-500 h-full" style="width: 78%"></div>
57
+ </div>
58
+ </div>
59
+
60
+ <div class="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg">
61
+ <div class="flex items-center">
62
+ <i data-feather="alert-triangle" class="text-red-600 mr-2"></i>
63
+ <span class="text-red-700 font-medium">High Lice Alert</span>
64
+ </div>
65
+ <p class="text-red-600 text-sm mt-1">Exceeds treatment threshold of 3.0</p>
66
+ </div>
67
+ </section>
68
+
69
+ <!-- Quick Actions -->
70
+ <section class="mb-6">
71
+ <div class="grid grid-cols-3 gap-3">
72
+ <button onclick="openLiceModal()" class="bg-blue-600 text-white py-3 rounded-lg font-medium flex flex-col items-center justify-center">
73
+ <i data-feather="plus-circle" class="w-6 h-6 mb-1"></i>
74
+ <span class="text-xs">Lice Count</span>
75
+ </button>
76
+ <button class="bg-green-600 text-white py-3 rounded-lg font-medium flex flex-col items-center justify-center">
77
+ <i data-feather="activity" class="w-6 h-6 mb-1"></i>
78
+ <span class="text-xs">Mortality</span>
79
+ </button>
80
+ <button class="bg-purple-600 text-white py-3 rounded-lg font-medium flex flex-col items-center justify-center">
81
+ <i data-feather="calendar" class="w-6 h-6 mb-1"></i>
82
+ <span class="text-xs">Treatment</span>
83
+ </button>
84
+ </div>
85
+ </section>
86
+
87
+ <!-- Recent Activity -->
88
+ <section class="bg-white rounded-xl shadow-md p-4 mb-6">
89
+ <h2 class="text-lg font-bold text-gray-800 mb-4">Recent Activity</h2>
90
+
91
+ <div class="space-y-3">
92
+ <div class="flex items-center justify-between">
93
+ <div class="flex items-center">
94
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
95
+ <i data-feather="bar-chart-2" class="text-blue-600 w-5 h-5"></i>
96
+ </div>
97
+ <div>
98
+ <div class="font-medium">Lice Count</div>
99
+ <div class="text-sm text-gray-600">Avg: 5.8 • 2 hours ago</div>
100
+ </div>
101
+ </div>
102
+ <span class="text-red-600 font-medium">High</span>
103
+ </div>
104
+
105
+ <div class="flex items-center justify-between">
106
+ <div class="flex items-center">
107
+ <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
108
+ <i data-feather="activity" class="text-green-600 w-5 h-5"></i>
109
+ </div>
110
+ <div>
111
+ <div class="font-medium">Mortality</div>
112
+ <div class="text-sm text-gray-600">15 fish • 4 hours ago</div>
113
+ </div>
114
+ </div>
115
+ <span class="text-gray-600">Normal</span>
116
+ </div>
117
+
118
+ <div class="flex items-center justify-between">
119
+ <div class="flex items-center">
120
+ <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3">
121
+ <i data-feather="cloud-rain" class="text-purple-600 w-5 h-5"></i>
122
+ </div>
123
+ <div>
124
+ <div class="font-medium">Treatment</div>
125
+ <div class="text-sm text-gray-600">Scheduled • Tomorrow</div>
126
+ </div>
127
+ </div>
128
+ <span class="text-blue-600 font-medium">Pending</span>
129
+ </div>
130
+ </div>
131
+ </section>
132
+
133
+ <!-- Lice History Chart -->
134
+ <section class="bg-white rounded-xl shadow-md p-4 mb-6">
135
+ <h2 class="text-lg font-bold text-gray-800 mb-4">Lice Count Trend</h2>
136
+
137
+ <div class="bg-gray-50 rounded-lg p-3 h-40 flex items-end">
138
+ <!-- Simplified chart bars -->
139
+ <div class="flex items-end justify-between w-full h-32">
140
+ <div class="flex flex-col items-center">
141
+ <div class="bg-blue-400 w-6 rounded-t" style="height: 40px"></div>
142
+ <span class="text-xs mt-1">Mon</span>
143
+ </div>
144
+ <div class="flex flex-col items-center">
145
+ <div class="bg-blue-400 w-6 rounded-t" style="height: 55px"></div>
146
+ <span class="text-xs mt-1">Tue</span>
147
+ </div>
148
+ <div class="flex flex-col items-center">
149
+ <div class="bg-blue-400 w-6 rounded-t" style="height: 48px"></div>
150
+ <span class="text-xs mt-1">Wed</span>
151
+ </div>
152
+ <div class="flex flex-col items-center">
153
+ <div class="bg-blue-400 w-6 rounded-t" style="height: 65px"></div>
154
+ <span class="text-xs mt-1">Thu</span>
155
+ </div>
156
+ <div class="flex flex-col items-center">
157
+ <div class="bg-orange-400 w-6 rounded-t" style="height: 85px"></div>
158
+ <span class="text-xs mt-1">Today</span>
159
+ </div>
160
+ </div>
161
+ </div>
162
+
163
+ <div class="mt-3 flex justify-between items-center">
164
+ <span class="text-sm text-gray-600">7-day average: 4.2</span>
165
+ <span class="text-sm font-medium text-orange-600">+38% increase</span>
166
+ </div>
167
+ </section>
168
+
169
+ <!-- Treatment Info -->
170
+ <section class="bg-white rounded-xl shadow-md p-4">
171
+ <h2 class="text-lg font-bold text-gray-800 mb-4">Treatment Plan</h2>
172
+
173
+ <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3 mb-4">
174
+ <div class="flex items-center mb-2">
175
+ <i data-feather="clock" class="text-yellow-600 mr-2"></i>
176
+ <span class="font-medium">Scheduled for tomorrow</span>
177
+ </div>
178
+ <p class="text-sm text-yellow-700">Product: Hydrogen Peroxide • Duration: 4 hours</p>
179
+ </div>
180
+
181
+ <div class="space-y-2">
182
+ <div class="flex justify-between">
183
+ <span class="text-gray-600">Product</span>
184
+ <span class="font-medium">Hydrogen Peroxide</span>
185
+ </div>
186
+ <div class="flex justify-between">
187
+ <span class="text-gray-600">Dosage</span>
188
+ <span class="font-medium">1.8 mg/L</span>
189
+ </div>
190
+ <div class="flex justify-between">
191
+ <span class="text-gray-600">Duration</span>
192
+ <span class="font-medium">4 hours</span>
193
+ </div>
194
+ <div class="flex justify-between">
195
+ <span class="text-gray-600">Withdrawal</span>
196
+ <span class="font-medium">72 hours</span>
197
+ </div>
198
+ </div>
199
+
200
+ <button class="w-full bg-blue-600 text-white py-3 rounded-lg font-medium mt-4">
201
+ View Full Treatment Plan
202
+ </button>
203
+ </section>
204
+ </main>
205
+
206
+ <!-- Lice Counting Modal -->
207
+ <div id="liceModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
208
+ <div class="bg-white rounded-2xl w-full max-w-md max-h-[90vh] overflow-y-auto">
209
+ <div class="p-6">
210
+ <div class="flex justify-between items-center mb-6">
211
+ <h2 class="text-xl font-bold">Log Lice Count - Pen #4</h2>
212
+ <button onclick="closeModal()" class="text-gray-400 hover:text-gray-600">
213
+ <i data-feather="x"></i>
214
+ </button>
215
+ </div>
216
+
217
+ <div class="space-y-4">
218
+ <div class="grid grid-cols-2 gap-3">
219
+ <div class="text-center">
220
+ <label class="block text-sm font-medium text-gray-700 mb-2">Chalimus</label>
221
+ <div class="stage-counter big-tap-button bg-blue-100 text-blue-800 rounded-lg flex items-center justify-center text-2xl font-bold" onclick="incrementCount(this)">
222
+ 0
223
+ </div>
224
+ </div>
225
+ <div class="text-center">
226
+ <label class="block text-sm font-medium text-gray-700 mb-2">Preadult</label>
227
+ <div class="stage-counter big-tap-button bg-green-100 text-green-800 rounded-lg flex items-center justify-center text-2xl font-bold" onclick="incrementCount(this)">
228
+ 0
229
+ </div>
230
+ </div>
231
+ <div class="text-center">
232
+ <label class="block text-sm font-medium text-gray-700 mb-2">Adult</label>
233
+ <div class="stage-counter big-tap-button bg-yellow-100 text-yellow-800 rounded-lg flex items-center justify-center text-2xl font-bold" onclick="incrementCount(this)">
234
+ 0
235
+ </div>
236
+ </div>
237
+ <div class="text-center">
238
+ <label class="block text-sm font-medium text-gray-700 mb-2">Mobile</label>
239
+ <div class="stage-counter big-tap-button bg-purple-100 text-purple-800 rounded-lg flex items-center justify-center text-2xl font-bold" onclick="incrementCount(this)">
240
+ 0
241
+ </div>
242
+ </div>
243
+ </div>
244
+
245
+ <div>
246
+ <label class="block text-sm font-medium text-gray-700 mb-2">Water Temperature (°C)</label>
247
+ <input type="number" step="0.1" class="w-full p-3 border border-gray-300 rounded-lg" value="12.8">
248
+ </div>
249
+
250
+ <div>
251
+ <label class="block text-sm font-medium text-gray-700 mb-2">Salinity (ppt)</label>
252
+ <input type="number" step="0.1" class="w-full p-3 border border-gray-300 rounded-lg" value="31.2">
253
+ </div>
254
+
255
+ <div>
256
+ <label class="block text-sm font-medium text-gray-700 mb-2">Notes (optional)</label>
257
+ <textarea class="w-full p-3 border border-gray-300 rounded-lg" rows="2" placeholder="Observations..."></textarea>
258
+ </div>
259
+
260
+ <button class="w-full bg-blue-600 text-white py-3 rounded-lg font-medium">
261
+ Save Count
262
+ </button>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ </div>
267
+
268
+ <script>
269
+ feather.replace();
270
+
271
+ function openLiceModal() {
272
+ document.getElementById('liceModal').classList.remove('hidden');
273
+ }
274
+
275
+ function closeModal() {
276
+ document.getElementById('liceModal').classList.add('hidden');
277
+ }
278
+
279
+ function incrementCount(element) {
280
+ let count = parseInt(element.textContent);
281
+ element.textContent = count + 1;
282
+ }
283
+ </script>
284
+ </body>
285
+ </html>
prompts.txt ADDED
@@ -0,0 +1,50 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # Aquaculture Biosecurity Ops (Sea‑lice & Mortality)
2
+
3
+ ### One‑liner
4
+
5
+ Mobile‑first ops & compliance platform for salmon farms: **log lice counts, plan treatments, track mortality**, export regulator‑ready reports.
6
+
7
+ ## 1. Personas & JTBD
8
+
9
+ - **Farm Manager** — early warnings, compliance, KPIs.
10
+ - **Veterinarian** — plan/track treatments, withdrawal windows.
11
+ - **Technician** — fast offline logging at pens/cages.
12
+ - **CFO/Insurer** — risk trends & reporting.
13
+
14
+ ## 2. KPIs
15
+
16
+ - Reduced treatment cost & mortality; data completeness; alert lead time; DAU of techs; zero late reports.
17
+
18
+ ## 3. Scope
19
+
20
+ **MVP**: Lice logging (stages), treatment scheduler, mortality/feed, offline-first mobile, reporting exports, basic analytics.
21
+
22
+ ## 4. UX / IA
23
+
24
+ ### 4.1 Navigation — Mobile
25
+
26
+ - **Sites** → **Pens** → **Log Lice / Mortality / Feed** → **Sync Queue**
27
+ - **Planner** → treatments calendar
28
+ - **Reports** → regulator/insurer exports
29
+ - **Maps** → site status + weather overlays
30
+
31
+ ### 4.2 Key Screens
32
+
33
+ 1. **Pen Overview**: biomass, last lice sample, next treatment, alerts.
34
+ 2. **Log Lice**: quick‑tap counters (chalimus/preadult/adult/mobile/attached), add photos, notes, water temp/salinity.
35
+ 3. **Treatment Plan**: choose product, auto dose by biomass, start/end, withdrawal period, supplier order.
36
+ 4. **Mortality & Feed**: daily counts, cause codes; feed intake vs biomass charts.
37
+ 5. **Reports**: pick timeframe/site; export CSV/PDF; sign & send.
38
+
39
+ ### 4.3 Layout Standards
40
+
41
+ - Big tap targets; one-handed operation; offline banner; clear sync status.
42
+
43
+ ## 5. Feature Checklist (MVP)
44
+
45
+ - Site/pen registry; barcode/NFC pen IDs.
46
+ - Lice logging with stages + photo; thresholds & alerts.
47
+ - Treatment planner with contraindications & withdrawal windows.
48
+ - Mortality & feed logging; analytics.
49
+ - Offline-first sync; conflict resolution; audit logs.
50
+ - Reporting exports for regulator/insurer.
treatment-planner.html ADDED
@@ -0,0 +1,167 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Treatment Planner - Aquaculture Biosecurity Ops</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ </head>
11
+ <body class="bg-gray-50 min-h-screen font-sans">
12
+ <!-- Header -->
13
+ <header class="bg-white shadow-sm p-4 sticky top-0 z-10">
14
+ <div class="flex items-center">
15
+ <a href="index.html" class="mr-3">
16
+ <i data-feather="arrow-left"></i>
17
+ </a>
18
+ <h1 class="text-xl font-bold text-gray-800">Treatment Planner</h1>
19
+ </div>
20
+ </header>
21
+
22
+ <!-- Main Content -->
23
+ <main class="p-4 pb-20">
24
+ <!-- Schedule Overview -->
25
+ <section class="bg-white rounded-xl shadow-md p-4 mb-6">
26
+ <h2 class="text-lg font-bold text-gray-800 mb-4">This Week's Schedule</h2>
27
+
28
+ <div class="space-y-3">
29
+ <div class="flex items-center justify-between p-3 bg-blue-50 border border-blue-200 rounded-lg">
30
+ <div>
31
+ <div class="font-medium">North Fjord - Pen #4</div>
32
+ <div class="text-sm text-blue-600">Hydrogen Peroxide Treatment</div>
33
+ </div>
34
+ <div class="text-right">
35
+ <div class="font-medium">Tomorrow</div>
36
+ <div class="text-sm text-gray-600">08:00 - 12:00</div>
37
+ </div>
38
+ </div>
39
+
40
+ <div class="flex items-center justify-between p-3 bg-green-50 border border-green-200 rounded-lg">
41
+ <div>
42
+ <div class="font-medium">South Bay - Pen #2</div>
43
+ <div class="text-sm text-green-600">Freshwater Bath</div>
44
+ </div>
45
+ <div class="text-right">
46
+ <div class="font-medium">Friday</div>
47
+ <div class="text-sm text-gray-600">10:00 - 14:00</div>
48
+ </div>
49
+ </div>
50
+ </div>
51
+ </section>
52
+
53
+ <!-- Plan New Treatment -->
54
+ <section class="bg-white rounded-xl shadow-md p-4 mb-6">
55
+ <h2 class="text-lg font-bold text-gray-800 mb-4">Plan New Treatment</h2>
56
+
57
+ <div class="space-y-4">
58
+ <div>
59
+ <label class="block text-sm font-medium text-gray-700 mb-2">Select Site/Pen</label>
60
+ <select class="w-full p-3 border border-gray-300 rounded-lg">
61
+ <option>North Fjord - Pen #4</option>
62
+ <option>North Fjord - Pen #3</option>
63
+ <option>South Bay - Pen #1</option>
64
+ <option>South Bay - Pen #2</option>
65
+ </select>
66
+ </div>
67
+
68
+ <div>
69
+ <label class="block text-sm font-medium text-gray-700 mb-2">Treatment Product</label>
70
+ <select class="w-full p-3 border border-gray-300 rounded-lg">
71
+ <option>Hydrogen Peroxide</option>
72
+ <option>Freshwater Bath</option>
73
+ <option>Azamethiphos</option>
74
+ <option>Deltamethrin</option>
75
+ </select>
76
+ </div>
77
+
78
+ <div class="grid grid-cols-2 gap-4">
79
+ <div>
80
+ <label class="block text-sm font-medium text-gray-700 mb-2">Start Date</label>
81
+ <input type="date" class="w-full p-3 border border-gray-300 rounded-lg">
82
+ </div>
83
+ <div>
84
+ <label class="block text-sm font-medium text-gray-700 mb-2">Duration (hours)</label>
85
+ <input type="number" class="w-full p-3 border border-gray-300 rounded-lg" value="4">
86
+ </div>
87
+ </div>
88
+
89
+ <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
90
+ <div class="flex items-center mb-2">
91
+ <i data-feather="info" class="text-yellow-600 mr-2"></i>
92
+ <span class="font-medium">Auto-calculated Dosage</span>
93
+ </div>
94
+ <p class="text-sm text-yellow-700">Based on 410 tons biomass: 1.8 mg/L Hydrogen Peroxide</p>
95
+ </div>
96
+
97
+ <button class="w-full bg-blue-600 text-white py-3 rounded-lg font-medium">
98
+ Schedule Treatment
99
+ </button>
100
+ </div>
101
+ </section>
102
+
103
+ <!-- Product Information -->
104
+ <section class="bg-white rounded-xl shadow-md p-4 mb-6">
105
+ <h2 class="text-lg font-bold text-gray-800 mb-4">Treatment Products</h2>
106
+
107
+ <div class="space-y-3">
108
+ <div class="p-3 border border-gray-200 rounded-lg">
109
+ <div class="flex justify-between items-start">
110
+ <h3 class="font-medium">Hydrogen Peroxide</h3>
111
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Available</span>
112
+ </div>
113
+ <p class="text-sm text-gray-600 mt-1">Dosage: 1.5-2.0 mg/L • Withdrawal: 72 hours</p>
114
+ </div>
115
+
116
+ <div class="p-3 border border-gray-200 rounded-lg">
117
+ <div class="flex justify-between items-start">
118
+ <h3 class="font-medium">Freshwater Bath</h3>
119
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Available</span>
120
+ </div>
121
+ <p class="text-sm text-gray-600 mt-1">Duration: 2-4 hours • Withdrawal: None</p>
122
+ </div>
123
+
124
+ <div class="p-3 border border-gray-200 rounded-lg">
125
+ <div class="flex justify-between items-start">
126
+ <h3 class="font-medium">Azamethiphos</h3>
127
+ <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">Low Stock</span>
128
+ </div>
129
+ <p class="text-sm text-gray-600 mt-1">Dosage: 0.05 mg/L • Withdrawal: 15 days</p>
130
+ </div>
131
+ </div>
132
+
133
+ <button class="w-full bg-gray-100 text-gray-800 py-3 rounded-lg font-medium mt-4">
134
+ View All Products
135
+ </button>
136
+ </section>
137
+
138
+ <!-- Withdrawal Periods -->
139
+ <section class="bg-white rounded-xl shadow-md p-4">
140
+ <h2 class="text-lg font-bold text-gray-800 mb-4">Withdrawal Period Guide</h2>
141
+
142
+ <div class="space-y-2">
143
+ <div class="flex justify-between items-center p-2">
144
+ <span class="text-sm">Hydrogen Peroxide</span>
145
+ <span class="text-sm font-medium">72 hours</span>
146
+ </div>
147
+ <div class="flex justify-between items-center p-2 bg-gray-50">
148
+ <span class="text-sm">Freshwater Bath</span>
149
+ <span class="text-sm font-medium">None</span>
150
+ </div>
151
+ <div class="flex justify-between items-center p-2">
152
+ <span class="text-sm">Azamethiphos</span>
153
+ <span class="text-sm font-medium">15 days</span>
154
+ </div>
155
+ <div class="flex justify-between items-center p-2 bg-gray-50">
156
+ <span class="text-sm">Deltamethrin</span>
157
+ <span class="text-sm font-medium">30 days</span>
158
+ </div>
159
+ </div>
160
+ </section>
161
+ </main>
162
+
163
+ <script>
164
+ feather.replace();
165
+ </script>
166
+ </body>
167
+ </html>