react-admin-crud-manager 1.0.0

package/src/components/CrudPage.jsx

@@ -0,0 +1,532 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { Plus, X } from "lucide-react";
+import Table from "./Table/Table";
+import Modal from "./Modal/Modal";
+import Form from "./Form/Form";
+import Button from "./Button/Button";
+import { Icon } from "@iconify/react";
+import { enqueueSnackbar } from "notistack";
+import Details from "./Details/Details";
+import PropTypes from "prop-types";
+import { SnackbarProvider } from "notistack";
+
+const CrudPage = ({ config }) => {
+  const {
+    title,
+    fetchData = async () => {},
+    isStaticData = false,
+    tableConfig = {},
+    modalConfig = {},
+    filterConfig,
+  } = config;
+
+  const [loading, setLoading] = useState(true);
+  const [formLoading, setFormLoading] = useState(false);
+
+  const [listingData, setListingData] = useState([]);
+  const [paginationData, setPaginationData] = useState(null);
+  const [serverSidePaginationData, setServerSidePaginationData] = useState({
+    search: "",
+    rows_per_page: 50,
+    current_page: 1,
+  });
+  const [filterData, setFilterData] = useState({});
+  const [changeFilterData, setChangeFilterData] = useState(false);
+
+  const [showAdd, setShowAdd] = useState(false);
+  const [showEdit, setShowEdit] = useState(false);
+  const [showDelete, setShowDelete] = useState(false);
+  const [showView, setShowView] = useState(false);
+  const [selectedItem, setSelectedItem] = useState(null);
+
+  const handleMenuAction = (action, item) => {
+    if (action === "edit") {
+      setSelectedItem(item);
+      setShowEdit(true);
+    } else if (action === "view") {
+      setSelectedItem(item);
+      setShowView(true);
+    } else if (action === "delete") {
+      setSelectedItem(item);
+      setShowDelete(true);
+    }
+  };
+
+  const executeAction = async (
+    action,
+    onSuccess,
+    success_message = "",
+    error_message = "",
+  ) => {
+    setFormLoading(true);
+
+    try {
+      const resp = await action?.();
+      if (success_message || resp.message) {
+        enqueueSnackbar(success_message || resp.message, {
+          variant: "success",
+        });
+      }
+      onSuccess?.(resp);
+    } catch (error) {
+      if (error_message || error.message) {
+        enqueueSnackbar(error_message || error.message, { variant: "error" });
+      }
+    } finally {
+      setFormLoading(false);
+    }
+  };
+
+  const handleAddResult = (resp) => {
+    let newObj = resp.newObject;
+    if (isStaticData) {
+      setListingData((prev) => [newObj, ...prev]);
+      setPaginationData((prev) => ({
+        ...prev,
+        current_page: 1,
+      }));
+    } else {
+      setServerSidePaginationData((prev) => ({
+        ...prev,
+        current_page: 1,
+      }));
+      if (serverSidePaginationData.current_page == 1) {
+        handleGetListing();
+      }
+    }
+    setShowAdd(false);
+  };
+
+  const handleEditResult = (resp) => {
+    let updatedObj = resp.newObject;
+    let targetObj = resp.targetObject;
+    if (isStaticData) {
+      setListingData((prev) =>
+        prev.map((item) =>
+          item.id === targetObj.id ? { ...item, ...updatedObj } : item,
+        ),
+      );
+    } else {
+      handleGetListing();
+    }
+    setShowEdit(false);
+  };
+
+  const handleDeleteResult = (resp) => {
+    if (!resp) {
+      setShowDelete(false);
+      setSelectedItem(null);
+      return;
+    }
+
+    if (isStaticData) {
+      setListingData((prev) =>
+        prev.filter((item) => item.id !== resp.targetObject.id),
+      );
+    } else {
+      if (
+        listingData.length == 1 &&
+        serverSidePaginationData.current_page > 1
+      ) {
+        setServerSidePaginationData((prev) => ({
+          ...prev,
+          current_page: prev.current_page - 1,
+        }));
+      } else {
+        handleGetListing();
+      }
+    }
+    setShowDelete(false);
+    setSelectedItem(null);
+  };
+
+  const handleAddFormSubmit = (formData) =>
+    executeAction(
+      () => modalConfig?.addModal?.handleSubmit?.(formData),
+      handleAddResult,
+    );
+
+  const handleEditFormSubmit = (formData) =>
+    executeAction(
+      () => modalConfig?.editModal?.handleSubmit?.(formData, selectedItem),
+      handleEditResult,
+    );
+
+  const handleDeleteConfirm = () =>
+    executeAction(
+      () => modalConfig?.deleteModal?.action?.(selectedItem),
+      handleDeleteResult,
+    );
+
+  const handleGetListing = async () => {
+    setLoading(true);
+
+    fetchData?.({ ...serverSidePaginationData, ...filterData })
+      .then((resp) => {
+        setListingData(resp.data);
+        setPaginationData(resp.pagination);
+      })
+      .catch((error) => {
+        enqueueSnackbar(error.message, { variant: "error" });
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
+  const handleFilterData = (data) => {
+    setFilterData((prev) => ({
+      ...data,
+    }));
+    if (tableConfig?.filter?.useServerSideFilters) {
+      setChangeFilterData((prev) => !prev);
+    }
+  };
+
+  const filterByMatchingFields = (data, filters) => {
+    return data.filter((item) =>
+      Object.entries(filters).every(([key, value]) => item[key] === value),
+    );
+  };
+
+  const filteredData = useMemo(() => {
+    if (tableConfig?.filter?.useServerSideFilters) return data;
+    return filterByMatchingFields(listingData, filterData);
+  }, [listingData, filterData]);
+
+  useEffect(() => {
+    handleGetListing();
+  }, [
+    serverSidePaginationData.search,
+    serverSidePaginationData.rows_per_page,
+    serverSidePaginationData.current_page,
+    changeFilterData,
+  ]);
+
+  return (
+    <SnackbarProvider
+      maxSnack={3}
+      anchorOrigin={{
+        vertical: "bottom",
+        horizontal: "right",
+      }}
+      autoHideDuration={3000}
+      action={(snackbarKey) => (
+        <button
+          onClick={() => {
+            window.dispatchEvent(
+              new CustomEvent("closeSnackbar", { detail: snackbarKey }),
+            );
+          }}
+          className="p-1 hover:bg-white/20 rounded-full transition-colors duration-200 text-white flex items-center justify-center"
+        >
+          <X className="h-4 w-4" />
+        </button>
+      )}
+    >
+      <div>
+        {/* Header */}
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
+          <div>
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
+              {title}
+            </h1>
+            <p className="text-md text-gray-600 dark:text-gray-400 mt-2">
+              {config?.description}
+            </p>
+          </div>
+          <div className="flex items-center space-x-3">
+            <Button
+              onClick={() => setShowAdd(true)}
+              variant="contained"
+              color="primary"
+            >
+              <Plus className="w-4 h-4 mr-2" />
+              {config.buttonText || "Add New"}
+            </Button>
+          </div>
+        </div>
+
+        {/* Table */}
+        <Table
+          config={{
+            ...tableConfig,
+            pagination: {
+              ...tableConfig.pagination,
+              ...paginationData,
+            },
+            data: filteredData,
+            setServerSidePaginationData: setServerSidePaginationData,
+            onMenuAction: handleMenuAction,
+            filterConfig,
+            onFilterApply: handleFilterData,
+            loading,
+          }}
+        />
+
+        {/* Add Modal */}
+        <Modal
+          isOpen={showAdd}
+          onClose={() => setShowAdd(false)}
+          icon={modalConfig.addModal?.icon}
+          title={modalConfig.addModal?.title || "Add New"}
+          size={modalConfig.addModal?.size || "md"}
+          onFormSubmit={() =>
+            document.querySelector("#addForm")?.requestSubmit()
+          }
+          loadingBtn={formLoading}
+          actionButtons={modalConfig.addModal.actionButtons}
+        >
+          <Form
+            config={modalConfig?.addModal || []}
+            onSubmit={handleAddFormSubmit}
+            initialData={{}}
+            loading={formLoading}
+          />
+        </Modal>
+
+        {/* Edit Modal */}
+        <Modal
+          isOpen={showEdit}
+          onClose={() => setShowEdit(false)}
+          icon={modalConfig.editModal?.icon}
+          title={modalConfig.editModal?.title || "Edit"}
+          size={modalConfig.editModal?.size || "md"}
+          onFormSubmit={() =>
+            document.querySelector("#editForm")?.requestSubmit()
+          }
+          actionButtons={modalConfig.editModal.actionButtons}
+          loadingBtn={formLoading}
+        >
+          <Form
+            config={modalConfig.editModal || []}
+            onSubmit={handleEditFormSubmit}
+            initialData={selectedItem}
+            loading={formLoading}
+          />
+        </Modal>
+
+        {/* Delete Modal */}
+        {showDelete && (
+          <Modal
+            isOpen={showDelete}
+            onClose={(resp) => {
+              handleDeleteResult(resp);
+            }}
+            icon={
+              modalConfig.deleteModal?.icon || (
+                <Icon icon="ph:warning-bold" className="w-6 h-6 text-red-500" />
+              )
+            }
+            title={modalConfig.deleteModal?.title || "Confirm Delete"}
+            size={modalConfig.deleteModal?.size || "md"}
+            loading={formLoading}
+            actionButtons={modalConfig.deleteModal.actionButtons}
+            executeFunction={executeAction}
+            selectedItem={selectedItem}
+          >
+            <div className="flex items-center space-x-2 py-3">
+              <div>
+                <p className="text-md text-gray-700 dark:text-white">
+                  {modalConfig.deleteModal?.confirmText ||
+                    "Are you sure you want to delete this item?"}
+                </p>
+                {modalConfig.deleteModal?.referenceKey && (
+                  <p className="text-md font-semibold text-gray-700 dark:text-white">
+                    {selectedItem[modalConfig.deleteModal?.referenceKey]}
+                  </p>
+                )}
+              </div>
+            </div>
+          </Modal>
+        )}
+
+        {/* View Detail Modal */}
+        {modalConfig.viewModal && (
+          <Modal
+            isOpen={showView}
+            onClose={() => {
+              setShowView(false);
+              setSelectedItem(null);
+            }}
+            icon={modalConfig.viewModal?.icon}
+            title={modalConfig.viewModal?.title || "View Details"}
+            size={modalConfig.viewModal?.size || "lg"}
+            footerConfig={modalConfig?.viewModal.footer}
+          >
+            {modalConfig.viewModal?.component ? (
+              <modalConfig.viewModal.component data={selectedItem} />
+            ) : (
+              <Details
+                data={selectedItem}
+                config={modalConfig.viewModal || {}}
+              />
+            )}
+          </Modal>
+        )}
+      </div>
+    </SnackbarProvider>
+  );
+};
+
+const optionType = PropTypes.shape({
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.bool,
+  ]).isRequired,
+  label: PropTypes.string.isRequired,
+  color: PropTypes.string,
+});
+
+const actionButtonType = PropTypes.shape({
+  type: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  color: PropTypes.string,
+  variant: PropTypes.string,
+  onClick: PropTypes.func,
+});
+
+const menuActionType = PropTypes.shape({
+  title: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  variant: PropTypes.string,
+  icon: PropTypes.node,
+});
+
+const tableHeadType = PropTypes.shape({
+  key: PropTypes.string.isRequired,
+  title: PropTypes.string,
+  type: PropTypes.string,
+  imageKey: PropTypes.string,
+  titleKey: PropTypes.string,
+  subtitleKey: PropTypes.string,
+  onClickDetails: PropTypes.bool,
+  variant: PropTypes.string,
+  chipOptions: PropTypes.arrayOf(optionType),
+  defaultColor: PropTypes.string,
+  className: PropTypes.string,
+  format: PropTypes.string,
+  menuList: PropTypes.arrayOf(menuActionType),
+});
+
+const formFieldType = PropTypes.shape({
+  key: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  type: PropTypes.string.isRequired,
+  required: PropTypes.bool,
+  minLength: PropTypes.number,
+  parentClass: PropTypes.string,
+  search: PropTypes.bool,
+  multiple: PropTypes.bool,
+  dropdownMaxHeight: PropTypes.string,
+  dragDrop: PropTypes.bool,
+  countriesList: PropTypes.bool,
+  defaultCountry: PropTypes.string,
+  placeholder: PropTypes.string,
+  rows: PropTypes.number,
+  text: PropTypes.string,
+  editorKey: PropTypes.string,
+  options: PropTypes.arrayOf(optionType),
+});
+
+const viewFieldType = PropTypes.shape({
+  key: PropTypes.string,
+  label: PropTypes.string,
+  type: PropTypes.string,
+  imageKey: PropTypes.string,
+  titleKey: PropTypes.string,
+  subtitleKey: PropTypes.string,
+  blockClass: PropTypes.string,
+  icon: PropTypes.node,
+  variant: PropTypes.string,
+  chipOptions: PropTypes.arrayOf(optionType),
+  defaultColor: PropTypes.string,
+  className: PropTypes.string,
+  format: PropTypes.string,
+});
+
+CrudPage.propTypes = {
+  config: PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    description: PropTypes.string,
+    buttonText: PropTypes.string,
+    fetchData: PropTypes.func.isRequired,
+    isStaticData: PropTypes.bool,
+
+    /* ================= TABLE CONFIG ================= */
+
+    tableConfig: PropTypes.shape({
+      table_head: PropTypes.arrayOf(tableHeadType).isRequired,
+
+      search: PropTypes.shape({
+        enabled: PropTypes.bool,
+        useServerSideSearch: PropTypes.bool,
+        searchKeys: PropTypes.arrayOf(PropTypes.string),
+      }),
+
+      pagination: PropTypes.shape({
+        enabled: PropTypes.bool,
+        useServerSidePagination: PropTypes.bool,
+      }),
+
+      filter: PropTypes.shape({
+        enabled: PropTypes.bool,
+        useServerSideFilters: PropTypes.bool,
+      }),
+    }).isRequired,
+
+    /* ================= MODAL CONFIG ================= */
+
+    modalConfig: PropTypes.shape({
+      addModal: PropTypes.shape({
+        title: PropTypes.string.isRequired,
+        size: PropTypes.string,
+        formClass: PropTypes.string,
+        formFields: PropTypes.arrayOf(formFieldType),
+        handleSubmit: PropTypes.func.isRequired,
+        actionButtons: PropTypes.arrayOf(actionButtonType),
+      }),
+
+      editModal: PropTypes.shape({
+        title: PropTypes.string.isRequired,
+        size: PropTypes.string,
+        formClass: PropTypes.string,
+        formFields: PropTypes.arrayOf(formFieldType),
+        handleSubmit: PropTypes.func.isRequired,
+        actionButtons: PropTypes.arrayOf(actionButtonType),
+      }),
+
+      deleteModal: PropTypes.shape({
+        title: PropTypes.string.isRequired,
+        size: PropTypes.string,
+        confirmText: PropTypes.string,
+        referenceKey: PropTypes.string,
+        actionButtons: PropTypes.arrayOf(actionButtonType),
+      }),
+
+      viewModal: PropTypes.shape({
+        title: PropTypes.string.isRequired,
+        size: PropTypes.string,
+
+        // 👇 This covers your commented code:
+        component: PropTypes.elementType, // for custom component like TeamMemberDetail
+
+        fields: PropTypes.arrayOf(viewFieldType),
+
+        footer: PropTypes.shape({
+          cancelButton: PropTypes.bool,
+          cancelText: PropTypes.string,
+        }),
+      }),
+    }),
+
+    /* ================= FILTER CONFIG ================= */
+
+    filterConfig: PropTypes.shape({
+      fields: PropTypes.arrayOf(formFieldType),
+    }),
+  }).isRequired,
+};
+
+export default CrudPage;

package/src/components/Details/Details.jsx

@@ -0,0 +1,134 @@
+import { User } from "lucide-react";
+import React, { useState } from "react";
+import Chip from "../Chip/Chip";
+import { formatDate } from "../../lib/utils";
+import ImagePreview from "../Table/components/ImagePreview";
+
+export default function Details({ data, config }) {
+  const { fields, containerClass } = config;
+
+  // image preview
+  const [targetImage, setTargetImage] = useState(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const openPreview = (image) => {
+    setTargetImage(image);
+    setIsOpen(true);
+  };
+
+  const DetailRow = ({ col }) => {
+    let Icon = col?.icon;
+    let label = col.label;
+    let value = data[col.key];
+    let type = col.type;
+    let variant = col.variant || "outline";
+    let color = col.defaultColor;
+
+    if (type == "chip" && col.chipOptions.length > 0) {
+      let chipObj = col?.chipOptions.find((obj) => obj.value == value);
+      if (chipObj) {
+        value = chipObj.label;
+        color = chipObj.color;
+      }
+    }
+
+    return (
+      <div
+        className={`col-span-12 flex items-center space-x-4 p-4 rounded-xl 
+                    bg-gray-100 dark:bg-gray-900 ${col.blockClass}`}
+      >
+        {Icon && <div className="flex-shrink-0">{Icon}</div>}
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-medium text-gray-500 dark:text-gray-400">
+            {label}
+          </p>
+          {type == "chip" ? (
+            <>
+              <Chip
+                label={value}
+                variant={variant}
+                color={color}
+                className="mt-1"
+              />
+            </>
+          ) : type == "tinyEditor" ? (
+            <p
+              className="mt-1 text-sm text-gray-900 dark:text-white break-words"
+              dangerouslySetInnerHTML={{
+                __html: value,
+              }}
+            ></p>
+          ) : (
+            <p className="mt-1 text-sm text-gray-900 dark:text-white break-words">
+              {type == "date" ? (
+                <span>{formatDate(value, col.format || "DD MMM YYYY")}</span>
+              ) : (
+                value || "N/A"
+              )}
+            </p>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  const GroupRow = ({ col }) => {
+    let title = data[col.titleKey];
+    let subtitle = data[col.subtitleKey];
+    let image = data[col.imageKey];
+    let fallback_icon = data[col.fallback_icon];
+
+    return (
+      <div
+        className={`col-span-12 flex items-center space-x-4 p-4 rounded-xl 
+      bg-gray-100 dark:bg-gray-900 
+      ${col.blockClass}`}
+      >
+        {image ? (
+          <img
+            src={image}
+            alt={title}
+            onClick={() => openPreview({ src: image, alt: title })}
+            className="w-16 h-16 cursor-pointer rounded-full object-cover border-2 border-gray-200 dark:border-gray-700"
+          />
+        ) : fallback_icon ? (
+          fallback_icon
+        ) : (
+          <div className="w-16 h-16 flex items-center justify-center rounded-full border-2 border-gray-300 dark:border-gray-700 bg-gray-200 dark:bg-gray-600">
+            <User className="w-8 h-8 text-gray-400" />
+          </div>
+        )}
+
+        <div>
+          <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
+            {title}
+          </h3>
+          <p className="text-sm text-gray-500 dark:text-gray-400">{subtitle}</p>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <>
+      {isOpen && (
+        <ImagePreview
+          src={targetImage.src}
+          alt={targetImage.alt}
+          isOpen={isOpen}
+          setIsOpen={setIsOpen}
+        />
+      )}
+
+      <div className={`grid grid-cols-12 gap-4 ${containerClass || ""}`}>
+        {fields.map((col) =>
+          col.type == "group" ? (
+            <GroupRow col={col} />
+          ) : (
+            <DetailRow col={col} />
+          ),
+        )}
+      </div>
+    </>
+  );
+}