added required fields

src/components/forms/fields/SmartGridField.tsx

@@ -22,6 +22,7 @@ export function SmartGridField({
   const formRef = useRef<HTMLDivElement>(null);
   const [newRow, setNewRow] = useState<Record<string, unknown>>({});
   const [editingIdx, setEditingIdx] = useState<number | null>(null);
+  const [errors, setErrors] = useState<Record<string, string>>({});
 
   const visibleColumns = columns.filter(c => {
     const isOrderDetails = label.toLowerCase().includes('order');
@@ -61,6 +62,7 @@ export function SmartGridField({
 
   const updateNewRowField = (fieldId: string, val: unknown) => {
     let row = { ...newRow, [fieldId]: val };
+    setErrors(prev => ({ ...prev, [fieldId]: '' }));
     
     const colDef = columns.find(c => c.id === fieldId);
 
@@ -122,6 +124,26 @@ export function SmartGridField({
   };
 
   const submitNewRow = () => {
+    const newErrors: Record<string, string> = {};
+    const getBaseId = (id: string) => id.replace(/_\d+$/, '');
+    const catColId = columns.find(c => c.id === 'product_category' || c.name === 'Product Category' || c.mapped_workflow_field === 'product_category' || getBaseId(c.id) === 'product_category')?.id;
+    const isCatSelected = catColId ? !!newRow[catColId] : false;
+
+    for (const col of visibleColumns) {
+      const isProductName = col.id === 'product_name' || col.name === 'Product Name' || col.mapped_workflow_field === 'product_name' || getBaseId(col.id) === 'product_name';
+      const isBags = col.id === 'bags' || col.name === 'Bags' || col.mapped_workflow_field === 'bags' || getBaseId(col.id) === 'bags';
+      const isRequired = col.mandatory || (isCatSelected && (isProductName || isBags));
+      
+      if (isRequired && !newRow[col.id]) {
+        newErrors[col.id] = 'This field is required';
+      }
+    }
+
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors);
+      return;
+    }
+
     if (editingIdx !== null) {
       const next = [...value];
       next[editingIdx] = newRow;
@@ -255,6 +277,14 @@ export function SmartGridField({
             <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 items-end">
             {visibleColumns.map(col => {
               const val = newRow[col.id];
+              
+              const getBaseId = (id: string) => id.replace(/_\d+$/, '');
+              const catColId = columns.find(c => c.id === 'product_category' || c.name === 'Product Category' || c.mapped_workflow_field === 'product_category' || getBaseId(c.id) === 'product_category')?.id;
+              const isCatSelected = catColId ? !!newRow[catColId] : false;
+              const isProductName = col.id === 'product_name' || col.name === 'Product Name' || col.mapped_workflow_field === 'product_name' || getBaseId(col.id) === 'product_name';
+              const isBags = col.id === 'bags' || col.name === 'Bags' || col.mapped_workflow_field === 'bags' || getBaseId(col.id) === 'bags';
+              const isRequired = col.mandatory || (isCatSelected && (isProductName || isBags));
+
               if (col.data_type === 'select' || col.data_type === 'multiselect') {
                 const allOpts = col.properties?.options || [];
                 let filteredOpts = allOpts;
@@ -288,7 +318,8 @@ export function SmartGridField({
                   <Select
                     key={col.id}
                     label={col.name}
-                    required={col.mandatory}
+                    required={isRequired}
+                    error={errors[col.id]}
                     value={(val as string) ?? ''}
                     onChange={(e) => updateNewRowField(col.id, e.target.value)}
                     options={[{ value: '', label: 'Select...' }, ...filteredOpts.map((o: any) => ({ value: String(o.value), label: o.label }))]}
@@ -299,7 +330,8 @@ export function SmartGridField({
                 <Input
                   key={col.id}
                   label={col.name}
-                  required={col.mandatory}
+                  required={isRequired}
+                  error={errors[col.id]}
                   type={col.data_type === 'number' ? 'number' : col.data_type === 'email' ? 'email' : 'text'}
                   value={(val as string) ?? ''}
                   onChange={(e) => updateNewRowField(col.id, col.data_type === 'number' ? Number(e.target.value) : e.target.value)}