created new assets page as intended for lfx assignment

package.json

@@ -15,6 +15,8 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.28.6",
+    "@carbon/react": "^1.100.0",
+    "@carbon/styles": "^1.99.0",
     "@date-io/core": "^3.2.0",
     "@date-io/date-fns": "^3.2.1",
     "@emotion/react": "^11.14.0",

src/app.js

@@ -1,5 +1,6 @@
 import { createRoot } from "react-dom/client";
 import Routes from "./route";
+import "@carbon/styles/css/styles.css";
 
 const root = createRoot(document.getElementById("app"));
 root.render(<Routes />);

src/components/AssetsCosts/Charts/assetByTypeTabs.js

@@ -0,0 +1,53 @@
+import { Tabs, TabList, Tab, TabPanels, TabPanel } from "@carbon/react";
+
+function AssetsByTypeTabs({ data, aggregationOptions }) {
+  if (!Array.isArray(data) || data.length === 0) {
+    return null;
+  }
+function formatDate(iso) {
+  if (!iso) return "-";
+  return iso.split("T")[0]; // YYYY-MM-DD
+    }
+    function filterByType(data, type) {
+  if (!Array.isArray(data)) return [];
+
+  return data.filter(item => item.type?.toLowerCase() === type);
+}
+  return (
+    <Tabs>
+      <TabList aria-label="Asset types">
+        {aggregationOptions.map(opt => (
+          <Tab key={opt.value}>{opt.name}</Tab>
+        ))}
+      </TabList>
+
+      <TabPanels>
+        {aggregationOptions.map(opt => {
+          const items = filterByType(data, opt.value);
+
+          return (
+            <TabPanel key={opt.value}>
+              {items.length === 0 ? (
+                <p style={{ marginTop: 16, color: "#6f6f6f" }}>
+                  No {opt.name} assets for selected window
+                </p>
+              ) : (
+                <ul style={{ marginTop: 16 }}>
+                  {items.map((item, idx) => (
+                    <li key={idx} style={{ marginBottom: 8 }}>
+                      <strong>{item.properties?.name || "Unnamed asset"}</strong>
+                      {" — "}
+                      {formatDate(item.start)}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </TabPanel>
+          );
+        })}
+      </TabPanels>
+    </Tabs>
+  );
+}
+
+export default AssetsByTypeTabs;

src/components/AssetsCosts/Charts/assetsTable.js

@@ -0,0 +1,108 @@
+import {
+  DataTable,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+  Pagination,
+} from "@carbon/react";
+
+function AssetsCostsTable({ rows }) {
+
+  // Column definitions
+  const headers = [
+     { key: "date", header: "Date" },
+  { key: "type", header: "Type" },
+  { key: "category", header: "Category" },
+  { key: "name", header: "Name" },
+  { key: "service", header: "Service" },
+  { key: "provider", header: "Provider" },
+  { key: "totalCost", header: "Total Cost ($)" },
+  ];
+
+  return (
+    <DataTable
+      rows={rows}
+      headers={headers}
+      isSortable
+    >
+      {({
+        rows,
+        headers,
+        getHeaderProps,
+        getRowProps,
+        getTableProps,
+        onInputChange,
+      }) => (
+
+        <TableContainer title="Asset Cost Breakdown">
+
+          {/* Search Bar */}
+          <TableToolbar>
+            <TableToolbarContent>
+              <TableToolbarSearch
+                onChange={onInputChange}
+              />
+            </TableToolbarContent>
+          </TableToolbar>
+
+          {/* Table */}
+          <Table {...getTableProps()}>
+
+            <TableHead>
+              <TableRow>
+               {headers.map(header => {
+  const { key, ...rest } = getHeaderProps({ header });
+
+  return (
+    <TableHeader
+      key={key}     // ✅ direct
+      {...rest}     // ✅ no key inside spread
+    >
+      {header.header}
+    </TableHeader>
+  );
+})}
+              </TableRow>
+            </TableHead>
+
+            <TableBody>
+  {rows.map(row => {
+    const { key, ...rest } = getRowProps({ row });
+
+    return (
+      <TableRow key={key} {...rest}>
+
+        {row.cells.map(cell => (
+          <TableCell key={cell.id}>
+            {cell.value}
+          </TableCell>
+        ))}
+
+      </TableRow>
+    );
+  })}
+</TableBody>
+
+
+          </Table>
+
+          {/* Pagination */}
+          <Pagination
+            pageSizes={[10, 20, 50]}
+            totalItems={rows.length}
+          />
+
+        </TableContainer>
+      )}
+    </DataTable>
+  );
+}
+
+export default AssetsCostsTable;

src/components/AssetsCosts/Charts/main.js

@@ -0,0 +1,187 @@
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  Tooltip,
+  CartesianGrid,
+  ResponsiveContainer,
+} from "recharts";
+import React, { useEffect, useMemo, useState } from "react";
+import PieChartMain from "./pieChart-part1";
+import PieChartMain2 from "./pieChart-part2";
+import { Button } from "@carbon/react";
+import AssetsCostsTable from "./assetsTable";
+import { Padding } from "@mui/icons-material";
+import AssetsByTypeTabs from "./assetByTypeTabs"
+//based on what you want to group
+const aggregationOptions = [
+  { name: "Cloud", value: "cloud" },
+  { name: "Disk", value: "disk" },
+  { name: "Loadbalancer", value: "loadbalancer" },
+  { name: "Network", value: "network" },
+  { name: "Node", value: "node" },
+  { name: "Shared", value: "shared" },
+  { name: "ClusterManagement", value: "clustermanagement" },
+];
+
+
+//tables built using the carbon-react needs this format of data
+function buildTableRows(data) {
+  if (!Array.isArray(data)) return [];
+
+  return data.map((item, index) => ({
+    id: String(index), // required by Carbon
+
+    date: item.start
+      ? item.start.split("T")[0]
+      : "-",
+
+    type: item.type || "-",
+
+    category:
+      item.properties?.category || "-",
+
+    name:
+      item.properties?.name ||
+      item.properties?.providerID ||
+      "Unknown",
+
+    service:
+      item.properties?.service || "-",
+
+    provider:
+      item.properties?.provider || "-",
+
+    totalCost: item.totalCost
+      ? item.totalCost.toFixed(4)
+      : "0.0000",
+  }));
+}
+
+
+function ChartsMain({ finalData }) {
+  const [selectedDate, setSelectedDate] = React.useState(null);
+  const [selectedType, setSelectedType] = React.useState(null);
+    if (!Array.isArray(finalData)) {
+        console.log("data should be in the format of arrays for charts")
+    }
+    //1.convert our data into the chart format
+    var arr = finalData
+     function aggregateByDate(data) {
+  const map = {};
+
+  data.forEach(item => {
+    const date = item.start?.split("T")[0];
+    const cost = item.totalCost || 0;
+
+    if (!date) return;
+
+    if (!map[date]) {
+      map[date] = 0;
+    }
+
+    map[date] += cost;
+  });
+
+  // Convert to array
+  return Object.entries(map).map(([date, cost]) => ({
+    date,
+    cost: Number(cost.toFixed(4)), // clean decimals
+  }));
+}
+    const chartData = aggregateByDate(arr)
+    const sortedChartsData = chartData.sort(
+  (a, b) => new Date(a.date) - new Date(b.date)
+  );
+
+
+  const tableRows = buildTableRows(finalData);
+
+   useEffect(() => {
+  if (sortedChartsData.length > 0 && !selectedDate) {
+    setSelectedDate(sortedChartsData[0].date);
+  }
+}, [sortedChartsData]);
+
+    // console.log("Selected Day:", selectedDate);
+
+  return (
+      <>
+       <div style={{ width: "100%", height: 350 , background: 'var(--cds-layer-01)',
+    padding: '12px',
+    borderRadius: '8px',}}>
+           <p style={{ textAlign: "center", marginBottom: 8 }}>
+     Click  points(dates) on the line chart to view the cost breakdown
+  </p>
+      <ResponsiveContainer>
+
+                <LineChart data={sortedChartsData}
+                 onClick={(e) => {
+    if (e && e.activeLabel) {
+      setSelectedDate(e.activeLabel);
+    }
+  }}>
+
+          <CartesianGrid strokeDasharray="3 3" />
+
+          <XAxis dataKey="date" />
+
+          <YAxis />
+
+          <Tooltip />
+
+          <Line
+            type="monotone"
+            dataKey="cost"
+            stroke="#1976d2"
+            strokeWidth={2}
+            dot={{ r: 3 }}
+
+          />
+
+        </LineChart>
+
+      </ResponsiveContainer>
+
+      </div>
+
+       <div
+    style={{
+      display: "flex",
+      gap: "20px",
+      marginTop: "20px",
+    }}
+  >
+    {/* Pie 1 */}
+    <div style={{ flex: 1 }}>
+      <PieChartMain data={finalData} date={selectedDate} onTypeSelect={setSelectedType} />
+    </div>
+
+    {/* Pie 2 */}
+    <div style={{ flex: 1 }}>
+      <PieChartMain2 data={finalData} date={selectedDate}  type={selectedType} />
+    </div>
+      </div>
+      {finalData && finalData.length > 0 && (
+       <div style={{   marginTop: 40,
+    marginBottom: 45,
+    padding: 16,
+    backgroundColor: "#f4f4f4", // Carbon gray-10
+    borderRadius: 4, }}>
+  <AssetsByTypeTabs
+    data={finalData}
+    aggregationOptions={aggregationOptions}
+  />
+</div>
+
+)}
+       {finalData && finalData.length > 0 && (
+        <AssetsCostsTable rows={tableRows} style={{ paddingTop: "20px" }} />
+)}
+
+      </>
+  );
+}
+
+export default ChartsMain