vasuzex 2.1.4 → 2.1.5

package/framework/Database/Model.js

@@ -832,9 +832,44 @@ export class Model extends GuruORMModel {
       query = query.whereNull(this.deletedAt);
     }
 
+    // Monkey-patch the update method to add timestamps
+    const modelClass = this;
+    const originalUpdate = query.update;
+    
+    query.update = async function(data) {
+      // Add updated_at if timestamps are enabled
+      if (modelClass.timestamps && modelClass.updatedAt && data[modelClass.updatedAt] === undefined) {
+        data[modelClass.updatedAt] = new Date();
+      }
+      return await originalUpdate.call(this, data);
+    };
+
     return query;
   }
 
+  /**
+   * Override where() to pass through model context
+   */
+  static where(...args) {
+    const query = this.query();
+    return query.where(...args);
+  }
+
+  /**
+   * Static update method with timestamps
+   * Override to add updated_at automatically
+   */
+  static async update(id, attributes) {
+    // Add updated_at if timestamps are enabled
+    if (this.timestamps && this.updatedAt && attributes[this.updatedAt] === undefined) {
+      attributes[this.updatedAt] = new Date();
+    }
+
+    const pk = this.primaryKey || 'id';
+    const query = this.query();
+    return await query.where(pk, id).update(attributes);
+  }
+
   /**
    * Query builder with soft deleted records
    */

package/framework/Database/QueryBuilder.js

@@ -171,6 +171,27 @@ export class QueryBuilder {
    * Update records
    */
   async update(data) {
+    // Add updated_at if model class has timestamps enabled
+    if (this.query._modelClass) {
+      const modelClass = this.query._modelClass;
+      if (modelClass.timestamps && modelClass.updatedAt && data[modelClass.updatedAt] === undefined) {
+        data[modelClass.updatedAt] = new Date();
+      }
+    }
+    
+    return await this.query.update(data);
+  }
+
+  /**
+   * Update records with timestamps (for use with Model)
+   * @param {Object} data - Data to update
+   * @param {boolean} withTimestamps - Whether to add updated_at timestamp
+   * @returns {Promise}
+   */
+  async updateWithTimestamps(data, withTimestamps = true) {
+    if (withTimestamps) {
+      data.updated_at = new Date();
+    }
     return await this.query.update(data);
   }
 

package/framework/Foundation/BaseApp.js

@@ -5,6 +5,7 @@ import { LogServiceProvider } from '../Services/Log/LogServiceProvider.js';
 import { HashServiceProvider } from './Providers/HashServiceProvider.js';
 import { ValidationServiceProvider } from './Providers/ValidationServiceProvider.js';
 import { EncryptionServiceProvider } from './Providers/EncryptionServiceProvider.js';
+import { StorageServiceProvider } from '../Services/Storage/StorageServiceProvider.js';
 
 /**
  * BaseApp - Base class for application-level apps (Express apps)
@@ -38,6 +39,7 @@ export class BaseApp extends Application {
     this.register(HashServiceProvider);
     this.register(ValidationServiceProvider);
     this.register(EncryptionServiceProvider);
+    this.register(StorageServiceProvider);
   }
 
   /**

package/framework/Services/Storage/Providers/S3StorageProvider.js

@@ -14,6 +14,7 @@ export class S3StorageProvider extends BaseStorageProvider {
     this.key = config.key;
     this.secret = config.secret;
     this.baseUrl = config.url;
+    this.forcePathStyle = config.forcePathStyle || false; // For MinIO compatibility
     this.s3Client = null;
   }
 
@@ -30,6 +31,7 @@ export class S3StorageProvider extends BaseStorageProvider {
       this.s3Client = new S3Client({
         region: this.region,
         endpoint: this.endpoint,
+        forcePathStyle: this.forcePathStyle, // Required for MinIO
         credentials: {
           accessKeyId: this.key,
           secretAccessKey: this.secret,
@@ -132,6 +134,25 @@ export class S3StorageProvider extends BaseStorageProvider {
     return `https://${this.bucket}.s3.${this.region}.amazonaws.com/${path}`;
   }
 
+  /**
+   * Get presigned URL for temporary access
+   * @param {string} path - File path
+   * @param {number} expiresIn - Expiration time in seconds (default: 7 days)
+   * @returns {Promise<string>} Presigned URL
+   */
+  async temporaryUrl(path, expiresIn = 604800) {
+    const client = await this.getClient();
+    const { GetObjectCommand } = await import('@aws-sdk/client-s3');
+    const { getSignedUrl } = await import('@aws-sdk/s3-request-presigner');
+
+    const command = new GetObjectCommand({
+      Bucket: this.bucket,
+      Key: path,
+    });
+
+    return await getSignedUrl(client, command, { expiresIn });
+  }
+
   /**
    * Get file size
    */

package/framework/Services/Storage/StorageServiceProvider.js

@@ -26,10 +26,6 @@ export class StorageServiceProvider extends ServiceProvider {
    */
   async boot() {
     // Storage service is ready to use
-    if (this.config('filesystems.default')) {
-      const storage = this.make('storage');
-      console.log(`[StorageServiceProvider] Storage service initialized with driver: ${this.config('filesystems.default')}`);
-    }
   }
 }
 

package/framework/Services/Upload/FileValidator.js

@@ -219,12 +219,13 @@ export class FileValidator {
 }
 
 /**
- * Validation Error
+ * File Validation Error
+ * Renamed to avoid conflict with framework's ValidationError
  */
-export class ValidationError extends Error {
+export class FileValidationError extends Error {
   constructor(message, errors = []) {
     super(message);
-    this.name = 'ValidationError';
+    this.name = 'FileValidationError';
     this.errors = errors;
   }
 }

package/framework/Services/Upload/index.js

@@ -2,7 +2,7 @@ export { UploadManager } from './UploadManager.js';
 export { LocalDriver } from './Drivers/LocalDriver.js';
 export { S3Driver } from './Drivers/S3Driver.js';
 export { DigitalOceanSpacesDriver } from './Drivers/DigitalOceanSpacesDriver.js';
-export { FileValidator, ValidationError } from './FileValidator.js';
+export { FileValidator, FileValidationError } from './FileValidator.js';
 export { ImageProcessor } from './ImageProcessor.js';
 export { SecurityScanner, SecurityError } from './SecurityScanner.js';
 export { UploadServiceProvider } from './UploadServiceProvider.js';

package/framework/Validation/Validator.js

@@ -26,6 +26,43 @@ export class Validator {
     return { error: null, value: result.value };
   }
 
+  /**
+   * Get nested value from object using dot notation
+   * @param {Object} obj - Object to search
+   * @param {String} path - Dot notation path (e.g., 'user.profile.name')
+   * @returns {*} Value at path or undefined
+   * 
+   * @example
+   * const data = { user: { profile: { name: 'John' } } };
+   * Validator.getNestedValue(data, 'user.profile.name'); // 'John'
+   */
+  static getNestedValue(obj, path) {
+    return path.split('.').reduce((current, key) => current?.[key], obj);
+  }
+
+  /**
+   * Validate required fields in data object
+   * @param {Object} data - Data object to validate
+   * @param {Array<String>} fields - Required field names (supports dot notation)
+   * @returns {Object} Object with errors (empty if valid)
+   * 
+   * @example
+   * const errors = Validator.validateRequiredFields(data, ['name', 'user.email']);
+   * if (Object.keys(errors).length > 0) {
+   *   throw new ValidationError(errors);
+   * }
+   */
+  static validateRequiredFields(data, fields) {
+    const errors = {};
+    for (const field of fields) {
+      const value = this.getNestedValue(data, field);
+      if (value === undefined || value === null || (typeof value === 'string' && value.trim() === '')) {
+        errors[field] = `${field} is required`;
+      }
+    }
+    return errors;
+  }
+
   /**
    * Validate middleware
    */

package/frontend/client/Errors/FormErrorHandler.js

@@ -2,66 +2,131 @@
  * Form Error Handling Utilities
  * 
  * Framework-agnostic error handling utilities for forms
- * Handles backend validation errors and maps them to form fields
+ * Handles backend validation errors (Joi) and maps them to form fields
+ * Compatible with both Yup (Formik) and Joi (backend) error formats
  * Similar to Laravel's error bag functionality
  */
 
 /**
  * Handle API errors in forms with Formik
- * Automatically maps backend validation errors to form fields
+ * Automatically maps backend validation errors (Joi) to Formik field errors
+ * Works seamlessly alongside Yup validation
  * Shows appropriate toast notifications
  * 
  * @param {Object} error - Error object from API call
- * @param {Function} setFieldError - Formik's setFieldError function
+ * @param {Function} setStatus - Formik's setStatus function to store backend errors separately
  * @param {Object} options - Configuration options
  * @param {string} options.fallbackMessage - Message to show if no specific error message
  * @param {Function} options.onValidationError - Callback for validation errors
  * @param {Function} options.onError - Callback for other errors
  * @param {boolean} options.showToast - Whether to show toast notification (default: true)
  * @param {boolean} options.logError - Whether to log error to console (default: true)
+ * @param {Object} options.toast - Toast library instance (react-toastify, sonner, etc.)
  * 
  * @example
  * ```javascript
- * import { handleFormError } from '@neastore-js/web-utils';
+ * import { handleFormError } from 'vasuzex/react';
+ * import { toast } from 'react-toastify';
  * 
- * const handleSubmit = async (values, { setFieldError }) => {
+ * const handleSubmit = async (values, { setStatus }) => {
  *   try {
  *     await brandService.create(values);
  *     toast.success("Brand created successfully");
+ *     setStatus({ backendErrors: null }); // Clear backend errors on success
  *   } catch (error) {
- *     handleFormError(error, setFieldError, {
- *       fallbackMessage: "Failed to save brand"
+ *     handleFormError(error, setStatus, {
+ *       fallbackMessage: "Failed to save brand",
+ *       toast
  *     });
  *   }
  * };
  * ```
+ * 
+ * @example With nested fields (Joi backend validation)
+ * ```javascript
+ * // Backend returns:
+ * {
+ *   "success": false,
+ *   "message": "Validation failed",
+ *   "errors": {
+ *     "phone": "Phone must be exactly 10 digits",
+ *     "bankdetails.ifscCode": "Invalid IFSC code format",
+ *     "owner.email": "Owner email must be a valid email address"
+ *   }
+ * }
+ * 
+ * // Stored in Formik status (doesn't conflict with Yup validation):
+ * // setStatus({
+ * //   backendErrors: {
+ * //     'phone': 'Phone must be exactly 10 digits',
+ * //     'bankdetails': { 'ifscCode': 'Invalid IFSC code format' },
+ * //     'owner': { 'email': 'Owner email must be a valid email address' }
+ * //   }
+ * // })
+ * ```
  */
-export const handleFormError = (error, setFieldError, options = {}) => {
+export const handleFormError = (error, setStatus, options = {}) => {
     const {
         fallbackMessage = 'An error occurred',
         onValidationError,
         onError,
         showToast = true,
         logError = true,
+        toast: toastLib,
     } = options;
 
     // Log error for debugging
     if (logError) {
         console.error('Form error:', error);
+        console.log('[handleFormError] error.isValidationError:', error.isValidationError);
+        console.log('[handleFormError] error.errors:', error.errors);
+        console.log('[handleFormError] typeof error.errors:', typeof error.errors);
     }
 
     // Handle validation errors (422) - attach to form fields
+    // Works with both Joi (backend) and Yup (frontend) error formats
     if (error.isValidationError && error.errors && typeof error.errors === 'object') {
-        // Set field-level errors from backend
+        console.log('[handleFormError] Processing validation errors...');
+        
+        // Convert flat dot-notation errors to nested structure
+        // Backend: { "bankdetails.ifscCode": "error" }
+        // Formik needs: { bankdetails: { ifscCode: "error" } }
+        const formikErrors = {};
+        
         Object.keys(error.errors).forEach((field) => {
-            if (setFieldError) {
-                setFieldError(field, error.errors[field]);
+            console.log(`[handleFormError] Processing field "${field}":`, error.errors[field]);
+            
+            if (field.includes('.')) {
+                // Nested field: convert "bankdetails.ifscCode" to { bankdetails: { ifscCode: "error" } }
+                const parts = field.split('.');
+                let current = formikErrors;
+                
+                for (let i = 0; i < parts.length - 1; i++) {
+                    if (!current[parts[i]]) {
+                        current[parts[i]] = {};
+                    }
+                    current = current[parts[i]];
+                }
+                
+                current[parts[parts.length - 1]] = error.errors[field];
+            } else {
+                // Top-level field
+                formikErrors[field] = error.errors[field];
             }
         });
+        
+        console.log('[handleFormError] Storing backend errors in status:', formikErrors);
+        
+        // Store backend validation errors in Formik status
+        // This prevents conflict with Yup validation
+        // Components should check status.backendErrors first, then fall back to Formik errors
+        if (setStatus) {
+            setStatus({ backendErrors: formikErrors });
+        }
 
-        // Show error message
-        if (showToast) {
-            console.error(error.message || 'Please fix the validation errors');
+        // Show error toast with validation message
+        if (showToast && toastLib) {
+            toastLib.error(error.message || 'Please fix the validation errors');
         }
 
         // Call custom validation error handler if provided
@@ -94,8 +159,8 @@ export const handleFormError = (error, setFieldError, options = {}) => {
     // Backend MUST send error.message (standardized)
     const errorMessage = error.message || fallbackMessage;
 
-    if (showToast) {
-        console.error(errorMessage);
+    if (showToast && toastLib) {
+        toastLib.error(errorMessage);
     }
 
     // Call custom error handler if provided
@@ -112,6 +177,7 @@ export const handleFormError = (error, setFieldError, options = {}) => {
 /**
  * Handle API errors without Formik
  * For simple forms or non-Formik scenarios
+ * Returns errors object for manual handling
  * 
  * @param {Object} error - Error object from API call
  * @param {Object} options - Configuration options
@@ -119,16 +185,26 @@ export const handleFormError = (error, setFieldError, options = {}) => {
  * @param {Function} options.onError - Callback for errors
  * @param {boolean} options.showToast - Whether to show toast notification (default: true)
  * @param {boolean} options.logError - Whether to log error to console (default: true)
+ * @param {Object} options.toast - Toast library instance (react-toastify, sonner, etc.)
  * 
  * @example
  * ```javascript
- * import { handleApiError } from '@neastore-js/web-utils';
+ * import { handleApiError } from 'vasuzex/react';
+ * import { toast } from 'react-toastify';
  * 
  * try {
  *   await api.delete('/brands/123');
  *   toast.success("Brand deleted");
  * } catch (error) {
- *   handleApiError(error, { fallbackMessage: "Failed to delete brand" });
+ *   const result = handleApiError(error, { 
+ *     fallbackMessage: "Failed to delete brand",
+ *     toast 
+ *   });
+ *   
+ *   // Access validation errors if needed
+ *   if (result.type === 'validation') {
+ *     console.log(result.errors); // { field: "error message" }
+ *   }
  * }
  * ```
  */
@@ -138,6 +214,7 @@ export const handleApiError = (error, options = {}) => {
         onError,
         showToast = true,
         logError = true,
+        toast: toastLib,
     } = options;
 
     // Log error for debugging
@@ -150,9 +227,9 @@ export const handleApiError = (error, options = {}) => {
     const errorMessage = error.message || fallbackMessage;
 
     // Show toast notification
-    if (showToast && !error.isPermissionError) {
+    if (showToast && toastLib && !error.isPermissionError) {
         // Don't show toast for permission errors as api-client already shows SweetAlert
-        toast.error(errorMessage);
+        toastLib.error(errorMessage);
     }
 
     // Call custom error handler if provided

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

@@ -0,0 +1,313 @@
+/**
+ * Enhanced Photo Manager with DnD, Bulk Operations, and Custom Components
+ * 
+ * Production-ready photo management component with:
+ * - Drag & drop upload
+ * - Sortable photos (drag to reorder)
+ * - Bulk selection and delete
+ * - Custom component support
+ * - Upload progress tracking
+ * - Responsive grid layout
+ * 
+ * @module components/PhotoManager/EnhancedPhotoManager
+ */
+
+import { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  rectSortingStrategy,
+} from "@dnd-kit/sortable";
+
+/**
+ * Enhanced Photo Manager Component
+ * 
+ * @param {Object} props
+ * @param {string} props.entityId - Entity ID (store, product, etc.)
+ * @param {Object} props.photosHook - Hook with photos management functions
+ * @param {string} [props.title="Photos"] - Section title
+ * @param {string} [props.description] - Section description
+ * @param {string} [props.emptyStateText="No photos uploaded yet"] - Empty state message
+ * @param {number} [props.maxFiles=20] - Maximum number of photos allowed
+ * @param {string} [props.gridCols="grid-cols-2 sm:grid-cols-3 md:grid-cols-4"] - Grid columns CSS
+ * @param {Object} props.components - Custom components (UploadDropZone, PhotoCard, etc.)
+ * 
+ * @example
+ * <EnhancedPhotoManager
+ *   entityId={storeId}
+ *   photosHook={useStorePhotos(storeId)}
+ *   title="Store Photos"
+ *   maxFiles={20}
+ *   components={{
+ *     UploadDropZone,
+ *     PhotoCard,
+ *     UploadProgressCard,
+ *     TrashIcon,
+ *   }}
+ * />
+ */
+export function EnhancedPhotoManager({
+  entityId,
+  photosHook,
+  title = "Photos",
+  description,
+  emptyStateText = "No photos uploaded yet",
+  maxFiles = 20,
+  gridCols = "grid-cols-2 sm:grid-cols-3 md:grid-cols-4",
+  components = {},
+}) {
+  const {
+    photos = [],
+    uploadingFiles = [],
+    loading = false,
+    fetchPhotos,
+    uploadPhotos,
+    deletePhoto,
+    deleteMultiplePhotos,
+    reorderPhotos,
+  } = photosHook;
+
+  const [selectedPhotos, setSelectedPhotos] = useState([]);
+  const [sortedPhotos, setSortedPhotos] = useState([]);
+
+  // Extract custom components
+  const UploadDropZone = components.UploadDropZone;
+  const PhotoCard = components.PhotoCard;
+  const UploadProgressCard = components.UploadProgressCard;
+  const TrashIcon = components.TrashIcon;
+
+  // Sensors for drag & drop
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  // Fetch photos on mount
+  useEffect(() => {
+    if (entityId && fetchPhotos) {
+      fetchPhotos();
+    }
+  }, [entityId, fetchPhotos]);
+
+  // Update sorted photos when photos change
+  useEffect(() => {
+    setSortedPhotos(photos);
+  }, [photos]);
+
+  // Handle file selection
+  const handleFilesSelected = async (files) => {
+    if (uploadPhotos) {
+      await uploadPhotos(files);
+    }
+  };
+
+  // Handle photo selection toggle
+  const handlePhotoSelect = (photoId) => {
+    setSelectedPhotos((prev) =>
+      prev.includes(photoId) ? prev.filter((id) => id !== photoId) : [...prev, photoId],
+    );
+  };
+
+  // Handle single photo delete
+  const handlePhotoDelete = async (photoId) => {
+    if (deletePhoto && confirm("Delete this photo?")) {
+      await deletePhoto(photoId);
+      setSelectedPhotos((prev) => prev.filter((id) => id !== photoId));
+    }
+  };
+
+  // Handle bulk delete
+  const handleBulkDelete = async () => {
+    if (
+      selectedPhotos.length > 0 &&
+      deleteMultiplePhotos &&
+      confirm(`Delete ${selectedPhotos.length} selected photo(s)?`)
+    ) {
+      await deleteMultiplePhotos(selectedPhotos);
+      setSelectedPhotos([]);
+    }
+  };
+
+  // Handle drag end - reorder photos
+  const handleDragEnd = async (event) => {
+    const { active, over } = event;
+
+    if (active.id !== over.id) {
+      const oldIndex = sortedPhotos.findIndex((p) => p.id === active.id);
+      const newIndex = sortedPhotos.findIndex((p) => p.id === over.id);
+
+      const newOrder = arrayMove(sortedPhotos, oldIndex, newIndex);
+      setSortedPhotos(newOrder);
+
+      // Update backend
+      if (reorderPhotos) {
+        await reorderPhotos(newOrder);
+      }
+    }
+  };
+
+  // Select all photos
+  const handleSelectAll = () => {
+    if (selectedPhotos.length === sortedPhotos.length) {
+      setSelectedPhotos([]);
+    } else {
+      setSelectedPhotos(sortedPhotos.map((p) => p.id));
+    }
+  };
+
+  const canUpload = sortedPhotos.length < maxFiles;
+  const hasSelection = selectedPhotos.length > 0;
+
+  return (
+    <div className="vasuzex-enhanced-photo-manager space-y-6">
+      {/* Header */}
+      <div className="flex items-start justify-between">
+        <div>
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">{title}</h3>
+          {description && <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">{description}</p>}
+        </div>
+
+        {/* Bulk Actions */}
+        {hasSelection && (
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-gray-600 dark:text-gray-400">
+              {selectedPhotos.length} selected
+            </span>
+            <button
+              type="button"
+              onClick={handleBulkDelete}
+              className="px-3 py-1.5 text-sm font-medium rounded-lg
+                         bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400
+                         hover:bg-red-100 dark:hover:bg-red-900/30
+                         transition-colors duration-200"
+            >
+              {TrashIcon && <TrashIcon className="w-4 h-4 inline mr-1" />}
+              Delete
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Upload Drop Zone */}
+      {canUpload && UploadDropZone && (
+        <UploadDropZone
+          onFilesSelected={handleFilesSelected}
+          disabled={loading}
+          maxFiles={maxFiles - sortedPhotos.length}
+        />
+      )}
+
+      {/* Info Bar */}
+      <div className="flex items-center justify-between text-sm">
+        <div className="text-gray-600 dark:text-gray-400">
+          {sortedPhotos.length} / {maxFiles} photos
+        </div>
+
+        {sortedPhotos.length > 0 && (
+          <button
+            type="button"
+            onClick={handleSelectAll}
+            className="text-brand-600 dark:text-brand-400 hover:text-brand-700 dark:hover:text-brand-300 font-medium"
+          >
+            {selectedPhotos.length === sortedPhotos.length ? "Deselect All" : "Select All"}
+          </button>
+        )}
+      </div>
+
+      {/* Uploading Files Progress */}
+      {uploadingFiles.length > 0 && UploadProgressCard && (
+        <div className={`grid ${gridCols} gap-4`}>
+          {uploadingFiles.map((file) => (
+            <UploadProgressCard key={file.id} file={file} />
+          ))}
+        </div>
+      )}
+
+      {/* Photos Grid with DnD */}
+      {sortedPhotos.length > 0 && PhotoCard && (
+        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+          <SortableContext items={sortedPhotos.map((p) => p.id)} strategy={rectSortingStrategy}>
+            <div className={`grid ${gridCols} gap-4`}>
+              {sortedPhotos.map((photo, index) => (
+                <PhotoCard
+                  key={photo.id}
+                  photo={{ ...photo, order: index }}
+                  isSelected={selectedPhotos.includes(photo.id)}
+                  onSelect={handlePhotoSelect}
+                  onDelete={handlePhotoDelete}
+                  disabled={loading}
+                />
+              ))}
+            </div>
+          </SortableContext>
+        </DndContext>
+      )}
+
+      {/* Empty State */}
+      {sortedPhotos.length === 0 && uploadingFiles.length === 0 && !loading && (
+        <div className="text-center py-12 text-gray-500 dark:text-gray-400">
+          <p>{emptyStateText}</p>
+        </div>
+      )}
+
+      {/* Loading State */}
+      {loading && sortedPhotos.length === 0 && (
+        <div className="text-center py-12">
+          <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-brand-600"></div>
+          <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">Loading photos...</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+EnhancedPhotoManager.propTypes = {
+  /** Entity ID (store, product, etc.) */
+  entityId: PropTypes.string.isRequired,
+  /** Photos hook with management functions */
+  photosHook: PropTypes.shape({
+    photos: PropTypes.array,
+    uploadingFiles: PropTypes.array,
+    loading: PropTypes.bool,
+    fetchPhotos: PropTypes.func,
+    uploadPhotos: PropTypes.func,
+    deletePhoto: PropTypes.func,
+    deleteMultiplePhotos: PropTypes.func,
+    reorderPhotos: PropTypes.func,
+  }).isRequired,
+  /** Section title */
+  title: PropTypes.string,
+  /** Section description */
+  description: PropTypes.string,
+  /** Empty state message */
+  emptyStateText: PropTypes.string,
+  /** Maximum number of photos */
+  maxFiles: PropTypes.number,
+  /** Grid columns CSS classes */
+  gridCols: PropTypes.string,
+  /** Custom components */
+  components: PropTypes.shape({
+    UploadDropZone: PropTypes.elementType,
+    PhotoCard: PropTypes.elementType,
+    UploadProgressCard: PropTypes.elementType,
+    TrashIcon: PropTypes.elementType,
+  }),
+};
+
+export default EnhancedPhotoManager;

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

@@ -8,11 +8,13 @@
 
 import { useState, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
+import { EnhancedPhotoManager } from './EnhancedPhotoManager.jsx';
 
 /**
  * Photo upload and management component
  * 
  * @param {Object} props
+ * @param {string} [props.variant='basic'] - 'basic' or 'enhanced' for advanced features
  * @param {Array<string|Object>} [props.photos=[]] - Initial photos (URLs or objects)
  * @param {Function} props.onPhotosChange - Callback when photos change
  * @param {Function} [props.onUpload] - Custom upload handler
@@ -24,6 +26,13 @@ import PropTypes from 'prop-types';
  * @param {boolean} [props.disabled] - Disable uploads
  * @param {Function} [props.getPhotoUrl] - Get URL from photo object
  * 
+ * Enhanced variant props:
+ * @param {string|number} props.entityId - Entity ID (for enhanced variant)
+ * @param {Object} props.photosHook - Custom photos hook (for enhanced variant)
+ * @param {string} [props.title] - Title for enhanced variant
+ * @param {string} [props.description] - Description for enhanced variant
+ * @param {Object} [props.components] - Custom components for enhanced variant
+ * 
  * @example
  * <PhotoManager
  *   photos={photos}
@@ -39,6 +48,7 @@ import PropTypes from 'prop-types';
  * />
  */
 export function PhotoManager({
+  variant = 'basic',
   photos = [],
   onPhotosChange,
   onUpload,
@@ -49,7 +59,12 @@ export function PhotoManager({
   className = '',
   disabled = false,
   getPhotoUrl = (photo) => typeof photo === 'string' ? photo : photo.url,
+  ...enhancedProps
 }) {
+  // If enhanced variant requested, use EnhancedPhotoManager
+  if (variant === 'enhanced') {
+    return <EnhancedPhotoManager maxFiles={maxPhotos} {...enhancedProps} />;
+  }
   const [uploading, setUploading] = useState(false);
   const [dragActive, setDragActive] = useState(false);
   const [error, setError] = useState(null);
@@ -292,6 +307,8 @@ PhotoManager.propTypes = {
       }),
     ])
   ),
+  /** Component variant - 'basic' for simple manager, 'enhanced' for advanced features */
+  variant: PropTypes.oneOf(['basic', 'enhanced']),
   /** Callback when photos change */
   onPhotosChange: PropTypes.func,
   /** Alternative prop name for onChange */
@@ -318,6 +335,23 @@ PhotoManager.propTypes = {
   getPhotoUrl: PropTypes.func,
   /** Helper text displayed below upload area */
   helperText: PropTypes.string,
+  // Enhanced variant props
+  /** Entity ID (required for enhanced variant) */
+  entityId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** Photos hook with photos, loading, error, upload, etc. (required for enhanced variant) */
+  photosHook: PropTypes.object,
+  /** Title for enhanced variant */
+  title: PropTypes.string,
+  /** Description for enhanced variant */
+  description: PropTypes.string,
+  /** Custom components for enhanced variant */
+  components: PropTypes.object,
+  /** Grid columns class for enhanced variant */
+  gridCols: PropTypes.string,
+  /** Empty state text for enhanced variant */
+  emptyStateText: PropTypes.string,
+  /** Max files for enhanced variant */
+  maxFiles: PropTypes.number,
 };
 
 PhotoManager.defaultProps = {

package/frontend/react-ui/components/PhotoManager/README.md

@@ -0,0 +1,423 @@
+# PhotoManager Component
+
+Reusable photo management component for all vasuzex-based applications.
+
+## Features
+
+- **Two Variants**: Basic and Enhanced
+- **Drag & Drop**: Reorder photos by dragging
+- **Bulk Operations**: Select multiple photos and delete them together
+- **Upload Progress**: Real-time upload tracking
+- **Custom Components**: Override default UI components
+- **Responsive Grid**: Configurable grid layouts
+- **Type Safety**: PropTypes validation
+
+## Installation
+
+```bash
+pnpm add @dnd-kit/core @dnd-kit/sortable react-dropzone
+```
+
+## Basic Usage
+
+Simple photo manager with upload and delete:
+
+```jsx
+import { PhotoManager } from 'vasuzex/react';
+
+function MyComponent() {
+  const [photos, setPhotos] = useState([]);
+  
+  return (
+    <PhotoManager
+      photos={photos}
+      onPhotosChange={setPhotos}
+      onUpload={async (file) => {
+        // Upload file and return URL
+        const formData = new FormData();
+        formData.append('photo', file);
+        const res = await fetch('/api/upload', { 
+          method: 'POST', 
+          body: formData 
+        });
+        const data = await res.json();
+        return data.url;
+      }}
+      maxPhotos={10}
+    />
+  );
+}
+```
+
+## Enhanced Usage
+
+Advanced photo manager with DnD, bulk operations, and custom components:
+
+```jsx
+import { PhotoManager } from 'vasuzex/react';
+import { useStorePhotos } from './hooks/useStorePhotos';
+import { PhotoCard, UploadDropZone, UploadProgressCard } from './components';
+import { TrashBinIcon } from './icons';
+
+function StorePhotosTab({ storeId }) {
+  const photosHook = useStorePhotos(storeId);
+  
+  return (
+    <PhotoManager
+      variant="enhanced"
+      entityId={storeId}
+      photosHook={photosHook}
+      title="Store Photos"
+      description="Upload and manage store photos. Drag to reorder display priority."
+      emptyStateText="Upload your first store photo"
+      maxFiles={20}
+      gridCols="grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5"
+      components={{
+        UploadDropZone,
+        PhotoCard,
+        UploadProgressCard,
+        TrashIcon: TrashBinIcon,
+      }}
+    />
+  );
+}
+```
+
+## Custom Photos Hook
+
+The enhanced variant requires a custom hook that provides photo management functions:
+
+```jsx
+import { useState, useEffect, useCallback } from 'react';
+import apiClient from '../config/api';
+
+export function useStorePhotos(storeId) {
+  const [photos, setPhotos] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [uploadingFiles, setUploadingFiles] = useState([]);
+  const [selectedPhotos, setSelectedPhotos] = useState([]);
+
+  // Fetch photos
+  const fetchPhotos = useCallback(async () => {
+    if (!storeId) return;
+    
+    setLoading(true);
+    setError(null);
+    
+    try {
+      const response = await apiClient.get(`/api/stores/${storeId}/photos`);
+      setPhotos(response.data.data || []);
+    } catch (err) {
+      setError(err.message);
+      console.error('Failed to fetch photos:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [storeId]);
+
+  // Upload photo
+  const uploadPhoto = async (file, type = 'gallery') => {
+    const uploadId = `${Date.now()}-${file.name}`;
+    
+    setUploadingFiles((prev) => [
+      ...prev,
+      {
+        id: uploadId,
+        name: file.name,
+        progress: 0,
+        status: 'uploading',
+      },
+    ]);
+
+    try {
+      const formData = new FormData();
+      formData.append('photo', file);
+      formData.append('type', type);
+
+      const response = await apiClient.post(
+        `/api/stores/${storeId}/photos`,
+        formData,
+        {
+          headers: { 'Content-Type': 'multipart/form-data' },
+          onUploadProgress: (progressEvent) => {
+            const percentCompleted = Math.round(
+              (progressEvent.loaded * 100) / progressEvent.total
+            );
+            setUploadingFiles((prev) =>
+              prev.map((f) =>
+                f.id === uploadId ? { ...f, progress: percentCompleted } : f
+              )
+            );
+          },
+        }
+      );
+
+      setUploadingFiles((prev) =>
+        prev.map((f) =>
+          f.id === uploadId ? { ...f, status: 'completed' } : f
+        )
+      );
+
+      await fetchPhotos();
+      
+      setTimeout(() => {
+        setUploadingFiles((prev) => prev.filter((f) => f.id !== uploadId));
+      }, 2000);
+
+      return response.data.data;
+    } catch (err) {
+      setUploadingFiles((prev) =>
+        prev.map((f) =>
+          f.id === uploadId ? { ...f, status: 'error' } : f
+        )
+      );
+      throw err;
+    }
+  };
+
+  // Delete photo
+  const deletePhoto = async (photoId) => {
+    try {
+      await apiClient.delete(`/api/stores/${storeId}/photos/${photoId}`);
+      await fetchPhotos();
+    } catch (err) {
+      console.error('Failed to delete photo:', err);
+      throw err;
+    }
+  };
+
+  // Bulk delete
+  const bulkDeletePhotos = async (photoIds) => {
+    try {
+      await apiClient.post(`/api/stores/${storeId}/photos/bulk-delete`, {
+        photoIds,
+      });
+      await fetchPhotos();
+      setSelectedPhotos([]);
+    } catch (err) {
+      console.error('Failed to bulk delete photos:', err);
+      throw err;
+    }
+  };
+
+  // Reorder photos
+  const reorderPhotos = async (photoIds) => {
+    try {
+      await apiClient.post(`/api/stores/${storeId}/photos/reorder`, {
+        photoIds,
+      });
+      await fetchPhotos();
+    } catch (err) {
+      console.error('Failed to reorder photos:', err);
+      throw err;
+    }
+  };
+
+  // Set primary photo
+  const setPrimaryPhoto = async (photoId) => {
+    try {
+      await apiClient.post(`/api/stores/${storeId}/photos/${photoId}/set-primary`);
+      await fetchPhotos();
+    } catch (err) {
+      console.error('Failed to set primary photo:', err);
+      throw err;
+    }
+  };
+
+  // Fetch photos on mount
+  useEffect(() => {
+    fetchPhotos();
+  }, [fetchPhotos]);
+
+  return {
+    photos,
+    loading,
+    error,
+    uploadingFiles,
+    selectedPhotos,
+    setSelectedPhotos,
+    uploadPhoto,
+    deletePhoto,
+    bulkDeletePhotos,
+    reorderPhotos,
+    setPrimaryPhoto,
+    refetch: fetchPhotos,
+  };
+}
+```
+
+## Custom Components
+
+### PhotoCard
+
+```jsx
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+
+export function PhotoCard({ 
+  photo, 
+  isSelected, 
+  onSelect, 
+  onDelete,
+  TrashIcon 
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: photo.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
+      {/* Your photo card UI */}
+    </div>
+  );
+}
+```
+
+### UploadDropZone
+
+```jsx
+import { useDropzone } from 'react-dropzone';
+
+export function UploadDropZone({ onDrop, maxFiles, UploadIcon }) {
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    accept: { 'image/*': [] },
+    multiple: true,
+    maxFiles,
+  });
+
+  return (
+    <div {...getRootProps()}>
+      <input {...getInputProps()} />
+      {/* Your dropzone UI */}
+    </div>
+  );
+}
+```
+
+### UploadProgressCard
+
+```jsx
+export function UploadProgressCard({ file }) {
+  return (
+    <div>
+      <div>{file.name}</div>
+      <div>Progress: {file.progress}%</div>
+      <div>Status: {file.status}</div>
+    </div>
+  );
+}
+```
+
+## Props
+
+### Basic Variant
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| variant | `'basic' \| 'enhanced'` | `'basic'` | Component variant |
+| photos | `Array` | `[]` | Initial photos (URLs or objects) |
+| onPhotosChange | `Function` | - | Callback when photos change |
+| onUpload | `Function` | - | Custom upload handler |
+| maxPhotos | `Number` | `10` | Maximum number of photos |
+| maxFileSize | `Number` | `5242880` | Max file size (bytes) |
+| acceptedTypes | `Array<string>` | Image types | Accepted MIME types |
+| multiple | `Boolean` | `true` | Allow multiple uploads |
+| className | `String` | `''` | Additional CSS classes |
+| disabled | `Boolean` | `false` | Disable uploads |
+
+### Enhanced Variant
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| variant | `'enhanced'` | - | Must be 'enhanced' |
+| entityId | `String \| Number` | - | Entity ID (required) |
+| photosHook | `Object` | - | Custom photos hook (required) |
+| title | `String` | - | Section title |
+| description | `String` | - | Section description |
+| emptyStateText | `String` | - | Empty state message |
+| maxFiles | `Number` | `10` | Maximum files allowed |
+| gridCols | `String` | - | Tailwind grid columns class |
+| components | `Object` | - | Custom components |
+
+### Components Object
+
+```typescript
+{
+  UploadDropZone?: Component,
+  PhotoCard?: Component,
+  UploadProgressCard?: Component,
+  TrashIcon?: Component,
+}
+```
+
+## Use Cases
+
+### Admin App - Store Photos
+```jsx
+<PhotoManager variant="enhanced" entityId={storeId} photosHook={useStorePhotos(storeId)} />
+```
+
+### Business App - Business Profile Photos
+```jsx
+<PhotoManager variant="enhanced" entityId={businessId} photosHook={useBusinessPhotos(businessId)} />
+```
+
+### Customer App - Product Photos (if needed)
+```jsx
+<PhotoManager variant="enhanced" entityId={productId} photosHook={useProductPhotos(productId)} />
+```
+
+### Registration - Business Registration Photos
+```jsx
+<PhotoManager variant="enhanced" entityId={registrationId} photosHook={useRegistrationPhotos(registrationId)} />
+```
+
+## Backend Requirements
+
+The enhanced variant expects these API endpoints:
+
+```
+GET    /api/{entity}/{id}/photos           - List photos
+POST   /api/{entity}/{id}/photos           - Upload photo
+DELETE /api/{entity}/{id}/photos/{photoId} - Delete photo
+POST   /api/{entity}/{id}/photos/bulk-delete - Bulk delete
+POST   /api/{entity}/{id}/photos/reorder   - Reorder photos
+POST   /api/{entity}/{id}/photos/{photoId}/set-primary - Set primary
+```
+
+## Database Schema
+
+```sql
+CREATE TABLE entity_photos (
+  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+  entity_id UUID NOT NULL REFERENCES entities(id) ON DELETE CASCADE,
+  url TEXT NOT NULL,
+  type VARCHAR(50) DEFAULT 'gallery',
+  display_order INTEGER DEFAULT 0,
+  is_primary BOOLEAN DEFAULT false,
+  metadata JSONB,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  deleted_at TIMESTAMP
+);
+
+CREATE INDEX idx_entity_photos_entity ON entity_photos(entity_id) WHERE deleted_at IS NULL;
+CREATE INDEX idx_entity_photos_order ON entity_photos(entity_id, display_order) WHERE deleted_at IS NULL;
+```
+
+## License
+
+MIT

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

@@ -7,4 +7,5 @@
  */
 
 export { PhotoManager } from './PhotoManager.jsx';
+export { EnhancedPhotoManager } from './EnhancedPhotoManager.jsx';
 export { default } from './PhotoManager.jsx';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vasuzex",
-  "version": "2.1.4",
+  "version": "2.1.5",
   "description": "Laravel-inspired framework for Node.js monorepos - V2 with optimized dependencies",
   "type": "module",
   "main": "./framework/index.js",
@@ -89,6 +89,10 @@
     "pnpm": ">=10.0.0"
   },
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.948.0",
+    "@aws-sdk/s3-request-presigner": "^3.948.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
     "@reduxjs/toolkit": "^2.5.0",
     "axios": "^1.13.2",
     "bcrypt": "^6.0.0",
@@ -114,15 +118,20 @@
     "ora": "^8.2.0",
     "pg": "^8.16.3",
     "plop": "^4.0.1",
+    "prop-types": "^15.8.1",
     "razorpay": "^2.9.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.5.0",
     "react-router-dom": "^6.28.0",
+    "react-toastify": "^11.0.5",
     "redux-persist": "^6.0.0",
     "sharp": "^0.33.5",
     "stripe": "^20.0.0",
     "svelte": "^4.2.0",
-    "vue": "^3.4.0"
+    "sweetalert2": "^11.26.3",
+    "vue": "^3.4.0",
+    "yup": "^1.7.1"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",