@banch0u/core-project-test-repository 1.0.30

package/.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-transform-runtime"
+  ]
+}

package/index.js

@@ -0,0 +1,2 @@
+const core = require("./dist"); // Adjust path if needed
+console.log(core);

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@banch0u/core-project-test-repository",
+  "version": "1.0.30",
+  "description": "Shared core features for all projects",
+  "main": "dist/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/banch0u/core-project-test-repository.git"
+  },
+  "private": false,
+  "author": "banch0u",
+  "license": "MIT",
+  "scripts": {
+    "build": "npx babel src --out-dir dist --copy-files"
+  },
+  "dependencies": {
+    "@microsoft/signalr": "^8.0.7",
+    "@pdftron/webviewer": "^11.2.0",
+    "antd": "^5.16.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.16.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.26.4",
+    "@babel/core": "^7.26.9",
+    "@babel/plugin-transform-runtime": "^7.26.9",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.26.3",
+    "babel-loader": "^9.2.1"
+  }
+}

package/src/assets/fonts/fonts.css

@@ -0,0 +1,53 @@
+@font-face {
+  font-family: "Inter";
+  src: url("./Inter/Inter-Thin.ttf") format("truetype");
+  font-weight: 100;
+}
+
+@font-face {
+  font-family: "Inter";
+  src: url("./Inter/Inter-ExtraLight.ttf") format("truetype");
+  font-weight: 200;
+}
+
+@font-face {
+  font-family: "Inter";
+  src: url("./Inter/Inter-Light.ttf") format("truetype");
+  font-weight: 300;
+}
+
+@font-face {
+  font-family: "Inter";
+  src: url("./Inter/Inter-Regular.ttf") format("truetype");
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "Inter";
+  src: url("./Inter/Inter-Medium.ttf") format("truetype");
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: "Inter";
+  src: url("./Inter/Inter-SemiBold.ttf") format("truetype");
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: "Inter";
+  src: url("./Inter/Inter-Bold.ttf") format("truetype");
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: "Inter";
+  src: url("./Inter/Inter-ExtraBold.ttf") format("truetype");
+  font-weight: 800;
+}
+
+@font-face {
+  font-family: "Inter";
+  src: url("./Inter/Inter-Black.ttf") format("truetype");
+  font-weight: 900;
+}

package/src/assets/icons/index.js

@@ -0,0 +1,72 @@
+import React from "react";
+export const SortIcon = () => {
+  return (
+    <svg
+      width="22"
+      height="22"
+      viewBox="0 0 22 22"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2.75 6.41663H19.25"
+        stroke="#016DAF"
+        strokeWidth="1.375"
+        strokeLinecap="round"
+      />
+      <path
+        d="M5.5 11H16.5"
+        stroke="#016DAF"
+        strokeWidth="1.375"
+        strokeLinecap="round"
+      />
+      <path
+        d="M9.16675 15.5834H12.8334"
+        stroke="#016DAF"
+        strokeWidth="1.375"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+};
+export const FilterIcon = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3.34985 2H12.2499C12.9899 2 13.5999 2.61001 13.5999 3.35001V4.82999C13.5999 5.36999 13.2599 6.04 12.9299 6.38L10.0299 8.94C9.62991 9.28 9.35986 9.94999 9.35986 10.49V13.39C9.35986 13.79 9.08988 14.33 8.74988 14.54L7.80987 15.15C6.92987 15.69 5.71985 15.08 5.71985 14V10.43C5.71985 9.95999 5.44987 9.35001 5.17987 9.01001L2.61987 6.31C2.27987 5.97 2.00989 5.36999 2.00989 4.95999V3.41C1.99989 2.61 2.60985 2 3.34985 2Z"
+        stroke="#016DAF"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M2 12V15C2 20 4 22 9 22H15C20 22 22 20 22 15V9C22 5.88 21.22 3.91999 19.41 2.89999C18.9 2.60999 17.88 2.38999 16.95 2.23999"
+        stroke="#016DAF"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13 13H18"
+        stroke="#016DAF"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M11 17H18"
+        stroke="#016DAF"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

package/src/components/Button/index.jsx

@@ -0,0 +1,61 @@
+import React from "react";
+import style from "./index.module.scss";
+const Button = ({
+  children,
+  onClick,
+  color = "blue",
+  disabled = false,
+  type,
+}) => {
+  return (
+    <>
+      {color === "blue" ? (
+        <button
+          disabled={disabled}
+          type={type}
+          className={style.button}
+          onClick={onClick}>
+          {children}
+        </button>
+      ) : null}
+      {color === "white" ? (
+        <button
+          disabled={disabled}
+          type={type}
+          className={style.button_white}
+          onClick={onClick}>
+          {children}
+        </button>
+      ) : null}
+      {color === "green" ? (
+        <button
+          disabled={disabled}
+          type={type}
+          className={style.button_green}
+          onClick={onClick}>
+          {children}
+        </button>
+      ) : null}
+      {color === "green-white" ? (
+        <button
+          disabled={disabled}
+          type={type}
+          className={style.button_green_white}
+          onClick={onClick}>
+          {children}
+        </button>
+      ) : null}
+      {color === "red" ? (
+        <button
+          disabled={disabled}
+          type={type}
+          className={style.button_red}
+          onClick={onClick}>
+          {children}
+        </button>
+      ) : null}
+    </>
+  );
+};
+
+export default Button;

package/src/components/Button/index.module.scss

@@ -0,0 +1,142 @@
+.button {
+  border-radius: 6px;
+  background: var(--darkBlueColor);
+  padding: 5px 10px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+  border: 1px solid var(--darkBlueColor);
+  color: #fff;
+  cursor: pointer;
+  transition: 250ms;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  svg {
+    path {
+      transition: 250ms;
+    }
+  }
+}
+
+.button:hover {
+  background: #005386;
+  border: 1px solid #005386;
+  transition: 250ms;
+}
+.button_white {
+  border-radius: 6px;
+  background: transparent;
+  padding: 5px 10px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+  border: 1px solid var(--darkBlueColor);
+  color: var(--darkBlueColor);
+  cursor: pointer;
+  transition: 250ms;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  svg {
+    path {
+      transition: 250ms;
+    }
+  }
+}
+.button_white:hover {
+  border: 1px solid gray;
+  color: gray;
+  transition: 250ms;
+  svg {
+    path {
+      transition: 250ms;
+      stroke: gray;
+    }
+  }
+}
+.button_white:disabled,
+.button_white[disabled] {
+  cursor: not-allowed !important;
+  opacity: 0.5 !important;
+  border-color: gray !important;
+  color: gray !important;
+}
+
+.button_green { 
+  border-radius: 6px;
+  background: #219653;
+  padding: 5px 10px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+  border: 1px solid #219653;
+  color: #fff;
+  cursor: pointer;
+  transition: 250ms;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  svg {
+    path {
+      transition: 250ms;
+    }
+  }
+}
+
+.button_red {
+  border-radius: 6px;
+  background: #eb5757;
+  padding: 5px 10px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+  border: 1px solid #eb5757;
+  color: #fff;
+  cursor: pointer;
+  transition: 250ms;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  svg {
+    path {
+      transition: 250ms;
+    }
+  }
+}
+
+.button_green_white {
+  border-radius: 6px;
+  background: transparent!important;
+  padding: 5px 10px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+  border: 1px solid #219653;
+  color: #fff;
+  cursor: pointer;
+  transition: 250ms;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  svg {
+    path {
+      transition: 250ms;
+      fill: #219653!important;
+    }
+  }
+}

package/src/components/ColSort/index.jsx

@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import { Dropdown, Menu, Checkbox } from "antd";
+import style from "./index.module.scss";
+import { SortIcon } from "../../assets/icons";
+import Button from "../Button";
+
+const ColSort = ({ columns, selectedColumns, handleColumnToggle }) => {
+  const [visible, setVisible] = useState(false);
+
+  const handleVisibleChange = (isVisible) => {
+    setVisible(isVisible);
+  };
+
+  const menu = (
+    <Menu className={style.menu}>
+      {columns
+        .filter((col) => col.dataIndex !== "filterOnly") // Exclude columns with dataIndex === "filterOnly"
+        .map(
+          (col) =>
+            col.showCheckbox !== false && (
+              <Menu.Item key={col.title}>
+                <div className={style.menu_item}>
+                  <Checkbox
+                    disabled={col.disabled}
+                    checked={selectedColumns.includes(col.dataIndex)}
+                    onChange={(e) =>
+                      handleColumnToggle(e.target.checked, col.dataIndex)
+                    }
+                  />
+                  <span>{col.title}</span>
+                </div>
+              </Menu.Item>
+            )
+        )}
+    </Menu>
+  );
+
+  return (
+    <Dropdown
+      overlay={menu}
+      trigger={["click"]}
+      visible={visible}
+      onVisibleChange={handleVisibleChange}>
+      <Button color="white">
+        <SortIcon />
+      </Button>
+    </Dropdown>
+  );
+};
+
+export default ColSort;

package/src/components/ColSort/index.module.scss

@@ -0,0 +1,40 @@
+.menu {
+  width: 254px;
+  padding: 10px !important;
+  padding-bottom: 5px !important;
+  box-shadow: 0px 4px 4px 0px #0000001a !important;
+  border: 1px solid #d1d1d1 !important;
+  background: #deeaf6 !important;
+
+  .count {
+    margin-bottom: 24px;
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 21px;
+  }
+
+  li {
+    padding: 0 !important;
+    margin-bottom: 5px !important;
+    font-family: Inter !important;
+    font-size: 14px !important;
+    font-weight: 400 !important;
+    line-height: 21px !important;
+    letter-spacing: -0.4000000059604645px !important;
+    text-align: left !important;
+  }
+  .menu_item {
+    display: flex;
+    gap: 8px;
+    background: #fff;
+    padding: 6px;
+    border-radius: 4px;
+  }
+}
+.filter_icon {
+  cursor: pointer;
+  width: 22px;
+  height: 22px;
+}

package/src/components/Filter/index.jsx

@@ -0,0 +1,220 @@
+import React, { useState } from "react";
+import {
+  Dropdown,
+  Menu,
+  Form,
+  Input,
+  Select,
+  DatePicker,
+  TreeSelect,
+} from "antd";
+import style from "./index.module.scss";
+import Button from "../Button";
+import { FilterIcon } from "../../assets/icons";
+
+const { Option } = Select;
+const { RangePicker } = DatePicker;
+
+const Filter = ({
+  columns,
+  selectedColumns,
+  setQuery,
+  disabledElementCount,
+  setPage,
+  setSelectedTopic,
+}) => {
+  const [filterForm] = Form.useForm();
+  const [visible, setVisible] = useState(false);
+
+  const handleOpenChange = (isOpen) => {
+    setVisible(isOpen);
+  };
+
+  const formatDate = (day, month, year) => {
+    const formattedDay = String(day).padStart(2, "0");
+    const formattedMonth = String(month).padStart(2, "0");
+    return `${formattedDay}.${formattedMonth}.${year}`;
+  };
+  const handleFinish = (values) => {
+    const formattedValues = { ...values };
+    Object.keys(values).forEach((key) => {
+      if (Array.isArray(values[key]) && values[key].length === 2) {
+        const [start, end] = values[key];
+        if (start && end) {
+          const formattedStart = formatDate(
+            start.date(),
+            start.month() + 1,
+            start.year()
+          );
+          const formattedEnd = formatDate(
+            end.date(),
+            end.month() + 1,
+            end.year()
+          );
+          formattedValues[key] = `${formattedStart} - ${formattedEnd}`;
+        }
+      }
+    });
+    setQuery(formattedValues);
+    setVisible(false);
+  };
+
+  // Filter the columns based on selectedColumns, filterDisable, and filter status
+  const filteredColumns = columns.filter(
+    (col) =>
+      (selectedColumns.includes(col.dataIndex) &&
+        col.filter !== false &&
+        col.filterDisable !== true) ||
+      col.dataIndex === "filterOnly" // Always include "filterOnly" columns in the filter
+  );
+
+  const getGrid = () => {
+    const elementCount = selectedColumns.length - disabledElementCount;
+    if (elementCount >= 5) return style.grid5;
+    if (elementCount === 4) return style.grid4;
+    if (elementCount === 3) return style.grid3;
+    if (elementCount === 2) return style.grid2;
+    if (elementCount === 1) return style.grid1;
+  };
+
+  const menu = (
+    <Menu className={style.menu}>
+      <div className="filter">
+        <Form
+          onFinish={handleFinish}
+          form={filterForm}
+          layout="vertical"
+          className={`${style.form} ${getGrid()}`}>
+          {[
+            ...filteredColumns.filter((col) => !col.isDouble), // Non-double elements
+            ...filteredColumns.filter((col) => col.isDouble), // Double elements
+          ].map((col) => {
+            if (col.showCheckbox === false) {
+              return null;
+            }
+
+            const gridSpanClass = col.isDouble
+              ? style.doubleGrid
+              : style.singleGrid;
+
+            if (col.type === "select") {
+              return (
+                <Form.Item
+                  key={col.dataIndex}
+                  label={col.title}
+                  name={col.queryName ? col.queryName : col.dataIndex}
+                  className={gridSpanClass} // Dynamically apply grid class
+                >
+                  <Select
+                    showSearch={col.isDouble} // Enable search for double items
+                    onChange={(value) => {
+                      if (col.dataIndex === "topic") {
+                        setSelectedTopic(value);
+                      }
+                    }}
+                    filterOption={(input, option) => {
+                      if (!option || !option.children) return false; // Ensure option and children exist
+
+                      const optionText = String(option.children); // Convert to string if needed
+                      const normalizedInput = input.toLowerCase(); // Normalize input to lowercase
+                      const normalizedOption = optionText
+                        .replace(/İ/g, "I")
+                        .toLowerCase(); // Normalize option text
+
+                      return normalizedOption.includes(normalizedInput);
+                    }}>
+                    <Option value=""></Option>
+                    {(col?.selectData || []).map((option, i) => {
+                      const isIdArray = Array.isArray(option.id);
+                      return (
+                        <Option
+                          key={i}
+                          value={
+                            isIdArray
+                              ? JSON.stringify(option.id) // Convert array to string
+                              : option.id // Use ID directly
+                          }>
+                          {option.name} {option.surname} {option.text}
+                          {/* Display the name */}
+                        </Option>
+                      );
+                    })}
+                  </Select>
+                </Form.Item>
+              );
+            }
+            if (col.type === "date") {
+              return (
+                <Form.Item
+                  key={col.dataIndex}
+                  label={col.title}
+                  name={col.queryName ? col.queryName : col.dataIndex}
+                  className={gridSpanClass} // Dynamically apply grid class
+                >
+                  <RangePicker format="DD.MM.YYYY" placeholder="" />
+                </Form.Item>
+              );
+            }
+            if (col.type === "recursive") {
+              return (
+                <Form.Item
+                  key={col.dataIndex}
+                  label={col.title}
+                  name={col.queryName ? col.queryName : col.dataIndex}
+                  className={gridSpanClass} // Dynamically apply grid class
+                >
+                  <TreeSelect
+                    // style={{ width: "230px", marginTop: "5px" }}
+                    showSearch
+                    popupMatchSelectWidth={false}
+                    allowClear
+                    treeDefaultExpandAll
+                    treeData={col.selectData}
+                  />
+                </Form.Item>
+              );
+            }
+            return (
+              <Form.Item
+                key={col.dataIndex}
+                label={col.title}
+                name={col.queryName ? col.queryName : col.dataIndex}
+                className={gridSpanClass} // Dynamically apply grid class
+              >
+                <Input />
+              </Form.Item>
+            );
+          })}
+        </Form>
+        <div className={style.buttons}>
+          <Button onClick={() => filterForm.resetFields()} color="white">
+            Təmizlə
+          </Button>
+          <Button
+            onClick={() => {
+              setPage(1);
+              filterForm.submit();
+              setVisible(false);
+            }}>
+            Axtar
+          </Button>
+        </div>
+      </div>
+    </Menu>
+  );
+
+  return (
+    <Dropdown
+      overlay={menu}
+      trigger={["click"]}
+      open={visible} // Updated to use open
+      onOpenChange={handleOpenChange} // Updated to use onOpenChange
+    >
+      <Button color="white">
+        <FilterIcon /> Filter menyu
+      </Button>
+    </Dropdown>
+  );
+};
+
+export default Filter;

package/src/components/Filter/index.module.scss

@@ -0,0 +1,99 @@
+.menu {
+  padding: 14px !important;
+  box-shadow: 0px 4px 4px 0px #0000001a;
+  background: #fff !important;
+
+  .form {
+    display: grid;
+    gap: 14px; // Space between items
+
+    &.grid5 {
+      grid-template-columns: repeat(5, minmax(170px, 1fr)); // 5 columns
+    }
+
+    &.grid4 {
+      grid-template-columns: repeat(4, minmax(170px, 1fr)); // 4 columns
+    }
+
+    &.grid3 {
+      grid-template-columns: repeat(3, minmax(170px, 1fr)); // 3 columns
+    }
+
+    &.grid2 {
+      grid-template-columns: repeat(2, minmax(170px, 1fr)); // 2 columns
+    }
+
+    &.grid1 {
+      grid-template-columns: repeat(1, minmax(170px, 1fr)); // 1 column
+    }
+
+    .singleGrid {
+      grid-column: span 1; // Single grid item takes one column
+      width: 170px; // Ensure single items are 170px wide
+    }
+
+    .doubleGrid {
+      grid-column: span 2; // Double grid item takes two columns
+      width: 334px; // Ensure double items are 334px wide
+    }
+
+    label {
+      font-family: Inter;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 16.94px;
+      text-align: left;
+      color: #646464;
+    }
+
+    .input,
+    .select,
+    .modal_date {
+      width: 100%; // Inherit width based on grid column
+      height: 34px;
+      border-radius: 6px;
+      padding: 8px 16px;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 24px;
+      text-align: left;
+    }
+
+    .select > div {
+      padding: 5px 16px !important;
+      border-radius: 6px !important;
+      height: 34px;
+    }
+
+    .select {
+      span {
+        font-size: 16px !important;
+        font-weight: 500 !important;
+        line-height: 24px !important;
+        text-align: left !important;
+      }
+    }
+
+    .modal_date {
+      input {
+        font-size: 16px !important;
+        font-weight: 500 !important;
+        line-height: 24px !important;
+        text-align: left !important;
+      }
+    }
+  }
+
+  .buttons {
+    display: flex;
+    justify-content: flex-end;
+    gap: 14px;
+    margin-top: 20px;
+  }
+}
+
+.filter_icon {
+  cursor: pointer;
+  width: 22px;
+  height: 22px;
+}

package/src/components/Loading/index.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import style from "./index.module.scss";
+import { Spin } from "antd";
+
+const Loading = () => {
+  return (
+    <>
+      <div className={style.overlay}></div>
+      <div className={style.spinner}>
+        <Spin size="large" />
+      </div>
+    </>
+  );
+};
+
+export default Loading;

package/src/components/Loading/index.module.scss

@@ -0,0 +1,18 @@
+.spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: red !important;
+  z-index: 9999;
+}
+
+.overlay {
+  height: 100vh;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: #ffffff50;
+  z-index: 9999;
+}

package/src/components/Pagination/Pagination.module.scss

@@ -0,0 +1,8 @@
+.pagination {
+  margin-top: 10px;
+}
+
+.container {
+  display: flex;
+  align-items: center;
+}

package/src/components/Pagination/Select.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Select as AntSelect } from "antd";
+import { counts } from "./constant";
+const { Option } = AntSelect;
+
+const Select = ({ setSize, size }) => {
+  const handleChange = (value) => {
+    setSize(value);
+  };
+
+  return (
+    <AntSelect
+      onChange={handleChange}
+      defaultValue={size}
+      style={{ width: 60, marginTop: "10px", marginLeft: "10px" }}
+    >
+      {counts.map((item) => (
+        <Option key={item.id} value={item.value}>
+          {item.value}
+        </Option>
+      ))}
+    </AntSelect>
+  );
+};
+
+export default Select;

package/src/components/Pagination/constant.js

@@ -0,0 +1,22 @@
+export const counts = [
+  {
+    id: 1,
+    value: "10",
+  },
+  {
+    id: 2,
+    value: "20",
+  },
+  {
+    id: 3,
+    value: "30",
+  },
+  {
+    id: 4,
+    value: "40",
+  },
+  {
+    id: 5,
+    value: "50",
+  },
+];

package/src/components/Pagination/index.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { Pagination as AntPagination } from "antd";
+import style from "./Pagination.module.scss";
+import Select from "./Select";
+
+const Pagination = ({ onChange, page = 1, size = 10, total = 0, setSize }) => {
+  const setPagination = (page) => {
+    onChange(page); // Trigger the page change callback
+
+    // Find the scrollable part of the Ant Table and scroll to the top
+    const tableBody = document.querySelector(".ant-table-body");
+    if (tableBody) {
+      tableBody.scrollTo({ top: 0, behavior: "smooth" });
+    }
+  };
+
+  return (
+    <div className={style.container}>
+      <AntPagination
+        className={style.pagination}
+        current={Number(page)} // Ensure numeric values
+        onChange={setPagination}
+        total={Number(total)} // Ensure numeric values
+        showSizeChanger={false}
+      />
+      <div className="pagination_select">
+        <Select size={size} setSize={setSize} style={{ marginTop: "10px" }} />
+      </div>
+    </div>
+  );
+};
+
+export default Pagination;

package/src/hooks/useNotification.js

@@ -0,0 +1,57 @@
+// hooks/useNotification.js
+import { useEffect, useState } from "react";
+import * as signalR from "@microsoft/signalr";
+import { infoMessageBottomRight } from "../utils/message";
+
+const useNotification = () => {
+  const [notifications, setNotifications] = useState(() => {
+    // localStorage'dan bildirimi başlat
+    const savedNotifications = localStorage.getItem("notifications");
+    return savedNotifications ? JSON.parse(savedNotifications) : [];
+  });
+
+  useEffect(() => {
+    const token = localStorage.getItem("token");
+    let baseUrl;
+    if (window.location.hostname === "localhost") {
+
+      baseUrl = process.env.REACT_APP_ROOT;
+    } else {
+      baseUrl = window.location.origin;
+    }
+    if (!token) {
+      console.error("Token tapılmadı!");
+      return;
+    }
+
+    const connection = new signalR.HubConnectionBuilder()
+      .withUrl(`${baseUrl}/notify?token=${token}`, {
+        transport:
+          signalR.HttpTransportType.WebSockets,
+        withCredentials: false,
+        skipNegotiation: true,
+      })
+      .configureLogging(signalR.LogLevel.Information)
+      .build();
+
+    connection
+      .start()
+      .then(() => {
+        console.log("SignalR bağlantısı quruldu.");
+        connection.on("receive", (message) => {
+          console.log("Yeni bildiriş:", message);
+          infoMessageBottomRight(message);
+        });
+      })
+      .catch((err) => console.error("SignalR bağlantısı qurula bilmədi:", err));
+
+    return () => {
+      connection.stop();
+      console.log("SignalR bağlantısı bağlandı.");
+    };
+  }, []);
+
+  return notifications;
+};
+
+export default useNotification;

package/src/index.js

@@ -0,0 +1,13 @@
+// Export the Button component from the components directory as a named export
+import "./assets/fonts/fonts.css";
+export { default as Button } from "./components/Button";
+export { default as ColSort } from "./components/ColSort";
+export { default as Filter } from "./components/Filter";
+export { default as Loading } from "./components/Loading";
+export { default as Pagination } from "./components/Pagination";
+export { default as useNotification } from "./hooks/useNotification";
+export { default as message } from "./utils/message";
+
+
+
+

package/src/utils/message.js

@@ -0,0 +1,37 @@
+import { notification } from "antd";
+
+const playNotificationSound = async () => {
+  const audio = new Audio("https://assets.mixkit.co/active_storage/sfx/2575/2575-preview.mp3");
+  audio.type = "audio/mpeg"; // Audio format
+  audio.preload = "auto";
+
+  setTimeout(() => {
+    audio.play().catch((error) => console.error("Audio play failed:", error));
+  }, 400);
+};
+
+
+export const errorMessage = ({ value, placeMent }) => {
+  return notification.error({
+    message: "",
+    description: value || "Serverdə problem baş verdi",
+    placement: placeMent,
+  });
+};
+
+export const succesMessage = (value) => {
+  return notification.success({
+    message: "",
+    description: value || "Uğurla tamamlandı",
+    placement: "topRight",
+  });
+};
+
+export const infoMessageBottomRight = (value) => {
+  playNotificationSound();
+  return notification.info({
+    message: "Yeni bildiriş",
+    description: value || "Bildiriş",
+    placement: "bottomRight",
+  });
+};

package/webpack.config.js

@@ -0,0 +1,35 @@
+const path = require('path');
+
+module.exports = {
+  entry: './src/index.js', // Your entry file where your components are exported
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'bundle.js', // Your output bundle
+    library: '@banch0u/core-project-test-repository', // Exposes your components as a library
+    libraryTarget: 'umd', // Can be used in various environments like CommonJS, AMD, etc.
+    clean: true, // Cleans the dist folder before each build
+  },
+  resolve: {
+    extensions: ['.js', '.jsx'], // Resolve .js and .jsx files
+  },
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/, // Applies to JavaScript/JSX files
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+        },
+      },
+      {
+        test: /\.scss$/, // Handles SCSS files
+        use: [
+          'style-loader', // Adds styles to DOM
+          'css-loader', // Translates CSS into CommonJS
+          'sass-loader', // Compiles SCSS to CSS
+        ],
+      },
+    ],
+  },
+  devtool: 'source-map', // For better error tracking
+};