import {
  Link,
  MenuItem,
  Skeleton,
  Stack,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Typography,
} from "@mui/material";
import { useState } from "react";
import PageContainer from "../../src/components/containers/PageContainer";
import Permissions from "../../src/components/users/permissions";
import { useAlert } from "../../src/helpers/alert.provider";
import ActionMenu from "../../src/layouts/full/ActionMenu";
import BlankCard from "../../src/layouts/full/BlankCard";
import ParentCard from "../../src/layouts/full/ParentCard";
import {
  useGetRolePermissions,
  useSaveRolePermissions,
} from "../../src/store/permission.store";
import { useGetRoles } from "../../src/store/user.store";
import { LABELS_CONFIG } from "../../src/utils/constants";

export default Index;

function Index() {
  const { roles, isLoading } = useGetRoles();
  const { showSuccess, showError } = useAlert();
  const { saveRolePermissions, isLoading: isSavingPermissions } =
    useSaveRolePermissions();
  const {
    getRolePermissions,
    isLoading: isLoadingPerm,
    rolePermissions,
  } = useGetRolePermissions();
  const [showPermissionModal, setShowPermissionModal] = useState<boolean>(false);
  const [selectedRoleId, setSelectedRoleId] = useState<string | undefined>(undefined);

  const OnSavePermissions = async (permissions: string[]) => {
    if (selectedRoleId) {
      try {
        await saveRolePermissions(
          {
            roleId: selectedRoleId,
            permissions: permissions,
          },
          {
            onSuccess: () => {
              showSuccess(LABELS_CONFIG.success.rolePermission);
              setShowPermissionModal(false);
              setSelectedRoleId(undefined);
            },
          }
        );
      } catch (error: any) {
        const errMessage =
          error?.response?.data?.message || LABELS_CONFIG.errors.genericErrorMessage;
        showError(errMessage);
      }
    }
  };

  return (
    <PageContainer>
      <ParentCard
        title="User Roles"
        action={
          <>
            <Link href="/users" underline="none" className="btn btn-sm btn-success mb-2">
              Back to Users
            </Link>
          </>
        }
      >
        <BlankCard>
          {isLoading ? (
            <Skeleton
              variant="rounded"
              animation="wave"
              width="100%"
              height={220}
            ></Skeleton>
          ) : (
            <>
              <TableContainer>
                <Table
                  aria-label="custom pagination table"
                  sx={{
                    whiteSpace: "nowrap",
                  }}
                  size="small"
                >
                  <TableHead>
                    <TableRow>
                      <TableCell>
                        <Typography variant="h6">Name</Typography>
                      </TableCell>
                      <TableCell align="right">
                        <Typography variant="h6" align="right">
                          Actions
                        </Typography>
                      </TableCell>
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    {roles &&
                      roles.map((row) => (
                        <TableRow key={row.id}>
                          <TableCell>
                            <Stack direction="row" spacing={2} alignItems="center">
                              <Typography variant="subtitle2" fontWeight="600">
                                {row.name}
                              </Typography>
                            </Stack>
                          </TableCell>
                          <TableCell align="right">
                            <ActionMenu>
                              <MenuItem
                                key="1"
                                onClick={() => {
                                  setSelectedRoleId(row.id);
                                  getRolePermissions(row.id);
                                  setShowPermissionModal(true);
                                }}
                              >
                                Permissions
                              </MenuItem>
                            </ActionMenu>
                          </TableCell>
                        </TableRow>
                      ))}
                  </TableBody>
                </Table>
              </TableContainer>
              <Permissions
                existingPermissions={rolePermissions?.map((c) => c.id)}
                isLoadingPerm={isLoadingPerm}
                onSave={OnSavePermissions}
                showModal={showPermissionModal}
                isSaving={isSavingPermissions}
                onClose={() => {
                  setShowPermissionModal(false);
                }}
                disabledPermissions={[]}
              />
            </>
          )}
        </BlankCard>
      </ParentCard>
    </PageContainer>
  );
}

Make below changes 
- Make it page for Stock Transfers
- Table fields 
	Created
	From Warehouse
	To Warehouse
	Booked Out
	Booked In
	Status
Create/Edit functionality use  InventoryStockTransfer component and add support for edit 

interface InventoryStockTransferProps {
  open: boolean;
  onClose: () => void;
  onSuccess: () => void;
  productId?: string;
  showCancelledOption?: boolean;
}

const InventoryStockTransfer: React.FC<InventoryStockTransferProps> = ({ open, onClose, productId, onSuccess, showCancelledOption }) => {
  const [selectedProducts, setSelectedProducts] = useState<DTO.ProductDetail[]>([]);
  const [searchValue, setSearchValue] = useState("");
  const [searchResults, setSearchResults] = useState<DTO.ProductDetail[]>([]);
  const [productError, setProductError] = useState<string>();
  const [status, setStatus] = useState("0");
  const [fromWarehouseId, setFromWarehouseId] = useState<string>();
  const [toWarehouseId, setToWarehouseId] = useState<string>();
  const [notes, setNotes] = useState("");
  const { getOrgProducts, isLoading } = useGetOrgProducts();
  const { getWarehouse, warehouses, isLoading: isLoadingWarehouse } = useGetWarehouse();
  const { addTransfer, isLoading: isSaving } = useAddTransfer();

  useEffect(() => {
    getWarehouse();
  }, []);

  const debounce = (func, delay) => {
    let timer;
    return (...args) => {
      clearTimeout(timer);
      timer = setTimeout(() => func(...args), delay);
    };
  };

  const fetchProducts = useCallback(
    debounce(async (query) => {
      if (query.trim()) {
        await getOrgProducts({ searchText: query }, {
          onSuccess: (response) => {
            setSearchResults(response.data.data);
          },
        });
      }
    }, 500),
    []
  );

  const handleSearchInputChange = (event, newInputValue) => {
    if (event?.type === 'change') {
      setSearchValue(newInputValue);
      setSearchResults([]);
      fetchProducts(newInputValue);
    }
  };

  const handleTransfer = () => {
    if (!fromWarehouseId || !toWarehouseId) {
      setProductError("Please choose warehouses to continue");
      return;
    }

    if (fromWarehouseId === toWarehouseId) {
      setProductError("From and To warehouse cannot be the same");
      return;
    }

    if (selectedProducts.length < 1) {
      setProductError("Please add at least one product");
      return;
    }

    addTransfer({
      fromWarehouseId,
      toWarehouseId,
      status,
      notes,
      items: selectedProducts.map((product) => ({
        productId: product.id,
        qty: product.minQuantity || 1
      }))
    }, {
      onSuccess: () => {
        onSuccess();
      }
    });
  };

  const handleAddProduct = (product) => {
    const isExisting = selectedProducts.some((p) => p.id === product.id);
    if (!isExisting) {
      setSelectedProducts([...selectedProducts, { ...product, minQuantity: 1 }]);
    }
    setSearchValue("");
    setProductError("");
  };

  const handleRemoveProduct = (id) => {
    setSelectedProducts(selectedProducts.filter((p) => p.id !== id));
  };

  const handleQuantityChange = (id, value) => {
    setSelectedProducts(
      selectedProducts.map((p) => (p.id === id ? { ...p, minQuantity: parseInt(value, 10) || 1 } : p))
    );
  };

  return (
    <Dialog open={open} onClose={onClose} disableRestoreFocus maxWidth="lg">
      <DialogTitle>Stock Transfer</DialogTitle>
      <DialogContent sx={{ width: "800px" }}>
        <Grid container spacing={2}>
          <Grid item xs={12} sm={6}>
            <FormControl fullWidth>
              <CustomFormLabel>
                From Warehouse
              </CustomFormLabel>
              <CustomSelect
                value={fromWarehouseId}
                fullWidth
                onChange={(event) => {
                  setFromWarehouseId(event.target.value);
                }}
              >
                {warehouses?.map((warehouse) => (
                  <MenuItem key={warehouse.warehouseId} value={warehouse.warehouseId}>
                    {warehouse.name}
                  </MenuItem>
                ))}
              </CustomSelect>
            </FormControl>
          </Grid>

          <Grid item xs={12} sm={6}>
            <FormControl fullWidth>
              <CustomFormLabel>
                To Warehouse
              </CustomFormLabel>
              <CustomSelect
                fullWidth
                value={toWarehouseId}
                onChange={(event) => {
                  setToWarehouseId(event.target.value);
                }}
              >
                {warehouses?.map((warehouse) => (
                  <MenuItem key={warehouse.warehouseId} value={warehouse.warehouseId}>
                    {warehouse.name}
                  </MenuItem>
                ))}
              </CustomSelect>
            </FormControl>
          </Grid>

          <Grid item xs={12}>
            <FormControl fullWidth>
              <CustomFormLabel>
                Status
              </CustomFormLabel>
              <RadioGroup
                row
                value={status}
                onChange={(e) => setStatus(e.target.value)}
              >
                {Object.entries(TRANSFER_STATUS_OPTIONS).map(([key, value]) => (
                  (showCancelledOption || key !== 'CANCELLED') ? (
                    <FormControlLabel
                      key={key}
                      control={<Radio />}
                      label={value}
                      value={key}
                    />
                  ) : null
                ))}
              </RadioGroup>
            </FormControl>
          </Grid>

          <Grid item xs={12}>
            <FormControl fullWidth>
              <CustomFormLabel>
                Notes
              </CustomFormLabel>
              <TextField
                value={notes}
                onChange={(e) => setNotes(e.target.value)}
                fullWidth
                multiline
                rows={1}
                placeholder="Optional notes..."
              />
            </FormControl>
          </Grid>
        </Grid>

        {!productId && (
          <FormControl fullWidth>
            <CustomFormLabel>
              Search Products
            </CustomFormLabel>
            <Autocomplete
              options={searchResults}
              getOptionLabel={(option) => {
                if (typeof option === 'string') return option;
                return option.name || "";
              }}
              value={null}
              onChange={(event, newValue) => handleAddProduct(newValue)}
              inputValue={searchValue}
              onInputChange={handleSearchInputChange}
              renderOption={(props, option) => (
                <li {...props}>
                  <Box display="flex" alignItems="center">
                    {option.imageUrl && (
                      <Image
                        src={option.imageUrl}
                        alt={option.name}
                        height={50}
                        width={50}
                      />
                    )}
                    <Grid container spacing={1} ml={1}>
                      <Grid item xs={12}>
                        <TruncatedText text={option.name} maxLength={80} disableTooltip />
                      </Grid>
                      <Grid item xs={6}>
                        <Typography variant="body1">
                          <strong>SKU</strong>: {option.sku}
                        </Typography>
                      </Grid>
                      <Grid item xs={6}>
                        <Typography variant="body1">
                          <strong>Store</strong>: {option.storeName}
                        </Typography>
                      </Grid>
                    </Grid>
                  </Box>
                </li>
              )}
              renderInput={(params) => (
                <TextField
                  {...params}
                  fullWidth
                  placeholder="Search products..."
                  InputProps={{
                    ...params.InputProps,
                    endAdornment: (
                      <>
                        {isLoading ? <CircularProgress color="inherit" size={20} /> : null}
                        {params.InputProps.endAdornment}
                      </>
                    ),
                  }}
                />
              )}
              isOptionEqualToValue={(option, value) => option.id === value?.id}
              filterOptions={(x) => x}
              freeSolo
            />
          </FormControl>
        )}

        {selectedProducts.length === 0 && (
          <Typography variant="h5" align="center" sx={{ mt: 2 }}>
            No products added.
          </Typography>
        )}

        {productError && (
          <Alert variant="outlined" severity="error" sx={{ mt: 2 }}>
            {productError}
          </Alert>
        )}

        {selectedProducts.length > 0 && (
          <TableContainer component={Paper} sx={{ marginTop: 2 }}>
            <Table>
              <TableHead>
                <TableRow>
                  <TableCell>Product</TableCell>
                  <TableCell>Store Name</TableCell>
                  <TableCell>Min Quantity</TableCell>
                  <TableCell>Action</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {selectedProducts.map((product) => (
                  <TableRow key={product.id}>
                    <TableCell>
                      <Box display="flex" alignItems="center">
                        {product.imageUrl && (
                          <Image
                            src={product.imageUrl}
                            alt={product.name}
                            height={50}
                            width={50}
                          />
                        )}
                        <Grid container spacing={1} ml={1}>
                          <Grid item xs={12}>
                            <TruncatedText text={product.name} maxLength={50} />
                          </Grid>
                          <Grid item xs={12}>
                            <Typography variant="body1">
                              <strong>SKU</strong>: {product.sku}
                            </Typography>
                          </Grid>
                        </Grid>
                      </Box>
                    </TableCell>
                    <TableCell>{product.storeName}</TableCell>
                    <TableCell>
                      <TextField
                        type="number"
                        value={product.minQuantity}
                        onChange={(e) => handleQuantityChange(product.id, e.target.value)}
                        inputProps={{ min: 1 }}
                      />
                    </TableCell>
                    <TableCell>
                      <IconButton
                        color="error"
                        onClick={() => handleRemoveProduct(product.id)}
                      >
                        <IconTrash />
                      </IconButton>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </TableContainer>
        )}
      </DialogContent>
      <DialogActions>
        <CustomLoadingButton
          loading={isSaving}
          text="Save"
          variant="contained"
          sx={{ ml: 2 }}
          onClick={handleTransfer}
        />
        <Button onClick={onClose} disabled={isSaving}>Cancel</Button>
      </DialogActions>
    </Dialog>
  );
};

export default InventoryStockTransfer;