Aastu.web.g2.mahfouz.cards backend

web/AASTU-web-group-2/a2sv-banking-system/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

web/AASTU-web-group-2/a2sv-banking-system/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

web/AASTU-web-group-2/a2sv-banking-system/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

web/AASTU-web-group-2/a2sv-banking-system/app/accounts/components/BarChartForAccounts.tsx

@@ -0,0 +1,83 @@
+"use client";
+import { Bar, BarChart, CartesianGrid, Legend, XAxis } from "recharts";
+
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+const chartData = [
+  { day: "Monday", debit: 186, credit: 80 },
+  { day: "Tuesday", debit: 305, credit: 200 },
+  { day: "Wednesday", debit: 237, credit: 120 },
+  { day: "Thursday", debit: 73, credit: 190 },
+  { day: "Friday", debit: 209, credit: 130 },
+  { day: "Saturday", debit: 214, credit: 140 },
+  { day: "Sunday", debit: 214, credit: 140 },
+];
+
+const chartConfig = {
+  debit: {
+    label: "Debit",
+    color: "#1814F3", // Debit color
+  },
+  credit: {
+    label: "Credit",
+    color: "#FC7900", // Credit color
+  },
+} satisfies ChartConfig;
+
+const CustomLegend = (props: any) => {
+  const { payload } = props;
+
+  return (
+    <ul className="flex justify-center gap-4">
+      {payload.map((entry: any, index: number) => (
+        <li key={`item-${index}`} className="flex items-center gap-2">
+          <div
+            style={{ backgroundColor: entry.color }}
+            className="w-4 h-4 rounded-sm"
+          />
+          <span className="text-sm font-medium text-[#718EBF]">
+            {entry.value.charAt(0).toUpperCase() + entry.value.slice(1)}
+          </span>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export default function BarChartForAccounts() {
+  return (
+    <Card>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <Legend
+              verticalAlign="top"
+              align="center"
+              wrapperStyle={{ paddingBottom: "20px" }}
+              content={<CustomLegend />}
+            />
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="day"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="dashed" />}
+            />
+            <Bar dataKey="debit" fill="var(--color-debit)" radius={4} />
+            <Bar dataKey="credit" fill="var(--color-credit)" radius={4} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}

web/AASTU-web-group-2/a2sv-banking-system/app/accounts/components/ListCard.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { IconType } from "react-icons";
+type DataItem = {
+  heading: string;
+  text: string;
+  headingStyle: string;
+  dataStyle: string;
+};
+
+type Column = {
+  icon: IconType;
+  iconStyle: string;
+  data: DataItem[]; // Updated to an array of DataItem objects
+};
+
+interface Props {
+  column: Column;
+  width: string;
+  darkMode: string
+}
+
+const ListCard = ({ column, width, darkMode }: Props) => {
+  return (
+    <div
+      className={`flex gap-3 items-center rounded-2xl px-5 py-4 bg-white ${width} dark:bg-[#020817] ${darkMode}`}
+    >
+      <div className={`text-3xl px-2 py-2 rounded-full ${column.iconStyle}`}>
+        <column.icon />
+      </div>
+      <div className="flex justify-between w-full">
+        {column.data.map((item, index) => (
+          <div key={index}>
+            <div className={`${item.headingStyle} dark:text-[#9faaeb]`}>{item.heading}</div>
+            <div className={item.dataStyle}>{item.text}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const ListCardLoading = () => {
+  return (
+    <div className="flex gap-3 items-center rounded-2xl px-5 py-4 bg-white dark:bg-[#020817] w-[48%] md:w-[23%] animate-pulse">
+      <div className="text-3xl px-2 py-2 rounded-xl bg-gray-200 dark:bg-[#333B69]">
+        <div className="w-8 h-8 bg-gray-300 dark:bg-[#555B85] rounded-full"></div>
+      </div>
+      <div className="flex justify-between w-full flex-col">
+        <div>
+          <div className="h-4 bg-gray-300 dark:bg-[#555B85] rounded w-full mb-2"></div>
+          <div className="h-4 bg-gray-300 dark:bg-[#555B85] rounded w-full"></div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ListCard;

web/AASTU-web-group-2/a2sv-banking-system/app/accounts/components/Loading.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { ListCardLoading } from "./ListCard";
+const Loading = () => {
+  return (
+    <>
+      <div className="flex flex-col h-full bg-[#F5F7FA] px-3 py-3 gap-5">
+        <div className="flex flex-wrap gap-2">
+          <ListCardLoading></ListCardLoading>
+          <ListCardLoading></ListCardLoading>
+          <ListCardLoading></ListCardLoading>
+          <ListCardLoading></ListCardLoading>
+        </div>
+
+        <div className="flex flex-col md:flex-row gap-5">
+          <div className="flex flex-col gap-5 md:w-1/2">
+            <span className="text-xl bg-gray-300 font-semibold w-24 h-5 rounded-lg"></span>
+            <div className="bg-white flex flex-col justify-between rounded-2xl animate-pulse p-4">
+              <div className="w-full h-10 bg-gray-200 rounded mb-4"></div>
+              <div className="w-full h-10 bg-gray-200 rounded mb-4"></div>
+              <div className="w-full h-10 bg-gray-200 rounded mb-4"></div>
+              <div className="w-full h-10 bg-gray-200 rounded"></div>
+            </div>
+          </div>
+
+          <div className="md:w-1/2 gap-1 flex flex-col">
+            <div className="flex justify-between mr-2">
+              <span className="text-xl bg-gray-300 font-semibold w-24 h-5 rounded-lg"></span>
+              <span className="text-xl bg-gray-300 font-semibold w-10 h-5 rounded-lg"></span>
+            </div>
+            <div className="border rounded-3xl my-4 mx-2 animate-pulse">
+              <div className="relative w-full bg-gradient-to-b from-gray-200 to-gray-300 text-transparent rounded-3xl shadow-md h-[230px] min-w-[350px]">
+                <div className="flex justify-between items-start px-6 pt-6">
+                  <div>
+                    <p className="text-xs font-semibold bg-gray-300 rounded w-16 h-4 mb-2"></p>
+                    <p className="text-xl font-medium bg-gray-300 rounded w-24 h-6"></p>
+                  </div>
+                  <div className="w-8 h-8 bg-gray-300 rounded-full"></div>
+                </div>
+
+                <div className="flex justify-between gap-12 mt-4 px-6">
+                  <div>
+                    <p className="text-xs font-medium bg-gray-300 rounded w-16 h-4 mb-2"></p>
+                    <p className="font-medium text-base bg-gray-300 rounded w-24 h-6"></p>
+                  </div>
+                  <div className="pr-8">
+                    <p className="text-xs font-medium bg-gray-300 rounded w-16 h-4 mb-2"></p>
+                    <p className="font-medium text-base md:text-lg bg-gray-300 rounded w-24 h-6"></p>
+                  </div>
+                </div>
+
+                <div className="relative mt-8 flex justify-between py-4 items-center">
+                  <div className="absolute inset-0 w-full h-full bg-gradient-to-b from-white/20 to-transparent z-0"></div>
+                  <div className="ml-4 relative z-10 text-base font-medium px-6 bg-gray-300 rounded w-40 h-6"></div>
+                  <div className="flex justify-end relative z-10 px-6">
+                    <div className="w-10 h-10 bg-gray-300 rounded-full "></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-col md:flex-row gap-5">
+          <div className="flex flex-col gap-5 md:w-1/2">
+            <span className="text-xl bg-gray-300 font-semibold w-24 h-5 rounded-lg"></span>
+            <div className="w-full h-64 bg-gray-200 rounded-2xl animate-pulse"></div>
+          </div>
+          <div className="flex flex-col gap-5 md:w-1/2">
+            <span className="text-xl bg-gray-300 font-semibold w-24 h-5 rounded-lg"></span>
+            <div className="bg-white flex flex-col justify-between rounded-2xl animate-pulse p-4">
+              <div className="w-full h-10 bg-gray-200 rounded mb-4"></div>
+              <div className="w-full h-10 bg-gray-200 rounded mb-4"></div>
+              <div className="w-full h-10 bg-gray-200 rounded mb-4"></div>
+              <div className="w-full h-10 bg-gray-200 rounded"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Loading;