Netmanager nextjs project setup

netmanager-app/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

netmanager-app/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

netmanager-app/README.md

@@ -0,0 +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).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+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.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [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.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+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.

netmanager-app/app/(authenticated)/analytics/page.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default function Analytics() {
+  return (
+    <div className="p-6">
+      <h1 className="text-3xl font-semibold text-foreground mb-6">Dashboard</h1>
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>Total Devices</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-4xl font-bold">156</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Active Sites</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-4xl font-bold">42</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Data Points Collected</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-4xl font-bold">1.2M</p>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

netmanager-app/app/(authenticated)/layout.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import "../globals.css";
+import Layout from "../../components/layout";
+
+export default function AuthenticatedLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <Layout>{children}</Layout>;
+}

netmanager-app/app/(authenticated)/sites/[id]/devices.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { Device } from "@/app/types/sites";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+
+interface SiteDevicesProps {
+  devices: Device[];
+}
+
+export function SiteDevices({ devices }: SiteDevicesProps) {
+  return (
+    <div className="border rounded-lg">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Description</TableHead>
+            <TableHead>Site</TableHead>
+            <TableHead>Is Primary</TableHead>
+            <TableHead>Is Co-located</TableHead>
+            <TableHead>Added On</TableHead>
+            <TableHead>Deployment status</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {devices.map((device) => (
+            <TableRow key={device.name}>
+              <TableCell>{device.name}</TableCell>
+              <TableCell>{device.description || "N/A"}</TableCell>
+              <TableCell>{device.site || "N/A"}</TableCell>
+              <TableCell>
+                <Badge variant={device.isPrimary ? "default" : "secondary"}>
+                  {device.isPrimary ? "Yes" : "No"}
+                </Badge>
+              </TableCell>
+              <TableCell>
+                <Badge variant={device.isCoLocated ? "default" : "secondary"}>
+                  {device.isCoLocated ? "Yes" : "No"}
+                </Badge>
+              </TableCell>
+              <TableCell>{device.registrationDate}</TableCell>
+              <TableCell>
+                <Badge
+                  variant={
+                    device.deploymentStatus === "Deployed"
+                      ? "default"
+                      : "secondary"
+                  }
+                >
+                  {device.deploymentStatus}
+                </Badge>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

netmanager-app/app/(authenticated)/sites/[id]/page.tsx

@@ -0,0 +1,188 @@
+"use client";
+
+import { useState } from "react";
+import { ChevronLeft, Edit2 } from "lucide-react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { SiteForm } from "../site-form";
+import { SiteDevices } from "./devices";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+
+// Sample site data
+const siteData = {
+  id: "site_528",
+  name: "Water and Environment House, Luzira",
+  description: "Water and Environment House, Luzira",
+  organization: "AirQo",
+  latitude: 0.302458,
+  longitude: 32.641609,
+  network: "airqo",
+  parish: "Nakawa",
+  subCounty: "Nakawa",
+  district: "Kampala",
+  region: "Central Region",
+  altitude: 1177.3994140625,
+  greenness: "",
+  nearestRoad: null,
+  mobileAppName: "Nakawa 528",
+  mobileAppDescription: "Kampala, Uganda",
+};
+
+// Sample device data
+const devices = [
+  {
+    name: "aq_g5_101",
+    description: "",
+    site: "Water and Environment House, Luzira",
+    isPrimary: true,
+    isCoLocated: false,
+    registrationDate: "September 27, 2022",
+    deploymentStatus: "Deployed" as const,
+  },
+];
+
+export default function SiteDetailsPage() {
+  const [isEditing, setIsEditing] = useState(false);
+
+  return (
+    <div className="p-6">
+      <div className="mb-6">
+        <Button variant="ghost" asChild className="mb-4">
+          <Link href="/sites">
+            <ChevronLeft className="mr-2 h-4 w-4" />
+            Back to Sites
+          </Link>
+        </Button>
+        <div className="flex justify-between items-center">
+          <h1 className="text-2xl font-semibold">Site Details</h1>
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button>
+                <Edit2 className="mr-2 h-4 w-4" />
+                Edit Site
+              </Button>
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-[600px]">
+              <DialogHeader>
+                <DialogTitle>Edit Site</DialogTitle>
+                <DialogDescription>
+                  Make changes to the site details here. Click save when you're
+                  done.
+                </DialogDescription>
+              </DialogHeader>
+              <SiteForm initialData={siteData} />
+            </DialogContent>
+          </Dialog>
+        </div>
+      </div>
+
+      <div className="space-y-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>Site Information</CardTitle>
+            <CardDescription>Details about the monitoring site</CardDescription>
+          </CardHeader>
+          <CardContent className="grid grid-cols-2 gap-4">
+            <div>
+              <h3 className="font-semibold">Name</h3>
+              <p>{siteData.name}</p>
+            </div>
+            <div>
+              <h3 className="font-semibold">Description</h3>
+              <p>{siteData.description}</p>
+            </div>
+            <div>
+              <h3 className="font-semibold">Organization</h3>
+              <p>{siteData.organization}</p>
+            </div>
+            <div>
+              <h3 className="font-semibold">Network</h3>
+              <p>{siteData.network}</p>
+            </div>
+            <div>
+              <h3 className="font-semibold">Latitude</h3>
+              <p>{siteData.latitude}</p>
+            </div>
+            <div>
+              <h3 className="font-semibold">Longitude</h3>
+              <p>{siteData.longitude}</p>
+            </div>
+            <div>
+              <h3 className="font-semibold">Parish</h3>
+              <p>{siteData.parish}</p>
+            </div>
+            <div>
+              <h3 className="font-semibold">Sub County</h3>
+              <p>{siteData.subCounty}</p>
+            </div>
+            <div>
+              <h3 className="font-semibold">District</h3>
+              <p>{siteData.district}</p>
+            </div>
+            <div>
+              <h3 className="font-semibold">Region</h3>
+              <p>{siteData.region}</p>
+            </div>
+            <div>
+              <h3 className="font-semibold">Altitude</h3>
+              <p>{siteData.altitude} m</p>
+            </div>
+            <div>
+              <h3 className="font-semibold">Greenness</h3>
+              <p>{siteData.greenness || "N/A"}</p>
+            </div>
+            <div>
+              <h3 className="font-semibold">Nearest Road</h3>
+              <p>
+                {siteData.nearestRoad ? `${siteData.nearestRoad} m` : "N/A"}
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Mobile App Details</CardTitle>
+            <CardDescription>
+              Information displayed in the mobile app
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="grid grid-cols-2 gap-4">
+            <div>
+              <h3 className="font-semibold">Name</h3>
+              <p>{siteData.mobileAppName}</p>
+            </div>
+            <div>
+              <h3 className="font-semibold">Description</h3>
+              <p>{siteData.mobileAppDescription}</p>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Site Devices</CardTitle>
+            <CardDescription>Devices deployed at this site</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <SiteDevices devices={devices} />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}