feat: Add Fetch Data screen

package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@heroicons/react": "2.0.18",
-    "@material-tailwind/react": "2.1.4",
+    "@material-tailwind/react": "^2.1.4",
     "apexcharts": "3.44.0",
     "prop-types": "15.8.1",
     "react": "18.2.0",
@@ -29,4 +29,4 @@
     "tailwindcss": "3.3.4",
     "vite": "4.5.0"
   }
-}
+}

src/components/Pagination.jsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { Button, IconButton } from "@material-tailwind/react";
+import { ArrowRightIcon, ArrowLeftIcon } from "@heroicons/react/24/outline";
+
+export function Pagination() {
+  const [active, setActive] = React.useState(1);
+
+  const getItemProps = (index) =>
+    ({
+      variant: active === index ? "filled" : "text",
+      color: "gray",
+      onClick: () => setActive(index),
+    });
+
+  const next = () => {
+    if (active === 5) return;
+
+    setActive(active + 1);
+  };
+
+  const prev = () => {
+    if (active === 1) return;
+
+    setActive(active - 1);
+  };
+
+  return (
+    <div className="flex items-center gap-4">
+      <Button
+        variant="text"
+        className="flex items-center gap-2"
+        onClick={prev}
+        disabled={active === 1}
+      >
+        <ArrowLeftIcon strokeWidth={2} className="h-4 w-4" /> Previous
+      </Button>
+      <div className="flex items-center gap-2">
+        <IconButton {...getItemProps(1)}>1</IconButton>
+        <IconButton {...getItemProps(2)}>2</IconButton>
+        <IconButton {...getItemProps(3)}>3</IconButton>
+        <IconButton {...getItemProps(4)}>4</IconButton>
+        <IconButton {...getItemProps(5)}>5</IconButton>
+      </div>
+      <Button
+        variant="text"
+        className="flex items-center gap-2"
+        onClick={next}
+        disabled={active === 5}
+      >
+        Next
+        <ArrowRightIcon strokeWidth={2} className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+}

src/data/index.js

@@ -6,3 +6,4 @@ export * from "@/data/platform-settings-data";
 export * from "@/data/conversations-data";
 export * from "@/data/projects-data";
 export * from "@/data/authors-table-data";
+export * from "@/data/stations-table-data";

src/data/stations-table-data.js

@@ -0,0 +1,49 @@
+export const stationsTableData = [
+    {
+        capacity: 68.04,
+        gridConnectionDate: "2021-09-23T08:48:29+07:00",
+        latitude: "16.209858",
+        longitude: "103.280011",
+        plantAddress: "ปั๊มน้ำมัน ปตท.ตักสิลา",
+        plantCode: "NE=50453264",
+        plantName: "PTT E5"
+    },
+    {
+        capacity: 651.7,
+        gridConnectionDate: "2024-02-28T01:00:00+07:00",
+        latitude: "7.525556",
+        longitude: "99.512500",
+        plantAddress: "ประเทศไทยอ.กันตังโคกยาง92110",
+        plantCode: "NE=51609908",
+        plantName: "KANTANG 2"
+    },
+    {
+        capacity: 113.85,
+        gridConnectionDate: "2022-07-12T11:30:04+07:00",
+        latitude: "13.325294",
+        longitude: "100.965045",
+        plantAddress: "39/1 หมู่1 ต.ห้วยกะปิ อ.เมือง จ.ชลบุรี",
+        plantCode: "NE=50216036",
+        plantName: "อาคารชลประทีปสินทรัพย์(office CCP)"
+    },
+    {
+        capacity: 623.7,
+        gridConnectionDate: "2024-05-27T16:33:59+07:00",
+        latitude: "16.423056",
+        longitude: "102.834444",
+        plantAddress: "ประเทศไทยอำเภอเมืองขอนแก่นในเมืองแฟรี่พลาซ่า",
+        plantCode: "NE=52060133",
+        plantName: "Fairy Plaza KK"
+    },
+    {
+        capacity: 1596.0,
+        gridConnectionDate: "2024-02-27T01:00:00+07:00",
+        latitude: "13.428889",
+        longitude: "101.020278",
+        plantAddress: "ประเทศไทยอ.เมืองชลบุรีคลองตำหรุอมตะ ซิตี้ ชลบุรี",
+        plantCode: "NE=51602716",
+        plantName: "IJTT-HEAD OFFICE"
+    },
+];
+
+export default stationsTableData;

src/pages/dashboard/fetch.jsx

@@ -0,0 +1,191 @@
+import {
+  Button,
+  Card,
+  CardHeader,
+  CardBody,
+  Typography,
+  Avatar,
+  Chip,
+  Tooltip,
+  Progress,
+} from "@material-tailwind/react";
+import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
+import { stationsTableData } from "@/data";
+import { useEffect, useState } from "react";
+import { Pagination } from "@/components/Pagination";
+
+const URL = "https://sg5.fusionsolar.huawei.com/thirdData/stations";
+const TOKEN = "n-aps57x9fnv08tc6rld0b7wao9cel8btic9pg9clf3w1c2qrzdfo6tgs5g41i1cc7btiks6an461gnxtj5ctiilarvvpehcqm3tbsdj2p06fxc6g81gmrtcvude1ceojt";
+
+export function Fetch() {
+
+    const [pageNo,setPageNo] = useState(1);    
+    const [startTime,setStartTime] = useState();  
+    const [endTime,setEndTime] = useState();  
+
+    const postData = {
+        pageNo: pageNo//,
+        //startTime: startTime,
+        //endTime: endTime
+    };
+    useEffect(async ()=> {
+
+        function getStations(){}
+            debugger;
+            console.log(JSON.stringify(postData));
+            const response = await fetch(URL,{
+                    method: 'POST', 
+                    headers: {
+                        'Content-Type':'application/json',
+                        'Access-Control-Allow-Origin': '*',
+                        'Access-Control-Allow-Credentials': 'true',
+                        'Access-Control-Allow-Headers': '*',
+                        'Access-Control-Max-Age':'86400',
+                        'xsrf-token':TOKEN
+                    },
+                    body: JSON.stringify(postData)
+                });
+            const data = await response.json();
+            console.log(data);
+    }
+    );
+
+  return (
+    <div className="mt-12 mb-8 flex flex-col gap-12">
+        <Button className="flex items-center gap-2" variant="outlined" size="md" color="green" onClick={(e)=>refreshData()}>Refresh
+         <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={2}
+          stroke="currentColor"
+          className="h-5 w-5"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+          />
+        </svg>
+       </Button>
+       <Card>
+        <CardHeader variant="gradient" color="gray" className="mb-8 p-6">
+          <Typography variant="h6" color="white">
+            Stations Table
+          </Typography>
+        </CardHeader>
+        <CardBody className="overflow-x-scroll px-0 pt-0 pb-2">
+          <table className="w-full min-w-[640px] table-auto">
+            <thead>
+              <tr>
+                {["Plant Name", "Code", "Address", "longitude", "latitude", "Capacity","Grid Date",""].map(
+                  (el) => (
+                    <th
+                      key={el}
+                      className="border-b border-blue-gray-50 py-3 px-5 text-left"
+                    >
+                      <Typography
+                        variant="small"
+                        className="text-[11px] font-bold uppercase text-blue-gray-400"
+                      >
+                        {el}
+                      </Typography>
+                    </th>
+                  )
+                )}
+              </tr>
+            </thead>
+            <tbody>
+              {stationsTableData.map(
+                ({ plantName, plantCode, plantAddress, longitude, latitude, capacity, gridConnectionDate }, key) => {
+                  const className = `py-3 px-5 ${
+                    key === stationsTableData.length - 1
+                      ? ""
+                      : "border-b border-blue-gray-50"
+                  }`;
+
+                  return (
+                    <tr key={plantName}>
+                      <td className={className}>
+                        <div className="flex items-center gap-4">
+                          <Avatar src="/img/factory-svgrepo-com.svg" alt={plantName} size="sm" />
+                          <Typography
+                            variant="small"
+                            color="blue-gray"
+                            className="font-bold"
+                          >
+                            {plantName}
+                          </Typography>
+                        </div>
+                      </td>
+                      <td className={className}>
+                        <Typography
+                          variant="small"
+                          className="text-xs font-medium text-blue-gray-600"
+                        >
+                          {plantCode}
+                        </Typography>
+                      </td>
+                      <td className={className}>
+                        <Typography
+                          variant="small"
+                          className="text-xs font-medium text-blue-gray-600"
+                        >
+                          {plantAddress}
+                        </Typography>
+                      </td>
+                      <td className={className}>
+                        <Typography
+                          variant="small"
+                          className="text-xs font-medium text-blue-gray-600"
+                        >
+                          {longitude}
+                        </Typography>
+                      </td>
+                      <td className={className}>
+                        <Typography
+                          variant="small"
+                          className="text-xs font-medium text-blue-gray-600"
+                        >
+                          {latitude}
+                        </Typography>
+                      </td>
+                      <td className={className}>
+                        <Typography
+                          variant="small"
+                          className="text-xs font-medium text-blue-gray-600"
+                        >
+                          {capacity}
+                        </Typography>
+                      </td>
+                      <td className={className}>
+                        <Typography className="text-xs font-semibold text-blue-gray-600">
+                          {gridConnectionDate}
+                        </Typography>
+                      </td>
+                      <td className={className}>
+                        <Typography
+                          as="a"
+                          href="#"
+                          className="text-xs font-semibold text-blue-gray-600"
+                        >
+                          <EllipsisVerticalIcon
+                            strokeWidth={2}
+                            className="h-5 w-5 text-inherit"
+                          />
+                        </Typography>
+                      </td>
+                    </tr>
+                  );
+                }
+              )}
+            </tbody>
+          </table>
+        </CardBody>
+      </Card>
+      <Pagination></Pagination>
+    </div>
+  );
+}
+
+export default Fetch;

src/pages/dashboard/index.js

@@ -1,4 +1,5 @@
 export * from "@/pages/dashboard/home";
 export * from "@/pages/dashboard/profile";
 export * from "@/pages/dashboard/tables";
+export * from "@/pages/dashboard/fetch";
 export * from "@/pages/dashboard/notifications";