vasuzex 2.1.18 → 2.1.20

package/frontend/react-ui/components/DataTable/ActionDefaults.jsx

@@ -1,10 +1,11 @@
-import { FiEye, FiEdit, FiTrash2 } from "react-icons/fi";
+import { Eye, Edit2, Trash2 } from "lucide-react";
 
 /**
  * ActionDefaults - Production Ready
  * 
  * Default configurations for common DataTable actions
  * Provides sensible defaults for edit, view, delete, and switch actions
+ * Uses lucide-react icons matching RowActionsCell design
  * 
  * @module components/DataTable/ActionDefaults
  */
@@ -13,26 +14,26 @@ export const ACTION_DEFAULTS = {
   edit: {
     type: "link",
     label: "Edit",
-    icon: FiEdit,
+    icon: Edit2,
     title: "Edit",
     extraClass:
-      "rounded-lg p-2 text-brand-600 hover:bg-brand-50 dark:text-brand-400 dark:hover:bg-gray-700",
+      "p-1.5 text-gray-600 hover:text-emerald-600 hover:bg-emerald-50 rounded-md transition-colors dark:text-gray-400 dark:hover:text-emerald-400 dark:hover:bg-emerald-950/30",
   },
   view: {
     type: "button",
     label: "View Details",
-    icon: FiEye,
+    icon: Eye,
     title: "View Details",
     extraClass:
-      "rounded-lg p-2 text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-gray-700",
+      "p-1.5 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-md transition-colors dark:text-gray-400 dark:hover:text-blue-400 dark:hover:bg-blue-950/30",
   },
   delete: {
     type: "button",
     label: "Delete",
-    icon: FiTrash2,
+    icon: Trash2,
     title: "Delete",
     extraClass:
-      "rounded-lg p-2 text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-gray-700",
+      "p-1.5 text-gray-600 hover:text-rose-600 hover:bg-rose-50 rounded-md transition-colors dark:text-gray-400 dark:hover:text-rose-400 dark:hover:bg-rose-950/30",
   },
   switch: {
     type: "button",

package/frontend/react-ui/components/DataTable/CellComponents/RowActionsCell.jsx

@@ -42,7 +42,10 @@ export function RowActionsCell({
 }) {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const menuRef = useRef(null);
-  const isPending = hasApproval && row.approval_status === 'pending';
+  
+  // Determine which approval actions to show based on current status
+  const showApprove = hasApproval && (row.approval_status === 'pending' || row.approval_status === 'rejected');
+  const showReject = hasApproval && (row.approval_status === 'pending' || row.approval_status === 'approved');
 
   // Close menu when clicking outside
   useEffect(() => {
@@ -106,10 +109,10 @@ export function RowActionsCell({
 
         {isMenuOpen && (
           <div className="absolute right-0 mt-1 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50 py-1">
-            {/* Approval Actions - Only show when pending */}
-            {hasApproval && isPending && (
+            {/* Approval Actions - Show based on current status */}
+            {(showApprove || showReject) && (
               <>
-                {onApprove && (
+                {showApprove && onApprove && (
                   <button
                     onClick={() => {
                       onApprove(row);
@@ -118,10 +121,10 @@ export function RowActionsCell({
                     className="w-full flex items-center gap-3 px-4 py-2 text-sm text-emerald-700 hover:bg-emerald-50 dark:text-emerald-400 dark:hover:bg-emerald-950/30"
                   >
                     <CheckCircle className="h-4 w-4" />
-                    <span>Approve</span>
+                    <span>{row.approval_status === 'rejected' ? 'Re-approve' : 'Approve'}</span>
                   </button>
                 )}
-                {onReject && (
+                {showReject && onReject && (
                   <button
                     onClick={() => {
                       onReject(row);
@@ -130,7 +133,7 @@ export function RowActionsCell({
                     className="w-full flex items-center gap-3 px-4 py-2 text-sm text-rose-700 hover:bg-rose-50 dark:text-rose-400 dark:hover:bg-rose-950/30"
                   >
                     <XCircle className="h-4 w-4" />
-                    <span>Reject</span>
+                    <span>{row.approval_status === 'approved' ? 'Revoke/Reject' : 'Reject'}</span>
                   </button>
                 )}
                 <div className="border-t border-gray-200 dark:border-gray-700 my-1" />

package/frontend/react-ui/components/DataTable/TableBody.jsx

@@ -75,7 +75,7 @@ export function TableBody({
           
           {/* Render Actions */}
           {actions && (
-            <td className="px-6 py-4 text-right">
+            <td className="px-2 py-2 text-right">
               <div className="flex items-center justify-end gap-2">
                 {actions.map((userAction, actionIdx) => {
                   // Check visibility first
@@ -146,7 +146,7 @@ export function TableBody({
                   const content = action.renderContent ? (
                     action.renderContent(row)
                   ) : Icon ? (
-                    <Icon className="h-5 w-5" />
+                    <Icon className="h-4 w-4" />
                   ) : (
                     action.label
                   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vasuzex",
-  "version": "2.1.18",
+  "version": "2.1.20",
   "description": "Laravel-inspired framework for Node.js monorepos - V2 with optimized dependencies",
   "type": "module",
   "main": "./framework/index.js",