From 71ffa13167a769e964421a23d860df2ca379a834 Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Sun, 22 Mar 2026 17:40:40 +0000
Subject: [PATCH] Add organization and pesticide configuration pages

---
 sync/routes.go                         |  20 +-
 ts/components/MapServiceArea.vue       |  98 +++++++
 ts/components/map-view.vue             |  36 ---
 ts/router.ts                           |  12 +
 ts/view/configuration/Organization.vue | 282 +++++++++++++++++++
 ts/view/configuration/Pesticide.vue    |   8 +-
 ts/view/configuration/PesticideAdd.vue | 376 +++++++++++++++++++++++++
 7 files changed, 783 insertions(+), 49 deletions(-)
 create mode 100644 ts/components/MapServiceArea.vue
 delete mode 100644 ts/components/map-view.vue
 create mode 100644 ts/view/configuration/Organization.vue
 create mode 100644 ts/view/configuration/PesticideAdd.vue

diff --git a/sync/routes.go b/sync/routes.go
index f425dd3f..73fce833 100644
--- a/sync/routes.go
+++ b/sync/routes.go
@@ -43,6 +43,16 @@ func Router() chi.Router {
 	r.Method("GET", "/", authenticatedHandler(getRoot))
 	r.Method("GET", "/communication", authenticatedHandler(getRoot))
 	r.Method("GET", "/configuration", authenticatedHandler(getRoot))
+	r.Method("GET", "/configuration/integration", authenticatedHandler(getRoot))
+	r.Method("GET", "/configuration/integration/arcgis", authenticatedHandler(getRoot))
+	r.Method("GET", "/configuration/organization", authenticatedHandler(getRoot))
+	r.Method("GET", "/configuration/pesticide", authenticatedHandler(getRoot))
+	r.Method("GET", "/configuration/pesticide/add", authenticatedHandler(getRoot))
+	r.Method("GET", "/configuration/upload", authenticatedHandler(getRoot))
+	r.Method("GET", "/configuration/upload/pool", authenticatedHandler(getRoot))
+	r.Method("GET", "/configuration/upload/pool/custom", authenticatedHandler(getRoot))
+	r.Method("GET", "/configuration/upload/pool/flyover", authenticatedHandler(getRoot))
+	r.Method("GET", "/configuration/upload/{id}", authenticatedHandler(getRoot))
 	r.Method("GET", "/configuration/user", authenticatedHandler(getRoot))
 	r.Method("GET", "/configuration/user/add", authenticatedHandler(getRoot))
 	r.Method("GET", "/intelligence", authenticatedHandler(getRoot))
@@ -54,19 +64,9 @@ func Router() chi.Router {
 
 	r.Method("GET", "/admin", authenticatedHandler(getAdminDash))
 	r.Method("GET", "/cell/{cell}", authenticatedHandler(getCellDetails))
-	r.Method("GET", "/configuration/integration", authenticatedHandler(getConfigurationIntegration))
-	r.Method("GET", "/configuration/integration/arcgis", authenticatedHandler(getConfigurationIntegrationArcgis))
 	r.Method("POST", "/configuration/integration/arcgis", authenticatedHandlerPost(postConfigurationIntegrationArcgis))
-	r.Method("GET", "/configuration/organization", authenticatedHandler(getConfigurationOrganization))
-	r.Method("GET", "/configuration/pesticide", authenticatedHandler(getConfigurationPesticide))
-	r.Method("GET", "/configuration/pesticide/add", authenticatedHandler(getConfigurationPesticideAdd))
-	r.Method("GET", "/configuration/upload", authenticatedHandler(getUploadList))
-	r.Method("GET", "/configuration/upload/pool", authenticatedHandler(getUploadPool))
-	r.Method("GET", "/configuration/upload/pool/flyover", authenticatedHandler(getUploadPoolFlyoverCreate))
 	r.Method("POST", "/configuration/upload/pool/flyover", authenticatedHandlerPostMultipart(postUploadPoolFlyoverCreate))
-	r.Method("GET", "/configuration/upload/pool/custom", authenticatedHandler(getUploadPoolCustomCreate))
 	r.Method("POST", "/configuration/upload/pool/custom", authenticatedHandlerPostMultipart(postUploadPoolCustomCreate))
-	r.Method("GET", "/configuration/upload/{id}", authenticatedHandler(getUploadByID))
 	r.Method("POST", "/configuration/upload/{id}/commit", authenticatedHandlerPost(postUploadCommit))
 	r.Method("POST", "/configuration/upload/{id}/discard", authenticatedHandlerPost(postUploadDiscard))
 	r.Method("GET", "/download", authenticatedHandler(getDownloadList))
diff --git a/ts/components/MapServiceArea.vue b/ts/components/MapServiceArea.vue
new file mode 100644
index 00000000..907d2597
--- /dev/null
+++ b/ts/components/MapServiceArea.vue
@@ -0,0 +1,98 @@
+<template>
+	<div ref="mapContainer" class="map-container mb-4"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch } from "vue";
+import maplibregl from "maplibre-gl";
+import "maplibre-gl/dist/maplibre-gl.css";
+
+interface Props {
+	organizationId: string;
+	tegola: string;
+	xmin: number;
+	ymin: number;
+	xmax: number;
+	ymax: number;
+}
+
+const props = defineProps<Props>();
+const mapContainer = ref<HTMLDivElement | null>(null);
+let map: maplibregl.Map | null = null;
+
+const initMap = () => {
+	if (!mapContainer.value) return;
+
+	map = new maplibregl.Map({
+		container: mapContainer.value,
+		style: `${props.tegola}/maps/basic/style.json`,
+		center: [(props.xmin + props.xmax) / 2, (props.ymin + props.ymax) / 2],
+		zoom: 10,
+	});
+
+	// Add service area bounds
+	map.on("load", () => {
+		if (!map) return;
+
+		map.addSource("service-area", {
+			type: "geojson",
+			data: {
+				type: "Feature",
+				geometry: {
+					type: "Polygon",
+					coordinates: [
+						[
+							[props.xmin, props.ymin],
+							[props.xmax, props.ymin],
+							[props.xmax, props.ymax],
+							[props.xmin, props.ymax],
+							[props.xmin, props.ymin],
+						],
+					],
+				},
+				properties: {},
+			},
+		});
+
+		map.addLayer({
+			id: "service-area-fill",
+			type: "fill",
+			source: "service-area",
+			paint: {
+				"fill-color": "#088",
+				"fill-opacity": 0.2,
+			},
+		});
+
+		map.addLayer({
+			id: "service-area-outline",
+			type: "line",
+			source: "service-area",
+			paint: {
+				"line-color": "#088",
+				"line-width": 2,
+			},
+		});
+	});
+};
+
+onMounted(() => {
+	initMap();
+});
+
+// Clean up on unmount
+onUnmounted(() => {
+	if (map) {
+		map.remove();
+	}
+});
+</script>
+
+<style scoped>
+.map-container {
+	width: 100%;
+	height: 400px;
+	border-radius: 8px;
+	overflow: hidden;
+}
+</style>
diff --git a/ts/components/map-view.vue b/ts/components/map-view.vue
deleted file mode 100644
index 53f84512..00000000
--- a/ts/components/map-view.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import { onMounted, onUnmounted, ref } from "vue";
-import maplibregl from "maplibre-gl";
-
-const mapContainer = ref<HTMLDivElement | null>(null);
-let map: maplibregl.Map | null = null;
-
-onMounted(() => {
-	if (!mapContainer.value) return;
-
-	map = new maplibregl.Map({
-		container: mapContainer.value,
-		style: "https://demotiles.maplibre.org/style.json",
-		center: [-74.5, 40], // [lng, lat]
-		zoom: 9,
-	});
-
-	// Add a marker as an example
-	new maplibregl.Marker().setLngLat([-74.5, 40]).addTo(map);
-});
-
-onUnmounted(() => {
-	map?.remove();
-});
-</script>
-
-<template>
-	<div ref="mapContainer" class="map-container"></div>
-</template>
-
-<style scoped>
-.map-container {
-	width: 100%;
-	height: 500px;
-}
-</style>
diff --git a/ts/router.ts b/ts/router.ts
index 37953509..0190136e 100644
--- a/ts/router.ts
+++ b/ts/router.ts
@@ -3,7 +3,9 @@ import type { RouteRecordRaw } from "vue-router";
 import Home from "./view/Home.vue";
 import About from "./view/About.vue";
 import Communication from "./view/Communication.vue";
+import ConfigurationOrganization from "./view/configuration/Organization.vue";
 import ConfigurationPesticide from "./view/configuration/Pesticide.vue";
+import ConfigurationPesticideAdd from "./view/configuration/PesticideAdd.vue";
 import ConfigurationRoot from "./view/configuration/Root.vue";
 import ConfigurationUser from "./view/configuration/User.vue";
 import ConfigurationUserAdd from "./view/configuration/UserAdd.vue";
@@ -29,11 +31,21 @@ const routes: RouteRecordRaw[] = [
 		name: "Configuration",
 		component: ConfigurationRoot,
 	},
+	{
+		path: "/configuration/organization",
+		name: "Organization Configuration",
+		component: ConfigurationOrganization,
+	},
 	{
 		path: "/configuration/pesticide",
 		name: "Pesticide Configuration",
 		component: ConfigurationPesticide,
 	},
+	{
+		path: "/configuration/pesticide/add",
+		name: "Pesticide Add",
+		component: ConfigurationPesticideAdd,
+	},
 	{
 		path: "/configuration/user",
 		name: "User Configuration",
diff --git a/ts/view/configuration/Organization.vue b/ts/view/configuration/Organization.vue
new file mode 100644
index 00000000..3cfe4f81
--- /dev/null
+++ b/ts/view/configuration/Organization.vue
@@ -0,0 +1,282 @@
+<template>
+	<div class="container py-4">
+		<div class="row">
+			<div class="col-12">
+				<div class="d-flex justify-content-between align-items-center mb-4">
+					<h1>
+						<i class="bi bi-geo-alt-fill text-primary me-2"></i> District
+						Settings
+					</h1>
+					<button class="btn btn-primary" @click="saveChanges">
+						<i class="bi bi-save me-2"></i>Save Changes
+					</button>
+				</div>
+
+				<MapServiceArea
+					:organization-id="organization.id"
+					:tegola="tegolaUrl"
+					:xmin="organization.serviceArea.min.x"
+					:ymin="organization.serviceArea.min.y"
+					:xmax="organization.serviceArea.max.x"
+					:ymax="organization.serviceArea.max.y"
+				/>
+
+				<div class="row">
+					<!-- Basic Information -->
+					<div class="col-md-6">
+						<div class="card settings-card">
+							<div class="card-header bg-light">
+								<h5>
+									<i class="bi bi-building me-2"></i> Organization Information
+								</h5>
+							</div>
+							<div class="card-body">
+								<div class="mb-3">
+									<label for="agencyName" class="form-label">
+										<i class="bi bi-briefcase me-1"></i> Agency Name
+									</label>
+									<input
+										type="text"
+										class="form-control"
+										id="name"
+										v-model="organization.name"
+									/>
+								</div>
+								<div class="mb-3">
+									<label for="website" class="form-label">
+										<i class="bi bi-globe me-1"></i> Website
+									</label>
+									<input
+										type="url"
+										class="form-control"
+										id="website"
+										v-model="organization.website"
+									/>
+								</div>
+								<div class="mb-3">
+									<label for="generalManager" class="form-label">
+										<i class="bi bi-person-badge me-1"></i> General Manager Name
+									</label>
+									<input
+										type="text"
+										class="form-control"
+										id="generalManager"
+										v-model="organization.generalManagerName"
+									/>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<!-- Contact Information -->
+					<div class="col-md-6">
+						<div class="card settings-card">
+							<div class="card-header bg-light">
+								<h5>
+									<i class="bi bi-telephone me-2"></i> Contact Information
+								</h5>
+							</div>
+							<div class="card-body">
+								<div class="mb-3">
+									<label for="address" class="form-label">
+										<i class="bi bi-geo me-1"></i> Street
+									</label>
+									<input
+										type="text"
+										class="form-control"
+										id="address"
+										v-model="organization.officeAddressStreet"
+									/>
+								</div>
+								<div class="row">
+									<div class="col-md-6 mb-3">
+										<label for="city" class="form-label">
+											<i class="bi bi-building me-1"></i> City
+										</label>
+										<input
+											type="text"
+											class="form-control"
+											id="city"
+											v-model="organization.officeAddressCity"
+										/>
+									</div>
+									<div class="col-md-6 mb-3">
+										<label for="postalCode" class="form-label">
+											<i class="bi bi-mailbox me-1"></i> Postal Code
+										</label>
+										<input
+											type="text"
+											class="form-control"
+											id="postalCode"
+											v-model="organization.officeAddressPostalCode"
+										/>
+									</div>
+								</div>
+								<div class="mb-3">
+									<label for="phoneNumber" class="form-label">
+										<i class="bi bi-telephone me-1"></i> Phone Number
+									</label>
+									<input
+										type="tel"
+										class="form-control"
+										id="phoneNumber"
+										v-model="organization.officePhone"
+									/>
+								</div>
+								<div class="mb-3">
+									<label for="faxNumber" class="form-label">
+										<i class="bi bi-printer me-1"></i> Fax Number
+									</label>
+									<input
+										type="tel"
+										class="form-control"
+										id="faxNumber"
+										v-model="organization.officeFax"
+									/>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<!-- Organization Coverage Information -->
+					<div class="col-12">
+						<div class="card settings-card">
+							<div class="card-header bg-light">
+								<h5><i class="bi bi-map me-2"></i> Service Area Coverage</h5>
+							</div>
+							<div class="card-body">
+								<div class="row">
+									<div class="col-md-6 mb-3">
+										<label for="totalArea" class="form-label">
+											<i class="bi bi-rulers me-1"></i> Total Area (square
+											meters)
+										</label>
+										<input
+											type="number"
+											class="form-control"
+											id="totalArea"
+											v-model.number="organization.serviceAreaSquareMeters"
+										/>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import MapServiceArea from "../../components/MapServiceArea.vue";
+
+interface ServiceAreaBounds {
+	min: {
+		x: number;
+		y: number;
+	};
+	max: {
+		x: number;
+		y: number;
+	};
+}
+
+interface Organization {
+	id: string;
+	name: string;
+	website: string;
+	generalManagerName: string;
+	officeAddressStreet: string;
+	officeAddressCity: string;
+	officeAddressPostalCode: string;
+	officePhone: string;
+	officeFax: string;
+	serviceArea: ServiceAreaBounds;
+	serviceAreaSquareMeters: number | null;
+}
+
+const organization = ref<Organization>({
+	id: "",
+	name: "",
+	website: "",
+	generalManagerName: "",
+	officeAddressStreet: "",
+	officeAddressCity: "",
+	officeAddressPostalCode: "",
+	officePhone: "",
+	officeFax: "",
+	serviceArea: {
+		min: { x: 0, y: 0 },
+		max: { x: 0, y: 0 },
+	},
+	serviceAreaSquareMeters: null,
+});
+
+const tegolaUrl = ref<string>("");
+
+const fetchOrganizationData = async (): Promise<void> => {
+	try {
+		// Replace with your actual API endpoint
+		const response = await fetch("/api/organization/settings");
+		if (!response.ok) {
+			throw new Error("Failed to fetch organization data");
+		}
+		const data = await response.json();
+		organization.value = {
+			id: data.id,
+			name: data.name,
+			website: data.website || "",
+			generalManagerName: data.generalManagerName || "",
+			officeAddressStreet: data.officeAddressStreet || "",
+			officeAddressCity: data.officeAddressCity || "",
+			officeAddressPostalCode: data.officeAddressPostalCode || "",
+			officePhone: data.officePhone || "",
+			officeFax: data.officeFax || "",
+			serviceArea: data.serviceArea || {
+				min: { x: 0, y: 0 },
+				max: { x: 0, y: 0 },
+			},
+			serviceAreaSquareMeters: data.serviceAreaSquareMeters || null,
+		};
+		tegolaUrl.value = data.tegolaUrl || "";
+	} catch (error) {
+		console.error("Error fetching organization data:", error);
+	}
+};
+
+const saveChanges = async (): Promise<void> => {
+	try {
+		// Replace with your actual API endpoint
+		const response = await fetch("/api/organization/settings", {
+			method: "PUT",
+			headers: {
+				"Content-Type": "application/json",
+			},
+			body: JSON.stringify(organization.value),
+		});
+
+		if (!response.ok) {
+			throw new Error("Failed to save changes");
+		}
+
+		// Show success notification
+		alert("Changes saved successfully!");
+	} catch (error) {
+		console.error("Error saving changes:", error);
+		alert("Failed to save changes. Please try again.");
+	}
+};
+
+onMounted(() => {
+	fetchOrganizationData();
+});
+</script>
+
+<style scoped>
+.settings-card {
+	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+	margin-bottom: 30px;
+}
+</style>
diff --git a/ts/view/configuration/Pesticide.vue b/ts/view/configuration/Pesticide.vue
index 22c3c1c3..eed9c816 100644
--- a/ts/view/configuration/Pesticide.vue
+++ b/ts/view/configuration/Pesticide.vue
@@ -2,9 +2,11 @@
 	<div class="container-fluid p-4">
 		<div class="d-flex justify-content-between align-items-center mb-4">
 			<h1 class="mb-0">Pesticide Products Configuration</h1>
-			<a :href="configurationUrl" class="btn btn-primary" id="addProductBtn">
-				<i class="bi bi-plus-circle me-2"></i>Add New Product
-			</a>
+			<RouterLink to="/configuration/pesticide/add"
+				><button class="btn btn-primary" id="addProductBtn">
+					<i class="bi bi-plus-circle me-2"></i>Add New Product
+				</button>
+			</RouterLink>
 		</div>
 
 		<div class="card">
diff --git a/ts/view/configuration/PesticideAdd.vue b/ts/view/configuration/PesticideAdd.vue
new file mode 100644
index 00000000..ab291d58
--- /dev/null
+++ b/ts/view/configuration/PesticideAdd.vue
@@ -0,0 +1,376 @@
+# VueJS Single-File Component (TypeScript) ```vue
+<template>
+	<div class="container py-4">
+		<!-- Breadcrumb -->
+		<nav aria-label="breadcrumb" class="mb-4">
+			<ol class="breadcrumb">
+				<li class="breadcrumb-item"><a href="#">Settings</a></li>
+				<li class="breadcrumb-item">
+					<a href="pesticide-config.html">Pesticide</a>
+				</li>
+				<li class="breadcrumb-item active" aria-current="page">
+					{{ pesticide.name }}
+				</li>
+			</ol>
+		</nav>
+
+		<!-- Main Content -->
+		<div class="card shadow-sm mb-4">
+			<div class="card-body">
+				<!-- Product Header -->
+				<div class="d-flex justify-content-between align-items-start mb-4">
+					<div>
+						<h1 class="mb-2">{{ pesticide.name }}</h1>
+						<p class="text-muted mb-0">
+							{{ pesticide.description }}
+						</p>
+					</div>
+					<span class="tag tag-enabled" v-if="pesticide.enabled">
+						<i class="bi bi-check-circle-fill"></i> Enabled
+					</span>
+					<span class="tag tag-optional" v-else>
+						<i class="bi bi-x-circle-fill"></i> Disabled
+					</span>
+				</div>
+
+				<!-- General Information -->
+				<div class="mb-4">
+					<h2 class="section-heading">General Information</h2>
+					<div class="row g-3">
+						<div class="col-md-6 col-lg-4">
+							<div class="info-label">Formulation</div>
+							<div>{{ pesticide.formulation }}</div>
+						</div>
+						<div class="col-md-6 col-lg-4">
+							<div class="info-label">EPA Registration Number</div>
+							<div>{{ pesticide.epaNumber }}</div>
+						</div>
+						<div class="col-md-6 col-lg-4">
+							<div class="info-label">Active Ingredients</div>
+							<div>
+								<div
+									v-for="ingredient in pesticide.activeIngredients"
+									:key="ingredient.name"
+								>
+									{{ ingredient.name }} ({{ ingredient.percentage }}%)
+								</div>
+							</div>
+						</div>
+						<div class="col-md-6 col-lg-4">
+							<div class="info-label">Biological Targeting</div>
+							<div class="mt-1">
+								<span
+									v-for="stage in instarStages"
+									:key="stage.code"
+									class="target-icon"
+									:class="stage.active ? 'target-active' : 'target-inactive'"
+									:title="stage.label"
+								>
+									{{ stage.code }}
+								</span>
+							</div>
+						</div>
+						<div class="col-md-6 col-lg-4">
+							<div class="info-label">Application Rates</div>
+							<div>
+								Low: {{ pesticide.applicationRates.low }}<br />
+								High: {{ pesticide.applicationRates.high }}
+							</div>
+						</div>
+						<div class="col-md-6 col-lg-4">
+							<div class="info-label">Residual</div>
+							<div>{{ pesticide.residual }}</div>
+						</div>
+					</div>
+				</div>
+
+				<!-- Usage Notes -->
+				<div class="alert alert-info mb-4" v-if="pesticide.usageNotes">
+					<div class="d-flex">
+						<div class="me-3">
+							<i class="bi bi-info-circle-fill fs-4"></i>
+						</div>
+						<div>
+							<h5 class="alert-heading">Key Usage Notes</h5>
+							<p class="mb-0">
+								{{ pesticide.usageNotes }}
+							</p>
+						</div>
+					</div>
+				</div>
+
+				<!-- PPE Requirements -->
+				<div class="mb-4">
+					<h2 class="section-heading">PPE Requirements</h2>
+					<div>
+						<span
+							v-for="ppe in pesticide.ppeRequirements"
+							:key="ppe.name"
+							class="tag"
+							:class="ppe.optional ? 'tag-optional' : 'tag-ppe'"
+						>
+							<i :class="`bi ${ppe.icon}`"></i>
+							{{ ppe.name }}
+							<span v-if="ppe.optional"> (Optional)</span>
+						</span>
+					</div>
+				</div>
+
+				<!-- Equipment Supported -->
+				<div class="mb-4">
+					<h2 class="section-heading">Equipment Supported</h2>
+					<div>
+						<span
+							v-for="equipment in pesticide.equipmentSupported"
+							:key="equipment.name"
+							class="tag tag-equipment"
+						>
+							<i :class="`bi ${equipment.icon}`"></i>
+							{{ equipment.name }}
+						</span>
+					</div>
+				</div>
+
+				<!-- Suitability -->
+				<div class="mb-4">
+					<h2 class="section-heading">Suitability</h2>
+					<div class="row g-3">
+						<div
+							v-for="suit in pesticide.suitability"
+							:key="suit.type"
+							class="col-md-6 col-lg-3"
+						>
+							<div class="info-label">{{ suit.type }}</div>
+							<div>
+								<span
+									class="badge"
+									:class="getSuitabilityBadgeClass(suit.level)"
+								>
+									{{ suit.label }}
+								</span>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<!-- Actions -->
+				<div class="d-flex justify-content-between mt-5 pt-3 border-top">
+					<button
+						class="btn btn-outline-danger"
+						@click="handleRemoveFromInventory"
+					>
+						<i class="bi bi-trash me-2"></i> Remove from Inventory
+					</button>
+					<button class="btn btn-success" @click="handleAddToInventory">
+						<i class="bi bi-plus-circle me-2"></i> Add to Allowed Inventory
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+
+interface ActiveIngredient {
+	name: string;
+	percentage: number;
+}
+
+interface ApplicationRates {
+	low: string;
+	high: string;
+}
+
+interface BiologicalTarget {
+	code: string;
+	label: string;
+	active: boolean;
+}
+
+interface PPERequirement {
+	name: string;
+	icon: string;
+	optional: boolean;
+}
+
+interface Equipment {
+	name: string;
+	icon: string;
+}
+
+interface Suitability {
+	type: string;
+	level: "recommended" | "ok" | "none" | "warning";
+	label: string;
+}
+
+interface Pesticide {
+	name: string;
+	description: string;
+	enabled: boolean;
+	formulation: string;
+	epaNumber: string;
+	activeIngredients: ActiveIngredient[];
+	biologicalTargets: BiologicalTarget[];
+	applicationRates: ApplicationRates;
+	residual: string;
+	usageNotes: string;
+	ppeRequirements: PPERequirement[];
+	equipmentSupported: Equipment[];
+	suitability: Suitability[];
+}
+
+// Sample data - replace with API call or props
+const pesticide = ref<Pesticide>({
+	name: "VectoMax FG",
+	description:
+		"Biological larvicide granules combining Bacillus thuringiensis subspecies israelensis and Bacillus sphaericus for extended residual control of mosquito larvae.",
+	enabled: true,
+	formulation: "Granule",
+	epaNumber: "73049-429",
+	activeIngredients: [
+		{ name: "Bacillus thuringiensis subspecies israelensis", percentage: 2.7 },
+		{ name: "Bacillus sphaericus", percentage: 4.5 },
+	],
+	biologicalTargets: [
+		{ code: "I1", label: "Instar Stage 1", active: true },
+		{ code: "I2", label: "Instar Stage 2", active: true },
+		{ code: "I3", label: "Instar Stage 3", active: true },
+		{ code: "I4", label: "Instar Stage 4", active: true },
+		{ code: "P", label: "Pupae", active: false },
+	],
+	applicationRates: {
+		low: "5 lbs/acre",
+		high: "20 lbs/acre",
+	},
+	residual: "Up to 30 days (environmental conditions dependent)",
+	usageNotes:
+		"Apply evenly across water surface. Use higher rate when L4 present or when organic load is high. Avoid application in ponds with fish unless approved by a supervisor.",
+	ppeRequirements: [
+		{ name: "Gloves", icon: "bi-hand-thumbs-up", optional: false },
+		{ name: "Eye Protection", icon: "bi-eyeglasses", optional: false },
+		{ name: "Respirator", icon: "bi-mask", optional: true },
+	],
+	equipmentSupported: [
+		{ name: "Backpack Spreader", icon: "bi-backpack" },
+		{ name: "Hand Spreader", icon: "bi-hand-index-thumb" },
+		{ name: "Truck Granule Unit", icon: "bi-truck" },
+	],
+	suitability: [
+		{ type: "Pools", level: "recommended", label: "Recommended" },
+		{ type: "Vegetation", level: "ok", label: "OK" },
+		{ type: "High Organics", level: "ok", label: "OK" },
+		{ type: "Organic Crop Restriction", level: "none", label: "None" },
+	],
+});
+
+const instarStages = computed(() => pesticide.value.biologicalTargets);
+
+const getSuitabilityBadgeClass = (level: string): string => {
+	const classes: Record<string, string> = {
+		recommended: "bg-success",
+		ok: "bg-info text-dark",
+		none: "bg-secondary",
+		warning: "bg-warning text-dark",
+	};
+	return classes[level] || "bg-secondary";
+};
+
+const handleRemoveFromInventory = (): void => {
+	// Implement remove logic
+	console.log("Remove from inventory");
+	// Example: emit event or call API
+	// emit('remove', pesticide.value);
+};
+
+const handleAddToInventory = (): void => {
+	// Implement add logic
+	console.log("Add to inventory");
+	// Example: emit event or call API
+	// emit('add', pesticide.value);
+};
+</script>
+
+<style scoped>
+.section-heading {
+	font-size: 1.2rem;
+	font-weight: 600;
+	margin-bottom: 1rem;
+	padding-bottom: 0.5rem;
+	border-bottom: 1px solid #dee2e6;
+}
+
+.info-label {
+	font-weight: 600;
+	color: #495057;
+}
+
+.target-icon {
+	display: inline-block;
+	width: 30px;
+	height: 30px;
+	text-align: center;
+	line-height: 30px;
+	border-radius: 50%;
+	font-size: 14px;
+	font-weight: bold;
+	margin-right: 4px;
+	color: white;
+}
+
+.target-active {
+	background-color: #0d6efd;
+}
+
+.target-inactive {
+	background-color: #dee2e6;
+	color: #6c757d;
+}
+
+.tag {
+	display: inline-flex;
+	align-items: center;
+	padding: 0.4rem 0.8rem;
+	margin: 0.2rem;
+	border-radius: 30px;
+	background-color: #f8f9fa;
+	border: 1px solid #dee2e6;
+	font-size: 0.9rem;
+}
+
+.tag i {
+	margin-right: 0.5rem;
+}
+
+.tag-enabled {
+	background-color: #d1e7dd;
+	color: #0f5132;
+	border-color: #a3cfbb;
+}
+
+.tag-ppe {
+	background-color: #e2e3e5;
+	color: #41464b;
+	border-color: #d3d6d8;
+}
+
+.tag-equipment {
+	background-color: #cff4fc;
+	color: #055160;
+	border-color: #9eeaf9;
+}
+
+.tag-suitability {
+	background-color: #fff3cd;
+	color: #664d03;
+	border-color: #ffecb5;
+}
+
+.tag-optional {
+	background-color: #f8f9fa;
+	color: #6c757d;
+	border-color: #dee2e6;
+}
+</style>