Merge remote-tracking branch 'origin/DevEsteban' into DevMarlene
This commit is contained in:
Marlene-Angel
13
src/App.tsx
13
src/App.tsx
@@ -19,13 +19,20 @@ export type Page =
|
||||
|
||||
export default function App() {
|
||||
const [page, setPage] = useState<Page>("home");
|
||||
const [subPage, setSubPage] = useState<string>("default");
|
||||
const [selectedProject, setSelectedProject] = useState<string>("");
|
||||
|
||||
const navigateToMetersWithProject = (projectName: string) => {
|
||||
setSelectedProject(projectName);
|
||||
setPage("meters");
|
||||
};
|
||||
|
||||
const renderPage = () => {
|
||||
switch (page) {
|
||||
case "projects":
|
||||
return <ProjectsPage />;
|
||||
case "meters":
|
||||
return <MetersPage />;
|
||||
return <MetersPage selectedProject={selectedProject} />;
|
||||
case "concentrators":
|
||||
return <ConcentratorsPage />;
|
||||
case "users":
|
||||
@@ -34,7 +41,7 @@ export default function App() {
|
||||
return <RolesPage />;
|
||||
case "home":
|
||||
default:
|
||||
return <Home />;
|
||||
return <Home setPage={setPage} navigateToMetersWithProject={navigateToMetersWithProject} />;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -49,7 +56,7 @@ export default function App() {
|
||||
{/* min-w-0: evita que páginas anchas (tablas) empujen el layout */}
|
||||
<div className="flex min-w-0 flex-1 flex-col">
|
||||
<div className="shrink-0">
|
||||
<TopMenu />
|
||||
<TopMenu page={page} subPage={subPage} setSubPage={setSubPage} />
|
||||
</div>
|
||||
|
||||
{/* Scroll solo aquí */}
|
||||
|
||||
@@ -64,10 +64,11 @@ export interface Meter {
|
||||
}
|
||||
|
||||
export const fetchMeters = async (): Promise<Meter[]> => {
|
||||
const pageSize = 9999;
|
||||
try {
|
||||
const response = await fetch(METERS_API_URL, {
|
||||
const response = await fetch(`${METERS_API_URL}?pageSize=${pageSize}`, {
|
||||
method: "GET",
|
||||
headers: getAuthHeaders(),
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
@@ -97,7 +98,6 @@ export const fetchMeters = async (): Promise<Meter[]> => {
|
||||
usageAnalysisType: r.fields["Usage Analysis Type"] || "",
|
||||
installedTime: r.fields["Installed Time"] || "",
|
||||
}));
|
||||
console.log ("ans", ans);
|
||||
|
||||
return ans;
|
||||
} catch (error) {
|
||||
@@ -139,7 +139,9 @@ export const createMeter = async (
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to create meter: ${response.status} ${response.statusText}`);
|
||||
throw new Error(
|
||||
`Failed to create meter: ${response.status} ${response.statusText}`
|
||||
);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
@@ -154,22 +156,32 @@ export const createMeter = async (
|
||||
createdAt: createdRecord.fields.CreatedAt || meterData.createdAt,
|
||||
updatedAt: createdRecord.fields.UpdatedAt || meterData.updatedAt,
|
||||
areaName: createdRecord.fields["Area Name"] || meterData.areaName,
|
||||
accountNumber: createdRecord.fields["Account Number"] || meterData.accountNumber,
|
||||
accountNumber:
|
||||
createdRecord.fields["Account Number"] || meterData.accountNumber,
|
||||
userName: createdRecord.fields["User Name"] || meterData.userName,
|
||||
userAddress: createdRecord.fields["User Address"] || meterData.userAddress,
|
||||
meterSerialNumber: createdRecord.fields["Meter S/N"] || meterData.meterSerialNumber,
|
||||
userAddress:
|
||||
createdRecord.fields["User Address"] || meterData.userAddress,
|
||||
meterSerialNumber:
|
||||
createdRecord.fields["Meter S/N"] || meterData.meterSerialNumber,
|
||||
meterName: createdRecord.fields["Meter Name"] || meterData.meterName,
|
||||
meterStatus: createdRecord.fields["Meter Status"] || meterData.meterStatus,
|
||||
protocolType: createdRecord.fields["Protocol Type"] || meterData.protocolType,
|
||||
meterStatus:
|
||||
createdRecord.fields["Meter Status"] || meterData.meterStatus,
|
||||
protocolType:
|
||||
createdRecord.fields["Protocol Type"] || meterData.protocolType,
|
||||
priceNo: createdRecord.fields["Price No."] || meterData.priceNo,
|
||||
priceName: createdRecord.fields["Price Name"] || meterData.priceName,
|
||||
dmaPartition: createdRecord.fields["DMA Partition"] || meterData.dmaPartition,
|
||||
supplyTypes: createdRecord.fields["Supply Types"] || meterData.supplyTypes,
|
||||
dmaPartition:
|
||||
createdRecord.fields["DMA Partition"] || meterData.dmaPartition,
|
||||
supplyTypes:
|
||||
createdRecord.fields["Supply Types"] || meterData.supplyTypes,
|
||||
deviceId: createdRecord.fields["Device ID"] || meterData.deviceId,
|
||||
deviceName: createdRecord.fields["Device Name"] || meterData.deviceName,
|
||||
deviceType: createdRecord.fields["Device Type"] || meterData.deviceType,
|
||||
usageAnalysisType: createdRecord.fields["Usage Analysis Type"] || meterData.usageAnalysisType,
|
||||
installedTime: createdRecord.fields["Installed Time"] || meterData.installedTime,
|
||||
usageAnalysisType:
|
||||
createdRecord.fields["Usage Analysis Type"] ||
|
||||
meterData.usageAnalysisType,
|
||||
installedTime:
|
||||
createdRecord.fields["Installed Time"] || meterData.installedTime,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Error creating meter:", error);
|
||||
@@ -214,9 +226,13 @@ export const updateMeter = async (
|
||||
if (!response.ok) {
|
||||
if (response.status === 400) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(`Bad Request: ${errorData.msg || "Invalid data provided"}`);
|
||||
throw new Error(
|
||||
`Bad Request: ${errorData.msg || "Invalid data provided"}`
|
||||
);
|
||||
}
|
||||
throw new Error(`Failed to update meter: ${response.status} ${response.statusText}`);
|
||||
throw new Error(
|
||||
`Failed to update meter: ${response.status} ${response.statusText}`
|
||||
);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
@@ -231,22 +247,32 @@ export const updateMeter = async (
|
||||
createdAt: updatedRecord.fields.CreatedAt || meterData.createdAt,
|
||||
updatedAt: updatedRecord.fields.UpdatedAt || meterData.updatedAt,
|
||||
areaName: updatedRecord.fields["Area Name"] || meterData.areaName,
|
||||
accountNumber: updatedRecord.fields["Account Number"] || meterData.accountNumber,
|
||||
accountNumber:
|
||||
updatedRecord.fields["Account Number"] || meterData.accountNumber,
|
||||
userName: updatedRecord.fields["User Name"] || meterData.userName,
|
||||
userAddress: updatedRecord.fields["User Address"] || meterData.userAddress,
|
||||
meterSerialNumber: updatedRecord.fields["Meter S/N"] || meterData.meterSerialNumber,
|
||||
userAddress:
|
||||
updatedRecord.fields["User Address"] || meterData.userAddress,
|
||||
meterSerialNumber:
|
||||
updatedRecord.fields["Meter S/N"] || meterData.meterSerialNumber,
|
||||
meterName: updatedRecord.fields["Meter Name"] || meterData.meterName,
|
||||
meterStatus: updatedRecord.fields["Meter Status"] || meterData.meterStatus,
|
||||
protocolType: updatedRecord.fields["Protocol Type"] || meterData.protocolType,
|
||||
meterStatus:
|
||||
updatedRecord.fields["Meter Status"] || meterData.meterStatus,
|
||||
protocolType:
|
||||
updatedRecord.fields["Protocol Type"] || meterData.protocolType,
|
||||
priceNo: updatedRecord.fields["Price No."] || meterData.priceNo,
|
||||
priceName: updatedRecord.fields["Price Name"] || meterData.priceName,
|
||||
dmaPartition: updatedRecord.fields["DMA Partition"] || meterData.dmaPartition,
|
||||
supplyTypes: updatedRecord.fields["Supply Types"] || meterData.supplyTypes,
|
||||
dmaPartition:
|
||||
updatedRecord.fields["DMA Partition"] || meterData.dmaPartition,
|
||||
supplyTypes:
|
||||
updatedRecord.fields["Supply Types"] || meterData.supplyTypes,
|
||||
deviceId: updatedRecord.fields["Device ID"] || meterData.deviceId,
|
||||
deviceName: updatedRecord.fields["Device Name"] || meterData.deviceName,
|
||||
deviceType: updatedRecord.fields["Device Type"] || meterData.deviceType,
|
||||
usageAnalysisType: updatedRecord.fields["Usage Analysis Type"] || meterData.usageAnalysisType,
|
||||
installedTime: updatedRecord.fields["Installed Time"] || meterData.installedTime,
|
||||
usageAnalysisType:
|
||||
updatedRecord.fields["Usage Analysis Type"] ||
|
||||
meterData.usageAnalysisType,
|
||||
installedTime:
|
||||
updatedRecord.fields["Installed Time"] || meterData.installedTime,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Error updating meter:", error);
|
||||
@@ -267,9 +293,13 @@ export const deleteMeter = async (id: string): Promise<void> => {
|
||||
if (!response.ok) {
|
||||
if (response.status === 400) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(`Bad Request: ${errorData.msg || "Invalid data provided"}`);
|
||||
throw new Error(
|
||||
`Bad Request: ${errorData.msg || "Invalid data provided"}`
|
||||
);
|
||||
}
|
||||
throw new Error(`Failed to delete meter: ${response.status} ${response.statusText}`);
|
||||
throw new Error(
|
||||
`Failed to delete meter: ${response.status} ${response.statusText}`
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error deleting meter:", error);
|
||||
|
||||
@@ -1,7 +1,50 @@
|
||||
import { Cpu, Settings, BarChart3, Bell } from "lucide-react";
|
||||
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid } from "recharts";
|
||||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
BarChart,
|
||||
Bar,
|
||||
XAxis,
|
||||
YAxis,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
CartesianGrid,
|
||||
} from "recharts";
|
||||
import { fetchMeters, Meter } from "../api/meters";
|
||||
import { Page } from "../App";
|
||||
|
||||
export default function Home({
|
||||
setPage,
|
||||
navigateToMetersWithProject
|
||||
}: {
|
||||
setPage: (page: Page) => void;
|
||||
navigateToMetersWithProject: (projectName: string) => void;
|
||||
}) {
|
||||
const [allProjects, setAllProjects] = useState<string[]>([]);
|
||||
const [meters, setMeters] = useState<Meter[]>([]);
|
||||
|
||||
|
||||
const loadMeters = async () => {
|
||||
const data = await fetchMeters();
|
||||
setMeters(data);
|
||||
const projectsArray = [...new Set(data.map((record: Meter) => record["areaName"]))];
|
||||
setAllProjects(projectsArray);
|
||||
}
|
||||
useEffect(() => {
|
||||
loadMeters();
|
||||
}, []);
|
||||
|
||||
const chartData = allProjects.map((projectName) => ({
|
||||
name: projectName,
|
||||
meterCount: meters.filter((meter) => meter.areaName === projectName).length,
|
||||
}));
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const handleBarClick = (data: any) => {
|
||||
if (data.activeLabel) {
|
||||
navigateToMetersWithProject(data.activeLabel);
|
||||
}
|
||||
};
|
||||
|
||||
export default function Home() {
|
||||
// Datos de ejemplo para empresas
|
||||
const companies = [
|
||||
{ name: "Empresa A", tomas: 12, alerts: 2, consumption: 320 },
|
||||
@@ -18,19 +61,45 @@ export default function Home() {
|
||||
|
||||
// Historial tipo Google
|
||||
const history = [
|
||||
{ user: "GRH", action: "Creó un nuevo medidor", target: "SN001", time: "Hace 5 minutos" },
|
||||
{ user: "CESPT", action: "Actualizó concentrador", target: "Planta 1", time: "Hace 20 minutos" },
|
||||
{ user: "GRH", action: "Eliminó un usuario", target: "Juan Pérez", time: "Hace 1 hora" },
|
||||
{ user: "CESPT", action: "Creó un payload", target: "Payload 12", time: "Hace 2 horas" },
|
||||
{ user: "GRH", action: "Actualizó medidor", target: "SN002", time: "Hace 3 horas" },
|
||||
{
|
||||
user: "GRH",
|
||||
action: "Creó un nuevo medidor",
|
||||
target: "SN001",
|
||||
time: "Hace 5 minutos",
|
||||
},
|
||||
{
|
||||
user: "CESPT",
|
||||
action: "Actualizó concentrador",
|
||||
target: "Planta 1",
|
||||
time: "Hace 20 minutos",
|
||||
},
|
||||
{
|
||||
user: "GRH",
|
||||
action: "Eliminó un usuario",
|
||||
target: "Juan Pérez",
|
||||
time: "Hace 1 hora",
|
||||
},
|
||||
{
|
||||
user: "CESPT",
|
||||
action: "Creó un payload",
|
||||
target: "Payload 12",
|
||||
time: "Hace 2 horas",
|
||||
},
|
||||
{
|
||||
user: "GRH",
|
||||
action: "Actualizó medidor",
|
||||
target: "SN002",
|
||||
time: "Hace 3 horas",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex flex-col p-6 gap-8 w-full">
|
||||
|
||||
{/* Título */}
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-800">Sistema de Tomas de Agua</h1>
|
||||
<h1 className="text-3xl font-bold text-gray-800">
|
||||
Sistema de Tomas de Agua
|
||||
</h1>
|
||||
<p className="text-gray-600 mt-2">
|
||||
Monitorea, administra y controla tus operaciones en un solo lugar.
|
||||
</p>
|
||||
@@ -38,7 +107,10 @@ export default function Home() {
|
||||
|
||||
{/* Cards de Secciones */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div className="bg-white rounded-xl shadow p-6 flex flex-col items-center justify-center gap-2 hover:bg-blue-50 transition">
|
||||
<div
|
||||
className="bg-white rounded-xl shadow p-6 flex flex-col items-center justify-center gap-2 hover:bg-blue-50 transition"
|
||||
onClick={() => setPage("meters")}
|
||||
>
|
||||
<Cpu size={40} className="text-blue-600" />
|
||||
<span className="font-semibold text-gray-700">Tomas</span>
|
||||
</div>
|
||||
@@ -64,8 +136,14 @@ export default function Home() {
|
||||
className="bg-white rounded-xl shadow p-4 flex flex-col gap-1"
|
||||
>
|
||||
<span className="text-gray-500 text-sm">{c.name}</span>
|
||||
<span className="text-2xl font-bold text-gray-800">{c.tomas} Tomas</span>
|
||||
<span className={`text-sm font-medium ${c.alerts > 0 ? "text-red-500" : "text-green-500"}`}>
|
||||
<span className="text-2xl font-bold text-gray-800">
|
||||
{c.tomas} Tomas
|
||||
</span>
|
||||
<span
|
||||
className={`text-sm font-medium ${
|
||||
c.alerts > 0 ? "text-red-500" : "text-green-500"
|
||||
}`}
|
||||
>
|
||||
{c.alerts} Alertas
|
||||
</span>
|
||||
</div>
|
||||
@@ -74,15 +152,25 @@ export default function Home() {
|
||||
|
||||
{/* Gráfica de consumo */}
|
||||
<div className="bg-white rounded-xl shadow p-6">
|
||||
<h2 className="text-lg font-semibold mb-4">Consumo de Agua por Empresa</h2>
|
||||
<h2 className="text-lg font-semibold mb-4">
|
||||
Número de Medidores por Proyecto
|
||||
</h2>
|
||||
<div className="h-60">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={companies} margin={{ top: 5, right: 20, left: 0, bottom: 5 }}>
|
||||
<BarChart
|
||||
data={chartData}
|
||||
margin={{ top: 5, right: 20, left: 0, bottom: 5 }}
|
||||
onClick={handleBarClick}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="name" />
|
||||
<YAxis />
|
||||
<Tooltip />
|
||||
<Bar dataKey="consumption" fill="#4c5f9e" />
|
||||
<Bar
|
||||
dataKey="meterCount"
|
||||
fill="#4c5f9e"
|
||||
cursor="pointer"
|
||||
/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
@@ -97,7 +185,8 @@ export default function Home() {
|
||||
<span className="text-gray-400 mt-1">•</span>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-gray-700">
|
||||
<span className="font-semibold">{h.user}</span> {h.action} <span className="font-medium">{h.target}</span>
|
||||
<span className="font-semibold">{h.user}</span> {h.action}{" "}
|
||||
<span className="font-medium">{h.target}</span>
|
||||
</p>
|
||||
<p className="text-xs text-gray-400">{h.time}</p>
|
||||
</div>
|
||||
@@ -112,13 +201,14 @@ export default function Home() {
|
||||
<ul className="divide-y divide-gray-200">
|
||||
{alerts.map((a, i) => (
|
||||
<li key={i} className="py-2 flex justify-between">
|
||||
<span>{a.company} - {a.type}</span>
|
||||
<span>
|
||||
{a.company} - {a.type}
|
||||
</span>
|
||||
<span className="text-red-500 font-medium">{a.time}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useState, useEffect, useMemo } from "react";
|
||||
import { Plus, Trash2, Pencil, RefreshCcw } from "lucide-react";
|
||||
import MaterialTable from "@material-table/core";
|
||||
import { fetchProjectNames } from "../../api/projects";
|
||||
import {
|
||||
fetchConcentrators,
|
||||
createConcentrator,
|
||||
@@ -18,6 +17,15 @@ interface User {
|
||||
project?: string; // asignado si no es superadmin
|
||||
}
|
||||
|
||||
interface GatewayData {
|
||||
"Gateway ID": number;
|
||||
"Gateway EUI": string;
|
||||
"Gateway Name": string;
|
||||
"Gateway Description": string;
|
||||
"Antenna Placement": "Indoor" | "Outdoor";
|
||||
concentratorId?: string;
|
||||
}
|
||||
|
||||
/* ================= COMPONENT ================= */
|
||||
export default function ConcentratorsPage() {
|
||||
// Simulación de usuario actual
|
||||
@@ -31,22 +39,6 @@ export default function ConcentratorsPage() {
|
||||
const [loadingProjects, setLoadingProjects] = useState(true);
|
||||
const [loadingConcentrators, setLoadingConcentrators] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const loadProjects = async () => {
|
||||
try {
|
||||
const projects = await fetchProjectNames();
|
||||
setAllProjects(projects);
|
||||
} catch (error) {
|
||||
console.error('Error loading projects:', error);
|
||||
setAllProjects([]);
|
||||
} finally {
|
||||
setLoadingProjects(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadProjects();
|
||||
}, []);
|
||||
|
||||
// Proyectos visibles según el usuario
|
||||
const visibleProjects = useMemo(() =>
|
||||
currentUser.role === "SUPER_ADMIN"
|
||||
@@ -59,23 +51,33 @@ export default function ConcentratorsPage() {
|
||||
|
||||
const [selectedProject, setSelectedProject] = useState("");
|
||||
const [concentrators, setConcentrators] = useState<Concentrator[]>([]);
|
||||
const [filteredConcentrators, setFilteredConcentrators] = useState<Concentrator[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (visibleProjects.length > 0 && !selectedProject) {
|
||||
setSelectedProject(visibleProjects[0]);
|
||||
if (selectedProject) {
|
||||
const filtered = concentrators.filter(
|
||||
(c) => c["Area Name"] === selectedProject
|
||||
);
|
||||
setFilteredConcentrators(filtered);
|
||||
} else {
|
||||
setFilteredConcentrators(concentrators);
|
||||
}
|
||||
}, [visibleProjects, selectedProject]);
|
||||
}, [selectedProject, concentrators]);
|
||||
|
||||
const loadConcentrators = async () => {
|
||||
setLoadingConcentrators(true);
|
||||
try {
|
||||
const data = await fetchConcentrators();
|
||||
const projectsArray = [...new Set(data.map((record) => record["Area Name"]))];
|
||||
setAllProjects(projectsArray);
|
||||
setConcentrators(data);
|
||||
} catch (error) {
|
||||
console.error("Error loading concentrators:", error);
|
||||
setAllProjects([]);
|
||||
setConcentrators([]);
|
||||
} finally {
|
||||
setLoadingConcentrators(false);
|
||||
setLoadingProjects(false);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -101,11 +103,60 @@ export default function ConcentratorsPage() {
|
||||
"Instruction Manual": "",
|
||||
});
|
||||
|
||||
const getEmptyGatewayData = (): GatewayData => ({
|
||||
"Gateway ID": 0,
|
||||
"Gateway EUI": "",
|
||||
"Gateway Name": "",
|
||||
"Gateway Description": "",
|
||||
"Antenna Placement": "Indoor",
|
||||
});
|
||||
|
||||
const [form, setForm] = useState<Omit<Concentrator, "id">>(getEmptyConcentrator());
|
||||
const [gatewayForm, setGatewayForm] = useState<GatewayData>(getEmptyGatewayData());
|
||||
const [errors, setErrors] = useState<{ [key: string]: boolean }>({});
|
||||
|
||||
/* ================= CRUD ================= */
|
||||
const createOrUpdateGateway = async (gatewayData: GatewayData): Promise<void> => {
|
||||
//await fetch('/api/gateways', { method: 'POST', body: JSON.stringify(gatewayData) })
|
||||
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
console.log('Gateway data that would be sent to API:', gatewayData);
|
||||
resolve();
|
||||
}, 500);
|
||||
});
|
||||
};
|
||||
|
||||
const validateForm = (): boolean => {
|
||||
const newErrors: { [key: string]: boolean } = {};
|
||||
|
||||
if (!form["Device Name"].trim()) newErrors["Device Name"] = true;
|
||||
if (!form["Device S/N"].trim()) newErrors["Device S/N"] = true;
|
||||
if (!form["Operator"].trim()) newErrors["Operator"] = true;
|
||||
if (!form["Instruction Manual"].trim()) newErrors["Instruction Manual"] = true;
|
||||
if (!form["Installed Time"]) newErrors["Installed Time"] = true;
|
||||
if (!form["Device Time"]) newErrors["Device Time"] = true;
|
||||
if (!form["Communication Time"]) newErrors["Communication Time"] = true;
|
||||
|
||||
if (!gatewayForm["Gateway ID"] || gatewayForm["Gateway ID"] === 0) {
|
||||
newErrors["Gateway ID"] = true;
|
||||
}
|
||||
if (!gatewayForm["Gateway EUI"].trim()) newErrors["Gateway EUI"] = true;
|
||||
if (!gatewayForm["Gateway Name"].trim()) newErrors["Gateway Name"] = true;
|
||||
if (!gatewayForm["Gateway Description"].trim()) newErrors["Gateway Description"] = true;
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
let savedConcentrator: Concentrator;
|
||||
|
||||
if (editingSerial) {
|
||||
const concentratorToUpdate = concentrators.find(c => c["Device S/N"] === editingSerial);
|
||||
if (!concentratorToUpdate) {
|
||||
@@ -118,13 +169,30 @@ export default function ConcentratorsPage() {
|
||||
c.id === concentratorToUpdate.id ? updatedConcentrator : c
|
||||
)
|
||||
);
|
||||
savedConcentrator = updatedConcentrator;
|
||||
} else {
|
||||
const newConcentrator = await createConcentrator(form);
|
||||
setConcentrators((prev) => [...prev, newConcentrator]);
|
||||
savedConcentrator = newConcentrator;
|
||||
}
|
||||
|
||||
try {
|
||||
const gatewayDataWithRef = {
|
||||
...gatewayForm,
|
||||
concentratorId: savedConcentrator.id,
|
||||
};
|
||||
await createOrUpdateGateway(gatewayDataWithRef);
|
||||
console.log('Gateway data saved successfully');
|
||||
} catch (gatewayError) {
|
||||
console.error('Error saving gateway data:', gatewayError);
|
||||
alert('Concentrator saved, but there was an error saving gateway data.');
|
||||
}
|
||||
|
||||
setShowModal(false);
|
||||
setEditingSerial(null);
|
||||
setForm({ ...getEmptyConcentrator(), "Area Name": selectedProject });
|
||||
setGatewayForm(getEmptyGatewayData());
|
||||
setErrors({});
|
||||
setActiveConcentrator(null);
|
||||
} catch (error) {
|
||||
console.error('Error saving concentrator:', error);
|
||||
@@ -159,12 +227,10 @@ export default function ConcentratorsPage() {
|
||||
}
|
||||
};
|
||||
|
||||
/* ================= FILTER ================= */
|
||||
const filtered = concentrators.filter(
|
||||
const searchFiltered = filteredConcentrators.filter(
|
||||
(c) =>
|
||||
(c["Device Name"].toLowerCase().includes(search.toLowerCase()) ||
|
||||
c["Device S/N"].toLowerCase().includes(search.toLowerCase())) &&
|
||||
c["Area Name"] === selectedProject
|
||||
c["Device Name"].toLowerCase().includes(search.toLowerCase()) ||
|
||||
c["Device S/N"].toLowerCase().includes(search.toLowerCase())
|
||||
);
|
||||
|
||||
/* ================= UI ================= */
|
||||
@@ -187,11 +253,14 @@ export default function ConcentratorsPage() {
|
||||
) : visibleProjects.length === 0 ? (
|
||||
<option>No projects available</option>
|
||||
) : (
|
||||
visibleProjects.map((proj) => (
|
||||
<option key={proj} value={proj}>
|
||||
{proj}
|
||||
</option>
|
||||
))
|
||||
<>
|
||||
<option value="">Select a project</option>
|
||||
{visibleProjects.map((proj) => (
|
||||
<option key={proj} value={proj}>
|
||||
{proj}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</select>
|
||||
|
||||
@@ -217,7 +286,10 @@ export default function ConcentratorsPage() {
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => {
|
||||
if (!selectedProject) return;
|
||||
setForm({ ...getEmptyConcentrator(), "Area Name": selectedProject });
|
||||
setGatewayForm(getEmptyGatewayData());
|
||||
setErrors({});
|
||||
setEditingSerial(null);
|
||||
setShowModal(true);
|
||||
}}
|
||||
@@ -242,6 +314,8 @@ export default function ConcentratorsPage() {
|
||||
"Communication Time": activeConcentrator["Communication Time"],
|
||||
"Instruction Manual": activeConcentrator["Instruction Manual"],
|
||||
});
|
||||
setGatewayForm(getEmptyGatewayData());
|
||||
setErrors({});
|
||||
setShowModal(true);
|
||||
}}
|
||||
disabled={!activeConcentrator}
|
||||
@@ -280,8 +354,8 @@ export default function ConcentratorsPage() {
|
||||
title="Concentrators"
|
||||
isLoading={loadingConcentrators}
|
||||
columns={[
|
||||
{ title: "Device Name", field: "Device Name" },
|
||||
{ title: "Device S/N", field: "Device S/N" },
|
||||
{ title: "Device Name", field: "Device Name", render: (rowData) => rowData["Device Name"] || "-" },
|
||||
{ title: "Device S/N", field: "Device S/N", render: (rowData) => rowData["Device S/N"] || "-" },
|
||||
{
|
||||
title: "Device Status",
|
||||
field: "Device Status",
|
||||
@@ -293,15 +367,15 @@ export default function ConcentratorsPage() {
|
||||
: "text-red-600 border-red-600"
|
||||
}`}
|
||||
>
|
||||
{rowData["Device Status"]}
|
||||
{rowData["Device Status"] || "-"}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{ title: "Operator", field: "Operator" },
|
||||
{ title: "Area Name", field: "Area Name" },
|
||||
{ title: "Installed Time", field: "Installed Time", type: "date" },
|
||||
{ title: "Operator", field: "Operator", render: (rowData) => rowData["Operator"] || "-" },
|
||||
{ title: "Area Name", field: "Area Name", render: (rowData) => rowData["Area Name"] || "-" },
|
||||
{ title: "Installed Time", field: "Installed Time", type: "date", render: (rowData) => rowData["Installed Time"] || "-" },
|
||||
]}
|
||||
data={filtered}
|
||||
data={searchFiltered}
|
||||
onRowClick={(_, rowData) => setActiveConcentrator(rowData as Concentrator)}
|
||||
options={{
|
||||
actionsColumnIndex: -1,
|
||||
@@ -327,102 +401,303 @@ export default function ConcentratorsPage() {
|
||||
|
||||
{/* MODAL */}
|
||||
{showModal && (
|
||||
<div className="fixed inset-0 bg-black/40 flex items-center justify-center">
|
||||
<div className="bg-white rounded-xl p-6 w-96 space-y-3">
|
||||
<div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-xl p-6 w-[600px] max-h-[90vh] overflow-y-auto space-y-4">
|
||||
<h2 className="text-lg font-semibold">
|
||||
{editingSerial ? "Edit Concentrator" : "Add Concentrator"}
|
||||
</h2>
|
||||
|
||||
<div className="space-y-3">
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="Device Name"
|
||||
value={form["Device Name"]}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, "Device Name": e.target.value })
|
||||
}
|
||||
/>
|
||||
<h3 className="text-sm font-semibold text-gray-700 border-b pb-2">
|
||||
Concentrator Information
|
||||
</h3>
|
||||
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="Device S/N"
|
||||
value={form["Device S/N"]}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, "Device S/N": e.target.value })
|
||||
}
|
||||
/>
|
||||
<div>
|
||||
<input
|
||||
className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
||||
errors["Device Name"] ? "border-red-500" : ""
|
||||
}`}
|
||||
placeholder="Device Name *"
|
||||
value={form["Device Name"]}
|
||||
onChange={(e) => {
|
||||
setForm({ ...form, "Device Name": e.target.value });
|
||||
if (errors["Device Name"]) {
|
||||
setErrors({ ...errors, "Device Name": false });
|
||||
}
|
||||
}}
|
||||
required
|
||||
/>
|
||||
{errors["Device Name"] && (
|
||||
<p className="text-red-500 text-xs mt-1">This field is required</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="Operator"
|
||||
value={form["Operator"]}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, "Operator": e.target.value })
|
||||
}
|
||||
/>
|
||||
<div>
|
||||
<input
|
||||
className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
||||
errors["Device S/N"] ? "border-red-500" : ""
|
||||
}`}
|
||||
placeholder="Device S/N *"
|
||||
value={form["Device S/N"]}
|
||||
onChange={(e) => {
|
||||
setForm({ ...form, "Device S/N": e.target.value });
|
||||
if (errors["Device S/N"]) {
|
||||
setErrors({ ...errors, "Device S/N": false });
|
||||
}
|
||||
}}
|
||||
required
|
||||
/>
|
||||
{errors["Device S/N"] && (
|
||||
<p className="text-red-500 text-xs mt-1">This field is required</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="Instruction Manual"
|
||||
value={form["Instruction Manual"]}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, "Instruction Manual": e.target.value })
|
||||
}
|
||||
/>
|
||||
<div>
|
||||
<input
|
||||
className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
||||
errors["Operator"] ? "border-red-500" : ""
|
||||
}`}
|
||||
placeholder="Operator *"
|
||||
value={form["Operator"]}
|
||||
onChange={(e) => {
|
||||
setForm({ ...form, "Operator": e.target.value });
|
||||
if (errors["Operator"]) {
|
||||
setErrors({ ...errors, "Operator": false });
|
||||
}
|
||||
}}
|
||||
required
|
||||
/>
|
||||
{errors["Operator"] && (
|
||||
<p className="text-red-500 text-xs mt-1">This field is required</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() =>
|
||||
setForm({
|
||||
...form,
|
||||
"Device Status":
|
||||
form["Device Status"] === "ACTIVE" ? "INACTIVE" : "ACTIVE",
|
||||
})
|
||||
}
|
||||
className="w-full border rounded px-3 py-2 hover:bg-gray-50 text-left"
|
||||
>
|
||||
Device Status: {form["Device Status"]}
|
||||
</button>
|
||||
<div>
|
||||
<input
|
||||
className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
||||
errors["Instruction Manual"] ? "border-red-500" : ""
|
||||
}`}
|
||||
placeholder="Instruction Manual *"
|
||||
value={form["Instruction Manual"]}
|
||||
onChange={(e) => {
|
||||
setForm({ ...form, "Instruction Manual": e.target.value });
|
||||
if (errors["Instruction Manual"]) {
|
||||
setErrors({ ...errors, "Instruction Manual": false });
|
||||
}
|
||||
}}
|
||||
required
|
||||
/>
|
||||
{errors["Instruction Manual"] && (
|
||||
<p className="text-red-500 text-xs mt-1">This field is required</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="date"
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
value={form["Installed Time"]}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, "Installed Time": e.target.value })
|
||||
}
|
||||
/>
|
||||
<button
|
||||
onClick={() =>
|
||||
setForm({
|
||||
...form,
|
||||
"Device Status":
|
||||
form["Device Status"] === "ACTIVE" ? "INACTIVE" : "ACTIVE",
|
||||
})
|
||||
}
|
||||
className="w-full border rounded px-3 py-2 hover:bg-gray-50 text-left"
|
||||
>
|
||||
Device Status: {form["Device Status"]} *
|
||||
</button>
|
||||
|
||||
<input
|
||||
type="datetime-local"
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
value={form["Device Time"].slice(0, 16)}
|
||||
onChange={(e) =>
|
||||
setForm({
|
||||
...form,
|
||||
"Device Time": new Date(e.target.value).toISOString(),
|
||||
})
|
||||
}
|
||||
/>
|
||||
<div>
|
||||
<input
|
||||
type="date"
|
||||
className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
||||
errors["Installed Time"] ? "border-red-500" : ""
|
||||
}`}
|
||||
placeholder="Installed Time *"
|
||||
value={form["Installed Time"]}
|
||||
onChange={(e) => {
|
||||
setForm({ ...form, "Installed Time": e.target.value });
|
||||
if (errors["Installed Time"]) {
|
||||
setErrors({ ...errors, "Installed Time": false });
|
||||
}
|
||||
}}
|
||||
required
|
||||
/>
|
||||
{errors["Installed Time"] && (
|
||||
<p className="text-red-500 text-xs mt-1">This field is required</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="datetime-local"
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
value={form["Communication Time"].slice(0, 16)}
|
||||
onChange={(e) =>
|
||||
setForm({
|
||||
...form,
|
||||
"Communication Time": new Date(e.target.value).toISOString(),
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="datetime-local"
|
||||
className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
||||
errors["Device Time"] ? "border-red-500" : ""
|
||||
}`}
|
||||
placeholder="Device Time *"
|
||||
value={form["Device Time"].slice(0, 16)}
|
||||
onChange={(e) => {
|
||||
setForm({
|
||||
...form,
|
||||
"Device Time": new Date(e.target.value).toISOString(),
|
||||
});
|
||||
if (errors["Device Time"]) {
|
||||
setErrors({ ...errors, "Device Time": false });
|
||||
}
|
||||
}}
|
||||
required
|
||||
/>
|
||||
{errors["Device Time"] && (
|
||||
<p className="text-red-500 text-xs mt-1">This field is required</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input
|
||||
type="datetime-local"
|
||||
className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
||||
errors["Communication Time"] ? "border-red-500" : ""
|
||||
}`}
|
||||
placeholder="Communication Time *"
|
||||
value={form["Communication Time"].slice(0, 16)}
|
||||
onChange={(e) => {
|
||||
setForm({
|
||||
...form,
|
||||
"Communication Time": new Date(e.target.value).toISOString(),
|
||||
});
|
||||
if (errors["Communication Time"]) {
|
||||
setErrors({ ...errors, "Communication Time": false });
|
||||
}
|
||||
}}
|
||||
required
|
||||
/>
|
||||
{errors["Communication Time"] && (
|
||||
<p className="text-red-500 text-xs mt-1">This field is required</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 pt-3">
|
||||
<button onClick={() => setShowModal(false)}>Cancel</button>
|
||||
<div className="space-y-3 pt-4">
|
||||
<h3 className="text-sm font-semibold text-gray-700 border-b pb-2">
|
||||
Gateway Information
|
||||
</h3>
|
||||
|
||||
<div>
|
||||
<input
|
||||
type="number"
|
||||
className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
||||
errors["Gateway ID"] ? "border-red-500" : ""
|
||||
}`}
|
||||
placeholder="Gateway ID *"
|
||||
value={gatewayForm["Gateway ID"] || ""}
|
||||
onChange={(e) => {
|
||||
setGatewayForm({
|
||||
...gatewayForm,
|
||||
"Gateway ID": parseInt(e.target.value) || 0,
|
||||
});
|
||||
if (errors["Gateway ID"]) {
|
||||
setErrors({ ...errors, "Gateway ID": false });
|
||||
}
|
||||
}}
|
||||
required
|
||||
min="1"
|
||||
/>
|
||||
{errors["Gateway ID"] && (
|
||||
<p className="text-red-500 text-xs mt-1">This field is required</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input
|
||||
className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
||||
errors["Gateway EUI"] ? "border-red-500" : ""
|
||||
}`}
|
||||
placeholder="Gateway EUI *"
|
||||
value={gatewayForm["Gateway EUI"]}
|
||||
onChange={(e) => {
|
||||
setGatewayForm({ ...gatewayForm, "Gateway EUI": e.target.value });
|
||||
if (errors["Gateway EUI"]) {
|
||||
setErrors({ ...errors, "Gateway EUI": false });
|
||||
}
|
||||
}}
|
||||
required
|
||||
/>
|
||||
{errors["Gateway EUI"] && (
|
||||
<p className="text-red-500 text-xs mt-1">This field is required</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input
|
||||
className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
||||
errors["Gateway Name"] ? "border-red-500" : ""
|
||||
}`}
|
||||
placeholder="Gateway Name *"
|
||||
value={gatewayForm["Gateway Name"]}
|
||||
onChange={(e) => {
|
||||
setGatewayForm({ ...gatewayForm, "Gateway Name": e.target.value });
|
||||
if (errors["Gateway Name"]) {
|
||||
setErrors({ ...errors, "Gateway Name": false });
|
||||
}
|
||||
}}
|
||||
required
|
||||
/>
|
||||
{errors["Gateway Name"] && (
|
||||
<p className="text-red-500 text-xs mt-1">This field is required</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input
|
||||
className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
||||
errors["Gateway Description"] ? "border-red-500" : ""
|
||||
}`}
|
||||
placeholder="Gateway Description *"
|
||||
value={gatewayForm["Gateway Description"]}
|
||||
onChange={(e) => {
|
||||
setGatewayForm({
|
||||
...gatewayForm,
|
||||
"Gateway Description": e.target.value,
|
||||
});
|
||||
if (errors["Gateway Description"]) {
|
||||
setErrors({ ...errors, "Gateway Description": false });
|
||||
}
|
||||
}}
|
||||
required
|
||||
/>
|
||||
{errors["Gateway Description"] && (
|
||||
<p className="text-red-500 text-xs mt-1">This field is required</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<select
|
||||
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
value={gatewayForm["Antenna Placement"]}
|
||||
onChange={(e) =>
|
||||
setGatewayForm({
|
||||
...gatewayForm,
|
||||
"Antenna Placement": e.target.value as "Indoor" | "Outdoor",
|
||||
})
|
||||
}
|
||||
required
|
||||
>
|
||||
<option value="Indoor">Indoor</option>
|
||||
<option value="Outdoor">Outdoor</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 pt-3 border-t">
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowModal(false);
|
||||
setGatewayForm(getEmptyGatewayData());
|
||||
setErrors({});
|
||||
}}
|
||||
className="px-4 py-2 rounded hover:bg-gray-100"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className="bg-[#4c5f9e] text-white px-4 py-2 rounded"
|
||||
className="bg-[#4c5f9e] text-white px-4 py-2 rounded hover:bg-[#3d4d7e]"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useState, useEffect, useMemo } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { Plus, Trash2, Pencil, RefreshCcw } from "lucide-react";
|
||||
import MaterialTable from "@material-table/core";
|
||||
import { fetchProjectNames } from "../../api/projects";
|
||||
import {
|
||||
fetchMeters,
|
||||
createMeter,
|
||||
@@ -10,61 +9,24 @@ import {
|
||||
type Meter,
|
||||
} from "../../api/meters";
|
||||
|
||||
/* ================= TYPES ================= */
|
||||
|
||||
interface User {
|
||||
name: string;
|
||||
role: "SUPER_ADMIN" | "USER";
|
||||
project?: string; // asignado si no es superadmin
|
||||
interface DeviceData {
|
||||
"Device ID": number;
|
||||
"Device EUI": string;
|
||||
"Join EUI": string;
|
||||
"AppKey": string;
|
||||
meterId?: string;
|
||||
}
|
||||
|
||||
/* ================= COMPONENT ================= */
|
||||
export default function MeterManagement() {
|
||||
// Simulación de usuario actual
|
||||
const currentUser: User = {
|
||||
name: "Admin GRH",
|
||||
role: "SUPER_ADMIN", // cambiar a USER para probar otro caso
|
||||
project: "CESPT",
|
||||
};
|
||||
|
||||
export default function MeterManagement({ selectedProject: initialProject }: { selectedProject?: string } = {}) {
|
||||
const [allProjects, setAllProjects] = useState<string[]>([]);
|
||||
const [loadingProjects, setLoadingProjects] = useState(true);
|
||||
|
||||
// Proyectos visibles según el usuario
|
||||
const visibleProjects = useMemo(() =>
|
||||
currentUser.role === "SUPER_ADMIN"
|
||||
? allProjects
|
||||
: currentUser.project
|
||||
? [currentUser.project]
|
||||
: [],
|
||||
[allProjects, currentUser.role, currentUser.project]
|
||||
);
|
||||
|
||||
const [selectedProject, setSelectedProject] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
const loadProjects = async () => {
|
||||
try {
|
||||
const projects = await fetchProjectNames();
|
||||
setAllProjects(projects);
|
||||
} catch (error) {
|
||||
console.error('Error loading projects:', error);
|
||||
setAllProjects([]);
|
||||
} finally {
|
||||
setLoadingProjects(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadProjects();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (visibleProjects.length > 0 && !selectedProject) {
|
||||
setSelectedProject(visibleProjects[0]);
|
||||
}
|
||||
}, [visibleProjects, selectedProject]);
|
||||
const [selectedProject, setSelectedProject] = useState(initialProject || "");
|
||||
|
||||
const [meters, setMeters] = useState<Meter[]>([]);
|
||||
const [filteredMeters, setFilteredMeters] = useState<Meter[]>([]);
|
||||
const [loadingMeters, setLoadingMeters] = useState(true);
|
||||
const [activeMeter, setActiveMeter] = useState<Meter | null>(null);
|
||||
const [search, setSearch] = useState("");
|
||||
@@ -94,18 +56,40 @@ export default function MeterManagement() {
|
||||
installedTime: new Date().toISOString(),
|
||||
};
|
||||
|
||||
const emptyDeviceData: DeviceData = {
|
||||
"Device ID": 0,
|
||||
"Device EUI": "",
|
||||
"Join EUI": "",
|
||||
"AppKey": "",
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedProject) {
|
||||
const filtered = meters.filter((meter) => meter.areaName === selectedProject);
|
||||
setFilteredMeters(filtered);
|
||||
} else {
|
||||
setFilteredMeters(meters);
|
||||
}
|
||||
}, [selectedProject, meters]);
|
||||
|
||||
const [form, setForm] = useState<Omit<Meter, "id">>(emptyMeter);
|
||||
const [deviceForm, setDeviceForm] = useState<DeviceData>(emptyDeviceData);
|
||||
const [errors, setErrors] = useState<{ [key: string]: boolean }>({});
|
||||
|
||||
const loadMeters = async () => {
|
||||
setLoadingMeters(true);
|
||||
try {
|
||||
const data = await fetchMeters();
|
||||
const projectsArray = [...new Set(data.map((record) => record["areaName"]))];
|
||||
setAllProjects(projectsArray);
|
||||
setMeters(data);
|
||||
} catch (error) {
|
||||
console.error("Error loading meters:", error);
|
||||
setAllProjects([]);
|
||||
setMeters([]);
|
||||
} finally {
|
||||
setLoadingMeters(false);
|
||||
setLoadingProjects(false);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -113,8 +97,53 @@ export default function MeterManagement() {
|
||||
loadMeters();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (initialProject) {
|
||||
setSelectedProject(initialProject);
|
||||
}
|
||||
}, [initialProject]);
|
||||
|
||||
const createOrUpdateDevice = async (deviceData: DeviceData): Promise<void> => {
|
||||
//await fetch('/api/devices', { method: 'POST', body: JSON.stringify(deviceData) })
|
||||
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
console.log('Device data that would be sent to API:', deviceData);
|
||||
resolve();
|
||||
}, 500);
|
||||
});
|
||||
};
|
||||
|
||||
const validateForm = (): boolean => {
|
||||
const newErrors: { [key: string]: boolean } = {};
|
||||
|
||||
// Required fields
|
||||
if (!form.meterName.trim()) newErrors["meterName"] = true;
|
||||
if (!form.meterSerialNumber.trim()) newErrors["meterSerialNumber"] = true;
|
||||
if (!form.areaName.trim()) newErrors["areaName"] = true;
|
||||
if (!form.deviceName.trim()) newErrors["deviceName"] = true;
|
||||
if (!form.protocolType.trim()) newErrors["protocolType"] = true;
|
||||
|
||||
// Device Configuration - Required
|
||||
if (!deviceForm["Device ID"] || deviceForm["Device ID"] === 0) {
|
||||
newErrors["Device ID"] = true;
|
||||
}
|
||||
if (!deviceForm["Device EUI"].trim()) newErrors["Device EUI"] = true;
|
||||
if (!deviceForm["Join EUI"].trim()) newErrors["Join EUI"] = true;
|
||||
if (!deviceForm["AppKey"].trim()) newErrors["AppKey"] = true;
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
let savedMeter: Meter;
|
||||
|
||||
if (editingId) {
|
||||
const meterToUpdate = meters.find(m => m.id === editingId);
|
||||
if (!meterToUpdate) {
|
||||
@@ -127,13 +156,30 @@ export default function MeterManagement() {
|
||||
m.id === editingId ? updatedMeter : m
|
||||
)
|
||||
);
|
||||
savedMeter = updatedMeter;
|
||||
} else {
|
||||
const newMeter = await createMeter(form);
|
||||
setMeters((prev) => [...prev, newMeter]);
|
||||
savedMeter = newMeter;
|
||||
}
|
||||
|
||||
try {
|
||||
const deviceDataWithRef = {
|
||||
...deviceForm,
|
||||
meterId: savedMeter.id,
|
||||
};
|
||||
await createOrUpdateDevice(deviceDataWithRef);
|
||||
console.log('Device data saved successfully');
|
||||
} catch (deviceError) {
|
||||
console.error('Error saving device data:', deviceError);
|
||||
alert('Meter saved, but there was an error saving device data.');
|
||||
}
|
||||
|
||||
setShowModal(false);
|
||||
setEditingId(null);
|
||||
setForm(emptyMeter);
|
||||
setDeviceForm(emptyDeviceData);
|
||||
setErrors({});
|
||||
setActiveMeter(null);
|
||||
} catch (error) {
|
||||
console.error('Error saving meter:', error);
|
||||
@@ -173,15 +219,6 @@ export default function MeterManagement() {
|
||||
setActiveMeter(null);
|
||||
};
|
||||
|
||||
/* ================= FILTER ================= */
|
||||
const filtered = meters.filter(
|
||||
(m) =>
|
||||
(m.meterName.toLowerCase().includes(search.toLowerCase()) ||
|
||||
m.meterSerialNumber.toLowerCase().includes(search.toLowerCase()) ||
|
||||
m.deviceId.toLowerCase().includes(search.toLowerCase()) ||
|
||||
m.areaName.toLowerCase().includes(search.toLowerCase()))
|
||||
);
|
||||
|
||||
/* ================= UI ================= */
|
||||
return (
|
||||
<div className="flex gap-6 p-6 w-full bg-gray-100">
|
||||
@@ -195,22 +232,25 @@ export default function MeterManagement() {
|
||||
value={selectedProject}
|
||||
onChange={(e) => setSelectedProject(e.target.value)}
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
disabled={loadingProjects || visibleProjects.length === 0}
|
||||
disabled={loadingProjects || allProjects.length === 0}
|
||||
>
|
||||
{loadingProjects ? (
|
||||
<option>Loading projects...</option>
|
||||
) : visibleProjects.length === 0 ? (
|
||||
) : meters.length === 0 ? (
|
||||
<option>No projects available</option>
|
||||
) : (
|
||||
visibleProjects.map((proj) => (
|
||||
<option key={proj} value={proj}>
|
||||
{proj}
|
||||
</option>
|
||||
))
|
||||
<>
|
||||
<option value="">Select a project</option>
|
||||
{allProjects.map((proj) => (
|
||||
<option key={proj} value={proj}>
|
||||
{proj}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</select>
|
||||
|
||||
{visibleProjects.length === 0 && !loadingProjects && (
|
||||
{allProjects.length === 0 && !loadingProjects && (
|
||||
<p className="text-sm text-gray-500 mt-2">
|
||||
No projects available. Please contact your administrator.
|
||||
</p>
|
||||
@@ -236,10 +276,12 @@ export default function MeterManagement() {
|
||||
<button
|
||||
onClick={() => {
|
||||
setForm(emptyMeter);
|
||||
setDeviceForm(emptyDeviceData);
|
||||
setErrors({});
|
||||
setEditingId(null);
|
||||
setShowModal(true);
|
||||
}}
|
||||
disabled={!selectedProject || visibleProjects.length === 0}
|
||||
disabled={!selectedProject || allProjects.length === 0}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-white text-[#4c5f9e] rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Plus size={16} /> Add
|
||||
@@ -270,6 +312,8 @@ export default function MeterManagement() {
|
||||
usageAnalysisType: activeMeter.usageAnalysisType,
|
||||
installedTime: activeMeter.installedTime,
|
||||
});
|
||||
setDeviceForm(emptyDeviceData);
|
||||
setErrors({});
|
||||
setShowModal(true);
|
||||
}}
|
||||
disabled={!activeMeter}
|
||||
@@ -308,32 +352,17 @@ export default function MeterManagement() {
|
||||
title="Meters"
|
||||
isLoading={loadingMeters}
|
||||
columns={[
|
||||
{ title: "Meter Name", field: "meterName" },
|
||||
{ title: "Serial Number", field: "meterSerialNumber" },
|
||||
{ title: "Area", field: "areaName" },
|
||||
{ title: "Device ID", field: "deviceId" },
|
||||
{ title: "Device Name", field: "deviceName" },
|
||||
{
|
||||
title: "Status",
|
||||
field: "meterStatus",
|
||||
render: (rowData) => (
|
||||
<span
|
||||
className={`px-3 py-1 rounded-full text-xs font-semibold border ${
|
||||
rowData.meterStatus === "Installed"
|
||||
? "text-green-600 border-green-600"
|
||||
: "text-gray-600 border-gray-600"
|
||||
}`}
|
||||
>
|
||||
{rowData.meterStatus}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{ title: "Protocol", field: "protocolType" },
|
||||
{ title: "Device Type", field: "deviceType" },
|
||||
{ title: "Created At", field: "createdAt", type: "datetime" },
|
||||
{ title: "Updated At", field: "updatedAt", type: "datetime" },
|
||||
{ title: "Area Name", field: "areaName", render: (rowData) => rowData.areaName || "-" },
|
||||
{ title: "Account Number", field: "accountNumber", render: (rowData) => rowData.accountNumber || "-" },
|
||||
{ title: "User Name", field: "userName", render: (rowData) => rowData.userName || "-" },
|
||||
{ title: "User Address", field: "userAddress", render: (rowData) => rowData.userAddress || "-" },
|
||||
{ title: "Meter S/N", field: "meterSerialNumber", render: (rowData) => rowData.meterSerialNumber || "-" },
|
||||
{ title: "Meter Name", field: "meterName", render: (rowData) => rowData.meterName || "-" },
|
||||
{ title: "Protocol Type", field: "protocolType", render: (rowData) => rowData.protocolType || "-" },
|
||||
{ title: "Device ID", field: "deviceId", render: (rowData) => rowData.deviceId || "-" },
|
||||
{ title: "Device Name", field: "deviceName", render: (rowData) => rowData.deviceName || "-" },
|
||||
]}
|
||||
data={filtered}
|
||||
data={filteredMeters}
|
||||
onRowClick={(_, rowData) => setActiveMeter(rowData as Meter)}
|
||||
options={{
|
||||
actionsColumnIndex: -1,
|
||||
@@ -359,193 +388,277 @@ export default function MeterManagement() {
|
||||
|
||||
{/* MODAL */}
|
||||
{showModal && (
|
||||
<div className="fixed inset-0 bg-black/40 flex items-center justify-center">
|
||||
<div className="bg-white rounded-xl p-6 w-96 max-h-[80vh] overflow-y-auto space-y-3">
|
||||
<div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-xl p-6 w-[700px] max-h-[90vh] overflow-y-auto space-y-4">
|
||||
<h2 className="text-lg font-semibold">
|
||||
{editingId ? "Edit Meter" : "Add Meter"}
|
||||
</h2>
|
||||
|
||||
<div className="space-y-1">
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="Meter Name"
|
||||
value={form.meterName}
|
||||
onChange={(e) => setForm({ ...form, meterName: e.target.value })}
|
||||
/>
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-sm font-semibold text-gray-700 border-b pb-2">
|
||||
Meter Information
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<input
|
||||
className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
||||
errors["areaName"] ? "border-red-500" : ""
|
||||
}`}
|
||||
placeholder="Area Name *"
|
||||
value={form.areaName}
|
||||
onChange={(e) => {
|
||||
setForm({ ...form, areaName: e.target.value });
|
||||
if (errors["areaName"]) {
|
||||
setErrors({ ...errors, "areaName": false });
|
||||
}
|
||||
}}
|
||||
required
|
||||
/>
|
||||
{errors["areaName"] && (
|
||||
<p className="text-red-500 text-xs mt-1">This field is required</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
placeholder="Account Number (optional)"
|
||||
value={form.accountNumber ?? ""}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, accountNumber: e.target.value || null })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
placeholder="User Name (optional)"
|
||||
value={form.userName ?? ""}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, userName: e.target.value || null })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
placeholder="User Address (optional)"
|
||||
value={form.userAddress ?? ""}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, userAddress: e.target.value || null })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<input
|
||||
className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
||||
errors["meterSerialNumber"] ? "border-red-500" : ""
|
||||
}`}
|
||||
placeholder="Meter S/N *"
|
||||
value={form.meterSerialNumber}
|
||||
onChange={(e) => {
|
||||
setForm({ ...form, meterSerialNumber: e.target.value });
|
||||
if (errors["meterSerialNumber"]) {
|
||||
setErrors({ ...errors, "meterSerialNumber": false });
|
||||
}
|
||||
}}
|
||||
required
|
||||
/>
|
||||
{errors["meterSerialNumber"] && (
|
||||
<p className="text-red-500 text-xs mt-1">This field is required</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input
|
||||
className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
||||
errors["meterName"] ? "border-red-500" : ""
|
||||
}`}
|
||||
placeholder="Meter Name *"
|
||||
value={form.meterName}
|
||||
onChange={(e) => {
|
||||
setForm({ ...form, meterName: e.target.value });
|
||||
if (errors["meterName"]) {
|
||||
setErrors({ ...errors, "meterName": false });
|
||||
}
|
||||
}}
|
||||
required
|
||||
/>
|
||||
{errors["meterName"] && (
|
||||
<p className="text-red-500 text-xs mt-1">This field is required</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<input
|
||||
className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
||||
errors["protocolType"] ? "border-red-500" : ""
|
||||
}`}
|
||||
placeholder="Protocol Type *"
|
||||
value={form.protocolType}
|
||||
onChange={(e) => {
|
||||
setForm({ ...form, protocolType: e.target.value });
|
||||
if (errors["protocolType"]) {
|
||||
setErrors({ ...errors, "protocolType": false });
|
||||
}
|
||||
}}
|
||||
required
|
||||
/>
|
||||
{errors["protocolType"] && (
|
||||
<p className="text-red-500 text-xs mt-1">This field is required</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
placeholder="Device ID (optional)"
|
||||
value={form.deviceId ?? ""}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, deviceId: e.target.value || "" })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input
|
||||
className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
||||
errors["deviceName"] ? "border-red-500" : ""
|
||||
}`}
|
||||
placeholder="Device Name *"
|
||||
value={form.deviceName}
|
||||
onChange={(e) => {
|
||||
setForm({ ...form, deviceName: e.target.value });
|
||||
if (errors["deviceName"]) {
|
||||
setErrors({ ...errors, "deviceName": false });
|
||||
}
|
||||
}}
|
||||
required
|
||||
/>
|
||||
{errors["deviceName"] && (
|
||||
<p className="text-red-500 text-xs mt-1">This field is required</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="Meter Serial Number"
|
||||
value={form.meterSerialNumber}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, meterSerialNumber: e.target.value })
|
||||
}
|
||||
/>
|
||||
<div className="space-y-3 pt-4">
|
||||
<h3 className="text-sm font-semibold text-gray-700 border-b pb-2">
|
||||
Device Configuration
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<input
|
||||
type="number"
|
||||
className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
||||
errors["Device ID"] ? "border-red-500" : ""
|
||||
}`}
|
||||
placeholder="Device ID *"
|
||||
value={deviceForm["Device ID"] || ""}
|
||||
onChange={(e) => {
|
||||
setDeviceForm({
|
||||
...deviceForm,
|
||||
"Device ID": parseInt(e.target.value) || 0,
|
||||
});
|
||||
if (errors["Device ID"]) {
|
||||
setErrors({ ...errors, "Device ID": false });
|
||||
}
|
||||
}}
|
||||
required
|
||||
min="1"
|
||||
/>
|
||||
{errors["Device ID"] && (
|
||||
<p className="text-red-500 text-xs mt-1">This field is required</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input
|
||||
className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
||||
errors["Device EUI"] ? "border-red-500" : ""
|
||||
}`}
|
||||
placeholder="Device EUI *"
|
||||
value={deviceForm["Device EUI"]}
|
||||
onChange={(e) => {
|
||||
setDeviceForm({ ...deviceForm, "Device EUI": e.target.value });
|
||||
if (errors["Device EUI"]) {
|
||||
setErrors({ ...errors, "Device EUI": false });
|
||||
}
|
||||
}}
|
||||
required
|
||||
/>
|
||||
{errors["Device EUI"] && (
|
||||
<p className="text-red-500 text-xs mt-1">This field is required</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input
|
||||
className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
||||
errors["Join EUI"] ? "border-red-500" : ""
|
||||
}`}
|
||||
placeholder="Join EUI *"
|
||||
value={deviceForm["Join EUI"]}
|
||||
onChange={(e) => {
|
||||
setDeviceForm({ ...deviceForm, "Join EUI": e.target.value });
|
||||
if (errors["Join EUI"]) {
|
||||
setErrors({ ...errors, "Join EUI": false });
|
||||
}
|
||||
}}
|
||||
required
|
||||
/>
|
||||
{errors["Join EUI"] && (
|
||||
<p className="text-red-500 text-xs mt-1">This field is required</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input
|
||||
className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
||||
errors["AppKey"] ? "border-red-500" : ""
|
||||
}`}
|
||||
placeholder="AppKey *"
|
||||
value={deviceForm["AppKey"]}
|
||||
onChange={(e) => {
|
||||
setDeviceForm({ ...deviceForm, "AppKey": e.target.value });
|
||||
if (errors["AppKey"]) {
|
||||
setErrors({ ...errors, "AppKey": false });
|
||||
}
|
||||
}}
|
||||
required
|
||||
/>
|
||||
{errors["AppKey"] && (
|
||||
<p className="text-red-500 text-xs mt-1">This field is required</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="Area Name"
|
||||
value={form.areaName}
|
||||
onChange={(e) => setForm({ ...form, areaName: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="Device ID"
|
||||
value={form.deviceId}
|
||||
onChange={(e) => setForm({ ...form, deviceId: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="Device Name"
|
||||
value={form.deviceName}
|
||||
onChange={(e) => setForm({ ...form, deviceName: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="Device Type"
|
||||
value={form.deviceType}
|
||||
onChange={(e) => setForm({ ...form, deviceType: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<select
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
value={form.meterStatus}
|
||||
onChange={(e) => setForm({ ...form, meterStatus: e.target.value })}
|
||||
<div className="flex justify-end gap-2 pt-3 border-t">
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowModal(false);
|
||||
setDeviceForm(emptyDeviceData);
|
||||
setErrors({});
|
||||
}}
|
||||
className="px-4 py-2 rounded hover:bg-gray-100"
|
||||
>
|
||||
<option value="Installed">Meter Status: Installed</option>
|
||||
<option value="Uninstalled">Meter Status: Uninstalled</option>
|
||||
<option value="Maintenance">Meter Status: Maintenance</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="Protocol Type"
|
||||
value={form.protocolType}
|
||||
onChange={(e) => setForm({ ...form, protocolType: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="Supply Types"
|
||||
value={form.supplyTypes}
|
||||
onChange={(e) => setForm({ ...form, supplyTypes: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="Usage Analysis Type"
|
||||
value={form.usageAnalysisType}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, usageAnalysisType: e.target.value })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="Account Number (optional)"
|
||||
value={form.accountNumber ?? ""}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, accountNumber: e.target.value || null })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="User Name (optional)"
|
||||
value={form.userName ?? ""}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, userName: e.target.value || null })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="User Address (optional)"
|
||||
value={form.userAddress ?? ""}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, userAddress: e.target.value || null })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="Price No. (optional)"
|
||||
value={form.priceNo ?? ""}
|
||||
onChange={(e) => setForm({ ...form, priceNo: e.target.value || null })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="Price Name (optional)"
|
||||
value={form.priceName ?? ""}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, priceName: e.target.value || null })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="DMA Partition (optional)"
|
||||
value={form.dmaPartition ?? ""}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, dmaPartition: e.target.value || null })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<input
|
||||
type="datetime-local"
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
value={
|
||||
form.installedTime
|
||||
? new Date(form.installedTime).toISOString().slice(0, 16)
|
||||
: ""
|
||||
}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, installedTime: new Date(e.target.value).toISOString() })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 pt-3">
|
||||
<button onClick={() => setShowModal(false)}>Cancel</button>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className="bg-[#4c5f9e] text-white px-4 py-2 rounded"
|
||||
className="bg-[#4c5f9e] text-white px-4 py-2 rounded hover:bg-[#3d4d7e]"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user