react-admin-crud-manager 1.0.0

package/src/components/Filter/FilterDrawer.jsx

@@ -0,0 +1,99 @@
+import React, { useEffect, useState } from "react";
+import { X } from "lucide-react";
+import Button from "../Button/Button";
+import RenderFields from "../Form/components/RenderFields";
+
+const FilterDrawer = ({ isOpen, onClose, config, onApply }) => {
+  const [filters, setFilters] = useState({});
+
+  const handleChange = (key, value) => {
+    setFilters((prev) => ({ ...prev, [key]: value }));
+  };
+
+  const handleApply = () => {
+    onApply?.(filters);
+    onClose();
+  };
+
+  const handleReset = () => {
+    setFilters({});
+    onApply?.({});
+    onClose();
+  };
+
+  return (
+    <>
+      {/* Overlay */}
+      <div
+        className={`fixed inset-0 bg-black/50 z-40 transition-opacity duration-300 ${
+          isOpen
+            ? "opacity-100 pointer-events-auto"
+            : "opacity-0 pointer-events-none"
+        }`}
+        onClick={onClose}
+      />
+
+      {/* Drawer */}
+      <div
+        className={`fixed top-0 right-0 h-full w-[28rem] bg-white dark:bg-gray-900 shadow-2xl z-50 flex flex-col border-l border-gray-200 dark:border-gray-700
+          transform transition-transform duration-300 ease-in-out
+          ${isOpen ? "translate-x-0" : "translate-x-full"}
+        `}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+            Filters
+          </h2>
+          <button
+            onClick={onClose}
+            className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition"
+          >
+            <X className="w-5 h-5 text-gray-500 dark:text-gray-400" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto px-4 py-3">
+          {config?.component ? (
+            <config.component filters={filters} onFilterChange={handleChange} />
+          ) : (
+            <div className="space-y-4">
+              {config?.fields?.map((field) => (
+                <>
+                  <RenderFields
+                    key={field.key}
+                    field={field}
+                    formData={filters}
+                    handleChange={handleChange}
+                  />
+                </>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex gap-2 px-4 py-3 border-t border-gray-200 dark:border-gray-700">
+          <Button
+            onClick={handleApply}
+            variant="contained"
+            color="primary"
+            fullWidth
+          >
+            Apply Filters
+          </Button>
+          <Button
+            onClick={handleReset}
+            variant="contained"
+            className="min-w-[150px]"
+          >
+            Reset
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default FilterDrawer;

package/src/components/Form/Form.jsx

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from "react";
+import RenderFields from "./components/RenderFields";
+
+const Form = ({ config, onSubmit, initialData = {} }) => {
+  const { formClass = "grid grid-cols-12 gap-4", formFields = [] } =
+    config || {};
+
+  const [formData, setFormData] = useState(initialData);
+
+  useEffect(() => {
+    setFormData(initialData);
+  }, []);
+
+  const handleChange = (key, value) => {
+    setFormData((prev) => ({ ...prev, [key]: value }));
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const form = e.target;
+
+    if (!form.checkValidity()) {
+      form.reportValidity();
+      return;
+    }
+
+    onSubmit(formData);
+  };
+
+  return (
+    <form
+      id={config.title?.toLowerCase().includes("edit") ? "editForm" : "addForm"}
+      onSubmit={handleSubmit}
+      className={formClass}
+      noValidate={false} // enables native validation
+    >
+      {formFields.map((field) => (
+        <>
+          <RenderFields
+            key={field.key}
+            field={field}
+            formData={formData}
+            handleChange={handleChange}
+          />
+        </>
+      ))}
+    </form>
+  );
+};
+
+export default Form;

package/src/components/Form/components/Checkbox.jsx

@@ -0,0 +1,119 @@
+import React from "react";
+import InputLabel from "./InputLabel";
+
+const Checkbox = ({
+  name = "",
+  label = "", // label for single checkbox
+  options = [], // array of { label, value } for multiple
+  value = null, // boolean for single, array for multiple, or string for single select
+  onChange,
+  disabled = false,
+  required = false,
+  parentClass = "col-span-12",
+  className = "",
+  multiSelect = false, // ✅ if true, only one option can be selected (like radio)
+}) => {
+  // Detect if multiple options are present
+  const multiple = Array.isArray(options) && options.length > 0;
+
+  // Check if a value is selected
+  const isChecked = (optionValue) => {
+    if (multiple) {
+      if (!multiSelect) return value === optionValue;
+      return Array.isArray(value) && value.includes(optionValue);
+    }
+    return Boolean(value);
+  };
+
+  // Handle change for single checkbox
+  const handleSingleChange = (e) => {
+    onChange?.(e.target.checked, name);
+  };
+
+  // Handle change for multiple checkboxes
+  const handleMultipleChange = (optionValue, checked) => {
+    if (!onChange) return;
+
+    if (!multiSelect) {
+      if (checked) {
+        onChange(optionValue, name);
+      } else {
+        onChange("", name);
+      }
+      // Only allow one selected
+    } else {
+      const newValue = Array.isArray(value) ? [...value] : [];
+      if (checked) {
+        if (!newValue.includes(optionValue)) newValue.push(optionValue);
+      } else {
+        const index = newValue.indexOf(optionValue);
+        if (index > -1) newValue.splice(index, 1);
+      }
+      onChange(newValue, name);
+    }
+  };
+
+  // ---------------- JSX ----------------
+  if (multiple) {
+    // Multiple options
+    return (
+      <>
+        <div className={`${parentClass}`}>
+          <InputLabel label={label} required={required} />
+          <div className={`flex flex-col space-y-2`}>
+            {options.map((opt, idx) => (
+              <div key={opt.value || opt.label} className="flex items-center">
+                <input
+                  type="checkbox"
+                  name={name}
+                  value={opt.value}
+                  checked={isChecked(opt.value)}
+                  disabled={disabled || opt.disabled}
+                  required={required && idx === 0}
+                  onChange={(e) =>
+                    handleMultipleChange(opt.value, e.target.checked)
+                  }
+                  key={name}
+                  className={`h-4 w-4 cursor-pointer text-blue-600 border-gray-300 rounded focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 ${className}`}
+                />
+                {opt.label && (
+                  <label
+                    htmlFor={name}
+                    className="ml-2 text-sm text-gray-700 dark:text-gray-200 select-none"
+                  >
+                    {opt.label}
+                  </label>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </>
+    );
+  }
+
+  // Single checkbox
+  return (
+    <div className={`flex items-center ${parentClass}`}>
+      <input
+        type="checkbox"
+        name={name}
+        checked={isChecked()}
+        disabled={disabled}
+        required={required}
+        onChange={handleSingleChange}
+        className={`h-4 w-4 text-blue-600 cursor-pointer border-gray-300 rounded focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 ${className}`}
+      />
+      {label && (
+        <label
+          htmlFor={name}
+          className="ml-2 text-sm text-gray-700 dark:text-gray-200 select-none"
+        >
+          {label}
+        </label>
+      )}
+    </div>
+  );
+};
+
+export default Checkbox;

package/src/components/Form/components/ImagePicker.jsx

@@ -0,0 +1,128 @@
+import { Icon } from "@iconify/react";
+import React, { useState, useEffect, useRef } from "react";
+import InputLabel from "./InputLabel";
+
+const ImagePicker = ({
+  label = "",
+  value = null,
+  onChange,
+  required = false,
+  accept = "image/*",
+  id,
+  dragDrop = false,
+  name = "",
+  parentClass = "",
+}) => {
+  const [image, setImage] = useState(value);
+  const [isDragging, setIsDragging] = useState(false);
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    setImage(value);
+  }, [value]);
+
+  const handleFileChange = (files) => {
+    if (!files || files.length === 0) {
+      setImage(null);
+      onChange?.(null);
+      return;
+    }
+
+    const file = files[0];
+    const preview = URL.createObjectURL(file);
+    const imgObj = { file, preview };
+
+    setImage(imgObj);
+    onChange?.(preview);
+  };
+
+  // Drag events
+  const handleDragOver = (e) => {
+    if (!dragDrop) return;
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (e) => {
+    if (!dragDrop) return;
+    e.preventDefault();
+    setIsDragging(false);
+  };
+
+  const handleDrop = (e) => {
+    if (!dragDrop) return;
+    e.preventDefault();
+    setIsDragging(false);
+    handleFileChange(e.dataTransfer.files);
+  };
+
+  return (
+    <>
+      <div key={name} className={parentClass || "col-span-12"}>
+        <InputLabel label={label} required={required} />
+        <div
+          className={`relative  rounded-md p-2 transition-all ${
+            isDragging
+              ? "border border-dashed border-blue-500 bg-blue-50 dark:bg-blue-900"
+              : "border bg-gray-50 dark:bg-gray-700"
+          }`}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+        >
+          {/* Blur entire content when dragging */}
+          <div
+            className={`flex items-center space-x-3 transition-all ${
+              isDragging ? "filter blur-sm" : ""
+            }`}
+          >
+            {/* Left: preview clickable */}
+            <div
+              className="cursor-pointer"
+              onClick={() => inputRef.current.click()}
+            >
+              {image ? (
+                <img
+                  src={image.preview || image}
+                  alt="preview"
+                  className="object-cover w-20 h-20 rounded-full"
+                />
+              ) : (
+                <>
+                  <div className="rounded-full bg-gray-200 dark:bg-gray-800 h-20 w-20 flex items-center justify-center">
+                    <Icon
+                      icon="ri:image-add-fill"
+                      className="text-gray-400 w-10 h-10"
+                    />
+                  </div>
+                </>
+              )}
+            </div>
+
+            {/* Right: upload input */}
+            <input
+              ref={inputRef}
+              id={id}
+              type="file"
+              accept={accept}
+              onChange={(e) => handleFileChange(e.target.files)}
+              required={required && !image}
+              className="inline-flex items-center justify-center p-2 text-gray-400 text-sm file:cursor-pointer"
+            />
+          </div>
+
+          {/* Overlay text */}
+          {dragDrop && isDragging && (
+            <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+              <span className="text-blue-500 font-semibold text-xl">
+                Drop here
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default ImagePicker;

package/src/components/Form/components/Input.jsx

@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import { Icon } from "@iconify/react";
+import InputLabel from "./InputLabel";
+
+const Input = React.forwardRef(
+  (
+    {
+      label,
+      required,
+      parentClass = "",
+      className = "",
+      type = "text",
+      onKeyDown,
+      ...props
+    },
+    ref,
+  ) => {
+    const [showPassword, setShowPassword] = useState(false);
+
+    const handleKeyDown = (e) => {
+      if (type === "number" && ["e", "E"].includes(e.key)) {
+        e.preventDefault();
+      }
+      onKeyDown?.(e);
+    };
+
+    const combinedClassName = `
+      h-10 placeholder-gray-400 dark:placeholder-gray-400
+      ${type === "password" ? "pr-10" : ""}
+      ${className}
+    `.trim();
+
+    return (
+      <>
+        <div key={props.name} className={parentClass || "col-span-12"}>
+          <InputLabel label={label} required={required} />
+          <div className="relative">
+            <input
+              type={type === "password" && showPassword ? "text" : type}
+              ref={ref}
+              required={required}
+              onKeyDown={handleKeyDown}
+              className={combinedClassName}
+              {...props}
+            />
+
+            {type === "password" && (
+              <button
+                type="button"
+                tabIndex={-1}
+                onClick={() => setShowPassword((prev) => !prev)}
+                className="absolute inset-y-0 right-3 flex items-center text-gray-400 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-200"
+              >
+                <Icon
+                  icon={
+                    showPassword ? "mdi:eye-off-outline" : "mdi:eye-outline"
+                  }
+                  className="w-5 h-5"
+                />
+              </button>
+            )}
+          </div>
+        </div>
+      </>
+    );
+  },
+);
+
+Input.displayName = "Input";
+
+export { Input };

package/src/components/Form/components/InputLabel.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+export default function InputLabel({ label, required = false }) {
+  return (
+    <>
+      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+        {label}
+        {required && <span className="ml-1">*</span>}
+      </label>
+    </>
+  );
+}

package/src/components/Form/components/PhoneInput.jsx

@@ -0,0 +1,221 @@
+import React, { useState, useEffect, useRef } from "react";
+import { countries } from "../../../data/countries";
+import { ChevronDown, Search } from "lucide-react";
+import InputLabel from "./InputLabel";
+
+export default function PhoneInput({
+  label = "",
+  value = "",
+  name = "",
+  parentClass = "",
+  onChange,
+  disabled = false,
+  required = false,
+  placeholder = "Phone number",
+  search = false,
+  countriesList = false,
+  defaultCountry = "",
+}) {
+  const find_country_with_code = (value) => {
+    return countries.find((obj) => obj.code == value);
+  };
+
+  const [selectedCountry, setSelectedCountry] = useState(
+    find_country_with_code(defaultCountry) || countries[0],
+  );
+  const [fullNumber, setFullNumber] = useState("");
+  const [open, setOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const dropdownRef = useRef();
+
+  // Match prefix when value starts with +code
+  useEffect(() => {
+    if (typeof value === "string" && value.startsWith("+")) {
+      const match = countries
+        .filter((c) => value.startsWith("+" + c.phone))
+        .sort((a, b) => b.phone.length - a.phone.length)[0];
+      if (match) {
+        setSelectedCountry(match);
+        setFullNumber(value.replace("+" + match.phone, ""));
+        return;
+      }
+    }
+    setFullNumber(value);
+  }, [value]);
+
+  const handleNumberChange = (e) => {
+    const input = e.target.value.replace(/\D/g, "");
+    setFullNumber(input);
+    if (selectedCountry && onChange) {
+      onChange("+" + selectedCountry.phone + input);
+    }
+  };
+
+  const handleCountrySelect = (country) => {
+    setSelectedCountry(country);
+    if (onChange) onChange("+" + country.phone + fullNumber);
+    setOpen(false);
+    setSearchTerm("");
+  };
+
+  // 🖱️ Close dropdown on outside click
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target))
+        setOpen(false);
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const filteredCountries = countries.filter(
+    (c) =>
+      c.label.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      c.phone.includes(searchTerm),
+  );
+
+  if (!countriesList) {
+    const handleInputChange = (e) => {
+      const input = e.target.value.replace(/[^+\d]/g, "");
+      const formatted = input.startsWith("+")
+        ? "+" + input.replace(/[+]/g, "").slice(0)
+        : input;
+      onChange(formatted);
+    };
+
+    return (
+      <>
+        <div key={name} className={parentClass || "col-span-12"}>
+          <InputLabel label={label} required={required} />
+          <input
+            type="text"
+            value={value}
+            onChange={handleInputChange}
+            placeholder={placeholder}
+            disabled={disabled}
+            required={required}
+            className="w-full h-10 px-3 text-sm border border-gray-300 dark:border-gray-600 rounded-md 
+        bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none 
+        focus:ring-1 focus:ring-blue-300 dark:focus:ring-blue-200"
+            inputMode="tel"
+            pattern="^\+\d{1,15}$"
+          />
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <div key={name} className={parentClass || "col-span-12"}>
+        <InputLabel label={label} required={required} />
+        <div className="relative " ref={dropdownRef}>
+          {/* Input container */}
+          <div
+            className={`h-[40px] flex items-center border rounded-md px-2 bg-white dark:bg-gray-700 transition-all
+  ${
+    open
+      ? "ring-0.5 ring-blue-100 border-blue-300"
+      : "border-gray-300 dark:border-gray-600"
+  }
+  ${disabled ? "opacity-60 cursor-not-allowed" : ""}`}
+          >
+            {/* Flag & dropdown */}
+            <button
+              type="button"
+              disabled={disabled}
+              onClick={() => setOpen(!open)}
+              className="flex items-center gap-1 pr-2 border-r border-gray-300 dark:border-gray-700 focus:outline-none"
+            >
+              {selectedCountry ? (
+                <img
+                  src={`https://flagcdn.com/w20/${selectedCountry.code.toLowerCase()}.png`}
+                  alt={selectedCountry.code}
+                  className="w-5 h-3 object-cover"
+                />
+              ) : (
+                <span className="text-gray-400 text-xs">🌐</span>
+              )}
+              <ChevronDown className="w-3 h-3 text-gray-500" />
+            </button>
+
+            {/* Country code */}
+            {selectedCountry && (
+              <span className="ml-2 text-sm text-gray-700 dark:text-gray-200 whitespace-nowrap">
+                +{selectedCountry.phone}
+              </span>
+            )}
+
+            {/* Number input */}
+            <input
+              type="tel"
+              value={fullNumber}
+              onChange={handleNumberChange}
+              required={required}
+              disabled={disabled || !selectedCountry}
+              placeholder={!selectedCountry ? "Select a country" : placeholder}
+              className="flex-1 ml-2 bg-transparent outline-none text-sm text-gray-800 dark:text-gray-100 placeholder-gray-400"
+            />
+
+            {/* Hidden input for native browser validation */}
+            <input
+              type="tel"
+              required={required}
+              tabIndex={-1}
+              readOnly
+              value={
+                selectedCountry && fullNumber
+                  ? "+" + selectedCountry.phone + fullNumber
+                  : ""
+              }
+              style={{
+                position: "absolute",
+                opacity: 0,
+                pointerEvents: "none",
+                height: 0,
+              }}
+            />
+          </div>
+
+          {/* Dropdown */}
+          {open && (
+            <div className="absolute top-full left-0 w-full mt-1 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-700 shadow-lg z-50 max-h-60 overflow-y-auto">
+              {search && (
+                <div className="p-2 border-b border-gray-200 dark:border-gray-700">
+                  <div className="relative">
+                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
+                    <input
+                      type="text"
+                      value={searchTerm}
+                      onChange={(e) => setSearchTerm(e.target.value)}
+                      placeholder="Search country..."
+                      className="w-full pl-9 pr-3 py-2 text-sm border rounded-md bg-white dark:bg-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none "
+                    />
+                  </div>
+                </div>
+              )}
+
+              {filteredCountries.map((c) => (
+                <button
+                  key={c.code}
+                  type="button"
+                  onClick={() => handleCountrySelect(c)}
+                  className="w-full flex items-center gap-2 px-2 py-1 text-sm hover:bg-blue-50 dark:hover:bg-gray-700 text-gray-800 dark:text-gray-100"
+                >
+                  <img
+                    src={`https://flagcdn.com/w20/${c.code.toLowerCase()}.png`}
+                    alt={c.code}
+                    className="w-5 h-3 object-cover"
+                  />
+                  <span>
+                    {c.label} (+{c.phone})
+                  </span>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}