Merge pull request #2364 from airqo-platform/migrate-netmanager

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,119 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next/
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Cypress files
+cypress/videos
+cypress/screenshots
+
+# Yarn add output
+.pnp.cjs
+.pnp.loader.mjs
+.yarn/
+.yarnrc.yml
+
+# vscode files
+.vscode/*
+

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>
+  );
+}