diff --git a/apps/www/src/app/(dashboard)/dashboard/banking/page.tsx b/apps/www/src/app/(dashboard)/dashboard/banking/page.tsx
index 6421cbd1..a97f35fe 100644
--- a/apps/www/src/app/(dashboard)/dashboard/banking/page.tsx
+++ b/apps/www/src/app/(dashboard)/dashboard/banking/page.tsx
@@ -10,6 +10,7 @@ import { AreaChartBanking } from "@/components/charts/AreaChart";
import { OverallUseageChart } from "@/components/charts/OverallUseageChart";
import { DashboardHeader } from "@/components/dashboard/header";
import { DashboardShell } from "@/components/dashboard/shell";
+import { CSVUploader } from "@/components/import/CsvImporter";
import { EmptyPlaceholder } from "@/components/shared/empty-placeholder";
export const metadata = {
diff --git a/apps/www/src/components/import/CsvImporter.tsx b/apps/www/src/components/import/CsvImporter.tsx
new file mode 100644
index 00000000..387195d0
--- /dev/null
+++ b/apps/www/src/components/import/CsvImporter.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import * as React from "react";
+
+import { Button } from "@dingify/ui/components/button";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "@dingify/ui/components/dialog";
+
+import { cn } from "@/lib/utils";
+
+import CSVParser from "./generic-csv-parser";
+
+export function CSVUploader({ bankAccountId }: { bankAccountId: string }) {
+ const handleTestFileImport = () => {
+ // Create a link element
+ const link = document.createElement("a");
+ // Set the URL to the test file
+ link.href = "/testing.csv";
+ // Set the download attribute to trigger download
+ link.download = "testing.csv";
+ // Append link to the body
+ document.body.appendChild(link);
+ // Trigger click event on the link
+ link.click();
+ // Remove link from body
+ document.body.removeChild(link);
+ };
+
+ return (
+
+
+ Import File
+
+
+
+ Import File
+
+ Export transactions data as a file from bank's website.
+
+
+
+ Download Test File
+
+
+
+ );
+}
+
+function UploadForm({
+ className,
+ bankAccountId,
+}: {
+ className?: string;
+ bankAccountId: string;
+}) {
+ return (
+
+
+ );
+}
diff --git a/apps/www/src/components/import/generic-csv-parser.tsx b/apps/www/src/components/import/generic-csv-parser.tsx
new file mode 100644
index 00000000..1054b365
--- /dev/null
+++ b/apps/www/src/components/import/generic-csv-parser.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+// theme CSS for React CSV Importer
+import "react-csv-importer/dist/index.css";
+
+import React, { use, useCallback } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { importTransactions } from "@/actions/import-transactions"; // Import your server action
+import { Importer, ImporterField } from "react-csv-importer";
+import { toast } from "sonner";
+
+export default function CSVParser({
+ bankAccountId,
+}: {
+ bankAccountId: string;
+}) {
+ const router = useRouter();
+ const searchParams = useSearchParams();
+
+ const createQueryString = useCallback(
+ (name: string, value: string) => {
+ const params = new URLSearchParams(searchParams.toString());
+ params.set(name, value);
+
+ return params.toString();
+ },
+ [searchParams],
+ );
+
+ const handleData = async (rows) => {
+ // Import transactions using the server action
+ const result = await importTransactions(bankAccountId, rows);
+ if (result.success) {
+ toast.success("File imported with success!");
+ } else {
+ toast.error(`Failed to import transactions: ${result.error}`);
+ }
+ };
+
+ return (
+
+ {
+ console.log("starting import of file", file, "with fields", fields);
+ }}
+ onComplete={({ file, fields }) => {
+ console.log("finished import of file", file, "with fields", fields);
+ }}
+ onClose={() => {
+ router.push(`/dashboard/banking/${bankAccountId}`);
+ }}
+ >
+
+
+ );
+}
diff --git a/apps/www/src/components/layout/sign-in-modal.tsx b/apps/www/src/components/layout/sign-in-modal.tsx
index 4fa8aff8..a3f1add9 100644
--- a/apps/www/src/components/layout/sign-in-modal.tsx
+++ b/apps/www/src/components/layout/sign-in-modal.tsx
@@ -23,7 +23,7 @@ export const SignInModal = () => {
Sign In
- Join our community and unlock the full potential of Dingify. Sign in
+ Join our community and unlock the full potential of Badget. Sign in
effortlessly with Google to start managing your alerts.