feat: ListVirtual with additional warning check

src/App.jsx

@@ -42,6 +42,13 @@ const Testing = () => {
                             columns: ["min_speed", "max_speed"],
                             },
                         ]}
+                        warningCheck={(row) =>
+                            row.vehicle_type_height_dimension <= 0 ||
+                            row.vehicle_type_length_dimension <= 0 ||
+                            row.vehicle_type_width_dimension <= 0
+                            ? "No compatible capacity"
+                            : null
+                        }
                         multiple
                     />
                 </ApiProvider>

src/components/ListVirtual.jsx

@@ -40,6 +40,7 @@ export default function ListVirtual({
   multiple,
   customSxTextField = {},
   joins = [],
+  warningCheck,
 }) {
   const headersRequest = useApiHeaders();
   const [open, setOpen] = useState(false);
@@ -224,6 +225,15 @@ export default function ListVirtual({
     getData?.(multiple ? [] : null);
   };
 
+  // NEW: helper untuk memanggil warningCheck dengan aman
+  const getRowWarning = useCallback(
+    (row) => {
+      if (typeof warningCheck !== "function") return null;
+      return warningCheck(row) || null;
+    },
+    [warningCheck]
+  );
+
   const displayValue = multiple
     ? (selected?.length > 1
         ? `${selected.length} ${label} selected`
@@ -419,19 +429,44 @@ export default function ListVirtual({
                 </ListItemButton>
               )}
 
-              {rows.map((row, i) => (
+              {rows.map((row, i) => {
-                <ListItemButton
+                const warning = getRowWarning(row);
-                  key={`${row.id}-${i}`}
-                  onClick={() => handleSelect(row)}
-                  disabled={selectAllLoading}
-                >
-                  {multiple && (
-                    <Checkbox checked={isSelected(row)} />
-                  )}
 
-                  <ListItemText primary={row[name]} secondary={row.join?.company_name} />
+                return (
-                </ListItemButton>
+                  <ListItemButton
-              ))}
+                    key={`${row.id}-${i}`}
+                    onClick={() => handleSelect(row)}
+                    disabled={selectAllLoading}
+                  >
+                    {multiple && (
+                      <Checkbox checked={isSelected(row)} />
+                    )}
+
+                    <ListItemText
+                      primary={
+                        <Typography
+                          component="span"
+                          sx={{
+                            fontSize: 14,
+                            color: warning ? "error.main" : "text.primary",
+                          }}
+                        >
+                          {row[name]}
+                          {warning && (
+                            <Typography
+                              component="span"
+                              sx={{ fontSize: 12, color: "error.main", ml: 0.5 }}
+                            >
+                              {" "}| {warning}
+                            </Typography>
+                          )}
+                        </Typography>
+                      }
+                      secondary={row.join?.company_name}
+                    />
+                  </ListItemButton>
+                );
+              })}
               
               {loading && (
                 <Typography variant="caption" sx={{ display: 'block', textAlign: 'center', p: 1 }}>