Skip to content

us-833-currentbills #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
centric-ankush wants to merge 1 commit into
base: main
Choose a base branch
from
Open

us-833-currentbills #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 8 additions & 14 deletions webapp/app/[lang]/dashboard/billing/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import CurrentBill from "@/app/components/dashboard/currentBill";
import billingHistoryAPI from "@/app/apis/dummyMonthlyBillHistory";
import MonthlyBillingHistory from "@/app/components/billing/MonthlyBillingHistory";
import { getDictionary } from "@/get-dictionary";
import { Locale } from "@/i18n-config";
import { Metadata } from "next";
import dummyBillApi from "../../../apis/dummyBillApi";
import BillingSummaryPage from "@/app/components/billiing/billingSummaryPage";
import billingHistoryAPI from "@/app/apis/dummyMonthlyBillHistory";

export const metadata: Metadata = {
title: "Billing",
Expand All @@ -18,18 +17,13 @@ export default async function BillingPage({
const customerBill = dummyBillApi.getBill(123);
const billHistoryData = billingHistoryAPI.getBillingHistory();

const dictionary = await getDictionary(lang);

const dictionary = await getDictionary(lang);
return (
<div className="w-full flex flex-col">
<h1 className="my-6 text-4xl font-poppins font-bold">Pay My Bill</h1>
<div className="flex w-full gap-6">
<CurrentBill dictionary={dictionary} billDetails={customerBill} />
<MonthlyBillingHistory
dictionary={dictionary}
billHistoryData={billHistoryData}
/>
</div>
</div>
<>
{customerBill && (
<BillingSummaryPage dictionary={dictionary} billDetails={customerBill} billHistoryData={billHistoryData} />
)}
</>
);
}
86 changes: 84 additions & 2 deletions webapp/app/apis/dummyBillApi/bill.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,95 @@
"dueDate": "04/30/2025",
"dueAmount": "$50",
"fromDate": "03/01/2025",
"toDate": "03/31/2025"
"toDate": "03/31/2025",
"subTotal": "$45",
"billCharges": {
"Basic Service Charge": {
"units": "1",
"charge": "10"
},
"Energy Charge Winter": {
"units": "1",
"charge": "10"
},
"Fuel Cost Charge": {
"units": "1",
"charge": "10"
},
"Sales True up": {
"units": "1",
"charge": "10"
}
},
"billTaxes": {
"City Fees": {
"units": "1",
"charge": "10"
},
"Transit Improvement Tax": {
"units": "1",
"charge": "10"
},
"City Tax": {
"units": "1",
"charge": "10"
},
"County Tax": {
"units": "1",
"charge": "10"
},
"State Tax": {
"units": "1",
"charge": "10"
}
}
},
{
"customerId": 345,
"dueDate": "05/30/2025",
"dueAmount": "$30",
"fromDate": "04/01/2025",
"toDate": "04/31/2025"
"toDate": "04/31/2025",
"subTotal": "$25",
"billDetails": {
"Basic Service Charge": {
"units": "1",
"charge": "10"
},
"Energy Charge Winter": {
"units": "1",
"charge": "10"
},
"Fuel Cost Charge": {
"units": "1",
"charge": "10"
},
"Sales True up": {
"units": "1",
"charge": "10"
}
},
"billTaxes": {
"City Fees": {
"units": "1",
"charge": "10"
},
"Transit Improvement Tax": {
"units": "1",
"charge": "10"
},
"City Tax": {
"units": "1",
"charge": "10"
},
"County Tax": {
"units": "1",
"charge": "10"
},
"State Tax": {
"units": "1",
"charge": "10"
}
}
}
]
52 changes: 52 additions & 0 deletions webapp/app/components/billiing/billingSummaryPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
"use client";
import { BillDetails, DictionaryType } from "@/types";
import CurrentBill from "../dashboard/currentBill";
import BillingSummary from "../dashboard/billingSummary";
import { useState } from "react";
import MonthlyBillingHistory from "../billing/MonthlyBillingHistory";

const BillingSummaryPage = ({
dictionary,
billDetails,
billHistoryData,
}: {
dictionary: DictionaryType;
billDetails: BillDetails;
billHistoryData: any;
}) => {
const [showBillDetails, setShowBillDetails] = useState(false);

return (
<>
<h1 className="text-3xl font-poppins font-bold text-black mb-[24px] mt-[24px] ">
{showBillDetails
? dictionary.billings.billingDetails
: dictionary.billings.payMyBills}
</h1>
<div className="flex flex-row w-full justify-between">
{billDetails && (
<>
<CurrentBill
dictionary={dictionary}
billDetails={billDetails}
setShowBillDetails={setShowBillDetails}
/>
{showBillDetails ? (
<BillingSummary
dictionary={dictionary}
billDetails={billDetails}
/>
) : (
<MonthlyBillingHistory
billHistoryData={billHistoryData}
dictionary={dictionary}
/>
)}
</>
)}
</div>
</>
);
};

export default BillingSummaryPage;
95 changes: 95 additions & 0 deletions webapp/app/components/dashboard/billingSummary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
import { BillDetails, DictionaryType } from "@/types";




const TableView = ({
data,
}: {
data: Record<string, { units: string; charge: string }>;
}) => {
return Object.keys(data)?.map((item, index) => {
const unit = data[item]?.units;
const charge = data[item]?.charge;
return (
<div
key={index}
className="flex flex-wrap w-full justify-between mt-[16px]"
>
<div className="flex-1 ">
<div className="font-sans font-normal text-base">{item}</div>
</div>
<div className="flex-1 ">
<div className="font-sans font-normal text-base">{unit}</div>
</div>
<div className="flex-1 ">
<div className="font-sans font-normal text-base">{charge}</div>
</div>
</div>
);
});
};

const BillingSummary = ({
dictionary,
billDetails,
}: {
dictionary: DictionaryType;
billDetails: BillDetails;
}) => {
const { fromDate, toDate } = billDetails;
return (
<div className="w-[49%] p-[24px] bg-white">
<h1 className="text-2xl leading-9 font-poppins font-bold text-black tracking-[1px]">
{dictionary.billings.summary}
</h1>
<div className="w-12 h-1 bg-[#FDB825] mt-2 mb-[24px]" />
<p className="font-normal text-black text-lg leading-[28.8px] font-sans">
{`${dictionary.billings.utility_service} ${fromDate} - ${toDate}`}
</p>
{billDetails?.billCharges && (
<>
<div className="flex flex-wrap w-full justify-between mt-[16px]">
<div className="flex-1 ">
<div className="font-sans font-bold">Description</div>
</div>
<div className="flex-1 ">
<div className="font-sans font-bold">Units</div>
</div>
<div className="flex-1 ">
<div className="font-sans font-bold">Charge</div>
</div>
</div>
<TableView data={billDetails?.billCharges} />
</>
)}
<div className="flex flex-wrap w-full justify-between mt-[16px]">
<div className="flex-1 ">
<div className="font-sans font-bold">SubTotal</div>
</div>
<div className="flex-1 ">
<div className="font-sans font-bold"></div>
</div>
<div className="flex-1 ">
<div className="font-sans font-bold">{billDetails?.subTotal}</div>
</div>
</div>
<div className="border-b-2 border-black mt-[16px]"></div>
{billDetails?.billTaxes && <TableView data={billDetails?.billTaxes} />}
<div className="border-b-2 border-black mt-[16px]"></div>
<div className="flex flex-wrap w-full justify-between mt-[16px]">
<div className="flex-1 ">
<div className="font-sans font-bold">Total</div>
</div>
<div className="flex-1 ">
<div className="font-sans font-bold"></div>
</div>
<div className="flex-1 ">
<div className="font-sans font-bold">{billDetails?.dueAmount}</div>
</div>
</div>
</div>
);
};

export default BillingSummary;
21 changes: 8 additions & 13 deletions webapp/app/components/dashboard/currentBill.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,22 @@
import { Button } from "@/components/ui/button";
import { DictionaryType } from "@/types";

class BillDetails {
customerId:number =1;
fromDate: string = "03/01/2025";
toDate: string = "03/31/2025";
dueDate: string = "03/30/2025";
dueAmount: string = "$50";
}
import { BillDetails, DictionaryType } from "@/types";

const CurrentBill = ({
dictionary,
billDetails = new BillDetails(),
billDetails,
setShowBillDetails,
}: {
dictionary: DictionaryType;
billDetails?: BillDetails;
billDetails: BillDetails;
setShowBillDetails?: (showBillDetails: boolean) => void;
}) => {
const { fromDate, toDate, dueDate, dueAmount } = billDetails;
return (
<div className="w-[49%] p-[24px] bg-white">
<h1 className="text-2xl leading-9 font-poppins font-bold text-black tracking-[1px] mb-[24px]">
<h1 className="text-2xl leading-9 font-poppins font-bold text-black tracking-[1px] ">
{dictionary.billings.current_bill}
</h1>
<div className="w-12 h-1 bg-[#FDB825] mt-2 mb-[24px]" />
<p className="font-normal text-black text-lg leading-[28.8px] font-sans">
{`${dictionary.billings.utility_service} ${fromDate} - ${toDate}`}
</p>
Expand All @@ -42,7 +37,7 @@ const CurrentBill = ({
<div className="flex w-full justify-between mt-[16px]">
<Button
type="button"
// onClick={() => {}}
onClick={() => { setShowBillDetails?.(true); }}
className="mt-6 w-5/12 uppercase font-bold text-base tracking-[0.5px] disabled:bg-[#D6CCF1] disabled:opacity-100"
variant={"outline"}
>
Expand Down
5 changes: 4 additions & 1 deletion webapp/dictionaries/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,9 @@
"monthly_billing_history": "Monthly Billing History",
"year_by_year_comparison": "Year by Year Comparison",
"monthly_service_cost_in_dollars": "Monthly Service Cost in dollars",
"month": "Month"
"month": "Month",
"summary":"Summary",
"billingDetails":"Billing Details",
"payMyBills":"Pay My Bills"
}
}
5 changes: 4 additions & 1 deletion webapp/dictionaries/es.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,9 @@
"monthly_billing_history": "Historial de facturación mensual",
"year_by_year_comparison": "Comparación año por año",
"monthly_service_cost_in_dollars": "Costo del servicio mensual en dólares",
"month": "Mes"
"month": "Mes",
"summary": "resumen",
"billingDetails": "Detalles de facturación",
"payMyBills": "Pagar mis facturas"
}
}
11 changes: 11 additions & 0 deletions webapp/types/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,14 @@
import { type getDictionary } from "@/get-dictionary";

export type DictionaryType = Awaited<ReturnType<typeof getDictionary>>;

export type BillDetails = {
customerId: number;
fromDate: string;
toDate: string;
dueDate: string;
dueAmount: string;
billCharges?: Record<string, { units: string; charge: string }>;
billTaxes?: Record<string, { units: string; charge: string }>;
subTotal: string;
};
Loading