vasuzex 2.1.16 → 2.1.18

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

@@ -0,0 +1,60 @@
+/**
+ * ApprovalStatusCell Component
+ * 
+ * Reusable read-only status pill for approval workflows
+ * Displays status with icon and soft background colors
+ * 
+ * @module components/DataTable/CellComponents
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CheckCircle, XCircle, Clock } from 'lucide-react';
+
+const STATUS_CONFIG = {
+  pending: {
+    icon: Clock,
+    label: 'Pending',
+    bgClass: 'bg-amber-50 dark:bg-amber-950/30',
+    textClass: 'text-amber-700 dark:text-amber-400',
+  },
+  approved: {
+    icon: CheckCircle,
+    label: 'Approved',
+    bgClass: 'bg-emerald-50 dark:bg-emerald-950/30',
+    textClass: 'text-emerald-700 dark:text-emerald-400',
+  },
+  rejected: {
+    icon: XCircle,
+    label: 'Rejected',
+    bgClass: 'bg-rose-50 dark:bg-rose-950/30',
+    textClass: 'text-rose-700 dark:text-rose-400',
+  },
+};
+
+/**
+ * ApprovalStatusCell - Professional status indicator
+ * 
+ * @param {Object} props
+ * @param {string} props.status - Approval status: 'pending'|'approved'|'rejected'
+ * @returns {JSX.Element}
+ */
+export function ApprovalStatusCell({ status }) {
+  const config = STATUS_CONFIG[status] || STATUS_CONFIG.pending;
+  const Icon = config.icon;
+
+  return (
+    <span
+      className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium ${config.bgClass} ${config.textClass}`}
+    >
+      <Icon className="h-3.5 w-3.5" />
+      {config.label}
+    </span>
+  );
+}
+
+ApprovalStatusCell.propTypes = {
+  status: PropTypes.oneOf(['pending', 'approved', 'rejected']).isRequired,
+};
+
+export default ApprovalStatusCell;

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

@@ -0,0 +1,212 @@
+/**
+ * RowActionsCell Component
+ * 
+ * Reusable actions cell with primary icons + overflow menu pattern
+ * Follows modern admin dashboard design (Amazon Seller/Stripe/Blinkit)
+ * 
+ * @module components/DataTable/CellComponents
+ */
+
+import React, { useState, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Eye, Edit2, MoreVertical, CheckCircle, XCircle, History, Power, Trash2 } from 'lucide-react';
+import { Link } from 'react-router-dom';
+
+/**
+ * RowActionsCell - Professional actions menu for data tables
+ * 
+ * @param {Object} props
+ * @param {Object} props.row - Row data object
+ * @param {Function} props.onView - View action handler
+ * @param {Function} props.onEdit - Edit action handler (optional if editPath provided)
+ * @param {string} props.editPath - Edit page path (will be passed to Link)
+ * @param {Function} props.onToggle - Toggle status handler
+ * @param {Function} props.onDelete - Delete action handler
+ * @param {Function} props.onApprove - Approve action handler (approval workflows)
+ * @param {Function} props.onReject - Reject action handler (approval workflows)
+ * @param {Function} props.onViewHistory - View approval history handler
+ * @param {boolean} props.hasApproval - Whether to show approval actions (default: false)
+ * @returns {JSX.Element}
+ */
+export function RowActionsCell({
+  row,
+  onView,
+  onEdit,
+  editPath,
+  onToggle,
+  onDelete,
+  onApprove,
+  onReject,
+  onViewHistory,
+  hasApproval = false,
+}) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const menuRef = useRef(null);
+  const isPending = hasApproval && row.approval_status === 'pending';
+
+  // Close menu when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        setIsMenuOpen(false);
+      }
+    };
+
+    if (isMenuOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => document.removeEventListener('mousedown', handleClickOutside);
+    }
+  }, [isMenuOpen]);
+
+  return (
+    <div className="flex items-center gap-2">
+      {/* Primary Actions - Always Visible */}
+      <button
+        onClick={() => onView(row)}
+        className="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"
+        title="View Details"
+        aria-label="View Details"
+      >
+        <Eye className="h-4 w-4" />
+      </button>
+
+      {editPath ? (
+        <Link
+          to={editPath}
+          className="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"
+          title="Edit"
+          aria-label="Edit"
+        >
+          <Edit2 className="h-4 w-4" />
+        </Link>
+      ) : (
+        onEdit && (
+          <button
+            onClick={() => onEdit(row)}
+            className="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"
+            title="Edit"
+            aria-label="Edit"
+          >
+            <Edit2 className="h-4 w-4" />
+          </button>
+        )
+      )}
+
+      {/* Overflow Menu - Secondary & Destructive Actions */}
+      <div className="relative" ref={menuRef}>
+        <button
+          onClick={() => setIsMenuOpen(!isMenuOpen)}
+          className="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-gray-700"
+          title="More Actions"
+          aria-label="More Actions"
+          aria-expanded={isMenuOpen}
+        >
+          <MoreVertical className="h-4 w-4" />
+        </button>
+
+        {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 && (
+              <>
+                {onApprove && (
+                  <button
+                    onClick={() => {
+                      onApprove(row);
+                      setIsMenuOpen(false);
+                    }}
+                    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>
+                  </button>
+                )}
+                {onReject && (
+                  <button
+                    onClick={() => {
+                      onReject(row);
+                      setIsMenuOpen(false);
+                    }}
+                    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>
+                  </button>
+                )}
+                <div className="border-t border-gray-200 dark:border-gray-700 my-1" />
+              </>
+            )}
+
+            {/* View History */}
+            {hasApproval && onViewHistory && (
+              <>
+                <button
+                  onClick={() => {
+                    onViewHistory(row);
+                    setIsMenuOpen(false);
+                  }}
+                  className="w-full flex items-center gap-3 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-700"
+                >
+                  <History className="h-4 w-4" />
+                  <span>View History</span>
+                </button>
+                <div className="border-t border-gray-200 dark:border-gray-700 my-1" />
+              </>
+            )}
+
+            {/* Toggle Status */}
+            {onToggle && (
+              <button
+                onClick={() => {
+                  onToggle(row);
+                  setIsMenuOpen(false);
+                }}
+                className="w-full flex items-center gap-3 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-700"
+              >
+                <Power className="h-4 w-4" />
+                <div className="flex flex-col items-start">
+                  <span>Toggle Status</span>
+                  <span className="text-xs text-gray-500 dark:text-gray-400">
+                    {row.is_active ? 'Deactivate' : 'Activate'}
+                  </span>
+                </div>
+              </button>
+            )}
+
+            {/* Delete - Always last, always red */}
+            {onDelete && (
+              <>
+                <div className="border-t border-gray-200 dark:border-gray-700 my-1" />
+                <button
+                  onClick={() => {
+                    onDelete(row);
+                    setIsMenuOpen(false);
+                  }}
+                  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"
+                >
+                  <Trash2 className="h-4 w-4" />
+                  <span>Delete</span>
+                </button>
+              </>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+RowActionsCell.propTypes = {
+  row: PropTypes.object.isRequired,
+  onView: PropTypes.func,
+  onEdit: PropTypes.func,
+  editPath: PropTypes.string,
+  onToggle: PropTypes.func,
+  onDelete: PropTypes.func,
+  onApprove: PropTypes.func,
+  onReject: PropTypes.func,
+  onViewHistory: PropTypes.func,
+  hasApproval: PropTypes.bool,
+};
+
+export default RowActionsCell;

package/frontend/react-ui/components/DataTable/CellComponents/index.js

@@ -0,0 +1,9 @@
+/**
+ * @vasuzex/react - DataTable Cell Components
+ * Reusable cell renderers for common patterns
+ */
+
+export { ApprovalStatusCell } from './ApprovalStatusCell.jsx';
+export { RowActionsCell } from './RowActionsCell.jsx';
+export { default as ApprovalStatusCellDefault } from './ApprovalStatusCell.jsx';
+export { default as RowActionsCellDefault } from './RowActionsCell.jsx';

package/frontend/react-ui/components/DataTable/index.js

@@ -16,3 +16,6 @@ export {
   createViewClickHandler, 
   createDeleteClickHandler 
 } from './ActionDefaults.jsx';
+
+// Cell Components - Reusable cell renderers
+export { ApprovalStatusCell, RowActionsCell } from './CellComponents/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vasuzex",
-  "version": "2.1.16",
+  "version": "2.1.18",
   "description": "Laravel-inspired framework for Node.js monorepos - V2 with optimized dependencies",
   "type": "module",
   "main": "./framework/index.js",
@@ -108,13 +108,14 @@
     "express-rate-limit": "^8.2.1",
     "firebase-admin": "^13.6.0",
     "fs-extra": "^11.3.2",
-    "guruorm": "^2.0.16",
+    "guruorm": "^2.0.17",
     "helmet": "^8.1.0",
     "inquirer": "^9.3.8",
     "ip2location-nodejs": "^9.7.0",
     "joi": "^17.13.3",
     "jose": "^6.1.3",
     "jsonwebtoken": "^9.0.3",
+    "lucide-react": "^0.553.0",
     "maxmind": "^5.0.1",
     "multer": "^2.0.2",
     "node-plop": "^0.32.3",

package/.ai-memory/LOGGER_STRICT_POLICY.md

@@ -1,201 +0,0 @@
-# 🚨 STRICT LOGGING POLICY - MANDATORY
-
-## ❌ FORBIDDEN - NEVER USE THESE
-
-```javascript
-// ❌ STRICTLY FORBIDDEN - DO NOT USE!
-console.log()
-console.warn()
-console.error()
-console.info()
-console.debug()
-```
-
-**VIOLATION OF THIS RULE WILL BE REJECTED IMMEDIATELY!**
-
----
-
-## ✅ CORRECT LOGGING METHODS
-
-### Backend (API) - Use Vasuzex Log Facade
-
-```javascript
-import { Log } from 'vasuzex';
-
-// Info logging
-Log.info('User logged in', { userId: user.id });
-
-// Warning logging
-Log.warning('Rate limit approaching', { ip: req.ip, count: 95 });
-
-// Error logging
-Log.error('Database connection failed', { error: err.message });
-
-// Debug logging (development only)
-Log.debug('Processing order', { orderId: 123, items: 5 });
-
-// Critical errors
-Log.critical('Payment gateway down', { gateway: 'razorpay' });
-
-// Alerts (requires immediate action)
-Log.alert('Disk space critical', { available: '5%' });
-```
-
-### Frontend (Web) - Use Custom Logger Utility
-
-```javascript
-import { logger } from '@/utils/logger';
-
-// Info logging (development only)
-logger.info('Config loaded', { apiUrl, mediaUrl });
-
-// Warning logging
-logger.warning('API rate limit warning', { remaining: 10 });
-
-// Error logging (always logged)
-logger.error('Failed to fetch data', error);
-
-// Debug logging (development only)
-logger.debug('Component mounted', { props });
-```
-
----
-
-## 📁 Logger Implementation
-
-### Backend: Vasuzex Log Facade
-
-**Location:** `vasuzex-v2/framework/Support/Facades/Log.js`
-
-**Methods:**
-- `Log.emergency()` - System unusable
-- `Log.alert()` - Immediate action required
-- `Log.critical()` - Critical conditions
-- `Log.error()` - Runtime errors
-- `Log.warning()` - Exceptional but not errors
-- `Log.notice()` - Normal but significant
-- `Log.info()` - Interesting events
-- `Log.debug()` - Debug information
-
-**Configuration:** `config/logging.cjs`
-
-### Frontend: Custom Logger Utility
-
-**Location:** `apps/customer/web/src/utils/logger.js`
-
-**Features:**
-- Automatic timestamp
-- Context serialization
-- Development-only info/debug logs
-- Always-on error logs
-- Prefix: `[neasto]`
-
-**Methods:**
-- `logger.info(message, context)` - Development only
-- `logger.warning(message, context)` - Development/Test
-- `logger.error(message, error)` - Always logged
-- `logger.debug(message, data)` - Development only
-
----
-
-## 🔍 Examples
-
-### ✅ CORRECT
-
-```javascript
-// Backend
-import { Log } from 'vasuzex';
-
-async function sendOTP(phone) {
-  Log.info(`OTP sent to ${phone}`);
-}
-
-async function processPayment(orderId) {
-  try {
-    // ... payment logic
-    Log.info('Payment processed', { orderId, amount });
-  } catch (error) {
-    Log.error('Payment failed', { orderId, error: error.message });
-    throw error;
-  }
-}
-
-// Frontend
-import { logger } from '@/utils/logger';
-
-function LoginForm() {
-  const handleLogin = async () => {
-    try {
-      logger.debug('Login attempt', { phone });
-      const result = await authService.login(phone);
-      logger.info('Login successful');
-    } catch (error) {
-      logger.error('Login failed', error);
-    }
-  };
-}
-```
-
-### ❌ WRONG
-
-```javascript
-// ❌ NEVER DO THIS!
-console.log('User logged in');
-console.error('Failed to process');
-console.warn('Rate limit warning');
-
-// ❌ NEVER DO THIS IN PRODUCTION CODE!
-if (isDevelopment) {
-  console.log('Debug info'); // Still wrong! Use logger
-}
-```
-
----
-
-## 📋 Migration Checklist
-
-When adding new code:
-
-- [ ] Import `Log` from `vasuzex` (backend)
-- [ ] Import `logger` from `@/utils/logger` (frontend)
-- [ ] NO direct console.* calls anywhere
-- [ ] Use appropriate log level (info/warning/error/debug)
-- [ ] Include context objects for debugging
-- [ ] Test logging in development mode
-
----
-
-## 🔧 Current Status
-
-### Backend Files Using Log Facade ✅
-
-- `apps/customer/api/src/services/AuthService.js`
-- `apps/customer/api/src/services/OrderModificationService.js`
-
-### Frontend Files Using Logger ✅
-
-- `apps/customer/web/src/hooks/useAuth.js`
-- `apps/customer/web/src/components/auth/LoginForm.jsx`
-- `apps/customer/web/src/App.jsx`
-- `apps/customer/web/src/lib/AppConfigProvider.jsx`
-
-### Cleaned Files (No Logging) ✅
-
-- `apps/customer/web/src/main.jsx`
-- `apps/customer/web/src/lib/api-client.js`
-
----
-
-## ⚠️ REMEMBER
-
-**NEVER write `console.log`, `console.warn`, or `console.error` in any file!**
-
-**ALWAYS use:**
-- Backend: `Log.info()`, `Log.error()`, `Log.warning()`, `Log.debug()`
-- Frontend: `logger.info()`, `logger.error()`, `logger.warning()`, `logger.debug()`
-
-**This is not a suggestion - it's a strict requirement!**
-
----
-
-Last Updated: 2025-12-10