feat: ListVirtual with additional warning check

src/App.jsx

@@ -5,7 +5,7 @@ import { useState } from "react";
 
 const Testing = () => {
         const token = API_TOKEN;
-        const [selectedVehicle, setSelectedVehicle] = useState(null);
+        const [selectedVehicle, setSelectedVehicle] = useState([]);
 
         return (
             <div style={{ padding: 8, marginTop: 12 }}>
@@ -14,29 +14,42 @@ const Testing = () => {
                         Authorization: `Bearer ${token}`,
                     }}
                 >
-{/*                     <ListVirtual
+                    <ListVirtual
                         id="company-select"
                         label="Company"
                         name="name"
                         url="/company"
-                        defaultValue={"442"}
+                        defaultValue={[442,722]}
                         size="small"
                         multiple
-                    /> */}
+                    /> 
                     <ListVirtual
                         label="License Plate"
                         name="license_plate"
                         url="/vehicle"
                         defaultValue={selectedVehicle}
                         getData={(data) => {
-                            if (data) {
+                            const ids = data.map(item => item.id);
-                                setSelectedVehicle(data.id);
+                            setSelectedVehicle(ids);
-                            }
                         }}
                         size="small"
                         filter={[
-                            {name:"company_id",value: "740","logic_operator":"=","operator":"AND"}
+                            {name:"company_id",value: "442,722","logic_operator":"IN","operator":"AND"}
                         ]}
+                        joins={[
+                            {
+                            table: "vehicle_type",
+                            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>
             </div>

src/components/ListVirtual.jsx

@@ -8,11 +8,13 @@ import {
   Button,
   List,
   ListItemButton,
+  ListItemIcon,
   ListItemText,
   Typography,
   InputAdornment,
   IconButton,
-  Checkbox
+  Checkbox,
+  CircularProgress,
 } from "@mui/material";
 import ClearIcon from "@mui/icons-material/Clear";
 import FilterTableBuilder from "../utils/filterTableBuilder";
@@ -35,7 +37,10 @@ export default function ListVirtual({
   helperText,
   filter,
 	isApiGo = false,
-  multiple
+  multiple,
+  customSxTextField = {},
+  joins = [],
+  warningCheck,
 }) {
   const headersRequest = useApiHeaders();
   const [open, setOpen] = useState(false);
@@ -43,6 +48,7 @@ export default function ListVirtual({
   const [rows, setRows] = useState([]);
   const [selected, setSelected] = useState(null);
   const [loading, setLoading] = useState(false);
+  const [selectAllLoading, setSelectAllLoading] = useState(false);
   const [offset, setOffset] = useState(0);
   const [totalRecord, setTotalRecord] = useState(0);
 
@@ -71,6 +77,14 @@ export default function ListVirtual({
       filter.forEach(f => payload.where(f.logic_operator || "=", f.name, f.value, f.operator || "AND", f.value1 || null, f.table_name || null));
     }
 
+    if (Array.isArray(filter) && filter.some(f => f.name === "company_id")) {
+      payload.addJoin("company", ["name"]);
+    }
+
+    joins.forEach(join => {
+      payload.addJoin(join.table, join.columns);
+    });
+
     try {
       const res = await apiRequest.search(
 				url, 
@@ -82,8 +96,6 @@ export default function ListVirtual({
 			);
       const incomingData = res.data || [];
       
-      console.log("res", res)
-      
       setRows(prev => isAppend ? [...prev, ...incomingData] : incomingData);
       setTotalRecord(res.totalRecord || 0);
       setOffset(currentOffset);
@@ -97,22 +109,11 @@ export default function ListVirtual({
   const handleScroll = (e) => {
     const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
 
-    console.log({
-      scrollTop,
-      scrollHeight,
-      clientHeight,
-      rows: rows.length,
-      totalRecord,
-      loading,
-    });
-
     const isAtBottom = scrollHeight - scrollTop <= clientHeight + 20;
 
     if (isAtBottom && !loading && rows.length < totalRecord) {
       const nextOffset = offset + lengthData;
 
-      console.log("LOAD MORE", nextOffset);
-
       fetchData(search, nextOffset, true);
     }
   };
@@ -133,51 +134,63 @@ export default function ListVirtual({
     }
   }, [open]);
 
-  const fetchById = async (id) => {
+  const fetchDefaultValue = async (value) => {
     setLoading(true);
 
-    const payload = new FilterTableBuilder()
+    const payload = new FilterTableBuilder().setPaging(0, lengthData);
-      .setPaging(0, 1)
+
-      .equal("id", id);
+    if (multiple) {
+      payload.in("id", value);        // value = [1,2,3]
+    } else {
+      payload.equal("id", value);     // value = 1
+    }
 
     try {
       const res = await apiRequest.search(
-				url, 
+        url,
-				payload.build(),
+        payload.build(),
         {
-          headers: headersRequest
+          headers: headersRequest,
         },
         isApiGo,
-			);
+      );
 
-      const data = res.data?.[0];
+      const data = res.data || [];
 
-      if (data) {
+      setSelected(multiple ? data : data[0] || null);
-        setSelected(data);
-      }
     } catch (err) {
       console.error(err);
+    } finally {
+      setLoading(false);
     }
-
-    setLoading(false);
   };
 
   useEffect(() => {
-    if (!defaultValue) return;
+    if (defaultValue == null) return;
 
     if (multiple) {
-      if (Array.isArray(defaultValue)) {
+      // kosong, jangan request
+      if (Array.isArray(defaultValue) && defaultValue.length === 0) {
+        setSelected([]);
+        return;
+      }
+
+      // object
+      if (
+        Array.isArray(defaultValue) &&
+        typeof defaultValue[0] === "object"
+      ) {
         setSelected(defaultValue);
-      } else {
+        return;
-        setSelected([defaultValue]);
       }
     } else {
-      if (Array.isArray(defaultValue)) {
+      if (typeof defaultValue === "object" && !Array.isArray(defaultValue)) {
-        setSelected(defaultValue[0] || null);
-      } else {
         setSelected(defaultValue);
+        return;
       }
     }
+
+    fetchDefaultValue(defaultValue);
   }, [defaultValue, multiple]);
 
   const handleSelect = (row) => {
@@ -212,11 +225,21 @@ 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 || [])
+    ? (selected?.length > 1
-        .map((x) => x[name]?.trim())
+        ? `${selected.length} ${label} selected`
-        .filter(Boolean)
+        : selected?.length === 1
-        .join(", ")
+        ? selected[0][name]
+        : "")
     : selected?.[name] || "";
 
   const isSelected = (row) => {
@@ -227,6 +250,78 @@ export default function ListVirtual({
     return (selected || []).some((x) => x.id === row.id);
   };
 
+  // Whether every record matching the current search/filter is currently selected
+  const isAllSelected =
+    multiple && totalRecord > 0 && (selected?.length || 0) === totalRecord;
+
+  const isPartiallySelected =
+    multiple && (selected?.length || 0) > 0 && !isAllSelected;
+
+  const handleSelectAll = async () => {
+    // Toggle off: if everything is already selected, clicking again clears selection
+    if (isAllSelected) {
+      setSelected([]);
+      getData?.([]);
+      return;
+    }
+
+    setSelectAllLoading(true);
+
+    try {
+      const pageSize = 1000;
+      const requests = [];
+
+      for (let pageOffset = 0; pageOffset < totalRecord; pageOffset += pageSize) {
+        const payload = new FilterTableBuilder()
+          .setPaging(pageOffset, pageSize)
+          .setOrder([name], true);
+
+        if (search) {
+          payload.like(name, search);
+        }
+
+        if (filter?.length) {
+          filter.forEach(f =>
+            payload.where(
+              f.logic_operator || "=",
+              f.name,
+              f.value,
+              f.operator || "AND",
+              f.value1 || null,
+              f.table_name || null
+            )
+          );
+        }
+
+        joins.forEach(join => {
+          payload.addJoin(join.table, join.columns);
+        });
+
+        requests.push(
+          apiRequest.search(
+            url,
+            payload.build(),
+            {
+              headers: headersRequest,
+            },
+            isApiGo
+          )
+        );
+      }
+
+      const responses = await Promise.all(requests);
+
+      const allRows = responses.flatMap(res => res.data || []);
+
+      setSelected(allRows);
+      getData?.(allRows);
+    } catch (err) {
+      console.error("Select All Error:", err);
+    } finally {
+      setSelectAllLoading(false);
+    }
+  };
+
   return (
     <>
       <TextField
@@ -241,6 +336,7 @@ export default function ListVirtual({
         error={!!error}
         onClick={() => !disabled && setOpen(true)}
         sx={{
+          ...customSxTextField,
           '& .MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline': {
             borderColor: 'error.main',
           }
@@ -302,27 +398,75 @@ export default function ListVirtual({
 
           <List disablePadding>
             <>            
-              {multiple && (
+              {multiple && rows.length > 0 && (
                 <ListItemButton
-                  onClick={() => console.log("")}
+                  onClick={handleSelectAll}
+                  disabled={selectAllLoading || totalRecord === 0}
                   sx={{ fontSize: 14 }}
                 >
-                  Select All
+                  <ListItemIcon sx={{ minWidth: 36 }}>
+                    {selectAllLoading ? (
+                      <CircularProgress size={18} />
+                    ) : (
+                      <Checkbox
+                        edge="start"
+                        checked={isAllSelected}
+                        indeterminate={isPartiallySelected}
+                        tabIndex={-1}
+                        disableRipple
+                      />
+                    )}
+                  </ListItemIcon>
+                  <ListItemText
+                    primary={
+                      selectAllLoading
+                        ? "Selecting all..."
+                        : isAllSelected
+                        ? "Unselect All"
+                        : "Select All"
+                    }
+                  />
                 </ListItemButton>
               )}
 
-              {rows.map((row, i) => (
+              {rows.map((row, i) => {
-                <ListItemButton
+                const warning = getRowWarning(row);
-                  key={`${row.id}-${i}`}
-                  onClick={() => handleSelect(row)}
-                >
-                  {multiple && (
-                    <Checkbox checked={isSelected(row)} />
-                  )}
 
-                  <ListItemText primary={row[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 }}>
@@ -340,8 +484,18 @@ export default function ListVirtual({
         </DialogContent>
 
         <DialogActions>
-          <Button onClick={handleClear} size="small">Clear</Button>
+          <Button onClick={handleClear} disabled={selectAllLoading}>Clear</Button>
-          <Button onClick={() => setOpen(false)} size="small">Cancel</Button>
+          <Button onClick={() => setOpen(false)}>Cancel</Button>
+          <Button
+            onClick={() => {
+              getData?.(selected ?? (multiple ? [] : null));
+              setOpen(false);
+            }}
+            variant="contained"
+            disabled={selectAllLoading}
+          >
+            Save
+          </Button>
         </DialogActions>
       </Dialog>
     </>

src/main.jsx

@@ -60,7 +60,7 @@ const theme = createTheme({
     MuiOutlinedInput: {
       styleOverrides: {
         root: {
-          borderRadius: 12
+          borderRadius: 4
         }
       }
     }

src/utils/response.js

@@ -1,7 +1,6 @@
 export const formatApiResponse = (responseOrError) => {
   if (responseOrError?.status) {
     const { status, data, message } = responseOrError;
-    console.log("status", responseOrError.status)
     
     if (status >= 200 && status < 300) {
       return {