From 1dd1bb617d4e5d6d27d0fa008b363b0143ca5167 Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Tue, 4 Jul 2023 00:29:26 +0000
Subject: [PATCH] feat: add action buttons to documents table

---
 .../src/app/(dashboard)/dashboard/page.tsx    |  9 +++--
 .../(dashboard)/table/actions-component.tsx   | 33 +++++++++++++++++++
 .../src/components/formatter/locale-date.tsx  |  2 +-
 3 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 apps/web/src/components/(dashboard)/table/actions-component.tsx

diff --git a/apps/web/src/app/(dashboard)/dashboard/page.tsx b/apps/web/src/app/(dashboard)/dashboard/page.tsx
index 30ee90ed9..96a2f5a92 100644
--- a/apps/web/src/app/(dashboard)/dashboard/page.tsx
+++ b/apps/web/src/app/(dashboard)/dashboard/page.tsx
@@ -15,6 +15,7 @@ import {
 } from '@documenso/ui/primitives/table';
 
 import { CardMetric } from '~/components/(dashboard)/metric-card/metric-card';
+import { ActionButtons } from '~/components/(dashboard)/table/actions-component';
 import { DocumentStatus } from '~/components/formatter/document-status';
 import { LocaleDate } from '~/components/formatter/locale-date';
 
@@ -61,7 +62,8 @@ export default async function DashboardPage() {
                 <TableHead className="w-[100px]">ID</TableHead>
                 <TableHead>Title</TableHead>
                 <TableHead>Status</TableHead>
-                <TableHead className="text-right">Created</TableHead>
+                <TableHead>Created</TableHead>
+                <TableHead>Actions</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
@@ -79,9 +81,12 @@ export default async function DashboardPage() {
                   <TableCell>
                     <DocumentStatus status={document.status} />
                   </TableCell>
-                  <TableCell className="text-right">
+                  <TableCell>
                     <LocaleDate date={document.created} />
                   </TableCell>
+                  <TableCell>
+                    <ActionButtons />
+                  </TableCell>
                 </TableRow>
               ))}
               {results.data.length === 0 && (
diff --git a/apps/web/src/components/(dashboard)/table/actions-component.tsx b/apps/web/src/components/(dashboard)/table/actions-component.tsx
new file mode 100644
index 000000000..299a37fda
--- /dev/null
+++ b/apps/web/src/components/(dashboard)/table/actions-component.tsx
@@ -0,0 +1,33 @@
+'use client';
+
+import React from 'react';
+
+import { Download, Edit, Trash } from 'lucide-react';
+
+export function ActionButtons() {
+  return (
+    <div className="flex cursor-pointer gap-6">
+      <Edit
+        size={18}
+        color="#71717A"
+        onClick={() => {
+          console.log('Edit Button');
+        }}
+      />
+      <Download
+        size={18}
+        color="#71717A"
+        onClick={() => {
+          console.log('Download Button');
+        }}
+      />
+      <Trash
+        size={18}
+        color="#71717A"
+        onClick={() => {
+          console.log('Delete Button');
+        }}
+      />
+    </div>
+  );
+}
diff --git a/apps/web/src/components/formatter/locale-date.tsx b/apps/web/src/components/formatter/locale-date.tsx
index 837c6aa38..4196ed691 100644
--- a/apps/web/src/components/formatter/locale-date.tsx
+++ b/apps/web/src/components/formatter/locale-date.tsx
@@ -10,7 +10,7 @@ export const LocaleDate = ({ className, date, ...props }: LocaleDateProps) => {
   const [localeDate, setLocaleDate] = useState(() => new Date(date).toISOString());
 
   useEffect(() => {
-    setLocaleDate(new Date(date).toLocaleString());
+    setLocaleDate(new Date(date).toLocaleDateString());
   }, [date]);
 
   return (