data: added actions to preStatements

Author: AlexVOiceover

data/preStatements.json

@@ -3,14 +3,36 @@
     "id": "1",
     "verb": "Support",
     "object": "their team",
-    "isPublic": true
+    "isPublic": true,
+    "actions": [
+      {
+        "id": "a1",
+        "creationDate": "2024-02-15T10:00:00.000Z",
+        "dueDate": "2024-02-20T10:00:00.000Z",
+        "text": "Schedule team meeting"
+      },
+      {
+        "id": "a2",
+        "creationDate": "2024-02-15T10:00:00.000Z",
+        "dueDate": "2024-02-22T10:00:00.000Z",
+        "text": "Send follow-up email"
+      }
+    ]
   },
   {
     "id": "2",
     "descriptor": "coding practice",
     "verb": "Improve",
     "object": "software quality",
-    "isPublic": false
+    "isPublic": false,
+    "actions": [
+      {
+        "id": "a3",
+        "creationDate": "2024-02-16T10:00:00.000Z",
+        "dueDate": "2024-02-25T10:00:00.000Z",
+        "text": "Review coding guidelines"
+      }
+    ]
   },
   {
     "id": "3",
@@ -23,7 +45,15 @@
     "descriptor": "marketing ideas",
     "verb": "Engage",
     "object": "potential customers",
-    "isPublic": true
+    "isPublic": true,
+    "actions": [
+      {
+        "id": "a4",
+        "creationDate": "2024-02-17T10:00:00.000Z",
+        "dueDate": "2024-02-28T10:00:00.000Z",
+        "text": "Draft social media campaign"
+      }
+    ]
   },
   {
     "id": "5",

package-lock.json

@@ -22,6 +22,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.0.4",
     "compromise": "^14.14.4",
+    "date-fns": "^4.1.0",
     "framer-motion": "^12.4.1",
     "lucide-react": "^0.475.0",
     "react": "^18.3.1",

package.json

@@ -0,0 +1,72 @@
+import React from 'react';
+import { format } from 'date-fns';
+import { MoreVertical, Edit2, Trash2, Plus } from 'lucide-react';
+import { Button } from '../ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from '../ui/dropdown-menu';
+import type { Action } from '../../../types/types';
+
+export interface ActionPreviewProps {
+  actions: Action[];
+  onEditAction: (actionId: string) => void;
+  onDeleteAction: (actionId: string) => void;
+  onAddAction: () => void;
+}
+
+const ActionPreview: React.FC<ActionPreviewProps> = ({
+  actions,
+  onEditAction,
+  onDeleteAction,
+  onAddAction,
+}) => {
+  return (
+    <div className='space-y-2 mt-4'>
+      {actions.map((action) => (
+        <div
+          key={action.id}
+          className='bg-gray-50 p-3 rounded-lg flex items-center justify-between'
+        >
+          <div>
+            <p>{action.text}</p>
+            <p className='text-sm text-gray-500 mt-1'>
+              Due: {format(new Date(action.dueDate), 'PP')}
+            </p>
+          </div>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant='ghost' size='icon'>
+                <MoreVertical size={18} className='text-gray-500' />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align='end'>
+              <DropdownMenuItem onClick={() => onEditAction(action.id)}>
+                <Edit2 className='mr-2 h-4 w-4' />
+                Edit
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() => onDeleteAction(action.id)}
+                className='text-red-600'
+              >
+                <Trash2 className='mr-2 h-4 w-4' />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      ))}
+      <div
+        className='bg-gray-50 p-3 rounded-lg flex items-center justify-center cursor-pointer hover:bg-gray-100'
+        onClick={onAddAction}
+      >
+        <Plus className='w-4 h-4 mr-2' />
+        <span>Add Action</span>
+      </div>
+    </div>
+  );
+};
+
+export default ActionPreview;

src/components/statements/ActionPreview.tsx

@@ -2,7 +2,7 @@ export interface Action {
   id: string;
   creationDate: string;
   dueDate: string;
-  action: string;
+  text: string;
 }
 export interface Statement {
   id: string;