vasuzex 2.3.5 → 2.3.7

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

@@ -26,6 +26,7 @@ import { Link } from 'react-router-dom';
  * @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)
+ * @param {Array} props.customActions - Extra menu items: [{ label, icon, onClick, className, condition, separator }]
  * @returns {JSX.Element}
  */
 export function RowActionsCell({
@@ -39,6 +40,7 @@ export function RowActionsCell({
   onReject,
   onViewHistory,
   hasApproval = false,
+  customActions = [],
 }) {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const menuRef = useRef(null);
@@ -157,6 +159,33 @@ export function RowActionsCell({
               </>
             )}
 
+            {/* Custom Actions */}
+            {customActions.length > 0 && (
+              <>
+                {customActions.map((action, idx) => {
+                  if (action.condition && !action.condition(row)) return null;
+                  return (
+                    <React.Fragment key={idx}>
+                      {action.separator && (
+                        <div className="border-t border-gray-200 dark:border-gray-700 my-1" />
+                      )}
+                      <button
+                        onClick={() => {
+                          action.onClick(row);
+                          setIsMenuOpen(false);
+                        }}
+                        className={`w-full flex items-center gap-3 px-4 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-700 ${action.className || 'text-gray-700 dark:text-gray-300'}`}
+                      >
+                        {action.icon && <action.icon className="h-4 w-4 shrink-0" />}
+                        <span>{action.label}</span>
+                      </button>
+                    </React.Fragment>
+                  );
+                })}
+                <div className="border-t border-gray-200 dark:border-gray-700 my-1" />
+              </>
+            )}
+
             {/* Toggle Status */}
             {onToggle && (
               <button
@@ -210,6 +239,14 @@ RowActionsCell.propTypes = {
   onReject: PropTypes.func,
   onViewHistory: PropTypes.func,
   hasApproval: PropTypes.bool,
+  customActions: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    icon: PropTypes.elementType,
+    onClick: PropTypes.func.isRequired,
+    className: PropTypes.string,
+    condition: PropTypes.func,
+    separator: PropTypes.bool,
+  })),
 };
 
 export default RowActionsCell;

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

@@ -59,6 +59,10 @@ try {
  * @param {string} props.emptyText - Text to show when no data
  * @param {boolean} props.persistState - Enable URL state persistence (default: true)
  */
+
+// URL params that DataTable owns — all other params (e.g. trashed) are preserved as-is
+const DT_PARAMS = ['page', 'sortBy', 'sortOrder', 'search', 'statusFilter', 'limit'];
+
 export function DataTable(props) {
   // Internal refresh key for self-refresh
   const [refreshKey, setRefreshKey] = React.useState(0);
@@ -179,39 +183,43 @@ export function DataTable(props) {
   const updateURL = React.useCallback((state) => {
     if (!persistState || typeof window === 'undefined') return;
 
-    
+    // Always read from window.location.search (current, live URL) not from
+    // the searchParams closure — the closure can be one render behind when
+    // the parent just called setSearchParams in the same batch.
+    const current = new URLSearchParams(window.location.search);
+
+    // Remove DataTable-managed params
+    DT_PARAMS.forEach(k => current.delete(k));
+    for (const key of [...current.keys()]) {
+      if (key.startsWith('columnSearch[')) current.delete(key);
+    }
+
+    // Re-add non-default values to keep URL clean
+    if (state.page !== 1) current.set('page', state.page);
+    if (state.sortBy) current.set('sortBy', state.sortBy);
+    if (state.sortOrder !== initialSortOrder) current.set('sortOrder', state.sortOrder);
+    if (state.search) current.set('search', state.search);
+    if (state.statusFilter !== 'all') current.set('statusFilter', state.statusFilter);
+    if (state.limit !== (initialLimit || 10)) current.set('limit', state.limit);
 
-    const params = new URLSearchParams();
-    
-    // Only add non-default values to keep URL clean
-    if (state.page !== 1) params.set('page', state.page);
-    if (state.sortBy) params.set('sortBy', state.sortBy);
-    if (state.sortOrder !== initialSortOrder) params.set('sortOrder', state.sortOrder);
-    if (state.search) params.set('search', state.search);
-    if (state.statusFilter !== 'all') params.set('statusFilter', state.statusFilter);
-    if (state.limit !== (initialLimit || 10)) params.set('limit', state.limit);
-    
     // Add column search params
     Object.entries(state.columnSearch || {}).forEach(([field, value]) => {
-      if (value) params.set(`columnSearch[${field}]`, value);
+      if (value) current.set(`columnSearch[${field}]`, value);
     });
 
     // Use React Router if available, otherwise window.history
     if (hasReactRouter && setSearchParams) {
-      
-      setSearchParams(params, { replace: true });
+      setSearchParams(current, { replace: true });
     } else if (typeof window !== 'undefined') {
-      const newURL = params.toString() 
-        ? `${window.location.pathname}?${params.toString()}`
+      const newURL = current.toString()
+        ? `${window.location.pathname}?${current.toString()}`
         : window.location.pathname;
-      
-      
       window.history.replaceState({}, '', newURL);
     }
-  }, [persistState, hasReactRouter, setSearchParams]);
+  }, [persistState, hasReactRouter, setSearchParams, initialSortOrder, initialLimit]);
 
   /**
-   * Sync URL whenever state changes
+   * Sync URL whenever DataTable state changes
    */
   React.useEffect(() => {
     updateURL({

package/frontend/react-ui/components/PhotoManager/EnhancedPhotoManager.jsx

@@ -77,6 +77,7 @@ export function EnhancedPhotoManager({
     deletePhoto,
     deleteMultiplePhotos,
     reorderPhotos,
+    setPrimaryPhoto,
   } = photosHook;
 
   const [selectedPhotos, setSelectedPhotos] = useState([]);
@@ -255,6 +256,7 @@ export function EnhancedPhotoManager({
                   isSelected={selectedPhotos.includes(photo.id)}
                   onSelect={handlePhotoSelect}
                   onDelete={handlePhotoDelete}
+                  onSetPrimary={setPrimaryPhoto || undefined}
                   disabled={loading}
                 />
               ))}
@@ -294,6 +296,7 @@ EnhancedPhotoManager.propTypes = {
     deletePhoto: PropTypes.func,
     deleteMultiplePhotos: PropTypes.func,
     reorderPhotos: PropTypes.func,
+    setPrimaryPhoto: PropTypes.func,
   }).isRequired,
   /** Section title */
   title: PropTypes.string,

package/package.json

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