✨ sungrow site routing and api call

app/(defaults)/sungrow/plant/page.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import IconTrashLines from '@/components/icon/icon-trash-lines';
+import PanelCodeHighlight from '@/components/panel-code-highlight';
+import ComponentsTablesSimple from '@/components/tables/components-tables-simple'
+import { formatUnixTimestamp } from '@/utils/helpers';
+import Tippy from '@tippyjs/react';
+import axios from 'axios';
+import React, { useEffect, useState } from "react"
+
+type Props = {}
+
+const SungrowPlant = (props: Props) => {
+    const [sites, setSites] = useState<any[]>([])
+    const [loading, setLoading] = useState(true)
+
+
+    useEffect(() => {
+        const fetchSites = async () => {
+            try {
+                const res = await fetch("/api/sungrow/site")
+                const data = await res.json()
+                console.log("data", data)
+                setSites(data)
+            } catch (error) {
+                console.error("Error fetching inverters:", error)
+            } finally {
+                setLoading(false)
+            }
+        }
+
+        fetchSites()
+    }, [])
+
+    const statusLabels: Record<number, string> = {
+        0: "Offline",
+        1: "Normal",
+    }
+    const plantTypeLabel: Record<number, string> = {
+        3: "Commercial PV",
+        4: "Residential PV",
+    }
+
+
+    return (
+        <div>
+            {loading ? <p>Loading...</p> : (
+                <PanelCodeHighlight title="Sungrow Sites">
+                    <div className="table-responsive mb-5">
+                        <table>
+                            <thead>
+                                <tr>
+                                    <th>Site Name</th>
+                                    <th>Status</th>
+                                    <th>Plant Type</th>
+                                    {/* <th>Installed Power</th>
+                                    <th>Real-time Power</th>
+                                    <th>Yield Today</th>
+                                    <th>Monthly Yield</th>
+                                    <th>Annual Yield</th>
+                                    <th>Total Yield</th>
+                                    <th>Equivalent Hours</th>
+                                    <th>Remarks</th> */}
+                                    <th className="text-center">Action</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {sites.map((data) => (
+                                    <tr key={data.id}>
+                                        <td>
+                                            <div className="whitespace-nowrap">{data.ps_name}</div>
+                                        </td>
+                                        <td>
+                                            <div className={`whitespace-nowrap ${ data.online_status !== 1 ? "text-danger" : "text-success" }`} >
+                                                {statusLabels[data.online_status] || "-"}
+                                            </div>
+                                        </td>
+                                        <td>{plantTypeLabel[data.ps_type] || "-"}</td>
+                                        {/* <td></td>
+                                        <td></td>
+                                        <td></td>
+                                        <td></td>
+                                        <td></td>
+                                        <td></td>
+                                        <td></td>
+                                        <td></td> */}
+                                        <td className="text-center">
+                                            <Tippy content="Delete">
+                                                <button type="button">
+                                                    <IconTrashLines className="m-auto" />
+                                                </button>
+                                            </Tippy>
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                    </PanelCodeHighlight>
+            )}
+        </div>
+    )
+}
+
+export default SungrowPlant

app/api/sungrow/site/route.ts

@@ -0,0 +1,22 @@
+import { NextResponse } from "next/server";
+import axios from "axios";
+
+export async function GET() {
+    try {
+        const res = await axios.post("https://gateway.isolarcloud.com.hk/openapi/platform/queryPowerStationList", {
+            "page": 1,
+            "size": 10,
+            "appkey": `${process.env.SUNGROW_APP_KEY}`
+        } ,{
+            headers: {
+                "Authorization": `Bearer ${process.env.SUNGROW_ACCESS_TOKEN}`,
+                "x-access-key": `${process.env.SUNGROW_SECRET_KEY}`
+            }
+        })
+        // console.log("res", res.data)
+        return NextResponse.json(res.data.result_data.pageList)
+    } catch (error) {
+        console.error("API fetch error:", error);
+        return NextResponse.json({ error: "Failed to fetch inverters" }, { status: 500 });
+    }
+}

app/layout.tsx

@@ -24,5 +24,5 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                 <ProviderComponent>{children}</ProviderComponent>
             </body>
         </html>
-    );
+    )
 }