eleven-solutions-common-website-unique-web 21.0.56 → 22.0.0

package/src/components/admin/Template.tsx

@@ -1,304 +0,0 @@
-import React from "react";
-import { useState, useEffect } from "react";
-import { FaPlus } from "react-icons/fa";
-import { fetchTemplatesApi, deleteTemplateApi } from "../api/template";
-
-interface TemplateProps {
-  url: string;
-}
-
-const Template = ({ url }: TemplateProps) => {
-  const [templates, setTemplates] = useState<any[]>([]);
-
-  const fetchTemplatesData = async () => {
-    const data = await fetchTemplatesApi(url);
-    if (data) {
-      setTemplates(data as any[]);
-    } else {
-      console.error("Failed to fetch templates");
-    }
-  };
-
-  useEffect(() => {
-    fetchTemplatesData();
-  }, []);
-
-  const handleNavigation = (event: React.MouseEvent, path: string) => {
-    event.preventDefault();
-    window.history.pushState({}, "", path);
-    window.dispatchEvent(new PopStateEvent("popstate"));
-  };
-
-  //Pagination
-
-  const [currentPage, setCurrentPage] = useState(1);
-  const itemsPerPage = 10;
-
-  const totalPages = Math.ceil(templates.length / itemsPerPage);
-
-  const handleNextPage = () => {
-    if (currentPage < totalPages) {
-      setCurrentPage(currentPage + 1);
-    }
-  };
-
-  const handlePreviousPage = () => {
-    if (currentPage > 1) {
-      setCurrentPage(currentPage - 1);
-    }
-  };
-
-  const handlePageClick = (pageNumber: number) => {
-    setCurrentPage(pageNumber);
-  };
-
-  const paginatedTemplates = templates.slice(
-    (currentPage - 1) * itemsPerPage,
-    currentPage * itemsPerPage
-  );
-
-  const handleEditClick = (
-    event: React.MouseEvent,
-    path: string,
-    id: string
-  ) => {
-    event.preventDefault();
-    window.history.pushState({}, "", path + id);
-    window.dispatchEvent(new PopStateEvent("popstate"));
-  };
-
-  const handleDeleteClick = async (id: string) => {
-    try {
-      await deleteTemplateApi(url, id);
-      alert("Template deleted successfully");
-
-      fetchTemplatesData();
-    } catch (error) {
-      console.error("Error deleting Template:", error);
-    }
-  };
-
-  return (
-    <div className="container px-4 mx-auto mt-6 h-full">
-      <div className="w-3/4">
-        <h1 className="text-3xl font-bold text-blue-600 mb-5">Template</h1>
-      </div>
-      <div className="flex-grow ml-0 w-full mt-10">
-        <form className="w-full ">
-          <label
-            htmlFor="default-search"
-            className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
-          >
-            Search
-          </label>
-          <div className="relative w-full">
-            <div className="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
-              <svg
-                className="w-4 h-4 text-gray-500 dark:text-gray-400"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 20 20"
-              >
-                <path
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
-                />
-              </svg>
-            </div>
-            <input
-              type="search"
-              id="default-search"
-              className="inline-block min-w-full p-3 ps-10 outline-none text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-              placeholder="Search Templates"
-              required
-            />
-            <button
-              type="submit"
-              className="text-white absolute end-1.5 bottom-1.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-            >
-              Search
-            </button>
-          </div>
-        </form>
-      </div>
-      <div className="flex-grow ml-0 w-3/4">
-        <form className="w-auto">{/* Search Form */}</form>
-      </div>
-      <div className="flex-grow ml-0 mt-4 w-full">
-        <div className="overflow-hidden border border-gray-200 dark:border-gray-700 md:rounded-lg mt-6">
-          <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-            <thead className="bg-gray-50 dark:bg-gray-800">
-              <tr>
-                <th
-                  scope="col"
-                  className="px-4 py-3.5 text-md font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400"
-                  style={{ width: "200px" }}
-                >
-                  Actions
-                </th>
-                <th
-                  scope="col"
-                  className="py-3.5 px-4 text-md font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400"
-                >
-                  <div className="flex items-center gap-x-3">
-                    <span>Name</span>
-                  </div>
-                </th>
-              </tr>
-            </thead>
-            <tbody className="bg-white divide-y divide-gray-200 dark:divide-gray-700 dark:bg-gray-900">
-              {paginatedTemplates
-                .filter((template) => !template.isDeleted)
-                .map((template, index) => (
-                  <tr key={template.id || index}>
-                    <td className="px-4 py-4 text-sm whitespace-nowrap">
-                      <div className="flex items-center gap-x-6">
-                        <button
-                          onClick={() => handleDeleteClick(template.id)}
-                          className="text-gray-500 transition-colors duration-200 dark:hover:text-red-600 dark:text-gray-300 hover:text-red-500 focus:outline-none"
-                        >
-                          <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke-width="1.5"
-                            stroke="currentColor"
-                            className="w-5 h-5"
-                          >
-                            <path
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
-                            />
-                          </svg>
-                        </button>
-
-                        <button
-                          onClick={(event) =>
-                            handleEditClick(
-                              event,
-                              "/admin/template/templateform?id=",
-                              template.id
-                            )
-                          }
-                          className="text-gray-500 transition-colors duration-200 dark:hover:text-yellow-500 dark:text-gray-300 hover:text-yellow-500 focus:outline-none"
-                        >
-                          <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            strokeWidth="1.5"
-                            stroke="currentColor"
-                            className="w-5 h-5"
-                          >
-                            <path
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
-                            />
-                          </svg>
-                        </button>
-                      </div>
-                    </td>
-                    <td className="px-4 py-4 text-sm font-medium text-gray-700 whitespace-nowrap">
-                      <div className="inline-flex items-center gap-x-3">
-                        <div className="flex items-center gap-x-2">
-                          <div>
-                            <h2 className="  text-sm font-medium text-gray-800 dark:text-white ">
-                              {template.name}
-                            </h2>
-                          </div>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                ))}
-            </tbody>
-          </table>
-        </div>
-
-        <div className="flex items-center justify-between mt-6">
-          <button
-            onClick={handlePreviousPage}
-            disabled={currentPage === 1}
-            className="flex items-center px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 bg-white border rounded-md gap-x-2 hover:bg-gray-100 dark:bg-gray-900 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-800"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke-width="1.5"
-              stroke="currentColor"
-              className="w-5 h-5 rtl:-scale-x-100"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18"
-              />
-            </svg>
-
-            <span>previous</span>
-          </button>
-
-          <div className="items-center hidden lg:flex gap-x-3">
-            {Array.from({ length: totalPages }, (_, index) => (
-              <button
-                key={index + 1}
-                onClick={() => handlePageClick(index + 1)}
-                className={`px-2 py-1 text-sm ${
-                  currentPage === index + 1
-                    ? "text-blue-500 bg-blue-100"
-                    : "text-gray-500 hover:bg-gray-100"
-                } rounded-md`}
-              >
-                {index + 1}
-              </button>
-            ))}
-          </div>
-          <button
-            onClick={handleNextPage}
-            disabled={currentPage === totalPages}
-            className="flex items-center px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 bg-white border rounded-md gap-x-2 hover:bg-gray-100 dark:bg-gray-900 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-800"
-          >
-            <span>Next</span>
-
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke-width="1.5"
-              stroke="currentColor"
-              className="w-5 h-5 rtl:-scale-x-100"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3"
-              />
-            </svg>
-          </button>
-        </div>
-
-        <div className="flex-grow ml-0 mt-4 w-0">
-          <button
-            type="button"
-            onClick={(event) =>
-              handleNavigation(event, "/admin/template/templateform")
-            }
-            className="flex items-center justify-center px-6 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-600 rounded-lg hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80"
-          >
-            <FaPlus className="mr-2 font-medium" />
-            Template
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Template;

package/src/components/admin/TemplateForm.tsx

@@ -1,141 +0,0 @@
-import React, { useState, useEffect, useRef, useMemo } from "react";
-import {
-  addTemplateApi,
-  fetchTemplateByIdApi,
-  updateTemplateApi,
-} from "../api/template";
-
-import Editor from "./Editor";
-
-interface TemplateFormProps {
-  url: string;
-}
-
-const TemplateForm = ({ url }: TemplateFormProps) => {
-  const [name, setName] = useState("");
-  const [content, setContent] = useState("");
-  const placeholder = "";
-
-  const [isEditMode, setIsEditMode] = useState<boolean>(false);
-
-  const editor = useRef(null);
-  const config: Record<string, any> = useMemo(
-    () => ({
-      readonly: false,
-      placeholder: placeholder || "",
-    }),
-    [placeholder]
-  );
-
-  const validateForm = () => {
-    if (!name || !content) {
-      alert("Please fill in all required fields: Name and Content.");
-      return false;
-    }
-    return true;
-  };
-
-  const queryParams = new URLSearchParams(window.location.search);
-  const id = queryParams.get("id");
-
-  useEffect(() => {
-    if (id) {
-      const fetchTemplateData = async () => {
-        try {
-          const fetchedUser = await fetchTemplateByIdApi(url, id);
-          if (fetchedUser) {
-            const user = fetchedUser as {
-              name: string;
-              content: string;
-            };
-            setIsEditMode(true);
-            setName(user.name);
-            setContent(user.content);
-          }
-        } catch (error) {
-          console.error("Unable to fetch user data", error);
-        }
-      };
-      fetchTemplateData();
-    }
-  }, [id]);
-
-  const handleSubmit = async (event: React.MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault();
-    if (!validateForm()) return;
-
-    try {
-      if (isEditMode) {
-        await updateTemplateApi(url, id, name, content);
-        alert("Template updated successfully");
-      } else {
-        await addTemplateApi(url, name, content);
-        alert("Template added successfully");
-      }
-      window.history.pushState({}, "", "/admin/template");
-      window.dispatchEvent(new PopStateEvent("popstate"));
-    } catch (error) {
-      console.error("Error adding/updating Template:", error);
-      alert("Failed to add/update Template");
-    }
-  };
-
-  const handleCancelClick = () => {
-    setName("");
-    setContent("");
-
-    window.history.pushState({}, "", "/admin/template");
-    window.dispatchEvent(new PopStateEvent("popstate"));
-  };
-
-  return (
-    <div className="w-full pr-16">
-      <div className="flex-grow p-6">
-        <form>
-          <h1 className="text-3xl font-bold text-center text-blue-600 capitalize dark:text-white mb-4">
-            {isEditMode ? "Edit Template" : "Add Template"}
-          </h1>
-
-          <div className="mb-6 w-full">
-            <label className="text-gray-900 dark:text-gray-200 font-semibold">
-              Name <span className="text-red-500">*</span>
-            </label>
-            <input
-              required
-              type="text"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              className="w-full px-4 py-2 mt-2  text-gray-800  bg-white border border-gray-400 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-800 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-              placeholder="Enter Name"
-            />
-          </div>
-          <div className="mb-6 w-full">
-            <label className="text-gray-900 dark:text-gray-200 font-semibold">
-              Content <span className="text-red-500">*</span>
-            </label>
-            <Editor content={content} setContent={setContent} config={config} />
-          </div>
-
-          <div className="flex space-x-4 mt-6 justify-end">
-            <button
-              type="submit"
-              onClick={handleSubmit}
-              className="px-8 py-2.5 leading-5 text-white transition-colors duration-300 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-gray-600"
-            >
-              {isEditMode ? "Edit" : "Add"}
-            </button>
-            <button
-              type="button"
-              onClick={handleCancelClick}
-              className="px-8 py-2.5 leading-5 text-white transition-colors duration-300 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-gray-600"
-            >
-              Cancel
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-};
-
-export default TemplateForm;

package/src/components/admin/UserForm.tsx

@@ -1,231 +0,0 @@
-import React from "react";
-import { useState, useEffect } from "react";
-
-import { addUserApi, updateUserApi, fetchUserByIdApi } from "../api/user";
-
-interface UserFormProps {
-  url: string;
-}
-
-const UserForm = ({ url }: UserFormProps) => {
-  const [userName, setUserName] = useState("");
-  const [email, setEmail] = useState("");
-  const [mobile, setMobile] = useState("");
-  const [address, setAddress] = useState("");
-  const [roleType, setRoleType] = useState("");
-  const [gender, setGender] = useState("");
-
-  const [isEditMode, setIsEditMode] = useState<boolean>(false);
-
-  const validateForm = () => {
-    if (!userName || !roleType) {
-      alert(
-        "Please fill in all required fields: User Name, Email, and Role Type."
-      );
-      return false;
-    }
-    return true;
-  };
-
-  const queryParams = new URLSearchParams(window.location.search);
-  const id = queryParams.get("id");
-
-  useEffect(() => {
-    if (id) {
-      const fetchUserData = async () => {
-        try {
-          const fetchedUser = await fetchUserByIdApi(url, id);
-          if (fetchedUser) {
-            const user = fetchedUser as {
-              name: string;
-              email: string;
-              mobile: string;
-              address: string;
-              roleType: string;
-              gender: string;
-            };
-            setIsEditMode(true);
-            setUserName(user.name);
-            setEmail(user.email);
-            setMobile(user.mobile);
-            setAddress(user.address);
-            setRoleType(user.roleType);
-            setGender(user.gender);
-          }
-        } catch (error) {
-          console.error("Unable to fetch user data", error);
-        }
-      };
-      fetchUserData();
-    }
-  }, [id]);
-
-  const handleSubmit = async (event: React.MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault();
-    if (!validateForm()) return;
-
-    try {
-      if (isEditMode) {
-        await updateUserApi(
-          url,
-          id,
-          userName,
-          email,
-          mobile,
-          address,
-          roleType,
-          gender
-        );
-        alert("User updated successfully");
-      } else {
-        await addUserApi(
-          url,
-          userName,
-          email,
-          mobile,
-          address,
-          roleType,
-          gender
-        );
-        alert("User added successfully");
-      }
-      window.history.pushState({}, "", "/admin/users");
-      window.dispatchEvent(new PopStateEvent("popstate"));
-    } catch (error) {
-      console.error("Error adding/updating User:", error);
-      alert(
-        isEditMode ? "Failed to Update the User." : "Failed to Add the User."
-      );
-    }
-  };
-
-  const handleCancelClick = () => {
-    setUserName("");
-    setEmail("");
-    setMobile("");
-    setAddress("");
-    setRoleType("");
-    setGender("");
-
-    window.history.pushState({}, "", "/admin/users");
-    window.dispatchEvent(new PopStateEvent("popstate"));
-  };
-
-  return (
-    <div className="max-w-4xl p-6 mx-auto dark:bg-gray-800">
-      <div>
-        <form>
-          <h1 className="text-3xl font-bold text-center text-blue-600 capitalize dark:text-white mb-4">
-            {isEditMode ? "Edit User" : "Add User"}
-          </h1>
-
-          <div className="mb-6 w-full">
-            <label className="text-gray-900 dark:text-gray-200 font-semibold">
-              Name <span className="text-red-500">*</span>
-            </label>
-            <input
-              required
-              value={userName}
-              onChange={(e) => setUserName(e.target.value)}
-              type="text"
-              className="w-full px-4 py-2 mt-2  text-gray-800  bg-white border border-gray-400 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-800 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-              placeholder="Enter User Name"
-            />
-          </div>
-          <div className="mb-6 w-full">
-            <label className="text-gray-900 dark:text-gray-200 font-semibold">
-              Email <span className="text-red-500">*</span>
-            </label>
-            <input
-              required
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              type="email"
-              className="w-full px-4 py-2 mt-2  text-gray-800  bg-white border border-gray-400 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-800 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-              placeholder="Enter Email"
-            />
-          </div>
-          <div className="mb-6 w-full">
-            <label className="text-gray-900 dark:text-gray-200 font-semibold">
-              Mobile Number
-            </label>
-            <input
-              required
-              value={mobile}
-              onChange={(e) => setMobile(e.target.value)}
-              type="number"
-              className="w-full px-4 py-2 mt-2  text-gray-800  bg-white border border-gray-400 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-800 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-              placeholder="Enter Mobile Number"
-            />
-          </div>
-          <div className="mb-6 w-full">
-            <label className="text-gray-900 dark:text-gray-200 font-semibold">
-              Address
-            </label>
-            <input
-              required
-              value={address}
-              onChange={(e) => setAddress(e.target.value)}
-              type="text"
-              className="w-full px-4 py-2 mt-2  text-gray-800  bg-white border border-gray-400 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-800 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-              placeholder="Address"
-            />
-          </div>
-
-          <div className="mb-6 w-full">
-            <label className="text-gray-900 dark:text-gray-200 font-semibold">
-              Gender
-            </label>
-            <select
-              required
-              value={gender}
-              onChange={(e) =>
-                setGender(e.target.value === "" ? null : e.target.value)
-              }
-              className="w-full px-4 py-2 mt-2  text-gray-800  bg-white border border-gray-400 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-800 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-            >
-              <option value="">Select a Gender</option>
-              <option value="1">Male</option>
-              <option value="2">Female</option>
-            </select>
-          </div>
-
-          <div className="mb-6 w-full">
-            <label className="text-gray-900 dark:text-gray-200 font-semibold">
-              Role Type <span className="text-red-500">*</span>
-            </label>
-            <select
-              required
-              value={roleType}
-              onChange={(e) => setRoleType(e.target.value)}
-              className="w-full px-4 py-2 mt-2  text-gray-800  bg-white border border-gray-400 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-800 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-            >
-              <option value="">Select a Role Type</option>
-              <option value="1">Guest</option>
-              <option value="2">Admin</option>
-            </select>
-          </div>
-
-          <div className="flex space-x-4 mt-6 justify-end">
-            <button
-              type="submit"
-              onClick={handleSubmit}
-              className="px-8 py-2.5 leading-5 text-white transition-colors duration-300 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-gray-600"
-            >
-              {isEditMode ? "Edit" : "Add"}
-            </button>
-            <button
-              type="button"
-              onClick={handleCancelClick}
-              className="px-8 py-2.5 leading-5 text-white transition-colors duration-300 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-gray-600"
-            >
-              Cancel
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-};
-
-export default UserForm;