Meters project selection logic fix
This commit is contained in:
@@ -64,10 +64,11 @@ export interface Meter {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const fetchMeters = async (): Promise<Meter[]> => {
|
export const fetchMeters = async (): Promise<Meter[]> => {
|
||||||
|
const pageSize = 9999;
|
||||||
try {
|
try {
|
||||||
const response = await fetch(METERS_API_URL, {
|
const response = await fetch(`${METERS_API_URL}?pageSize=${pageSize}`, {
|
||||||
method: "GET",
|
method: "GET",
|
||||||
headers: getAuthHeaders(),
|
headers: getAuthHeaders()
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
@@ -97,7 +98,6 @@ export const fetchMeters = async (): Promise<Meter[]> => {
|
|||||||
usageAnalysisType: r.fields["Usage Analysis Type"] || "",
|
usageAnalysisType: r.fields["Usage Analysis Type"] || "",
|
||||||
installedTime: r.fields["Installed Time"] || "",
|
installedTime: r.fields["Installed Time"] || "",
|
||||||
}));
|
}));
|
||||||
console.log ("ans", ans);
|
|
||||||
|
|
||||||
return ans;
|
return ans;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
@@ -139,7 +139,9 @@ export const createMeter = async (
|
|||||||
});
|
});
|
||||||
|
|
||||||
if (!response.ok) {
|
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();
|
const data = await response.json();
|
||||||
@@ -154,22 +156,32 @@ export const createMeter = async (
|
|||||||
createdAt: createdRecord.fields.CreatedAt || meterData.createdAt,
|
createdAt: createdRecord.fields.CreatedAt || meterData.createdAt,
|
||||||
updatedAt: createdRecord.fields.UpdatedAt || meterData.updatedAt,
|
updatedAt: createdRecord.fields.UpdatedAt || meterData.updatedAt,
|
||||||
areaName: createdRecord.fields["Area Name"] || meterData.areaName,
|
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,
|
userName: createdRecord.fields["User Name"] || meterData.userName,
|
||||||
userAddress: createdRecord.fields["User Address"] || meterData.userAddress,
|
userAddress:
|
||||||
meterSerialNumber: createdRecord.fields["Meter S/N"] || meterData.meterSerialNumber,
|
createdRecord.fields["User Address"] || meterData.userAddress,
|
||||||
|
meterSerialNumber:
|
||||||
|
createdRecord.fields["Meter S/N"] || meterData.meterSerialNumber,
|
||||||
meterName: createdRecord.fields["Meter Name"] || meterData.meterName,
|
meterName: createdRecord.fields["Meter Name"] || meterData.meterName,
|
||||||
meterStatus: createdRecord.fields["Meter Status"] || meterData.meterStatus,
|
meterStatus:
|
||||||
protocolType: createdRecord.fields["Protocol Type"] || meterData.protocolType,
|
createdRecord.fields["Meter Status"] || meterData.meterStatus,
|
||||||
|
protocolType:
|
||||||
|
createdRecord.fields["Protocol Type"] || meterData.protocolType,
|
||||||
priceNo: createdRecord.fields["Price No."] || meterData.priceNo,
|
priceNo: createdRecord.fields["Price No."] || meterData.priceNo,
|
||||||
priceName: createdRecord.fields["Price Name"] || meterData.priceName,
|
priceName: createdRecord.fields["Price Name"] || meterData.priceName,
|
||||||
dmaPartition: createdRecord.fields["DMA Partition"] || meterData.dmaPartition,
|
dmaPartition:
|
||||||
supplyTypes: createdRecord.fields["Supply Types"] || meterData.supplyTypes,
|
createdRecord.fields["DMA Partition"] || meterData.dmaPartition,
|
||||||
|
supplyTypes:
|
||||||
|
createdRecord.fields["Supply Types"] || meterData.supplyTypes,
|
||||||
deviceId: createdRecord.fields["Device ID"] || meterData.deviceId,
|
deviceId: createdRecord.fields["Device ID"] || meterData.deviceId,
|
||||||
deviceName: createdRecord.fields["Device Name"] || meterData.deviceName,
|
deviceName: createdRecord.fields["Device Name"] || meterData.deviceName,
|
||||||
deviceType: createdRecord.fields["Device Type"] || meterData.deviceType,
|
deviceType: createdRecord.fields["Device Type"] || meterData.deviceType,
|
||||||
usageAnalysisType: createdRecord.fields["Usage Analysis Type"] || meterData.usageAnalysisType,
|
usageAnalysisType:
|
||||||
installedTime: createdRecord.fields["Installed Time"] || meterData.installedTime,
|
createdRecord.fields["Usage Analysis Type"] ||
|
||||||
|
meterData.usageAnalysisType,
|
||||||
|
installedTime:
|
||||||
|
createdRecord.fields["Installed Time"] || meterData.installedTime,
|
||||||
};
|
};
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error creating meter:", error);
|
console.error("Error creating meter:", error);
|
||||||
@@ -214,9 +226,13 @@ export const updateMeter = async (
|
|||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
if (response.status === 400) {
|
if (response.status === 400) {
|
||||||
const errorData = await response.json();
|
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();
|
const data = await response.json();
|
||||||
@@ -231,22 +247,32 @@ export const updateMeter = async (
|
|||||||
createdAt: updatedRecord.fields.CreatedAt || meterData.createdAt,
|
createdAt: updatedRecord.fields.CreatedAt || meterData.createdAt,
|
||||||
updatedAt: updatedRecord.fields.UpdatedAt || meterData.updatedAt,
|
updatedAt: updatedRecord.fields.UpdatedAt || meterData.updatedAt,
|
||||||
areaName: updatedRecord.fields["Area Name"] || meterData.areaName,
|
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,
|
userName: updatedRecord.fields["User Name"] || meterData.userName,
|
||||||
userAddress: updatedRecord.fields["User Address"] || meterData.userAddress,
|
userAddress:
|
||||||
meterSerialNumber: updatedRecord.fields["Meter S/N"] || meterData.meterSerialNumber,
|
updatedRecord.fields["User Address"] || meterData.userAddress,
|
||||||
|
meterSerialNumber:
|
||||||
|
updatedRecord.fields["Meter S/N"] || meterData.meterSerialNumber,
|
||||||
meterName: updatedRecord.fields["Meter Name"] || meterData.meterName,
|
meterName: updatedRecord.fields["Meter Name"] || meterData.meterName,
|
||||||
meterStatus: updatedRecord.fields["Meter Status"] || meterData.meterStatus,
|
meterStatus:
|
||||||
protocolType: updatedRecord.fields["Protocol Type"] || meterData.protocolType,
|
updatedRecord.fields["Meter Status"] || meterData.meterStatus,
|
||||||
|
protocolType:
|
||||||
|
updatedRecord.fields["Protocol Type"] || meterData.protocolType,
|
||||||
priceNo: updatedRecord.fields["Price No."] || meterData.priceNo,
|
priceNo: updatedRecord.fields["Price No."] || meterData.priceNo,
|
||||||
priceName: updatedRecord.fields["Price Name"] || meterData.priceName,
|
priceName: updatedRecord.fields["Price Name"] || meterData.priceName,
|
||||||
dmaPartition: updatedRecord.fields["DMA Partition"] || meterData.dmaPartition,
|
dmaPartition:
|
||||||
supplyTypes: updatedRecord.fields["Supply Types"] || meterData.supplyTypes,
|
updatedRecord.fields["DMA Partition"] || meterData.dmaPartition,
|
||||||
|
supplyTypes:
|
||||||
|
updatedRecord.fields["Supply Types"] || meterData.supplyTypes,
|
||||||
deviceId: updatedRecord.fields["Device ID"] || meterData.deviceId,
|
deviceId: updatedRecord.fields["Device ID"] || meterData.deviceId,
|
||||||
deviceName: updatedRecord.fields["Device Name"] || meterData.deviceName,
|
deviceName: updatedRecord.fields["Device Name"] || meterData.deviceName,
|
||||||
deviceType: updatedRecord.fields["Device Type"] || meterData.deviceType,
|
deviceType: updatedRecord.fields["Device Type"] || meterData.deviceType,
|
||||||
usageAnalysisType: updatedRecord.fields["Usage Analysis Type"] || meterData.usageAnalysisType,
|
usageAnalysisType:
|
||||||
installedTime: updatedRecord.fields["Installed Time"] || meterData.installedTime,
|
updatedRecord.fields["Usage Analysis Type"] ||
|
||||||
|
meterData.usageAnalysisType,
|
||||||
|
installedTime:
|
||||||
|
updatedRecord.fields["Installed Time"] || meterData.installedTime,
|
||||||
};
|
};
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error updating meter:", error);
|
console.error("Error updating meter:", error);
|
||||||
@@ -267,9 +293,13 @@ export const deleteMeter = async (id: string): Promise<void> => {
|
|||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
if (response.status === 400) {
|
if (response.status === 400) {
|
||||||
const errorData = await response.json();
|
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) {
|
} catch (error) {
|
||||||
console.error("Error deleting meter:", error);
|
console.error("Error deleting meter:", error);
|
||||||
|
|||||||
@@ -62,7 +62,7 @@ export default function ConcentratorsPage() {
|
|||||||
setLoadingConcentrators(true);
|
setLoadingConcentrators(true);
|
||||||
try {
|
try {
|
||||||
const data = await fetchConcentrators();
|
const data = await fetchConcentrators();
|
||||||
const projectsArray = data.map((record) => record["Area Name"]);
|
const projectsArray = [...new Set(data.map((record) => record["Area Name"]))];
|
||||||
setAllProjects(projectsArray);
|
setAllProjects(projectsArray);
|
||||||
setConcentrators(data);
|
setConcentrators(data);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
import { useState, useEffect, useMemo } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import { Plus, Trash2, Pencil, RefreshCcw } from "lucide-react";
|
import { Plus, Trash2, Pencil, RefreshCcw } from "lucide-react";
|
||||||
import MaterialTable from "@material-table/core";
|
import MaterialTable from "@material-table/core";
|
||||||
import { fetchProjectNames } from "../../api/projects";
|
|
||||||
import {
|
import {
|
||||||
fetchMeters,
|
fetchMeters,
|
||||||
createMeter,
|
createMeter,
|
||||||
@@ -10,14 +9,6 @@ import {
|
|||||||
type Meter,
|
type Meter,
|
||||||
} from "../../api/meters";
|
} from "../../api/meters";
|
||||||
|
|
||||||
/* ================= TYPES ================= */
|
|
||||||
|
|
||||||
interface User {
|
|
||||||
name: string;
|
|
||||||
role: "SUPER_ADMIN" | "USER";
|
|
||||||
project?: string; // asignado si no es superadmin
|
|
||||||
}
|
|
||||||
|
|
||||||
interface DeviceData {
|
interface DeviceData {
|
||||||
"Device ID": number;
|
"Device ID": number;
|
||||||
"Device EUI": string;
|
"Device EUI": string;
|
||||||
@@ -28,51 +19,14 @@ interface DeviceData {
|
|||||||
|
|
||||||
/* ================= COMPONENT ================= */
|
/* ================= COMPONENT ================= */
|
||||||
export default function MeterManagement() {
|
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",
|
|
||||||
};
|
|
||||||
|
|
||||||
const [allProjects, setAllProjects] = useState<string[]>([]);
|
const [allProjects, setAllProjects] = useState<string[]>([]);
|
||||||
const [loadingProjects, setLoadingProjects] = useState(true);
|
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("");
|
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 [meters, setMeters] = useState<Meter[]>([]);
|
const [meters, setMeters] = useState<Meter[]>([]);
|
||||||
|
const [filteredMeters, setFilteredMeters] = useState<Meter[]>([]);
|
||||||
const [loadingMeters, setLoadingMeters] = useState(true);
|
const [loadingMeters, setLoadingMeters] = useState(true);
|
||||||
const [activeMeter, setActiveMeter] = useState<Meter | null>(null);
|
const [activeMeter, setActiveMeter] = useState<Meter | null>(null);
|
||||||
const [search, setSearch] = useState("");
|
const [search, setSearch] = useState("");
|
||||||
@@ -109,6 +63,15 @@ export default function MeterManagement() {
|
|||||||
"AppKey": "",
|
"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 [form, setForm] = useState<Omit<Meter, "id">>(emptyMeter);
|
||||||
const [deviceForm, setDeviceForm] = useState<DeviceData>(emptyDeviceData);
|
const [deviceForm, setDeviceForm] = useState<DeviceData>(emptyDeviceData);
|
||||||
const [errors, setErrors] = useState<{ [key: string]: boolean }>({});
|
const [errors, setErrors] = useState<{ [key: string]: boolean }>({});
|
||||||
@@ -117,12 +80,16 @@ export default function MeterManagement() {
|
|||||||
setLoadingMeters(true);
|
setLoadingMeters(true);
|
||||||
try {
|
try {
|
||||||
const data = await fetchMeters();
|
const data = await fetchMeters();
|
||||||
|
const projectsArray = [...new Set(data.map((record) => record["areaName"]))];
|
||||||
|
setAllProjects(projectsArray);
|
||||||
setMeters(data);
|
setMeters(data);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error loading meters:", error);
|
console.error("Error loading meters:", error);
|
||||||
|
setAllProjects([]);
|
||||||
setMeters([]);
|
setMeters([]);
|
||||||
} finally {
|
} finally {
|
||||||
setLoadingMeters(false);
|
setLoadingMeters(false);
|
||||||
|
setLoadingProjects(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -144,16 +111,14 @@ export default function MeterManagement() {
|
|||||||
const validateForm = (): boolean => {
|
const validateForm = (): boolean => {
|
||||||
const newErrors: { [key: string]: boolean } = {};
|
const newErrors: { [key: string]: boolean } = {};
|
||||||
|
|
||||||
|
// Required fields
|
||||||
if (!form.meterName.trim()) newErrors["meterName"] = true;
|
if (!form.meterName.trim()) newErrors["meterName"] = true;
|
||||||
if (!form.meterSerialNumber.trim()) newErrors["meterSerialNumber"] = true;
|
if (!form.meterSerialNumber.trim()) newErrors["meterSerialNumber"] = true;
|
||||||
if (!form.areaName.trim()) newErrors["areaName"] = true;
|
if (!form.areaName.trim()) newErrors["areaName"] = true;
|
||||||
if (!form.deviceName.trim()) newErrors["deviceName"] = true;
|
if (!form.deviceName.trim()) newErrors["deviceName"] = true;
|
||||||
if (!form.deviceType.trim()) newErrors["deviceType"] = true;
|
|
||||||
if (!form.protocolType.trim()) newErrors["protocolType"] = true;
|
if (!form.protocolType.trim()) newErrors["protocolType"] = true;
|
||||||
if (!form.supplyTypes.trim()) newErrors["supplyTypes"] = true;
|
|
||||||
if (!form.usageAnalysisType.trim()) newErrors["usageAnalysisType"] = true;
|
|
||||||
if (!form.installedTime) newErrors["installedTime"] = true;
|
|
||||||
|
|
||||||
|
// Device Configuration - Required
|
||||||
if (!deviceForm["Device ID"] || deviceForm["Device ID"] === 0) {
|
if (!deviceForm["Device ID"] || deviceForm["Device ID"] === 0) {
|
||||||
newErrors["Device ID"] = true;
|
newErrors["Device ID"] = true;
|
||||||
}
|
}
|
||||||
@@ -248,15 +213,6 @@ export default function MeterManagement() {
|
|||||||
setActiveMeter(null);
|
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 ================= */
|
/* ================= UI ================= */
|
||||||
return (
|
return (
|
||||||
<div className="flex gap-6 p-6 w-full bg-gray-100">
|
<div className="flex gap-6 p-6 w-full bg-gray-100">
|
||||||
@@ -270,22 +226,25 @@ export default function MeterManagement() {
|
|||||||
value={selectedProject}
|
value={selectedProject}
|
||||||
onChange={(e) => setSelectedProject(e.target.value)}
|
onChange={(e) => setSelectedProject(e.target.value)}
|
||||||
className="w-full border px-3 py-2 rounded"
|
className="w-full border px-3 py-2 rounded"
|
||||||
disabled={loadingProjects || visibleProjects.length === 0}
|
disabled={loadingProjects || allProjects.length === 0}
|
||||||
>
|
>
|
||||||
{loadingProjects ? (
|
{loadingProjects ? (
|
||||||
<option>Loading projects...</option>
|
<option>Loading projects...</option>
|
||||||
) : visibleProjects.length === 0 ? (
|
) : meters.length === 0 ? (
|
||||||
<option>No projects available</option>
|
<option>No projects available</option>
|
||||||
) : (
|
) : (
|
||||||
visibleProjects.map((proj) => (
|
<>
|
||||||
<option key={proj} value={proj}>
|
<option value="">Select a project</option>
|
||||||
{proj}
|
{allProjects.map((proj) => (
|
||||||
</option>
|
<option key={proj} value={proj}>
|
||||||
))
|
{proj}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
{visibleProjects.length === 0 && !loadingProjects && (
|
{allProjects.length === 0 && !loadingProjects && (
|
||||||
<p className="text-sm text-gray-500 mt-2">
|
<p className="text-sm text-gray-500 mt-2">
|
||||||
No projects available. Please contact your administrator.
|
No projects available. Please contact your administrator.
|
||||||
</p>
|
</p>
|
||||||
@@ -316,7 +275,7 @@ export default function MeterManagement() {
|
|||||||
setEditingId(null);
|
setEditingId(null);
|
||||||
setShowModal(true);
|
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"
|
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
|
<Plus size={16} /> Add
|
||||||
@@ -387,32 +346,17 @@ export default function MeterManagement() {
|
|||||||
title="Meters"
|
title="Meters"
|
||||||
isLoading={loadingMeters}
|
isLoading={loadingMeters}
|
||||||
columns={[
|
columns={[
|
||||||
{ title: "Meter Name", field: "meterName" },
|
{ title: "Area Name", field: "areaName", render: (rowData) => rowData.areaName || "-" },
|
||||||
{ title: "Serial Number", field: "meterSerialNumber" },
|
{ title: "Account Number", field: "accountNumber", render: (rowData) => rowData.accountNumber || "-" },
|
||||||
{ title: "Area", field: "areaName" },
|
{ title: "User Name", field: "userName", render: (rowData) => rowData.userName || "-" },
|
||||||
{ title: "Device ID", field: "deviceId" },
|
{ title: "User Address", field: "userAddress", render: (rowData) => rowData.userAddress || "-" },
|
||||||
{ title: "Device Name", field: "deviceName" },
|
{ title: "Meter S/N", field: "meterSerialNumber", render: (rowData) => rowData.meterSerialNumber || "-" },
|
||||||
{
|
{ title: "Meter Name", field: "meterName", render: (rowData) => rowData.meterName || "-" },
|
||||||
title: "Status",
|
{ title: "Protocol Type", field: "protocolType", render: (rowData) => rowData.protocolType || "-" },
|
||||||
field: "meterStatus",
|
{ title: "Device ID", field: "deviceId", render: (rowData) => rowData.deviceId || "-" },
|
||||||
render: (rowData) => (
|
{ title: "Device Name", field: "deviceName", render: (rowData) => rowData.deviceName || "-" },
|
||||||
<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" },
|
|
||||||
]}
|
]}
|
||||||
data={filtered}
|
data={filteredMeters}
|
||||||
onRowClick={(_, rowData) => setActiveMeter(rowData as Meter)}
|
onRowClick={(_, rowData) => setActiveMeter(rowData as Meter)}
|
||||||
options={{
|
options={{
|
||||||
actionsColumnIndex: -1,
|
actionsColumnIndex: -1,
|
||||||
@@ -450,6 +394,83 @@ export default function MeterManagement() {
|
|||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-3">
|
<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>
|
<div>
|
||||||
<input
|
<input
|
||||||
className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
||||||
@@ -469,100 +490,6 @@ export default function MeterManagement() {
|
|||||||
<p className="text-red-500 text-xs mt-1">This field is required</p>
|
<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["meterSerialNumber"] ? "border-red-500" : ""
|
|
||||||
}`}
|
|
||||||
placeholder="Meter Serial Number *"
|
|
||||||
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>
|
|
||||||
|
|
||||||
<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 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["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>
|
|
||||||
<input
|
|
||||||
className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
|
||||||
errors["deviceType"] ? "border-red-500" : ""
|
|
||||||
}`}
|
|
||||||
placeholder="Device Type *"
|
|
||||||
value={form.deviceType}
|
|
||||||
onChange={(e) => {
|
|
||||||
setForm({ ...form, deviceType: e.target.value });
|
|
||||||
if (errors["deviceType"]) {
|
|
||||||
setErrors({ ...errors, "deviceType": false });
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
{errors["deviceType"] && (
|
|
||||||
<p className="text-red-500 text-xs mt-1">This field is required</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<select
|
|
||||||
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
||||||
value={form.meterStatus}
|
|
||||||
onChange={(e) => setForm({ ...form, meterStatus: e.target.value })}
|
|
||||||
>
|
|
||||||
<option value="Installed">Installed</option>
|
|
||||||
<option value="Uninstalled">Uninstalled</option>
|
|
||||||
<option value="Maintenance">Maintenance</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-3">
|
<div className="grid grid-cols-2 gap-3">
|
||||||
@@ -588,129 +515,35 @@ export default function MeterManagement() {
|
|||||||
|
|
||||||
<div>
|
<div>
|
||||||
<input
|
<input
|
||||||
className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
errors["supplyTypes"] ? "border-red-500" : ""
|
placeholder="Device ID (optional)"
|
||||||
}`}
|
value={form.deviceId ?? ""}
|
||||||
placeholder="Supply Types *"
|
onChange={(e) =>
|
||||||
value={form.supplyTypes}
|
setForm({ ...form, deviceId: e.target.value || "" })
|
||||||
onChange={(e) => {
|
}
|
||||||
setForm({ ...form, supplyTypes: e.target.value });
|
|
||||||
if (errors["supplyTypes"]) {
|
|
||||||
setErrors({ ...errors, "supplyTypes": false });
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
required
|
|
||||||
/>
|
/>
|
||||||
{errors["supplyTypes"] && (
|
|
||||||
<p className="text-red-500 text-xs mt-1">This field is required</p>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<input
|
<input
|
||||||
className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
||||||
errors["usageAnalysisType"] ? "border-red-500" : ""
|
errors["deviceName"] ? "border-red-500" : ""
|
||||||
}`}
|
}`}
|
||||||
placeholder="Usage Analysis Type *"
|
placeholder="Device Name *"
|
||||||
value={form.usageAnalysisType}
|
value={form.deviceName}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
setForm({ ...form, usageAnalysisType: e.target.value });
|
setForm({ ...form, deviceName: e.target.value });
|
||||||
if (errors["usageAnalysisType"]) {
|
if (errors["deviceName"]) {
|
||||||
setErrors({ ...errors, "usageAnalysisType": false });
|
setErrors({ ...errors, "deviceName": false });
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
{errors["usageAnalysisType"] && (
|
{errors["deviceName"] && (
|
||||||
<p className="text-red-500 text-xs mt-1">This field is required</p>
|
<p className="text-red-500 text-xs mt-1">This field is required</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</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["installedTime"] ? "border-red-500" : ""
|
|
||||||
}`}
|
|
||||||
placeholder="Installed Time *"
|
|
||||||
value={
|
|
||||||
form.installedTime
|
|
||||||
? new Date(form.installedTime).toISOString().slice(0, 16)
|
|
||||||
: ""
|
|
||||||
}
|
|
||||||
onChange={(e) => {
|
|
||||||
setForm({ ...form, installedTime: new Date(e.target.value).toISOString() });
|
|
||||||
if (errors["installedTime"]) {
|
|
||||||
setErrors({ ...errors, "installedTime": false });
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
{errors["installedTime"] && (
|
|
||||||
<p className="text-red-500 text-xs mt-1">This field is required</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="pt-2 border-t">
|
|
||||||
<p className="text-xs text-gray-500 mb-2">Optional Fields</p>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-3">
|
|
||||||
<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 })
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<input
|
|
||||||
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent mt-3"
|
|
||||||
placeholder="User Address (optional)"
|
|
||||||
value={form.userAddress ?? ""}
|
|
||||||
onChange={(e) =>
|
|
||||||
setForm({ ...form, userAddress: e.target.value || null })
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-3 gap-3 mt-3">
|
|
||||||
<input
|
|
||||||
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
||||||
placeholder="Price No. (optional)"
|
|
||||||
value={form.priceNo ?? ""}
|
|
||||||
onChange={(e) => setForm({ ...form, priceNo: e.target.value || null })}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<input
|
|
||||||
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
||||||
placeholder="Price Name (optional)"
|
|
||||||
value={form.priceName ?? ""}
|
|
||||||
onChange={(e) =>
|
|
||||||
setForm({ ...form, priceName: e.target.value || null })
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<input
|
|
||||||
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
||||||
placeholder="DMA Partition (optional)"
|
|
||||||
value={form.dmaPartition ?? ""}
|
|
||||||
onChange={(e) =>
|
|
||||||
setForm({ ...form, dmaPartition: e.target.value || null })
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-3 pt-4">
|
<div className="space-y-3 pt-4">
|
||||||
|
|||||||
Reference in New Issue
Block a user