From a72813acdeea950cbc60ad9b31af824745c8cb08 Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Fri, 14 Feb 2025 11:42:31 +0300
Subject: [PATCH 01/55] locate
---
frontend/README.md | 11 +++
frontend/package-lock.json | 86 ++++++++++++++++++-
frontend/package.json | 7 +-
frontend/src/app/about/page.tsx | 56 ++++++++++++
frontend/src/app/not-found.tsx | 35 ++++++++
frontend/src/app/page.tsx | 5 ++
frontend/src/components/feature-card.tsx | 20 +++++
.../src/components/navigation/navigation.tsx | 45 ++++++++++
frontend/src/lib/utils.ts | 7 ++
frontend/src/ui/button.tsx | 56 ++++++++++++
10 files changed, 323 insertions(+), 5 deletions(-)
create mode 100644 frontend/src/app/about/page.tsx
create mode 100644 frontend/src/app/not-found.tsx
create mode 100644 frontend/src/components/feature-card.tsx
create mode 100644 frontend/src/components/navigation/navigation.tsx
create mode 100644 frontend/src/lib/utils.ts
create mode 100644 frontend/src/ui/button.tsx
diff --git a/frontend/README.md b/frontend/README.md
index e215bc4..cea63ef 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -1,7 +1,18 @@
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
## Getting Started
+First intall
+'npm install'
+Have the .env file ready.
+`.env` file.
+
+ See the example at
+`.env.example`.
+```
+NEXT_PUBLIC_API_TOKEN=YOUR_TOKEN (get toke from airqo)
+NEXT_PUBLIC_API_URL=https://analytics.airqo.net/api/v2/
+```
First, run the development server:
```bash
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 8153ec4..f6a6bb5 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,15 +8,20 @@
"name": "frontend",
"version": "0.1.0",
"dependencies": {
+ "@radix-ui/react-slot": "^1.1.2",
"axios": "^1.7.7",
+ "class-variance-authority": "^0.7.1",
+ "clsx": "^2.1.1",
"date-fns": "^4.1.0",
"leaflet": "^1.9.4",
"leaflet-geosearch": "^4.0.0",
+ "lucide-react": "^0.475.0",
"next": "15.0.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.3.0",
- "react-leaflet": "^4.2.1"
+ "react-leaflet": "^4.2.1",
+ "tailwind-merge": "^3.0.1"
},
"devDependencies": {
"@types/leaflet": "^1.9.14",
@@ -774,6 +779,39 @@
"node": ">=14"
}
},
+ "node_modules/@radix-ui/react-compose-refs": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
+ "integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==",
+ "license": "MIT",
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-slot": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
+ "integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-compose-refs": "1.1.1"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
"node_modules/@react-leaflet/core": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz",
@@ -858,13 +896,13 @@
"version": "15.7.13",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
"integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==",
- "dev": true
+ "devOptional": true
},
"node_modules/@types/react": {
"version": "18.3.12",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.12.tgz",
"integrity": "sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==",
- "dev": true,
+ "devOptional": true,
"dependencies": {
"@types/prop-types": "*",
"csstype": "^3.0.2"
@@ -1583,11 +1621,32 @@
"node": ">= 6"
}
},
+ "node_modules/class-variance-authority": {
+ "version": "0.7.1",
+ "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+ "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "clsx": "^2.1.1"
+ },
+ "funding": {
+ "url": "https://polar.sh/cva"
+ }
+ },
"node_modules/client-only": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
"integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
},
+ "node_modules/clsx": {
+ "version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+ "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=6"
+ }
+ },
"node_modules/color": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
@@ -1685,7 +1744,7 @@
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
- "dev": true
+ "devOptional": true
},
"node_modules/damerau-levenshtein": {
"version": "1.0.8",
@@ -3615,6 +3674,15 @@
"integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
"dev": true
},
+ "node_modules/lucide-react": {
+ "version": "0.475.0",
+ "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.475.0.tgz",
+ "integrity": "sha512-NJzvVu1HwFVeZ+Gwq2q00KygM1aBhy/ZrhY9FsAgJtpB+E4R7uxRk9M2iKvHa6/vNxZydIB59htha4c2vvwvVg==",
+ "license": "ISC",
+ "peerDependencies": {
+ "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+ }
+ },
"node_modules/merge2": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -5029,6 +5097,16 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/tailwind-merge": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.0.1.tgz",
+ "integrity": "sha512-AvzE8FmSoXC7nC+oU5GlQJbip2UO7tmOhOfQyOmPhrStOGXHU08j8mZEHZ4BmCqY5dWTCo4ClWkNyRNx1wpT0g==",
+ "license": "MIT",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/dcastil"
+ }
+ },
"node_modules/tailwindcss": {
"version": "3.4.14",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.14.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index b42fca6..b16ac8c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,15 +9,20 @@
"lint": "next lint"
},
"dependencies": {
+ "@radix-ui/react-slot": "^1.1.2",
"axios": "^1.7.7",
+ "class-variance-authority": "^0.7.1",
+ "clsx": "^2.1.1",
"date-fns": "^4.1.0",
"leaflet": "^1.9.4",
"leaflet-geosearch": "^4.0.0",
+ "lucide-react": "^0.475.0",
"next": "15.0.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.3.0",
- "react-leaflet": "^4.2.1"
+ "react-leaflet": "^4.2.1",
+ "tailwind-merge": "^3.0.1"
},
"devDependencies": {
"@types/leaflet": "^1.9.14",
diff --git a/frontend/src/app/about/page.tsx b/frontend/src/app/about/page.tsx
new file mode 100644
index 0000000..c4f7f71
--- /dev/null
+++ b/frontend/src/app/about/page.tsx
@@ -0,0 +1,56 @@
+import { FeatureCard } from "@/components/feature-card";
+import { MapPin, Users, BarChart3 } from "lucide-react";
+import Navigation from "@/components/navigation/navigation";
+
+export default function AboutPage() {
+ return (
+ <div className="container mx-auto px-4 py-8">
+ {/* Navigation Component */}
+ <Navigation />
+
+ <h1 className="text-4xl font-bold mb-8 text-center">About AirQo</h1>
+
+ <div className="mb-12">
+ <p className="text-lg mb-4">
+ AirQo is a pioneering initiative dedicated to improving air quality monitoring and management across Africa.
+ Our mission is to provide accurate, actionable air quality information to empower communities, researchers,
+ and policymakers in the fight against air pollution.
+ </p>
+ <p className="text-lg">
+ Founded in 2015 at Makerere University in Uganda, AirQo has grown into a multidisciplinary team of engineers,
+ data scientists, and environmental experts. We're committed to developing innovative, low-cost air quality
+ monitoring solutions tailored for the unique challenges of African urban environments.
+ </p>
+ </div>
+
+ <h2 className="text-3xl font-semibold mb-6 text-center">Our Core Values</h2>
+ <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
+ <FeatureCard
+ title="Local Expertise"
+ description="We leverage local knowledge and talent to create solutions that work for African cities."
+ Icon={MapPin}
+ />
+ <FeatureCard
+ title="Collaboration"
+ description="We partner with communities, governments, and organizations to maximize our impact."
+ Icon={Users}
+ />
+ <FeatureCard
+ title="Data-Driven Decisions"
+ description="We believe in the power of accurate data to drive meaningful policy changes."
+ Icon={BarChart3}
+ />
+ </div>
+
+ <div className="bg-blue-50 p-8 rounded-lg">
+ <h2 className="text-2xl font-semibold mb-4">Our Impact</h2>
+ <ul className="list-disc list-inside space-y-2">
+ <li>Deployed over 100 low-cost air quality sensors across East Africa</li>
+ <li>Provided air quality data to millions of citizens through our mobile app and API</li>
+ <li>Collaborated with local governments to develop data-driven air quality management strategies</li>
+ <li>Engaged in capacity building, training over 500 individuals in air quality monitoring and analysis</li>
+ </ul>
+ </div>
+ </div>
+ );
+}
diff --git a/frontend/src/app/not-found.tsx b/frontend/src/app/not-found.tsx
new file mode 100644
index 0000000..2f561bc
--- /dev/null
+++ b/frontend/src/app/not-found.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import { useEffect } from "react"
+import { usePathname } from "next/navigation"
+import Link from "next/link"
+
+const NotFound = () => {
+ const pathname = usePathname()
+
+ useEffect(() => {
+ console.error("404 Error: User attempted to access non-existent route:", pathname)
+ }, [pathname])
+
+ return (
+ <div className="min-h-screen flex items-center justify-center bg-gradient-to-r from-blue-50 to-purple-50">
+ <div className="text-center p-8 bg-white rounded-lg shadow-2xl transform transition-all hover:scale-105">
+ <h1 className="text-9xl font-bold text-gray-800 mb-4 animate-bounce">404</h1>
+ <p className="text-2xl text-gray-600 mb-6">Oops! The page you're looking for doesn't exist.</p>
+ <p className="text-lg text-gray-500 mb-8">
+ You tried to access <span className="font-mono text-gray-700 bg-gray-100 p-1 rounded">{pathname}</span>, but
+ it's not available.
+ </p>
+ <Link
+ href="/"
+ className="inline-block px-6 py-3 bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-600 transition-colors duration-300"
+ >
+ Return to Home
+ </Link>
+ </div>
+ </div>
+ )
+}
+
+export default NotFound
+
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 00e6a9e..35c3abf 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -2,6 +2,7 @@
import React from "react";
import dynamic from "next/dynamic";
import Loading from "./Loading";
+import Navigation from "@/components/navigation/navigation";
const LeafletMap = dynamic(() => import("../components/map/LeafletMap"), {
ssr: false,
@@ -11,6 +12,10 @@ const LeafletMap = dynamic(() => import("../components/map/LeafletMap"), {
const Home: React.FC = () => {
return (
<div>
+ {/* Add Navigation Component */}
+ <Navigation />
+
+ {/* Dynamically Loaded Map */}
<LeafletMap />
</div>
);
diff --git a/frontend/src/components/feature-card.tsx b/frontend/src/components/feature-card.tsx
new file mode 100644
index 0000000..95e6339
--- /dev/null
+++ b/frontend/src/components/feature-card.tsx
@@ -0,0 +1,20 @@
+import type { LucideIcon } from "lucide-react"
+
+interface FeatureCardProps {
+ title: string
+ description: string
+ Icon: LucideIcon
+}
+
+export function FeatureCard({ title, description, Icon }: FeatureCardProps) {
+ return (
+ <div className="rounded-lg border bg-card p-6 transition-all hover:shadow-lg">
+ <div className="mb-4">
+ <Icon className="h-12 w-12 text-blue-500" />
+ </div>
+ <h3 className="mb-2 text-xl font-semibold">{title}</h3>
+ <p className="text-muted-foreground">{description}</p>
+ </div>
+ )
+}
+
diff --git a/frontend/src/components/navigation/navigation.tsx b/frontend/src/components/navigation/navigation.tsx
new file mode 100644
index 0000000..42169aa
--- /dev/null
+++ b/frontend/src/components/navigation/navigation.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import type React from "react"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { cn } from "@/lib/utils"
+
+const navItems = [
+ { name: "Home", href: "/" },
+ { name: "About", href: "/about" },
+ { name: "Locate", href: "/locate" },
+ { name: "Categorize", href: "/categorize" },
+ { name: "Reports", href: "/reports" },
+]
+
+export default function Navigation({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+ const pathname = usePathname()
+
+ return (
+ <header className="border-b">
+ <div className="container mx-auto px-4 flex h-16 items-center justify-between">
+ <Link href="/" className="text-blue-600 text-xl font-semibold">
+ AirQo AI
+ </Link>
+
+ <nav className="flex items-center space-x-8" {...props}>
+ {navItems.map((item) => (
+ <Link
+ key={item.name}
+ href={item.href}
+ className={cn(
+ "text-sm font-medium text-gray-600 hover:text-gray-900 relative py-2",
+ pathname === item.href &&
+ "text-gray-900 after:absolute after:left-0 after:bottom-0 after:h-0.5 after:w-full after:bg-blue-600",
+ )}
+ >
+ {item.name}
+ </Link>
+ ))}
+ </nav>
+ </div>
+ </header>
+ )
+}
+
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
new file mode 100644
index 0000000..d5d9011
--- /dev/null
+++ b/frontend/src/lib/utils.ts
@@ -0,0 +1,7 @@
+// utils implementation
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
\ No newline at end of file
diff --git a/frontend/src/ui/button.tsx b/frontend/src/ui/button.tsx
new file mode 100644
index 0000000..36496a2
--- /dev/null
+++ b/frontend/src/ui/button.tsx
@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+ {
+ variants: {
+ variant: {
+ default: "bg-primary text-primary-foreground hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+ outline:
+ "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+ secondary:
+ "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-10 px-4 py-2",
+ sm: "h-9 rounded-md px-3",
+ lg: "h-11 rounded-md px-8",
+ icon: "h-10 w-10",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+)
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+ VariantProps<typeof buttonVariants> {
+ asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : "button"
+ return (
+ <Comp
+ className={cn(buttonVariants({ variant, size, className }))}
+ ref={ref}
+ {...props}
+ />
+ )
+ }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
From f0f0c9a845d6f968511a7cb1f998b16755309ddb Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Fri, 14 Feb 2025 11:50:46 +0300
Subject: [PATCH 02/55] READ
---
frontend/README.md | 7 +++++--
1 file changed, 5 insertions(+), 2 deletions(-)
diff --git a/frontend/README.md b/frontend/README.md
index cea63ef..b6d21d6 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -1,8 +1,11 @@
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
## Getting Started
-First intall
-'npm install'
+
++First install dependencies:
++```bash
++npm install
++```
Have the .env file ready.
`.env` file.
From e0a1bf1ef512645ac5d3aac9a5b8e92cfa75249f Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Fri, 14 Feb 2025 11:55:25 +0300
Subject: [PATCH 03/55] dev
---
frontend/README.md | 21 +++++++++++----------
1 file changed, 11 insertions(+), 10 deletions(-)
diff --git a/frontend/README.md b/frontend/README.md
index b6d21d6..96c70fa 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -2,18 +2,19 @@ This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-
## Getting Started
-+First install dependencies:
-+```bash
-+npm install
-+```
+First install dependencies:
+```bash
+npm install
+```
-Have the .env file ready.
-`.env` file.
+
+Required environment variables:
- See the example at
-`.env.example`.
-```
-NEXT_PUBLIC_API_TOKEN=YOUR_TOKEN (get toke from airqo)
+```.env
+# Your AirQo API token (obtain from AirQo dashboard)
+NEXT_PUBLIC_API_TOKEN=YOUR_TOKEN
+
+# AirQo API endpoint
NEXT_PUBLIC_API_URL=https://analytics.airqo.net/api/v2/
```
First, run the development server:
From c6d0e4dc2b60b83d5a23ffc2eb891247465d925e Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Fri, 14 Feb 2025 12:40:48 +0300
Subject: [PATCH 04/55] nav
---
frontend/src/app/about/page.tsx | 88 ++++++++++++++++++---------------
1 file changed, 47 insertions(+), 41 deletions(-)
diff --git a/frontend/src/app/about/page.tsx b/frontend/src/app/about/page.tsx
index c4f7f71..05be004 100644
--- a/frontend/src/app/about/page.tsx
+++ b/frontend/src/app/about/page.tsx
@@ -1,55 +1,61 @@
+"use client"; // Make sure to mark the file as a client component
+
+import React from "react";
import { FeatureCard } from "@/components/feature-card";
import { MapPin, Users, BarChart3 } from "lucide-react";
import Navigation from "@/components/navigation/navigation";
export default function AboutPage() {
return (
- <div className="container mx-auto px-4 py-8">
- {/* Navigation Component */}
+ <div>
+ {/* Navigation Component at the top for consistency */}
<Navigation />
- <h1 className="text-4xl font-bold mb-8 text-center">About AirQo</h1>
+ {/* About Page Content */}
+ <div className="container mx-auto px-4 py-8 h-full overflow-y-auto">
+ <h1 className="text-4xl font-bold mb-8 text-center">About AirQo</h1>
- <div className="mb-12">
- <p className="text-lg mb-4">
- AirQo is a pioneering initiative dedicated to improving air quality monitoring and management across Africa.
- Our mission is to provide accurate, actionable air quality information to empower communities, researchers,
- and policymakers in the fight against air pollution.
- </p>
- <p className="text-lg">
- Founded in 2015 at Makerere University in Uganda, AirQo has grown into a multidisciplinary team of engineers,
- data scientists, and environmental experts. We're committed to developing innovative, low-cost air quality
- monitoring solutions tailored for the unique challenges of African urban environments.
- </p>
- </div>
+ <div className="mb-12">
+ <p className="text-lg mb-4">
+ AirQo is a pioneering initiative dedicated to improving air quality monitoring and management across Africa.
+ Our mission is to provide accurate, actionable air quality information to empower communities, researchers,
+ and policymakers in the fight against air pollution.
+ </p>
+ <p className="text-lg">
+ Founded in 2015 at Makerere University in Uganda, AirQo has grown into a multidisciplinary team of engineers,
+ data scientists, and environmental experts. We're committed to developing innovative, low-cost air quality
+ monitoring solutions tailored for the unique challenges of African urban environments.
+ </p>
+ </div>
- <h2 className="text-3xl font-semibold mb-6 text-center">Our Core Values</h2>
- <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
- <FeatureCard
- title="Local Expertise"
- description="We leverage local knowledge and talent to create solutions that work for African cities."
- Icon={MapPin}
- />
- <FeatureCard
- title="Collaboration"
- description="We partner with communities, governments, and organizations to maximize our impact."
- Icon={Users}
- />
- <FeatureCard
- title="Data-Driven Decisions"
- description="We believe in the power of accurate data to drive meaningful policy changes."
- Icon={BarChart3}
- />
- </div>
+ <h2 className="text-3xl font-semibold mb-6 text-center">Our Core Values</h2>
+ <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
+ <FeatureCard
+ title="Local Expertise"
+ description="We leverage local knowledge and talent to create solutions that work for African cities."
+ Icon={MapPin}
+ />
+ <FeatureCard
+ title="Collaboration"
+ description="We partner with communities, governments, and organizations to maximize our impact."
+ Icon={Users}
+ />
+ <FeatureCard
+ title="Data-Driven Decisions"
+ description="We believe in the power of accurate data to drive meaningful policy changes."
+ Icon={BarChart3}
+ />
+ </div>
- <div className="bg-blue-50 p-8 rounded-lg">
- <h2 className="text-2xl font-semibold mb-4">Our Impact</h2>
- <ul className="list-disc list-inside space-y-2">
- <li>Deployed over 100 low-cost air quality sensors across East Africa</li>
- <li>Provided air quality data to millions of citizens through our mobile app and API</li>
- <li>Collaborated with local governments to develop data-driven air quality management strategies</li>
- <li>Engaged in capacity building, training over 500 individuals in air quality monitoring and analysis</li>
- </ul>
+ <div className="bg-blue-50 p-8 rounded-lg">
+ <h2 className="text-2xl font-semibold mb-4">Our Impact</h2>
+ <ul className="list-disc list-inside space-y-2">
+ <li>Deployed over 100 low-cost air quality sensors across East Africa</li>
+ <li>Provided air quality data to millions of citizens through our mobile app and API</li>
+ <li>Collaborated with local governments to develop data-driven air quality management strategies</li>
+ <li>Engaged in capacity building, training over 500 individuals in air quality monitoring and analysis</li>
+ </ul>
+ </div>
</div>
</div>
);
From befe6e97924876246b5ae4d6e163e285bb37abaf Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Fri, 14 Feb 2025 15:34:55 +0300
Subject: [PATCH 05/55] local
---
frontend/package-lock.json | 1415 ++++++++++++++++-
frontend/package.json | 6 +
frontend/src/app/locate/page.tsx | 139 ++
.../src/components/Controls/ControlPanel.tsx | 187 +++
.../src/components/Controls/FileUpload.tsx | 107 ++
.../src/components/Controls/SearchBar.tsx | 137 ++
frontend/src/components/hooks/use-toast.ts | 191 +++
frontend/src/components/map/MapComponent.tsx | 198 +++
.../src/components/map/NavigationControls.tsx | 22 +
frontend/src/lib/api.ts | 116 ++
frontend/src/lib/types.ts | 146 ++
frontend/src/ui/input.tsx | 22 +
frontend/src/ui/popover.tsx | 29 +
frontend/src/ui/toast.tsx | 127 ++
frontend/src/ui/use-toast.ts | 3 +
15 files changed, 2830 insertions(+), 15 deletions(-)
create mode 100644 frontend/src/app/locate/page.tsx
create mode 100644 frontend/src/components/Controls/ControlPanel.tsx
create mode 100644 frontend/src/components/Controls/FileUpload.tsx
create mode 100644 frontend/src/components/Controls/SearchBar.tsx
create mode 100644 frontend/src/components/hooks/use-toast.ts
create mode 100644 frontend/src/components/map/MapComponent.tsx
create mode 100644 frontend/src/components/map/NavigationControls.tsx
create mode 100644 frontend/src/lib/api.ts
create mode 100644 frontend/src/lib/types.ts
create mode 100644 frontend/src/ui/input.tsx
create mode 100644 frontend/src/ui/popover.tsx
create mode 100644 frontend/src/ui/toast.tsx
create mode 100644 frontend/src/ui/use-toast.ts
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index f6a6bb5..a8cb8f2 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,15 +8,20 @@
"name": "frontend",
"version": "0.1.0",
"dependencies": {
+ "@radix-ui/react-popover": "^1.1.6",
"@radix-ui/react-slot": "^1.1.2",
+ "@radix-ui/react-toast": "^1.2.6",
+ "@shadcn/ui": "^0.0.4",
"axios": "^1.7.7",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"date-fns": "^4.1.0",
+ "html2canvas": "^1.4.1",
"leaflet": "^1.9.4",
"leaflet-geosearch": "^4.0.0",
"lucide-react": "^0.475.0",
"next": "15.0.2",
+ "papaparse": "^5.5.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.3.0",
@@ -27,6 +32,7 @@
"@types/leaflet": "^1.9.14",
"@types/lodash.debounce": "^4.0.9",
"@types/node": "^20",
+ "@types/papaparse": "^5.3.15",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^8",
@@ -116,6 +122,44 @@
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
}
},
+ "node_modules/@floating-ui/core": {
+ "version": "1.6.9",
+ "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz",
+ "integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==",
+ "license": "MIT",
+ "dependencies": {
+ "@floating-ui/utils": "^0.2.9"
+ }
+ },
+ "node_modules/@floating-ui/dom": {
+ "version": "1.6.13",
+ "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz",
+ "integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==",
+ "license": "MIT",
+ "dependencies": {
+ "@floating-ui/core": "^1.6.0",
+ "@floating-ui/utils": "^0.2.9"
+ }
+ },
+ "node_modules/@floating-ui/react-dom": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
+ "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+ "license": "MIT",
+ "dependencies": {
+ "@floating-ui/dom": "^1.0.0"
+ },
+ "peerDependencies": {
+ "react": ">=16.8.0",
+ "react-dom": ">=16.8.0"
+ }
+ },
+ "node_modules/@floating-ui/utils": {
+ "version": "0.2.9",
+ "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
+ "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
+ "license": "MIT"
+ },
"node_modules/@googlemaps/js-api-loader": {
"version": "1.16.8",
"resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.8.tgz",
@@ -779,6 +823,61 @@
"node": ">=14"
}
},
+ "node_modules/@radix-ui/primitive": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.1.tgz",
+ "integrity": "sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==",
+ "license": "MIT"
+ },
+ "node_modules/@radix-ui/react-arrow": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.2.tgz",
+ "integrity": "sha512-G+KcpzXHq24iH0uGG/pF8LyzpFJYGD4RfLjCIBfGdSLXvjLHST31RUiRVrupIBMvIppMgSzQ6l66iAxl03tdlg==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-primitive": "2.0.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-collection": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.2.tgz",
+ "integrity": "sha512-9z54IEKRxIa9VityapoEYMuByaG42iSy1ZXlY2KcuLSEtq8x4987/N6m15ppoMffgZX72gER2uHe1D9Y6Unlcw==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-compose-refs": "1.1.1",
+ "@radix-ui/react-context": "1.1.1",
+ "@radix-ui/react-primitive": "2.0.2",
+ "@radix-ui/react-slot": "1.1.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
"node_modules/@radix-ui/react-compose-refs": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
@@ -794,6 +893,246 @@
}
}
},
+ "node_modules/@radix-ui/react-context": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+ "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+ "license": "MIT",
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-dismissable-layer": {
+ "version": "1.1.5",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.5.tgz",
+ "integrity": "sha512-E4TywXY6UsXNRhFrECa5HAvE5/4BFcGyfTyK36gP+pAW1ed7UTK4vKwdr53gAJYwqbfCWC6ATvJa3J3R/9+Qrg==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/primitive": "1.1.1",
+ "@radix-ui/react-compose-refs": "1.1.1",
+ "@radix-ui/react-primitive": "2.0.2",
+ "@radix-ui/react-use-callback-ref": "1.1.0",
+ "@radix-ui/react-use-escape-keydown": "1.1.0"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-focus-guards": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz",
+ "integrity": "sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==",
+ "license": "MIT",
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-focus-scope": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.2.tgz",
+ "integrity": "sha512-zxwE80FCU7lcXUGWkdt6XpTTCKPitG1XKOwViTxHVKIJhZl9MvIl2dVHeZENCWD9+EdWv05wlaEkRXUykU27RA==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-compose-refs": "1.1.1",
+ "@radix-ui/react-primitive": "2.0.2",
+ "@radix-ui/react-use-callback-ref": "1.1.0"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-id": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
+ "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-use-layout-effect": "1.1.0"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-popover": {
+ "version": "1.1.6",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.6.tgz",
+ "integrity": "sha512-NQouW0x4/GnkFJ/pRqsIS3rM/k97VzKnVb2jB7Gq7VEGPy5g7uNV1ykySFt7eWSp3i2uSGFwaJcvIRJBAHmmFg==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/primitive": "1.1.1",
+ "@radix-ui/react-compose-refs": "1.1.1",
+ "@radix-ui/react-context": "1.1.1",
+ "@radix-ui/react-dismissable-layer": "1.1.5",
+ "@radix-ui/react-focus-guards": "1.1.1",
+ "@radix-ui/react-focus-scope": "1.1.2",
+ "@radix-ui/react-id": "1.1.0",
+ "@radix-ui/react-popper": "1.2.2",
+ "@radix-ui/react-portal": "1.1.4",
+ "@radix-ui/react-presence": "1.1.2",
+ "@radix-ui/react-primitive": "2.0.2",
+ "@radix-ui/react-slot": "1.1.2",
+ "@radix-ui/react-use-controllable-state": "1.1.0",
+ "aria-hidden": "^1.2.4",
+ "react-remove-scroll": "^2.6.3"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-popper": {
+ "version": "1.2.2",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.2.tgz",
+ "integrity": "sha512-Rvqc3nOpwseCyj/rgjlJDYAgyfw7OC1tTkKn2ivhaMGcYt8FSBlahHOZak2i3QwkRXUXgGgzeEe2RuqeEHuHgA==",
+ "license": "MIT",
+ "dependencies": {
+ "@floating-ui/react-dom": "^2.0.0",
+ "@radix-ui/react-arrow": "1.1.2",
+ "@radix-ui/react-compose-refs": "1.1.1",
+ "@radix-ui/react-context": "1.1.1",
+ "@radix-ui/react-primitive": "2.0.2",
+ "@radix-ui/react-use-callback-ref": "1.1.0",
+ "@radix-ui/react-use-layout-effect": "1.1.0",
+ "@radix-ui/react-use-rect": "1.1.0",
+ "@radix-ui/react-use-size": "1.1.0",
+ "@radix-ui/rect": "1.1.0"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-portal": {
+ "version": "1.1.4",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.4.tgz",
+ "integrity": "sha512-sn2O9k1rPFYVyKd5LAJfo96JlSGVFpa1fS6UuBJfrZadudiw5tAmru+n1x7aMRQ84qDM71Zh1+SzK5QwU0tJfA==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-primitive": "2.0.2",
+ "@radix-ui/react-use-layout-effect": "1.1.0"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-presence": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.2.tgz",
+ "integrity": "sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-compose-refs": "1.1.1",
+ "@radix-ui/react-use-layout-effect": "1.1.0"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-primitive": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz",
+ "integrity": "sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-slot": "1.1.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
"node_modules/@radix-ui/react-slot": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
@@ -812,6 +1151,171 @@
}
}
},
+ "node_modules/@radix-ui/react-toast": {
+ "version": "1.2.6",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.6.tgz",
+ "integrity": "sha512-gN4dpuIVKEgpLn1z5FhzT9mYRUitbfZq9XqN/7kkBMUgFTzTG8x/KszWJugJXHcwxckY8xcKDZPz7kG3o6DsUA==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/primitive": "1.1.1",
+ "@radix-ui/react-collection": "1.1.2",
+ "@radix-ui/react-compose-refs": "1.1.1",
+ "@radix-ui/react-context": "1.1.1",
+ "@radix-ui/react-dismissable-layer": "1.1.5",
+ "@radix-ui/react-portal": "1.1.4",
+ "@radix-ui/react-presence": "1.1.2",
+ "@radix-ui/react-primitive": "2.0.2",
+ "@radix-ui/react-use-callback-ref": "1.1.0",
+ "@radix-ui/react-use-controllable-state": "1.1.0",
+ "@radix-ui/react-use-layout-effect": "1.1.0",
+ "@radix-ui/react-visually-hidden": "1.1.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-use-callback-ref": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
+ "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==",
+ "license": "MIT",
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-use-controllable-state": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+ "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-use-callback-ref": "1.1.0"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-use-escape-keydown": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz",
+ "integrity": "sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-use-callback-ref": "1.1.0"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-use-layout-effect": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
+ "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==",
+ "license": "MIT",
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-use-rect": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz",
+ "integrity": "sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/rect": "1.1.0"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-use-size": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz",
+ "integrity": "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-use-layout-effect": "1.1.0"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-visually-hidden": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.2.tgz",
+ "integrity": "sha512-1SzA4ns2M1aRlvxErqhLHsBHoS5eI5UUcI2awAMgGUp4LoaoWOKYmvqDY2s/tltuPkh3Yk77YF/r3IRj+Amx4Q==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-primitive": "2.0.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/rect": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz",
+ "integrity": "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==",
+ "license": "MIT"
+ },
"node_modules/@react-leaflet/core": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz",
@@ -834,6 +1338,46 @@
"integrity": "sha512-WJgX9nzTqknM393q1QJDJmoW28kUfEnybeTfVNcNAPnIx210RXm2DiXiHzfNPJNIUUb1tJnz/l4QGtJ30PgWmA==",
"dev": true
},
+ "node_modules/@shadcn/ui": {
+ "version": "0.0.4",
+ "resolved": "https://registry.npmjs.org/@shadcn/ui/-/ui-0.0.4.tgz",
+ "integrity": "sha512-0dtu/5ApsOZ24qgaZwtif8jVwqol7a4m1x5AxPuM1k5wxhqU7t/qEfBGtaSki1R8VlbTQfCj5PAlO45NKCa7Gg==",
+ "license": "MIT",
+ "dependencies": {
+ "chalk": "5.2.0",
+ "commander": "^10.0.0",
+ "execa": "^7.0.0",
+ "fs-extra": "^11.1.0",
+ "node-fetch": "^3.3.0",
+ "ora": "^6.1.2",
+ "prompts": "^2.4.2",
+ "zod": "^3.20.2"
+ },
+ "bin": {
+ "ui": "dist/index.js"
+ }
+ },
+ "node_modules/@shadcn/ui/node_modules/chalk": {
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.2.0.tgz",
+ "integrity": "sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==",
+ "license": "MIT",
+ "engines": {
+ "node": "^12.17.0 || ^14.13 || >=16.0.0"
+ },
+ "funding": {
+ "url": "https://github.com/chalk/chalk?sponsor=1"
+ }
+ },
+ "node_modules/@shadcn/ui/node_modules/commander": {
+ "version": "10.0.1",
+ "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+ "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=14"
+ }
+ },
"node_modules/@swc/counter": {
"version": "0.1.3",
"resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
@@ -892,6 +1436,16 @@
"undici-types": "~6.19.2"
}
},
+ "node_modules/@types/papaparse": {
+ "version": "5.3.15",
+ "resolved": "https://registry.npmjs.org/@types/papaparse/-/papaparse-5.3.15.tgz",
+ "integrity": "sha512-JHe6vF6x/8Z85nCX4yFdDslN11d+1pr12E526X8WAfhadOeaOTx5AuIkvDKIBopfvlzpzkdMx4YyvSKCM9oqtw==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "@types/node": "*"
+ }
+ },
"node_modules/@types/prop-types": {
"version": "15.7.13",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
@@ -912,7 +1466,7 @@
"version": "18.3.1",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz",
"integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==",
- "dev": true,
+ "devOptional": true,
"dependencies": {
"@types/react": "*"
}
@@ -1249,6 +1803,18 @@
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
"dev": true
},
+ "node_modules/aria-hidden": {
+ "version": "1.2.4",
+ "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
+ "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
+ "license": "MIT",
+ "dependencies": {
+ "tslib": "^2.0.0"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
"node_modules/aria-query": {
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
@@ -1468,6 +2034,35 @@
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
"dev": true
},
+ "node_modules/base64-arraybuffer": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+ "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.6.0"
+ }
+ },
+ "node_modules/base64-js": {
+ "version": "1.5.1",
+ "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+ "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/feross"
+ },
+ {
+ "type": "patreon",
+ "url": "https://www.patreon.com/feross"
+ },
+ {
+ "type": "consulting",
+ "url": "https://feross.org/support"
+ }
+ ],
+ "license": "MIT"
+ },
"node_modules/binary-extensions": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -1480,6 +2075,17 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/bl": {
+ "version": "5.1.0",
+ "resolved": "https://registry.npmjs.org/bl/-/bl-5.1.0.tgz",
+ "integrity": "sha512-tv1ZJHLfTDnXE6tMHv73YgSJaWR2AFuPwMntBe7XL/GBFHnT0CLnsHMogfk5+GzCDC5ZWarSCYaIGATZt9dNsQ==",
+ "license": "MIT",
+ "dependencies": {
+ "buffer": "^6.0.3",
+ "inherits": "^2.0.4",
+ "readable-stream": "^3.4.0"
+ }
+ },
"node_modules/brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1502,6 +2108,30 @@
"node": ">=8"
}
},
+ "node_modules/buffer": {
+ "version": "6.0.3",
+ "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+ "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/feross"
+ },
+ {
+ "type": "patreon",
+ "url": "https://www.patreon.com/feross"
+ },
+ {
+ "type": "consulting",
+ "url": "https://feross.org/support"
+ }
+ ],
+ "license": "MIT",
+ "dependencies": {
+ "base64-js": "^1.3.1",
+ "ieee754": "^1.2.1"
+ }
+ },
"node_modules/busboy": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -1633,11 +2263,47 @@
"url": "https://polar.sh/cva"
}
},
+ "node_modules/cli-cursor": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-4.0.0.tgz",
+ "integrity": "sha512-VGtlMu3x/4DOtIUwEkRezxUZ2lBacNJCHash0N0WeZDBS+7Ux1dm3XWAgWYxLJFMMdOeXMHXorshEFhbMSGelg==",
+ "license": "MIT",
+ "dependencies": {
+ "restore-cursor": "^4.0.0"
+ },
+ "engines": {
+ "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
+ "node_modules/cli-spinners": {
+ "version": "2.9.2",
+ "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.2.tgz",
+ "integrity": "sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=6"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/client-only": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
"integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
},
+ "node_modules/clone": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
+ "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=0.8"
+ }
+ },
"node_modules/clsx": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -1718,7 +2384,6 @@
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
- "dev": true,
"dependencies": {
"path-key": "^3.1.0",
"shebang-command": "^2.0.0",
@@ -1728,6 +2393,15 @@
"node": ">= 8"
}
},
+ "node_modules/css-line-break": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+ "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+ "license": "MIT",
+ "dependencies": {
+ "utrie": "^1.0.2"
+ }
+ },
"node_modules/cssesc": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -1752,6 +2426,15 @@
"integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
"dev": true
},
+ "node_modules/data-uri-to-buffer": {
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
+ "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 12"
+ }
+ },
"node_modules/data-view-buffer": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz",
@@ -1835,6 +2518,18 @@
"integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
"dev": true
},
+ "node_modules/defaults": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz",
+ "integrity": "sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==",
+ "license": "MIT",
+ "dependencies": {
+ "clone": "^1.0.2"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/define-data-property": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
@@ -1886,6 +2581,12 @@
"node": ">=8"
}
},
+ "node_modules/detect-node-es": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+ "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+ "license": "MIT"
+ },
"node_modules/didyoumean": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -2558,6 +3259,35 @@
"node": ">=0.10.0"
}
},
+ "node_modules/execa": {
+ "version": "7.2.0",
+ "resolved": "https://registry.npmjs.org/execa/-/execa-7.2.0.tgz",
+ "integrity": "sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==",
+ "license": "MIT",
+ "dependencies": {
+ "cross-spawn": "^7.0.3",
+ "get-stream": "^6.0.1",
+ "human-signals": "^4.3.0",
+ "is-stream": "^3.0.0",
+ "merge-stream": "^2.0.0",
+ "npm-run-path": "^5.1.0",
+ "onetime": "^6.0.0",
+ "signal-exit": "^3.0.7",
+ "strip-final-newline": "^3.0.0"
+ },
+ "engines": {
+ "node": "^14.18.0 || ^16.14.0 || >=18.0.0"
+ },
+ "funding": {
+ "url": "https://github.com/sindresorhus/execa?sponsor=1"
+ }
+ },
+ "node_modules/execa/node_modules/signal-exit": {
+ "version": "3.0.7",
+ "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+ "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+ "license": "ISC"
+ },
"node_modules/fast-deep-equal": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -2613,6 +3343,29 @@
"reusify": "^1.0.4"
}
},
+ "node_modules/fetch-blob": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
+ "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/jimmywarting"
+ },
+ {
+ "type": "paypal",
+ "url": "https://paypal.me/jimmywarting"
+ }
+ ],
+ "license": "MIT",
+ "dependencies": {
+ "node-domexception": "^1.0.0",
+ "web-streams-polyfill": "^3.0.3"
+ },
+ "engines": {
+ "node": "^12.20 || >= 14.13"
+ }
+ },
"node_modules/file-entry-cache": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -2730,6 +3483,32 @@
"node": ">= 6"
}
},
+ "node_modules/formdata-polyfill": {
+ "version": "4.0.10",
+ "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
+ "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
+ "license": "MIT",
+ "dependencies": {
+ "fetch-blob": "^3.1.2"
+ },
+ "engines": {
+ "node": ">=12.20.0"
+ }
+ },
+ "node_modules/fs-extra": {
+ "version": "11.3.0",
+ "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.0.tgz",
+ "integrity": "sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==",
+ "license": "MIT",
+ "dependencies": {
+ "graceful-fs": "^4.2.0",
+ "jsonfile": "^6.0.1",
+ "universalify": "^2.0.0"
+ },
+ "engines": {
+ "node": ">=14.14"
+ }
+ },
"node_modules/fs.realpath": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -2805,6 +3584,27 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/get-nonce": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+ "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/get-stream": {
+ "version": "6.0.1",
+ "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+ "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=10"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/get-symbol-description": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz",
@@ -2913,8 +3713,7 @@
"node_modules/graceful-fs": {
"version": "4.2.11",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
- "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
- "dev": true
+ "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
},
"node_modules/graphemer": {
"version": "1.4.0",
@@ -3003,6 +3802,48 @@
"node": ">= 0.4"
}
},
+ "node_modules/html2canvas": {
+ "version": "1.4.1",
+ "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+ "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+ "license": "MIT",
+ "dependencies": {
+ "css-line-break": "^2.1.0",
+ "text-segmentation": "^1.0.3"
+ },
+ "engines": {
+ "node": ">=8.0.0"
+ }
+ },
+ "node_modules/human-signals": {
+ "version": "4.3.1",
+ "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-4.3.1.tgz",
+ "integrity": "sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==",
+ "license": "Apache-2.0",
+ "engines": {
+ "node": ">=14.18.0"
+ }
+ },
+ "node_modules/ieee754": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+ "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/feross"
+ },
+ {
+ "type": "patreon",
+ "url": "https://www.patreon.com/feross"
+ },
+ {
+ "type": "consulting",
+ "url": "https://feross.org/support"
+ }
+ ],
+ "license": "BSD-3-Clause"
+ },
"node_modules/ignore": {
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -3051,8 +3892,7 @@
"node_modules/inherits": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
- "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
- "dev": true
+ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
},
"node_modules/internal-slot": {
"version": "1.0.7",
@@ -3268,6 +4108,18 @@
"node": ">=0.10.0"
}
},
+ "node_modules/is-interactive": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-2.0.0.tgz",
+ "integrity": "sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=12"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/is-map": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
@@ -3368,6 +4220,18 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/is-stream": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
+ "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
+ "license": "MIT",
+ "engines": {
+ "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/is-string": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
@@ -3413,6 +4277,18 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/is-unicode-supported": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-1.3.0.tgz",
+ "integrity": "sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=12"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/is-weakmap": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
@@ -3462,8 +4338,7 @@
"node_modules/isexe": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
- "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
- "dev": true
+ "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
},
"node_modules/iterator.prototype": {
"version": "1.1.3",
@@ -3552,6 +4427,18 @@
"json5": "lib/cli.js"
}
},
+ "node_modules/jsonfile": {
+ "version": "6.1.0",
+ "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+ "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+ "license": "MIT",
+ "dependencies": {
+ "universalify": "^2.0.0"
+ },
+ "optionalDependencies": {
+ "graceful-fs": "^4.1.6"
+ }
+ },
"node_modules/jsx-ast-utils": {
"version": "3.3.5",
"resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -3576,6 +4463,15 @@
"json-buffer": "3.0.1"
}
},
+ "node_modules/kleur": {
+ "version": "3.0.3",
+ "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
+ "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=6"
+ }
+ },
"node_modules/language-subtag-registry": {
"version": "0.3.23",
"resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz",
@@ -3657,6 +4553,34 @@
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
"dev": true
},
+ "node_modules/log-symbols": {
+ "version": "5.1.0",
+ "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-5.1.0.tgz",
+ "integrity": "sha512-l0x2DvrW294C9uDCoQe1VSU4gf529FkSZ6leBl4TiqZH/e+0R7hSfHQBNut2mNygDgHwvYHfFLn6Oxb3VWj2rA==",
+ "license": "MIT",
+ "dependencies": {
+ "chalk": "^5.0.0",
+ "is-unicode-supported": "^1.1.0"
+ },
+ "engines": {
+ "node": ">=12"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
+ "node_modules/log-symbols/node_modules/chalk": {
+ "version": "5.4.1",
+ "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.4.1.tgz",
+ "integrity": "sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==",
+ "license": "MIT",
+ "engines": {
+ "node": "^12.17.0 || ^14.13 || >=16.0.0"
+ },
+ "funding": {
+ "url": "https://github.com/chalk/chalk?sponsor=1"
+ }
+ },
"node_modules/loose-envify": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -3683,6 +4607,12 @@
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
}
},
+ "node_modules/merge-stream": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+ "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+ "license": "MIT"
+ },
"node_modules/merge2": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -3724,6 +4654,18 @@
"node": ">= 0.6"
}
},
+ "node_modules/mimic-fn": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
+ "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=12"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/minimatch": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -3874,13 +4816,77 @@
"node": "^10 || ^12 || >=14"
}
},
+ "node_modules/node-domexception": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
+ "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/jimmywarting"
+ },
+ {
+ "type": "github",
+ "url": "https://paypal.me/jimmywarting"
+ }
+ ],
+ "license": "MIT",
+ "engines": {
+ "node": ">=10.5.0"
+ }
+ },
+ "node_modules/node-fetch": {
+ "version": "3.3.2",
+ "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
+ "integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
+ "license": "MIT",
+ "dependencies": {
+ "data-uri-to-buffer": "^4.0.0",
+ "fetch-blob": "^3.1.4",
+ "formdata-polyfill": "^4.0.10"
+ },
+ "engines": {
+ "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/node-fetch"
+ }
+ },
"node_modules/normalize-path": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
"dev": true,
"engines": {
- "node": ">=0.10.0"
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/npm-run-path": {
+ "version": "5.3.0",
+ "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
+ "integrity": "sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==",
+ "license": "MIT",
+ "dependencies": {
+ "path-key": "^4.0.0"
+ },
+ "engines": {
+ "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
+ "node_modules/npm-run-path/node_modules/path-key": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+ "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=12"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/object-assign": {
@@ -4012,6 +5018,21 @@
"wrappy": "1"
}
},
+ "node_modules/onetime": {
+ "version": "6.0.0",
+ "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
+ "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
+ "license": "MIT",
+ "dependencies": {
+ "mimic-fn": "^4.0.0"
+ },
+ "engines": {
+ "node": ">=12"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/optionator": {
"version": "0.9.4",
"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -4029,6 +5050,68 @@
"node": ">= 0.8.0"
}
},
+ "node_modules/ora": {
+ "version": "6.3.1",
+ "resolved": "https://registry.npmjs.org/ora/-/ora-6.3.1.tgz",
+ "integrity": "sha512-ERAyNnZOfqM+Ao3RAvIXkYh5joP220yf59gVe2X/cI6SiCxIdi4c9HZKZD8R6q/RDXEje1THBju6iExiSsgJaQ==",
+ "license": "MIT",
+ "dependencies": {
+ "chalk": "^5.0.0",
+ "cli-cursor": "^4.0.0",
+ "cli-spinners": "^2.6.1",
+ "is-interactive": "^2.0.0",
+ "is-unicode-supported": "^1.1.0",
+ "log-symbols": "^5.1.0",
+ "stdin-discarder": "^0.1.0",
+ "strip-ansi": "^7.0.1",
+ "wcwidth": "^1.0.1"
+ },
+ "engines": {
+ "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
+ "node_modules/ora/node_modules/ansi-regex": {
+ "version": "6.1.0",
+ "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+ "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=12"
+ },
+ "funding": {
+ "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+ }
+ },
+ "node_modules/ora/node_modules/chalk": {
+ "version": "5.4.1",
+ "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.4.1.tgz",
+ "integrity": "sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==",
+ "license": "MIT",
+ "engines": {
+ "node": "^12.17.0 || ^14.13 || >=16.0.0"
+ },
+ "funding": {
+ "url": "https://github.com/chalk/chalk?sponsor=1"
+ }
+ },
+ "node_modules/ora/node_modules/strip-ansi": {
+ "version": "7.1.0",
+ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+ "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+ "license": "MIT",
+ "dependencies": {
+ "ansi-regex": "^6.0.1"
+ },
+ "engines": {
+ "node": ">=12"
+ },
+ "funding": {
+ "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+ }
+ },
"node_modules/p-limit": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -4065,6 +5148,12 @@
"integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
"dev": true
},
+ "node_modules/papaparse": {
+ "version": "5.5.2",
+ "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.5.2.tgz",
+ "integrity": "sha512-PZXg8UuAc4PcVwLosEEDYjPyfWnTEhOrUfdv+3Bx+NuAb+5NhDmXzg5fHWmdCh1mP5p7JAZfFr3IMQfcntNAdA==",
+ "license": "MIT"
+ },
"node_modules/parent-module": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -4099,7 +5188,6 @@
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
- "dev": true,
"engines": {
"node": ">=8"
}
@@ -4334,6 +5422,19 @@
"node": ">= 0.8.0"
}
},
+ "node_modules/prompts": {
+ "version": "2.4.2",
+ "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
+ "integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==",
+ "license": "MIT",
+ "dependencies": {
+ "kleur": "^3.0.3",
+ "sisteransi": "^1.0.5"
+ },
+ "engines": {
+ "node": ">= 6"
+ }
+ },
"node_modules/prop-types": {
"version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -4429,6 +5530,75 @@
"react-dom": "^18.0.0"
}
},
+ "node_modules/react-remove-scroll": {
+ "version": "2.6.3",
+ "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.3.tgz",
+ "integrity": "sha512-pnAi91oOk8g8ABQKGF5/M9qxmmOPxaAnopyTHYfqYEwJhyFrbbBtHuSgtKEoH0jpcxx5o3hXqH1mNd9/Oi+8iQ==",
+ "license": "MIT",
+ "dependencies": {
+ "react-remove-scroll-bar": "^2.3.7",
+ "react-style-singleton": "^2.2.3",
+ "tslib": "^2.1.0",
+ "use-callback-ref": "^1.3.3",
+ "use-sidecar": "^1.1.3"
+ },
+ "engines": {
+ "node": ">=10"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/react-remove-scroll-bar": {
+ "version": "2.3.8",
+ "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+ "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+ "license": "MIT",
+ "dependencies": {
+ "react-style-singleton": "^2.2.2",
+ "tslib": "^2.0.0"
+ },
+ "engines": {
+ "node": ">=10"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/react-style-singleton": {
+ "version": "2.2.3",
+ "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+ "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+ "license": "MIT",
+ "dependencies": {
+ "get-nonce": "^1.0.0",
+ "tslib": "^2.0.0"
+ },
+ "engines": {
+ "node": ">=10"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
"node_modules/read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -4438,6 +5608,20 @@
"pify": "^2.3.0"
}
},
+ "node_modules/readable-stream": {
+ "version": "3.6.2",
+ "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+ "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+ "license": "MIT",
+ "dependencies": {
+ "inherits": "^2.0.3",
+ "string_decoder": "^1.1.1",
+ "util-deprecate": "^1.0.1"
+ },
+ "engines": {
+ "node": ">= 6"
+ }
+ },
"node_modules/readdirp": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -4524,6 +5708,52 @@
"url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
}
},
+ "node_modules/restore-cursor": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-4.0.0.tgz",
+ "integrity": "sha512-I9fPXU9geO9bHOt9pHHOhOkYerIMsmVaWB0rA2AI9ERh/+x/i7MV5HKBNrg+ljO5eoPVgCcnFuRjJ9uH6I/3eg==",
+ "license": "MIT",
+ "dependencies": {
+ "onetime": "^5.1.0",
+ "signal-exit": "^3.0.2"
+ },
+ "engines": {
+ "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
+ "node_modules/restore-cursor/node_modules/mimic-fn": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+ "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/restore-cursor/node_modules/onetime": {
+ "version": "5.1.2",
+ "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+ "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+ "license": "MIT",
+ "dependencies": {
+ "mimic-fn": "^2.1.0"
+ },
+ "engines": {
+ "node": ">=6"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
+ "node_modules/restore-cursor/node_modules/signal-exit": {
+ "version": "3.0.7",
+ "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+ "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+ "license": "ISC"
+ },
"node_modules/reusify": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -4591,6 +5821,26 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/safe-buffer": {
+ "version": "5.2.1",
+ "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+ "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/feross"
+ },
+ {
+ "type": "patreon",
+ "url": "https://www.patreon.com/feross"
+ },
+ {
+ "type": "consulting",
+ "url": "https://feross.org/support"
+ }
+ ],
+ "license": "MIT"
+ },
"node_modules/safe-regex-test": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.3.tgz",
@@ -4703,7 +5953,6 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
- "dev": true,
"dependencies": {
"shebang-regex": "^3.0.0"
},
@@ -4715,7 +5964,6 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
- "dev": true,
"engines": {
"node": ">=8"
}
@@ -4759,6 +6007,12 @@
"is-arrayish": "^0.3.1"
}
},
+ "node_modules/sisteransi": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
+ "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
+ "license": "MIT"
+ },
"node_modules/source-map-js": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -4767,6 +6021,21 @@
"node": ">=0.10.0"
}
},
+ "node_modules/stdin-discarder": {
+ "version": "0.1.0",
+ "resolved": "https://registry.npmjs.org/stdin-discarder/-/stdin-discarder-0.1.0.tgz",
+ "integrity": "sha512-xhV7w8S+bUwlPTb4bAOUQhv8/cSS5offJuX8GQGq32ONF0ZtDWKfkdomM3HMRA+LhX6um/FZ0COqlwsjD53LeQ==",
+ "license": "MIT",
+ "dependencies": {
+ "bl": "^5.0.0"
+ },
+ "engines": {
+ "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/streamsearch": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
@@ -4775,6 +6044,15 @@
"node": ">=10.0.0"
}
},
+ "node_modules/string_decoder": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+ "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+ "license": "MIT",
+ "dependencies": {
+ "safe-buffer": "~5.2.0"
+ }
+ },
"node_modules/string-width": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
@@ -4973,6 +6251,18 @@
"node": ">=4"
}
},
+ "node_modules/strip-final-newline": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
+ "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=12"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/strip-json-comments": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -5153,6 +6443,15 @@
"node": ">=6"
}
},
+ "node_modules/text-segmentation": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+ "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+ "license": "MIT",
+ "dependencies": {
+ "utrie": "^1.0.2"
+ }
+ },
"node_modules/text-table": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -5358,6 +6657,15 @@
"integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
"dev": true
},
+ "node_modules/universalify": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+ "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 10.0.0"
+ }
+ },
"node_modules/uri-js": {
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -5367,17 +6675,85 @@
"punycode": "^2.1.0"
}
},
+ "node_modules/use-callback-ref": {
+ "version": "1.3.3",
+ "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+ "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+ "license": "MIT",
+ "dependencies": {
+ "tslib": "^2.0.0"
+ },
+ "engines": {
+ "node": ">=10"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/use-sidecar": {
+ "version": "1.1.3",
+ "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+ "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+ "license": "MIT",
+ "dependencies": {
+ "detect-node-es": "^1.1.0",
+ "tslib": "^2.0.0"
+ },
+ "engines": {
+ "node": ">=10"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
"node_modules/util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
- "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
- "dev": true
+ "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+ },
+ "node_modules/utrie": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+ "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+ "license": "MIT",
+ "dependencies": {
+ "base64-arraybuffer": "^1.0.2"
+ }
+ },
+ "node_modules/wcwidth": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
+ "integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==",
+ "license": "MIT",
+ "dependencies": {
+ "defaults": "^1.0.3"
+ }
+ },
+ "node_modules/web-streams-polyfill": {
+ "version": "3.3.3",
+ "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
+ "integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 8"
+ }
},
"node_modules/which": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
- "dev": true,
"dependencies": {
"isexe": "^2.0.0"
},
@@ -5599,6 +6975,15 @@
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
+ },
+ "node_modules/zod": {
+ "version": "3.24.2",
+ "resolved": "https://registry.npmjs.org/zod/-/zod-3.24.2.tgz",
+ "integrity": "sha512-lY7CDW43ECgW9u1TcT3IoXHflywfVqDYze4waEz812jR/bZ8FHDsl7pFQoSZTz5N+2NqRXs8GBwnAwo3ZNxqhQ==",
+ "license": "MIT",
+ "funding": {
+ "url": "https://github.com/sponsors/colinhacks"
+ }
}
}
}
diff --git a/frontend/package.json b/frontend/package.json
index b16ac8c..8e03eed 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,15 +9,20 @@
"lint": "next lint"
},
"dependencies": {
+ "@radix-ui/react-popover": "^1.1.6",
"@radix-ui/react-slot": "^1.1.2",
+ "@radix-ui/react-toast": "^1.2.6",
+ "@shadcn/ui": "^0.0.4",
"axios": "^1.7.7",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"date-fns": "^4.1.0",
+ "html2canvas": "^1.4.1",
"leaflet": "^1.9.4",
"leaflet-geosearch": "^4.0.0",
"lucide-react": "^0.475.0",
"next": "15.0.2",
+ "papaparse": "^5.5.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.3.0",
@@ -28,6 +33,7 @@
"@types/leaflet": "^1.9.14",
"@types/lodash.debounce": "^4.0.9",
"@types/node": "^20",
+ "@types/papaparse": "^5.3.15",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^8",
diff --git a/frontend/src/app/locate/page.tsx b/frontend/src/app/locate/page.tsx
new file mode 100644
index 0000000..7c14eb3
--- /dev/null
+++ b/frontend/src/app/locate/page.tsx
@@ -0,0 +1,139 @@
+"use client"
+
+import { useState } from 'react';
+import { MapComponent } from '@components/map/MapComponent';
+import { ControlPanel } from '@/components/Controls/ControlPanel';
+import { Location, SiteLocatorPayload } from '@/lib/types';
+import { submitLocations } from '@/lib/api';
+import { useToast } from '@/ui/use-toast';
+import { Button } from '@/ui/button';
+import { Download, Camera } from 'lucide-react';
+import html2canvas from 'html2canvas';
+import Navigation from "@/components/navigation/navigation";
+
+export default function Index() {
+ const [polygon, setPolygon] = useState<Location[]>([]);
+ const [mustHaveLocations, setMustHaveLocations] = useState<Location[]>([]);
+ const [suggestedLocations, setSuggestedLocations] = useState<Location[]>([]);
+ const { toast } = useToast();
+
+ const handleSubmit = async (payload: SiteLocatorPayload) => {
+ try {
+ console.log('Submitting payload:', payload); // Debug log for request
+ const response = await submitLocations(payload);
+ console.log('API Response:', response); // Debug log for response
+
+ if (!response.site_location || !Array.isArray(response.site_location)) {
+ throw new Error('Invalid response format from API');
+ }
+
+ const locations = response.site_location.map(site => ({
+ lat: site.latitude,
+ lng: site.longitude,
+ }));
+
+ console.log('Processed locations to plot:', locations); // Debug log for processed locations
+ setSuggestedLocations(locations);
+
+ toast({
+ title: 'Success',
+ description: `Found ${locations.length} suggested locations`,
+ });
+ } catch (error) {
+ console.error('Submit error:', error);
+ toast({
+ title: 'Error',
+ description: error instanceof Error ? error.message : 'Failed to submit locations',
+ variant: 'destructive',
+ });
+ }
+ };
+
+ const handleLocationClick = (location: Location) => {
+ setMustHaveLocations([...mustHaveLocations, location]);
+ };
+
+ const handleExportCSV = () => {
+ if (suggestedLocations.length === 0) {
+ toast({
+ title: 'No Data',
+ description: 'No locations available to export',
+ variant: 'destructive',
+ });
+ return;
+ }
+
+ const headers = ['Type', 'Latitude', 'Longitude', 'Area Name', 'Category'];
+ const rows = [
+ ...mustHaveLocations.map(loc => ['Must Have', loc.lat, loc.lng, '', '']),
+ ...suggestedLocations.map(loc => ['Suggested', loc.lat, loc.lng, '', '']),
+ ];
+
+ const csvContent = [
+ headers.join(','),
+ ...rows.map(row => row.join(',')),
+ ].join('\n');
+
+ const blob = new Blob([csvContent], { type: 'text/csv' });
+ const url = window.URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = 'locations.csv';
+ a.click();
+ window.URL.revokeObjectURL(url);
+
+ toast({
+ title: 'Success',
+ description: 'CSV file downloaded successfully',
+ });
+ };
+
+ const handleSaveMap = async () => {
+ const mapElement = document.querySelector('.leaflet-container');
+ if (mapElement) {
+ const canvas = await html2canvas(mapElement as HTMLElement);
+ const url = canvas.toDataURL('image/png');
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = 'map.png';
+ a.click();
+
+ toast({
+ title: 'Success',
+ description: 'Map image saved successfully',
+ });
+ }
+ };
+
+ return (
+ <div className="flex flex-col h-screen">
+ <Navigation />
+ <div className="flex-1 mt-16">
+ <MapComponent
+ polygon={polygon}
+ mustHaveLocations={mustHaveLocations}
+ suggestedLocations={suggestedLocations}
+ onPolygonChange={setPolygon}
+ onLocationClick={handleLocationClick}
+ />
+ <ControlPanel
+ onSubmit={handleSubmit}
+ polygon={polygon}
+ mustHaveLocations={mustHaveLocations}
+ onMustHaveLocationsChange={setMustHaveLocations}
+ onBoundaryFound={setPolygon}
+ />
+ <div className="absolute bottom-4 right-4 flex gap-2">
+ <Button onClick={handleExportCSV} className="flex items-center gap-2 shadow-lg">
+ <Download className="h-4 w-4" />
+ Export CSV
+ </Button>
+ <Button onClick={handleSaveMap} className="flex items-center gap-2 shadow-lg">
+ <Camera className="h-4 w-4" />
+ Save Map
+ </Button>
+ </div>
+ </div>
+ </div>
+ );
+}
diff --git a/frontend/src/components/Controls/ControlPanel.tsx b/frontend/src/components/Controls/ControlPanel.tsx
new file mode 100644
index 0000000..21255f2
--- /dev/null
+++ b/frontend/src/components/Controls/ControlPanel.tsx
@@ -0,0 +1,187 @@
+import { useState } from 'react';
+import { Button } from '@/ui/button';
+import { Input } from '@/ui/input';
+import { SearchBar } from './SearchBar';
+import { FileUpload } from './FileUpload';
+import { Location, ControlPanelProps } from '@/lib/types';
+import { useToast } from '@/ui/use-toast';
+import { Loader2 } from 'lucide-react';
+
+// Extend ControlPanelProps to include onBoundaryFound
+interface ExtendedControlPanelProps extends ControlPanelProps {
+ onBoundaryFound: (boundary: Location[]) => void;
+}
+
+export function ControlPanel({
+ onSubmit,
+ polygon,
+ mustHaveLocations,
+ onMustHaveLocationsChange,
+ onBoundaryFound,
+}: ExtendedControlPanelProps) {
+ const [minDistance, setMinDistance] = useState('0.5'); // Default value for min_distance_km
+ const [numSensors, setNumSensors] = useState('5'); // Default value for num_sensors
+ const [newLat, setNewLat] = useState('');
+ const [newLng, setNewLng] = useState('');
+ const [isLoading, setIsLoading] = useState(false);
+ const { toast } = useToast();
+
+ // Validation helper function
+ const validateInputs = () => {
+ if (polygon.length < 3) {
+ toast({
+ title: 'Error',
+ description: 'Please draw a polygon on the map',
+ variant: 'destructive',
+ });
+ return false;
+ }
+ if (!numSensors || parseInt(numSensors) < 1) {
+ toast({
+ title: 'Error',
+ description: 'Please enter a valid number of sensors',
+ variant: 'destructive',
+ });
+ return false;
+ }
+ return true;
+ };
+
+ // Handle form submission
+ const handleSubmit = async () => {
+ if (!validateInputs()) return;
+
+ const payload = {
+ polygon: {
+ coordinates: [
+ [...polygon.map((loc) => [loc.lng, loc.lat]), [polygon[0].lng, polygon[0].lat]], // Close the polygon
+ ],
+ },
+ must_have_locations: mustHaveLocations.length > 0 ? mustHaveLocations.map((loc) => [loc.lat, loc.lng]) : [],
+ min_distance_km: parseFloat(minDistance) || undefined, // Optional field
+ num_sensors: parseInt(numSensors, 10),
+ };
+
+ setIsLoading(true);
+ try {
+ await onSubmit(payload);
+ toast({
+ title: 'Success',
+ description: 'Locations submitted successfully',
+ });
+ } catch (error) {
+ toast({
+ title: 'Error',
+ description: 'Failed to submit locations',
+ variant: 'destructive',
+ });
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ // Add a new must-have location
+ const handleAddLocation = () => {
+ const lat = parseFloat(newLat);
+ const lng = parseFloat(newLng);
+
+ if (isNaN(lat) || isNaN(lng) || lat < -90 || lat > 90 || lng < -180 || lng > 180) {
+ toast({
+ title: 'Error',
+ description: 'Please enter valid latitude (-90 to 90) and longitude (-180 to 180)',
+ variant: 'destructive',
+ });
+ return;
+ }
+
+ onMustHaveLocationsChange([...mustHaveLocations, { lat, lng }]);
+ setNewLat('');
+ setNewLng('');
+ toast({
+ title: 'Success',
+ description: 'Location added successfully',
+ });
+ };
+
+ return (
+ <div className="control-panel space-y-4 mt-9" style={{ width: '400px' }}>
+ <h2 className="text-lg font-semibold mb-4">Air Quality Site Locator</h2>
+
+ {/* Search Bar */}
+ <SearchBar onSearch={() => {}} onBoundaryFound={onBoundaryFound} />
+
+ {/* Must-Have Locations */}
+ <div className="space-y-2">
+ <label className="text-sm font-medium">Must-Have Locations (Optional)</label>
+ <div className="flex gap-2">
+ <Input
+ type="number"
+ placeholder="Latitude"
+ value={newLat}
+ onChange={(e) => setNewLat(e.target.value)}
+ step="any"
+ aria-label="Latitude"
+ />
+ <Input
+ type="number"
+ placeholder="Longitude"
+ value={newLng}
+ onChange={(e) => setNewLng(e.target.value)}
+ step="any"
+ aria-label="Longitude"
+ />
+ <Button onClick={handleAddLocation} aria-label="Add Location">
+ Add
+ </Button>
+ </div>
+ <FileUpload onUpload={onMustHaveLocationsChange} />
+ <div className="text-sm text-muted-foreground">
+ {mustHaveLocations.length} locations added
+ </div>
+ </div>
+
+ {/* Minimum Distance */}
+ <div className="space-y-2">
+ <label className="text-sm font-medium">Minimum Distance (km) (Optional)</label>
+ <Input
+ type="number"
+ min="0.1"
+ step="0.1"
+ value={minDistance}
+ onChange={(e) => setMinDistance(e.target.value)}
+ aria-label="Minimum Distance"
+ />
+ </div>
+
+ {/*Add Number of Sensors */}
+ <div className="space-y-2">
+ <label className="text-sm font-medium">Number of Sensors (Required)</label>
+ <Input
+ type="number"
+ min="1"
+ value={numSensors}
+ onChange={(e) => setNumSensors(e.target.value)}
+ required
+ aria-label="Number of Sensors"
+ />
+ </div>
+
+ {/* Submit Button */}
+ <Button
+ className="w-full"
+ onClick={handleSubmit}
+ disabled={isLoading}
+ aria-label="Submit"
+ >
+ {isLoading ? (
+ <>
+ <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+ Submitting...
+ </>
+ ) : (
+ 'Submit'
+ )}
+ </Button>
+ </div>
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/components/Controls/FileUpload.tsx b/frontend/src/components/Controls/FileUpload.tsx
new file mode 100644
index 0000000..4cdc2e4
--- /dev/null
+++ b/frontend/src/components/Controls/FileUpload.tsx
@@ -0,0 +1,107 @@
+"use client"
+
+import { useRef } from 'react';
+import { Button } from '@/ui/button';
+import { Upload } from 'lucide-react';
+import Papa from 'papaparse';
+import { useToast } from '@/ui/use-toast';
+
+interface Location {
+ lat: number;
+ lng: number;
+}
+
+interface FileUploadProps {
+ onUpload: (locations: Location[]) => void;
+}
+
+export function FileUpload({ onUpload }: FileUploadProps) {
+ const fileInputRef = useRef<HTMLInputElement>(null);
+ const { toast } = useToast();
+
+ const normalizeColumnName = (name: string): string =>
+ name.trim().toLowerCase().replace(/\s+/g, '');
+
+ const latitudeAliases = ['lat', 'latitude'];
+ const longitudeAliases = ['lng', 'lon', 'longitude'];
+
+ const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+ const file = event.target.files?.[0];
+ if (!file) return;
+
+ Papa.parse(file, {
+ header: true,
+ complete: (results) => {
+ try {
+ const headers = results.meta.fields || [];
+ if (!headers.length) {
+ throw new Error('CSV file has no headers.');
+ }
+
+ const normalizedHeaders = headers.map(normalizeColumnName);
+ const latIndex = normalizedHeaders.findIndex((header) =>
+ latitudeAliases.includes(header)
+ );
+ const lngIndex = normalizedHeaders.findIndex((header) =>
+ longitudeAliases.includes(header)
+ );
+
+ if (latIndex === -1 || lngIndex === -1) {
+ throw new Error('Could not find latitude and/or longitude columns in the CSV file.');
+ }
+
+ const locations = results.data
+ .map((row: any) => ({
+ lat: parseFloat(row[headers[latIndex]]),
+ lng: parseFloat(row[headers[lngIndex]]),
+ }))
+ .filter((loc: Location) => !isNaN(loc.lat) && !isNaN(loc.lng));
+
+ if (locations.length === 0) {
+ throw new Error('No valid latitude/longitude pairs found.');
+ }
+
+ onUpload(locations);
+
+ toast({
+ title: 'Success',
+ description: `Imported ${locations.length} locations from CSV`,
+ });
+ } catch (error) {
+ toast({
+ title: 'Error',
+ description: error instanceof Error ? error.message : 'Failed to parse CSV file.',
+ variant: 'destructive',
+ });
+ }
+ },
+ error: () => {
+ toast({
+ title: 'Error',
+ description: 'Failed to read CSV file',
+ variant: 'destructive',
+ });
+ },
+ });
+ };
+
+ return (
+ <div>
+ <input
+ type="file"
+ ref={fileInputRef}
+ onChange={handleFileChange}
+ accept=".csv"
+ className="hidden"
+ />
+ <Button
+ variant="outline"
+ className="w-full"
+ onClick={() => fileInputRef.current?.click()}
+ >
+ <Upload className="mr-2 h-4 w-4" />
+ Upload CSV
+ </Button>
+ </div>
+ );
+}
diff --git a/frontend/src/components/Controls/SearchBar.tsx b/frontend/src/components/Controls/SearchBar.tsx
new file mode 100644
index 0000000..009016b
--- /dev/null
+++ b/frontend/src/components/Controls/SearchBar.tsx
@@ -0,0 +1,137 @@
+import { useState, useEffect } from "react";
+import { Input } from "@/ui/input";
+import { Button } from "@/ui/button";
+import { Search, X } from "lucide-react";
+import { useToast } from "@/ui/use-toast";
+import { Location } from "@/lib/types";
+
+interface SearchBarProps {
+ onSearch: (query: string) => void;
+ onBoundaryFound: (boundary: Location[]) => void;
+}
+
+export function SearchBar({ onSearch, onBoundaryFound }: SearchBarProps) {
+ const [query, setQuery] = useState("");
+ const [suggestions, setSuggestions] = useState<{ name: string; osm_id: number }[]>([]);
+ const [isLoading, setIsLoading] = useState(false);
+ const { toast } = useToast();
+
+ // Fetch autocomplete suggestions as user types
+ useEffect(() => {
+ const fetchSuggestions = async () => {
+ if (query.length < 2) {
+ setSuggestions([]); // Hide suggestions if query is too short
+ return;
+ }
+
+ try {
+ const response = await fetch(
+ `https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(query)}&format=json&limit=5`
+ );
+ const data = await response.json();
+ setSuggestions(data.map((item: any) => ({ name: item.display_name, osm_id: item.osm_id })));
+ } catch (error) {
+ console.error("Error fetching suggestions:", error);
+ }
+ };
+
+ const timeoutId = setTimeout(fetchSuggestions, 300); // Debounce API calls
+ return () => clearTimeout(timeoutId);
+ }, [query]);
+
+ // Handle search (when user submits form or selects a suggestion)
+ const searchLocation = async (selectedQuery?: string, selectedOsmId?: number) => {
+ const searchQuery = selectedQuery || query;
+ if (!searchQuery.trim()) return;
+
+ setIsLoading(true);
+ setSuggestions([]); // Hide suggestions after selection
+
+ try {
+ const searchResponse = await fetch(
+ `https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(searchQuery)}&format=json&polygon_geojson=1&limit=1`
+ );
+ const searchResults = await searchResponse.json();
+
+ if (searchResults.length === 0) {
+ toast({ title: "Location not found", description: "Try another search term.", variant: "destructive" });
+ return;
+ }
+
+ const osmId = selectedOsmId || searchResults[0].osm_id;
+
+ // Fetch boundary data
+ const boundaryResponse = await fetch(
+ `https://nominatim.openstreetmap.org/lookup?osm_ids=R${osmId}&polygon_geojson=1&format=json`
+ );
+ const boundaryData = await boundaryResponse.json();
+
+ if (boundaryData[0]?.geojson?.coordinates?.[0]) {
+ const boundary = boundaryData[0].geojson.coordinates[0].map(([lng, lat]: number[]) => ({ lat, lng }));
+ onBoundaryFound(boundary);
+ onSearch(searchQuery);
+
+ // Center the map on the first coordinate of the boundary
+ if (window.map) {
+ const center = boundary[0];
+ window.map.setView([center.lat, center.lng], 12);
+ }
+
+ toast({ title: "Location found", description: `Boundary drawn for ${searchResults[0].display_name}` });
+ } else {
+ toast({ title: "Boundary not found", description: "No boundary data available", variant: "destructive" });
+ }
+ } catch (error) {
+ toast({ title: "Error", description: "Failed to search location", variant: "destructive" });
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ return (
+ <div className="relative w-full">
+ <form onSubmit={(e) => { e.preventDefault(); searchLocation(); }} className="flex gap-2">
+ <Input
+ type="text"
+ placeholder="Search location (e.g., Kampala)..."
+ value={query}
+ onChange={(e) => setQuery(e.target.value)}
+ className="flex-1"
+ disabled={isLoading}
+ />
+ {query && (
+ <Button
+ type="button"
+ size="icon"
+ variant="ghost"
+ onClick={() => setQuery("")}
+ >
+ <X className="h-4 w-4" />
+ </Button>
+ )}
+ <Button type="submit" size="icon" disabled={isLoading}>
+ <Search className="h-4 w-4" />
+ </Button>
+ </form>
+
+ {/* Dropdown Suggestions */}
+ {suggestions.length > 0 && (
+ <ul className="absolute w-full bg-white border border-gray-200 rounded-md mt-1 shadow-lg z-50">
+ {suggestions.map((suggestion, index) => (
+ <li
+ key={index}
+ className="p-2 cursor-pointer hover:bg-gray-100"
+ onClick={() => {
+ setQuery(suggestion.name);
+ setSuggestions([]); // Hide suggestions
+ searchLocation(suggestion.name, suggestion.osm_id);
+ }}
+ >
+ {suggestion.name}
+ </li>
+ ))}
+ </ul>
+ )}
+ </div>
+ );
+}
diff --git a/frontend/src/components/hooks/use-toast.ts b/frontend/src/components/hooks/use-toast.ts
new file mode 100644
index 0000000..b390744
--- /dev/null
+++ b/frontend/src/components/hooks/use-toast.ts
@@ -0,0 +1,191 @@
+import * as React from "react"
+
+import type {
+ ToastActionElement,
+ ToastProps,
+} from "@/ui/toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+ id: string
+ title?: React.ReactNode
+ description?: React.ReactNode
+ action?: ToastActionElement
+}
+
+const actionTypes = {
+ ADD_TOAST: "ADD_TOAST",
+ UPDATE_TOAST: "UPDATE_TOAST",
+ DISMISS_TOAST: "DISMISS_TOAST",
+ REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+ count = (count + 1) % Number.MAX_SAFE_INTEGER
+ return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+ | {
+ type: ActionType["ADD_TOAST"]
+ toast: ToasterToast
+ }
+ | {
+ type: ActionType["UPDATE_TOAST"]
+ toast: Partial<ToasterToast>
+ }
+ | {
+ type: ActionType["DISMISS_TOAST"]
+ toastId?: ToasterToast["id"]
+ }
+ | {
+ type: ActionType["REMOVE_TOAST"]
+ toastId?: ToasterToast["id"]
+ }
+
+interface State {
+ toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+ if (toastTimeouts.has(toastId)) {
+ return
+ }
+
+ const timeout = setTimeout(() => {
+ toastTimeouts.delete(toastId)
+ dispatch({
+ type: "REMOVE_TOAST",
+ toastId: toastId,
+ })
+ }, TOAST_REMOVE_DELAY)
+
+ toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+ switch (action.type) {
+ case "ADD_TOAST":
+ return {
+ ...state,
+ toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+ }
+
+ case "UPDATE_TOAST":
+ return {
+ ...state,
+ toasts: state.toasts.map((t) =>
+ t.id === action.toast.id ? { ...t, ...action.toast } : t
+ ),
+ }
+
+ case "DISMISS_TOAST": {
+ const { toastId } = action
+
+ // ! Side effects ! - This could be extracted into a dismissToast() action,
+ // but I'll keep it here for simplicity
+ if (toastId) {
+ addToRemoveQueue(toastId)
+ } else {
+ state.toasts.forEach((toast) => {
+ addToRemoveQueue(toast.id)
+ })
+ }
+
+ return {
+ ...state,
+ toasts: state.toasts.map((t) =>
+ t.id === toastId || toastId === undefined
+ ? {
+ ...t,
+ open: false,
+ }
+ : t
+ ),
+ }
+ }
+ case "REMOVE_TOAST":
+ if (action.toastId === undefined) {
+ return {
+ ...state,
+ toasts: [],
+ }
+ }
+ return {
+ ...state,
+ toasts: state.toasts.filter((t) => t.id !== action.toastId),
+ }
+ }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+ memoryState = reducer(memoryState, action)
+ listeners.forEach((listener) => {
+ listener(memoryState)
+ })
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+ const id = genId()
+
+ const update = (props: ToasterToast) =>
+ dispatch({
+ type: "UPDATE_TOAST",
+ toast: { ...props, id },
+ })
+ const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+ dispatch({
+ type: "ADD_TOAST",
+ toast: {
+ ...props,
+ id,
+ open: true,
+ onOpenChange: (open) => {
+ if (!open) dismiss()
+ },
+ },
+ })
+
+ return {
+ id: id,
+ dismiss,
+ update,
+ }
+}
+
+function useToast() {
+ const [state, setState] = React.useState<State>(memoryState)
+
+ React.useEffect(() => {
+ listeners.push(setState)
+ return () => {
+ const index = listeners.indexOf(setState)
+ if (index > -1) {
+ listeners.splice(index, 1)
+ }
+ }
+ }, [state])
+
+ return {
+ ...state,
+ toast,
+ dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+ }
+}
+
+export { useToast, toast }
diff --git a/frontend/src/components/map/MapComponent.tsx b/frontend/src/components/map/MapComponent.tsx
new file mode 100644
index 0000000..34e5296
--- /dev/null
+++ b/frontend/src/components/map/MapComponent.tsx
@@ -0,0 +1,198 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { MapContainer, TileLayer, useMap, Marker, Polygon } from 'react-leaflet';
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+import { Location } from '@/lib/types';
+import { NavigationControls } from './NavigationControls';
+import { Button } from '@/ui/button';
+import { Map as MapIcon } from 'lucide-react';
+import { Popover, PopoverContent, PopoverTrigger } from "@/ui/popover";
+
+// Fix for default markers
+delete (L.Icon.Default.prototype as any)._getIconUrl;
+
+// Create custom icons for different marker types
+const blueIcon = new L.Icon({
+ iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.png',
+ iconSize: [25, 41],
+ iconAnchor: [12, 41],
+ popupAnchor: [1, -34],
+ shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
+ shadowSize: [41, 41],
+});
+
+const greenIcon = new L.Icon({
+ iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
+ iconSize: [25, 41],
+ iconAnchor: [12, 41],
+ popupAnchor: [1, -34],
+ shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
+ shadowSize: [41, 41],
+});
+
+const mapStyles = {
+ streets: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+ satellite: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
+};
+
+type MapStyle = keyof typeof mapStyles;
+
+interface MapComponentProps {
+ polygon: Location[];
+ mustHaveLocations: Location[];
+ suggestedLocations: Location[];
+ onPolygonChange: (locations: Location[]) => void;
+ onLocationClick: (location: Location) => void;
+}
+
+// Add map instance to window for global access
+declare global {
+ interface Window {
+ map: L.Map;
+ }
+}
+
+function MapStyleControl() {
+ const map = useMap();
+ const [currentStyle, setCurrentStyle] = useState<MapStyle>('streets');
+
+ const changeStyle = (style: MapStyle) => {
+ setCurrentStyle(style);
+ // Find and remove the existing tile layer
+ map.eachLayer((layer) => {
+ if (layer instanceof L.TileLayer) {
+ map.removeLayer(layer);
+ }
+ });
+ // Add the new tile layer
+ L.tileLayer(mapStyles[style], {
+ attribution: style === 'satellite'
+ ? '© <a href="https://www.arcgis.com/">ESRI</a>'
+ : '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+ }).addTo(map);
+ };
+
+ return (
+ <div className="absolute top-4 right-4 z-[1000]">
+ <Popover>
+ <PopoverTrigger asChild>
+ <Button variant="outline" size="icon" className="h-10 w-10 bg-white shadow-lg">
+ <MapIcon className="h-4 w-4" />
+ </Button>
+ </PopoverTrigger>
+ <PopoverContent className="w-40 p-2" style={{ zIndex: 2000 }}>
+ {Object.keys(mapStyles).map((style) => (
+ <Button
+ key={style}
+ variant={currentStyle === style ? "secondary" : "ghost"}
+ className="w-full justify-start text-sm capitalize mb-1"
+ onClick={() => changeStyle(style as MapStyle)}
+ >
+ {style}
+ </Button>
+ ))}
+ </PopoverContent>
+ </Popover>
+ </div>
+ );
+}
+
+function MapController() {
+ const map = useMap();
+ useEffect(() => {
+ window.map = map;
+ }, [map]);
+ return null;
+}
+
+function DrawControl({
+ onPolygonChange,
+}: {
+ onPolygonChange: (locations: Location[]) => void;
+}) {
+ const map = useMap();
+ const drawingRef = useRef<L.Polyline>();
+ const locationsRef = useRef<Location[]>([]);
+
+ useEffect(() => {
+ const handleClick = (e: L.LeafletMouseEvent) => {
+ const newLocation = { lat: e.latlng.lat, lng: e.latlng.lng };
+ locationsRef.current = [...locationsRef.current, newLocation];
+
+ if (!drawingRef.current) {
+ drawingRef.current = L.polyline([], { color: 'blue' }).addTo(map);
+ }
+
+ drawingRef.current.setLatLngs(locationsRef.current);
+ onPolygonChange(locationsRef.current);
+ };
+
+ map.on('click', handleClick);
+
+ return () => {
+ map.off('click', handleClick);
+ drawingRef.current?.remove();
+ };
+ }, [map, onPolygonChange]);
+
+ return null;
+}
+
+export function MapComponent({
+ polygon,
+ mustHaveLocations,
+ suggestedLocations,
+ onPolygonChange,
+ onLocationClick,
+}: MapComponentProps) {
+ const [isDrawing, setIsDrawing] = useState(false);
+
+ return (
+ <div className="relative pr-[420px]">
+ <MapContainer
+ center={[1.3733, 32.2903]} // Uganda center
+ zoom={7}
+ className="h-screen w-full"
+ >
+ <MapController />
+ <MapStyleControl />
+ <TileLayer
+ attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+ url={mapStyles.streets}
+ />
+
+ {isDrawing && <DrawControl onPolygonChange={onPolygonChange} />}
+
+ {polygon.length > 2 && (
+ <Polygon
+ positions={polygon.map((loc) => [loc.lat, loc.lng])}
+ pathOptions={{ color: 'blue' }}
+ />
+ )}
+
+ {mustHaveLocations.map((location, index) => (
+ <Marker
+ key={`must-have-${location.lat}-${location.lng}-${index}`}
+ position={[location.lat, location.lng]}
+ icon={blueIcon}
+ />
+ ))}
+
+ {suggestedLocations.map((location, index) => (
+ <Marker
+ key={`suggested-${location.lat}-${location.lng}-${index}`}
+ position={[location.lat, location.lng]}
+ icon={greenIcon}
+ />
+ ))}
+ </MapContainer>
+
+ <NavigationControls
+ isDrawing={isDrawing}
+ onDrawingToggle={() => setIsDrawing(!isDrawing)}
+ />
+ </div>
+ );
+}
diff --git a/frontend/src/components/map/NavigationControls.tsx b/frontend/src/components/map/NavigationControls.tsx
new file mode 100644
index 0000000..d8b6bae
--- /dev/null
+++ b/frontend/src/components/map/NavigationControls.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { Button } from '@/ui/button';
+
+interface NavigationControlsProps {
+ isDrawing: boolean;
+ onDrawingToggle: () => void;
+}
+
+export function NavigationControls({ isDrawing, onDrawingToggle }: NavigationControlsProps) {
+ return (
+ <div className="absolute bottom-4 right-4 z-[1000]">
+ <Button
+ variant={isDrawing ? "secondary" : "default"}
+ onClick={onDrawingToggle}
+ className="shadow-lg"
+ >
+ {isDrawing ? "Finish Drawing" : "Draw Polygon"}
+ </Button>
+ </div>
+ );
+}
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
new file mode 100644
index 0000000..7fe15f0
--- /dev/null
+++ b/frontend/src/lib/api.ts
@@ -0,0 +1,116 @@
+import axios from "axios"
+import { NextResponse } from "next/server"
+import { Location, SiteLocatorPayload, SiteLocatorResponse,
+ SiteInformation, SiteLocation, SiteCategoryResponse,
+ ControlPanelProps, GridOption, AirQualityReportPayload,
+ AirQualityReportResponse, DiurnalData, MonthlyData,
+ DailyMeanData, SatelliteDataPayload, SatelliteDataResponse,
+ Grid, Site
+
+ } from "./types"
+
+
+const API_TOKEN = process.env.NEXT_PUBLIC_API_TOKEN;
+const BASE_URL = process.env.NEXT_PUBLIC_API_URL;
+const PUBLIC_LOCATE_API_URL = process.env.NEXT_PUBLIC_LOCATE_API_URL;
+const PUBLIC_SITE_CATEGORY_API_URL = process.env.NEXT_PUBLIC_SITE_CATEGORY_API_URL;
+const PUBLIC_AIR_QUALITY_REPORT_API_URL_LLM = process.env.NEXT_PUBLIC_AIR_QUALITY_REPORT_API_URL_LLM;
+const PUBLIC_SATELLITE_DATA_API_URL = process.env.NEXT_PUBLIC_SATELLITE_DATA_API_URL;
+const PUBLIC_DEVICE_DATA_API_URL = process.env.NEXT_PUBLIC_DEVICE_DATA_API_URL;
+const PUBLIC_GRID_SUMMARY_API_URL = process.env.NEXT_PUBLIC_GRID_SUMMARY_API_URL;
+
+
+export async function submitLocations(payload: SiteLocatorPayload): Promise<SiteLocatorResponse> {
+ try {
+ if (!PUBLIC_LOCATE_API_URL || !API_TOKEN) {
+ throw new Error('API configuration missing');
+ }
+
+ console.log('Making API request to:', PUBLIC_LOCATE_API_URL);
+ console.log('Request payload:', payload);
+
+ const response = await fetch(`${PUBLIC_LOCATE_API_URL}?token=${API_TOKEN}`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Accept': 'application/json',
+ },
+ body: JSON.stringify(payload),
+ });
+
+ if (!response.ok) {
+ const errorData = await response.text();
+ console.error('API Error Response:', errorData);
+ throw new Error(`API request failed: ${response.status} ${response.statusText}`);
+ }
+
+ const data = await response.json();
+ console.log('API Response data:', data);
+ return data;
+ } catch (error) {
+ console.error('Error submitting locations:', error);
+ throw error;
+ }
+ }
+
+ export async function getSiteCategory(latitude: number, longitude: number): Promise<SiteCategoryResponse> {
+ try {
+ if (!PUBLIC_SITE_CATEGORY_API_URL || !API_TOKEN) {
+ throw new Error('API configuration missing');
+ }
+
+ console.log('Making site category API request for:', { latitude, longitude });
+
+ const response = await fetch(
+ `${PUBLIC_SITE_CATEGORY_API_URL}?latitude=${latitude}&longitude=${longitude}&token=${API_TOKEN}`
+ );
+
+ if (!response.ok) {
+ const errorData = await response.text();
+ console.error('API Error Response:', errorData);
+ throw new Error(`API request failed: ${response.status} ${response.statusText}`);
+ }
+
+ const data = await response.json();
+ console.log('Site category API Response:', data);
+ return data;
+ } catch (error) {
+ console.error('Error getting site category:', error);
+ throw error;
+ }
+ }
+
+ export async function getAirQualityReport(payload: AirQualityReportPayload): Promise<AirQualityReportResponse> {
+ try {
+ const response = await fetch(`${PUBLIC_AIR_QUALITY_REPORT_API_URL_LLM}?token=${API_TOKEN}`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(payload),
+ });
+
+ if (!response.ok) {
+ const errorData = await response.text();
+ console.error('API Error Response:', errorData);
+ throw new Error(`API request failed: ${response.status} ${response.statusText}`);
+ }
+
+ const data = await response.json();
+ console.log('Air Quality Report Response:', data);
+ return data;
+ } catch (error) {
+ console.error('Error getting air quality report:', error);
+ throw error;
+ }
+ }
+
+
+ export async function fetchGrids(): Promise<Grid[]> {
+ const response = await fetch(`${PUBLIC_GRID_SUMMARY_API_URL}`);
+ if (!response.ok) {
+ throw new Error('Failed to fetch grids');
+ }
+ const data = await response.json();
+ return data.grids;
+ }
\ No newline at end of file
diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts
new file mode 100644
index 0000000..5dc78c8
--- /dev/null
+++ b/frontend/src/lib/types.ts
@@ -0,0 +1,146 @@
+export interface Location {
+ lat: number;
+ lng: number;
+ }
+
+ export interface SiteLocatorPayload {
+ polygon: {
+ coordinates: number[][][]; // 3D array for the polygon coordinates
+ };
+ must_have_locations: number[][]; // Array of must-have locations (latitude, longitude)
+ min_distance_km: number; // Minimum distance for placement in kilometers
+ num_sensors: number; // Number of sensors to deploy
+ }
+
+ export interface SiteInformation {
+ category_counts: {
+ [key: string]: number; // Counts of categories
+ };
+ total_sites: number; // Total number of sites
+ }
+
+ export interface SiteLocation {
+ area_name: string; // Name of the area
+ category: string; // Category of the site
+ highway: string | null; // Highway information, if any
+ landuse: string | null; // Land use type
+ latitude: number; // Latitude of the site
+ longitude: number; // Longitude of the site
+ natural: string | null; // Natural feature info, if any
+ }
+
+ export interface SiteLocatorResponse {
+ site_information: SiteInformation; // Information about the sites
+ site_location: SiteLocation[]; // Array of site locations
+ }
+
+ export interface ControlPanelProps {
+ onSubmit: (data: SiteLocatorPayload) => void;
+ polygon: Location[]; // Polygon points defining an area
+ mustHaveLocations: Location[]; // Must-have locations for site placement
+ onMustHaveLocationsChange: (locations: Location[]) => void; // Callback for changes in must-have locations
+ }
+
+ export interface SiteCategoryResponse {
+ site: {
+ OSM_info: string[]; // OpenStreetMap info
+ 'site-category': {
+ area_name: string;
+ category: string;
+ highway: string;
+ landuse: string;
+ latitude: number;
+ longitude: number;
+ natural: string;
+ search_radius: number;
+ waterway: string;
+ };
+ };
+ }
+
+ export interface GridOption {
+ grid_id: string; // Grid identifier
+ grid_name: string; // Name of the grid
+ }
+
+ export interface AirQualityReportPayload {
+ grid_id: string; // Grid identifier
+ start_time: string; // Start time for the report
+ end_time: string; // End time for the report
+ }
+
+ export interface DailyMeanData {
+ date: string; // Date of the data
+ pm10_calibrated_value: number | null; // Calibrated PM10 value
+ pm10_raw_value: number; // Raw PM10 value
+ pm2_5_calibrated_value: number | null; // Calibrated PM2.5 value
+ pm2_5_raw_value: number; // Raw PM2.5 value
+ }
+
+ export interface DiurnalData {
+ hour: number; // Hour of the day
+ pm10_calibrated_value: number; // Calibrated PM10 value
+ pm10_raw_value: number; // Raw PM10 value
+ pm2_5_calibrated_value: number; // Calibrated PM2.5 value
+ pm2_5_raw_value: number; // Raw PM2.5 value
+ }
+
+ export interface MonthlyData {
+ month: number; // Month number
+ year: number; // Year
+ pm10_calibrated_value: number; // Calibrated PM10 value
+ pm10_raw_value: number; // Raw PM10 value
+ pm2_5_calibrated_value: number; // Calibrated PM2.5 value
+ pm2_5_raw_value: number; // Raw PM2.5 value
+ site_latitude: number; // Latitude of the site
+ site_longitude: number; // Longitude of the site
+ site_name: string; // Name of the site
+ }
+
+ export interface AirQualityReportResponse {
+ report: {
+ daily_mean_data: DailyMeanData[]; // Daily mean data for the report
+ diurnal: DiurnalData[]; // Diurnal data for the report
+ monthly_data: MonthlyData[]; // Monthly data for the report
+ report: string; // Textual report
+ };
+ }
+
+ export interface SatelliteDataPayload {
+ latitude: number; // Latitude for satellite data
+ longitude: number; // Longitude for satellite data
+ timestamp: string; // Timestamp for satellite data
+ }
+
+ export interface SatelliteDataResponse {
+ latitude: number; // Latitude
+ longitude: number; // Longitude
+ pm2_5_prediction: number; // PM2.5 prediction value
+ timestamp: string; // Timestamp
+ }
+
+ export interface Grid {
+ _id: string; // Grid ID
+ name: string; // Grid name
+ admin_level: string; // Administrative level of the grid
+ network: string; // Network type
+ long_name: string; // Long name for the grid
+ sites: Site[]; // List of sites in the grid
+ }
+
+ export interface Site {
+ _id: string; // Site ID
+ search_name: string; // Searchable name for the site
+ city: string; // City where the site is located
+ district: string; // District of the site
+ county: string; // County of the site
+ region: string; // Region of the site
+ country: string; // Country of the site
+ name: string; // Site name
+ site_category: {
+ category: string; // Category of the site
+ };
+ groups: string[]; // Groups associated with the site
+ lastActive: string; // Last active timestamp
+ }
+
\ No newline at end of file
diff --git a/frontend/src/ui/input.tsx b/frontend/src/ui/input.tsx
new file mode 100644
index 0000000..68551b9
--- /dev/null
+++ b/frontend/src/ui/input.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+ ({ className, type, ...props }, ref) => {
+ return (
+ <input
+ type={type}
+ className={cn(
+ "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+ className
+ )}
+ ref={ref}
+ {...props}
+ />
+ )
+ }
+)
+Input.displayName = "Input"
+
+export { Input }
diff --git a/frontend/src/ui/popover.tsx b/frontend/src/ui/popover.tsx
new file mode 100644
index 0000000..bbba7e0
--- /dev/null
+++ b/frontend/src/ui/popover.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+ React.ElementRef<typeof PopoverPrimitive.Content>,
+ React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+ <PopoverPrimitive.Portal>
+ <PopoverPrimitive.Content
+ ref={ref}
+ align={align}
+ sideOffset={sideOffset}
+ className={cn(
+ "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+ className
+ )}
+ {...props}
+ />
+ </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }
diff --git a/frontend/src/ui/toast.tsx b/frontend/src/ui/toast.tsx
new file mode 100644
index 0000000..a822477
--- /dev/null
+++ b/frontend/src/ui/toast.tsx
@@ -0,0 +1,127 @@
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+ React.ElementRef<typeof ToastPrimitives.Viewport>,
+ React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+ <ToastPrimitives.Viewport
+ ref={ref}
+ className={cn(
+ "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+ className
+ )}
+ {...props}
+ />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+ "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+ {
+ variants: {
+ variant: {
+ default: "border bg-background text-foreground",
+ destructive:
+ "destructive group border-destructive bg-destructive text-destructive-foreground",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
+const Toast = React.forwardRef<
+ React.ElementRef<typeof ToastPrimitives.Root>,
+ React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+ VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+ return (
+ <ToastPrimitives.Root
+ ref={ref}
+ className={cn(toastVariants({ variant }), className)}
+ {...props}
+ />
+ )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+ React.ElementRef<typeof ToastPrimitives.Action>,
+ React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+ <ToastPrimitives.Action
+ ref={ref}
+ className={cn(
+ "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+ className
+ )}
+ {...props}
+ />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+ React.ElementRef<typeof ToastPrimitives.Close>,
+ React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+ <ToastPrimitives.Close
+ ref={ref}
+ className={cn(
+ "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+ className
+ )}
+ toast-close=""
+ {...props}
+ >
+ <X className="h-4 w-4" />
+ </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+ React.ElementRef<typeof ToastPrimitives.Title>,
+ React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+ <ToastPrimitives.Title
+ ref={ref}
+ className={cn("text-sm font-semibold", className)}
+ {...props}
+ />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+ React.ElementRef<typeof ToastPrimitives.Description>,
+ React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+ <ToastPrimitives.Description
+ ref={ref}
+ className={cn("text-sm opacity-90", className)}
+ {...props}
+ />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+ type ToastProps,
+ type ToastActionElement,
+ ToastProvider,
+ ToastViewport,
+ Toast,
+ ToastTitle,
+ ToastDescription,
+ ToastClose,
+ ToastAction,
+}
diff --git a/frontend/src/ui/use-toast.ts b/frontend/src/ui/use-toast.ts
new file mode 100644
index 0000000..2bf2cf5
--- /dev/null
+++ b/frontend/src/ui/use-toast.ts
@@ -0,0 +1,3 @@
+import { useToast, toast } from "@components/hooks/use-toast";
+
+export { useToast, toast };
From 617208575cf5f271ca14f1557c899e6d75ee2f8f Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Fri, 14 Feb 2025 15:47:36 +0300
Subject: [PATCH 06/55] control
---
frontend/src/components/Controls/ControlPanel.tsx | 13 +++++++++----
1 file changed, 9 insertions(+), 4 deletions(-)
diff --git a/frontend/src/components/Controls/ControlPanel.tsx b/frontend/src/components/Controls/ControlPanel.tsx
index 21255f2..5151e30 100644
--- a/frontend/src/components/Controls/ControlPanel.tsx
+++ b/frontend/src/components/Controls/ControlPanel.tsx
@@ -51,17 +51,22 @@ export function ControlPanel({
const handleSubmit = async () => {
if (!validateInputs()) return;
- const payload = {
+ const payload: any = {
polygon: {
coordinates: [
[...polygon.map((loc) => [loc.lng, loc.lat]), [polygon[0].lng, polygon[0].lat]], // Close the polygon
],
},
must_have_locations: mustHaveLocations.length > 0 ? mustHaveLocations.map((loc) => [loc.lat, loc.lng]) : [],
- min_distance_km: parseFloat(minDistance) || undefined, // Optional field
num_sensors: parseInt(numSensors, 10),
};
+ // Ensure min_distance_km is only included if valid
+ const minDistanceValue = parseFloat(minDistance);
+ if (!isNaN(minDistanceValue)) {
+ payload.min_distance_km = minDistanceValue;
+ }
+
setIsLoading(true);
try {
await onSubmit(payload);
@@ -153,7 +158,7 @@ export function ControlPanel({
/>
</div>
- {/*Add Number of Sensors */}
+ {/* Number of Sensors */}
<div className="space-y-2">
<label className="text-sm font-medium">Number of Sensors (Required)</label>
<Input
@@ -184,4 +189,4 @@ export function ControlPanel({
</Button>
</div>
);
-}
\ No newline at end of file
+}
From f5b5fab833f79c25b4883d464d868eaf6c466e1c Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Fri, 14 Feb 2025 17:31:30 +0300
Subject: [PATCH 07/55] filesize
---
.../src/components/Controls/FileUpload.tsx | 71 +++++++++++--------
1 file changed, 40 insertions(+), 31 deletions(-)
diff --git a/frontend/src/components/Controls/FileUpload.tsx b/frontend/src/components/Controls/FileUpload.tsx
index 4cdc2e4..dcfd177 100644
--- a/frontend/src/components/Controls/FileUpload.tsx
+++ b/frontend/src/components/Controls/FileUpload.tsx
@@ -1,6 +1,4 @@
-"use client"
-
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
import { Button } from '@/ui/button';
import { Upload } from 'lucide-react';
import Papa from 'papaparse';
@@ -18,36 +16,35 @@ interface FileUploadProps {
export function FileUpload({ onUpload }: FileUploadProps) {
const fileInputRef = useRef<HTMLInputElement>(null);
const { toast } = useToast();
+ const [isLoading, setIsLoading] = useState(false);
+
+ const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
+ const ACCEPTED_FILE_TYPE = 'text/csv';
const normalizeColumnName = (name: string): string =>
name.trim().toLowerCase().replace(/\s+/g, '');
- const latitudeAliases = ['lat', 'latitude'];
- const longitudeAliases = ['lng', 'lon', 'longitude'];
+ const latitudeAliases = new Set(['lat', 'latitude']);
+ const longitudeAliases = new Set(['lng', 'lon', 'longitude']);
- const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
- const file = event.target.files?.[0];
- if (!file) return;
+ const parseCSV = (file: File) => {
+ setIsLoading(true);
Papa.parse(file, {
header: true,
+ skipEmptyLines: true,
complete: (results) => {
+ setIsLoading(false);
try {
const headers = results.meta.fields || [];
- if (!headers.length) {
- throw new Error('CSV file has no headers.');
- }
+ if (!headers.length) throw new Error('CSV file has no headers.');
const normalizedHeaders = headers.map(normalizeColumnName);
- const latIndex = normalizedHeaders.findIndex((header) =>
- latitudeAliases.includes(header)
- );
- const lngIndex = normalizedHeaders.findIndex((header) =>
- longitudeAliases.includes(header)
- );
+ const latIndex = normalizedHeaders.findIndex((h) => latitudeAliases.has(h));
+ const lngIndex = normalizedHeaders.findIndex((h) => longitudeAliases.has(h));
if (latIndex === -1 || lngIndex === -1) {
- throw new Error('Could not find latitude and/or longitude columns in the CSV file.');
+ throw new Error('Missing latitude and/or longitude columns.');
}
const locations = results.data
@@ -55,36 +52,46 @@ export function FileUpload({ onUpload }: FileUploadProps) {
lat: parseFloat(row[headers[latIndex]]),
lng: parseFloat(row[headers[lngIndex]]),
}))
- .filter((loc: Location) => !isNaN(loc.lat) && !isNaN(loc.lng));
+ .filter(({ lat, lng }) => !isNaN(lat) && !isNaN(lng));
if (locations.length === 0) {
throw new Error('No valid latitude/longitude pairs found.');
}
onUpload(locations);
-
- toast({
- title: 'Success',
- description: `Imported ${locations.length} locations from CSV`,
- });
+ toast({ title: 'Success', description: `Imported ${locations.length} locations.` });
} catch (error) {
toast({
title: 'Error',
- description: error instanceof Error ? error.message : 'Failed to parse CSV file.',
+ description: error instanceof Error ? error.message : 'Failed to parse CSV.',
variant: 'destructive',
});
}
},
error: () => {
- toast({
- title: 'Error',
- description: 'Failed to read CSV file',
- variant: 'destructive',
- });
+ setIsLoading(false);
+ toast({ title: 'Error', description: 'Failed to read CSV file.', variant: 'destructive' });
},
});
};
+ const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+ const file = event.target.files?.[0];
+ if (!file) return;
+
+ if (file.size > MAX_FILE_SIZE) {
+ toast({ title: 'Error', description: 'File size exceeds 5MB limit.', variant: 'destructive' });
+ return;
+ }
+
+ if (file.type !== ACCEPTED_FILE_TYPE) {
+ toast({ title: 'Error', description: 'Please upload a valid CSV file.', variant: 'destructive' });
+ return;
+ }
+
+ parseCSV(file);
+ };
+
return (
<div>
<input
@@ -98,9 +105,11 @@ export function FileUpload({ onUpload }: FileUploadProps) {
variant="outline"
className="w-full"
onClick={() => fileInputRef.current?.click()}
+ disabled={isLoading}
+ aria-label="Upload CSV file"
>
<Upload className="mr-2 h-4 w-4" />
- Upload CSV
+ {isLoading ? 'Uploading...' : 'Upload CSV'}
</Button>
</div>
);
From f57818abc31bd3011ad38473c6164d9582915331 Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Fri, 14 Feb 2025 17:44:30 +0300
Subject: [PATCH 08/55] api
---
frontend/src/lib/api.ts | 26 +++++++++++++++++++++-----
1 file changed, 21 insertions(+), 5 deletions(-)
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index 7fe15f0..a7d5d14 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -19,6 +19,17 @@ const PUBLIC_SATELLITE_DATA_API_URL = process.env.NEXT_PUBLIC_SATELLITE_DATA_API
const PUBLIC_DEVICE_DATA_API_URL = process.env.NEXT_PUBLIC_DEVICE_DATA_API_URL;
const PUBLIC_GRID_SUMMARY_API_URL = process.env.NEXT_PUBLIC_GRID_SUMMARY_API_URL;
+const requiredEnvVars = {
+ API_TOKEN: process.env.NEXT_PUBLIC_API_TOKEN,
+ BASE_URL: process.env.NEXT_PUBLIC_API_URL,
+ LOCATE_API_URL: process.env.NEXT_PUBLIC_LOCATE_API_URL,
+ // ... add other required variables as needed
+};
+
+Object.entries(requiredEnvVars).forEach(([key, value]) => {
+ if (!value) throw new Error(`Missing required environment variable: ${key}`);
+});
+
export async function submitLocations(payload: SiteLocatorPayload): Promise<SiteLocatorResponse> {
try {
@@ -107,10 +118,15 @@ export async function submitLocations(payload: SiteLocatorPayload): Promise<Site
export async function fetchGrids(): Promise<Grid[]> {
- const response = await fetch(`${PUBLIC_GRID_SUMMARY_API_URL}`);
- if (!response.ok) {
- throw new Error('Failed to fetch grids');
+ try {
+ const response = await fetch(`${PUBLIC_GRID_SUMMARY_API_URL}?token=${API_TOKEN}`);
+ if (!response.ok) {
+ throw new Error(`Failed to fetch grids: ${response.status} ${response.statusText}`);
+ }
+ const data = await response.json();
+ return data.grids;
+ } catch (error) {
+ console.error('Error fetching grids:', error);
+ throw new Error('Failed to fetch grids: ' + (error instanceof Error ? error.message : 'Unknown error'));
}
- const data = await response.json();
- return data.grids;
}
\ No newline at end of file
From c20d4efcc1fd0e171d2d36ea26548591e00a9c76 Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Fri, 14 Feb 2025 18:29:19 +0300
Subject: [PATCH 09/55] aps
---
frontend/src/app/locate/page.tsx | 51 ++++++++++++++++++++++----------
1 file changed, 35 insertions(+), 16 deletions(-)
diff --git a/frontend/src/app/locate/page.tsx b/frontend/src/app/locate/page.tsx
index 7c14eb3..118b918 100644
--- a/frontend/src/app/locate/page.tsx
+++ b/frontend/src/app/locate/page.tsx
@@ -1,7 +1,7 @@
-"use client"
+'use client'; // Add this at the top of the file
import { useState } from 'react';
-import { MapComponent } from '@components/map/MapComponent';
+import { MapComponent } from '@/components/map/MapComponent';
import { ControlPanel } from '@/components/Controls/ControlPanel';
import { Location, SiteLocatorPayload } from '@/lib/types';
import { submitLocations } from '@/lib/api';
@@ -108,7 +108,7 @@ export default function Index() {
return (
<div className="flex flex-col h-screen">
<Navigation />
- <div className="flex-1 mt-16">
+ <div className="relative flex-1">
<MapComponent
polygon={polygon}
mustHaveLocations={mustHaveLocations}
@@ -116,24 +116,43 @@ export default function Index() {
onPolygonChange={setPolygon}
onLocationClick={handleLocationClick}
/>
- <ControlPanel
- onSubmit={handleSubmit}
- polygon={polygon}
- mustHaveLocations={mustHaveLocations}
- onMustHaveLocationsChange={setMustHaveLocations}
- onBoundaryFound={setPolygon}
- />
- <div className="absolute bottom-4 right-4 flex gap-2">
- <Button onClick={handleExportCSV} className="flex items-center gap-2 shadow-lg">
- <Download className="h-4 w-4" />
+
+ {/* Control Panel */}
+ <div className="absolute right-4 top-4 z-[1000]">
+ <ControlPanel
+ onSubmit={handleSubmit}
+ polygon={polygon}
+ mustHaveLocations={mustHaveLocations}
+ onMustHaveLocationsChange={setMustHaveLocations}
+ onBoundaryFound={setPolygon}
+ />
+ </div>
+
+ {/* Action Buttons */}
+ <div className="absolute bottom-4 right-4 z-[1000] flex gap-2">
+ <Button onClick={handleExportCSV} className="bg-blue-600 hover:bg-blue-700 text-white">
+ <Download className="h-4 w-4 mr-2" />
Export CSV
</Button>
- <Button onClick={handleSaveMap} className="flex items-center gap-2 shadow-lg">
- <Camera className="h-4 w-4" />
+ <Button onClick={handleSaveMap} className="bg-blue-600 hover:bg-blue-700 text-white">
+ <Camera className="h-4 w-4 mr-2" />
Save Map
</Button>
</div>
+
+ {/* Draw Polygon Button */}
+ <div className="absolute bottom-4 right-1/2 transform translate-x-1/2 z-[1000]">
+ <Button
+ className="bg-blue-600 hover:bg-blue-700 text-white"
+ onClick={() => {
+ /* Toggle drawing mode */
+ }}
+ >
+ Draw Polygon
+ </Button>
+ </div>
</div>
</div>
- );
+ )
}
+
From 04166704a5c6cceca6afdfec6739598b9f6f26c0 Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Sat, 15 Feb 2025 13:58:30 +0300
Subject: [PATCH 10/55] about
---
frontend/src/components/navigation/navigation.tsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/frontend/src/components/navigation/navigation.tsx b/frontend/src/components/navigation/navigation.tsx
index 42169aa..6b27429 100644
--- a/frontend/src/components/navigation/navigation.tsx
+++ b/frontend/src/components/navigation/navigation.tsx
@@ -6,11 +6,11 @@ import { usePathname } from "next/navigation"
import { cn } from "@/lib/utils"
const navItems = [
- { name: "Home", href: "/" },
- { name: "About", href: "/about" },
+ { name: "Home", href: "/" },
{ name: "Locate", href: "/locate" },
{ name: "Categorize", href: "/categorize" },
{ name: "Reports", href: "/reports" },
+ { name: "About", href: "/about" },
]
export default function Navigation({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
From 0ac26a75bbedfbc21e6a13bc5ded333c944daa6a Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Sat, 15 Feb 2025 14:25:41 +0300
Subject: [PATCH 11/55] json package
---
frontend/package-lock.json | 11 ++++++++++-
frontend/package.json | 1 +
2 files changed, 11 insertions(+), 1 deletion(-)
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index a8cb8f2..dd85e03 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -18,6 +18,7 @@
"date-fns": "^4.1.0",
"html2canvas": "^1.4.1",
"leaflet": "^1.9.4",
+ "leaflet-draw": "^1.0.4",
"leaflet-geosearch": "^4.0.0",
"lucide-react": "^0.475.0",
"next": "15.0.2",
@@ -4493,7 +4494,14 @@
"node_modules/leaflet": {
"version": "1.9.4",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
- "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
+ "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+ "license": "BSD-2-Clause"
+ },
+ "node_modules/leaflet-draw": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/leaflet-draw/-/leaflet-draw-1.0.4.tgz",
+ "integrity": "sha512-rsQ6saQO5ST5Aj6XRFylr5zvarWgzWnrg46zQ1MEOEIHsppdC/8hnN8qMoFvACsPvTioAuysya/TVtog15tyAQ==",
+ "license": "MIT"
},
"node_modules/leaflet-geosearch": {
"version": "4.0.0",
@@ -5521,6 +5529,7 @@
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz",
"integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==",
+ "license": "Hippocratic-2.1",
"dependencies": {
"@react-leaflet/core": "^2.1.0"
},
diff --git a/frontend/package.json b/frontend/package.json
index 8e03eed..4a8fc8e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -19,6 +19,7 @@
"date-fns": "^4.1.0",
"html2canvas": "^1.4.1",
"leaflet": "^1.9.4",
+ "leaflet-draw": "^1.0.4",
"leaflet-geosearch": "^4.0.0",
"lucide-react": "^0.475.0",
"next": "15.0.2",
From 5a2c2de95f991bcb93e5783027df309d62483aa1 Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Sat, 15 Feb 2025 15:05:18 +0300
Subject: [PATCH 12/55] drawpolgo
---
frontend/src/app/locate/page.tsx | 163 +++++++++---------
.../src/components/Controls/ControlPanel.tsx | 2 +
frontend/src/components/map/MapComponent.tsx | 134 +++++++-------
3 files changed, 149 insertions(+), 150 deletions(-)
diff --git a/frontend/src/app/locate/page.tsx b/frontend/src/app/locate/page.tsx
index 118b918..8d6d730 100644
--- a/frontend/src/app/locate/page.tsx
+++ b/frontend/src/app/locate/page.tsx
@@ -1,109 +1,111 @@
-'use client'; // Add this at the top of the file
-
-import { useState } from 'react';
-import { MapComponent } from '@/components/map/MapComponent';
-import { ControlPanel } from '@/components/Controls/ControlPanel';
-import { Location, SiteLocatorPayload } from '@/lib/types';
-import { submitLocations } from '@/lib/api';
-import { useToast } from '@/ui/use-toast';
-import { Button } from '@/ui/button';
-import { Download, Camera } from 'lucide-react';
-import html2canvas from 'html2canvas';
-import Navigation from "@/components/navigation/navigation";
+"use client" // Add this at the top of the file
+
+import { useState } from "react"
+import { MapComponent } from "@/components/map/MapComponent"
+import { ControlPanel } from "@/components/Controls/ControlPanel"
+import type { Location, SiteLocatorPayload } from "@/lib/types"
+import { submitLocations } from "@/lib/api"
+import { useToast } from "@/ui/use-toast"
+import { Button } from "@/ui/button"
+import { Download, Camera } from "lucide-react"
+import html2canvas from "html2canvas"
+import Navigation from "@/components/navigation/navigation"
export default function Index() {
- const [polygon, setPolygon] = useState<Location[]>([]);
- const [mustHaveLocations, setMustHaveLocations] = useState<Location[]>([]);
- const [suggestedLocations, setSuggestedLocations] = useState<Location[]>([]);
- const { toast } = useToast();
+ const [polygon, setPolygon] = useState<Location[]>([])
+ const [mustHaveLocations, setMustHaveLocations] = useState<Location[]>([])
+ const [suggestedLocations, setSuggestedLocations] = useState<Location[]>([])
+ const { toast } = useToast()
+ const [isDrawing, setIsDrawing] = useState(false)
const handleSubmit = async (payload: SiteLocatorPayload) => {
try {
- console.log('Submitting payload:', payload); // Debug log for request
- const response = await submitLocations(payload);
- console.log('API Response:', response); // Debug log for response
+ console.log("Submitting payload:", payload) // Debug log for request
+ const response = await submitLocations(payload)
+ console.log("API Response:", response) // Debug log for response
if (!response.site_location || !Array.isArray(response.site_location)) {
- throw new Error('Invalid response format from API');
+ throw new Error("Invalid response format from API")
}
-
- const locations = response.site_location.map(site => ({
+
+ const locations = response.site_location.map((site) => ({
lat: site.latitude,
lng: site.longitude,
- }));
-
- console.log('Processed locations to plot:', locations); // Debug log for processed locations
- setSuggestedLocations(locations);
-
+ }))
+
+ console.log("Processed locations to plot:", locations) // Debug log for processed locations
+ setSuggestedLocations(locations)
+
toast({
- title: 'Success',
+ title: "Success",
description: `Found ${locations.length} suggested locations`,
- });
+ })
} catch (error) {
- console.error('Submit error:', error);
+ console.error("Submit error:", error)
toast({
- title: 'Error',
- description: error instanceof Error ? error.message : 'Failed to submit locations',
- variant: 'destructive',
- });
+ title: "Error",
+ description: error instanceof Error ? error.message : "Failed to submit locations",
+ variant: "destructive",
+ })
}
- };
+ }
const handleLocationClick = (location: Location) => {
- setMustHaveLocations([...mustHaveLocations, location]);
- };
+ setMustHaveLocations([...mustHaveLocations, location])
+ }
const handleExportCSV = () => {
if (suggestedLocations.length === 0) {
toast({
- title: 'No Data',
- description: 'No locations available to export',
- variant: 'destructive',
- });
- return;
+ title: "No Data",
+ description: "No locations available to export",
+ variant: "destructive",
+ })
+ return
}
- const headers = ['Type', 'Latitude', 'Longitude', 'Area Name', 'Category'];
+ const headers = ["Type", "Latitude", "Longitude", "Area Name", "Category"]
const rows = [
- ...mustHaveLocations.map(loc => ['Must Have', loc.lat, loc.lng, '', '']),
- ...suggestedLocations.map(loc => ['Suggested', loc.lat, loc.lng, '', '']),
- ];
-
- const csvContent = [
- headers.join(','),
- ...rows.map(row => row.join(',')),
- ].join('\n');
-
- const blob = new Blob([csvContent], { type: 'text/csv' });
- const url = window.URL.createObjectURL(blob);
- const a = document.createElement('a');
- a.href = url;
- a.download = 'locations.csv';
- a.click();
- window.URL.revokeObjectURL(url);
-
+ ...mustHaveLocations.map((loc) => ["Must Have", loc.lat, loc.lng, "", ""]),
+ ...suggestedLocations.map((loc) => ["Suggested", loc.lat, loc.lng, "", ""]),
+ ]
+
+ const csvContent = [headers.join(","), ...rows.map((row) => row.join(","))].join("\n")
+
+ const blob = new Blob([csvContent], { type: "text/csv" })
+ const url = window.URL.createObjectURL(blob)
+ const a = document.createElement("a")
+ a.href = url
+ a.download = "locations.csv"
+ a.click()
+ window.URL.revokeObjectURL(url)
+
toast({
- title: 'Success',
- description: 'CSV file downloaded successfully',
- });
- };
+ title: "Success",
+ description: "CSV file downloaded successfully",
+ })
+ }
const handleSaveMap = async () => {
- const mapElement = document.querySelector('.leaflet-container');
+ const mapElement = document.querySelector(".leaflet-container")
if (mapElement) {
- const canvas = await html2canvas(mapElement as HTMLElement);
- const url = canvas.toDataURL('image/png');
- const a = document.createElement('a');
- a.href = url;
- a.download = 'map.png';
- a.click();
-
+ const canvas = await html2canvas(mapElement as HTMLElement)
+ const url = canvas.toDataURL("image/png")
+ const a = document.createElement("a")
+ a.href = url
+ a.download = "map.png"
+ a.click()
+
toast({
- title: 'Success',
- description: 'Map image saved successfully',
- });
+ title: "Success",
+ description: "Map image saved successfully",
+ })
}
- };
+ }
+
+ const toggleDrawing = () => {
+ setIsDrawing(!isDrawing)
+ }
return (
<div className="flex flex-col h-screen">
@@ -115,6 +117,7 @@ export default function Index() {
suggestedLocations={suggestedLocations}
onPolygonChange={setPolygon}
onLocationClick={handleLocationClick}
+ isDrawing={isDrawing}
/>
{/* Control Panel */}
@@ -143,12 +146,10 @@ export default function Index() {
{/* Draw Polygon Button */}
<div className="absolute bottom-4 right-1/2 transform translate-x-1/2 z-[1000]">
<Button
- className="bg-blue-600 hover:bg-blue-700 text-white"
- onClick={() => {
- /* Toggle drawing mode */
- }}
+ className={`${isDrawing ? "bg-red-600 hover:bg-red-700" : "bg-blue-600 hover:bg-blue-700"} text-white`}
+ onClick={toggleDrawing}
>
- Draw Polygon
+ {isDrawing ? "Finish Drawing" : "Draw Polygon"}
</Button>
</div>
</div>
diff --git a/frontend/src/components/Controls/ControlPanel.tsx b/frontend/src/components/Controls/ControlPanel.tsx
index 5151e30..52e87eb 100644
--- a/frontend/src/components/Controls/ControlPanel.tsx
+++ b/frontend/src/components/Controls/ControlPanel.tsx
@@ -1,3 +1,5 @@
+"use client"
+
import { useState } from 'react';
import { Button } from '@/ui/button';
import { Input } from '@/ui/input';
diff --git a/frontend/src/components/map/MapComponent.tsx b/frontend/src/components/map/MapComponent.tsx
index 34e5296..c326f09 100644
--- a/frontend/src/components/map/MapComponent.tsx
+++ b/frontend/src/components/map/MapComponent.tsx
@@ -1,78 +1,80 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-import { MapContainer, TileLayer, useMap, Marker, Polygon } from 'react-leaflet';
-import L from 'leaflet';
-import 'leaflet/dist/leaflet.css';
-import { Location } from '@/lib/types';
-import { NavigationControls } from './NavigationControls';
-import { Button } from '@/ui/button';
-import { Map as MapIcon } from 'lucide-react';
-import { Popover, PopoverContent, PopoverTrigger } from "@/ui/popover";
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import { MapContainer, TileLayer, useMap, Marker, Polygon } from "react-leaflet"
+import L from "leaflet"
+import "leaflet/dist/leaflet.css"
+import type { Location } from "@/lib/types"
+import { NavigationControls } from "./NavigationControls"
+import { Button } from "@/ui/button"
+import { MapIcon } from "lucide-react"
+import { Popover, PopoverContent, PopoverTrigger } from "@/ui/popover"
// Fix for default markers
-delete (L.Icon.Default.prototype as any)._getIconUrl;
+delete (L.Icon.Default.prototype as any)._getIconUrl
// Create custom icons for different marker types
const blueIcon = new L.Icon({
- iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.png',
+ iconUrl: "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.png",
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
- shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
+ shadowUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png",
shadowSize: [41, 41],
-});
+})
const greenIcon = new L.Icon({
- iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
+ iconUrl: "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png",
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
- shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
+ shadowUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png",
shadowSize: [41, 41],
-});
+})
const mapStyles = {
streets: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
satellite: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
-};
+}
-type MapStyle = keyof typeof mapStyles;
+type MapStyle = keyof typeof mapStyles
interface MapComponentProps {
- polygon: Location[];
- mustHaveLocations: Location[];
- suggestedLocations: Location[];
- onPolygonChange: (locations: Location[]) => void;
- onLocationClick: (location: Location) => void;
+ polygon: Location[]
+ mustHaveLocations: Location[]
+ suggestedLocations: Location[]
+ onPolygonChange: (locations: Location[]) => void
+ onLocationClick: (location: Location) => void
+ isDrawing: boolean
}
// Add map instance to window for global access
declare global {
interface Window {
- map: L.Map;
+ map: L.Map
}
}
function MapStyleControl() {
- const map = useMap();
- const [currentStyle, setCurrentStyle] = useState<MapStyle>('streets');
+ const map = useMap()
+ const [currentStyle, setCurrentStyle] = useState<MapStyle>("streets")
const changeStyle = (style: MapStyle) => {
- setCurrentStyle(style);
+ setCurrentStyle(style)
// Find and remove the existing tile layer
map.eachLayer((layer) => {
if (layer instanceof L.TileLayer) {
- map.removeLayer(layer);
+ map.removeLayer(layer)
}
- });
+ })
// Add the new tile layer
L.tileLayer(mapStyles[style], {
- attribution: style === 'satellite'
- ? '© <a href="https://www.arcgis.com/">ESRI</a>'
- : '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
- }).addTo(map);
- };
+ attribution:
+ style === "satellite"
+ ? '© <a href="https://www.arcgis.com/">ESRI</a>'
+ : '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+ }).addTo(map)
+ }
return (
<div className="absolute top-4 right-4 z-[1000]">
@@ -96,48 +98,48 @@ function MapStyleControl() {
</PopoverContent>
</Popover>
</div>
- );
+ )
}
function MapController() {
- const map = useMap();
+ const map = useMap()
useEffect(() => {
- window.map = map;
- }, [map]);
- return null;
+ window.map = map
+ }, [map])
+ return null
}
function DrawControl({
onPolygonChange,
}: {
- onPolygonChange: (locations: Location[]) => void;
+ onPolygonChange: (locations: Location[]) => void
}) {
- const map = useMap();
- const drawingRef = useRef<L.Polyline>();
- const locationsRef = useRef<Location[]>([]);
+ const map = useMap()
+ const drawingRef = useRef<L.Polyline>()
+ const locationsRef = useRef<Location[]>([])
useEffect(() => {
const handleClick = (e: L.LeafletMouseEvent) => {
- const newLocation = { lat: e.latlng.lat, lng: e.latlng.lng };
- locationsRef.current = [...locationsRef.current, newLocation];
+ const newLocation = { lat: e.latlng.lat, lng: e.latlng.lng }
+ locationsRef.current = [...locationsRef.current, newLocation]
if (!drawingRef.current) {
- drawingRef.current = L.polyline([], { color: 'blue' }).addTo(map);
+ drawingRef.current = L.polyline([], { color: "blue" }).addTo(map)
}
- drawingRef.current.setLatLngs(locationsRef.current);
- onPolygonChange(locationsRef.current);
- };
+ drawingRef.current.setLatLngs(locationsRef.current)
+ onPolygonChange(locationsRef.current)
+ }
- map.on('click', handleClick);
+ map.on("click", handleClick)
return () => {
- map.off('click', handleClick);
- drawingRef.current?.remove();
- };
- }, [map, onPolygonChange]);
+ map.off("click", handleClick)
+ drawingRef.current?.remove()
+ }
+ }, [map, onPolygonChange])
- return null;
+ return null
}
export function MapComponent({
@@ -146,9 +148,8 @@ export function MapComponent({
suggestedLocations,
onPolygonChange,
onLocationClick,
+ isDrawing,
}: MapComponentProps) {
- const [isDrawing, setIsDrawing] = useState(false);
-
return (
<div className="relative pr-[420px]">
<MapContainer
@@ -166,10 +167,7 @@ export function MapComponent({
{isDrawing && <DrawControl onPolygonChange={onPolygonChange} />}
{polygon.length > 2 && (
- <Polygon
- positions={polygon.map((loc) => [loc.lat, loc.lng])}
- pathOptions={{ color: 'blue' }}
- />
+ <Polygon positions={polygon.map((loc) => [loc.lat, loc.lng])} pathOptions={{ color: "blue" }} />
)}
{mustHaveLocations.map((location, index) => (
@@ -188,11 +186,9 @@ export function MapComponent({
/>
))}
</MapContainer>
-
- <NavigationControls
- isDrawing={isDrawing}
- onDrawingToggle={() => setIsDrawing(!isDrawing)}
- />
+
+ <NavigationControls isDrawing={isDrawing} onDrawingToggle={() => {}} />
</div>
- );
+ )
}
+
From 339007ed1d51867b5d440f8909f9d107c3321d85 Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Sat, 15 Feb 2025 15:10:53 +0300
Subject: [PATCH 13/55] loading
---
frontend/src/components/Controls/ControlPanel.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/frontend/src/components/Controls/ControlPanel.tsx b/frontend/src/components/Controls/ControlPanel.tsx
index 52e87eb..2bcbf9b 100644
--- a/frontend/src/components/Controls/ControlPanel.tsx
+++ b/frontend/src/components/Controls/ControlPanel.tsx
@@ -175,7 +175,7 @@ export function ControlPanel({
{/* Submit Button */}
<Button
- className="w-full"
+ className="w-full bg-blue-600 hover:bg-blue-700 text-white"
onClick={handleSubmit}
disabled={isLoading}
aria-label="Submit"
From 061fd1fbc62149060eb6022ae24e27195dade506 Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Sat, 15 Feb 2025 16:44:46 +0300
Subject: [PATCH 14/55] loading
---
frontend/src/app/locate/page.tsx | 48 +++---
.../src/components/Controls/ControlPanel.tsx | 137 +++++++++---------
.../src/components/Controls/FileUpload.tsx | 58 +++-----
frontend/src/lib/types.ts | 7 +-
4 files changed, 122 insertions(+), 128 deletions(-)
diff --git a/frontend/src/app/locate/page.tsx b/frontend/src/app/locate/page.tsx
index 8d6d730..f905fd0 100644
--- a/frontend/src/app/locate/page.tsx
+++ b/frontend/src/app/locate/page.tsx
@@ -1,4 +1,4 @@
-"use client" // Add this at the top of the file
+"use client"
import { useState } from "react"
import { MapComponent } from "@/components/map/MapComponent"
@@ -55,35 +55,44 @@ export default function Index() {
}
const handleExportCSV = () => {
- if (suggestedLocations.length === 0) {
+ if (suggestedLocations.length === 0 && mustHaveLocations.length === 0) {
toast({
title: "No Data",
description: "No locations available to export",
variant: "destructive",
- })
- return
+ });
+ return;
}
- const headers = ["Type", "Latitude", "Longitude", "Area Name", "Category"]
- const rows = [
- ...mustHaveLocations.map((loc) => ["Must Have", loc.lat, loc.lng, "", ""]),
- ...suggestedLocations.map((loc) => ["Suggested", loc.lat, loc.lng, "", ""]),
- ]
-
- const csvContent = [headers.join(","), ...rows.map((row) => row.join(","))].join("\n")
+ const headers = ["Type", "Latitude", "Longitude", "Area Name", "Category"];
+
+ const uniqueLocations = new Set();
+ const formatRow = (type: string, loc: Location) =>
+ `${type},${loc.lat},${loc.lng},,`;
- const blob = new Blob([csvContent], { type: "text/csv" })
- const url = window.URL.createObjectURL(blob)
- const a = document.createElement("a")
- a.href = url
- a.download = "locations.csv"
- a.click()
- window.URL.revokeObjectURL(url)
+ const rows = [
+ ...mustHaveLocations.map((loc) => formatRow("Must Have", loc)),
+ ...suggestedLocations.map((loc) => formatRow("Suggested", loc))
+ ].filter((row) => {
+ if (uniqueLocations.has(row)) return false;
+ uniqueLocations.add(row);
+ return true;
+ });
+
+ const csvContent = [headers.join(","), ...rows].join("\n");
+
+ const blob = new Blob([csvContent], { type: "text/csv" });
+ const url = window.URL.createObjectURL(blob);
+ const a = document.createElement("a");
+ a.href = url;
+ a.download = "locations.csv";
+ a.click();
+ window.URL.revokeObjectURL(url);
toast({
title: "Success",
description: "CSV file downloaded successfully",
- })
+ });
}
const handleSaveMap = async () => {
@@ -156,4 +165,3 @@ export default function Index() {
</div>
)
}
-
diff --git a/frontend/src/components/Controls/ControlPanel.tsx b/frontend/src/components/Controls/ControlPanel.tsx
index 2bcbf9b..be51465 100644
--- a/frontend/src/components/Controls/ControlPanel.tsx
+++ b/frontend/src/components/Controls/ControlPanel.tsx
@@ -1,17 +1,17 @@
"use client"
-import { useState } from 'react';
-import { Button } from '@/ui/button';
-import { Input } from '@/ui/input';
-import { SearchBar } from './SearchBar';
-import { FileUpload } from './FileUpload';
-import { Location, ControlPanelProps } from '@/lib/types';
-import { useToast } from '@/ui/use-toast';
-import { Loader2 } from 'lucide-react';
+import { useState } from "react"
+import { Button } from "@/ui/button"
+import { Input } from "@/ui/input"
+import { SearchBar } from "./SearchBar"
+import { FileUpload } from "./FileUpload"
+import type { Location, ControlPanelProps } from "@/lib/types"
+import { useToast } from "@/ui/use-toast"
+import { Loader2 } from "lucide-react"
// Extend ControlPanelProps to include onBoundaryFound
interface ExtendedControlPanelProps extends ControlPanelProps {
- onBoundaryFound: (boundary: Location[]) => void;
+ onBoundaryFound: (boundary: Location[]) => void
}
export function ControlPanel({
@@ -21,37 +21,37 @@ export function ControlPanel({
onMustHaveLocationsChange,
onBoundaryFound,
}: ExtendedControlPanelProps) {
- const [minDistance, setMinDistance] = useState('0.5'); // Default value for min_distance_km
- const [numSensors, setNumSensors] = useState('5'); // Default value for num_sensors
- const [newLat, setNewLat] = useState('');
- const [newLng, setNewLng] = useState('');
- const [isLoading, setIsLoading] = useState(false);
- const { toast } = useToast();
+ const [minDistance, setMinDistance] = useState("0.5") // Default value for min_distance_km
+ const [numSensors, setNumSensors] = useState("5") // Default value for num_sensors
+ const [newLat, setNewLat] = useState("")
+ const [newLng, setNewLng] = useState("")
+ const [isLoading, setIsLoading] = useState(false)
+ const { toast } = useToast()
// Validation helper function
const validateInputs = () => {
if (polygon.length < 3) {
toast({
- title: 'Error',
- description: 'Please draw a polygon on the map',
- variant: 'destructive',
- });
- return false;
+ title: "Error",
+ description: "Please draw a polygon on the map",
+ variant: "destructive",
+ })
+ return false
}
- if (!numSensors || parseInt(numSensors) < 1) {
+ if (!numSensors || Number.parseInt(numSensors) < 1) {
toast({
- title: 'Error',
- description: 'Please enter a valid number of sensors',
- variant: 'destructive',
- });
- return false;
+ title: "Error",
+ description: "Please enter a valid number of sensors",
+ variant: "destructive",
+ })
+ return false
}
- return true;
- };
+ return true
+ }
// Handle form submission
const handleSubmit = async () => {
- if (!validateInputs()) return;
+ if (!validateInputs()) return
const payload: any = {
polygon: {
@@ -60,58 +60,58 @@ export function ControlPanel({
],
},
must_have_locations: mustHaveLocations.length > 0 ? mustHaveLocations.map((loc) => [loc.lat, loc.lng]) : [],
- num_sensors: parseInt(numSensors, 10),
- };
+ num_sensors: Number.parseInt(numSensors, 10),
+ }
// Ensure min_distance_km is only included if valid
- const minDistanceValue = parseFloat(minDistance);
+ const minDistanceValue = Number.parseFloat(minDistance)
if (!isNaN(minDistanceValue)) {
- payload.min_distance_km = minDistanceValue;
+ payload.min_distance_km = minDistanceValue
}
- setIsLoading(true);
+ setIsLoading(true)
try {
- await onSubmit(payload);
+ await onSubmit(payload)
toast({
- title: 'Success',
- description: 'Locations submitted successfully',
- });
+ title: "Success",
+ description: "Locations submitted successfully",
+ })
} catch (error) {
toast({
- title: 'Error',
- description: 'Failed to submit locations',
- variant: 'destructive',
- });
+ title: "Error",
+ description: "Failed to submit locations",
+ variant: "destructive",
+ })
} finally {
- setIsLoading(false);
+ setIsLoading(false)
}
- };
+ }
// Add a new must-have location
const handleAddLocation = () => {
- const lat = parseFloat(newLat);
- const lng = parseFloat(newLng);
+ const lat = Number.parseFloat(newLat)
+ const lng = Number.parseFloat(newLng)
if (isNaN(lat) || isNaN(lng) || lat < -90 || lat > 90 || lng < -180 || lng > 180) {
toast({
- title: 'Error',
- description: 'Please enter valid latitude (-90 to 90) and longitude (-180 to 180)',
- variant: 'destructive',
- });
- return;
+ title: "Error",
+ description: "Please enter valid latitude (-90 to 90) and longitude (-180 to 180)",
+ variant: "destructive",
+ })
+ return
}
- onMustHaveLocationsChange([...mustHaveLocations, { lat, lng }]);
- setNewLat('');
- setNewLng('');
+ onMustHaveLocationsChange([...mustHaveLocations, { lat, lng }])
+ setNewLat("")
+ setNewLng("")
toast({
- title: 'Success',
- description: 'Location added successfully',
- });
- };
+ title: "Success",
+ description: "Location added successfully",
+ })
+ }
return (
- <div className="control-panel space-y-4 mt-9" style={{ width: '400px' }}>
+ <div className="control-panel space-y-4 mt-9" style={{ width: "400px" }}>
<h2 className="text-lg font-semibold mb-4">Air Quality Site Locator</h2>
{/* Search Bar */}
@@ -121,14 +121,14 @@ export function ControlPanel({
<div className="space-y-2">
<label className="text-sm font-medium">Must-Have Locations (Optional)</label>
<div className="flex gap-2">
- <Input
+ <Input
type="number"
placeholder="Latitude"
value={newLat}
onChange={(e) => setNewLat(e.target.value)}
step="any"
aria-label="Latitude"
- />
+ />
<Input
type="number"
placeholder="Longitude"
@@ -142,9 +142,7 @@ export function ControlPanel({
</Button>
</div>
<FileUpload onUpload={onMustHaveLocationsChange} />
- <div className="text-sm text-muted-foreground">
- {mustHaveLocations.length} locations added
- </div>
+ <div className="text-sm text-muted-foreground">{mustHaveLocations.length} locations added</div>
</div>
{/* Minimum Distance */}
@@ -181,14 +179,15 @@ export function ControlPanel({
aria-label="Submit"
>
{isLoading ? (
- <>
+ <div className="flex items-center justify-center">
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
- Submitting...
- </>
+ <span>Submitting...</span>
+ </div>
) : (
- 'Submit'
+ "Submit"
)}
</Button>
</div>
- );
+ )
}
+
diff --git a/frontend/src/components/Controls/FileUpload.tsx b/frontend/src/components/Controls/FileUpload.tsx
index dcfd177..f84fd18 100644
--- a/frontend/src/components/Controls/FileUpload.tsx
+++ b/frontend/src/components/Controls/FileUpload.tsx
@@ -3,60 +3,50 @@ import { Button } from '@/ui/button';
import { Upload } from 'lucide-react';
import Papa from 'papaparse';
import { useToast } from '@/ui/use-toast';
+import type {Location, FileUploadProps} from "@/lib/types"
-interface Location {
- lat: number;
- lng: number;
-}
+const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
+const ACCEPTED_FILE_TYPE = 'text/csv';
-interface FileUploadProps {
- onUpload: (locations: Location[]) => void;
-}
+const normalizeColumnName = (name: string): string =>
+ name.trim().toLowerCase().replace(/\s+/g, '');
+
+const latitudeAliases = new Set(['lat', 'latitude']);
+const longitudeAliases = new Set(['lng', 'lon', 'longitude']);
export function FileUpload({ onUpload }: FileUploadProps) {
const fileInputRef = useRef<HTMLInputElement>(null);
const { toast } = useToast();
const [isLoading, setIsLoading] = useState(false);
- const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
- const ACCEPTED_FILE_TYPE = 'text/csv';
-
- const normalizeColumnName = (name: string): string =>
- name.trim().toLowerCase().replace(/\s+/g, '');
-
- const latitudeAliases = new Set(['lat', 'latitude']);
- const longitudeAliases = new Set(['lng', 'lon', 'longitude']);
-
const parseCSV = (file: File) => {
setIsLoading(true);
- Papa.parse(file, {
+ Papa.parse<Record<string, string>>(file, {
header: true,
skipEmptyLines: true,
- complete: (results) => {
+ complete: ({ data, meta }) => {
setIsLoading(false);
+
try {
- const headers = results.meta.fields || [];
+ const headers = meta.fields?.map(normalizeColumnName) || [];
if (!headers.length) throw new Error('CSV file has no headers.');
- const normalizedHeaders = headers.map(normalizeColumnName);
- const latIndex = normalizedHeaders.findIndex((h) => latitudeAliases.has(h));
- const lngIndex = normalizedHeaders.findIndex((h) => longitudeAliases.has(h));
+ const latIndex = headers.findIndex((h) => latitudeAliases.has(h));
+ const lngIndex = headers.findIndex((h) => longitudeAliases.has(h));
if (latIndex === -1 || lngIndex === -1) {
throw new Error('Missing latitude and/or longitude columns.');
}
- const locations = results.data
- .map((row: any) => ({
- lat: parseFloat(row[headers[latIndex]]),
- lng: parseFloat(row[headers[lngIndex]]),
+ const locations: Location[] = data
+ .map((row) => ({
+ lat: parseFloat(row[meta.fields![latIndex]] || ''),
+ lng: parseFloat(row[meta.fields![lngIndex]] || ''),
}))
.filter(({ lat, lng }) => !isNaN(lat) && !isNaN(lng));
- if (locations.length === 0) {
- throw new Error('No valid latitude/longitude pairs found.');
- }
+ if (!locations.length) throw new Error('No valid latitude/longitude pairs found.');
onUpload(locations);
toast({ title: 'Success', description: `Imported ${locations.length} locations.` });
@@ -94,16 +84,10 @@ export function FileUpload({ onUpload }: FileUploadProps) {
return (
<div>
- <input
- type="file"
- ref={fileInputRef}
- onChange={handleFileChange}
- accept=".csv"
- className="hidden"
- />
+ <input type="file" ref={fileInputRef} onChange={handleFileChange} accept=".csv" className="hidden" />
<Button
variant="outline"
- className="w-full"
+ className="flex items-center justify-center w-full bg-blue-600 hover:bg-blue-700 text-white"
onClick={() => fileInputRef.current?.click()}
disabled={isLoading}
aria-label="Upload CSV file"
diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts
index 5dc78c8..5a17149 100644
--- a/frontend/src/lib/types.ts
+++ b/frontend/src/lib/types.ts
@@ -2,8 +2,11 @@ export interface Location {
lat: number;
lng: number;
}
+export interface FileUploadProps {
+ onUpload: (locations: Location[]) => void;
+ }
- export interface SiteLocatorPayload {
+export interface SiteLocatorPayload {
polygon: {
coordinates: number[][][]; // 3D array for the polygon coordinates
};
@@ -12,7 +15,7 @@ export interface Location {
num_sensors: number; // Number of sensors to deploy
}
- export interface SiteInformation {
+export interface SiteInformation {
category_counts: {
[key: string]: number; // Counts of categories
};
From 45b474eb37168b368bce6933630008309b2330af Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Sat, 15 Feb 2025 17:57:31 +0300
Subject: [PATCH 15/55] come
---
frontend/package-lock.json | 354 +++++++++++++++++++++++++++++-
frontend/package.json | 1 +
frontend/src/app/locate/page.tsx | 51 +++--
frontend/src/app/reports/page.tsx | 90 ++++++++
frontend/src/ui/card.tsx | 79 +++++++
5 files changed, 545 insertions(+), 30 deletions(-)
create mode 100644 frontend/src/app/reports/page.tsx
create mode 100644 frontend/src/ui/card.tsx
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index dd85e03..361618a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -27,6 +27,7 @@
"react-dom": "^18.3.1",
"react-icons": "^5.3.0",
"react-leaflet": "^4.2.1",
+ "recharts": "^2.15.1",
"tailwind-merge": "^3.0.1"
},
"devDependencies": {
@@ -55,6 +56,18 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/@babel/runtime": {
+ "version": "7.26.9",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.9.tgz",
+ "integrity": "sha512-aA63XwOkcl4xxQa3HjPMqOP6LiK0ZDv3mUPYEFXkpHbaFjtGggE1A61FjFzJnB+p7/oy2gA8E+rcBNl/zC1tMg==",
+ "license": "MIT",
+ "dependencies": {
+ "regenerator-runtime": "^0.14.0"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
"node_modules/@emnapi/runtime": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.3.1.tgz",
@@ -1392,6 +1405,69 @@
"tslib": "^2.4.0"
}
},
+ "node_modules/@types/d3-array": {
+ "version": "3.2.1",
+ "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
+ "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==",
+ "license": "MIT"
+ },
+ "node_modules/@types/d3-color": {
+ "version": "3.1.3",
+ "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+ "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+ "license": "MIT"
+ },
+ "node_modules/@types/d3-ease": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+ "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+ "license": "MIT"
+ },
+ "node_modules/@types/d3-interpolate": {
+ "version": "3.0.4",
+ "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+ "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+ "license": "MIT",
+ "dependencies": {
+ "@types/d3-color": "*"
+ }
+ },
+ "node_modules/@types/d3-path": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+ "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+ "license": "MIT"
+ },
+ "node_modules/@types/d3-scale": {
+ "version": "4.0.9",
+ "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+ "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+ "license": "MIT",
+ "dependencies": {
+ "@types/d3-time": "*"
+ }
+ },
+ "node_modules/@types/d3-shape": {
+ "version": "3.1.7",
+ "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz",
+ "integrity": "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==",
+ "license": "MIT",
+ "dependencies": {
+ "@types/d3-path": "*"
+ }
+ },
+ "node_modules/@types/d3-time": {
+ "version": "3.0.4",
+ "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+ "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+ "license": "MIT"
+ },
+ "node_modules/@types/d3-timer": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+ "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+ "license": "MIT"
+ },
"node_modules/@types/geojson": {
"version": "7946.0.14",
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz",
@@ -2418,8 +2494,128 @@
"node_modules/csstype": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
- "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
- "devOptional": true
+ "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+ },
+ "node_modules/d3-array": {
+ "version": "3.2.4",
+ "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+ "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+ "license": "ISC",
+ "dependencies": {
+ "internmap": "1 - 2"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-color": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+ "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+ "license": "ISC",
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-ease": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+ "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+ "license": "BSD-3-Clause",
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-format": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+ "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+ "license": "ISC",
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-interpolate": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+ "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+ "license": "ISC",
+ "dependencies": {
+ "d3-color": "1 - 3"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-path": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+ "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+ "license": "ISC",
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-scale": {
+ "version": "4.0.2",
+ "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+ "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+ "license": "ISC",
+ "dependencies": {
+ "d3-array": "2.10.0 - 3",
+ "d3-format": "1 - 3",
+ "d3-interpolate": "1.2.0 - 3",
+ "d3-time": "2.1.1 - 3",
+ "d3-time-format": "2 - 4"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-shape": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+ "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+ "license": "ISC",
+ "dependencies": {
+ "d3-path": "^3.1.0"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-time": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+ "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+ "license": "ISC",
+ "dependencies": {
+ "d3-array": "2 - 3"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-time-format": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+ "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+ "license": "ISC",
+ "dependencies": {
+ "d3-time": "1 - 3"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-timer": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+ "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+ "license": "ISC",
+ "engines": {
+ "node": ">=12"
+ }
},
"node_modules/damerau-levenshtein": {
"version": "1.0.8",
@@ -2513,6 +2709,12 @@
}
}
},
+ "node_modules/decimal.js-light": {
+ "version": "2.5.1",
+ "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+ "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+ "license": "MIT"
+ },
"node_modules/deep-is": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -2612,6 +2814,16 @@
"node": ">=6.0.0"
}
},
+ "node_modules/dom-helpers": {
+ "version": "5.2.1",
+ "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+ "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+ "license": "MIT",
+ "dependencies": {
+ "@babel/runtime": "^7.8.7",
+ "csstype": "^3.0.2"
+ }
+ },
"node_modules/eastasianwidth": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -3260,6 +3472,12 @@
"node": ">=0.10.0"
}
},
+ "node_modules/eventemitter3": {
+ "version": "4.0.7",
+ "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+ "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+ "license": "MIT"
+ },
"node_modules/execa": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/execa/-/execa-7.2.0.tgz",
@@ -3295,6 +3513,15 @@
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
"dev": true
},
+ "node_modules/fast-equals": {
+ "version": "5.2.2",
+ "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.2.2.tgz",
+ "integrity": "sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=6.0.0"
+ }
+ },
"node_modules/fast-glob": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
@@ -3909,6 +4136,15 @@
"node": ">= 0.4"
}
},
+ "node_modules/internmap": {
+ "version": "2.0.3",
+ "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+ "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+ "license": "ISC",
+ "engines": {
+ "node": ">=12"
+ }
+ },
"node_modules/is-array-buffer": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
@@ -4555,6 +4791,12 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/lodash": {
+ "version": "4.17.21",
+ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+ "license": "MIT"
+ },
"node_modules/lodash.merge": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -4901,7 +5143,6 @@
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
- "dev": true,
"engines": {
"node": ">=0.10.0"
}
@@ -5447,7 +5688,6 @@
"version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
- "dev": true,
"dependencies": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
@@ -5522,8 +5762,7 @@
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
- "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
- "dev": true
+ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"node_modules/react-leaflet": {
"version": "4.2.1",
@@ -5586,6 +5825,21 @@
}
}
},
+ "node_modules/react-smooth": {
+ "version": "4.0.4",
+ "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
+ "integrity": "sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==",
+ "license": "MIT",
+ "dependencies": {
+ "fast-equals": "^5.0.1",
+ "prop-types": "^15.8.1",
+ "react-transition-group": "^4.4.5"
+ },
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+ }
+ },
"node_modules/react-style-singleton": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
@@ -5608,6 +5862,22 @@
}
}
},
+ "node_modules/react-transition-group": {
+ "version": "4.4.5",
+ "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+ "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+ "license": "BSD-3-Clause",
+ "dependencies": {
+ "@babel/runtime": "^7.5.5",
+ "dom-helpers": "^5.0.1",
+ "loose-envify": "^1.4.0",
+ "prop-types": "^15.6.2"
+ },
+ "peerDependencies": {
+ "react": ">=16.6.0",
+ "react-dom": ">=16.6.0"
+ }
+ },
"node_modules/read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -5643,6 +5913,44 @@
"node": ">=8.10.0"
}
},
+ "node_modules/recharts": {
+ "version": "2.15.1",
+ "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.1.tgz",
+ "integrity": "sha512-v8PUTUlyiDe56qUj82w/EDVuzEFXwEHp9/xOowGAZwfLjB9uAy3GllQVIYMWF6nU+qibx85WF75zD7AjqoT54Q==",
+ "license": "MIT",
+ "dependencies": {
+ "clsx": "^2.0.0",
+ "eventemitter3": "^4.0.1",
+ "lodash": "^4.17.21",
+ "react-is": "^18.3.1",
+ "react-smooth": "^4.0.4",
+ "recharts-scale": "^0.4.4",
+ "tiny-invariant": "^1.3.1",
+ "victory-vendor": "^36.6.8"
+ },
+ "engines": {
+ "node": ">=14"
+ },
+ "peerDependencies": {
+ "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+ "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+ }
+ },
+ "node_modules/recharts-scale": {
+ "version": "0.4.5",
+ "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
+ "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
+ "license": "MIT",
+ "dependencies": {
+ "decimal.js-light": "^2.4.1"
+ }
+ },
+ "node_modules/recharts/node_modules/react-is": {
+ "version": "18.3.1",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+ "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+ "license": "MIT"
+ },
"node_modules/reflect.getprototypeof": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
@@ -5664,6 +5972,12 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/regenerator-runtime": {
+ "version": "0.14.1",
+ "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+ "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+ "license": "MIT"
+ },
"node_modules/regexp.prototype.flags": {
"version": "1.5.3",
"resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.3.tgz",
@@ -6488,6 +6802,12 @@
"node": ">=0.8"
}
},
+ "node_modules/tiny-invariant": {
+ "version": "1.3.3",
+ "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+ "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+ "license": "MIT"
+ },
"node_modules/to-regex-range": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -6741,6 +7061,28 @@
"base64-arraybuffer": "^1.0.2"
}
},
+ "node_modules/victory-vendor": {
+ "version": "36.9.2",
+ "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
+ "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==",
+ "license": "MIT AND ISC",
+ "dependencies": {
+ "@types/d3-array": "^3.0.3",
+ "@types/d3-ease": "^3.0.0",
+ "@types/d3-interpolate": "^3.0.1",
+ "@types/d3-scale": "^4.0.2",
+ "@types/d3-shape": "^3.1.0",
+ "@types/d3-time": "^3.0.0",
+ "@types/d3-timer": "^3.0.0",
+ "d3-array": "^3.1.6",
+ "d3-ease": "^3.0.1",
+ "d3-interpolate": "^3.0.1",
+ "d3-scale": "^4.0.2",
+ "d3-shape": "^3.1.0",
+ "d3-time": "^3.0.0",
+ "d3-timer": "^3.0.1"
+ }
+ },
"node_modules/wcwidth": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 4a8fc8e..6b021fd 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -28,6 +28,7 @@
"react-dom": "^18.3.1",
"react-icons": "^5.3.0",
"react-leaflet": "^4.2.1",
+ "recharts": "^2.15.1",
"tailwind-merge": "^3.0.1"
},
"devDependencies": {
diff --git a/frontend/src/app/locate/page.tsx b/frontend/src/app/locate/page.tsx
index f905fd0..9cd7de6 100644
--- a/frontend/src/app/locate/page.tsx
+++ b/frontend/src/app/locate/page.tsx
@@ -60,39 +60,41 @@ export default function Index() {
title: "No Data",
description: "No locations available to export",
variant: "destructive",
- });
- return;
+ })
+ return
}
- const headers = ["Type", "Latitude", "Longitude", "Area Name", "Category"];
-
- const uniqueLocations = new Set();
- const formatRow = (type: string, loc: Location) =>
- `${type},${loc.lat},${loc.lng},,`;
+ const headers = ["Type", "Latitude", "Longitude", "Area Name", "Category"]
+
+ const uniqueLocations = new Set()
+ const formatRow = (type: string, loc: Location) => `${type},${loc.lat},${loc.lng},,`
const rows = [
...mustHaveLocations.map((loc) => formatRow("Must Have", loc)),
- ...suggestedLocations.map((loc) => formatRow("Suggested", loc))
- ].filter((row) => {
- if (uniqueLocations.has(row)) return false;
- uniqueLocations.add(row);
- return true;
- });
-
- const csvContent = [headers.join(","), ...rows].join("\n");
-
- const blob = new Blob([csvContent], { type: "text/csv" });
- const url = window.URL.createObjectURL(blob);
- const a = document.createElement("a");
- a.href = url;
- a.download = "locations.csv";
- a.click();
- window.URL.revokeObjectURL(url);
+ ...suggestedLocations
+ .map((loc) => formatRow("Suggested", loc))
+ .filter((row) => {
+ const key = `${row.split(",")[1]},${row.split(",")[2]}`
+ if (uniqueLocations.has(key)) return false
+ uniqueLocations.add(key)
+ return true
+ }),
+ ]
+
+ const csvContent = [headers.join(","), ...rows].join("\n")
+
+ const blob = new Blob([csvContent], { type: "text/csv" })
+ const url = window.URL.createObjectURL(blob)
+ const a = document.createElement("a")
+ a.href = url
+ a.download = "locations.csv"
+ a.click()
+ window.URL.revokeObjectURL(url)
toast({
title: "Success",
description: "CSV file downloaded successfully",
- });
+ })
}
const handleSaveMap = async () => {
@@ -165,3 +167,4 @@ export default function Index() {
</div>
)
}
+
diff --git a/frontend/src/app/reports/page.tsx b/frontend/src/app/reports/page.tsx
new file mode 100644
index 0000000..d01ec76
--- /dev/null
+++ b/frontend/src/app/reports/page.tsx
@@ -0,0 +1,90 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/ui/card";
+import { Sparkles, BarChart3, BrainCircuit } from "lucide-react";
+import Navigation from "@/components/navigation/navigation";
+import {
+ BarChart as ReBarChart,
+ LineChart as ReLineChart,
+ PieChart as RePieChart,
+ AreaChart as ReAreaChart,
+ Bar,
+ Line,
+ Pie,
+ Area,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ Legend,
+ ResponsiveContainer,
+} from "recharts";
+import { ReactNode } from "react";
+
+export default function ReportPage() {
+ return (
+ <div className="flex flex-col min-h-screen bg-gray-100">
+ <Navigation />
+ <ReportContent />
+ </div>
+ );
+}
+
+function ReportContent() {
+ return (
+ <div className="flex flex-1 flex-col items-center px-4 py-12 space-y-10 text-center">
+ <div className="text-5xl font-extrabold text-gray-800 flex items-center space-x-4 animate-pulse">
+ <Sparkles className="text-blue-500 w-12 h-12" />
+ <span>Coming Soon</span>
+ </div>
+ <p className="text-xl text-gray-600 max-w-2xl">
+ Our AI-powered air quality reports are on the way! Stay tuned for real-time insights and advanced analytics
+ to help you understand air pollution trends like never before.
+ </p>
+ <Card className="w-full max-w-4xl shadow-lg border border-blue-500 bg-white">
+ <CardHeader className="text-center bg-blue-500 text-white rounded-t-lg">
+ <CardTitle className="text-2xl font-bold flex items-center justify-center space-x-2">
+ <BrainCircuit className="w-6 h-6" />
+ <span>AI-Generated Air Quality Report</span>
+ </CardTitle>
+ </CardHeader>
+ <CardContent className="p-6 space-y-6">
+ <p className="text-gray-700 text-lg">
+ Leveraging artificial intelligence, we analyze real-time air pollution data to provide accurate insights
+ and actionable recommendations. Our reports cover PM2.5 trends, pollution hotspots, and seasonal variations.
+ </p>
+ <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+ <InfoBox title="PM2.5 Trends" icon={<BarChart3 className="text-blue-500 w-10 h-10" />}>
+ Analyze pollution levels over time to detect patterns and anomalies.
+ </InfoBox>
+ <InfoBox title="Regional Analysis" icon={<BarChart3 className="text-green-500 w-10 h-10" />}>
+ Compare air quality across different locations with detailed breakdowns.
+ </InfoBox>
+ <InfoBox title="Health Impact" icon={<BarChart3 className="text-red-500 w-10 h-10" />}>
+ Understand how pollution affects respiratory health and well-being.
+ </InfoBox>
+ <InfoBox title="AI Insights" icon={<BrainCircuit className="text-purple-500 w-10 h-10" />}>
+ Smart predictions based on historical data to help communities prepare in advance.
+ </InfoBox>
+ </div>
+ </CardContent>
+ </Card>
+ </div>
+ );
+}
+
+interface InfoBoxProps {
+ title: string;
+ icon: ReactNode;
+ children: ReactNode;
+}
+
+function InfoBox({ title, icon, children }: InfoBoxProps) {
+ return (
+ <div className="flex items-start space-x-4 bg-gray-50 p-4 rounded-lg shadow">
+ {icon}
+ <div>
+ <h3 className="text-lg font-semibold text-gray-800">{title}</h3>
+ <p className="text-gray-600 text-sm">{children}</p>
+ </div>
+ </div>
+ );
+}
diff --git a/frontend/src/ui/card.tsx b/frontend/src/ui/card.tsx
new file mode 100644
index 0000000..afa13ec
--- /dev/null
+++ b/frontend/src/ui/card.tsx
@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+ <div
+ ref={ref}
+ className={cn(
+ "rounded-lg border bg-card text-card-foreground shadow-sm",
+ className
+ )}
+ {...props}
+ />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+ <div
+ ref={ref}
+ className={cn("flex flex-col space-y-1.5 p-6", className)}
+ {...props}
+ />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+ <h3
+ ref={ref}
+ className={cn(
+ "text-2xl font-semibold leading-none tracking-tight",
+ className
+ )}
+ {...props}
+ />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+ <p
+ ref={ref}
+ className={cn("text-sm text-muted-foreground", className)}
+ {...props}
+ />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+ <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+ <div
+ ref={ref}
+ className={cn("flex items-center p-6 pt-0", className)}
+ {...props}
+ />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
From 7a29d5cdf14fe63646cda4b58dba4055c452b242 Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Sun, 16 Feb 2025 00:05:08 +0300
Subject: [PATCH 16/55] trim
---
frontend/src/components/Controls/SearchBar.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/frontend/src/components/Controls/SearchBar.tsx b/frontend/src/components/Controls/SearchBar.tsx
index 009016b..074be6e 100644
--- a/frontend/src/components/Controls/SearchBar.tsx
+++ b/frontend/src/components/Controls/SearchBar.tsx
@@ -109,7 +109,7 @@ export function SearchBar({ onSearch, onBoundaryFound }: SearchBarProps) {
<X className="h-4 w-4" />
</Button>
)}
- <Button type="submit" size="icon" disabled={isLoading}>
+ <Button type="submit" size="icon" disabled={isLoading || !query.trim()} className="bg-blue-500 hover:bg-blue-600 text-white flex items-center justify-center">
<Search className="h-4 w-4" />
</Button>
</form>
From fa03ef5d778ede35f34c933ea4a55c036593721f Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Sun, 16 Feb 2025 14:39:22 +0300
Subject: [PATCH 17/55] found
---
frontend/src/app/not-found.tsx | 20 +++++++-------------
1 file changed, 7 insertions(+), 13 deletions(-)
diff --git a/frontend/src/app/not-found.tsx b/frontend/src/app/not-found.tsx
index 2f561bc..4552e07 100644
--- a/frontend/src/app/not-found.tsx
+++ b/frontend/src/app/not-found.tsx
@@ -1,15 +1,10 @@
-"use client"
+"use client";
-import { useEffect } from "react"
-import { usePathname } from "next/navigation"
-import Link from "next/link"
+import { usePathname } from "next/navigation";
+import Link from "next/link";
const NotFound = () => {
- const pathname = usePathname()
-
- useEffect(() => {
- console.error("404 Error: User attempted to access non-existent route:", pathname)
- }, [pathname])
+ const pathname = usePathname();
return (
<div className="min-h-screen flex items-center justify-center bg-gradient-to-r from-blue-50 to-purple-50">
@@ -28,8 +23,7 @@ const NotFound = () => {
</Link>
</div>
</div>
- )
-}
-
-export default NotFound
+ );
+};
+export default NotFound;
From 7a7d3cdd3f20b738481e105bed1c1006b5ddf84e Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Sun, 16 Feb 2025 16:19:38 +0300
Subject: [PATCH 18/55] doubling
---
frontend/src/app/locate/page.tsx | 26 +++++++++++--------
.../src/components/Controls/FileUpload.tsx | 26 +++++++++----------
frontend/src/components/map/MapComponent.tsx | 4 +--
3 files changed, 30 insertions(+), 26 deletions(-)
diff --git a/frontend/src/app/locate/page.tsx b/frontend/src/app/locate/page.tsx
index 9cd7de6..f60d813 100644
--- a/frontend/src/app/locate/page.tsx
+++ b/frontend/src/app/locate/page.tsx
@@ -69,17 +69,21 @@ export default function Index() {
const uniqueLocations = new Set()
const formatRow = (type: string, loc: Location) => `${type},${loc.lat},${loc.lng},,`
- const rows = [
- ...mustHaveLocations.map((loc) => formatRow("Must Have", loc)),
- ...suggestedLocations
- .map((loc) => formatRow("Suggested", loc))
- .filter((row) => {
- const key = `${row.split(",")[1]},${row.split(",")[2]}`
- if (uniqueLocations.has(key)) return false
- uniqueLocations.add(key)
- return true
- }),
- ]
+ // Add must-have locations first
+ const rows = mustHaveLocations.map((loc) => {
+ const key = `${loc.lat},${loc.lng}`
+ uniqueLocations.add(key)
+ return formatRow("Must Have", loc)
+ })
+
+ // Add suggested locations, excluding duplicates and must-have locations
+ suggestedLocations.forEach((loc) => {
+ const key = `${loc.lat},${loc.lng}`
+ if (!uniqueLocations.has(key)) {
+ uniqueLocations.add(key)
+ rows.push(formatRow("Suggested", loc))
+ }
+ })
const csvContent = [headers.join(","), ...rows].join("\n")
diff --git a/frontend/src/components/Controls/FileUpload.tsx b/frontend/src/components/Controls/FileUpload.tsx
index f84fd18..2908346 100644
--- a/frontend/src/components/Controls/FileUpload.tsx
+++ b/frontend/src/components/Controls/FileUpload.tsx
@@ -3,13 +3,13 @@ import { Button } from '@/ui/button';
import { Upload } from 'lucide-react';
import Papa from 'papaparse';
import { useToast } from '@/ui/use-toast';
-import type {Location, FileUploadProps} from "@/lib/types"
+import type { Location, FileUploadProps } from '@/lib/types';
const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
const ACCEPTED_FILE_TYPE = 'text/csv';
const normalizeColumnName = (name: string): string =>
- name.trim().toLowerCase().replace(/\s+/g, '');
+ name.trim().toLowerCase().replace(/[^a-z0-9]/g, '');
const latitudeAliases = new Set(['lat', 'latitude']);
const longitudeAliases = new Set(['lng', 'lon', 'longitude']);
@@ -25,6 +25,7 @@ export function FileUpload({ onUpload }: FileUploadProps) {
Papa.parse<Record<string, string>>(file, {
header: true,
skipEmptyLines: true,
+ worker: true, // Enables Web Worker for performance
complete: ({ data, meta }) => {
setIsLoading(false);
@@ -32,17 +33,21 @@ export function FileUpload({ onUpload }: FileUploadProps) {
const headers = meta.fields?.map(normalizeColumnName) || [];
if (!headers.length) throw new Error('CSV file has no headers.');
- const latIndex = headers.findIndex((h) => latitudeAliases.has(h));
- const lngIndex = headers.findIndex((h) => longitudeAliases.has(h));
+ const latHeader = headers.find((h) => latitudeAliases.has(h));
+ const lngHeader = headers.find((h) => longitudeAliases.has(h));
- if (latIndex === -1 || lngIndex === -1) {
- throw new Error('Missing latitude and/or longitude columns.');
+ if (!latHeader && !lngHeader) {
+ throw new Error('Missing both latitude and longitude columns.');
+ } else if (!latHeader) {
+ throw new Error('Missing latitude column.');
+ } else if (!lngHeader) {
+ throw new Error('Missing longitude column.');
}
const locations: Location[] = data
.map((row) => ({
- lat: parseFloat(row[meta.fields![latIndex]] || ''),
- lng: parseFloat(row[meta.fields![lngIndex]] || ''),
+ lat: parseFloat(row[latHeader] || ''),
+ lng: parseFloat(row[lngHeader] || ''),
}))
.filter(({ lat, lng }) => !isNaN(lat) && !isNaN(lng));
@@ -74,11 +79,6 @@ export function FileUpload({ onUpload }: FileUploadProps) {
return;
}
- if (file.type !== ACCEPTED_FILE_TYPE) {
- toast({ title: 'Error', description: 'Please upload a valid CSV file.', variant: 'destructive' });
- return;
- }
-
parseCSV(file);
};
diff --git a/frontend/src/components/map/MapComponent.tsx b/frontend/src/components/map/MapComponent.tsx
index c326f09..c4bb6f9 100644
--- a/frontend/src/components/map/MapComponent.tsx
+++ b/frontend/src/components/map/MapComponent.tsx
@@ -174,7 +174,7 @@ export function MapComponent({
<Marker
key={`must-have-${location.lat}-${location.lng}-${index}`}
position={[location.lat, location.lng]}
- icon={blueIcon}
+ icon={greenIcon}
/>
))}
@@ -182,7 +182,7 @@ export function MapComponent({
<Marker
key={`suggested-${location.lat}-${location.lng}-${index}`}
position={[location.lat, location.lng]}
- icon={greenIcon}
+ icon={blueIcon}
/>
))}
</MapContainer>
From 2de39bc4954950265800b444de5996ffcd6d99db Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Sun, 16 Feb 2025 17:19:48 +0300
Subject: [PATCH 19/55] air
---
frontend/src/app/about/page.tsx | 6 +++---
frontend/src/components/navigation/navigation.tsx | 4 ++--
2 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/frontend/src/app/about/page.tsx b/frontend/src/app/about/page.tsx
index 05be004..366df49 100644
--- a/frontend/src/app/about/page.tsx
+++ b/frontend/src/app/about/page.tsx
@@ -50,10 +50,10 @@ export default function AboutPage() {
<div className="bg-blue-50 p-8 rounded-lg">
<h2 className="text-2xl font-semibold mb-4">Our Impact</h2>
<ul className="list-disc list-inside space-y-2">
- <li>Deployed over 100 low-cost air quality sensors across East Africa</li>
- <li>Provided air quality data to millions of citizens through our mobile app and API</li>
+ <li>Deployed over 300 low-cost air quality sensors across Africa</li>
+ <li>Provided air quality data to millions of citizens through our digital platform and API</li>
<li>Collaborated with local governments to develop data-driven air quality management strategies</li>
- <li>Engaged in capacity building, training over 500 individuals in air quality monitoring and analysis</li>
+ <li>Engaged in capacity building, training over 5000 individuals in air quality monitoring and analysis</li>
</ul>
</div>
</div>
diff --git a/frontend/src/components/navigation/navigation.tsx b/frontend/src/components/navigation/navigation.tsx
index 6b27429..04fa935 100644
--- a/frontend/src/components/navigation/navigation.tsx
+++ b/frontend/src/components/navigation/navigation.tsx
@@ -6,7 +6,7 @@ import { usePathname } from "next/navigation"
import { cn } from "@/lib/utils"
const navItems = [
- { name: "Home", href: "/" },
+ { name: "Home", href: "/" },
{ name: "Locate", href: "/locate" },
{ name: "Categorize", href: "/categorize" },
{ name: "Reports", href: "/reports" },
@@ -17,7 +17,7 @@ export default function Navigation({ className, ...props }: React.HTMLAttributes
const pathname = usePathname()
return (
- <header className="border-b">
+ <header className="sticky top-0 z-50 bg-white border-b shadow-sm">
<div className="container mx-auto px-4 flex h-16 items-center justify-between">
<Link href="/" className="text-blue-600 text-xl font-semibold">
AirQo AI
From 7d8afe89ce77c168a85eb548239b34a4a96004b0 Mon Sep 17 00:00:00 2001
From: Ochieng Paul <ochiengpaul442@gmail.com>
Date: Sun, 16 Feb 2025 18:26:43 +0300
Subject: [PATCH 20/55] Fix all Lint and type errors
---
frontend/package-lock.json | 108 +++---
frontend/package.json | 2 +-
frontend/src/app/about/page.tsx | 38 ++-
frontend/src/app/locate/page.tsx | 155 +++++----
frontend/src/app/not-found.tsx | 15 +-
frontend/src/app/reports/page.tsx | 59 ++--
.../src/components/Controls/ControlPanel.tsx | 126 ++++---
.../src/components/Controls/FileUpload.tsx | 72 ++--
.../src/components/Controls/SearchBar.tsx | 69 +++-
frontend/src/components/hooks/use-toast.ts | 127 ++++---
frontend/src/components/map/LeafletMap.tsx | 317 ++++++++++--------
frontend/src/components/map/MapComponent.tsx | 141 ++++----
.../src/components/navigation/navigation.tsx | 23 +-
frontend/src/lib/api.ts | 227 +++++++------
14 files changed, 841 insertions(+), 638 deletions(-)
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 361618a..47b2e47 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -21,7 +21,7 @@
"leaflet-draw": "^1.0.4",
"leaflet-geosearch": "^4.0.0",
"lucide-react": "^0.475.0",
- "next": "15.0.2",
+ "next": "^15.1.7",
"papaparse": "^5.5.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
@@ -650,9 +650,9 @@
}
},
"node_modules/@next/env": {
- "version": "15.0.2",
- "resolved": "https://registry.npmjs.org/@next/env/-/env-15.0.2.tgz",
- "integrity": "sha512-c0Zr0ModK5OX7D4ZV8Jt/wqoXtitLNPwUfG9zElCZztdaZyNVnN40rDXVZ/+FGuR4CcNV5AEfM6N8f+Ener7Dg=="
+ "version": "15.1.7",
+ "resolved": "https://registry.npmjs.org/@next/env/-/env-15.1.7.tgz",
+ "integrity": "sha512-d9jnRrkuOH7Mhi+LHav2XW91HOgTAWHxjMPkXMGBc9B2b7614P7kjt8tAplRvJpbSt4nbO1lugcT/kAaWzjlLQ=="
},
"node_modules/@next/eslint-plugin-next": {
"version": "15.0.2",
@@ -664,9 +664,9 @@
}
},
"node_modules/@next/swc-darwin-arm64": {
- "version": "15.0.2",
- "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.0.2.tgz",
- "integrity": "sha512-GK+8w88z+AFlmt+ondytZo2xpwlfAR8U6CRwXancHImh6EdGfHMIrTSCcx5sOSBei00GyLVL0ioo1JLKTfprgg==",
+ "version": "15.1.7",
+ "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.1.7.tgz",
+ "integrity": "sha512-hPFwzPJDpA8FGj7IKV3Yf1web3oz2YsR8du4amKw8d+jAOHfYHYFpMkoF6vgSY4W6vB29RtZEklK9ayinGiCmQ==",
"cpu": [
"arm64"
],
@@ -679,9 +679,9 @@
}
},
"node_modules/@next/swc-darwin-x64": {
- "version": "15.0.2",
- "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.0.2.tgz",
- "integrity": "sha512-KUpBVxIbjzFiUZhiLIpJiBoelqzQtVZbdNNsehhUn36e2YzKHphnK8eTUW1s/4aPy5kH/UTid8IuVbaOpedhpw==",
+ "version": "15.1.7",
+ "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.1.7.tgz",
+ "integrity": "sha512-2qoas+fO3OQKkU0PBUfwTiw/EYpN+kdAx62cePRyY1LqKtP09Vp5UcUntfZYajop5fDFTjSxCHfZVRxzi+9FYQ==",
"cpu": [
"x64"
],
@@ -694,9 +694,9 @@
}
},
"node_modules/@next/swc-linux-arm64-gnu": {
- "version": "15.0.2",
- "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.0.2.tgz",
- "integrity": "sha512-9J7TPEcHNAZvwxXRzOtiUvwtTD+fmuY0l7RErf8Yyc7kMpE47MIQakl+3jecmkhOoIyi/Rp+ddq7j4wG6JDskQ==",
+ "version": "15.1.7",
+ "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.1.7.tgz",
+ "integrity": "sha512-sKLLwDX709mPdzxMnRIXLIT9zaX2w0GUlkLYQnKGoXeWUhcvpCrK+yevcwCJPdTdxZEUA0mOXGLdPsGkudGdnA==",
"cpu": [
"arm64"
],
@@ -709,9 +709,9 @@
}
},
"node_modules/@next/swc-linux-arm64-musl": {
- "version": "15.0.2",
- "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.0.2.tgz",
- "integrity": "sha512-BjH4ZSzJIoTTZRh6rG+a/Ry4SW0HlizcPorqNBixBWc3wtQtj4Sn9FnRZe22QqrPnzoaW0ctvSz4FaH4eGKMww==",
+ "version": "15.1.7",
+ "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.1.7.tgz",
+ "integrity": "sha512-zblK1OQbQWdC8fxdX4fpsHDw+VSpBPGEUX4PhSE9hkaWPrWoeIJn+baX53vbsbDRaDKd7bBNcXRovY1hEhFd7w==",
"cpu": [
"arm64"
],
@@ -724,9 +724,9 @@
}
},
"node_modules/@next/swc-linux-x64-gnu": {
- "version": "15.0.2",
- "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.0.2.tgz",
- "integrity": "sha512-i3U2TcHgo26sIhcwX/Rshz6avM6nizrZPvrDVDY1bXcLH1ndjbO8zuC7RoHp0NSK7wjJMPYzm7NYL1ksSKFreA==",
+ "version": "15.1.7",
+ "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.1.7.tgz",
+ "integrity": "sha512-GOzXutxuLvLHFDAPsMP2zDBMl1vfUHHpdNpFGhxu90jEzH6nNIgmtw/s1MDwpTOiM+MT5V8+I1hmVFeAUhkbgQ==",
"cpu": [
"x64"
],
@@ -739,9 +739,9 @@
}
},
"node_modules/@next/swc-linux-x64-musl": {
- "version": "15.0.2",
- "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.0.2.tgz",
- "integrity": "sha512-AMfZfSVOIR8fa+TXlAooByEF4OB00wqnms1sJ1v+iu8ivwvtPvnkwdzzFMpsK5jA2S9oNeeQ04egIWVb4QWmtQ==",
+ "version": "15.1.7",
+ "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.1.7.tgz",
+ "integrity": "sha512-WrZ7jBhR7ATW1z5iEQ0ZJfE2twCNSXbpCSaAunF3BKcVeHFADSI/AW1y5Xt3DzTqPF1FzQlwQTewqetAABhZRQ==",
"cpu": [
"x64"
],
@@ -754,9 +754,9 @@
}
},
"node_modules/@next/swc-win32-arm64-msvc": {
- "version": "15.0.2",
- "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.0.2.tgz",
- "integrity": "sha512-JkXysDT0/hEY47O+Hvs8PbZAeiCQVxKfGtr4GUpNAhlG2E0Mkjibuo8ryGD29Qb5a3IOnKYNoZlh/MyKd2Nbww==",
+ "version": "15.1.7",
+ "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.1.7.tgz",
+ "integrity": "sha512-LDnj1f3OVbou1BqvvXVqouJZKcwq++mV2F+oFHptToZtScIEnhNRJAhJzqAtTE2dB31qDYL45xJwrc+bLeKM2Q==",
"cpu": [
"arm64"
],
@@ -769,9 +769,9 @@
}
},
"node_modules/@next/swc-win32-x64-msvc": {
- "version": "15.0.2",
- "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.0.2.tgz",
- "integrity": "sha512-foaUL0NqJY/dX0Pi/UcZm5zsmSk5MtP/gxx3xOPyREkMFN+CTjctPfu3QaqrQHinaKdPnMWPJDKt4VjDfTBe/Q==",
+ "version": "15.1.7",
+ "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.1.7.tgz",
+ "integrity": "sha512-dC01f1quuf97viOfW05/K8XYv2iuBgAxJZl7mbCKEjMgdQl5JjAKJ0D2qMKZCgPWDeFbFT0Q0nYWwytEW0DWTQ==",
"cpu": [
"x64"
],
@@ -1398,11 +1398,11 @@
"integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ=="
},
"node_modules/@swc/helpers": {
- "version": "0.5.13",
- "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.13.tgz",
- "integrity": "sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w==",
+ "version": "0.5.15",
+ "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
+ "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
"dependencies": {
- "tslib": "^2.4.0"
+ "tslib": "^2.8.0"
}
},
"node_modules/@types/d3-array": {
@@ -2458,9 +2458,9 @@
"dev": true
},
"node_modules/cross-spawn": {
- "version": "7.0.3",
- "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
- "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+ "version": "7.0.6",
+ "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+ "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
"dependencies": {
"path-key": "^3.1.0",
"shebang-command": "^2.0.0",
@@ -4964,9 +4964,9 @@
}
},
"node_modules/nanoid": {
- "version": "3.3.7",
- "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
- "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+ "version": "3.3.8",
+ "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+ "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
"funding": [
{
"type": "github",
@@ -4987,13 +4987,13 @@
"dev": true
},
"node_modules/next": {
- "version": "15.0.2",
- "resolved": "https://registry.npmjs.org/next/-/next-15.0.2.tgz",
- "integrity": "sha512-rxIWHcAu4gGSDmwsELXacqAPUk+j8dV/A9cDF5fsiCMpkBDYkO2AEaL1dfD+nNmDiU6QMCFN8Q30VEKapT9UHQ==",
+ "version": "15.1.7",
+ "resolved": "https://registry.npmjs.org/next/-/next-15.1.7.tgz",
+ "integrity": "sha512-GNeINPGS9c6OZKCvKypbL8GTsT5GhWPp4DM0fzkXJuXMilOO2EeFxuAY6JZbtk6XIl6Ws10ag3xRINDjSO5+wg==",
"dependencies": {
- "@next/env": "15.0.2",
+ "@next/env": "15.1.7",
"@swc/counter": "0.1.3",
- "@swc/helpers": "0.5.13",
+ "@swc/helpers": "0.5.15",
"busboy": "1.6.0",
"caniuse-lite": "^1.0.30001579",
"postcss": "8.4.31",
@@ -5003,25 +5003,25 @@
"next": "dist/bin/next"
},
"engines": {
- "node": ">=18.18.0"
+ "node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
},
"optionalDependencies": {
- "@next/swc-darwin-arm64": "15.0.2",
- "@next/swc-darwin-x64": "15.0.2",
- "@next/swc-linux-arm64-gnu": "15.0.2",
- "@next/swc-linux-arm64-musl": "15.0.2",
- "@next/swc-linux-x64-gnu": "15.0.2",
- "@next/swc-linux-x64-musl": "15.0.2",
- "@next/swc-win32-arm64-msvc": "15.0.2",
- "@next/swc-win32-x64-msvc": "15.0.2",
+ "@next/swc-darwin-arm64": "15.1.7",
+ "@next/swc-darwin-x64": "15.1.7",
+ "@next/swc-linux-arm64-gnu": "15.1.7",
+ "@next/swc-linux-arm64-musl": "15.1.7",
+ "@next/swc-linux-x64-gnu": "15.1.7",
+ "@next/swc-linux-x64-musl": "15.1.7",
+ "@next/swc-win32-arm64-msvc": "15.1.7",
+ "@next/swc-win32-x64-msvc": "15.1.7",
"sharp": "^0.33.5"
},
"peerDependencies": {
"@opentelemetry/api": "^1.1.0",
"@playwright/test": "^1.41.2",
"babel-plugin-react-compiler": "*",
- "react": "^18.2.0 || 19.0.0-rc-02c0e824-20241028",
- "react-dom": "^18.2.0 || 19.0.0-rc-02c0e824-20241028",
+ "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+ "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
"sass": "^1.3.0"
},
"peerDependenciesMeta": {
diff --git a/frontend/package.json b/frontend/package.json
index 6b021fd..3675327 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,7 +22,7 @@
"leaflet-draw": "^1.0.4",
"leaflet-geosearch": "^4.0.0",
"lucide-react": "^0.475.0",
- "next": "15.0.2",
+ "next": "^15.1.7",
"papaparse": "^5.5.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
diff --git a/frontend/src/app/about/page.tsx b/frontend/src/app/about/page.tsx
index 366df49..9ee1df5 100644
--- a/frontend/src/app/about/page.tsx
+++ b/frontend/src/app/about/page.tsx
@@ -17,18 +17,23 @@ export default function AboutPage() {
<div className="mb-12">
<p className="text-lg mb-4">
- AirQo is a pioneering initiative dedicated to improving air quality monitoring and management across Africa.
- Our mission is to provide accurate, actionable air quality information to empower communities, researchers,
- and policymakers in the fight against air pollution.
+ AirQo is a pioneering initiative dedicated to improving air quality
+ monitoring and management across Africa. Our mission is to provide
+ accurate, actionable air quality information to empower communities,
+ researchers, and policymakers in the fight against air pollution.
</p>
<p className="text-lg">
- Founded in 2015 at Makerere University in Uganda, AirQo has grown into a multidisciplinary team of engineers,
- data scientists, and environmental experts. We're committed to developing innovative, low-cost air quality
- monitoring solutions tailored for the unique challenges of African urban environments.
+ Founded in 2015 at Makerere University in Uganda, AirQo has grown
+ into a multidisciplinary team of engineers, data scientists, and
+ environmental experts. We're committed to developing
+ innovative, low-cost air quality monitoring solutions tailored for
+ the unique challenges of African urban environments.
</p>
</div>
- <h2 className="text-3xl font-semibold mb-6 text-center">Our Core Values</h2>
+ <h2 className="text-3xl font-semibold mb-6 text-center">
+ Our Core Values
+ </h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
<FeatureCard
title="Local Expertise"
@@ -50,10 +55,21 @@ export default function AboutPage() {
<div className="bg-blue-50 p-8 rounded-lg">
<h2 className="text-2xl font-semibold mb-4">Our Impact</h2>
<ul className="list-disc list-inside space-y-2">
- <li>Deployed over 300 low-cost air quality sensors across Africa</li>
- <li>Provided air quality data to millions of citizens through our digital platform and API</li>
- <li>Collaborated with local governments to develop data-driven air quality management strategies</li>
- <li>Engaged in capacity building, training over 5000 individuals in air quality monitoring and analysis</li>
+ <li>
+ Deployed over 300 low-cost air quality sensors across Africa
+ </li>
+ <li>
+ Provided air quality data to millions of citizens through our
+ digital platform and API
+ </li>
+ <li>
+ Collaborated with local governments to develop data-driven air
+ quality management strategies
+ </li>
+ <li>
+ Engaged in capacity building, training over 5000 individuals in
+ air quality monitoring and analysis
+ </li>
</ul>
</div>
</div>
diff --git a/frontend/src/app/locate/page.tsx b/frontend/src/app/locate/page.tsx
index f60d813..8e4ce2b 100644
--- a/frontend/src/app/locate/page.tsx
+++ b/frontend/src/app/locate/page.tsx
@@ -1,58 +1,63 @@
-"use client"
-
-import { useState } from "react"
-import { MapComponent } from "@/components/map/MapComponent"
-import { ControlPanel } from "@/components/Controls/ControlPanel"
-import type { Location, SiteLocatorPayload } from "@/lib/types"
-import { submitLocations } from "@/lib/api"
-import { useToast } from "@/ui/use-toast"
-import { Button } from "@/ui/button"
-import { Download, Camera } from "lucide-react"
-import html2canvas from "html2canvas"
-import Navigation from "@/components/navigation/navigation"
+"use client";
+
+import { useState } from "react";
+import { ControlPanel } from "@/components/Controls/ControlPanel";
+import type { Location, SiteLocatorPayload } from "@/lib/types";
+import { submitLocations } from "@/lib/api";
+import { useToast } from "@/ui/use-toast";
+import { Button } from "@/ui/button";
+import { Download, Camera } from "lucide-react";
+import html2canvas from "html2canvas";
+import Navigation from "@/components/navigation/navigation";
+import dynamic from "next/dynamic";
+
+const MapComponent = dynamic(() => import("@/components/map/MapComponent"), {
+ ssr: false,
+});
export default function Index() {
- const [polygon, setPolygon] = useState<Location[]>([])
- const [mustHaveLocations, setMustHaveLocations] = useState<Location[]>([])
- const [suggestedLocations, setSuggestedLocations] = useState<Location[]>([])
- const { toast } = useToast()
- const [isDrawing, setIsDrawing] = useState(false)
+ const [polygon, setPolygon] = useState<Location[]>([]);
+ const [mustHaveLocations, setMustHaveLocations] = useState<Location[]>([]);
+ const [suggestedLocations, setSuggestedLocations] = useState<Location[]>([]);
+ const { toast } = useToast();
+ const [isDrawing, setIsDrawing] = useState(false);
const handleSubmit = async (payload: SiteLocatorPayload) => {
try {
- console.log("Submitting payload:", payload) // Debug log for request
- const response = await submitLocations(payload)
- console.log("API Response:", response) // Debug log for response
+ console.log("Submitting payload:", payload); // Debug log for request
+ const response = await submitLocations(payload);
+ console.log("API Response:", response); // Debug log for response
if (!response.site_location || !Array.isArray(response.site_location)) {
- throw new Error("Invalid response format from API")
+ throw new Error("Invalid response format from API");
}
const locations = response.site_location.map((site) => ({
lat: site.latitude,
lng: site.longitude,
- }))
+ }));
- console.log("Processed locations to plot:", locations) // Debug log for processed locations
- setSuggestedLocations(locations)
+ console.log("Processed locations to plot:", locations); // Debug log for processed locations
+ setSuggestedLocations(locations);
toast({
title: "Success",
description: `Found ${locations.length} suggested locations`,
- })
+ });
} catch (error) {
- console.error("Submit error:", error)
+ console.error("Submit error:", error);
toast({
title: "Error",
- description: error instanceof Error ? error.message : "Failed to submit locations",
+ description:
+ error instanceof Error ? error.message : "Failed to submit locations",
variant: "destructive",
- })
+ });
}
- }
+ };
const handleLocationClick = (location: Location) => {
- setMustHaveLocations([...mustHaveLocations, location])
- }
+ setMustHaveLocations([...mustHaveLocations, location]);
+ };
const handleExportCSV = () => {
if (suggestedLocations.length === 0 && mustHaveLocations.length === 0) {
@@ -60,67 +65,68 @@ export default function Index() {
title: "No Data",
description: "No locations available to export",
variant: "destructive",
- })
- return
+ });
+ return;
}
- const headers = ["Type", "Latitude", "Longitude", "Area Name", "Category"]
+ const headers = ["Type", "Latitude", "Longitude", "Area Name", "Category"];
- const uniqueLocations = new Set()
- const formatRow = (type: string, loc: Location) => `${type},${loc.lat},${loc.lng},,`
+ const uniqueLocations = new Set();
+ const formatRow = (type: string, loc: Location) =>
+ `${type},${loc.lat},${loc.lng},,`;
// Add must-have locations first
const rows = mustHaveLocations.map((loc) => {
- const key = `${loc.lat},${loc.lng}`
- uniqueLocations.add(key)
- return formatRow("Must Have", loc)
- })
+ const key = `${loc.lat},${loc.lng}`;
+ uniqueLocations.add(key);
+ return formatRow("Must Have", loc);
+ });
// Add suggested locations, excluding duplicates and must-have locations
suggestedLocations.forEach((loc) => {
- const key = `${loc.lat},${loc.lng}`
+ const key = `${loc.lat},${loc.lng}`;
if (!uniqueLocations.has(key)) {
- uniqueLocations.add(key)
- rows.push(formatRow("Suggested", loc))
+ uniqueLocations.add(key);
+ rows.push(formatRow("Suggested", loc));
}
- })
+ });
- const csvContent = [headers.join(","), ...rows].join("\n")
+ const csvContent = [headers.join(","), ...rows].join("\n");
- const blob = new Blob([csvContent], { type: "text/csv" })
- const url = window.URL.createObjectURL(blob)
- const a = document.createElement("a")
- a.href = url
- a.download = "locations.csv"
- a.click()
- window.URL.revokeObjectURL(url)
+ const blob = new Blob([csvContent], { type: "text/csv" });
+ const url = window.URL.createObjectURL(blob);
+ const a = document.createElement("a");
+ a.href = url;
+ a.download = "locations.csv";
+ a.click();
+ window.URL.revokeObjectURL(url);
toast({
title: "Success",
description: "CSV file downloaded successfully",
- })
- }
+ });
+ };
const handleSaveMap = async () => {
- const mapElement = document.querySelector(".leaflet-container")
+ const mapElement = document.querySelector(".leaflet-container");
if (mapElement) {
- const canvas = await html2canvas(mapElement as HTMLElement)
- const url = canvas.toDataURL("image/png")
- const a = document.createElement("a")
- a.href = url
- a.download = "map.png"
- a.click()
+ const canvas = await html2canvas(mapElement as HTMLElement);
+ const url = canvas.toDataURL("image/png");
+ const a = document.createElement("a");
+ a.href = url;
+ a.download = "map.png";
+ a.click();
toast({
title: "Success",
description: "Map image saved successfully",
- })
+ });
}
- }
+ };
const toggleDrawing = () => {
- setIsDrawing(!isDrawing)
- }
+ setIsDrawing(!isDrawing);
+ };
return (
<div className="flex flex-col h-screen">
@@ -148,11 +154,17 @@ export default function Index() {
{/* Action Buttons */}
<div className="absolute bottom-4 right-4 z-[1000] flex gap-2">
- <Button onClick={handleExportCSV} className="bg-blue-600 hover:bg-blue-700 text-white">
+ <Button
+ onClick={handleExportCSV}
+ className="bg-blue-600 hover:bg-blue-700 text-white"
+ >
<Download className="h-4 w-4 mr-2" />
Export CSV
</Button>
- <Button onClick={handleSaveMap} className="bg-blue-600 hover:bg-blue-700 text-white">
+ <Button
+ onClick={handleSaveMap}
+ className="bg-blue-600 hover:bg-blue-700 text-white"
+ >
<Camera className="h-4 w-4 mr-2" />
Save Map
</Button>
@@ -161,7 +173,11 @@ export default function Index() {
{/* Draw Polygon Button */}
<div className="absolute bottom-4 right-1/2 transform translate-x-1/2 z-[1000]">
<Button
- className={`${isDrawing ? "bg-red-600 hover:bg-red-700" : "bg-blue-600 hover:bg-blue-700"} text-white`}
+ className={`${
+ isDrawing
+ ? "bg-red-600 hover:bg-red-700"
+ : "bg-blue-600 hover:bg-blue-700"
+ } text-white`}
onClick={toggleDrawing}
>
{isDrawing ? "Finish Drawing" : "Draw Polygon"}
@@ -169,6 +185,5 @@ export default function Index() {
</div>
</div>
</div>
- )
+ );
}
-
diff --git a/frontend/src/app/not-found.tsx b/frontend/src/app/not-found.tsx
index 4552e07..b578a5d 100644
--- a/frontend/src/app/not-found.tsx
+++ b/frontend/src/app/not-found.tsx
@@ -9,11 +9,18 @@ const NotFound = () => {
return (
<div className="min-h-screen flex items-center justify-center bg-gradient-to-r from-blue-50 to-purple-50">
<div className="text-center p-8 bg-white rounded-lg shadow-2xl transform transition-all hover:scale-105">
- <h1 className="text-9xl font-bold text-gray-800 mb-4 animate-bounce">404</h1>
- <p className="text-2xl text-gray-600 mb-6">Oops! The page you're looking for doesn't exist.</p>
+ <h1 className="text-9xl font-bold text-gray-800 mb-4 animate-bounce">
+ 404
+ </h1>
+ <p className="text-2xl text-gray-600 mb-6">
+ Oops! The page you're looking for doesn't exist.
+ </p>
<p className="text-lg text-gray-500 mb-8">
- You tried to access <span className="font-mono text-gray-700 bg-gray-100 p-1 rounded">{pathname}</span>, but
- it's not available.
+ You tried to access{" "}
+ <span className="font-mono text-gray-700 bg-gray-100 p-1 rounded">
+ {pathname}
+ </span>
+ , but it's not available.
</p>
<Link
href="/"
diff --git a/frontend/src/app/reports/page.tsx b/frontend/src/app/reports/page.tsx
index d01ec76..74cf08e 100644
--- a/frontend/src/app/reports/page.tsx
+++ b/frontend/src/app/reports/page.tsx
@@ -1,22 +1,6 @@
import { Card, CardContent, CardHeader, CardTitle } from "@/ui/card";
import { Sparkles, BarChart3, BrainCircuit } from "lucide-react";
import Navigation from "@/components/navigation/navigation";
-import {
- BarChart as ReBarChart,
- LineChart as ReLineChart,
- PieChart as RePieChart,
- AreaChart as ReAreaChart,
- Bar,
- Line,
- Pie,
- Area,
- XAxis,
- YAxis,
- CartesianGrid,
- Tooltip,
- Legend,
- ResponsiveContainer,
-} from "recharts";
import { ReactNode } from "react";
export default function ReportPage() {
@@ -36,8 +20,9 @@ function ReportContent() {
<span>Coming Soon</span>
</div>
<p className="text-xl text-gray-600 max-w-2xl">
- Our AI-powered air quality reports are on the way! Stay tuned for real-time insights and advanced analytics
- to help you understand air pollution trends like never before.
+ Our AI-powered air quality reports are on the way! Stay tuned for
+ real-time insights and advanced analytics to help you understand air
+ pollution trends like never before.
</p>
<Card className="w-full max-w-4xl shadow-lg border border-blue-500 bg-white">
<CardHeader className="text-center bg-blue-500 text-white rounded-t-lg">
@@ -48,21 +33,39 @@ function ReportContent() {
</CardHeader>
<CardContent className="p-6 space-y-6">
<p className="text-gray-700 text-lg">
- Leveraging artificial intelligence, we analyze real-time air pollution data to provide accurate insights
- and actionable recommendations. Our reports cover PM2.5 trends, pollution hotspots, and seasonal variations.
+ Leveraging artificial intelligence, we analyze real-time air
+ pollution data to provide accurate insights and actionable
+ recommendations. Our reports cover PM2.5 trends, pollution hotspots,
+ and seasonal variations.
</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
- <InfoBox title="PM2.5 Trends" icon={<BarChart3 className="text-blue-500 w-10 h-10" />}>
- Analyze pollution levels over time to detect patterns and anomalies.
+ <InfoBox
+ title="PM2.5 Trends"
+ icon={<BarChart3 className="text-blue-500 w-10 h-10" />}
+ >
+ Analyze pollution levels over time to detect patterns and
+ anomalies.
</InfoBox>
- <InfoBox title="Regional Analysis" icon={<BarChart3 className="text-green-500 w-10 h-10" />}>
- Compare air quality across different locations with detailed breakdowns.
+ <InfoBox
+ title="Regional Analysis"
+ icon={<BarChart3 className="text-green-500 w-10 h-10" />}
+ >
+ Compare air quality across different locations with detailed
+ breakdowns.
</InfoBox>
- <InfoBox title="Health Impact" icon={<BarChart3 className="text-red-500 w-10 h-10" />}>
- Understand how pollution affects respiratory health and well-being.
+ <InfoBox
+ title="Health Impact"
+ icon={<BarChart3 className="text-red-500 w-10 h-10" />}
+ >
+ Understand how pollution affects respiratory health and
+ well-being.
</InfoBox>
- <InfoBox title="AI Insights" icon={<BrainCircuit className="text-purple-500 w-10 h-10" />}>
- Smart predictions based on historical data to help communities prepare in advance.
+ <InfoBox
+ title="AI Insights"
+ icon={<BrainCircuit className="text-purple-500 w-10 h-10" />}
+ >
+ Smart predictions based on historical data to help communities
+ prepare in advance.
</InfoBox>
</div>
</CardContent>
diff --git a/frontend/src/components/Controls/ControlPanel.tsx b/frontend/src/components/Controls/ControlPanel.tsx
index be51465..baf9b51 100644
--- a/frontend/src/components/Controls/ControlPanel.tsx
+++ b/frontend/src/components/Controls/ControlPanel.tsx
@@ -1,17 +1,17 @@
-"use client"
+"use client";
-import { useState } from "react"
-import { Button } from "@/ui/button"
-import { Input } from "@/ui/input"
-import { SearchBar } from "./SearchBar"
-import { FileUpload } from "./FileUpload"
-import type { Location, ControlPanelProps } from "@/lib/types"
-import { useToast } from "@/ui/use-toast"
-import { Loader2 } from "lucide-react"
+import { useState } from "react";
+import { Button } from "@/ui/button";
+import { Input } from "@/ui/input";
+import { SearchBar } from "./SearchBar";
+import { FileUpload } from "./FileUpload";
+import type { Location, ControlPanelProps } from "@/lib/types";
+import { useToast } from "@/ui/use-toast";
+import { Loader2 } from "lucide-react";
// Extend ControlPanelProps to include onBoundaryFound
interface ExtendedControlPanelProps extends ControlPanelProps {
- onBoundaryFound: (boundary: Location[]) => void
+ onBoundaryFound: (boundary: Location[]) => void;
}
export function ControlPanel({
@@ -21,12 +21,12 @@ export function ControlPanel({
onMustHaveLocationsChange,
onBoundaryFound,
}: ExtendedControlPanelProps) {
- const [minDistance, setMinDistance] = useState("0.5") // Default value for min_distance_km
- const [numSensors, setNumSensors] = useState("5") // Default value for num_sensors
- const [newLat, setNewLat] = useState("")
- const [newLng, setNewLng] = useState("")
- const [isLoading, setIsLoading] = useState(false)
- const { toast } = useToast()
+ const [minDistance, setMinDistance] = useState("0.5"); // Default value for min_distance_km
+ const [numSensors, setNumSensors] = useState("5"); // Default value for num_sensors
+ const [newLat, setNewLat] = useState("");
+ const [newLng, setNewLng] = useState("");
+ const [isLoading, setIsLoading] = useState(false);
+ const { toast } = useToast();
// Validation helper function
const validateInputs = () => {
@@ -35,80 +35,95 @@ export function ControlPanel({
title: "Error",
description: "Please draw a polygon on the map",
variant: "destructive",
- })
- return false
+ });
+ return false;
}
if (!numSensors || Number.parseInt(numSensors) < 1) {
toast({
title: "Error",
description: "Please enter a valid number of sensors",
variant: "destructive",
- })
- return false
+ });
+ return false;
}
- return true
- }
+ return true;
+ };
// Handle form submission
const handleSubmit = async () => {
- if (!validateInputs()) return
+ if (!validateInputs()) return;
const payload: any = {
polygon: {
coordinates: [
- [...polygon.map((loc) => [loc.lng, loc.lat]), [polygon[0].lng, polygon[0].lat]], // Close the polygon
+ [
+ ...polygon.map((loc) => [loc.lng, loc.lat]),
+ [polygon[0].lng, polygon[0].lat],
+ ], // Close the polygon
],
},
- must_have_locations: mustHaveLocations.length > 0 ? mustHaveLocations.map((loc) => [loc.lat, loc.lng]) : [],
+ must_have_locations:
+ mustHaveLocations.length > 0
+ ? mustHaveLocations.map((loc) => [loc.lat, loc.lng])
+ : [],
num_sensors: Number.parseInt(numSensors, 10),
- }
+ };
// Ensure min_distance_km is only included if valid
- const minDistanceValue = Number.parseFloat(minDistance)
+ const minDistanceValue = Number.parseFloat(minDistance);
if (!isNaN(minDistanceValue)) {
- payload.min_distance_km = minDistanceValue
+ payload.min_distance_km = minDistanceValue;
}
- setIsLoading(true)
+ setIsLoading(true);
try {
- await onSubmit(payload)
+ await onSubmit(payload);
toast({
title: "Success",
description: "Locations submitted successfully",
- })
+ });
} catch (error) {
+ console.log(error);
toast({
title: "Error",
description: "Failed to submit locations",
variant: "destructive",
- })
+ });
} finally {
- setIsLoading(false)
+ setIsLoading(false);
}
- }
+ };
// Add a new must-have location
const handleAddLocation = () => {
- const lat = Number.parseFloat(newLat)
- const lng = Number.parseFloat(newLng)
-
- if (isNaN(lat) || isNaN(lng) || lat < -90 || lat > 90 || lng < -180 || lng > 180) {
+ const lat = Number.parseFloat(newLat);
+ const lng = Number.parseFloat(newLng);
+
+ if (
+ isNaN(lat) ||
+ isNaN(lng) ||
+ lat < -90 ||
+ lat > 90 ||
+ lng < -180 ||
+ lng > 180
+ ) {
toast({
title: "Error",
- description: "Please enter valid latitude (-90 to 90) and longitude (-180 to 180)",
+ description:
+ "Please enter valid latitude (-90 to 90) and longitude (-180 to 180)",
variant: "destructive",
- })
- return
+ });
+ return;
}
- onMustHaveLocationsChange([...mustHaveLocations, { lat, lng }])
- setNewLat("")
- setNewLng("")
+ onMustHaveLocationsChange([...mustHaveLocations, { lat, lng }]);
+ setNewLat("");
+ setNewLng("");
toast({
title: "Success",
description: "Location added successfully",
- })
- }
+ });
+ };
return (
<div className="control-panel space-y-4 mt-9" style={{ width: "400px" }}>
@@ -119,7 +134,9 @@ export function ControlPanel({
{/* Must-Have Locations */}
<div className="space-y-2">
- <label className="text-sm font-medium">Must-Have Locations (Optional)</label>
+ <label className="text-sm font-medium">
+ Must-Have Locations (Optional)
+ </label>
<div className="flex gap-2">
<Input
type="number"
@@ -142,12 +159,16 @@ export function ControlPanel({
</Button>
</div>
<FileUpload onUpload={onMustHaveLocationsChange} />
- <div className="text-sm text-muted-foreground">{mustHaveLocations.length} locations added</div>
+ <div className="text-sm text-muted-foreground">
+ {mustHaveLocations.length} locations added
+ </div>
</div>
{/* Minimum Distance */}
<div className="space-y-2">
- <label className="text-sm font-medium">Minimum Distance (km) (Optional)</label>
+ <label className="text-sm font-medium">
+ Minimum Distance (km) (Optional)
+ </label>
<Input
type="number"
min="0.1"
@@ -160,7 +181,9 @@ export function ControlPanel({
{/* Number of Sensors */}
<div className="space-y-2">
- <label className="text-sm font-medium">Number of Sensors (Required)</label>
+ <label className="text-sm font-medium">
+ Number of Sensors (Required)
+ </label>
<Input
type="number"
min="1"
@@ -188,6 +211,5 @@ export function ControlPanel({
)}
</Button>
</div>
- )
+ );
}
-
diff --git a/frontend/src/components/Controls/FileUpload.tsx b/frontend/src/components/Controls/FileUpload.tsx
index 2908346..d55f5f6 100644
--- a/frontend/src/components/Controls/FileUpload.tsx
+++ b/frontend/src/components/Controls/FileUpload.tsx
@@ -1,18 +1,21 @@
-import { useRef, useState } from 'react';
-import { Button } from '@/ui/button';
-import { Upload } from 'lucide-react';
-import Papa from 'papaparse';
-import { useToast } from '@/ui/use-toast';
-import type { Location, FileUploadProps } from '@/lib/types';
+import { useRef, useState } from "react";
+import { Button } from "@/ui/button";
+import { Upload } from "lucide-react";
+import Papa from "papaparse";
+import { useToast } from "@/ui/use-toast";
+import type { Location, FileUploadProps } from "@/lib/types";
const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
-const ACCEPTED_FILE_TYPE = 'text/csv';
+// const ACCEPTED_FILE_TYPE = 'text/csv';
const normalizeColumnName = (name: string): string =>
- name.trim().toLowerCase().replace(/[^a-z0-9]/g, '');
+ name
+ .trim()
+ .toLowerCase()
+ .replace(/[^a-z0-9]/g, "");
-const latitudeAliases = new Set(['lat', 'latitude']);
-const longitudeAliases = new Set(['lng', 'lon', 'longitude']);
+const latitudeAliases = new Set(["lat", "latitude"]);
+const longitudeAliases = new Set(["lng", "lon", "longitude"]);
export function FileUpload({ onUpload }: FileUploadProps) {
const fileInputRef = useRef<HTMLInputElement>(null);
@@ -31,41 +34,50 @@ export function FileUpload({ onUpload }: FileUploadProps) {
try {
const headers = meta.fields?.map(normalizeColumnName) || [];
- if (!headers.length) throw new Error('CSV file has no headers.');
+ if (!headers.length) throw new Error("CSV file has no headers.");
const latHeader = headers.find((h) => latitudeAliases.has(h));
const lngHeader = headers.find((h) => longitudeAliases.has(h));
if (!latHeader && !lngHeader) {
- throw new Error('Missing both latitude and longitude columns.');
+ throw new Error("Missing both latitude and longitude columns.");
} else if (!latHeader) {
- throw new Error('Missing latitude column.');
+ throw new Error("Missing latitude column.");
} else if (!lngHeader) {
- throw new Error('Missing longitude column.');
+ throw new Error("Missing longitude column.");
}
const locations: Location[] = data
.map((row) => ({
- lat: parseFloat(row[latHeader] || ''),
- lng: parseFloat(row[lngHeader] || ''),
+ lat: parseFloat(row[latHeader] || ""),
+ lng: parseFloat(row[lngHeader] || ""),
}))
.filter(({ lat, lng }) => !isNaN(lat) && !isNaN(lng));
- if (!locations.length) throw new Error('No valid latitude/longitude pairs found.');
+ if (!locations.length)
+ throw new Error("No valid latitude/longitude pairs found.");
onUpload(locations);
- toast({ title: 'Success', description: `Imported ${locations.length} locations.` });
+ toast({
+ title: "Success",
+ description: `Imported ${locations.length} locations.`,
+ });
} catch (error) {
toast({
- title: 'Error',
- description: error instanceof Error ? error.message : 'Failed to parse CSV.',
- variant: 'destructive',
+ title: "Error",
+ description:
+ error instanceof Error ? error.message : "Failed to parse CSV.",
+ variant: "destructive",
});
}
},
error: () => {
setIsLoading(false);
- toast({ title: 'Error', description: 'Failed to read CSV file.', variant: 'destructive' });
+ toast({
+ title: "Error",
+ description: "Failed to read CSV file.",
+ variant: "destructive",
+ });
},
});
};
@@ -75,7 +87,11 @@ export function FileUpload({ onUpload }: FileUploadProps) {
if (!file) return;
if (file.size > MAX_FILE_SIZE) {
- toast({ title: 'Error', description: 'File size exceeds 5MB limit.', variant: 'destructive' });
+ toast({
+ title: "Error",
+ description: "File size exceeds 5MB limit.",
+ variant: "destructive",
+ });
return;
}
@@ -84,7 +100,13 @@ export function FileUpload({ onUpload }: FileUploadProps) {
return (
<div>
- <input type="file" ref={fileInputRef} onChange={handleFileChange} accept=".csv" className="hidden" />
+ <input
+ type="file"
+ ref={fileInputRef}
+ onChange={handleFileChange}
+ accept=".csv"
+ className="hidden"
+ />
<Button
variant="outline"
className="flex items-center justify-center w-full bg-blue-600 hover:bg-blue-700 text-white"
@@ -93,7 +115,7 @@ export function FileUpload({ onUpload }: FileUploadProps) {
aria-label="Upload CSV file"
>
<Upload className="mr-2 h-4 w-4" />
- {isLoading ? 'Uploading...' : 'Upload CSV'}
+ {isLoading ? "Uploading..." : "Upload CSV"}
</Button>
</div>
);
diff --git a/frontend/src/components/Controls/SearchBar.tsx b/frontend/src/components/Controls/SearchBar.tsx
index 074be6e..1acaa0e 100644
--- a/frontend/src/components/Controls/SearchBar.tsx
+++ b/frontend/src/components/Controls/SearchBar.tsx
@@ -3,7 +3,7 @@ import { Input } from "@/ui/input";
import { Button } from "@/ui/button";
import { Search, X } from "lucide-react";
import { useToast } from "@/ui/use-toast";
-import { Location } from "@/lib/types";
+import { Location } from "@/lib/types";
interface SearchBarProps {
onSearch: (query: string) => void;
@@ -12,7 +12,9 @@ interface SearchBarProps {
export function SearchBar({ onSearch, onBoundaryFound }: SearchBarProps) {
const [query, setQuery] = useState("");
- const [suggestions, setSuggestions] = useState<{ name: string; osm_id: number }[]>([]);
+ const [suggestions, setSuggestions] = useState<
+ { name: string; osm_id: number }[]
+ >([]);
const [isLoading, setIsLoading] = useState(false);
const { toast } = useToast();
@@ -26,10 +28,17 @@ export function SearchBar({ onSearch, onBoundaryFound }: SearchBarProps) {
try {
const response = await fetch(
- `https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(query)}&format=json&limit=5`
+ `https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(
+ query
+ )}&format=json&limit=5`
);
const data = await response.json();
- setSuggestions(data.map((item: any) => ({ name: item.display_name, osm_id: item.osm_id })));
+ setSuggestions(
+ data.map((item: any) => ({
+ name: item.display_name,
+ osm_id: item.osm_id,
+ }))
+ );
} catch (error) {
console.error("Error fetching suggestions:", error);
}
@@ -40,7 +49,10 @@ export function SearchBar({ onSearch, onBoundaryFound }: SearchBarProps) {
}, [query]);
// Handle search (when user submits form or selects a suggestion)
- const searchLocation = async (selectedQuery?: string, selectedOsmId?: number) => {
+ const searchLocation = async (
+ selectedQuery?: string,
+ selectedOsmId?: number
+ ) => {
const searchQuery = selectedQuery || query;
if (!searchQuery.trim()) return;
@@ -49,12 +61,18 @@ export function SearchBar({ onSearch, onBoundaryFound }: SearchBarProps) {
try {
const searchResponse = await fetch(
- `https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(searchQuery)}&format=json&polygon_geojson=1&limit=1`
+ `https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(
+ searchQuery
+ )}&format=json&polygon_geojson=1&limit=1`
);
const searchResults = await searchResponse.json();
if (searchResults.length === 0) {
- toast({ title: "Location not found", description: "Try another search term.", variant: "destructive" });
+ toast({
+ title: "Location not found",
+ description: "Try another search term.",
+ variant: "destructive",
+ });
return;
}
@@ -67,7 +85,9 @@ export function SearchBar({ onSearch, onBoundaryFound }: SearchBarProps) {
const boundaryData = await boundaryResponse.json();
if (boundaryData[0]?.geojson?.coordinates?.[0]) {
- const boundary = boundaryData[0].geojson.coordinates[0].map(([lng, lat]: number[]) => ({ lat, lng }));
+ const boundary = boundaryData[0].geojson.coordinates[0].map(
+ ([lng, lat]: number[]) => ({ lat, lng })
+ );
onBoundaryFound(boundary);
onSearch(searchQuery);
@@ -77,12 +97,24 @@ export function SearchBar({ onSearch, onBoundaryFound }: SearchBarProps) {
window.map.setView([center.lat, center.lng], 12);
}
- toast({ title: "Location found", description: `Boundary drawn for ${searchResults[0].display_name}` });
+ toast({
+ title: "Location found",
+ description: `Boundary drawn for ${searchResults[0].display_name}`,
+ });
} else {
- toast({ title: "Boundary not found", description: "No boundary data available", variant: "destructive" });
+ toast({
+ title: "Boundary not found",
+ description: "No boundary data available",
+ variant: "destructive",
+ });
}
} catch (error) {
- toast({ title: "Error", description: "Failed to search location", variant: "destructive" });
+ console.log("Error searching location:", error);
+ toast({
+ title: "Error",
+ description: "Failed to search location",
+ variant: "destructive",
+ });
} finally {
setIsLoading(false);
}
@@ -90,7 +122,13 @@ export function SearchBar({ onSearch, onBoundaryFound }: SearchBarProps) {
return (
<div className="relative w-full">
- <form onSubmit={(e) => { e.preventDefault(); searchLocation(); }} className="flex gap-2">
+ <form
+ onSubmit={(e) => {
+ e.preventDefault();
+ searchLocation();
+ }}
+ className="flex gap-2"
+ >
<Input
type="text"
placeholder="Search location (e.g., Kampala)..."
@@ -109,7 +147,12 @@ export function SearchBar({ onSearch, onBoundaryFound }: SearchBarProps) {
<X className="h-4 w-4" />
</Button>
)}
- <Button type="submit" size="icon" disabled={isLoading || !query.trim()} className="bg-blue-500 hover:bg-blue-600 text-white flex items-center justify-center">
+ <Button
+ type="submit"
+ size="icon"
+ disabled={isLoading || !query.trim()}
+ className="bg-blue-500 hover:bg-blue-600 text-white flex items-center justify-center"
+ >
<Search className="h-4 w-4" />
</Button>
</form>
diff --git a/frontend/src/components/hooks/use-toast.ts b/frontend/src/components/hooks/use-toast.ts
index b390744..1660d52 100644
--- a/frontend/src/components/hooks/use-toast.ts
+++ b/frontend/src/components/hooks/use-toast.ts
@@ -1,75 +1,72 @@
-import * as React from "react"
+import * as React from "react";
-import type {
- ToastActionElement,
- ToastProps,
-} from "@/ui/toast"
+import type { ToastActionElement, ToastProps } from "@/ui/toast";
-const TOAST_LIMIT = 1
-const TOAST_REMOVE_DELAY = 1000000
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
type ToasterToast = ToastProps & {
- id: string
- title?: React.ReactNode
- description?: React.ReactNode
- action?: ToastActionElement
-}
+ id: string;
+ title?: React.ReactNode;
+ description?: React.ReactNode;
+ action?: ToastActionElement;
+};
-const actionTypes = {
+export const actionTypes = {
ADD_TOAST: "ADD_TOAST",
UPDATE_TOAST: "UPDATE_TOAST",
DISMISS_TOAST: "DISMISS_TOAST",
REMOVE_TOAST: "REMOVE_TOAST",
-} as const
+} as const;
-let count = 0
+let count = 0;
function genId() {
- count = (count + 1) % Number.MAX_SAFE_INTEGER
- return count.toString()
+ count = (count + 1) % Number.MAX_SAFE_INTEGER;
+ return count.toString();
}
-type ActionType = typeof actionTypes
+export type ActionType = typeof actionTypes;
type Action =
| {
- type: ActionType["ADD_TOAST"]
- toast: ToasterToast
+ type: ActionType["ADD_TOAST"];
+ toast: ToasterToast;
}
| {
- type: ActionType["UPDATE_TOAST"]
- toast: Partial<ToasterToast>
+ type: ActionType["UPDATE_TOAST"];
+ toast: Partial<ToasterToast>;
}
| {
- type: ActionType["DISMISS_TOAST"]
- toastId?: ToasterToast["id"]
+ type: ActionType["DISMISS_TOAST"];
+ toastId?: ToasterToast["id"];
}
| {
- type: ActionType["REMOVE_TOAST"]
- toastId?: ToasterToast["id"]
- }
+ type: ActionType["REMOVE_TOAST"];
+ toastId?: ToasterToast["id"];
+ };
interface State {
- toasts: ToasterToast[]
+ toasts: ToasterToast[];
}
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
const addToRemoveQueue = (toastId: string) => {
if (toastTimeouts.has(toastId)) {
- return
+ return;
}
const timeout = setTimeout(() => {
- toastTimeouts.delete(toastId)
+ toastTimeouts.delete(toastId);
dispatch({
type: "REMOVE_TOAST",
toastId: toastId,
- })
- }, TOAST_REMOVE_DELAY)
+ });
+ }, TOAST_REMOVE_DELAY);
- toastTimeouts.set(toastId, timeout)
-}
+ toastTimeouts.set(toastId, timeout);
+};
export const reducer = (state: State, action: Action): State => {
switch (action.type) {
@@ -77,7 +74,7 @@ export const reducer = (state: State, action: Action): State => {
return {
...state,
toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
- }
+ };
case "UPDATE_TOAST":
return {
@@ -85,19 +82,19 @@ export const reducer = (state: State, action: Action): State => {
toasts: state.toasts.map((t) =>
t.id === action.toast.id ? { ...t, ...action.toast } : t
),
- }
+ };
case "DISMISS_TOAST": {
- const { toastId } = action
+ const { toastId } = action;
// ! Side effects ! - This could be extracted into a dismissToast() action,
// but I'll keep it here for simplicity
if (toastId) {
- addToRemoveQueue(toastId)
+ addToRemoveQueue(toastId);
} else {
state.toasts.forEach((toast) => {
- addToRemoveQueue(toast.id)
- })
+ addToRemoveQueue(toast.id);
+ });
}
return {
@@ -110,44 +107,44 @@ export const reducer = (state: State, action: Action): State => {
}
: t
),
- }
+ };
}
case "REMOVE_TOAST":
if (action.toastId === undefined) {
return {
...state,
toasts: [],
- }
+ };
}
return {
...state,
toasts: state.toasts.filter((t) => t.id !== action.toastId),
- }
+ };
}
-}
+};
-const listeners: Array<(state: State) => void> = []
+const listeners: Array<(state: State) => void> = [];
-let memoryState: State = { toasts: [] }
+let memoryState: State = { toasts: [] };
function dispatch(action: Action) {
- memoryState = reducer(memoryState, action)
+ memoryState = reducer(memoryState, action);
listeners.forEach((listener) => {
- listener(memoryState)
- })
+ listener(memoryState);
+ });
}
-type Toast = Omit<ToasterToast, "id">
+type Toast = Omit<ToasterToast, "id">;
function toast({ ...props }: Toast) {
- const id = genId()
+ const id = genId();
const update = (props: ToasterToast) =>
dispatch({
type: "UPDATE_TOAST",
toast: { ...props, id },
- })
- const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+ });
+ const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
dispatch({
type: "ADD_TOAST",
@@ -156,36 +153,36 @@ function toast({ ...props }: Toast) {
id,
open: true,
onOpenChange: (open) => {
- if (!open) dismiss()
+ if (!open) dismiss();
},
},
- })
+ });
return {
id: id,
dismiss,
update,
- }
+ };
}
function useToast() {
- const [state, setState] = React.useState<State>(memoryState)
+ const [state, setState] = React.useState<State>(memoryState);
React.useEffect(() => {
- listeners.push(setState)
+ listeners.push(setState);
return () => {
- const index = listeners.indexOf(setState)
+ const index = listeners.indexOf(setState);
if (index > -1) {
- listeners.splice(index, 1)
+ listeners.splice(index, 1);
}
- }
- }, [state])
+ };
+ }, [state]);
return {
...state,
toast,
dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
- }
+ };
}
-export { useToast, toast }
+export { useToast, toast };
diff --git a/frontend/src/components/map/LeafletMap.tsx b/frontend/src/components/map/LeafletMap.tsx
index 801d284..0d893e6 100644
--- a/frontend/src/components/map/LeafletMap.tsx
+++ b/frontend/src/components/map/LeafletMap.tsx
@@ -1,6 +1,6 @@
import "leaflet/dist/leaflet.css";
import React, { useEffect, useRef, useState, useMemo } from "react";
-import ReactDOM from 'react-dom/client';
+import ReactDOM from "react-dom/client";
import { MapContainer, TileLayer, useMap } from "react-leaflet";
import Image from "next/image";
import L from "leaflet";
@@ -43,10 +43,10 @@ interface SatelliteData {
const isSatelliteData = (data: any): data is SatelliteData => {
return (
data &&
- typeof data.latitude === 'number' &&
- typeof data.longitude === 'number' &&
- typeof data.pm2_5_prediction === 'number' &&
- typeof data.timestamp === 'string'
+ typeof data.latitude === "number" &&
+ typeof data.longitude === "number" &&
+ typeof data.pm2_5_prediction === "number" &&
+ typeof data.timestamp === "string"
);
};
@@ -54,19 +54,48 @@ const isSatelliteData = (data: any): data is SatelliteData => {
const getAirQualityInfo = (pm25: number | null) => {
// Handle invalid or null PM2.5 values
if (pm25 === null || isNaN(pm25)) {
- return {
- level: 'Invalid Data',
- image: Invalid,
- color: 'bg-white border-gray-200'
+ return {
+ level: "Invalid Data",
+ image: Invalid,
+ color: "bg-white border-gray-200",
};
}
- if (pm25 <= 9) return { level: 'Good', image: GoodAir, color: 'bg-white border-green-200' };
- if (pm25 <= 35.4) return { level: 'Moderate', image: Moderate, color: 'bg-white border-yellow-200' };
- if (pm25 <= 55.4) return { level: 'Unhealthy for Sensitive Groups', image: UnhealthySG, color: 'bg-white border-orange-200' };
- if (pm25 <= 125.4) return { level: 'Unhealthy', image: Unhealthy, color: 'bg-white border-red-200' };
- if (pm25 <= 225.4) return { level: 'Very Unhealthy', image: VeryUnhealthy, color: 'bg-white border-purple-200' };
- return { level: 'Hazardous', image: Hazardous, color: 'bg-white border-red-300' };
+ if (pm25 <= 9)
+ return {
+ level: "Good",
+ image: GoodAir,
+ color: "bg-white border-green-200",
+ };
+ if (pm25 <= 35.4)
+ return {
+ level: "Moderate",
+ image: Moderate,
+ color: "bg-white border-yellow-200",
+ };
+ if (pm25 <= 55.4)
+ return {
+ level: "Unhealthy for Sensitive Groups",
+ image: UnhealthySG,
+ color: "bg-white border-orange-200",
+ };
+ if (pm25 <= 125.4)
+ return {
+ level: "Unhealthy",
+ image: Unhealthy,
+ color: "bg-white border-red-200",
+ };
+ if (pm25 <= 225.4)
+ return {
+ level: "Very Unhealthy",
+ image: VeryUnhealthy,
+ color: "bg-white border-purple-200",
+ };
+ return {
+ level: "Hazardous",
+ image: Hazardous,
+ color: "bg-white border-red-300",
+ };
};
// Create a component for the popup content
@@ -75,10 +104,14 @@ const PopupContent: React.FC<{
data: Partial<SatelliteData>;
onClose: () => void;
}> = ({ label, data, onClose }) => {
- const { level, image, color } = getAirQualityInfo(data.pm2_5_prediction ?? null);
-
+ const { level, image, color } = getAirQualityInfo(
+ data.pm2_5_prediction ?? null
+ );
+
// Safely format timestamp
- const timestamp = data.timestamp ? new Date(data.timestamp).toLocaleString() : 'Unknown';
+ const timestamp = data.timestamp
+ ? new Date(data.timestamp).toLocaleString()
+ : "Unknown";
return (
<div className={`min-w-[200px] p-3 rounded-lg ${color} border`}>
@@ -94,23 +127,16 @@ const PopupContent: React.FC<{
priority
/>
</div>
- <button
- className="text-gray-500 hover:text-gray-700"
- onClick={onClose}
- >
+ <button className="text-gray-500 hover:text-gray-700" onClick={onClose}>
✕
</button>
</div>
<div className="text-sm font-medium mb-2">{label}</div>
- <div className="text-lg font-semibold mb-1">
- {level}
- </div>
+ <div className="text-lg font-semibold mb-1">{level}</div>
<div className="text-sm text-gray-700">
- PM2.5: {data.pm2_5_prediction?.toFixed(1) ?? 'N/A'} µg/m³
- </div>
- <div className="text-xs text-gray-500 mt-2">
- Updated {timestamp}
+ PM2.5: {data.pm2_5_prediction?.toFixed(1) ?? "N/A"} µg/m³
</div>
+ <div className="text-xs text-gray-500 mt-2">Updated {timestamp}</div>
</div>
);
};
@@ -125,10 +151,7 @@ const LoadingPopupContent: React.FC<{
<div className="w-8 h-8">
<div className="animate-pulse bg-gray-200 h-full w-full rounded-full" />
</div>
- <button
- className="text-gray-500 hover:text-gray-700"
- onClick={onClose}
- >
+ <button className="text-gray-500 hover:text-gray-700" onClick={onClose}>
✕
</button>
</div>
@@ -145,7 +168,7 @@ const ErrorPopupContent: React.FC<{
label: string;
onClose: () => void;
errorMessage?: string;
-}> = ({ label, onClose, errorMessage = 'Error loading air quality data' }) => (
+}> = ({ label, onClose, errorMessage = "Error loading air quality data" }) => (
<div className="min-w-[200px] p-3 rounded-lg bg-gray-100 border border-gray-200">
<div className="flex items-center justify-between mb-2">
<div className="w-12 h-12 relative">
@@ -159,23 +182,18 @@ const ErrorPopupContent: React.FC<{
priority
/>
</div>
- <button
- className="text-gray-500 hover:text-gray-700"
- onClick={onClose}
- >
+ <button className="text-gray-500 hover:text-gray-700" onClick={onClose}>
✕
</button>
</div>
<div className="text-sm font-medium mb-2">{label}</div>
- <div className="text-sm text-gray-700">
- {errorMessage}
- </div>
+ <div className="text-sm text-gray-700">{errorMessage}</div>
</div>
);
// Add this CSS class to override default Leaflet popup styles
const customPopupOptions = {
- className: 'custom-popup',
+ className: "custom-popup",
closeButton: false,
maxWidth: 300,
minWidth: 200,
@@ -214,28 +232,29 @@ const SearchControl: React.FC<{
);
// Create and add the search icon
- const searchIcon = document.createElement('div');
+ const searchIcon = document.createElement("div");
searchIcon.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
`;
- searchIcon.className = 'absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none';
+ searchIcon.className =
+ "absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none";
searchBar.appendChild(searchIcon);
// Adjust the search input padding to accommodate the icon
- const searchInput = searchBar.querySelector('input');
+ const searchInput = searchBar.querySelector("input");
if (searchInput) {
- searchInput.style.paddingLeft = '2.5rem';
+ searchInput.style.paddingLeft = "2.5rem";
// Add some additional styling to the input
searchInput.classList.add(
- 'w-full',
- 'pl-10',
- 'pr-4',
- 'py-2',
- 'rounded-md',
- 'focus:outline-none',
- 'focus:border-transparent'
+ "w-full",
+ "pl-10",
+ "pr-4",
+ "py-2",
+ "rounded-md",
+ "focus:outline-none",
+ "focus:border-transparent"
);
}
}
@@ -258,17 +277,17 @@ const SearchControl: React.FC<{
map.on("geosearch/showlocation", async (result: any) => {
try {
const { x, y, label } = result.location;
-
- if (typeof x !== 'number' || typeof y !== 'number' || !label) {
- throw new Error('Invalid location data');
+
+ if (typeof x !== "number" || typeof y !== "number" || !label) {
+ throw new Error("Invalid location data");
}
-
+
// Center the map on the selected location with animation
map.setView([y, x], 13, {
animate: true,
- duration: 1
+ duration: 1,
});
-
+
markersRef.current.forEach((marker) => marker.remove());
markersRef.current = [];
@@ -276,21 +295,23 @@ const SearchControl: React.FC<{
markersRef.current.push(marker);
// Create a container div for the popup
- const container = document.createElement('div');
-
+ const container = document.createElement("div");
+
// Render loading state
const root = ReactDOM.createRoot(container);
root.render(
- <LoadingPopupContent
- label={label}
+ <LoadingPopupContent
+ label={label}
onClose={() => {
marker.closePopup();
root.unmount();
- }}
+ }}
/>
);
- marker.bindPopup(container, { ...customPopupOptions, offset: [0, 0] }).openPopup();
+ marker
+ .bindPopup(container, { ...customPopupOptions, offset: [0, 0] })
+ .openPopup();
try {
const response = await getSatelliteData({
@@ -300,36 +321,39 @@ const SearchControl: React.FC<{
// Validate API response
if (!response || !isSatelliteData(response)) {
- throw new Error('Invalid API response format');
+ throw new Error("Invalid API response format");
}
// Update with actual data
root.render(
- <PopupContent
+ <PopupContent
label={label}
data={response}
onClose={() => marker.closePopup()}
/>
);
-
} catch (error) {
- console.error('Error fetching air quality data:', error);
+ console.error("Error fetching air quality data:", error);
// Show error state with specific error message
root.render(
- <ErrorPopupContent
+ <ErrorPopupContent
label={label}
onClose={() => marker.closePopup()}
- errorMessage={error instanceof Error ? error.message : 'Failed to load air quality data'}
+ errorMessage={
+ error instanceof Error
+ ? error.message
+ : "Failed to load air quality data"
+ }
/>
);
}
} catch (error) {
- console.error('Error handling location:', error);
+ console.error("Error handling location:", error);
// Handle location processing errors
- const errorContainer = document.createElement('div');
+ const errorContainer = document.createElement("div");
const errorRoot = ReactDOM.createRoot(errorContainer);
errorRoot.render(
- <ErrorPopupContent
+ <ErrorPopupContent
label="Location Error"
onClose={() => {}}
errorMessage="Invalid location data received"
@@ -404,17 +428,17 @@ const LoadingIndicator: React.FC<LoadingState> = ({ isLoading, error }) => {
};
// Add a utility function for delay
-const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
// Create a function to fetch with retries
const fetchWithRetry = async (
- fetchFn: () => Promise<any>,
- retries = 3,
+ fetchFn: () => Promise<any>,
+ retries = 3,
initialDelay = 2000, // Start with 2 second delay
- backoffFactor = 1.5 // Increase delay by 1.5x each retry
+ backoffFactor = 1.5 // Increase delay by 1.5x each retry
) => {
let currentDelay = initialDelay;
-
+
for (let attempt = 0; attempt < retries; attempt++) {
try {
if (attempt > 0) {
@@ -432,7 +456,9 @@ const fetchWithRetry = async (
};
// Create a component for the map nodes
-const MapNodes: React.FC<{ onLoadingChange: (state: LoadingState) => void }> = ({ onLoadingChange }) => {
+const MapNodes: React.FC<{
+ onLoadingChange: (state: LoadingState) => void;
+}> = ({ onLoadingChange }) => {
const map = useMap();
const [nodes, setNodes] = useState<MapNode[]>([]);
const markersRef = useRef<L.Marker[]>([]);
@@ -452,31 +478,37 @@ const MapNodes: React.FC<{ onLoadingChange: (state: LoadingState) => void }> = (
const fetchNodes = async () => {
try {
onLoadingChange({ isLoading: true, error: null });
-
+
const data = await fetchWithRetry(
getMapNodes,
- 3, // Number of retries
+ 3, // Number of retries
2000, // Initial delay of 2 seconds
- 1.5 // Increase delay by 1.5x each retry
+ 1.5 // Increase delay by 1.5x each retry
);
if (data) {
// Filter out invalid nodes
const validNodes = data.filter(isValidNode);
if (validNodes.length === 0) {
- onLoadingChange({ isLoading: false, error: 'No valid data points found' });
+ onLoadingChange({
+ isLoading: false,
+ error: "No valid data points found",
+ });
return;
}
setNodes(validNodes);
onLoadingChange({ isLoading: false, error: null });
} else {
- onLoadingChange({ isLoading: false, error: 'Failed to load map data' });
+ onLoadingChange({
+ isLoading: false,
+ error: "Failed to load map data",
+ });
}
} catch (error) {
- console.error('Error fetching nodes:', error);
- onLoadingChange({
- isLoading: false,
- error: 'Error loading map data'
+ console.error("Error fetching nodes:", error);
+ onLoadingChange({
+ isLoading: false,
+ error: "Error loading map data",
});
}
};
@@ -484,7 +516,7 @@ const MapNodes: React.FC<{ onLoadingChange: (state: LoadingState) => void }> = (
fetchNodes();
return () => {
- markersRef.current.forEach(marker => marker.remove());
+ markersRef.current.forEach((marker) => marker.remove());
};
}, [map, onLoadingChange]);
@@ -493,41 +525,42 @@ const MapNodes: React.FC<{ onLoadingChange: (state: LoadingState) => void }> = (
try {
// Clear existing markers
- markersRef.current.forEach(marker => marker.remove());
+ markersRef.current.forEach((marker) => marker.remove());
markersRef.current = [];
// Create new markers for each node
- nodes.forEach(node => {
+ nodes.forEach((node) => {
try {
// Safely access properties with optional chaining and nullish coalescing
const latitude = node?.siteDetails?.approximate_latitude;
const longitude = node?.siteDetails?.approximate_longitude;
- const siteName = node?.siteDetails?.name || node?.siteDetails?.formatted_name || node?.siteDetails?.location_name || 'Unknown Location';
+ const siteName =
+ node?.siteDetails?.name ||
+ node?.siteDetails?.formatted_name ||
+ node?.siteDetails?.location_name ||
+ "Unknown Location";
const pm25Value = node?.pm2_5?.value;
const timestamp = node?.time;
- const aqiCategory = node?.aqi_category ?? 'Unknown';
-
+ const aqiCategory = node?.aqi_category ?? "Unknown";
+
// Skip if essential data is missing
if (!latitude || !longitude || pm25Value === undefined) {
- console.warn('Skipping node due to missing data:', node._id);
+ console.warn("Skipping node due to missing data:", node._id);
return;
}
// Create container for popup
- const container = document.createElement('div');
+ const container = document.createElement("div");
const root = ReactDOM.createRoot(container);
// Create marker with custom icon based on AQI category
- const marker = L.marker(
- [latitude, longitude],
- {
- icon: getCustomIcon(aqiCategory)
- }
- ).addTo(map);
+ const marker = L.marker([latitude, longitude], {
+ icon: getCustomIcon(aqiCategory),
+ }).addTo(map);
// Render popup content
root.render(
- <PopupContent
+ <PopupContent
label={siteName}
data={{
pm2_5_prediction: pm25Value ?? undefined,
@@ -543,13 +576,13 @@ const MapNodes: React.FC<{ onLoadingChange: (state: LoadingState) => void }> = (
// Bind popup to marker with custom options
marker.bindPopup(container, {
...customPopupOptions,
- offset: L.point(0, -20)
+ offset: L.point(0, -20),
});
// Only add mouseover event - remove mouseout event
- marker.on('mouseover', () => {
+ marker.on("mouseover", () => {
// Close other popups before opening this one
- markersRef.current.forEach(m => {
+ markersRef.current.forEach((m) => {
if (m !== marker) {
m.closePopup();
}
@@ -559,17 +592,17 @@ const MapNodes: React.FC<{ onLoadingChange: (state: LoadingState) => void }> = (
markersRef.current.push(marker);
} catch (error) {
- console.error('Error creating marker for node:', node._id, error);
+ console.error("Error creating marker for node:", node._id, error);
}
});
} catch (error) {
- console.error('Error updating markers:', error);
- onLoadingChange({
- isLoading: false,
- error: 'Error displaying map markers'
+ console.error("Error updating markers:", error);
+ onLoadingChange({
+ isLoading: false,
+ error: "Error displaying map markers",
});
}
- }, [nodes, map]);
+ }, [nodes, map, onLoadingChange]);
return null;
};
@@ -579,33 +612,33 @@ const Legend: React.FC = () => {
const pollutantLevels = useMemo(
() => [
{
- range: '0.0µg/m³ - 9.0µg/m³',
- label: 'Air Quality is Good',
+ range: "0.0µg/m³ - 9.0µg/m³",
+ label: "Air Quality is Good",
image: GoodAir,
},
{
- range: '9.1µg/m³ - 35.4µg/m³',
- label: 'Air Quality is Moderate',
+ range: "9.1µg/m³ - 35.4µg/m³",
+ label: "Air Quality is Moderate",
image: Moderate,
},
{
- range: '35.5µg/m³ - 55.4µg/m³',
- label: 'Air Quality is Unhealthy for Sensitive Groups',
+ range: "35.5µg/m³ - 55.4µg/m³",
+ label: "Air Quality is Unhealthy for Sensitive Groups",
image: UnhealthySG,
},
{
- range: '55.5µg/m³ - 125.4µg/m³',
- label: 'Air Quality is Unhealthy',
+ range: "55.5µg/m³ - 125.4µg/m³",
+ label: "Air Quality is Unhealthy",
image: Unhealthy,
},
{
- range: '125.5µg/m³ - 225.4µg/m³',
- label: 'Air Quality is Very Unhealthy',
+ range: "125.5µg/m³ - 225.4µg/m³",
+ label: "Air Quality is Very Unhealthy",
image: VeryUnhealthy,
},
{
- range: '225.5+ µg/m³',
- label: 'Air Quality is Hazardous',
+ range: "225.5+ µg/m³",
+ label: "Air Quality is Hazardous",
image: Hazardous,
},
],
@@ -617,10 +650,7 @@ const Legend: React.FC = () => {
<div className="leaflet-control bg-white p-2 rounded-full shadow-md">
<div className="flex flex-col gap-2">
{pollutantLevels.map((level, index) => (
- <div
- key={index}
- className="flex items-center gap-2 group relative"
- >
+ <div key={index} className="flex items-center gap-2 group relative">
<div className="w-8 h-8 relative cursor-pointer">
<Image
src={level.image}
@@ -648,14 +678,14 @@ const LeafletMap: React.FC = () => {
const defaultZoom = 4;
const [loadingState, setLoadingState] = useState<LoadingState>({
isLoading: false,
- error: null
+ error: null,
});
return (
<div className="relative w-full h-full">
- <LoadingIndicator
- isLoading={loadingState.isLoading}
- error={loadingState.error}
+ <LoadingIndicator
+ isLoading={loadingState.isLoading}
+ error={loadingState.error}
/>
<MapContainer
center={defaultCenter}
@@ -664,9 +694,12 @@ const LeafletMap: React.FC = () => {
>
<TileLayer
url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}"
- attribution='Tiles © Esri — Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012'
+ attribution="Tiles © Esri — Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012"
+ />
+ <SearchControl
+ defaultCenter={defaultCenter}
+ defaultZoom={defaultZoom}
/>
- <SearchControl defaultCenter={defaultCenter} defaultZoom={defaultZoom} />
<MapNodes onLoadingChange={setLoadingState} />
<Legend />
</MapContainer>
@@ -678,22 +711,22 @@ const LeafletMap: React.FC = () => {
const getCustomIcon = (aqiCategory: string) => {
let imageSrc;
switch (aqiCategory.toLowerCase()) {
- case 'good':
+ case "good":
imageSrc = GoodAir;
break;
- case 'moderate':
+ case "moderate":
imageSrc = Moderate;
break;
- case 'unhealthy for sensitive groups':
+ case "unhealthy for sensitive groups":
imageSrc = UnhealthySG;
break;
- case 'unhealthy':
+ case "unhealthy":
imageSrc = Unhealthy;
break;
- case 'very unhealthy':
+ case "very unhealthy":
imageSrc = VeryUnhealthy;
break;
- case 'hazardous':
+ case "hazardous":
imageSrc = Hazardous;
break;
default:
@@ -701,7 +734,7 @@ const getCustomIcon = (aqiCategory: string) => {
}
return L.icon({
- iconUrl: typeof imageSrc === 'string' ? imageSrc : imageSrc.src,
+ iconUrl: typeof imageSrc === "string" ? imageSrc : imageSrc.src,
iconSize: [40, 40],
iconAnchor: [20, 20],
popupAnchor: [0, -20],
diff --git a/frontend/src/components/map/MapComponent.tsx b/frontend/src/components/map/MapComponent.tsx
index c4bb6f9..df25ebe 100644
--- a/frontend/src/components/map/MapComponent.tsx
+++ b/frontend/src/components/map/MapComponent.tsx
@@ -1,86 +1,101 @@
-"use client"
-
-import { useEffect, useRef, useState } from "react"
-import { MapContainer, TileLayer, useMap, Marker, Polygon } from "react-leaflet"
-import L from "leaflet"
-import "leaflet/dist/leaflet.css"
-import type { Location } from "@/lib/types"
-import { NavigationControls } from "./NavigationControls"
-import { Button } from "@/ui/button"
-import { MapIcon } from "lucide-react"
-import { Popover, PopoverContent, PopoverTrigger } from "@/ui/popover"
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import {
+ MapContainer,
+ TileLayer,
+ useMap,
+ Marker,
+ Polygon,
+} from "react-leaflet";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+import type { Location } from "@/lib/types";
+import { NavigationControls } from "./NavigationControls";
+import { Button } from "@/ui/button";
+import { MapIcon } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/ui/popover";
// Fix for default markers
-delete (L.Icon.Default.prototype as any)._getIconUrl
+delete (L.Icon.Default.prototype as any)._getIconUrl;
// Create custom icons for different marker types
const blueIcon = new L.Icon({
- iconUrl: "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.png",
+ iconUrl:
+ "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.png",
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
- shadowUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png",
+ shadowUrl:
+ "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png",
shadowSize: [41, 41],
-})
+});
const greenIcon = new L.Icon({
- iconUrl: "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png",
+ iconUrl:
+ "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png",
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
- shadowUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png",
+ shadowUrl:
+ "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png",
shadowSize: [41, 41],
-})
+});
const mapStyles = {
streets: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
- satellite: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
-}
+ satellite:
+ "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
+};
-type MapStyle = keyof typeof mapStyles
+type MapStyle = keyof typeof mapStyles;
interface MapComponentProps {
- polygon: Location[]
- mustHaveLocations: Location[]
- suggestedLocations: Location[]
- onPolygonChange: (locations: Location[]) => void
- onLocationClick: (location: Location) => void
- isDrawing: boolean
+ polygon: Location[];
+ mustHaveLocations: Location[];
+ suggestedLocations: Location[];
+ onPolygonChange: (locations: Location[]) => void;
+ onLocationClick: (location: Location) => void;
+ isDrawing: boolean;
}
// Add map instance to window for global access
declare global {
interface Window {
- map: L.Map
+ map: L.Map;
}
}
function MapStyleControl() {
- const map = useMap()
- const [currentStyle, setCurrentStyle] = useState<MapStyle>("streets")
+ const map = useMap();
+ const [currentStyle, setCurrentStyle] = useState<MapStyle>("streets");
const changeStyle = (style: MapStyle) => {
- setCurrentStyle(style)
+ setCurrentStyle(style);
// Find and remove the existing tile layer
map.eachLayer((layer) => {
if (layer instanceof L.TileLayer) {
- map.removeLayer(layer)
+ map.removeLayer(layer);
}
- })
+ });
// Add the new tile layer
L.tileLayer(mapStyles[style], {
attribution:
style === "satellite"
? '© <a href="https://www.arcgis.com/">ESRI</a>'
: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
- }).addTo(map)
- }
+ }).addTo(map);
+ };
return (
<div className="absolute top-4 right-4 z-[1000]">
<Popover>
<PopoverTrigger asChild>
- <Button variant="outline" size="icon" className="h-10 w-10 bg-white shadow-lg">
+ <Button
+ variant="outline"
+ size="icon"
+ className="h-10 w-10 bg-white shadow-lg"
+ >
<MapIcon className="h-4 w-4" />
</Button>
</PopoverTrigger>
@@ -98,56 +113,56 @@ function MapStyleControl() {
</PopoverContent>
</Popover>
</div>
- )
+ );
}
function MapController() {
- const map = useMap()
+ const map = useMap();
useEffect(() => {
- window.map = map
- }, [map])
- return null
+ window.map = map;
+ }, [map]);
+ return null;
}
function DrawControl({
onPolygonChange,
}: {
- onPolygonChange: (locations: Location[]) => void
+ onPolygonChange: (locations: Location[]) => void;
}) {
- const map = useMap()
- const drawingRef = useRef<L.Polyline>()
- const locationsRef = useRef<Location[]>([])
+ const map = useMap();
+ const drawingRef = useRef<L.Polyline>();
+ const locationsRef = useRef<Location[]>([]);
useEffect(() => {
const handleClick = (e: L.LeafletMouseEvent) => {
- const newLocation = { lat: e.latlng.lat, lng: e.latlng.lng }
- locationsRef.current = [...locationsRef.current, newLocation]
+ const newLocation = { lat: e.latlng.lat, lng: e.latlng.lng };
+ locationsRef.current = [...locationsRef.current, newLocation];
if (!drawingRef.current) {
- drawingRef.current = L.polyline([], { color: "blue" }).addTo(map)
+ drawingRef.current = L.polyline([], { color: "blue" }).addTo(map);
}
- drawingRef.current.setLatLngs(locationsRef.current)
- onPolygonChange(locationsRef.current)
- }
+ drawingRef.current.setLatLngs(locationsRef.current);
+ onPolygonChange(locationsRef.current);
+ };
- map.on("click", handleClick)
+ map.on("click", handleClick);
return () => {
- map.off("click", handleClick)
- drawingRef.current?.remove()
- }
- }, [map, onPolygonChange])
+ map.off("click", handleClick);
+ drawingRef.current?.remove();
+ };
+ }, [map, onPolygonChange]);
- return null
+ return null;
}
-export function MapComponent({
+export default function MapComponent({
polygon,
mustHaveLocations,
suggestedLocations,
onPolygonChange,
- onLocationClick,
+ // onLocationClick,
isDrawing,
}: MapComponentProps) {
return (
@@ -167,7 +182,10 @@ export function MapComponent({
{isDrawing && <DrawControl onPolygonChange={onPolygonChange} />}
{polygon.length > 2 && (
- <Polygon positions={polygon.map((loc) => [loc.lat, loc.lng])} pathOptions={{ color: "blue" }} />
+ <Polygon
+ positions={polygon.map((loc) => [loc.lat, loc.lng])}
+ pathOptions={{ color: "blue" }}
+ />
)}
{mustHaveLocations.map((location, index) => (
@@ -189,6 +207,5 @@ export function MapComponent({
<NavigationControls isDrawing={isDrawing} onDrawingToggle={() => {}} />
</div>
- )
+ );
}
-
diff --git a/frontend/src/components/navigation/navigation.tsx b/frontend/src/components/navigation/navigation.tsx
index 04fa935..292f0cd 100644
--- a/frontend/src/components/navigation/navigation.tsx
+++ b/frontend/src/components/navigation/navigation.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
-import type React from "react"
-import Link from "next/link"
-import { usePathname } from "next/navigation"
-import { cn } from "@/lib/utils"
+import type React from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
const navItems = [
{ name: "Home", href: "/" },
@@ -11,10 +11,12 @@ const navItems = [
{ name: "Categorize", href: "/categorize" },
{ name: "Reports", href: "/reports" },
{ name: "About", href: "/about" },
-]
+];
-export default function Navigation({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
- const pathname = usePathname()
+export default function Navigation({
+ ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+ const pathname = usePathname();
return (
<header className="sticky top-0 z-50 bg-white border-b shadow-sm">
@@ -31,7 +33,7 @@ export default function Navigation({ className, ...props }: React.HTMLAttributes
className={cn(
"text-sm font-medium text-gray-600 hover:text-gray-900 relative py-2",
pathname === item.href &&
- "text-gray-900 after:absolute after:left-0 after:bottom-0 after:h-0.5 after:w-full after:bg-blue-600",
+ "text-gray-900 after:absolute after:left-0 after:bottom-0 after:h-0.5 after:w-full after:bg-blue-600"
)}
>
{item.name}
@@ -40,6 +42,5 @@ export default function Navigation({ className, ...props }: React.HTMLAttributes
</nav>
</div>
</header>
- )
+ );
}
-
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index a7d5d14..6ceeb03 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -1,23 +1,23 @@
-import axios from "axios"
-import { NextResponse } from "next/server"
-import { Location, SiteLocatorPayload, SiteLocatorResponse,
- SiteInformation, SiteLocation, SiteCategoryResponse,
- ControlPanelProps, GridOption, AirQualityReportPayload,
- AirQualityReportResponse, DiurnalData, MonthlyData,
- DailyMeanData, SatelliteDataPayload, SatelliteDataResponse,
- Grid, Site
-
- } from "./types"
-
+import {
+ SiteLocatorPayload,
+ SiteLocatorResponse,
+ SiteCategoryResponse,
+ AirQualityReportPayload,
+ AirQualityReportResponse,
+ Grid,
+} from "./types";
const API_TOKEN = process.env.NEXT_PUBLIC_API_TOKEN;
-const BASE_URL = process.env.NEXT_PUBLIC_API_URL;
+// const BASE_URL = process.env.NEXT_PUBLIC_API_URL;
const PUBLIC_LOCATE_API_URL = process.env.NEXT_PUBLIC_LOCATE_API_URL;
-const PUBLIC_SITE_CATEGORY_API_URL = process.env.NEXT_PUBLIC_SITE_CATEGORY_API_URL;
-const PUBLIC_AIR_QUALITY_REPORT_API_URL_LLM = process.env.NEXT_PUBLIC_AIR_QUALITY_REPORT_API_URL_LLM;
-const PUBLIC_SATELLITE_DATA_API_URL = process.env.NEXT_PUBLIC_SATELLITE_DATA_API_URL;
-const PUBLIC_DEVICE_DATA_API_URL = process.env.NEXT_PUBLIC_DEVICE_DATA_API_URL;
-const PUBLIC_GRID_SUMMARY_API_URL = process.env.NEXT_PUBLIC_GRID_SUMMARY_API_URL;
+const PUBLIC_SITE_CATEGORY_API_URL =
+ process.env.NEXT_PUBLIC_SITE_CATEGORY_API_URL;
+const PUBLIC_AIR_QUALITY_REPORT_API_URL_LLM =
+ process.env.NEXT_PUBLIC_AIR_QUALITY_REPORT_API_URL_LLM;
+// const PUBLIC_SATELLITE_DATA_API_URL = process.env.NEXT_PUBLIC_SATELLITE_DATA_API_URL;
+// const PUBLIC_DEVICE_DATA_API_URL = process.env.NEXT_PUBLIC_DEVICE_DATA_API_URL;
+const PUBLIC_GRID_SUMMARY_API_URL =
+ process.env.NEXT_PUBLIC_GRID_SUMMARY_API_URL;
const requiredEnvVars = {
API_TOKEN: process.env.NEXT_PUBLIC_API_TOKEN,
@@ -30,103 +30,130 @@ Object.entries(requiredEnvVars).forEach(([key, value]) => {
if (!value) throw new Error(`Missing required environment variable: ${key}`);
});
+export async function submitLocations(
+ payload: SiteLocatorPayload
+): Promise<SiteLocatorResponse> {
+ try {
+ if (!PUBLIC_LOCATE_API_URL || !API_TOKEN) {
+ throw new Error("API configuration missing");
+ }
+
+ console.log("Making API request to:", PUBLIC_LOCATE_API_URL);
+ console.log("Request payload:", payload);
-export async function submitLocations(payload: SiteLocatorPayload): Promise<SiteLocatorResponse> {
- try {
- if (!PUBLIC_LOCATE_API_URL || !API_TOKEN) {
- throw new Error('API configuration missing');
- }
-
- console.log('Making API request to:', PUBLIC_LOCATE_API_URL);
- console.log('Request payload:', payload);
-
- const response = await fetch(`${PUBLIC_LOCATE_API_URL}?token=${API_TOKEN}`, {
- method: 'POST',
+ const response = await fetch(
+ `${PUBLIC_LOCATE_API_URL}?token=${API_TOKEN}`,
+ {
+ method: "POST",
headers: {
- 'Content-Type': 'application/json',
- 'Accept': 'application/json',
+ "Content-Type": "application/json",
+ Accept: "application/json",
},
body: JSON.stringify(payload),
- });
-
- if (!response.ok) {
- const errorData = await response.text();
- console.error('API Error Response:', errorData);
- throw new Error(`API request failed: ${response.status} ${response.statusText}`);
}
-
- const data = await response.json();
- console.log('API Response data:', data);
- return data;
- } catch (error) {
- console.error('Error submitting locations:', error);
- throw error;
+ );
+
+ if (!response.ok) {
+ const errorData = await response.text();
+ console.error("API Error Response:", errorData);
+ throw new Error(
+ `API request failed: ${response.status} ${response.statusText}`
+ );
}
+
+ const data = await response.json();
+ console.log("API Response data:", data);
+ return data;
+ } catch (error) {
+ console.error("Error submitting locations:", error);
+ throw error;
}
-
- export async function getSiteCategory(latitude: number, longitude: number): Promise<SiteCategoryResponse> {
- try {
- if (!PUBLIC_SITE_CATEGORY_API_URL || !API_TOKEN) {
- throw new Error('API configuration missing');
- }
-
- console.log('Making site category API request for:', { latitude, longitude });
-
- const response = await fetch(
- `${PUBLIC_SITE_CATEGORY_API_URL}?latitude=${latitude}&longitude=${longitude}&token=${API_TOKEN}`
+}
+
+export async function getSiteCategory(
+ latitude: number,
+ longitude: number
+): Promise<SiteCategoryResponse> {
+ try {
+ if (!PUBLIC_SITE_CATEGORY_API_URL || !API_TOKEN) {
+ throw new Error("API configuration missing");
+ }
+
+ console.log("Making site category API request for:", {
+ latitude,
+ longitude,
+ });
+
+ const response = await fetch(
+ `${PUBLIC_SITE_CATEGORY_API_URL}?latitude=${latitude}&longitude=${longitude}&token=${API_TOKEN}`
+ );
+
+ if (!response.ok) {
+ const errorData = await response.text();
+ console.error("API Error Response:", errorData);
+ throw new Error(
+ `API request failed: ${response.status} ${response.statusText}`
);
-
- if (!response.ok) {
- const errorData = await response.text();
- console.error('API Error Response:', errorData);
- throw new Error(`API request failed: ${response.status} ${response.statusText}`);
- }
-
- const data = await response.json();
- console.log('Site category API Response:', data);
- return data;
- } catch (error) {
- console.error('Error getting site category:', error);
- throw error;
}
+
+ const data = await response.json();
+ console.log("Site category API Response:", data);
+ return data;
+ } catch (error) {
+ console.error("Error getting site category:", error);
+ throw error;
}
-
- export async function getAirQualityReport(payload: AirQualityReportPayload): Promise<AirQualityReportResponse> {
- try {
- const response = await fetch(`${PUBLIC_AIR_QUALITY_REPORT_API_URL_LLM}?token=${API_TOKEN}`, {
- method: 'POST',
+}
+
+export async function getAirQualityReport(
+ payload: AirQualityReportPayload
+): Promise<AirQualityReportResponse> {
+ try {
+ const response = await fetch(
+ `${PUBLIC_AIR_QUALITY_REPORT_API_URL_LLM}?token=${API_TOKEN}`,
+ {
+ method: "POST",
headers: {
- 'Content-Type': 'application/json',
+ "Content-Type": "application/json",
},
body: JSON.stringify(payload),
- });
-
- if (!response.ok) {
- const errorData = await response.text();
- console.error('API Error Response:', errorData);
- throw new Error(`API request failed: ${response.status} ${response.statusText}`);
}
-
- const data = await response.json();
- console.log('Air Quality Report Response:', data);
- return data;
- } catch (error) {
- console.error('Error getting air quality report:', error);
- throw error;
+ );
+
+ if (!response.ok) {
+ const errorData = await response.text();
+ console.error("API Error Response:", errorData);
+ throw new Error(
+ `API request failed: ${response.status} ${response.statusText}`
+ );
}
+
+ const data = await response.json();
+ console.log("Air Quality Report Response:", data);
+ return data;
+ } catch (error) {
+ console.error("Error getting air quality report:", error);
+ throw error;
}
-
-
- export async function fetchGrids(): Promise<Grid[]> {
- try {
- const response = await fetch(`${PUBLIC_GRID_SUMMARY_API_URL}?token=${API_TOKEN}`);
- if (!response.ok) {
- throw new Error(`Failed to fetch grids: ${response.status} ${response.statusText}`);
- }
- const data = await response.json();
- return data.grids;
- } catch (error) {
- console.error('Error fetching grids:', error);
- throw new Error('Failed to fetch grids: ' + (error instanceof Error ? error.message : 'Unknown error'));
+}
+
+export async function fetchGrids(): Promise<Grid[]> {
+ try {
+ const response = await fetch(
+ `${PUBLIC_GRID_SUMMARY_API_URL}?token=${API_TOKEN}`
+ );
+ if (!response.ok) {
+ throw new Error(
+ `Failed to fetch grids: ${response.status} ${response.statusText}`
+ );
}
- }
\ No newline at end of file
+ const data = await response.json();
+ return data.grids;
+ } catch (error) {
+ console.error("Error fetching grids:", error);
+ throw new Error(
+ "Failed to fetch grids: " +
+ (error instanceof Error ? error.message : "Unknown error")
+ );
+ }
+}
From 4017a3f3ddca8e43e9405fe47fea30ff41e24a3d Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Sun, 16 Feb 2025 19:49:17 +0300
Subject: [PATCH 21/55] textarea
---
frontend/src/ui/textarea.tsx | 24 ++++++++++++++++++++++++
1 file changed, 24 insertions(+)
create mode 100644 frontend/src/ui/textarea.tsx
diff --git a/frontend/src/ui/textarea.tsx b/frontend/src/ui/textarea.tsx
new file mode 100644
index 0000000..9f9a6dc
--- /dev/null
+++ b/frontend/src/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+ extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+ ({ className, ...props }, ref) => {
+ return (
+ <textarea
+ className={cn(
+ "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+ className
+ )}
+ ref={ref}
+ {...props}
+ />
+ )
+ }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }
From 0d2d4a7ad384fcd4a70e4191ae4b3b5d9afed927 Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Sun, 16 Feb 2025 19:50:38 +0300
Subject: [PATCH 22/55] text
---
frontend/src/ui/textarea.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/frontend/src/ui/textarea.tsx b/frontend/src/ui/textarea.tsx
index 9f9a6dc..ff31f52 100644
--- a/frontend/src/ui/textarea.tsx
+++ b/frontend/src/ui/textarea.tsx
@@ -21,4 +21,4 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
)
Textarea.displayName = "Textarea"
-export { Textarea }
+export { Textarea }
From be7d8209bcce200f848fbde016d5868b713284a6 Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Sun, 16 Feb 2025 19:51:25 +0300
Subject: [PATCH 23/55] categorise
---
frontend/src/app/categorize/page.tsx | 233 +++++++++++++++++++++++++++
frontend/src/ui/textarea.tsx | 2 +-
2 files changed, 234 insertions(+), 1 deletion(-)
create mode 100644 frontend/src/app/categorize/page.tsx
diff --git a/frontend/src/app/categorize/page.tsx b/frontend/src/app/categorize/page.tsx
new file mode 100644
index 0000000..0be2bf8
--- /dev/null
+++ b/frontend/src/app/categorize/page.tsx
@@ -0,0 +1,233 @@
+"use client";
+
+import { useState } from 'react';
+import { Button } from '@/ui/button';
+import { Input } from '@/ui/input';
+import { FileUpload } from '@/components/Controls/FileUpload';
+import { useToast } from '@/ui/use-toast';
+import { MapContainer, TileLayer, useMapEvents, Marker, Popup } from 'react-leaflet';
+import { getSiteCategory } from '@/lib/api';
+import { Location, SiteCategoryResponse } from '@/lib/types';
+import { Card } from '@/ui/card';
+import { Loader2 } from 'lucide-react';
+import Papa from 'papaparse';
+import Navigation from "@/components/navigation/navigation";
+import { Textarea } from '@/ui/textarea';
+import 'leaflet/dist/leaflet.css';
+
+interface SiteCategoryInfo extends Location {
+ category?: string;
+ area_name?: string;
+}
+
+export default function SiteCategory() {
+ const [sites, setSites] = useState<SiteCategoryInfo[]>([]);
+ const [loading, setLoading] = useState(false);
+ const [selectedSite, setSelectedSite] = useState<SiteCategoryInfo | null>(null);
+ const [manualInput, setManualInput] = useState('');
+ const { toast } = useToast();
+
+ const handleFileUpload = async (locations: Location[]) => {
+ setLoading(true);
+ const newSites: SiteCategoryInfo[] = [];
+
+ try {
+ for (const location of locations) {
+ const response = await getSiteCategory(location.lat, location.lng);
+ newSites.push({
+ ...location,
+ category: response.site['site-category'].category,
+ area_name: response.site['site-category'].area_name,
+ });
+ }
+
+ setSites(newSites);
+ toast({
+ title: 'Success',
+ description: `Processed ${newSites.length} sites`,
+ });
+ } catch (error) {
+ toast({
+ title: 'Error',
+ description: 'Failed to process sites',
+ variant: 'destructive',
+ });
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const handleMapClick = async (e: { latlng: { lat: number; lng: number } }) => {
+ try {
+ setLoading(true);
+ const { lat, lng } = e.latlng;
+ const response = await getSiteCategory(lat, lng);
+ const newSite = {
+ lat,
+ lng,
+ category: response.site['site-category'].category,
+ area_name: response.site['site-category'].area_name,
+ };
+ setSites([...sites, newSite]);
+ setSelectedSite(newSite);
+ } catch (error) {
+ toast({
+ title: 'Error',
+ description: 'Failed to get site category',
+ variant: 'destructive',
+ });
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const handleManualSubmit = async () => {
+ try {
+ setLoading(true);
+ const coordinates = manualInput
+ .split('\n')
+ .map(line => line.trim())
+ .filter(line => line)
+ .map(line => {
+ const [lat, lng] = line.split(',').map(num => parseFloat(num.trim()));
+ if (isNaN(lat) || isNaN(lng)) {
+ throw new Error('Invalid coordinates format');
+ }
+ return { lat, lng };
+ });
+
+ const newSites: SiteCategoryInfo[] = [];
+ for (const coord of coordinates) {
+ const response = await getSiteCategory(coord.lat, coord.lng);
+ newSites.push({
+ ...coord,
+ category: response.site['site-category'].category,
+ area_name: response.site['site-category'].area_name,
+ });
+ }
+
+ setSites([...sites, ...newSites]);
+ setManualInput('');
+ toast({
+ title: 'Success',
+ description: `Processed ${newSites.length} sites`,
+ });
+ } catch (error) {
+ toast({
+ title: 'Error',
+ description: 'Failed to process coordinates. Please ensure format is correct (latitude,longitude)',
+ variant: 'destructive',
+ });
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const MapEvents = () => {
+ useMapEvents({
+ click: handleMapClick,
+ });
+ return null;
+ };
+
+ const downloadCSV = () => {
+ const csv = Papa.unparse(sites);
+ const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+ const link = document.createElement('a');
+ link.href = URL.createObjectURL(blob);
+ link.download = 'site_categories.csv';
+ link.click();
+ };
+
+ return (
+ <div className="min-h-screen bg-background">
+ <Navigation />
+ <div className="flex h-screen pt-16">
+ <div className="flex-1">
+ <MapContainer
+ center={[1.3733, 32.2903]}
+ zoom={7}
+ className="h-full w-full"
+ >
+ <TileLayer
+ attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+ url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+ />
+ <MapEvents />
+ {sites.map((site, index) => (
+ <Marker
+ key={`${site.lat}-${site.lng}-${index}`}
+ position={[site.lat, site.lng]}
+ eventHandlers={{
+ click: () => setSelectedSite(site),
+ }}
+ >
+ <Popup>
+ <div className="p-2">
+ <p><strong>Category:</strong> {site.category}</p>
+ <p><strong>Area:</strong> {site.area_name}</p>
+ </div>
+ </Popup>
+ </Marker>
+ ))}
+ </MapContainer>
+ </div>
+
+ <div className="w-96 p-4 space-y-4">
+ <div className="space-y-4 mb-6">
+ <Button
+ onClick={downloadCSV}
+ disabled={sites.length === 0}
+ className="w-full"
+ >
+ Download CSV
+ </Button>
+ <FileUpload onUpload={handleFileUpload} />
+
+ <Card className="p-4">
+ <h3 className="font-medium mb-2">Add Multiple Locations</h3>
+ <p className="text-sm text-gray-500 mb-2">
+ Enter coordinates (one per line) in format: latitude,longitude
+ </p>
+ <Textarea
+ value={manualInput}
+ onChange={(e) => setManualInput(e.target.value)}
+ placeholder="0.3178311,32.5899529 0.318058,32.590206"
+ className="mb-2"
+ rows={5}
+ />
+ <Button
+ onClick={handleManualSubmit}
+ className="w-full"
+ disabled={!manualInput.trim()}
+ >
+ Process Coordinates
+ </Button>
+ </Card>
+ </div>
+
+ {selectedSite && (
+ <Card className="p-6 space-y-4">
+ <h2 className="text-xl font-bold">Site Information</h2>
+ <div>
+ <p><strong>Category:</strong> {selectedSite.category}</p>
+ <p><strong>Area Name:</strong> {selectedSite.area_name}</p>
+ <p><strong>Latitude:</strong> {selectedSite.lat.toFixed(6)}</p>
+ <p><strong>Longitude:</strong> {selectedSite.lng.toFixed(6)}</p>
+ </div>
+ </Card>
+ )}
+ </div>
+ </div>
+
+ {loading && (
+ <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-30">
+ <div className="bg-white p-4 rounded-lg flex items-center space-x-2">
+ <Loader2 className="h-6 w-4 animate-spin" />
+ <span>Processing...</span>
+ </div>
+ </div>
+ )}
+ </div>
+ );
+}
diff --git a/frontend/src/ui/textarea.tsx b/frontend/src/ui/textarea.tsx
index ff31f52..83caa9b 100644
--- a/frontend/src/ui/textarea.tsx
+++ b/frontend/src/ui/textarea.tsx
@@ -21,4 +21,4 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
)
Textarea.displayName = "Textarea"
-export { Textarea }
+export { Textarea }
\ No newline at end of file
From 707907b7e4f835ca26cfdb83f90a179e64996ff5 Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Sun, 16 Feb 2025 20:18:53 +0300
Subject: [PATCH 24/55] categoriser
---
frontend/src/app/categorize/page.tsx | 198 ++++++++++++++-------------
1 file changed, 106 insertions(+), 92 deletions(-)
diff --git a/frontend/src/app/categorize/page.tsx b/frontend/src/app/categorize/page.tsx
index 0be2bf8..eb2d602 100644
--- a/frontend/src/app/categorize/page.tsx
+++ b/frontend/src/app/categorize/page.tsx
@@ -1,6 +1,6 @@
"use client";
-import { useState } from 'react';
+import { useState, useCallback, useMemo } from 'react';
import { Button } from '@/ui/button';
import { Input } from '@/ui/input';
import { FileUpload } from '@/components/Controls/FileUpload';
@@ -14,6 +14,7 @@ import Papa from 'papaparse';
import Navigation from "@/components/navigation/navigation";
import { Textarea } from '@/ui/textarea';
import 'leaflet/dist/leaflet.css';
+import { debounce } from 'lodash';
interface SiteCategoryInfo extends Location {
category?: string;
@@ -27,21 +28,21 @@ export default function SiteCategory() {
const [manualInput, setManualInput] = useState('');
const { toast } = useToast();
+ // Handle file upload
const handleFileUpload = async (locations: Location[]) => {
setLoading(true);
- const newSites: SiteCategoryInfo[] = [];
-
try {
- for (const location of locations) {
- const response = await getSiteCategory(location.lat, location.lng);
- newSites.push({
- ...location,
- category: response.site['site-category'].category,
- area_name: response.site['site-category'].area_name,
- });
- }
-
- setSites(newSites);
+ const newSites = await Promise.all(
+ locations.map(async (location) => {
+ const response = await getSiteCategory(location.lat, location.lng);
+ return {
+ ...location,
+ category: response.site['site-category'].category,
+ area_name: response.site['site-category'].area_name,
+ };
+ })
+ );
+ setSites((prev) => [...prev, ...newSites]);
toast({
title: 'Success',
description: `Processed ${newSites.length} sites`,
@@ -57,56 +58,62 @@ export default function SiteCategory() {
}
};
- const handleMapClick = async (e: { latlng: { lat: number; lng: number } }) => {
- try {
- setLoading(true);
- const { lat, lng } = e.latlng;
- const response = await getSiteCategory(lat, lng);
- const newSite = {
- lat,
- lng,
- category: response.site['site-category'].category,
- area_name: response.site['site-category'].area_name,
- };
- setSites([...sites, newSite]);
- setSelectedSite(newSite);
- } catch (error) {
- toast({
- title: 'Error',
- description: 'Failed to get site category',
- variant: 'destructive',
- });
- } finally {
- setLoading(false);
- }
- };
+ // Handle map click with debouncing
+ const handleMapClick = useCallback(
+ debounce(async (e: { latlng: { lat: number; lng: number } }) => {
+ try {
+ setLoading(true);
+ const { lat, lng } = e.latlng;
+ const response = await getSiteCategory(lat, lng);
+ const newSite = {
+ lat,
+ lng,
+ category: response.site['site-category'].category,
+ area_name: response.site['site-category'].area_name,
+ };
+ setSites((prev) => [...prev, newSite]);
+ setSelectedSite(newSite);
+ } catch (error) {
+ toast({
+ title: 'Error',
+ description: 'Failed to get site category',
+ variant: 'destructive',
+ });
+ } finally {
+ setLoading(false);
+ }
+ }, 300),
+ []
+ );
+ // Handle manual input submission
const handleManualSubmit = async () => {
try {
setLoading(true);
const coordinates = manualInput
.split('\n')
- .map(line => line.trim())
- .filter(line => line)
- .map(line => {
- const [lat, lng] = line.split(',').map(num => parseFloat(num.trim()));
+ .map((line) => line.trim())
+ .filter((line) => line)
+ .map((line) => {
+ const [lat, lng] = line.split(',').map((num) => parseFloat(num.trim()));
if (isNaN(lat) || isNaN(lng)) {
throw new Error('Invalid coordinates format');
}
return { lat, lng };
});
- const newSites: SiteCategoryInfo[] = [];
- for (const coord of coordinates) {
- const response = await getSiteCategory(coord.lat, coord.lng);
- newSites.push({
- ...coord,
- category: response.site['site-category'].category,
- area_name: response.site['site-category'].area_name,
- });
- }
-
- setSites([...sites, ...newSites]);
+ const newSites = await Promise.all(
+ coordinates.map(async (coord) => {
+ const response = await getSiteCategory(coord.lat, coord.lng);
+ return {
+ ...coord,
+ category: response.site['site-category'].category,
+ area_name: response.site['site-category'].area_name,
+ };
+ })
+ );
+
+ setSites((prev) => [...prev, ...newSites]);
setManualInput('');
toast({
title: 'Success',
@@ -123,6 +130,27 @@ export default function SiteCategory() {
}
};
+ // Download CSV
+ const downloadCSV = () => {
+ try {
+ const csv = Papa.unparse(sites);
+ const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+ const link = document.createElement('a');
+ const objectUrl = URL.createObjectURL(blob);
+ link.href = objectUrl;
+ link.download = 'site_categories.csv';
+ link.click();
+ URL.revokeObjectURL(objectUrl);
+ } catch (error) {
+ toast({
+ title: 'Error',
+ description: 'Failed to download CSV',
+ variant: 'destructive',
+ });
+ }
+ };
+
+ // Map events component
const MapEvents = () => {
useMapEvents({
click: handleMapClick,
@@ -130,60 +158,50 @@ export default function SiteCategory() {
return null;
};
- const downloadCSV = () => {
- const csv = Papa.unparse(sites);
- const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
- const link = document.createElement('a');
- link.href = URL.createObjectURL(blob);
- link.download = 'site_categories.csv';
- link.click();
- };
+ // Memoized markers to avoid unnecessary re-renders
+ const markers = useMemo(
+ () =>
+ sites.map((site, index) => (
+ <Marker
+ key={`${site.lat}-${site.lng}-${index}`}
+ position={[site.lat, site.lng]}
+ eventHandlers={{
+ click: () => setSelectedSite(site),
+ }}
+ >
+ <Popup>
+ <div className="p-2">
+ <p><strong>Category:</strong> {site.category}</p>
+ <p><strong>Area:</strong> {site.area_name}</p>
+ </div>
+ </Popup>
+ </Marker>
+ )),
+ [sites]
+ );
return (
<div className="min-h-screen bg-background">
<Navigation />
<div className="flex h-screen pt-16">
<div className="flex-1">
- <MapContainer
- center={[1.3733, 32.2903]}
- zoom={7}
- className="h-full w-full"
- >
+ <MapContainer center={[1.3733, 32.2903]} zoom={7} className="h-full w-full">
<TileLayer
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<MapEvents />
- {sites.map((site, index) => (
- <Marker
- key={`${site.lat}-${site.lng}-${index}`}
- position={[site.lat, site.lng]}
- eventHandlers={{
- click: () => setSelectedSite(site),
- }}
- >
- <Popup>
- <div className="p-2">
- <p><strong>Category:</strong> {site.category}</p>
- <p><strong>Area:</strong> {site.area_name}</p>
- </div>
- </Popup>
- </Marker>
- ))}
+ {markers}
</MapContainer>
</div>
<div className="w-96 p-4 space-y-4">
<div className="space-y-4 mb-6">
- <Button
- onClick={downloadCSV}
- disabled={sites.length === 0}
- className="w-full"
- >
+ <Button onClick={downloadCSV} disabled={sites.length === 0} className="w-full">
Download CSV
</Button>
<FileUpload onUpload={handleFileUpload} />
-
+
<Card className="p-4">
<h3 className="font-medium mb-2">Add Multiple Locations</h3>
<p className="text-sm text-gray-500 mb-2">
@@ -196,11 +214,7 @@ export default function SiteCategory() {
className="mb-2"
rows={5}
/>
- <Button
- onClick={handleManualSubmit}
- className="w-full"
- disabled={!manualInput.trim()}
- >
+ <Button onClick={handleManualSubmit} className="w-full" disabled={!manualInput.trim()}>
Process Coordinates
</Button>
</Card>
@@ -230,4 +244,4 @@ export default function SiteCategory() {
)}
</div>
);
-}
+}
\ No newline at end of file
From 2554c84838781c60c3112d15b5d4b888f39ce692 Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Sun, 16 Feb 2025 22:27:39 +0300
Subject: [PATCH 25/55] processing
---
frontend/src/app/categorize/page.tsx | 284 ++++++++++++---------------
1 file changed, 131 insertions(+), 153 deletions(-)
diff --git a/frontend/src/app/categorize/page.tsx b/frontend/src/app/categorize/page.tsx
index eb2d602..5fc6666 100644
--- a/frontend/src/app/categorize/page.tsx
+++ b/frontend/src/app/categorize/page.tsx
@@ -1,20 +1,26 @@
"use client";
-import { useState, useCallback, useMemo } from 'react';
-import { Button } from '@/ui/button';
-import { Input } from '@/ui/input';
-import { FileUpload } from '@/components/Controls/FileUpload';
-import { useToast } from '@/ui/use-toast';
-import { MapContainer, TileLayer, useMapEvents, Marker, Popup } from 'react-leaflet';
-import { getSiteCategory } from '@/lib/api';
-import { Location, SiteCategoryResponse } from '@/lib/types';
-import { Card } from '@/ui/card';
-import { Loader2 } from 'lucide-react';
-import Papa from 'papaparse';
+import { useState } from "react";
+import { Button } from "@/ui/button";
+import { Input } from "@/ui/input";
+import { FileUpload } from "@/components/Controls/FileUpload";
+import { useToast } from "@/ui/use-toast";
+import {
+ MapContainer,
+ TileLayer,
+ useMapEvents,
+ Marker,
+ Popup,
+} from "react-leaflet";
+import { getSiteCategory } from "@/lib/api";
+import { Location, SiteCategoryResponse } from "@/lib/types";
+import { Card } from "@/ui/card";
+import { Loader2 } from "lucide-react";
+import Papa from "papaparse";
import Navigation from "@/components/navigation/navigation";
-import { Textarea } from '@/ui/textarea';
-import 'leaflet/dist/leaflet.css';
-import { debounce } from 'lodash';
+import { Textarea } from "@/ui/textarea";
+import { Download } from "lucide-react"; // Import the download icon
+import "leaflet/dist/leaflet.css";
interface SiteCategoryInfo extends Location {
category?: string;
@@ -24,133 +30,82 @@ interface SiteCategoryInfo extends Location {
export default function SiteCategory() {
const [sites, setSites] = useState<SiteCategoryInfo[]>([]);
const [loading, setLoading] = useState(false);
- const [selectedSite, setSelectedSite] = useState<SiteCategoryInfo | null>(null);
- const [manualInput, setManualInput] = useState('');
+ const [selectedSite, setSelectedSite] = useState<SiteCategoryInfo | null>(
+ null
+ );
+ const [manualInput, setManualInput] = useState("");
const { toast } = useToast();
- // Handle file upload
- const handleFileUpload = async (locations: Location[]) => {
- setLoading(true);
+ const fetchSiteCategory = async (lat: number, lng: number) => {
try {
- const newSites = await Promise.all(
- locations.map(async (location) => {
- const response = await getSiteCategory(location.lat, location.lng);
- return {
- ...location,
- category: response.site['site-category'].category,
- area_name: response.site['site-category'].area_name,
- };
- })
- );
- setSites((prev) => [...prev, ...newSites]);
- toast({
- title: 'Success',
- description: `Processed ${newSites.length} sites`,
- });
+ setLoading(true);
+ const response = await getSiteCategory(lat, lng);
+ return {
+ lat,
+ lng,
+ category: response.site["site-category"].category,
+ area_name: response.site["site-category"].area_name,
+ };
} catch (error) {
toast({
- title: 'Error',
- description: 'Failed to process sites',
- variant: 'destructive',
+ title: "Error",
+ description: "Failed to get site category",
+ variant: "destructive",
});
+ return null;
} finally {
setLoading(false);
}
};
- // Handle map click with debouncing
- const handleMapClick = useCallback(
- debounce(async (e: { latlng: { lat: number; lng: number } }) => {
- try {
- setLoading(true);
- const { lat, lng } = e.latlng;
- const response = await getSiteCategory(lat, lng);
- const newSite = {
- lat,
- lng,
- category: response.site['site-category'].category,
- area_name: response.site['site-category'].area_name,
- };
- setSites((prev) => [...prev, newSite]);
- setSelectedSite(newSite);
- } catch (error) {
- toast({
- title: 'Error',
- description: 'Failed to get site category',
- variant: 'destructive',
- });
- } finally {
- setLoading(false);
- }
- }, 300),
- []
- );
+ const handleMapClick = async (e: { latlng: { lat: number; lng: number } }) => {
+ const { lat, lng } = e.latlng;
+
+ // Avoid duplicate requests for the same location
+ if (sites.some((site) => site.lat === lat && site.lng === lng)) return;
+
+ const newSite = await fetchSiteCategory(lat, lng);
+ if (newSite) {
+ setSites((prevSites) => [...prevSites, newSite]);
+ setSelectedSite(newSite);
+ }
+ };
- // Handle manual input submission
const handleManualSubmit = async () => {
- try {
- setLoading(true);
- const coordinates = manualInput
- .split('\n')
- .map((line) => line.trim())
- .filter((line) => line)
- .map((line) => {
- const [lat, lng] = line.split(',').map((num) => parseFloat(num.trim()));
- if (isNaN(lat) || isNaN(lng)) {
- throw new Error('Invalid coordinates format');
- }
- return { lat, lng };
- });
-
- const newSites = await Promise.all(
- coordinates.map(async (coord) => {
- const response = await getSiteCategory(coord.lat, coord.lng);
- return {
- ...coord,
- category: response.site['site-category'].category,
- area_name: response.site['site-category'].area_name,
- };
- })
- );
-
- setSites((prev) => [...prev, ...newSites]);
- setManualInput('');
- toast({
- title: 'Success',
- description: `Processed ${newSites.length} sites`,
+ const coordinates = manualInput
+ .split("\n")
+ .map((line) => line.trim())
+ .filter((line) => line)
+ .map((line) => {
+ const [lat, lng] = line.split(",").map((num) => parseFloat(num.trim()));
+ if (isNaN(lat) || isNaN(lng)) {
+ throw new Error("Invalid coordinates format");
+ }
+ return { lat, lng };
});
- } catch (error) {
- toast({
- title: 'Error',
- description: 'Failed to process coordinates. Please ensure format is correct (latitude,longitude)',
- variant: 'destructive',
- });
- } finally {
- setLoading(false);
+
+ setLoading(true);
+ const newSites: SiteCategoryInfo[] = [];
+
+ for (const coord of coordinates) {
+ if (!sites.some((site) => site.lat === coord.lat && site.lng === coord.lng)) {
+ const newSite = await fetchSiteCategory(coord.lat, coord.lng);
+ if (newSite) newSites.push(newSite);
+ }
}
- };
- // Download CSV
- const downloadCSV = () => {
- try {
- const csv = Papa.unparse(sites);
- const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
- const link = document.createElement('a');
- const objectUrl = URL.createObjectURL(blob);
- link.href = objectUrl;
- link.download = 'site_categories.csv';
- link.click();
- URL.revokeObjectURL(objectUrl);
- } catch (error) {
+ if (newSites.length > 0) {
+ setSites((prevSites) => [...prevSites, ...newSites]);
toast({
- title: 'Error',
- description: 'Failed to download CSV',
- variant: 'destructive',
+ title: "Success",
+ description: `Processed ${newSites.length} sites`,
});
}
+
+ setManualInput("");
+ setLoading(false);
};
- // Map events component
const MapEvents = () => {
useMapEvents({
click: handleMapClick,
@@ -158,27 +113,14 @@ export default function SiteCategory() {
return null;
};
- // Memoized markers to avoid unnecessary re-renders
- const markers = useMemo(
- () =>
- sites.map((site, index) => (
- <Marker
- key={`${site.lat}-${site.lng}-${index}`}
- position={[site.lat, site.lng]}
- eventHandlers={{
- click: () => setSelectedSite(site),
- }}
- >
- <Popup>
- <div className="p-2">
- <p><strong>Category:</strong> {site.category}</p>
- <p><strong>Area:</strong> {site.area_name}</p>
- </div>
- </Popup>
- </Marker>
- )),
- [sites]
- );
+ const downloadCSV = () => {
+ const csv = Papa.unparse(sites);
+ const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+ const link = document.createElement("a");
+ link.href = URL.createObjectURL(blob);
+ link.download = "site_categories.csv";
+ link.click();
+ };
return (
<div className="min-h-screen bg-background">
@@ -191,16 +133,39 @@ export default function SiteCategory() {
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<MapEvents />
- {markers}
+ {sites.map((site, index) => (
+ <Marker
+ key={`${site.lat}-${site.lng}-${index}`}
+ position={[site.lat, site.lng]}
+ eventHandlers={{ click: () => setSelectedSite(site) }}
+ >
+ <Popup>
+ <div className="p-2">
+ <p>
+ <strong>Category:</strong> {site.category}
+ </p>
+ <p>
+ <strong>Area:</strong> {site.area_name}
+ </p>
+ </div>
+ </Popup>
+ </Marker>
+ ))}
</MapContainer>
</div>
<div className="w-96 p-4 space-y-4">
<div className="space-y-4 mb-6">
- <Button onClick={downloadCSV} disabled={sites.length === 0} className="w-full">
+ {/* Updated button with blue background and download icon */}
+ <Button
+ onClick={downloadCSV}
+ disabled={sites.length === 0}
+ className="w-full bg-blue-500 text-white hover:bg-blue-600 flex items-center justify-center"
+ >
+ <Download className="mr-2" /> {/* Download icon */}
Download CSV
</Button>
- <FileUpload onUpload={handleFileUpload} />
+ <FileUpload onUpload={handleManualSubmit} />
<Card className="p-4">
<h3 className="font-medium mb-2">Add Multiple Locations</h3>
@@ -214,7 +179,12 @@ export default function SiteCategory() {
className="mb-2"
rows={5}
/>
- <Button onClick={handleManualSubmit} className="w-full" disabled={!manualInput.trim()}>
+ {/* "Process Coordinates" button now has blue background */}
+ <Button
+ onClick={handleManualSubmit}
+ className="w-full bg-blue-500 text-white hover:bg-blue-600"
+ disabled={!manualInput.trim()}
+ >
Process Coordinates
</Button>
</Card>
@@ -224,10 +194,18 @@ export default function SiteCategory() {
<Card className="p-6 space-y-4">
<h2 className="text-xl font-bold">Site Information</h2>
<div>
- <p><strong>Category:</strong> {selectedSite.category}</p>
- <p><strong>Area Name:</strong> {selectedSite.area_name}</p>
- <p><strong>Latitude:</strong> {selectedSite.lat.toFixed(6)}</p>
- <p><strong>Longitude:</strong> {selectedSite.lng.toFixed(6)}</p>
+ <p>
+ <strong>Category:</strong> {selectedSite.category}
+ </p>
+ <p>
+ <strong>Area Name:</strong> {selectedSite.area_name}
+ </p>
+ <p>
+ <strong>Latitude:</strong> {selectedSite.lat.toFixed(6)}
+ </p>
+ <p>
+ <strong>Longitude:</strong> {selectedSite.lng.toFixed(6)}
+ </p>
</div>
</Card>
)}
@@ -235,13 +213,13 @@ export default function SiteCategory() {
</div>
{loading && (
- <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-30">
- <div className="bg-white p-4 rounded-lg flex items-center space-x-2">
+ <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+ <div className="bg-white p-4 pr-50 rounded-lg flex items-center space-x-2">
<Loader2 className="h-6 w-4 animate-spin" />
- <span>Processing...</span>
+ <span className="fixed right-4">Processing...</span>
</div>
</div>
)}
</div>
);
-}
\ No newline at end of file
+}
From 619c1611b1cd0defb62f9f61ecdcc862e83950c7 Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Sun, 16 Feb 2025 23:06:48 +0300
Subject: [PATCH 26/55] core
---
frontend/src/app/about/page.tsx | 53 +++++++++++++++++----------------
1 file changed, 28 insertions(+), 25 deletions(-)
diff --git a/frontend/src/app/about/page.tsx b/frontend/src/app/about/page.tsx
index 9ee1df5..97ecb32 100644
--- a/frontend/src/app/about/page.tsx
+++ b/frontend/src/app/about/page.tsx
@@ -2,7 +2,7 @@
import React from "react";
import { FeatureCard } from "@/components/feature-card";
-import { MapPin, Users, BarChart3 } from "lucide-react";
+import { Users, BarChart3, HeartHandshake, Ruler, Share2 } from "lucide-react";
import Navigation from "@/components/navigation/navigation";
export default function AboutPage() {
@@ -15,14 +15,17 @@ export default function AboutPage() {
<div className="container mx-auto px-4 py-8 h-full overflow-y-auto">
<h1 className="text-4xl font-bold mb-8 text-center">About AirQo</h1>
- <div className="mb-12">
+ <div className="mb-12 text-justify">
<p className="text-lg mb-4">
AirQo is a pioneering initiative dedicated to improving air quality
- monitoring and management across Africa. Our mission is to provide
- accurate, actionable air quality information to empower communities,
- researchers, and policymakers in the fight against air pollution.
+ monitoring and management across Africa.
+ <strong>
+ Our mission is to efficiently collect,
+ analyze and forecast air quality data to international standards and
+ work with partners to reduce air pollution and raise awareness of its
+ effects in African cities.</strong>
</p>
- <p className="text-lg">
+ <p className="text-lg font-light">
Founded in 2015 at Makerere University in Uganda, AirQo has grown
into a multidisciplinary team of engineers, data scientists, and
environmental experts. We're committed to developing
@@ -31,24 +34,27 @@ export default function AboutPage() {
</p>
</div>
- <h2 className="text-3xl font-semibold mb-6 text-center">
- Our Core Values
- </h2>
- <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
+ <h2 className="text-3xl font-semibold mb-6 text-center">Our Core Values</h2>
+ <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
<FeatureCard
- title="Local Expertise"
- description="We leverage local knowledge and talent to create solutions that work for African cities."
- Icon={MapPin}
+ title="Citizen Focus"
+ description="At AirQo, we believe that the main beneficiary of our work should be the citizen."
+ Icon={HeartHandshake}
/>
<FeatureCard
- title="Collaboration"
- description="We partner with communities, governments, and organizations to maximize our impact."
- Icon={Users}
+ title="Precision"
+ description="We convert low-cost sensor data into a reliable measure of air quality thus making our network and our models as accurate as they can be.."
+ Icon={Ruler}
+ />
+ <FeatureCard
+ title="Collaboration and Openness"
+ description="IWe work in a fast-moving field with continuous improvements in technology. We recruit the best teams and also commit to their ongoing professional development and training."
+ Icon={Share2}
/>
<FeatureCard
- title="Data-Driven Decisions"
- description="We believe in the power of accurate data to drive meaningful policy changes."
- Icon={BarChart3}
+ title="Investment in People"
+ description="We invest in the best talent and commit to their ongoing development and training."
+ Icon={Users}
/>
</div>
@@ -59,16 +65,13 @@ export default function AboutPage() {
Deployed over 300 low-cost air quality sensors across Africa
</li>
<li>
- Provided air quality data to millions of citizens through our
- digital platform and API
+ Provided air quality data to millions of citizens through our digital platform and API
</li>
<li>
- Collaborated with local governments to develop data-driven air
- quality management strategies
+ Collaborated with local governments to develop data-driven air quality management strategies
</li>
<li>
- Engaged in capacity building, training over 5000 individuals in
- air quality monitoring and analysis
+ Engaged in capacity building, training over 5000 individuals in air quality monitoring and analysis
</li>
</ul>
</div>
From b1ad903b3ce2d8322147f4542abafc0075683d06 Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Mon, 17 Feb 2025 10:14:29 +0300
Subject: [PATCH 27/55] handlefiles
---
frontend/src/app/categorize/page.tsx | 30 +++++++++++++++++++++++++++-
1 file changed, 29 insertions(+), 1 deletion(-)
diff --git a/frontend/src/app/categorize/page.tsx b/frontend/src/app/categorize/page.tsx
index 5fc6666..023389c 100644
--- a/frontend/src/app/categorize/page.tsx
+++ b/frontend/src/app/categorize/page.tsx
@@ -70,7 +70,35 @@ export default function SiteCategory() {
setSelectedSite(newSite);
}
};
+ const handleFileUpload = async (locations: Location[]) => {
+ setLoading(true);
+ const newSites: SiteCategoryInfo[] = [];
+
+ try {
+ for (const location of locations) {
+ const response = await getSiteCategory(location.lat, location.lng);
+ newSites.push({
+ ...location,
+ category: response.site['site-category'].category,
+ area_name: response.site['site-category'].area_name,
+ });
+ }
+ setSites(newSites);
+ toast({
+ title: 'Success',
+ description: `Processed ${newSites.length} sites`,
+ });
+ } catch (error) {
+ toast({
+ title: 'Error',
+ description: 'Failed to process sites',
+ variant: 'destructive',
+ });
+ } finally {
+ setLoading(false);
+ }
+ };
const handleManualSubmit = async () => {
const coordinates = manualInput
.split("\n")
@@ -165,7 +193,7 @@ export default function SiteCategory() {
<Download className="mr-2" /> {/* Download icon */}
Download CSV
</Button>
- <FileUpload onUpload={handleManualSubmit} />
+ <FileUpload onUpload={handleFileUpload} />
<Card className="p-4">
<h3 className="font-medium mb-2">Add Multiple Locations</h3>
From 17cf997c0642349db95b1aae85177d169dbf874d Mon Sep 17 00:00:00 2001
From: Ochieng Paul <ochiengpaul442@gmail.com>
Date: Mon, 17 Feb 2025 10:36:27 +0300
Subject: [PATCH 28/55] Fixed Type errors
---
frontend/src/app/about/page.tsx | 28 +++++++++------
frontend/src/app/categorize/page.tsx | 51 +++++++++++++++++++++-------
frontend/src/ui/textarea.tsx | 15 ++++----
3 files changed, 62 insertions(+), 32 deletions(-)
diff --git a/frontend/src/app/about/page.tsx b/frontend/src/app/about/page.tsx
index 97ecb32..d47fd5f 100644
--- a/frontend/src/app/about/page.tsx
+++ b/frontend/src/app/about/page.tsx
@@ -1,8 +1,8 @@
-"use client"; // Make sure to mark the file as a client component
+"use client";
import React from "react";
import { FeatureCard } from "@/components/feature-card";
-import { Users, BarChart3, HeartHandshake, Ruler, Share2 } from "lucide-react";
+import { Users, HeartHandshake, Ruler, Share2 } from "lucide-react";
import Navigation from "@/components/navigation/navigation";
export default function AboutPage() {
@@ -19,11 +19,12 @@ export default function AboutPage() {
<p className="text-lg mb-4">
AirQo is a pioneering initiative dedicated to improving air quality
monitoring and management across Africa.
- <strong>
- Our mission is to efficiently collect,
- analyze and forecast air quality data to international standards and
- work with partners to reduce air pollution and raise awareness of its
- effects in African cities.</strong>
+ <strong>
+ Our mission is to efficiently collect, analyze and forecast air
+ quality data to international standards and work with partners to
+ reduce air pollution and raise awareness of its effects in African
+ cities.
+ </strong>
</p>
<p className="text-lg font-light">
Founded in 2015 at Makerere University in Uganda, AirQo has grown
@@ -34,7 +35,9 @@ export default function AboutPage() {
</p>
</div>
- <h2 className="text-3xl font-semibold mb-6 text-center">Our Core Values</h2>
+ <h2 className="text-3xl font-semibold mb-6 text-center">
+ Our Core Values
+ </h2>
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
<FeatureCard
title="Citizen Focus"
@@ -65,13 +68,16 @@ export default function AboutPage() {
Deployed over 300 low-cost air quality sensors across Africa
</li>
<li>
- Provided air quality data to millions of citizens through our digital platform and API
+ Provided air quality data to millions of citizens through our
+ digital platform and API
</li>
<li>
- Collaborated with local governments to develop data-driven air quality management strategies
+ Collaborated with local governments to develop data-driven air
+ quality management strategies
</li>
<li>
- Engaged in capacity building, training over 5000 individuals in air quality monitoring and analysis
+ Engaged in capacity building, training over 5000 individuals in
+ air quality monitoring and analysis
</li>
</ul>
</div>
diff --git a/frontend/src/app/categorize/page.tsx b/frontend/src/app/categorize/page.tsx
index 5fc6666..28e5c25 100644
--- a/frontend/src/app/categorize/page.tsx
+++ b/frontend/src/app/categorize/page.tsx
@@ -2,26 +2,42 @@
import { useState } from "react";
import { Button } from "@/ui/button";
-import { Input } from "@/ui/input";
import { FileUpload } from "@/components/Controls/FileUpload";
import { useToast } from "@/ui/use-toast";
-import {
- MapContainer,
- TileLayer,
- useMapEvents,
- Marker,
- Popup,
-} from "react-leaflet";
+import dynamic from "next/dynamic";
+import { useMapEvents } from "react-leaflet";
+
import { getSiteCategory } from "@/lib/api";
-import { Location, SiteCategoryResponse } from "@/lib/types";
+import { Location } from "@/lib/types";
import { Card } from "@/ui/card";
import { Loader2 } from "lucide-react";
import Papa from "papaparse";
import Navigation from "@/components/navigation/navigation";
import { Textarea } from "@/ui/textarea";
-import { Download } from "lucide-react"; // Import the download icon
+import { Download } from "lucide-react";
import "leaflet/dist/leaflet.css";
+// Dynamic imports for leaflet components to avoid SSR errors
+const MapContainer = dynamic(
+ () => import("react-leaflet").then((mod) => mod.MapContainer),
+ { ssr: false }
+);
+const TileLayer = dynamic(
+ () => import("react-leaflet").then((mod) => mod.TileLayer),
+ { ssr: false }
+);
+// const useMapEvents = dynamic(
+// () => import("react-leaflet").then((mod) => mod.useMapEvents),
+// { ssr: false }
+// );
+const Marker = dynamic(
+ () => import("react-leaflet").then((mod) => mod.Marker),
+ { ssr: false }
+);
+const Popup = dynamic(() => import("react-leaflet").then((mod) => mod.Popup), {
+ ssr: false,
+});
+
interface SiteCategoryInfo extends Location {
category?: string;
area_name?: string;
@@ -47,6 +63,7 @@ export default function SiteCategory() {
area_name: response.site["site-category"].area_name,
};
} catch (error) {
+ console.log(error);
toast({
title: "Error",
description: "Failed to get site category",
@@ -58,7 +75,9 @@ export default function SiteCategory() {
}
};
- const handleMapClick = async (e: { latlng: { lat: number; lng: number } }) => {
+ const handleMapClick = async (e: {
+ latlng: { lat: number; lng: number };
+ }) => {
const { lat, lng } = e.latlng;
// Avoid duplicate requests for the same location
@@ -88,7 +107,9 @@ export default function SiteCategory() {
const newSites: SiteCategoryInfo[] = [];
for (const coord of coordinates) {
- if (!sites.some((site) => site.lat === coord.lat && site.lng === coord.lng)) {
+ if (
+ !sites.some((site) => site.lat === coord.lat && site.lng === coord.lng)
+ ) {
const newSite = await fetchSiteCategory(coord.lat, coord.lng);
if (newSite) newSites.push(newSite);
}
@@ -127,7 +148,11 @@ export default function SiteCategory() {
<Navigation />
<div className="flex h-screen pt-16">
<div className="flex-1">
- <MapContainer center={[1.3733, 32.2903]} zoom={7} className="h-full w-full">
+ <MapContainer
+ center={[1.3733, 32.2903]}
+ zoom={7}
+ className="h-full w-full"
+ >
<TileLayer
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
diff --git a/frontend/src/ui/textarea.tsx b/frontend/src/ui/textarea.tsx
index 83caa9b..3ec69b0 100644
--- a/frontend/src/ui/textarea.tsx
+++ b/frontend/src/ui/textarea.tsx
@@ -1,9 +1,8 @@
-import * as React from "react"
+import * as React from "react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-export interface TextareaProps
- extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
({ className, ...props }, ref) => {
@@ -16,9 +15,9 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
ref={ref}
{...props}
/>
- )
+ );
}
-)
-Textarea.displayName = "Textarea"
+);
+Textarea.displayName = "Textarea";
-export { Textarea }
\ No newline at end of file
+export { Textarea };
From ea08e0fab6780bc9df1e84bba7aa25ba682deff0 Mon Sep 17 00:00:00 2001
From: Ochieng Paul <ochiengpaul442@gmail.com>
Date: Mon, 17 Feb 2025 10:37:10 +0300
Subject: [PATCH 29/55] checks
---
frontend/src/app/categorize/page.tsx | 13 +++++++------
1 file changed, 7 insertions(+), 6 deletions(-)
diff --git a/frontend/src/app/categorize/page.tsx b/frontend/src/app/categorize/page.tsx
index 914a62a..cb89427 100644
--- a/frontend/src/app/categorize/page.tsx
+++ b/frontend/src/app/categorize/page.tsx
@@ -98,21 +98,22 @@ export default function SiteCategory() {
const response = await getSiteCategory(location.lat, location.lng);
newSites.push({
...location,
- category: response.site['site-category'].category,
- area_name: response.site['site-category'].area_name,
+ category: response.site["site-category"].category,
+ area_name: response.site["site-category"].area_name,
});
}
setSites(newSites);
toast({
- title: 'Success',
+ title: "Success",
description: `Processed ${newSites.length} sites`,
});
} catch (error) {
+ console.log(error);
toast({
- title: 'Error',
- description: 'Failed to process sites',
- variant: 'destructive',
+ title: "Error",
+ description: "Failed to process sites",
+ variant: "destructive",
});
} finally {
setLoading(false);
From b996a7c7a12d5ee53b7e85d902968e54324c531c Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Mon, 17 Feb 2025 11:30:49 +0300
Subject: [PATCH 30/55] change
---
frontend/src/app/reports/page.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/frontend/src/app/reports/page.tsx b/frontend/src/app/reports/page.tsx
index 74cf08e..da9ddb5 100644
--- a/frontend/src/app/reports/page.tsx
+++ b/frontend/src/app/reports/page.tsx
@@ -22,7 +22,7 @@ function ReportContent() {
<p className="text-xl text-gray-600 max-w-2xl">
Our AI-powered air quality reports are on the way! Stay tuned for
real-time insights and advanced analytics to help you understand air
- pollution trends like never before.
+ pollution trends like never before
</p>
<Card className="w-full max-w-4xl shadow-lg border border-blue-500 bg-white">
<CardHeader className="text-center bg-blue-500 text-white rounded-t-lg">
From c1e668c498369d33d136ab9e4801ad742f30d142 Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Mon, 17 Feb 2025 11:38:26 +0300
Subject: [PATCH 31/55] about
---
frontend/src/app/reports/page.tsx | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/frontend/src/app/reports/page.tsx b/frontend/src/app/reports/page.tsx
index da9ddb5..1cdd345 100644
--- a/frontend/src/app/reports/page.tsx
+++ b/frontend/src/app/reports/page.tsx
@@ -1,5 +1,5 @@
import { Card, CardContent, CardHeader, CardTitle } from "@/ui/card";
-import { Sparkles, BarChart3, BrainCircuit } from "lucide-react";
+import { Sparkles, BarChart3, BrainCircuit,HeartPulse, Globe } from "lucide-react";
import Navigation from "@/components/navigation/navigation";
import { ReactNode } from "react";
@@ -22,7 +22,7 @@ function ReportContent() {
<p className="text-xl text-gray-600 max-w-2xl">
Our AI-powered air quality reports are on the way! Stay tuned for
real-time insights and advanced analytics to help you understand air
- pollution trends like never before
+ pollution trends like never before.
</p>
<Card className="w-full max-w-4xl shadow-lg border border-blue-500 bg-white">
<CardHeader className="text-center bg-blue-500 text-white rounded-t-lg">
@@ -48,14 +48,14 @@ function ReportContent() {
</InfoBox>
<InfoBox
title="Regional Analysis"
- icon={<BarChart3 className="text-green-500 w-10 h-10" />}
+ icon={<Globe className="text-green-500 w-10 h-10" />}
>
Compare air quality across different locations with detailed
breakdowns.
</InfoBox>
<InfoBox
title="Health Impact"
- icon={<BarChart3 className="text-red-500 w-10 h-10" />}
+ icon={<HeartPulse className="text-red-500 w-10 h-10" />}
>
Understand how pollution affects respiratory health and
well-being.
From 37537825b19f4e2d36bf9883eb60b6047907686c Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Mon, 17 Feb 2025 12:23:28 +0300
Subject: [PATCH 32/55] font
---
frontend/src/app/categorize/page.tsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/frontend/src/app/categorize/page.tsx b/frontend/src/app/categorize/page.tsx
index cb89427..b943f4d 100644
--- a/frontend/src/app/categorize/page.tsx
+++ b/frontend/src/app/categorize/page.tsx
@@ -269,8 +269,8 @@ export default function SiteCategory() {
{loading && (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
<div className="bg-white p-4 pr-50 rounded-lg flex items-center space-x-2">
- <Loader2 className="h-6 w-4 animate-spin" />
- <span className="fixed right-4">Processing...</span>
+ <Loader2 className="fixed right-3 w-4 h-4 animate-spin" />
+ <span className="font-bold font-xl text-white-700 fixed right-11">Processing...</span>
</div>
</div>
)}
From 118d022ad8e091e225714a75817ace88aaaea8b9 Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Mon, 17 Feb 2025 13:19:16 +0300
Subject: [PATCH 33/55] read me
---
frontend/README.md | 170 ++++++++++++++++++++++++++++++++++++---------
1 file changed, 136 insertions(+), 34 deletions(-)
diff --git a/frontend/README.md b/frontend/README.md
index 96c70fa..b63cc60 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -1,51 +1,153 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# AirQo AI Platform
+
+## Overview
+
+AirQo AI is an advanced air quality monitoring and forecasting platform designed to efficiently collect, analyze, and forecast air quality data across Africa. Our mission is to provide accurate insights and raise awareness about air pollution in African cities.
+
+
+
+## Features
+
+- **Interactive Map**: Real-time visualization of air quality data across various locations.
+- **Site Locator**: AI-powered tool to suggest optimal locations for new air quality sensors.
+- **Site Categorization**: Automatically categorize sites based on their characteristics and surrounding environment.
+- **Air Quality Reports**: Generate comprehensive reports with historical data and trends.
+- **About Page**: Information about AirQo's mission and impact.
## Getting Started
-First install dependencies:
-```bash
-npm install
-```
+### Prerequisites
+
+- Node.js (v14 or later)
+- npm or yarn
+
+### Installation
+
+1. Clone the repository:
+ \`\`\`
+ git clone https://github.com/your-username/airqo-ai-platform.git
+ cd airqo-ai-platform
+ \`\`\`
+
+2. Install dependencies:
+ \`\`\`
+ npm install
+ # or
+ yarn install
+ \`\`\`
+
+3. Set up environment variables:
+ Create a \`.env.local\` file in the root directory and add the following variables:
+ \`\`\`
+ NEXT_PUBLIC_API_TOKEN ={your_api_token_here }
+ NEXT_PUBLIC_LOCATE_API_URL=https://platform.airqo.net/api/v2/spatial/site_location
+ NEXT_PUBLIC_SITE_CATEGORY_API_URL=https://platform.airqo.net/api/v2/spatial/categorize_site
+ NEXT_PUBLIC_AIR_QUALITY_REPORT_API_URL_LLM=https://platform.airqo.net/api/v2/spatial/air_quality_report
+ NEXT_PUBLIC_SATELLITE_DATA_API_URL=https://platform.airqo.net/api/v2/spatial/satellite_prediction
+ \`\`\`
+
+4. Run the development server:
+ \`\`\`
+ npm run dev
+ # or
+ yarn dev
+ \`\`\`
+
+5. Open [http://localhost:3000](http://localhost:3000) in your browser to see the application.
+
+## Usage
+
+### Home Page
+The home page displays an interactive map with real-time air quality data. Users can:
+- Search for specific locations
+- View air quality information for different sites
+- Toggle between street and satellite map views
+
+### Locate Page
+Use the Site Locator tool to find optimal locations for new air quality sensors:
+1. Draw a polygon on the map to define the area of interest
+2. Set parameters such as the number of sensors and minimum distance between them
+3. Add must-have locations if needed
+4. Submit the request to receive AI-generated suggestions for sensor placements
+
+### Categorize Page
+Categorize sites based on their characteristics:
+1. Click on the map or upload a CSV file with site coordinates
+2. View the AI-generated category for each site
+3. Export the results as a CSV file
+
+### Reports Page
+Generate comprehensive air quality reports:
+1. Select a grid and date range
+2. View visualizations of air quality trends
+3. Access AI-generated insights and recommendations
+
+### About Page
+Learn more about AirQo's mission, core values, and impact in air quality monitoring across Africa.
+visit [https://www.airqo.net](https://www.airqo.net)
+
+## Deployment
+
+The easiest way to deploy your AirQo AI Platform is to use the [Vercel Platform](https://vercel.com) from the creators of Next.js.
+
+### Deploying on Vercel
+
+1. Sign up for a Vercel account if you haven't already: [https://vercel.com/signup](https://vercel.com/signup)
+
+2. Install the Vercel CLI:
+ \`\`\`
+ npm i -g vercel
+ \`\`\`
+
+3. Run the following command from your project's root directory:
+ \`\`\`
+ vercel
+ \`\`\`
+
+4. Follow the prompts to link your project to Vercel and configure your deployment settings.
+
+5. Once deployed, Vercel will provide you with a URL for your live application.
+
+### Continuous Deployment
+
+Vercel supports continuous deployment with GitHub, GitLab, and Bitbucket. When you push changes to your repository, Vercel will automatically deploy the updates.
-
-Required environment variables:
+To set up continuous deployment:
-```.env
-# Your AirQo API token (obtain from AirQo dashboard)
-NEXT_PUBLIC_API_TOKEN=YOUR_TOKEN
+1. Connect your Git repository to your Vercel project.
+2. Configure your project settings on the Vercel dashboard.
+3. Push changes to your repository, and Vercel will automatically build and deploy your updates.
-# AirQo API endpoint
-NEXT_PUBLIC_API_URL=https://analytics.airqo.net/api/v2/
-```
-First, run the development server:
+For more detailed information about deploying Next.js applications on Vercel, check out the [Next.js deployment documentation](https://nextjs.org/docs/deployment).
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+## Technologies Used
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+- Next.js
+- React
+- TypeScript
+- Tailwind CSS
+- Leaflet (for maps)
+- Shadcn UI components
+- Lucide React icons
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+## Contributing
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+We welcome contributions to the AirQo AI Platform! Please follow these steps to contribute:
-## Learn More
+1. Fork the repository
+2. Create a new branch (\`git checkout -b feature/your-feature-name\`)
+3. Make your changes
+4. Commit your changes (\`git commit -am 'Add some feature'\`)
+5. Push to the branch (\`git push origin feature/your-feature-name\`)
+6. Create a new Pull Request
-To learn more about Next.js, take a look at the following resources:
+Please ensure your code follows the project's coding standards and includes appropriate tests.
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+## License
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
-## Deploy on Vercel
+## Contact
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+For any questions or support, please contact us at support@airqo.net or visit our website [https://www.airqo.net](https://www.airqo.net).
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
From 5d72f801ed31ac460c21ec0bf0d40a87e369d566 Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Mon, 17 Feb 2025 13:21:29 +0300
Subject: [PATCH 34/55] read
---
frontend/README.md | 170 +++++++++------------------------------------
1 file changed, 34 insertions(+), 136 deletions(-)
diff --git a/frontend/README.md b/frontend/README.md
index b63cc60..96c70fa 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -1,153 +1,51 @@
-# AirQo AI Platform
-
-## Overview
-
-AirQo AI is an advanced air quality monitoring and forecasting platform designed to efficiently collect, analyze, and forecast air quality data across Africa. Our mission is to provide accurate insights and raise awareness about air pollution in African cities.
-
-
-
-## Features
-
-- **Interactive Map**: Real-time visualization of air quality data across various locations.
-- **Site Locator**: AI-powered tool to suggest optimal locations for new air quality sensors.
-- **Site Categorization**: Automatically categorize sites based on their characteristics and surrounding environment.
-- **Air Quality Reports**: Generate comprehensive reports with historical data and trends.
-- **About Page**: Information about AirQo's mission and impact.
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
## Getting Started
-### Prerequisites
-
-- Node.js (v14 or later)
-- npm or yarn
-
-### Installation
-
-1. Clone the repository:
- \`\`\`
- git clone https://github.com/your-username/airqo-ai-platform.git
- cd airqo-ai-platform
- \`\`\`
-
-2. Install dependencies:
- \`\`\`
- npm install
- # or
- yarn install
- \`\`\`
-
-3. Set up environment variables:
- Create a \`.env.local\` file in the root directory and add the following variables:
- \`\`\`
- NEXT_PUBLIC_API_TOKEN ={your_api_token_here }
- NEXT_PUBLIC_LOCATE_API_URL=https://platform.airqo.net/api/v2/spatial/site_location
- NEXT_PUBLIC_SITE_CATEGORY_API_URL=https://platform.airqo.net/api/v2/spatial/categorize_site
- NEXT_PUBLIC_AIR_QUALITY_REPORT_API_URL_LLM=https://platform.airqo.net/api/v2/spatial/air_quality_report
- NEXT_PUBLIC_SATELLITE_DATA_API_URL=https://platform.airqo.net/api/v2/spatial/satellite_prediction
- \`\`\`
-
-4. Run the development server:
- \`\`\`
- npm run dev
- # or
- yarn dev
- \`\`\`
-
-5. Open [http://localhost:3000](http://localhost:3000) in your browser to see the application.
-
-## Usage
-
-### Home Page
-The home page displays an interactive map with real-time air quality data. Users can:
-- Search for specific locations
-- View air quality information for different sites
-- Toggle between street and satellite map views
-
-### Locate Page
-Use the Site Locator tool to find optimal locations for new air quality sensors:
-1. Draw a polygon on the map to define the area of interest
-2. Set parameters such as the number of sensors and minimum distance between them
-3. Add must-have locations if needed
-4. Submit the request to receive AI-generated suggestions for sensor placements
-
-### Categorize Page
-Categorize sites based on their characteristics:
-1. Click on the map or upload a CSV file with site coordinates
-2. View the AI-generated category for each site
-3. Export the results as a CSV file
-
-### Reports Page
-Generate comprehensive air quality reports:
-1. Select a grid and date range
-2. View visualizations of air quality trends
-3. Access AI-generated insights and recommendations
-
-### About Page
-Learn more about AirQo's mission, core values, and impact in air quality monitoring across Africa.
-visit [https://www.airqo.net](https://www.airqo.net)
-
-## Deployment
-
-The easiest way to deploy your AirQo AI Platform is to use the [Vercel Platform](https://vercel.com) from the creators of Next.js.
-
-### Deploying on Vercel
-
-1. Sign up for a Vercel account if you haven't already: [https://vercel.com/signup](https://vercel.com/signup)
-
-2. Install the Vercel CLI:
- \`\`\`
- npm i -g vercel
- \`\`\`
-
-3. Run the following command from your project's root directory:
- \`\`\`
- vercel
- \`\`\`
-
-4. Follow the prompts to link your project to Vercel and configure your deployment settings.
-
-5. Once deployed, Vercel will provide you with a URL for your live application.
-
-### Continuous Deployment
-
-Vercel supports continuous deployment with GitHub, GitLab, and Bitbucket. When you push changes to your repository, Vercel will automatically deploy the updates.
+First install dependencies:
+```bash
+npm install
+```
-To set up continuous deployment:
+
+Required environment variables:
-1. Connect your Git repository to your Vercel project.
-2. Configure your project settings on the Vercel dashboard.
-3. Push changes to your repository, and Vercel will automatically build and deploy your updates.
+```.env
+# Your AirQo API token (obtain from AirQo dashboard)
+NEXT_PUBLIC_API_TOKEN=YOUR_TOKEN
-For more detailed information about deploying Next.js applications on Vercel, check out the [Next.js deployment documentation](https://nextjs.org/docs/deployment).
+# AirQo API endpoint
+NEXT_PUBLIC_API_URL=https://analytics.airqo.net/api/v2/
+```
+First, run the development server:
-## Technologies Used
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
-- Next.js
-- React
-- TypeScript
-- Tailwind CSS
-- Leaflet (for maps)
-- Shadcn UI components
-- Lucide React icons
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-## Contributing
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-We welcome contributions to the AirQo AI Platform! Please follow these steps to contribute:
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
-1. Fork the repository
-2. Create a new branch (\`git checkout -b feature/your-feature-name\`)
-3. Make your changes
-4. Commit your changes (\`git commit -am 'Add some feature'\`)
-5. Push to the branch (\`git push origin feature/your-feature-name\`)
-6. Create a new Pull Request
+## Learn More
-Please ensure your code follows the project's coding standards and includes appropriate tests.
+To learn more about Next.js, take a look at the following resources:
-## License
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
-## Contact
+## Deploy on Vercel
-For any questions or support, please contact us at support@airqo.net or visit our website [https://www.airqo.net](https://www.airqo.net).
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
From bf3bf941cc390f31dfbc9f2f1b370484b05003cd Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Mon, 17 Feb 2025 13:27:52 +0300
Subject: [PATCH 35/55] reading
---
README.md | 157 +++++++++++++++++++++++++++++++++++++++++++++++-------
1 file changed, 138 insertions(+), 19 deletions(-)
diff --git a/README.md b/README.md
index 93fbf44..c65f44a 100644
--- a/README.md
+++ b/README.md
@@ -1,36 +1,155 @@
-# Air Quality API Code Samples
+# AirQo AI Platform
-Welcome to the Air Quality API code samples repository! In this monorepo, you'll find code samples and examples in various programming languages for accessing the Air Quality API provided by AirQo. These code snippets demonstrate how to integrate air quality data into your applications and projects.
+## Overview
-## Subfolders
+AirQo AI is an advanced air quality monitoring and forecasting platform designed to efficiently collect, analyze, and forecast air quality data across Africa. Our mission is to provide accurate insights and raise awareness about air pollution in African cities.
-This monorepo is organized into subfolders, each containing code samples for a specific programming language or framework:
+
-1. **javascript**: Code samples for accessing the Air Quality API using JavaScript.
+## Features
-2. **dart**: Code samples for integrating air quality data into mobile applications using Dart.
+- **Interactive Map**: Real-time visualization of air quality data across various locations.
+- **Site Locator**: AI-powered tool to suggest optimal locations for new air quality sensors.
+- **Site Categorization**: Automatically categorize sites based on their characteristics and surrounding environment.
+- **Air Quality Reports**: Generate comprehensive reports with historical data and trends.
+- **About Page**: Information about AirQo's mission and impact.
-3. **php**: Code samples demonstrating how to access the Air Quality API with PHP.
+## Getting Started
-4. **python**: Code samples for Python applications
+### Prerequisites
-## Getting Started
+- Node.js (v14 or later)
+- npm or yarn
+
+### Installation
+
+1. Clone the repository:
+ \`\`\`
+ git clone https://github.com/your-username/airqo-ai-platform.git
+ cd airqo-ai-platform
+ \`\`\`
+
+2. Install dependencies:
+ \`\`\`
+ npm install
+ # or
+ yarn install
+ \`\`\`
+
+3. Set up environment variables:
+ Create a \`.env.local\` file in the root directory and add the following variables:
+ \`\`\`
+ NEXT_PUBLIC_API_TOKEN=your_api_token_here
+ NEXT_PUBLIC_API_URL=https://api.example.com
+ NEXT_PUBLIC_LOCATE_API_URL=https://api.example.com/locate
+ NEXT_PUBLIC_SITE_CATEGORY_API_URL=https://api.example.com/site-category
+ NEXT_PUBLIC_AIR_QUALITY_REPORT_API_URL_LLM=https://api.example.com/air-quality-report
+ NEXT_PUBLIC_GRID_SUMMARY_API_URL=https://api.example.com/grid-summary
+ \`\`\`
+
+4. Run the development server:
+ \`\`\`
+ npm run dev
+ # or
+ yarn dev
+ \`\`\`
+
+5. Open [http://localhost:3000](http://localhost:3000) in your browser to see the application.
+
+## Usage
+
+### Home Page
+The home page displays an interactive map with real-time air quality data. Users can:
+- Search for specific locations
+- View air quality information for different sites
+- Toggle between street and satellite map views
+
+### Locate Page
+Use the Site Locator tool to find optimal locations for new air quality sensors:
+1. Draw a polygon on the map to define the area of interest
+2. Set parameters such as the number of sensors and minimum distance between them
+3. Add must-have locations if needed
+4. Submit the request to receive AI-generated suggestions for sensor placements
+
+### Categorize Page
+Categorize sites based on their characteristics:
+1. Click on the map or upload a CSV file with site coordinates
+2. View the AI-generated category for each site
+3. Export the results as a CSV file
+
+### Reports Page
+Generate comprehensive air quality reports:
+1. Select a grid and date range
+2. View visualizations of air quality trends
+3. Access AI-generated insights and recommendations
+
+### About Page
+Learn more about AirQo's mission, core values, and impact in air quality monitoring across Africa.
+visit [www.airqo.net](www.airqo.net)
+
+## Deployment
-To get started with any of the code samples, navigate to the respective subfolder and follow the instructions provided in the README or code comments. Each subfolder contains code examples and explanations specific to the programming language or framework.
+The easiest way to deploy your AirQo AI Platform is to use the [Vercel Platform](https://vercel.com) from the creators of Next.js.
-## Code Samples
+### Deploying on Vercel
-- [**javascript**](./javascript): Explore code samples for JavaScript.
-- [**dart**](./dart): Get code examples for building mobile apps with Dart.
-- [**php**](./php): Find PHP code samples for accessing air quality data from the API.
-- [**python**](./python): Discover code samples for Python applications
+1. Sign up for a Vercel account if you haven't already: [https://vercel.com/signup](https://vercel.com/signup)
-Feel free to explore, use, and adapt these code samples to integrate air quality data into your own projects. If you have any questions or need further assistance, please don't hesitate to reach out.
+2. Install the Vercel CLI:
+ \`\`\`
+ npm i -g vercel
+ \`\`\`
-## About AirQo
+3. Run the following command from your project's root directory:
+ \`\`\`
+ vercel
+ \`\`\`
-AirQo provides comprehensive air quality data and analytics to support environmental monitoring and decision-making. Visit the [AirQo website](https://www.airqo.net/) to learn more about their services and APIs.
+4. Follow the prompts to link your project to Vercel and configure your deployment settings.
+
+5. Once deployed, Vercel will provide you with a URL for your live application.
+
+### Continuous Deployment
+
+Vercel supports continuous deployment with GitHub, GitLab, and Bitbucket. When you push changes to your repository, Vercel will automatically deploy the updates.
+
+To set up continuous deployment:
+
+1. Connect your Git repository to your Vercel project.
+2. Configure your project settings on the Vercel dashboard.
+3. Push changes to your repository, and Vercel will automatically build and deploy your updates.
+
+For more detailed information about deploying Next.js applications on Vercel, check out the [Next.js deployment documentation](https://nextjs.org/docs/deployment).
+
+## Technologies Used
+
+- Next.js
+- React
+- TypeScript
+- Tailwind CSS
+- Leaflet (for maps)
+- Shadcn UI components
+- Lucide React icons
+
+## Contributing
+
+We welcome contributions to the AirQo AI Platform! Please follow these steps to contribute:
+
+1. Fork the repository
+2. Create a new branch (\`git checkout -b feature/your-feature-name\`)
+3. Make your changes
+4. Commit your changes (\`git commit -am 'Add some feature'\`)
+5. Push to the branch (\`git push origin feature/your-feature-name\`)
+6. Create a new Pull Request
+
+Please ensure your code follows the project's coding standards and includes appropriate tests.
## License
-This repository is licensed under the [MIT License](LICENSE).
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## Contact
+
+For any questions or support, please contact us at support@airqo.net or visit our website [https://www.airqo.net](https://www.airqo.net).
+
+Thank you for using AirQo AI Platform!
\ No newline at end of file
From 11d93dc8f20bb67e61fcbf4c1b0d7fdd0f6c2eac Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Mon, 17 Feb 2025 13:31:56 +0300
Subject: [PATCH 36/55] readme
---
README.md | 163 ++++++++----------------------------------------------
1 file changed, 22 insertions(+), 141 deletions(-)
diff --git a/README.md b/README.md
index c65f44a..e215bc4 100644
--- a/README.md
+++ b/README.md
@@ -1,155 +1,36 @@
-# AirQo AI Platform
-
-## Overview
-
-AirQo AI is an advanced air quality monitoring and forecasting platform designed to efficiently collect, analyze, and forecast air quality data across Africa. Our mission is to provide accurate insights and raise awareness about air pollution in African cities.
-
-
-
-## Features
-
-- **Interactive Map**: Real-time visualization of air quality data across various locations.
-- **Site Locator**: AI-powered tool to suggest optimal locations for new air quality sensors.
-- **Site Categorization**: Automatically categorize sites based on their characteristics and surrounding environment.
-- **Air Quality Reports**: Generate comprehensive reports with historical data and trends.
-- **About Page**: Information about AirQo's mission and impact.
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
## Getting Started
-### Prerequisites
-
-- Node.js (v14 or later)
-- npm or yarn
-
-### Installation
-
-1. Clone the repository:
- \`\`\`
- git clone https://github.com/your-username/airqo-ai-platform.git
- cd airqo-ai-platform
- \`\`\`
-
-2. Install dependencies:
- \`\`\`
- npm install
- # or
- yarn install
- \`\`\`
-
-3. Set up environment variables:
- Create a \`.env.local\` file in the root directory and add the following variables:
- \`\`\`
- NEXT_PUBLIC_API_TOKEN=your_api_token_here
- NEXT_PUBLIC_API_URL=https://api.example.com
- NEXT_PUBLIC_LOCATE_API_URL=https://api.example.com/locate
- NEXT_PUBLIC_SITE_CATEGORY_API_URL=https://api.example.com/site-category
- NEXT_PUBLIC_AIR_QUALITY_REPORT_API_URL_LLM=https://api.example.com/air-quality-report
- NEXT_PUBLIC_GRID_SUMMARY_API_URL=https://api.example.com/grid-summary
- \`\`\`
-
-4. Run the development server:
- \`\`\`
- npm run dev
- # or
- yarn dev
- \`\`\`
-
-5. Open [http://localhost:3000](http://localhost:3000) in your browser to see the application.
-
-## Usage
-
-### Home Page
-The home page displays an interactive map with real-time air quality data. Users can:
-- Search for specific locations
-- View air quality information for different sites
-- Toggle between street and satellite map views
-
-### Locate Page
-Use the Site Locator tool to find optimal locations for new air quality sensors:
-1. Draw a polygon on the map to define the area of interest
-2. Set parameters such as the number of sensors and minimum distance between them
-3. Add must-have locations if needed
-4. Submit the request to receive AI-generated suggestions for sensor placements
-
-### Categorize Page
-Categorize sites based on their characteristics:
-1. Click on the map or upload a CSV file with site coordinates
-2. View the AI-generated category for each site
-3. Export the results as a CSV file
-
-### Reports Page
-Generate comprehensive air quality reports:
-1. Select a grid and date range
-2. View visualizations of air quality trends
-3. Access AI-generated insights and recommendations
-
-### About Page
-Learn more about AirQo's mission, core values, and impact in air quality monitoring across Africa.
-visit [www.airqo.net](www.airqo.net)
-
-## Deployment
-
-The easiest way to deploy your AirQo AI Platform is to use the [Vercel Platform](https://vercel.com) from the creators of Next.js.
-
-### Deploying on Vercel
-
-1. Sign up for a Vercel account if you haven't already: [https://vercel.com/signup](https://vercel.com/signup)
-
-2. Install the Vercel CLI:
- \`\`\`
- npm i -g vercel
- \`\`\`
-
-3. Run the following command from your project's root directory:
- \`\`\`
- vercel
- \`\`\`
-
-4. Follow the prompts to link your project to Vercel and configure your deployment settings.
-
-5. Once deployed, Vercel will provide you with a URL for your live application.
-
-### Continuous Deployment
-
-Vercel supports continuous deployment with GitHub, GitLab, and Bitbucket. When you push changes to your repository, Vercel will automatically deploy the updates.
-
-To set up continuous deployment:
-
-1. Connect your Git repository to your Vercel project.
-2. Configure your project settings on the Vercel dashboard.
-3. Push changes to your repository, and Vercel will automatically build and deploy your updates.
-
-For more detailed information about deploying Next.js applications on Vercel, check out the [Next.js deployment documentation](https://nextjs.org/docs/deployment).
+First, run the development server:
-## Technologies Used
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
-- Next.js
-- React
-- TypeScript
-- Tailwind CSS
-- Leaflet (for maps)
-- Shadcn UI components
-- Lucide React icons
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-## Contributing
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-We welcome contributions to the AirQo AI Platform! Please follow these steps to contribute:
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
-1. Fork the repository
-2. Create a new branch (\`git checkout -b feature/your-feature-name\`)
-3. Make your changes
-4. Commit your changes (\`git commit -am 'Add some feature'\`)
-5. Push to the branch (\`git push origin feature/your-feature-name\`)
-6. Create a new Pull Request
+## Learn More
-Please ensure your code follows the project's coding standards and includes appropriate tests.
+To learn more about Next.js, take a look at the following resources:
-## License
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
-## Contact
+## Deploy on Vercel
-For any questions or support, please contact us at support@airqo.net or visit our website [https://www.airqo.net](https://www.airqo.net).
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-Thank you for using AirQo AI Platform!
\ No newline at end of file
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
From 40065acbbdab052b02e511ae16fd7108a0685495 Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Mon, 17 Feb 2025 13:34:07 +0300
Subject: [PATCH 37/55] READ
---
README.md | 46 +++++++++++++++++++++++-----------------------
1 file changed, 23 insertions(+), 23 deletions(-)
diff --git a/README.md b/README.md
index e215bc4..93fbf44 100644
--- a/README.md
+++ b/README.md
@@ -1,36 +1,36 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# Air Quality API Code Samples
-## Getting Started
+Welcome to the Air Quality API code samples repository! In this monorepo, you'll find code samples and examples in various programming languages for accessing the Air Quality API provided by AirQo. These code snippets demonstrate how to integrate air quality data into your applications and projects.
+
+## Subfolders
+
+This monorepo is organized into subfolders, each containing code samples for a specific programming language or framework:
-First, run the development server:
+1. **javascript**: Code samples for accessing the Air Quality API using JavaScript.
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+2. **dart**: Code samples for integrating air quality data into mobile applications using Dart.
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+3. **php**: Code samples demonstrating how to access the Air Quality API with PHP.
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+4. **python**: Code samples for Python applications
+
+## Getting Started
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+To get started with any of the code samples, navigate to the respective subfolder and follow the instructions provided in the README or code comments. Each subfolder contains code examples and explanations specific to the programming language or framework.
-## Learn More
+## Code Samples
-To learn more about Next.js, take a look at the following resources:
+- [**javascript**](./javascript): Explore code samples for JavaScript.
+- [**dart**](./dart): Get code examples for building mobile apps with Dart.
+- [**php**](./php): Find PHP code samples for accessing air quality data from the API.
+- [**python**](./python): Discover code samples for Python applications
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+Feel free to explore, use, and adapt these code samples to integrate air quality data into your own projects. If you have any questions or need further assistance, please don't hesitate to reach out.
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+## About AirQo
-## Deploy on Vercel
+AirQo provides comprehensive air quality data and analytics to support environmental monitoring and decision-making. Visit the [AirQo website](https://www.airqo.net/) to learn more about their services and APIs.
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## License
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+This repository is licensed under the [MIT License](LICENSE).
From 8c5a1657ffc5a33dd739801863b77fa493ca8206 Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Mon, 17 Feb 2025 13:49:38 +0300
Subject: [PATCH 38/55] reads
---
README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/README.md b/README.md
index 93fbf44..9747018 100644
--- a/README.md
+++ b/README.md
@@ -33,4 +33,4 @@ AirQo provides comprehensive air quality data and analytics to support environme
## License
-This repository is licensed under the [MIT License](LICENSE).
+This repository is licensed under the [MIT License](LICENSE).
From 0ef95745af33540568608f3f5757a54418f9f8f8 Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Mon, 17 Feb 2025 13:57:10 +0300
Subject: [PATCH 39/55] READM
---
frontend/README.md | 171 ++++++++++++++++++++++++++++++++++++---------
1 file changed, 137 insertions(+), 34 deletions(-)
diff --git a/frontend/README.md b/frontend/README.md
index 96c70fa..70d61cd 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -1,51 +1,154 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# AirQo AI Platform
+
+## Overview
+
+AirQo AI is an advanced air quality monitoring and forecasting platform designed to efficiently collect, analyze, and forecast air quality data across Africa. Our mission is to provide accurate insights and raise awareness about air pollution in African cities.
+
+
+
+## Features
+
+- **Interactive Map**: Real-time visualization of air quality data across various locations.
+- **Site Locator**: AI-powered tool to suggest optimal locations for new air quality sensors.
+- **Site Categorization**: Automatically categorize sites based on their characteristics and surrounding environment.
+- **Air Quality Reports**: Generate comprehensive reports with historical data and trends.
+- **About Page**: Information about AirQo's mission and impact.
## Getting Started
-First install dependencies:
-```bash
-npm install
-```
+### Prerequisites
+
+- Node.js (v14 or later)
+- npm or yarn
+
+### Installation
+
+1. Clone the repository:
+ \`\`\`
+ git clone https://github.com/your-username/airqo-ai-platform.git
+ cd airqo-ai-platform
+ \`\`\`
+
+2. Install dependencies:
+ \`\`\`
+ npm install
+ # or
+ yarn install
+ \`\`\`
+
+3. Set up environment variables:
+ Create a \`.env.local\` file in the root directory and add the following variables:
+ \`\`\`
+ NEXT_PUBLIC_API_TOKEN=your_api_token_here
+ NEXT_PUBLIC_LOCATE_API_URL=https://platform.airqo.net/api/v2/spatial/site_location
+ NEXT_PUBLIC_SITE_CATEGORY_API_URL=https://platform.airqo.net/api/v2/spatial/categorize_site
+ NEXT_PUBLIC_AIR_QUALITY_REPORT_API_URL_LLM=https://platform.airqo.net/api/v2/spatial/air_quality_report
+ NEXT_PUBLIC_SATELLITE_DATA_API_URL=https://platform.airqo.net/api/v2/spatial/satellite_prediction
+ NEXT_PUBLIC_DEVICE_DATA_API_URL=https://analytics.airqo.net/api/v2/devices/readings/map
+ NEXT_PUBLIC_GRID_SUMMARY_API_URL=https://platform.airqo.net/api/v2/devices/grids/summary?
+ \`\`\`
+
+4. Run the development server:
+ \`\`\`
+ npm run dev
+ # or
+ yarn dev
+ \`\`\`
+
+5. Open [http://localhost:3000](http://localhost:3000) in your browser to see the application.
+
+## Usage
+
+### Home Page
+The home page displays an interactive map with real-time air quality data. Users can:
+- Search for specific locations
+- View air quality information for different sites
+- Toggle between street and satellite map views
+
+### Locate Page
+Use the Site Locator tool to find optimal locations for new air quality sensors:
+1. Draw a polygon on the map to define the area of interest
+2. Set parameters such as the number of sensors and minimum distance between them
+3. Add must-have locations if needed
+4. Submit the request to receive AI-generated suggestions for sensor placements
+
+### Categorize Page
+Categorize sites based on their characteristics:
+1. Click on the map or upload a CSV file with site coordinates
+2. View the AI-generated category for each site
+3. Export the results as a CSV file
+
+### Reports Page
+Generate comprehensive air quality reports:
+1. Select a grid and date range
+2. View visualizations of air quality trends
+3. Access AI-generated insights and recommendations
+
+### About Page
+Learn more about AirQo's mission, core values, and impact in air quality monitoring across Africa.
+
+## Deployment
+
+The easiest way to deploy your AirQo AI Platform is to use the [Vercel Platform](https://vercel.com) from the creators of Next.js.
+
+### Deploying on Vercel
+
+1. Sign up for a Vercel account if you haven't already: [https://vercel.com/signup](https://vercel.com/signup)
+
+2. Install the Vercel CLI:
+ \`\`\`
+ npm i -g vercel
+ \`\`\`
+
+3. Run the following command from your project's root directory:
+ \`\`\`
+ vercel
+ \`\`\`
+
+4. Follow the prompts to link your project to Vercel and configure your deployment settings.
+
+5. Once deployed, Vercel will provide you with a URL for your live application.
+
+### Continuous Deployment
+
+Vercel supports continuous deployment with GitHub, GitLab, and Bitbucket. When you push changes to your repository, Vercel will automatically deploy the updates.
-
-Required environment variables:
+To set up continuous deployment:
-```.env
-# Your AirQo API token (obtain from AirQo dashboard)
-NEXT_PUBLIC_API_TOKEN=YOUR_TOKEN
+1. Connect your Git repository to your Vercel project.
+2. Configure your project settings on the Vercel dashboard.
+3. Push changes to your repository, and Vercel will automatically build and deploy your updates.
-# AirQo API endpoint
-NEXT_PUBLIC_API_URL=https://analytics.airqo.net/api/v2/
-```
-First, run the development server:
+For more detailed information about deploying Next.js applications on Vercel, check out the [Next.js deployment documentation](https://nextjs.org/docs/deployment).
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+## Technologies Used
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+- Next.js
+- React
+- TypeScript
+- Tailwind CSS
+- Leaflet (for maps)
+- Shadcn UI components
+- Lucide React icons
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+## Contributing
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+We welcome contributions to the AirQo AI Platform! Please follow these steps to contribute:
-## Learn More
+1. Fork the repository
+2. Create a new branch (\`git checkout -b feature/your-feature-name\`)
+3. Make your changes
+4. Commit your changes (\`git commit -am 'Add some feature'\`)
+5. Push to the branch (\`git push origin feature/your-feature-name\`)
+6. Create a new Pull Request
-To learn more about Next.js, take a look at the following resources:
+Please ensure your code follows the project's coding standards and includes appropriate tests.
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+## License
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
-## Deploy on Vercel
+## Contact
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+For any questions or support, please contact us at support@airqo.net or visit our website [https://www.airqo.net](https://www.airqo.net).
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
From a0179f8ce5436d614351cf37dcaa71dd13d17c00 Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Mon, 17 Feb 2025 14:21:24 +0300
Subject: [PATCH 40/55] build
---
frontend/README.md | 9 +++++++--
1 file changed, 7 insertions(+), 2 deletions(-)
diff --git a/frontend/README.md b/frontend/README.md
index 70d61cd..702ef8b 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -54,8 +54,13 @@ AirQo AI is an advanced air quality monitoring and forecasting platform designed
# or
yarn dev
\`\`\`
-
-5. Open [http://localhost:3000](http://localhost:3000) in your browser to see the application.
+5. Code Quality and Build
+ Before committing or deploying changes, ensure code quality and build readiness by running:
+ \`\`\`
+ npm run lint # Lint the codebase
+ npm run build # Create an optimized production build
+ \`\`\`
+6. Open [http://localhost:3000](http://localhost:3000) in your browser to see the application.
## Usage
From 7f24b38e90a654ea08acee3458dfa9b563948be0 Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Mon, 17 Feb 2025 14:39:04 +0300
Subject: [PATCH 41/55] mission
---
frontend/README.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/frontend/README.md b/frontend/README.md
index 702ef8b..1ec2591 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -2,8 +2,8 @@
## Overview
-AirQo AI is an advanced air quality monitoring and forecasting platform designed to efficiently collect, analyze, and forecast air quality data across Africa. Our mission is to provide accurate insights and raise awareness about air pollution in African cities.
-
+AirQo AI is an advanced air quality monitoring and forecasting platform designed to efficiently collect, analyze, and forecast air quality data across Africa.
+AirQo mission is to efficiently collect, analyze and forecast air quality data to international standards and work with partners to reduce air pollution and raise awareness of its effects in African cities.
## Features
From f17894075d08b5268debd9dfa0e42c4f491bb5a4 Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Mon, 17 Feb 2025 14:40:21 +0300
Subject: [PATCH 42/55] Mission
---
frontend/README.md | 1 +
1 file changed, 1 insertion(+)
diff --git a/frontend/README.md b/frontend/README.md
index 1ec2591..0df4270 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -4,6 +4,7 @@
AirQo AI is an advanced air quality monitoring and forecasting platform designed to efficiently collect, analyze, and forecast air quality data across Africa.
AirQo mission is to efficiently collect, analyze and forecast air quality data to international standards and work with partners to reduce air pollution and raise awareness of its effects in African cities.
+
## Features
From ee491900ae695ae0dbae4102a07912e47a467f97 Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Mon, 17 Feb 2025 14:54:29 +0300
Subject: [PATCH 43/55] ai
---
frontend/README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/frontend/README.md b/frontend/README.md
index 0df4270..5c77de5 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -5,7 +5,7 @@
AirQo AI is an advanced air quality monitoring and forecasting platform designed to efficiently collect, analyze, and forecast air quality data across Africa.
AirQo mission is to efficiently collect, analyze and forecast air quality data to international standards and work with partners to reduce air pollution and raise awareness of its effects in African cities.
-
+
## Features
From 3bd61522b13620583a4a3657731117b0d74dbcf6 Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Mon, 17 Feb 2025 15:00:35 +0300
Subject: [PATCH 44/55] AI
---
frontend/README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/frontend/README.md b/frontend/README.md
index 5c77de5..62a5896 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -6,7 +6,7 @@ AirQo AI is an advanced air quality monitoring and forecasting platform designed
AirQo mission is to efficiently collect, analyze and forecast air quality data to international standards and work with partners to reduce air pollution and raise awareness of its effects in African cities.
-
+
## Features
- **Interactive Map**: Real-time visualization of air quality data across various locations.
From 982a3ea8db609e3f51ea4516823cdd96738dec9e Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Mon, 17 Feb 2025 15:15:50 +0300
Subject: [PATCH 45/55] readme
---
frontend/README.md | 56 ++++++++++++++++++++++++----------------------
1 file changed, 29 insertions(+), 27 deletions(-)
diff --git a/frontend/README.md b/frontend/README.md
index 62a5896..6c5b2da 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -2,11 +2,10 @@
## Overview
-AirQo AI is an advanced air quality monitoring and forecasting platform designed to efficiently collect, analyze, and forecast air quality data across Africa.
-AirQo mission is to efficiently collect, analyze and forecast air quality data to international standards and work with partners to reduce air pollution and raise awareness of its effects in African cities.
+AirQo AI is an advanced air quality monitoring and forecasting platform designed to efficiently collect, analyze, and forecast air quality data across Africa. Our mission is to provide accurate insights and raise awareness about air pollution in African cities.
+
+
-
-
## Features
- **Interactive Map**: Real-time visualization of air quality data across various locations.
@@ -25,21 +24,21 @@ AirQo mission is to efficiently collect, analyze and forecast air quality data t
### Installation
1. Clone the repository:
- \`\`\`
+ ```
git clone https://github.com/your-username/airqo-ai-platform.git
cd airqo-ai-platform
- \`\`\`
+ ```
2. Install dependencies:
- \`\`\`
+ ```
npm install
# or
yarn install
- \`\`\`
+ ```
3. Set up environment variables:
- Create a \`.env.local\` file in the root directory and add the following variables:
- \`\`\`
+ Create a `.env.local` file in the root directory and add the following variables:
+ ```
NEXT_PUBLIC_API_TOKEN=your_api_token_here
NEXT_PUBLIC_LOCATE_API_URL=https://platform.airqo.net/api/v2/spatial/site_location
NEXT_PUBLIC_SITE_CATEGORY_API_URL=https://platform.airqo.net/api/v2/spatial/categorize_site
@@ -47,21 +46,24 @@ AirQo mission is to efficiently collect, analyze and forecast air quality data t
NEXT_PUBLIC_SATELLITE_DATA_API_URL=https://platform.airqo.net/api/v2/spatial/satellite_prediction
NEXT_PUBLIC_DEVICE_DATA_API_URL=https://analytics.airqo.net/api/v2/devices/readings/map
NEXT_PUBLIC_GRID_SUMMARY_API_URL=https://platform.airqo.net/api/v2/devices/grids/summary?
- \`\`\`
+ ```
4. Run the development server:
- \`\`\`
+ ```
npm run dev
# or
yarn dev
- \`\`\`
-5. Code Quality and Build
- Before committing or deploying changes, ensure code quality and build readiness by running:
- \`\`\`
- npm run lint # Lint the codebase
- npm run build # Create an optimized production build
- \`\`\`
-6. Open [http://localhost:3000](http://localhost:3000) in your browser to see the application.
+ ```
+
+5. Open [http://localhost:3000](http://localhost:3000) in your browser to see the application.
+
+### Code Quality and Build
+
+Before committing or deploying changes, ensure code quality and build readiness by running:
+ ```
+ npm run lint # Lint the codebase
+ npm run build # Create an optimized production build
+ ```
## Usage
@@ -102,14 +104,14 @@ The easiest way to deploy your AirQo AI Platform is to use the [Vercel Platform]
1. Sign up for a Vercel account if you haven't already: [https://vercel.com/signup](https://vercel.com/signup)
2. Install the Vercel CLI:
- \`\`\`
+ ```
npm i -g vercel
- \`\`\`
+ ```
3. Run the following command from your project's root directory:
- \`\`\`
+ ```
vercel
- \`\`\`
+ ```
4. Follow the prompts to link your project to Vercel and configure your deployment settings.
@@ -142,10 +144,10 @@ For more detailed information about deploying Next.js applications on Vercel, ch
We welcome contributions to the AirQo AI Platform! Please follow these steps to contribute:
1. Fork the repository
-2. Create a new branch (\`git checkout -b feature/your-feature-name\`)
+2. Create a new branch (`git checkout -b feature/your-feature-name`)
3. Make your changes
-4. Commit your changes (\`git commit -am 'Add some feature'\`)
-5. Push to the branch (\`git push origin feature/your-feature-name\`)
+4. Commit your changes (`git commit -am 'Add some feature'`)
+5. Push to the branch (`git push origin feature/your-feature-name`)
6. Create a new Pull Request
Please ensure your code follows the project's coding standards and includes appropriate tests.
From 3a6f2c69de823ebf4b9208dbcb6168a303ab0fcc Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Mon, 17 Feb 2025 15:27:09 +0300
Subject: [PATCH 46/55] ai platform
---
frontend/README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/frontend/README.md b/frontend/README.md
index 6c5b2da..3b376cc 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -4,7 +4,7 @@
AirQo AI is an advanced air quality monitoring and forecasting platform designed to efficiently collect, analyze, and forecast air quality data across Africa. Our mission is to provide accurate insights and raise awareness about air pollution in African cities.
-
+
## Features
From 5724c311ba583eaff25cd48c045f47c5ed357cfa Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Mon, 17 Feb 2025 15:29:56 +0300
Subject: [PATCH 47/55] platform
---
frontend/README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/frontend/README.md b/frontend/README.md
index 3b376cc..42c33b3 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -4,7 +4,7 @@
AirQo AI is an advanced air quality monitoring and forecasting platform designed to efficiently collect, analyze, and forecast air quality data across Africa. Our mission is to provide accurate insights and raise awareness about air pollution in African cities.
-
+AirQo AI Platform [https://www.ai.airqo.net](https://www.ai.airqo.net).
## Features
From 29ca1a5d1f0afbc9b21899fc529267e5d19177f4 Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Mon, 17 Feb 2025 15:32:12 +0300
Subject: [PATCH 48/55] net
---
frontend/README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/frontend/README.md b/frontend/README.md
index 42c33b3..fae4037 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -4,7 +4,7 @@
AirQo AI is an advanced air quality monitoring and forecasting platform designed to efficiently collect, analyze, and forecast air quality data across Africa. Our mission is to provide accurate insights and raise awareness about air pollution in African cities.
-AirQo AI Platform [https://www.ai.airqo.net](https://www.ai.airqo.net).
+AirQo AI Platform [https://ai.airqo.net/](https://ai.airqo.net/).
## Features
From 8b1e5ae052de634d7e19c703e2e8dedbc64a4370 Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Mon, 17 Feb 2025 17:30:09 +0300
Subject: [PATCH 49/55] go
---
frontend/README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/frontend/README.md b/frontend/README.md
index fae4037..34a1e16 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -5,7 +5,7 @@
AirQo AI is an advanced air quality monitoring and forecasting platform designed to efficiently collect, analyze, and forecast air quality data across Africa. Our mission is to provide accurate insights and raise awareness about air pollution in African cities.
AirQo AI Platform [https://ai.airqo.net/](https://ai.airqo.net/).
-
+
## Features
- **Interactive Map**: Real-time visualization of air quality data across various locations.
From 4d9c143c14d7a02d93814d428246325297d020b8 Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Tue, 18 Feb 2025 13:36:51 +0300
Subject: [PATCH 50/55] apismade
---
frontend/README.md | 7 +-
frontend/src/lib/api.ts | 185 +++++++++++++++++-----------------------
2 files changed, 79 insertions(+), 113 deletions(-)
diff --git a/frontend/README.md b/frontend/README.md
index 34a1e16..90ceb16 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -40,12 +40,7 @@ AirQo AI Platform [https://ai.airqo.net/](https://ai.airqo.net/).
Create a `.env.local` file in the root directory and add the following variables:
```
NEXT_PUBLIC_API_TOKEN=your_api_token_here
- NEXT_PUBLIC_LOCATE_API_URL=https://platform.airqo.net/api/v2/spatial/site_location
- NEXT_PUBLIC_SITE_CATEGORY_API_URL=https://platform.airqo.net/api/v2/spatial/categorize_site
- NEXT_PUBLIC_AIR_QUALITY_REPORT_API_URL_LLM=https://platform.airqo.net/api/v2/spatial/air_quality_report
- NEXT_PUBLIC_SATELLITE_DATA_API_URL=https://platform.airqo.net/api/v2/spatial/satellite_prediction
- NEXT_PUBLIC_DEVICE_DATA_API_URL=https://analytics.airqo.net/api/v2/devices/readings/map
- NEXT_PUBLIC_GRID_SUMMARY_API_URL=https://platform.airqo.net/api/v2/devices/grids/summary?
+ NEXT_PUBLIC_API_URL=https://analytics.airqo.net/api/v2/
```
4. Run the development server:
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index 6ceeb03..62b3682 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -7,63 +7,81 @@ import {
Grid,
} from "./types";
-const API_TOKEN = process.env.NEXT_PUBLIC_API_TOKEN;
-// const BASE_URL = process.env.NEXT_PUBLIC_API_URL;
-const PUBLIC_LOCATE_API_URL = process.env.NEXT_PUBLIC_LOCATE_API_URL;
-const PUBLIC_SITE_CATEGORY_API_URL =
- process.env.NEXT_PUBLIC_SITE_CATEGORY_API_URL;
-const PUBLIC_AIR_QUALITY_REPORT_API_URL_LLM =
- process.env.NEXT_PUBLIC_AIR_QUALITY_REPORT_API_URL_LLM;
-// const PUBLIC_SATELLITE_DATA_API_URL = process.env.NEXT_PUBLIC_SATELLITE_DATA_API_URL;
-// const PUBLIC_DEVICE_DATA_API_URL = process.env.NEXT_PUBLIC_DEVICE_DATA_API_URL;
-const PUBLIC_GRID_SUMMARY_API_URL =
- process.env.NEXT_PUBLIC_GRID_SUMMARY_API_URL;
-
-const requiredEnvVars = {
- API_TOKEN: process.env.NEXT_PUBLIC_API_TOKEN,
- BASE_URL: process.env.NEXT_PUBLIC_API_URL,
- LOCATE_API_URL: process.env.NEXT_PUBLIC_LOCATE_API_URL,
- // ... add other required variables as needed
-};
-
-Object.entries(requiredEnvVars).forEach(([key, value]) => {
- if (!value) throw new Error(`Missing required environment variable: ${key}`);
-});
+function getApiConfig() {
+ const baseUrl = process.env.NEXT_PUBLIC_API_URL;
+ const token = process.env.NEXT_PUBLIC_API_TOKEN;
-export async function submitLocations(
- payload: SiteLocatorPayload
-): Promise<SiteLocatorResponse> {
- try {
- if (!PUBLIC_LOCATE_API_URL || !API_TOKEN) {
- throw new Error("API configuration missing");
- }
+ if (!baseUrl || !token) {
+ throw new Error(
+ "API configuration is missing. Ensure NEXT_PUBLIC_API_URL and NEXT_PUBLIC_API_TOKEN are set."
+ );
+ }
- console.log("Making API request to:", PUBLIC_LOCATE_API_URL);
- console.log("Request payload:", payload);
+ return { baseUrl, token };
+}
- const response = await fetch(
- `${PUBLIC_LOCATE_API_URL}?token=${API_TOKEN}`,
- {
- method: "POST",
- headers: {
- "Content-Type": "application/json",
- Accept: "application/json",
- },
- body: JSON.stringify(payload),
- }
+async function baseFetch<T>(
+ endpoint: string,
+ options: {
+ method?: string;
+ queryParams?: Record<string, string | number>;
+ json?: unknown;
+ } = {}
+): Promise<T> {
+ const { baseUrl, token } = getApiConfig();
+ const url = new URL(endpoint, baseUrl);
+
+ // Add query parameters
+ if (options.queryParams) {
+ Object.entries(options.queryParams).forEach(([key, value]) => {
+ url.searchParams.append(key, String(value));
+ });
+ }
+
+ // Add API token
+ url.searchParams.append("token", token);
+
+ // Configure headers
+ const headers: HeadersInit = {
+ Accept: "application/json",
+ };
+
+ // Configure body
+ let body: BodyInit | undefined;
+ if (options.json) {
+ headers["Content-Type"] = "application/json";
+ body = JSON.stringify(options.json);
+ }
+
+ // Log request details
+ //console.log("Making API request to:", url.toString());
+ if (options.json) console.log("Request payload:", options.json);
+
+ const response = await fetch(url.toString(), {
+ method: options.method || "GET",
+ headers,
+ body,
+ });
+
+ if (!response.ok) {
+ const errorData = await response.text();
+ console.error("API Error Response:", errorData);
+ throw new Error(
+ `API request failed: ${response.status} ${response.statusText}`
);
+ }
- if (!response.ok) {
- const errorData = await response.text();
- console.error("API Error Response:", errorData);
- throw new Error(
- `API request failed: ${response.status} ${response.statusText}`
- );
- }
-
- const data = await response.json();
- console.log("API Response data:", data);
- return data;
+ return response.json() as Promise<T>;
+}
+
+export async function submitLocations(
+ payload: SiteLocatorPayload
+): Promise<SiteLocatorResponse> {
+ try {
+ return await baseFetch<SiteLocatorResponse>("spatial/site_location", {
+ method: "POST",
+ json: payload,
+ });
} catch (error) {
console.error("Error submitting locations:", error);
throw error;
@@ -75,30 +93,9 @@ export async function getSiteCategory(
longitude: number
): Promise<SiteCategoryResponse> {
try {
- if (!PUBLIC_SITE_CATEGORY_API_URL || !API_TOKEN) {
- throw new Error("API configuration missing");
- }
-
- console.log("Making site category API request for:", {
- latitude,
- longitude,
+ return await baseFetch<SiteCategoryResponse>("spatial/categorize_site", {
+ queryParams: { latitude, longitude },
});
-
- const response = await fetch(
- `${PUBLIC_SITE_CATEGORY_API_URL}?latitude=${latitude}&longitude=${longitude}&token=${API_TOKEN}`
- );
-
- if (!response.ok) {
- const errorData = await response.text();
- console.error("API Error Response:", errorData);
- throw new Error(
- `API request failed: ${response.status} ${response.statusText}`
- );
- }
-
- const data = await response.json();
- console.log("Site category API Response:", data);
- return data;
} catch (error) {
console.error("Error getting site category:", error);
throw error;
@@ -109,28 +106,13 @@ export async function getAirQualityReport(
payload: AirQualityReportPayload
): Promise<AirQualityReportResponse> {
try {
- const response = await fetch(
- `${PUBLIC_AIR_QUALITY_REPORT_API_URL_LLM}?token=${API_TOKEN}`,
+ return await baseFetch<AirQualityReportResponse>(
+ "spatial/air_quality_report",
{
method: "POST",
- headers: {
- "Content-Type": "application/json",
- },
- body: JSON.stringify(payload),
+ json: payload,
}
);
-
- if (!response.ok) {
- const errorData = await response.text();
- console.error("API Error Response:", errorData);
- throw new Error(
- `API request failed: ${response.status} ${response.statusText}`
- );
- }
-
- const data = await response.json();
- console.log("Air Quality Report Response:", data);
- return data;
} catch (error) {
console.error("Error getting air quality report:", error);
throw error;
@@ -139,21 +121,10 @@ export async function getAirQualityReport(
export async function fetchGrids(): Promise<Grid[]> {
try {
- const response = await fetch(
- `${PUBLIC_GRID_SUMMARY_API_URL}?token=${API_TOKEN}`
- );
- if (!response.ok) {
- throw new Error(
- `Failed to fetch grids: ${response.status} ${response.statusText}`
- );
- }
- const data = await response.json();
+ const data = await baseFetch<{ grids: Grid[] }>("devices/grids/summary");
return data.grids;
} catch (error) {
console.error("Error fetching grids:", error);
- throw new Error(
- "Failed to fetch grids: " +
- (error instanceof Error ? error.message : "Unknown error")
- );
+ throw error;
}
-}
+}
\ No newline at end of file
From 4c200b84578119f0083e97d7a671783c7ee723a5 Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Wed, 19 Feb 2025 10:19:39 +0300
Subject: [PATCH 51/55] nav-responsive
---
.../src/components/navigation/navigation.tsx | 40 ++++++++++++++++---
1 file changed, 35 insertions(+), 5 deletions(-)
diff --git a/frontend/src/components/navigation/navigation.tsx b/frontend/src/components/navigation/navigation.tsx
index 292f0cd..d4f97a9 100644
--- a/frontend/src/components/navigation/navigation.tsx
+++ b/frontend/src/components/navigation/navigation.tsx
@@ -1,9 +1,10 @@
"use client";
-import type React from "react";
+import { useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
+import { Menu, X } from "lucide-react";
const navItems = [
{ name: "Home", href: "/" },
@@ -13,10 +14,9 @@ const navItems = [
{ name: "About", href: "/about" },
];
-export default function Navigation({
- ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
+export default function Navigation({ ...props }) {
const pathname = usePathname();
+ const [isOpen, setIsOpen] = useState(false);
return (
<header className="sticky top-0 z-50 bg-white border-b shadow-sm">
@@ -25,7 +25,16 @@ export default function Navigation({
AirQo AI
</Link>
- <nav className="flex items-center space-x-8" {...props}>
+ {/* Mobile Menu Button */}
+ <button
+ className="lg:hidden text-gray-600 hover:text-gray-900"
+ onClick={() => setIsOpen(!isOpen)}
+ >
+ {isOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
+ </button>
+
+ {/* Desktop Navigation */}
+ <nav className="hidden lg:flex items-center space-x-8" {...props}>
{navItems.map((item) => (
<Link
key={item.name}
@@ -41,6 +50,27 @@ export default function Navigation({
))}
</nav>
</div>
+
+ {/* Mobile Navigation */}
+ {isOpen && (
+ <nav className="lg:hidden bg-white border-t shadow-md">
+ <div className="container mx-auto px-4 py-4 space-y-4">
+ {navItems.map((item) => (
+ <Link
+ key={item.name}
+ href={item.href}
+ className={cn(
+ "block text-base font-medium text-gray-600 hover:text-gray-900",
+ pathname === item.href && "text-gray-900"
+ )}
+ onClick={() => setIsOpen(false)}
+ >
+ {item.name}
+ </Link>
+ ))}
+ </div>
+ </nav>
+ )}
</header>
);
}
From 15f4a832db81fd5c8ecfd1cca801abb1d0d9e365 Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Wed, 19 Feb 2025 12:47:59 +0300
Subject: [PATCH 52/55] responsive
---
frontend/src/app/locate/page.tsx | 87 ++++++++-----------
.../src/components/map/NavigationControls.tsx | 11 +--
2 files changed, 39 insertions(+), 59 deletions(-)
diff --git a/frontend/src/app/locate/page.tsx b/frontend/src/app/locate/page.tsx
index 8e4ce2b..82c1026 100644
--- a/frontend/src/app/locate/page.tsx
+++ b/frontend/src/app/locate/page.tsx
@@ -1,5 +1,4 @@
"use client";
-
import { useState } from "react";
import { ControlPanel } from "@/components/Controls/ControlPanel";
import type { Location, SiteLocatorPayload } from "@/lib/types";
@@ -24,22 +23,18 @@ export default function Index() {
const handleSubmit = async (payload: SiteLocatorPayload) => {
try {
- console.log("Submitting payload:", payload); // Debug log for request
+ console.log("Submitting payload:", payload);
const response = await submitLocations(payload);
- console.log("API Response:", response); // Debug log for response
-
+ console.log("API Response:", response);
if (!response.site_location || !Array.isArray(response.site_location)) {
throw new Error("Invalid response format from API");
}
-
const locations = response.site_location.map((site) => ({
lat: site.latitude,
lng: site.longitude,
}));
-
- console.log("Processed locations to plot:", locations); // Debug log for processed locations
+ console.log("Processed locations to plot:", locations);
setSuggestedLocations(locations);
-
toast({
title: "Success",
description: `Found ${locations.length} suggested locations`,
@@ -68,21 +63,17 @@ export default function Index() {
});
return;
}
-
- const headers = ["Type", "Latitude", "Longitude", "Area Name", "Category"];
-
+ const headers = ["Type", "Latitude", "Longitude"];
const uniqueLocations = new Set();
const formatRow = (type: string, loc: Location) =>
`${type},${loc.lat},${loc.lng},,`;
- // Add must-have locations first
const rows = mustHaveLocations.map((loc) => {
const key = `${loc.lat},${loc.lng}`;
uniqueLocations.add(key);
return formatRow("Must Have", loc);
});
- // Add suggested locations, excluding duplicates and must-have locations
suggestedLocations.forEach((loc) => {
const key = `${loc.lat},${loc.lng}`;
if (!uniqueLocations.has(key)) {
@@ -92,7 +83,6 @@ export default function Index() {
});
const csvContent = [headers.join(","), ...rows].join("\n");
-
const blob = new Blob([csvContent], { type: "text/csv" });
const url = window.URL.createObjectURL(blob);
const a = document.createElement("a");
@@ -100,7 +90,6 @@ export default function Index() {
a.download = "locations.csv";
a.click();
window.URL.revokeObjectURL(url);
-
toast({
title: "Success",
description: "CSV file downloaded successfully",
@@ -116,7 +105,6 @@ export default function Index() {
a.href = url;
a.download = "map.png";
a.click();
-
toast({
title: "Success",
description: "Map image saved successfully",
@@ -130,6 +118,7 @@ export default function Index() {
return (
<div className="flex flex-col h-screen">
+ {/* Navigation */}
<Navigation />
<div className="relative flex-1">
<MapComponent
@@ -140,7 +129,6 @@ export default function Index() {
onLocationClick={handleLocationClick}
isDrawing={isDrawing}
/>
-
{/* Control Panel */}
<div className="absolute right-4 top-4 z-[1000]">
<ControlPanel
@@ -150,40 +138,41 @@ export default function Index() {
onMustHaveLocationsChange={setMustHaveLocations}
onBoundaryFound={setPolygon}
/>
- </div>
-
- {/* Action Buttons */}
- <div className="absolute bottom-4 right-4 z-[1000] flex gap-2">
- <Button
- onClick={handleExportCSV}
- className="bg-blue-600 hover:bg-blue-700 text-white"
- >
- <Download className="h-4 w-4 mr-2" />
- Export CSV
- </Button>
- <Button
- onClick={handleSaveMap}
- className="bg-blue-600 hover:bg-blue-700 text-white"
- >
- <Camera className="h-4 w-4 mr-2" />
- Save Map
- </Button>
- </div>
- {/* Draw Polygon Button */}
- <div className="absolute bottom-4 right-1/2 transform translate-x-1/2 z-[1000]">
- <Button
- className={`${
- isDrawing
- ? "bg-red-600 hover:bg-red-700"
- : "bg-blue-600 hover:bg-blue-700"
- } text-white`}
- onClick={toggleDrawing}
- >
- {isDrawing ? "Finish Drawing" : "Draw Polygon"}
- </Button>
+ {/* Action Buttons */}
+ <div className="mt-8 flex justify-center gap-4">
+ <Button
+ onClick={handleExportCSV}
+ aria-label="Export locations to CSV"
+ className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg"
+ >
+ <Download className="h-4 w-4" />
+ Save CSV
+ </Button>
+ <Button
+ onClick={handleSaveMap}
+ aria-label="Save map as image"
+ className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg"
+ >
+ <Camera className="h-4 w-4" />
+ Save Map
+ </Button>
+
+ {/* Draw Polygon Button */}
+ <Button
+ onClick={toggleDrawing}
+ aria-label={isDrawing ? "Finish drawing polygon" : "Start drawing polygon"}
+ className={`${
+ isDrawing
+ ? "bg-red-600 hover:bg-red-700"
+ : "bg-blue-600 hover:bg-blue-700"
+ } flex items-center gap-2 text-white px-4 py-2 rounded-lg`}
+ >
+ {isDrawing ? "Finish Drawing" : "Draw Polygon"}
+ </Button>
+ </div>
</div>
</div>
</div>
);
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/map/NavigationControls.tsx b/frontend/src/components/map/NavigationControls.tsx
index d8b6bae..cc7bde0 100644
--- a/frontend/src/components/map/NavigationControls.tsx
+++ b/frontend/src/components/map/NavigationControls.tsx
@@ -1,7 +1,4 @@
"use client";
-
-import { Button } from '@/ui/button';
-
interface NavigationControlsProps {
isDrawing: boolean;
onDrawingToggle: () => void;
@@ -10,13 +7,7 @@ interface NavigationControlsProps {
export function NavigationControls({ isDrawing, onDrawingToggle }: NavigationControlsProps) {
return (
<div className="absolute bottom-4 right-4 z-[1000]">
- <Button
- variant={isDrawing ? "secondary" : "default"}
- onClick={onDrawingToggle}
- className="shadow-lg"
- >
- {isDrawing ? "Finish Drawing" : "Draw Polygon"}
- </Button>
+
</div>
);
}
From 27eb43ee3012743bcbd7c56d34a90e5b2c575d91 Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Wed, 19 Feb 2025 13:00:25 +0300
Subject: [PATCH 53/55] nav
---
frontend/src/components/map/NavigationControls.tsx | 6 +-----
1 file changed, 1 insertion(+), 5 deletions(-)
diff --git a/frontend/src/components/map/NavigationControls.tsx b/frontend/src/components/map/NavigationControls.tsx
index cc7bde0..af5e5a5 100644
--- a/frontend/src/components/map/NavigationControls.tsx
+++ b/frontend/src/components/map/NavigationControls.tsx
@@ -1,10 +1,6 @@
"use client";
-interface NavigationControlsProps {
- isDrawing: boolean;
- onDrawingToggle: () => void;
-}
-export function NavigationControls({ isDrawing, onDrawingToggle }: NavigationControlsProps) {
+export function NavigationControls() {
return (
<div className="absolute bottom-4 right-4 z-[1000]">
From 60cdbacec07fee97cbbfd3e7678bbc54fa519592 Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Wed, 19 Feb 2025 13:14:21 +0300
Subject: [PATCH 54/55] lo
---
frontend/src/app/locate/page.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/frontend/src/app/locate/page.tsx b/frontend/src/app/locate/page.tsx
index 82c1026..f16db9c 100644
--- a/frontend/src/app/locate/page.tsx
+++ b/frontend/src/app/locate/page.tsx
@@ -175,4 +175,4 @@ export default function Index() {
</div>
</div>
);
-}
\ No newline at end of file
+}
From 21a57d65918c5034aada2e7a77353a4e96519647 Mon Sep 17 00:00:00 2001
From: wabinyai <rajacastro@gmail.com>
Date: Wed, 19 Feb 2025 13:36:06 +0300
Subject: [PATCH 55/55] control
---
frontend/src/components/map/MapComponent.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/frontend/src/components/map/MapComponent.tsx b/frontend/src/components/map/MapComponent.tsx
index df25ebe..28e511c 100644
--- a/frontend/src/components/map/MapComponent.tsx
+++ b/frontend/src/components/map/MapComponent.tsx
@@ -205,7 +205,7 @@ export default function MapComponent({
))}
</MapContainer>
- <NavigationControls isDrawing={isDrawing} onDrawingToggle={() => {}} />
+ <NavigationControls/>
</div>
);
}