From 2a0f341c39c3321a1cef7efdcf4bf643bd572adc Mon Sep 17 00:00:00 2001
From: "DESKTOP-CI67AM7\\shubh" <shubhamparmar1173@gmail.com>
Date: Fri, 11 Oct 2024 17:01:41 +0530
Subject: [PATCH 1/2] export functionality added

---
 src/components/Friend/Export.tsx  | 119 ++++++++++++++++++++++++++++++
 src/pages/balances/[friendId].tsx |  19 ++++-
 2 files changed, 134 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Friend/Export.tsx

diff --git a/src/components/Friend/Export.tsx b/src/components/Friend/Export.tsx
new file mode 100644
index 0000000..18791aa
--- /dev/null
+++ b/src/components/Friend/Export.tsx
@@ -0,0 +1,119 @@
+import React from 'react';
+import { Button } from '~/components/ui/button';
+import { format } from 'date-fns';
+import { SplitType } from '@prisma/client';
+import { Download } from 'lucide-react';
+import { toUIString } from '~/utils/numbers';
+
+interface ExpenseParticipant {
+  expenseId: string;
+  userId: number;
+  amount: number;
+}
+
+interface Expense {
+  id: string;
+  paidBy: number;
+  addedBy: number;
+  name: string;
+  category: string;
+  amount: number;
+  splitType: SplitType;
+  expenseDate: Date;
+  createdAt: Date;
+  updatedAt: Date;
+  currency: string;
+  fileKey: string | null;
+  groupId: number | null;
+  deletedAt: Date | null;
+  deletedBy: number | null;
+  expenseParticipants: ExpenseParticipant[];
+}
+
+interface ExportCSVProps {
+  expenses: Expense[];
+  fileName: string;
+  currentUserId: number;
+  friendName: string;
+  friendId: string | number;
+  disabled?: boolean;
+}
+
+export const Export: React.FC<ExportCSVProps> = ({
+  expenses,
+  fileName,
+  currentUserId,
+  friendName,
+  friendId,
+  disabled = false,
+}) => {
+  const headers = [
+    'Paid By',
+    'Name',
+    'Category',
+    'Amount',
+    'Split Type',
+    'Expense Date',
+    'Currency',
+    'You Lent',
+    'You Owe',
+    'Settlement',
+  ];
+
+  const exportToCSV = () => {
+    const csvHeaders = headers.join(',');
+    const csvData = expenses.map((expense) => {
+      const youPaid = expense.paidBy === currentUserId;
+      const yourExpense = expense.expenseParticipants.find(
+        (p) => p.userId === (youPaid ? friendId : currentUserId),
+      );
+
+      const isSettlement = expense.splitType === SplitType.SETTLEMENT;
+
+      return [
+        expense.paidBy === currentUserId ? 'You' : friendName,
+        expense.name,
+        expense.category,
+        toUIString(expense?.amount ?? 0),
+        expense.splitType,
+        format(new Date(expense.expenseDate), 'yyyy-MM-dd HH:mm:ss'),
+        expense.currency,
+        youPaid && !isSettlement ? toUIString(yourExpense?.amount ?? 0) : 0,
+        !youPaid && !isSettlement ? toUIString(yourExpense?.amount ?? 0) : 0,
+        isSettlement ? toUIString(yourExpense?.amount ?? 0) : 0,
+      ];
+    });
+
+    const csvContent = [
+      csvHeaders,
+      ...csvData.map((row) =>
+        row
+          .map((cell) => (typeof cell === 'string' && cell.includes(',') ? `"${cell}"` : cell))
+          .join(','),
+      ),
+    ].join('\n');
+
+    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+    const link = document.createElement('a');
+    if (link.download !== undefined) {
+      const url = URL.createObjectURL(blob);
+      link.setAttribute('href', url);
+      link.setAttribute('download', `${fileName}.csv`);
+      link.style.visibility = 'hidden';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    }
+  };
+
+  return (
+    <Button
+      className="bg-transparent hover:bg-transparent"
+      size="sm"
+      onClick={exportToCSV}
+      disabled={disabled}
+    >
+      <Download className="h-4 w-4 text-white" size={20} />
+    </Button>
+  );
+};
diff --git a/src/pages/balances/[friendId].tsx b/src/pages/balances/[friendId].tsx
index 71810bc..bd53a09 100644
--- a/src/pages/balances/[friendId].tsx
+++ b/src/pages/balances/[friendId].tsx
@@ -15,6 +15,7 @@ import { useRouter } from 'next/router';
 import { type NextPageWithUser } from '~/types';
 import { motion } from 'framer-motion';
 import { DeleteFriend } from '~/components/Friend/DeleteFriend';
+import { Export } from '~/components/Friend/Export';
 
 const FriendPage: NextPageWithUser = ({ user }) => {
   const router = useRouter();
@@ -55,10 +56,20 @@ const FriendPage: NextPageWithUser = ({ user }) => {
           </div>
         }
         actions={
-          <DeleteFriend
-            friendId={_friendId}
-            disabled={!(youLent?.length === 0 && youOwe?.length === 0)}
-          />
+          <div className="flex items-center space-x-2">
+            <Export
+              expenses={expenses.data ?? []}
+              fileName={`expenses_with_${friendQuery.data?.name}`}
+              currentUserId={user.id}
+              friendName={friendQuery.data?.name ?? ''}
+              friendId={friendQuery.data?.id ?? ''}
+              disabled={!expenses.data || expenses.data.length === 0}
+            />
+            <DeleteFriend
+              friendId={_friendId}
+              disabled={!(youLent?.length === 0 && youOwe?.length === 0)}
+            />
+          </div>
         }
         header={
           <div className="flex w-full items-center justify-between">

From dd8a6863699d7000a3281386368a538f483b670a Mon Sep 17 00:00:00 2001
From: "DESKTOP-CI67AM7\\shubh" <shubhamparmar1173@gmail.com>
Date: Mon, 14 Oct 2024 12:00:01 +0530
Subject: [PATCH 2/2] added export button next to add expence

---
 src/components/Friend/Export.tsx  |  5 +++--
 src/pages/balances/[friendId].tsx | 26 ++++++++++++--------------
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/components/Friend/Export.tsx b/src/components/Friend/Export.tsx
index 18791aa..107a06d 100644
--- a/src/components/Friend/Export.tsx
+++ b/src/components/Friend/Export.tsx
@@ -108,12 +108,13 @@ export const Export: React.FC<ExportCSVProps> = ({
 
   return (
     <Button
-      className="bg-transparent hover:bg-transparent"
       size="sm"
+      variant="secondary"
+      className="w-[150px] gap-1 text-sm lg:w-[180px]"
       onClick={exportToCSV}
       disabled={disabled}
     >
-      <Download className="h-4 w-4 text-white" size={20} />
+      <Download className="h-4 w-4 text-white" size={20} /> Export
     </Button>
   );
 };
diff --git a/src/pages/balances/[friendId].tsx b/src/pages/balances/[friendId].tsx
index bd53a09..e8fbdcb 100644
--- a/src/pages/balances/[friendId].tsx
+++ b/src/pages/balances/[friendId].tsx
@@ -56,20 +56,10 @@ const FriendPage: NextPageWithUser = ({ user }) => {
           </div>
         }
         actions={
-          <div className="flex items-center space-x-2">
-            <Export
-              expenses={expenses.data ?? []}
-              fileName={`expenses_with_${friendQuery.data?.name}`}
-              currentUserId={user.id}
-              friendName={friendQuery.data?.name ?? ''}
-              friendId={friendQuery.data?.id ?? ''}
-              disabled={!expenses.data || expenses.data.length === 0}
-            />
-            <DeleteFriend
-              friendId={_friendId}
-              disabled={!(youLent?.length === 0 && youOwe?.length === 0)}
-            />
-          </div>
+          <DeleteFriend
+            friendId={_friendId}
+            disabled={!(youLent?.length === 0 && youOwe?.length === 0)}
+          />
         }
         header={
           <div className="flex w-full items-center justify-between">
@@ -149,6 +139,14 @@ const FriendPage: NextPageWithUser = ({ user }) => {
                   <PlusIcon className="h-4 w-4 text-gray-400" /> Add Expense
                 </Button>
               </Link>
+              <Export
+                expenses={expenses.data ?? []}
+                fileName={`expenses_with_${friendQuery.data?.name}`}
+                currentUserId={user.id}
+                friendName={friendQuery.data?.name ?? ''}
+                friendId={friendQuery.data?.id ?? ''}
+                disabled={!expenses.data || expenses.data.length === 0}
+              />
               {/* <Button size="sm" className="gap-1 text-sm lg:w-[180px]" variant="secondary">
                 <Bell className="h-4 w-4 text-gray-400" />
                 Remind