-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #53 from RGarrido03/Costs-page
Costs page
- Loading branch information
Showing
1 changed file
with
163 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,163 @@ | ||
| "use client"; | ||
|
|
||
| import { CustomAreaChart } from "@/components/area-chart"; | ||
| import { TitleCard } from "@/components/title-card"; | ||
| import { | ||
| Card, | ||
| CardContent, | ||
| CardDescription, | ||
| CardHeader, | ||
| CardTitle, | ||
| } from "@/components/ui/card"; | ||
|
|
||
| import { useState, useEffect } from "react"; | ||
| import {MaterialSymbol} from "react-material-symbols"; | ||
| import Link from "next/link"; | ||
| import {Button} from "@/components/ui/button"; | ||
|
|
||
| type CostsProps = { | ||
| electricity : number, | ||
| water : number, | ||
| today : number, | ||
| }[]; | ||
|
|
||
| export default function Costs() { | ||
| const [data, setData] = useState<CostsProps>([]); | ||
|
|
||
| useEffect(() => { | ||
| async function fetchData() { | ||
| const temp = await fetch( | ||
| `http://${process.env.NEXT_PUBLIC_HOST_URL}/service/houses/1/costs`, | ||
| { | ||
| next: { revalidate: 60 }, // Revalidate every 60 seconds | ||
| }, | ||
| ); | ||
| setData(await temp.json()); | ||
| } | ||
|
|
||
| fetchData().catch(console.error); | ||
| const interval = setInterval(() => { | ||
| fetchData().catch(console.error); | ||
| }, 5000); | ||
| return () => clearInterval(interval); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <div className="grid grid-flow-row grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"> | ||
| <TitleCard text="Here's your expenses summary" /> | ||
|
|
||
| <Card className="overflow-hidden"> | ||
| <CardHeader> | ||
| <CardTitle> | ||
| Net Expenses | ||
| </CardTitle> | ||
| <CardDescription>Your net expenses after considering earnings from the grid</CardDescription> | ||
| </CardHeader> | ||
| <CardContent> | ||
| <div className="flex flex-row gap-10"> | ||
| <div> | ||
| <p>Today</p> | ||
| <p className="text-3xl font-semibold">{data.length !== 0 ? data[length-1].today : 0} €</p> | ||
| </div> | ||
| <div> | ||
| <p>Yesterday</p> | ||
| <p className="text-3xl">356,48 €</p> | ||
| </div> | ||
| </div> | ||
| </CardContent> | ||
| </Card> | ||
|
|
||
| <Card className="overflow-hidden"> | ||
| <CardHeader> | ||
| <CardTitle> | ||
| Expenses | ||
| </CardTitle> | ||
| <CardDescription>Water and eletricity expenses</CardDescription> | ||
| </CardHeader> | ||
| <CardContent> | ||
| <div className="flex flex-row gap-10"> | ||
| <div> | ||
| <MaterialSymbol icon="water_drop" size={35} className="text-blue-300"></MaterialSymbol> | ||
| <p>Water</p> | ||
| <p className="text-3xl text-blue-400"> {data.length !== 0 ? data[length-1].water : 0} €</p> | ||
| </div> | ||
| <div> | ||
| <MaterialSymbol icon="bolt" size={35} className="text-amber-300"></MaterialSymbol> | ||
| <p>Electricity</p> | ||
| <p className="text-3xl text-amber-300">{data.length !== 0 ? data[length-1].electricity : 0} €</p> | ||
| </div> | ||
| </div> | ||
| </CardContent> | ||
| </Card> | ||
|
|
||
| <Card className="overflow-hidden"> | ||
| <CardHeader> | ||
| <CardTitle> | ||
| Oh snap! These devices are having a power party. | ||
| </CardTitle> | ||
| <CardDescription>Consider adjusting them if needed.</CardDescription> | ||
| </CardHeader> | ||
| <CardContent noPadding> | ||
| <div className="mx-3 mb-2 flex items-center justify-between rounded-card bg-zinc-600 p-4"> | ||
| <div className="flex gap-2"> | ||
| <MaterialSymbol icon="microwave" size={40}></MaterialSymbol> | ||
| <div className="text-xl font-bold"> | ||
| Microwave | ||
| </div> | ||
| </div> | ||
|
|
||
| <Link href="#"> | ||
| <Button className="bg-red-400 p-2 text-black"> | ||
| Stop | ||
| </Button> | ||
| </Link> | ||
|
|
||
| </div> | ||
|
|
||
| <div className="mx-3 mb-2 flex items-center justify-between rounded-card bg-zinc-600 p-4"> | ||
| <div className="flex gap-2"> | ||
| <MaterialSymbol icon="microwave" size={40}></MaterialSymbol> | ||
| <div className="text-xl font-bold"> | ||
| Microwave | ||
| </div> | ||
| </div> | ||
|
|
||
| <Link href="#"> | ||
| <Button className="bg-red-400 p-2 text-black"> | ||
| Stop | ||
| </Button> | ||
| </Link> | ||
|
|
||
| </div> | ||
|
|
||
| </CardContent> | ||
| </Card> | ||
|
|
||
| <Card className="overflow-hidden md:col-span-2 lg:col-span-3"> | ||
| <CardHeader> | ||
| <CardTitle>Expenses by month</CardTitle> | ||
| </CardHeader> | ||
| <CardContent> | ||
| <div className="flex flex-row gap-10"> | ||
| <div className="font-semibold"> | ||
| <p>November</p> | ||
| <p className="text-3xl">{data.length !== 0 ? data[length-1].today : 0} €</p> | ||
| </div> | ||
| <div> | ||
| <p>Outubro</p> | ||
| <p className="text-3xl">{data.length !== 0 ? data[length-1].water : 0} €</p> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <CustomAreaChart | ||
| data={data} | ||
| dataKey="monthExpenses" | ||
| className="fill-blue-600 dark:fill-yellow-600" | ||
| unitOfMeasurement="€" | ||
| /> | ||
| </div> | ||
| </CardContent> | ||
| </Card> | ||
| </div> | ||
| ); | ||
| } |