+
{/* This page will now be rendered on the client-side */}
);
-}
\ No newline at end of file
+}
diff --git a/payment-iq/app/components/AccountIQ/AccountIQ.tsx b/payment-iq/app/features/AccountIQ/AccountIQ.tsx
similarity index 100%
rename from payment-iq/app/components/AccountIQ/AccountIQ.tsx
rename to payment-iq/app/features/AccountIQ/AccountIQ.tsx
diff --git a/payment-iq/app/components/DateRangePicker/DateRangePicker.tsx b/payment-iq/app/features/DateRangePicker/DateRangePicker.tsx
similarity index 100%
rename from payment-iq/app/components/DateRangePicker/DateRangePicker.tsx
rename to payment-iq/app/features/DateRangePicker/DateRangePicker.tsx
diff --git a/payment-iq/app/components/Documentation/Documentation.tsx b/payment-iq/app/features/Documentation/Documentation.tsx
similarity index 100%
rename from payment-iq/app/components/Documentation/Documentation.tsx
rename to payment-iq/app/features/Documentation/Documentation.tsx
diff --git a/payment-iq/app/components/FetchReports/FetchReports.tsx b/payment-iq/app/features/FetchReports/FetchReports.tsx
similarity index 100%
rename from payment-iq/app/components/FetchReports/FetchReports.tsx
rename to payment-iq/app/features/FetchReports/FetchReports.tsx
diff --git a/payment-iq/app/components/GeneralHealthCard/GeneralHealthCard.tsx b/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.tsx
similarity index 93%
rename from payment-iq/app/components/GeneralHealthCard/GeneralHealthCard.tsx
rename to payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.tsx
index fc9a446..df4778c 100644
--- a/payment-iq/app/components/GeneralHealthCard/GeneralHealthCard.tsx
+++ b/payment-iq/app/features/GeneralHealthCard/GeneralHealthCard.tsx
@@ -3,7 +3,6 @@ import MoreVertIcon from "@mui/icons-material/MoreVert";
import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
import { DateRangePicker } from "../DateRangePicker/DateRangePicker";
-// import { ArrowDropUp } from '@mui/icons-material';
const stats = [
{ label: "TOTAL", value: 5, change: "-84.85%" },
@@ -63,8 +62,8 @@ export const GeneralHealthCard = () => {
- {stats.map((item) => (
-
+ {stats.map((item, i) => (
+
))}
diff --git a/payment-iq/app/components/Pages/Approve/Approve.tsx b/payment-iq/app/features/Pages/Approve/Approve.tsx
similarity index 100%
rename from payment-iq/app/components/Pages/Approve/Approve.tsx
rename to payment-iq/app/features/Pages/Approve/Approve.tsx
diff --git a/payment-iq/app/components/pages/DashboardHomePage/DashboardHomePage.tsx b/payment-iq/app/features/Pages/DashboardHomePage/DashboardHomePage.tsx
similarity index 100%
rename from payment-iq/app/components/pages/DashboardHomePage/DashboardHomePage.tsx
rename to payment-iq/app/features/Pages/DashboardHomePage/DashboardHomePage.tsx
diff --git a/payment-iq/app/features/Pages/transactions/Transactions.tsx b/payment-iq/app/features/Pages/transactions/Transactions.tsx
new file mode 100644
index 0000000..58f7deb
--- /dev/null
+++ b/payment-iq/app/features/Pages/transactions/Transactions.tsx
@@ -0,0 +1,131 @@
+"use client";
+import { useState } from "react";
+import {
+ Button,
+ Dialog,
+ DialogTitle,
+ DialogContent,
+ DialogActions,
+ FormControl,
+ Select,
+ MenuItem,
+ FormControlLabel,
+ Checkbox,
+ Stack,
+ Paper,
+ styled,
+ TextField,
+} from "@mui/material";
+import FileUploadIcon from "@mui/icons-material/FileUpload";
+import * as XLSX from "xlsx";
+import { saveAs } from "file-saver";
+import { DataGrid } from "@mui/x-data-grid";
+import { columns } from "./constants";
+import { rows } from "./mockData";
+
+const paginationModel = { page: 0, pageSize: 50 };
+
+export default function TransactionTable() {
+ const [open, setOpen] = useState(false);
+ const [fileType, setFileType] = useState<"csv" | "xls" | "xlsx">("csv");
+ const [onlyCurrentTable, setOnlyCurrentTable] = useState(false);
+
+ const handleExport = () => {
+ const exportRows = onlyCurrentTable ? rows.slice(0, 5) : rows;
+ const exportData = [
+ columns.map((col) => col.headerName),
+ // @ts-expect-error - Dynamic field access from DataGrid columns
+ ...exportRows.map((row) => columns.map((col) => row[col.field] ?? "")),
+ ];
+
+ const worksheet = XLSX.utils.aoa_to_sheet(exportData);
+ const workbook = XLSX.utils.book_new();
+ XLSX.utils.book_append_sheet(workbook, worksheet, "Transactions");
+
+ if (fileType === "csv") {
+ const csv = XLSX.utils.sheet_to_csv(worksheet);
+ const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+ saveAs(blob, "transactions.csv");
+ } else {
+ XLSX.writeFile(workbook, `transactions.${fileType}`, {
+ bookType: fileType,
+ });
+ }
+
+ setOpen(false);
+ };
+
+ return (
+
+
+ console.log(`setSearchQuery(${e.target.value})`)}
+ sx={{ width: 300 }}
+ />
+ }
+ onClick={() => setOpen(true)}
+ >
+ Export
+
+
+
+
+
+ {/* Export Dialog */}
+
+
+ );
+}
+
+const StyledPaper = styled(Paper)(() => ({
+ height: "90vh",
+}));
diff --git a/payment-iq/app/components/pages/transactions/constants.ts b/payment-iq/app/features/Pages/transactions/constants.ts
similarity index 100%
rename from payment-iq/app/components/pages/transactions/constants.ts
rename to payment-iq/app/features/Pages/transactions/constants.ts
diff --git a/payment-iq/app/components/pages/transactions/mockData.ts b/payment-iq/app/features/Pages/transactions/mockData.ts
similarity index 100%
rename from payment-iq/app/components/pages/transactions/mockData.ts
rename to payment-iq/app/features/Pages/transactions/mockData.ts
diff --git a/payment-iq/app/components/PieCharts/PieCharts.tsx b/payment-iq/app/features/PieCharts/PieCharts.tsx
similarity index 100%
rename from payment-iq/app/components/PieCharts/PieCharts.tsx
rename to payment-iq/app/features/PieCharts/PieCharts.tsx
diff --git a/payment-iq/app/components/SectionCard/SectionCard.tsx b/payment-iq/app/features/SectionCard/SectionCard.tsx
similarity index 95%
rename from payment-iq/app/components/SectionCard/SectionCard.tsx
rename to payment-iq/app/features/SectionCard/SectionCard.tsx
index 7e08dda..add14c1 100644
--- a/payment-iq/app/components/SectionCard/SectionCard.tsx
+++ b/payment-iq/app/features/SectionCard/SectionCard.tsx
@@ -35,7 +35,7 @@ export const SectionCard = ({ title, icon, items }: ISectionCardProps) => (
{items.map((item, index) => (
-
+
{
- {data1.map((row) => (
-
+ {data1.map((row, i) => (
+
{
- {transactions.map((tx) => (
-
+ {transactions.map((tx, i) => (
+
{tx.id}
{tx.user}
{tx.created}
diff --git a/payment-iq/app/components/WhatsNew/WhatsNew.tsx b/payment-iq/app/features/WhatsNew/WhatsNew.tsx
similarity index 100%
rename from payment-iq/app/components/WhatsNew/WhatsNew.tsx
rename to payment-iq/app/features/WhatsNew/WhatsNew.tsx
diff --git a/payment-iq/app/components/dashboard/header/Header.tsx b/payment-iq/app/features/dashboard/header/Header.tsx
similarity index 68%
rename from payment-iq/app/components/dashboard/header/Header.tsx
rename to payment-iq/app/features/dashboard/header/Header.tsx
index 875a926..6c40362 100644
--- a/payment-iq/app/components/dashboard/header/Header.tsx
+++ b/payment-iq/app/features/dashboard/header/Header.tsx
@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
-import { AppBar, Toolbar, IconButton, Menu, MenuItem, Button } from '@mui/material';
-import MenuIcon from '@mui/icons-material/Menu';
-import Dropdown from './DropDown';
+import React, { useState } from "react";
+import { AppBar, Toolbar, IconButton, Menu, MenuItem } from "@mui/material";
+import MenuIcon from "@mui/icons-material/Menu";
+import Dropdown from "./dropDown/DropDown";
const Header = () => {
const [anchorEl, setAnchorEl] = useState(null);
@@ -16,11 +16,15 @@ const Header = () => {
setAnchorEl(null);
};
- const handleChange = (e:any) => {
- };
+ const handleChange = (e: any) => {};
return (
-
+
{/* Burger Menu */}
@@ -28,7 +32,7 @@ const Header = () => {
{/* Dropdown Button */}
-
+
{/* Dropdown Menu */}