diff --git a/app/(defaults)/chint/inverters/[id]/page.tsx b/app/(defaults)/chint/inverters/[id]/page.tsx
new file mode 100644
index 0000000..ef8b0a8
--- /dev/null
+++ b/app/(defaults)/chint/inverters/[id]/page.tsx
@@ -0,0 +1,239 @@
+'use client';
+
+import PanelCodeHighlight from '@/components/panel-code-highlight'
+import React, { Fragment, useEffect, useState } from 'react';
+import { Tab } from '@headlessui/react';
+import IconHome from '@/components/icon/icon-home';
+import IconUser from '@/components/icon/icon-user';
+import IconPhone from '@/components/icon/icon-phone';
+import { useRouter } from 'next/router';
+import { useParams } from 'next/navigation';
+
+type Props = {}
+
+const InverterViewPage = (props: Props) => {
+ const [isMounted, setIsMounted] = useState(false)
+ const params = useParams()
+ console.log()
+ useEffect(() => {
+ setIsMounted(true)
+ }, [])
+
+ // https://api-a.fomware.com.cn/asset/v1/list?key=1105160823180001&type=2
+
+ return (
+ <>
+ <PanelCodeHighlight title={params.id.toString() || ""}>
+ <div className="mb-5">
+ {isMounted && (
+ <Tab.Group>
+ <Tab.List className="mt-3 flex flex-wrap border-b border-white-light dark:border-[#191e3a]">
+ <Tab as={Fragment}>
+ {({ selected }) => (
+ <button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
+ Brief
+ </button>
+ )}
+ </Tab>
+ <Tab as={Fragment}>
+ {({ selected }) => (
+ <button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
+ Chart
+ </button>
+ )}
+ </Tab>
+ <Tab as={Fragment}>
+ {({ selected }) => (
+ <button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
+ Event
+ </button>
+ )}
+ </Tab>
+ <Tab as={Fragment}>
+ {({ selected }) => (
+ <button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
+ Settings
+ </button>
+ )}
+ </Tab>
+ <Tab as={Fragment}>
+ {({ selected }) => (
+ <button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
+ Firmware
+ </button>
+ )}
+ </Tab>
+ <Tab as={Fragment}>
+ {({ selected }) => (
+ <button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
+ Data
+ </button>
+ )}
+ </Tab>
+ </Tab.List>
+ <Tab.Panels>
+ <Tab.Panel>
+ <div className="active pt-5">
+ <p className="mb-3 text-base font-semibold">Last Updated ( 2025-02-24 16:03:10 +0800 )</p>
+
+ <blockquote className="rounded-br-md rounded-tr-md border-l-2 !border-l-primary bg-white py-2 px-2 text-black dark:border-[#060818] dark:bg-[#060818]">
+ <div className="flex items-start">
+ <p className="m-0 font-semibold text-sm not-italic text-[#515365] dark:text-white-light">Basic Information</p>
+ </div>
+ </blockquote>
+
+ <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 text-gray-600 mt-3">
+ <p><span className="font-semibold">Model:</span> CPS SCA10KTL-T</p>
+ <p><span className="font-semibold">SN:</span> 1105160823180001</p>
+ <p><span className="font-semibold">Total Energy:</span> 9.24 MWh</p>
+ <p><span className="font-semibold">Today Energy:</span> 35.65 kWh</p>
+ <p><span className="font-semibold">Reactive Power:</span> -226.9 var</p>
+ <p><span className="font-semibold">Active Power:</span> 5.552 kW</p>
+ <p><span className="font-semibold">Inverter Mode:</span> OnGrid</p>
+ <p><span className="font-semibold">Inner Temperature:</span> 53°C</p>
+ <p><span className="font-semibold">Create Time:</span> 2024-06-05 12:05:41 +0800</p>
+ <p><span className="font-semibold">Modules:</span> Master: 011330, Deputy: BR0208</p>
+ </div>
+
+ </div>
+
+
+ </Tab.Panel>
+ <Tab.Panel>
+ <div>
+ <div className="flex items-start pt-5">
+ <div className="h-20 w-20 flex-none ltr:mr-4 rtl:ml-4">
+ <img src="/assets/images/profile-34.jpeg" alt="img" className="m-0 h-20 w-20 rounded-full object-cover ring-2 ring-[#ebedf2] dark:ring-white-dark" />
+ </div>
+ <div className="flex-auto">
+ <h5 className="mb-4 text-xl font-medium">Media heading</h5>
+ <p className="text-white-dark">
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra
+ turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
+ </p>
+ </div>
+ </div>
+ </div>
+ </Tab.Panel>
+ <Tab.Panel>
+ <div className="pt-5">
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+ nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+ fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ </div>
+ </Tab.Panel>
+ <Tab.Panel>Disabled</Tab.Panel>
+ </Tab.Panels>
+ </Tab.Group>
+ )}
+ </div>
+ </PanelCodeHighlight>
+
+
+ <div className="panel pt-1 mt-">
+ {isMounted && (
+ <Tab.Group>
+ <Tab.List className="flex flex-wrap border-b border-white-light dark:border-[#191e3a]">
+ <Tab as={Fragment}>
+ {({ selected }) => (
+ <button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
+ INV-DC
+ </button>
+ )}
+ </Tab>
+ <Tab as={Fragment}>
+ {({ selected }) => (
+ <button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
+ INV-AC
+ </button>
+ )}
+ </Tab>
+ <Tab as={Fragment}>
+ {({ selected }) => (
+ <button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
+ Meter-AC
+ </button>
+ )}
+ </Tab>
+ <Tab as={Fragment}>
+ {({ selected }) => (
+ <button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
+ Meter-Load
+ </button>
+ )}
+ </Tab>
+ </Tab.List>
+ <Tab.Panels>
+ <Tab.Panel>
+ <div className="active pt-5">
+ <table className="w-full border-collapse">
+ <thead>
+ <tr className="bg-gray-200 text-gray-600 text-left">
+ <th className="p-2"></th>
+ <th className="p-2">Voltage(V)</th>
+ <th className="p-2">Current(A)</th>
+ <th className="p-2">Power(W)</th>
+ </tr>
+ </thead>
+ <tbody>
+ {[
+ { pv: "PV1/PV1", voltage: 362.1, current: 7.5, power: 2717.5 },
+ { pv: "PV2/PV2", voltage: 347.0, current: 9.16, power: 3181.9 },
+ { pv: "PV3/PV3", voltage: 0.0, current: 0.0, power: 0.0 },
+ { pv: "PV4/PV4", voltage: 0.0, current: 0.0, power: 0.0 },
+ ].map((row, index) => (
+ <tr key={index} className="border-b text-gray-600">
+ <td className="p-2">{row.pv}</td>
+ <td className="p-2">{row.voltage}</td>
+ <td className="p-2">{row.current}</td>
+ <td className="p-2">{row.power}</td>
+ </tr>
+ ))}
+ </tbody>
+ </table>
+ </div>
+ </Tab.Panel>
+ <Tab.Panel>
+ <div className='pt-5'>
+ <table className="w-full border-collapse">
+ <thead>
+ <tr className="bg-gray-200 text-gray-600 text-left">
+ <th className="p-2"></th>
+ <th className="p-2">Voltage(V)</th>
+ <th className="p-2">Current(A)</th>
+ <th className="p-2">Power(W)</th>
+ <th className="p-2">Frequency(Hz)</th>
+ </tr>
+ </thead>
+ <tbody>
+ {[
+ { pv: "A", voltage: 362.1, current: 7.5, power: 2717.5, frequency: 1 },
+ { pv: "B", voltage: 347.0, current: 9.16, power: 3181.9, frequency: 1 },
+ { pv: "C", voltage: 0.0, current: 0.0, power: 0.0, frequency: 1 },
+ ].map((row, index) => (
+ <tr key={index} className="border-b text-gray-600">
+ <td className="p-2">{row.pv}</td>
+ <td className="p-2">{row.voltage}</td>
+ <td className="p-2">{row.current}</td>
+ <td className="p-2">{row.power}</td>
+ <td className="p-2">{row.frequency}</td>
+ </tr>
+ ))}
+ </tbody>
+ </table>
+ </div>
+ </Tab.Panel>
+ <Tab.Panel>Disabled</Tab.Panel>
+ <Tab.Panel>Disabled</Tab.Panel>
+ </Tab.Panels>
+ </Tab.Group>
+ )}
+ </div>
+
+ </>
+ )
+}
+
+export default InverterViewPage
diff --git a/app/(defaults)/chint/inverters/page.tsx b/app/(defaults)/chint/inverters/page.tsx
index 11f92e8..0744130 100644
--- a/app/(defaults)/chint/inverters/page.tsx
+++ b/app/(defaults)/chint/inverters/page.tsx
@@ -9,6 +9,7 @@ import React, { useEffect, useState } from 'react'
// import ReactApexChart from 'react-apexcharts';
import dynamic from 'next/dynamic';
+import Link from 'next/link';
const ReactApexChart = dynamic(() => import('react-apexcharts'), { ssr: false });
type Props = {}
@@ -111,7 +112,7 @@ const SungrowInverters = (props: Props) => {
{inverters.map((data) => (
<tr key={data.id}>
<td>
- <div className="whitespace-nowrap">{data.name}</div>
+ <div className="whitespace-nowrap"><Link href={`/chint/inverters/${data.name}`}>{data.name}</Link></div>
</td>
<td>
<div className="whitespace-nowrap">{data.siteName}</div>
diff --git a/components/panel-code-highlight.tsx b/components/panel-code-highlight.tsx
index 96b96bf..5bb4c77 100644
--- a/components/panel-code-highlight.tsx
+++ b/components/panel-code-highlight.tsx
@@ -15,7 +15,6 @@ const PanelCodeHighlight = ({ children, title, id, className = '' }: PanelCodeHi
<div className={`panel ${className}`} id={id}>
<div className="mb-5 flex items-center justify-between">
<h5 className="text-lg font-semibold dark:text-white-light">{title}</h5>
-
</div>
{children}
</div>