From e0b3063916bbbc1ad58216b8362d892829a108b8 Mon Sep 17 00:00:00 2001
From: Markus Thielker <mail.markus.thielker@gmail.com>
Date: Mon, 11 Mar 2024 00:37:26 +0100
Subject: [PATCH] N-FIN-7: add payment page UI

---
 src/app/payments/page.tsx                     |  62 ++++++-
 .../paymentPageClientComponents.tsx           | 171 ++++++++++++++++++
 2 files changed, 230 insertions(+), 3 deletions(-)
 create mode 100644 src/components/paymentPageClientComponents.tsx

diff --git a/src/app/payments/page.tsx b/src/app/payments/page.tsx
index 6b3e460..38d123c 100644
--- a/src/app/payments/page.tsx
+++ b/src/app/payments/page.tsx
@@ -1,7 +1,63 @@
+import { getUser } from '@/auth';
+import { prismaClient } from '@/prisma';
+import React from 'react';
+import PaymentPageClientContent from '@/components/paymentPageClientComponents';
+import paymentCreateUpdate from '@/lib/actions/paymentCreateUpdate';
+import paymentDelete from '@/lib/actions/paymentDelete';
+
 export default async function PaymentsPage() {
+
+    const user = await getUser();
+
+    const payments = await prismaClient.payment.findMany({
+        where: {
+            userId: user?.id,
+        },
+        orderBy: [
+            {
+                date: 'desc',
+            },
+            {
+                id: 'desc',
+            },
+        ],
+    });
+
+    const entities = await prismaClient.entity.findMany({
+        where: {
+            userId: user?.id,
+        },
+        orderBy: [
+            {
+                name: 'asc',
+            },
+            {
+                id: 'asc',
+            },
+        ],
+    });
+
+    const categories = await prismaClient.category.findMany({
+        where: {
+            userId: user?.id,
+        },
+        orderBy: [
+            {
+                name: 'asc',
+            },
+            {
+                id: 'asc',
+            },
+        ],
+    });
+
     return (
-        <main className="flex items-center justify-center min-h-screen text-3xl">
-            Payments
-        </main>
+        <PaymentPageClientContent
+            payments={payments}
+            entities={entities}
+            categories={categories}
+            onSubmit={paymentCreateUpdate}
+            onDelete={paymentDelete}
+            className="flex flex-col justify-center space-y-4 p-10"/>
     );
 }
diff --git a/src/components/paymentPageClientComponents.tsx b/src/components/paymentPageClientComponents.tsx
new file mode 100644
index 0000000..2308ce2
--- /dev/null
+++ b/src/components/paymentPageClientComponents.tsx
@@ -0,0 +1,171 @@
+'use client';
+
+import React, { useState } from 'react';
+import { CellContext } from '@tanstack/table-core';
+import { Button } from '@/components/ui/button';
+import { Edit, Trash } from 'lucide-react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { DataTable } from '@/components/ui/data-table';
+import { z } from 'zod';
+import { ActionResponse } from '@/lib/types/ActionResponse';
+import { useRouter } from 'next/navigation';
+import { toast } from 'sonner';
+import { sonnerContent } from '@/components/ui/sonner';
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogFooter,
+    AlertDialogHeader,
+} from '@/components/ui/alert-dialog';
+import { paymentFormSchema } from '@/lib/form-schemas/paymentFormSchema';
+import { Category, Entity, Payment } from '@prisma/client';
+import PaymentForm from '@/components/form/paymentForm';
+import { columns } from '@/app/payments/columns';
+
+export default function PaymentPageClientContent({
+    payments,
+    entities,
+    categories,
+    onSubmit,
+    onDelete,
+    className,
+}: {
+    payments: Payment[],
+    entities: Entity[],
+    categories: Category[],
+    onSubmit: (data: z.infer<typeof paymentFormSchema>) => Promise<ActionResponse>,
+    onDelete: (id: number) => Promise<ActionResponse>,
+    className: string,
+}) {
+
+    const router = useRouter();
+
+    const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
+    const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+
+    const [selectedPayment, setSelectedPayment] = useState<Payment | undefined>(undefined);
+
+    async function handleSubmit(data: z.infer<typeof paymentFormSchema>) {
+        const response = await onSubmit(data);
+        router.refresh();
+        setIsEditDialogOpen(false);
+        return response;
+    }
+
+    async function handleDelete(id: number | undefined) {
+
+        if (!id) {
+            return;
+        }
+
+        const response = await onDelete(id);
+        toast(sonnerContent(response));
+        if (response.redirect) {
+            router.push(response.redirect);
+        }
+        router.refresh();
+        setIsDeleteDialogOpen(false);
+        return response;
+    }
+
+    const actionCell = ({row}: CellContext<Payment, unknown>) => {
+        const payment = row.original as Payment;
+
+        return (
+            <div className="flex items-center space-x-4">
+                <Button
+                    variant="ghost"
+                    className="h-8 w-8 p-0"
+                    onClick={() => {
+                        setSelectedPayment(payment);
+                        setIsEditDialogOpen(true);
+                    }}>
+                    <span className="sr-only">Edit payment</span>
+                    <Edit className="h-4 w-4"/>
+                </Button>
+                <Button
+                    variant="ghost"
+                    className="h-8 w-8 p-0"
+                    onClick={() => {
+                        setSelectedPayment(payment);
+                        setIsDeleteDialogOpen(true);
+                    }}
+                >
+                    <span className="sr-only">Delete payment</span>
+                    <Trash className="h-4 w-4"/>
+                </Button>
+            </div>
+        );
+    };
+
+    const entitiesMapped = entities?.map((entity) => {
+        return {
+            label: entity.name,
+            value: entity.id,
+        };
+    }) ?? [];
+
+    const categoriesMapped = categories?.map((category) => {
+        return {
+            label: category.name,
+            value: category.id,
+        };
+    }) ?? [];
+
+    return (
+        <div className={className}>
+            <div className="flex items-center justify-between w-full">
+                <p className="text-3xl font-semibold">Payments</p>
+
+                {/* Edit dialog */}
+                <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
+                    <DialogTrigger asChild>
+                        <Button
+                            onClick={() => {
+                                setSelectedPayment(undefined);
+                                setIsEditDialogOpen(true);
+                            }}>
+                            Create Payment
+                        </Button>
+                    </DialogTrigger>
+                    <DialogContent>
+                        <DialogHeader>
+                            <DialogTitle>{selectedPayment?.id ? 'Update Payment' : 'Create Payment'}</DialogTitle>
+                        </DialogHeader>
+                        <PaymentForm
+                            value={selectedPayment}
+                            entities={entities}
+                            categories={categories}
+                            onSubmit={handleSubmit}
+                            className="grid grid-cols-1 md:grid-cols-2 gap-4 py-4"/>
+                    </DialogContent>
+                </Dialog>
+            </div>
+
+            {/* Data Table */}
+            <DataTable
+                className="w-full"
+                columns={columns(actionCell, entities, categories)}
+                data={payments}
+                pagination/>
+
+            {/* Delete confirmation dialog */}
+            <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
+                <AlertDialogContent>
+                    <AlertDialogHeader>Delete Payment?</AlertDialogHeader>
+                    <p>Are your sure you want to delete the payment?</p>
+                    <AlertDialogFooter>
+                        <AlertDialogCancel>
+                            Cancel
+                        </AlertDialogCancel>
+                        <AlertDialogAction onClick={() => handleDelete(selectedPayment?.id)}>
+                            Delete
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+        </div>
+    );
+}