135 lines
4.7 KiB
TypeScript
135 lines
4.7 KiB
TypeScript
import { StatusBlock } from "@/components/blocks/status-block";
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
|
|
import CardSlider from "./components/card-slider";
|
|
import AmountTransfer from "./components/amount-transfer";
|
|
import TransactionsTable from "./components/transactions";
|
|
import DashboardDropdown from "@/components/dashboard-dropdown";
|
|
import HistoryChart from "./components/history-chart";
|
|
import AccountChart from "./components/account-chart";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
const BankingPage = () => {
|
|
const t = useTranslations("BankingDashboard");
|
|
return (
|
|
<div className="space-y-5">
|
|
<Card>
|
|
<CardContent className=" p-6">
|
|
<div className="grid xl:grid-cols-4 lg:grid-cols-2 md:grid-cols-2 grid-cols-1 gap-5 place-content-center">
|
|
<div className="flex space-x-4 h-full items-center rtl:space-x-reverse">
|
|
<div className="flex-none">
|
|
<Avatar className="h-20 w-20 bg-transparent hover:bg-transparent">
|
|
<AvatarImage src="/images/all-img/main-user.png" />
|
|
<AvatarFallback>SA</AvatarFallback>
|
|
</Avatar>
|
|
</div>
|
|
<div className="flex-1">
|
|
<h4 className="text-xl font-medium mb-2">
|
|
<span className="block font-light text-default-800">
|
|
{t("widget_title")},
|
|
</span>
|
|
<span className="block text-default-900">Mr. Jone Doe</span>
|
|
</h4>
|
|
<p className="text-sm text-default-600">{t("widget_desc")}</p>
|
|
</div>
|
|
</div>
|
|
{/* status blocks */}
|
|
<StatusBlock
|
|
title={t("current_balance")}
|
|
total="$34,564"
|
|
chartType="bar"
|
|
className="bg-default-50 shadow-none border-none"
|
|
opacity={1}
|
|
/>
|
|
<StatusBlock
|
|
title={t("credit")}
|
|
total="$3,564"
|
|
chartColor="#80fac1"
|
|
className="bg-default-50 shadow-none border-none"
|
|
series={[40, 70, 45, 100, 75, 40, 80, 90]}
|
|
chartType="bar"
|
|
opacity={1}
|
|
/>
|
|
<StatusBlock
|
|
title={t("debit")}
|
|
total="$3,564"
|
|
chartColor="#ffbf99"
|
|
className="bg-default-50 shadow-none border-none"
|
|
chartType="bar"
|
|
series={[40, 70, 45, 100, 75, 40, 80, 90]}
|
|
opacity={1}
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<div className="grid grid-cols-12 gap-5">
|
|
<div className="lg:col-span-4 col-span-12 space-y-5">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>{t("my_card")}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="max-w-[90%] mx-auto mt-2">
|
|
<CardSlider />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>{t("quick_transfer")}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<AmountTransfer />
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
<div className="lg:col-span-8 col-span-12 space-y-5">
|
|
<Card>
|
|
<CardContent className="p-0">
|
|
<TransactionsTable />
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="flex-row gap-1">
|
|
<CardTitle className="flex-1">{t("history")}</CardTitle>
|
|
<DashboardDropdown />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<HistoryChart />
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
<div className="grid lg:grid-cols-2 grid-cols-1 gap-5">
|
|
<Card>
|
|
<CardHeader className="flex-row gap-1">
|
|
<CardTitle className="flex-1">{t("account_receivable")}</CardTitle>
|
|
<DashboardDropdown />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<AccountChart />
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="flex-row gap-1">
|
|
<CardTitle className="flex-1">{t("account_payable")}</CardTitle>
|
|
<DashboardDropdown />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<AccountChart
|
|
series={[
|
|
{
|
|
data: [31, 40, 28, 51, 42, 109, 100],
|
|
},
|
|
]}
|
|
chartColor="primary"
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BankingPage;
|