diff --git a/package-lock.json b/package-lock.json index 3da74294..49e5d0c0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,6 +27,7 @@ "react-apexcharts": "^1.7.0", "react-dom": "^18.2.0", "react-hook-form": "^7.54.2", + "react-quill": "^2.0.0", "react-redux": "^9.2.0", "react-router-dom": "^6.20.1", "react-toastify": "^11.0.2", @@ -1494,6 +1495,15 @@ "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==", "devOptional": true }, + "node_modules/@types/quill": { + "version": "1.3.10", + "resolved": "https://registry.npmjs.org/@types/quill/-/quill-1.3.10.tgz", + "integrity": "sha512-IhW3fPW+bkt9MLNlycw8u8fWb7oO7W5URC9MfZYHBlA24rex9rs23D5DETChu1zvgVdc5ka64ICjJOgQMr6Shw==", + "license": "MIT", + "dependencies": { + "parchment": "^1.1.2" + } + }, "node_modules/@types/react": { "version": "18.3.16", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.16.tgz", @@ -2100,7 +2110,6 @@ "version": "1.0.8", "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz", "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==", - "dev": true, "dependencies": { "call-bind-apply-helpers": "^1.0.0", "es-define-property": "^1.0.0", @@ -2118,7 +2127,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.1.tgz", "integrity": "sha512-BhYE+WDaywFg2TBWYNXAE+8B1ATnThNBqXHP5nQu0jWJdVvY2hvkpyB3qOmtmDePiS5/BDQ8wASEWGMWRG148g==", - "dev": true, "dependencies": { "es-errors": "^1.3.0", "function-bind": "^1.1.2" @@ -2131,7 +2139,6 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.2.tgz", "integrity": "sha512-0lk0PHFe/uz0vl527fG9CgdE9WdafjDbCXvBbs+LUv000TVt2Jjhqbs4Jwm8gz070w8xXyEAxrPOMullsxXeGg==", - "dev": true, "dependencies": { "call-bind": "^1.0.8", "get-intrinsic": "^1.2.5" @@ -2210,6 +2217,15 @@ "node": ">=6.0" } }, + "node_modules/clone": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz", + "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==", + "license": "MIT", + "engines": { + "node": ">=0.8" + } + }, "node_modules/clsx": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", @@ -2373,6 +2389,26 @@ } } }, + "node_modules/deep-equal": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.2.tgz", + "integrity": "sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==", + "license": "MIT", + "dependencies": { + "is-arguments": "^1.1.1", + "is-date-object": "^1.0.5", + "is-regex": "^1.1.4", + "object-is": "^1.1.5", + "object-keys": "^1.1.1", + "regexp.prototype.flags": "^1.5.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/deep-is": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", @@ -2383,7 +2419,6 @@ "version": "1.1.4", "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz", "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==", - "dev": true, "dependencies": { "es-define-property": "^1.0.0", "es-errors": "^1.3.0", @@ -2400,7 +2435,6 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz", "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==", - "dev": true, "dependencies": { "define-data-property": "^1.0.1", "has-property-descriptors": "^1.0.0", @@ -2482,7 +2516,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.0.tgz", "integrity": "sha512-9+Sj30DIu+4KvHqMfLUGLFYL2PkURSYMVXJyXe92nFRvlYq5hBjLEhblKB+vkd/WVlUYMWigiY07T91Fkk0+4A==", - "dev": true, "dependencies": { "call-bind-apply-helpers": "^1.0.0", "es-errors": "^1.3.0", @@ -2575,7 +2608,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz", "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==", - "dev": true, "engines": { "node": ">= 0.4" } @@ -2584,7 +2616,6 @@ "version": "1.3.0", "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz", "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==", - "dev": true, "engines": { "node": ">= 0.4" } @@ -2949,6 +2980,12 @@ "node": ">=0.10.0" } }, + "node_modules/eventemitter3": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz", + "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==", + "license": "MIT" + }, "node_modules/events": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz", @@ -2959,11 +2996,23 @@ "node": ">=0.8.x" } }, + "node_modules/extend": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", + "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==", + "license": "MIT" + }, "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, + "node_modules/fast-diff": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz", + "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==", + "license": "Apache-2.0" + }, "node_modules/fast-json-stable-stringify": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", @@ -3123,7 +3172,6 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", - "dev": true, "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -3150,7 +3198,6 @@ "version": "1.2.3", "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz", "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==", - "dev": true, "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -3167,7 +3214,6 @@ "version": "1.2.5", "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.5.tgz", "integrity": "sha512-Y4+pKa7XeRUPWFNvOOYHkRYrfzW07oraURSvjDmRVOJ748OrVmeXtpE4+GCEHncjCjkTxPNRt8kEbxDhsn6VTg==", - "dev": true, "dependencies": { "call-bind-apply-helpers": "^1.0.0", "dunder-proto": "^1.0.0", @@ -3277,7 +3323,6 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz", "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==", - "dev": true, "engines": { "node": ">= 0.4" }, @@ -3319,7 +3364,6 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz", "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==", - "dev": true, "dependencies": { "es-define-property": "^1.0.0" }, @@ -3346,7 +3390,6 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz", "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==", - "dev": true, "engines": { "node": ">= 0.4" }, @@ -3358,7 +3401,6 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz", "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==", - "dev": true, "dependencies": { "has-symbols": "^1.0.3" }, @@ -3373,7 +3415,6 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==", - "dev": true, "dependencies": { "function-bind": "^1.1.2" }, @@ -3460,6 +3501,22 @@ "node": ">= 0.4" } }, + "node_modules/is-arguments": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.2.0.tgz", + "integrity": "sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==", + "license": "MIT", + "dependencies": { + "call-bound": "^1.0.2", + "has-tostringtag": "^1.0.2" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/is-array-buffer": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz", @@ -3568,7 +3625,6 @@ "version": "1.0.5", "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz", "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==", - "dev": true, "dependencies": { "has-tostringtag": "^1.0.0" }, @@ -3683,7 +3739,6 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.0.tgz", "integrity": "sha512-B6ohK4ZmoftlUe+uvenXSbPJFo6U37BH7oO1B3nQH8f/7h27N56s85MhUtbFJAziz5dcmuR3i8ovUl35zp8pFA==", - "dev": true, "dependencies": { "call-bind": "^1.0.7", "gopd": "^1.1.0", @@ -4026,6 +4081,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", + "license": "MIT" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -4166,11 +4227,26 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/object-is": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz", + "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==", + "license": "MIT", + "dependencies": { + "call-bind": "^1.0.7", + "define-properties": "^1.2.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/object-keys": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz", "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==", - "dev": true, "engines": { "node": ">= 0.4" } @@ -4312,6 +4388,12 @@ "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==", "license": "(MIT AND Zlib)" }, + "node_modules/parchment": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz", + "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==", + "license": "BSD-3-Clause" + }, "node_modules/parent-module": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", @@ -4468,6 +4550,34 @@ } ] }, + "node_modules/quill": { + "version": "1.3.7", + "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz", + "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==", + "license": "BSD-3-Clause", + "dependencies": { + "clone": "^2.1.1", + "deep-equal": "^1.0.1", + "eventemitter3": "^2.0.3", + "extend": "^3.0.2", + "parchment": "^1.1.4", + "quill-delta": "^3.6.2" + } + }, + "node_modules/quill-delta": { + "version": "3.6.3", + "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz", + "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==", + "license": "MIT", + "dependencies": { + "deep-equal": "^1.0.1", + "extend": "^3.0.2", + "fast-diff": "1.1.2" + }, + "engines": { + "node": ">=0.10" + } + }, "node_modules/randombytes": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", @@ -4535,6 +4645,21 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-quill": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/react-quill/-/react-quill-2.0.0.tgz", + "integrity": "sha512-4qQtv1FtCfLgoD3PXAur5RyxuUbPXQGOHgTlFie3jtxp43mXDtzCKaOgQ3mLyZfi1PUlyjycfivKelFhy13QUg==", + "license": "MIT", + "dependencies": { + "@types/quill": "^1.3.10", + "lodash": "^4.17.4", + "quill": "^1.3.7" + }, + "peerDependencies": { + "react": "^16 || ^17 || ^18", + "react-dom": "^16 || ^17 || ^18" + } + }, "node_modules/react-redux": { "version": "9.2.0", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz", @@ -4651,7 +4776,6 @@ "version": "1.5.3", "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.3.tgz", "integrity": "sha512-vqlC04+RQoFalODCbCumG2xIOvapzVMHwsyIGM/SIE8fRhFFsXeH8/QQ+s0T0kDAhKc4k30s73/0ydkHQz6HlQ==", - "dev": true, "dependencies": { "call-bind": "^1.0.7", "define-properties": "^1.2.1", @@ -4946,7 +5070,6 @@ "version": "1.2.2", "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==", - "dev": true, "dependencies": { "define-data-property": "^1.1.4", "es-errors": "^1.3.0", @@ -4963,7 +5086,6 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz", "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==", - "dev": true, "dependencies": { "define-data-property": "^1.1.4", "es-errors": "^1.3.0", diff --git a/package.json b/package.json index 9ef661c8..51392450 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "react-apexcharts": "^1.7.0", "react-dom": "^18.2.0", "react-hook-form": "^7.54.2", + "react-quill": "^2.0.0", "react-redux": "^9.2.0", "react-router-dom": "^6.20.1", "react-toastify": "^11.0.2", diff --git a/public/assets/vendor/css/core.css b/public/assets/vendor/css/core.css index 46f34f42..a0771547 100644 --- a/public/assets/vendor/css/core.css +++ b/public/assets/vendor/css/core.css @@ -16889,7 +16889,8 @@ li:not(:first-child) .dropdown-item, box-shadow: var(--bs-box-shadow-xs); filter: none; opacity: 1; - transform: translate(23px, -25px); + transform: translate(6px, -9px); + z-index: 1056; border-radius: 0.25rem; transition: all 0.23s ease 0.1s; /* For hover effect of close btn */ @@ -16899,18 +16900,18 @@ li:not(:first-child) .dropdown-item, transition: none; } } -.modal .btn-close:hover, +/* .modal .btn-close:hover, .modal .btn-close:focus, .modal .btn-close:active { opacity: 1; outline: 0; transform: translate(20px, -20px); -} -:dir(rtl) .modal .btn-close:hover, +} */ +/* :dir(rtl) .modal .btn-close:hover, :dir(rtl) .modal .btn-close:focus, :dir(rtl) .modal .btn-close:active { transform: translate(26px, -20px); -} +} */ .modal .btn-close::before { display: block; background-color: var(--bs-secondary-color); diff --git a/src/components/Directory/CardViewDirectory.jsx b/src/components/Directory/CardViewDirectory.jsx index 50838bd3..9f7128a0 100644 --- a/src/components/Directory/CardViewDirectory.jsx +++ b/src/components/Directory/CardViewDirectory.jsx @@ -1,61 +1,77 @@ import React from "react"; import Avatar from "../common/Avatar"; -const CardViewDirectory = ({ contact,setSelectedContact , setIsOpenModal}) => { +const CardViewDirectory = ({ contact, setSelectedContact, setIsOpenModal,setOpen_contact,setIsOpenModalNote }) => { return ( -
-
-
- {" "} -

{contact.name}

-
-
-
- - +
+
+
+
+ {" "} +

{contact.name}

+
+
+
+ + +
+ +
    +
  • + +
    • +
  • + {contact.organization} +
    • +
-
+
+ { + setIsOpenModalNote(true) + setOpen_contact(contact) + }}>
{contact.contactEmails[0] && (
    @@ -80,12 +96,6 @@ const CardViewDirectory = ({ contact,setSelectedContact , setIsOpenModal}) => { )}
      -
    • - -
      • -
    • - {contact.organization} -
      • diff --git a/src/components/Directory/DirectorySchema.js b/src/components/Directory/DirectorySchema.js index 82d13dca..a9743829 100644 --- a/src/components/Directory/DirectorySchema.js +++ b/src/components/Directory/DirectorySchema.js @@ -42,16 +42,16 @@ export const ContactSchema = z bucketIds: z.array(z.string()).optional(), }) - .refine((data) => { - const hasValidEmail = (data.contactEmails || []).some( - (e) => e.emailAddress?.trim() !== "" - ); - const hasValidPhone = (data.contactPhones || []).some( - (p) => p.phoneNumber?.trim() !== "" - ); +// .refine((data) => { +// const hasValidEmail = (data.contactEmails || []).some( +// (e) => e.emailAddress?.trim() !== "" +// ); +// const hasValidPhone = (data.contactPhones || []).some( +// (p) => p.phoneNumber?.trim() !== "" +// ); - return hasValidEmail || hasValidPhone; -}, { - message: "At least one contact (email or phone) is required", - path: ["contactPhone"], -}); +// return hasValidEmail || hasValidPhone; +// }, { +// message: "At least one contact (email or phone) is required", +// path: ["contactPhone"], +// }); diff --git a/src/components/Directory/ManageDirectory.jsx b/src/components/Directory/ManageDirectory.jsx index a460f1b5..9ac4dac8 100644 --- a/src/components/Directory/ManageDirectory.jsx +++ b/src/components/Directory/ManageDirectory.jsx @@ -204,23 +204,22 @@ useEffect(() => { placeholder="email@example.com" /> {index === emailFields.length - 1 ? ( - + // + //
{errors.contactEmails?.[index]?.emailAddress && ( @@ -264,23 +263,23 @@ useEffect(() => { placeholder="9876543210" /> {index === phoneFields.length - 1 ? ( - + // + //
{errors.contactPhones?.[index]?.phoneNumber && ( diff --git a/src/components/Directory/NoteCardDirectory.jsx b/src/components/Directory/NoteCardDirectory.jsx new file mode 100644 index 00000000..a7020732 --- /dev/null +++ b/src/components/Directory/NoteCardDirectory.jsx @@ -0,0 +1,183 @@ +import React, { useState } from "react"; +import ReactQuill from "react-quill"; +import moment from "moment"; +import Avatar from "../common/Avatar"; +import { DirectoryRepository } from "../../repositories/DirectoryRepository"; +import showToast from "../../services/toastService"; +import { cacheData, getCachedData } from "../../slices/apiDataManager"; +import "../common/TextEditor/Editor.css"; + +const NoteCardDirectory = ({ noteItem, contactId, setProfileContact }) => { + const [editing, setEditing] = useState(false); + const [editorValue, setEditorValue] = useState(noteItem.note); + const [isLoading, setIsLoading] = useState(false); + const [isDeleting, setIsDeleting] = useState(false); + const handleUpdateNote = async () => { + try { + setIsLoading(true); + const payload = { + id: noteItem.id, + note: editorValue, + contactId: contactId, + }; + + const response = await DirectoryRepository.UpdateNote( + noteItem.id, + payload + ); + setProfileContact((prev) => ({ + ...prev, + notes: prev.notes.map((note) => + note.id === noteItem.id ? response?.data : note + ), + })); + + const cached_contactProfile = getCachedData("Contact Profile"); + + if ( + cached_contactProfile && + cached_contactProfile.contactId === contactId + ) { + const updatedProfile = { + ...cached_contactProfile, + data: { + ...cached_contactProfile?.data, + notes: cached_contactProfile?.data?.notes.map((note) => + note.id === noteItem.id ? response?.data : note + ), + }, + }; + cacheData("Contact Profile", updatedProfile); + } + setEditing(false); + setIsLoading(false); + showToast("Note Updated successfully", "success"); + } catch (error) { + setIsLoading(false); + const msg = + error.reponse.data.message || + error.message || + "Error occured during API calling."; + showToast("Failed to update note", "error"); + } + }; + + const handleDeleteNote = async () => { + try { + setIsDeleting(true); + const resp = await DirectoryRepository.DeleteNote(noteItem.id); + setProfileContact((prev) => ({ + ...prev, + notes: prev.notes.filter((note) => note.id !== noteItem.id), + })); + + const cachedContactProfile = getCachedData("Contact Profile"); + + if ( + cachedContactProfile && + cachedContactProfile.contactId === contactId + ) { + const updatedCache = { + ...cachedContactProfile, + data: { + ...cachedContactProfile?.data, + notes: (cachedContactProfile?.data?.notes || []).filter( + (note) => note.id !== noteItem.id + ), + }, + }; + + cacheData("Contact Profile", updatedCache); + } + setIsDeleting(false); + showToast("Note Deleted Successfully", "success"); + } catch (error) { + setIsDeleting(false); + const msg = + error.response?.data?.message || + error.message || + "Error occured during API calling"; + showToast(msg, "error"); + } + }; + + return ( +
+
+
+ +
+ + {noteItem.createdBy.firstName} {noteItem.createdBy.lastName} + + + {moment(noteItem.createdAt).format("MMMM DD, YYYY [at] hh:mm A")} + +
+
+
+ setEditing(true)} + > + {!isDeleting && ( + + )} + {isDeleting && ( + + )} +
+
+ +
+ + {editing ? ( + <> + +
+ setEditing(false)} + > + Cancel + + + {isLoading ? "Please Wait..." : "Submit"} + +
+ + ) : ( +
+ )} +
+ ); +}; + +export default NoteCardDirectory; diff --git a/src/components/Directory/NotesDirectory.jsx b/src/components/Directory/NotesDirectory.jsx new file mode 100644 index 00000000..c92713c5 --- /dev/null +++ b/src/components/Directory/NotesDirectory.jsx @@ -0,0 +1,148 @@ +import React, { useEffect, useState } from "react"; +import Editor from "../common/TextEditor/Editor"; +import Avatar from "../common/Avatar"; +import { useForm } from "react-hook-form"; +import { z } from "zod"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { showText } from "pdf-lib"; +import { DirectoryRepository } from "../../repositories/DirectoryRepository"; +import moment from "moment"; +import { cacheData, getCachedData } from "../../slices/apiDataManager"; +import NoteCardDirectory from "./NoteCardDirectory"; +import showToast from "../../services/toastService"; + +const schema = z.object({ + note: z.string().min(1, { message: "Note is required" }), +}); + +const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => { + const [NotesData, setNotesData] = useState(); + const [IsSubmitting, setIsSubmitting] = useState(false); + const [addNote, setAddNote] = useState(false); + const { + register, + handleSubmit, + setValue, + watch, + formState: { errors }, + } = useForm({ + resolver: zodResolver(schema), + defaultValues: { + note: "", + }, + }); + + const noteValue = watch("note"); + + const handleEditorChange = (value) => { + setValue("note", value, { shouldValidate: true }); + }; + + const onSubmit = async (data) => { + const newNote = { ...data, contactId: contactProfile?.id }; + try { + setIsSubmitting(true); + const response = await DirectoryRepository.CreateNote(newNote); + + const createdNote = response.data; + + setProfileContact((prev) => ({ + ...prev, + notes: [...(prev.notes || []), createdNote], + })); + + const cached_contactProfile = getCachedData("Contact Profile"); + if ( + cached_contactProfile && + cached_contactProfile.contactId === contactProfile?.id + ) { + const updatedProfile = { + ...cached_contactProfile.data, + notes: [...(cached_contactProfile.notes || []), createdNote], + }; + cacheData("Contact Profile", updatedProfile); + } + + setValue("note", ""); + setIsSubmitting(false); + showToast("Note added successfully!", "success"); + setAddNote(false); + } catch (error) { + setIsSubmitting(false); + const msg = + error.response.data.message || + error.message || + "Error occured during API calling"; + showToast(msg, "error"); + } + }; + + const onCancel = () => { + setValue("note", ""); + }; + + return ( +
+
0 + ? "d-flex justify-content-between" + : "d-flex justify-content-end" + }`} + > + {contactProfile?.notes.length > 0 && ( +

Notes :

+ )} + setAddNote(!addNote)} + > + + {addNote ? "" : "Add Note"} + {" "} + {" "} + +
+ {addNote && ( +
+ + {errors.notes && ( +

{errors.note.message}

+ )} + + )} +
+ {isLoading && ( +
+ {" "} +

Loading...

{" "} +
+ )} + {!isLoading && + [...(contactProfile?.notes || [])] + .reverse() + .map((noteItem) => ( + + ))} +
+
+ ); +}; + +export default NotesDirectory; diff --git a/src/components/Directory/ProfileContactDirectory.jsx b/src/components/Directory/ProfileContactDirectory.jsx new file mode 100644 index 00000000..7b7a3ed4 --- /dev/null +++ b/src/components/Directory/ProfileContactDirectory.jsx @@ -0,0 +1,103 @@ +import React, { useEffect, useState } from "react"; +import { useContactProfile } from "../../hooks/useDirectory"; +import Avatar from "../common/Avatar"; +import moment from "moment"; +import NotesDirectory from "./NotesDirectory"; + +const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => { + const { conatProfile, loading } = useContactProfile(contact?.id); + const [activeTab, setActiveTab] = useState("profile"); + const [profileContact, setProfileContact] = useState(); + + useEffect(() => { + setProfileContact(conatProfile); + }, [conatProfile]); + return ( +
+
+

Contact Profile

+
+
+
+ +
+ {contact?.name} + + {" "} + {conatProfile?.organization} + +
+
+
+ {conatProfile?.contactEmails?.length > 0 && ( +
+
+

Email

+
+
+
    + {conatProfile.contactEmails.map((email, idx) => ( +
  • + + {email.emailAddress} +
    • + ))} +
+
+
+ )} + {conatProfile?.contactPhones?.length > 0 && ( +
+
+

Phone

+
+
+
    + {conatProfile.contactPhones.map((phone, idx) => ( +
  • + + {phone.phoneNumber} +
    • + ))} +
+
+
+ )} + + {conatProfile?.createdAt && ( +
+
+

Created

+
+
+
    +
  • + + {moment(conatProfile.createdAt).format("MMMM, DD YYYY")} +
    • +
+
+
+ )} +
+ +
+ +
+
+ ); +}; + +export default ProfileContactDirectory; diff --git a/src/components/Directory/UpdateContact.jsx b/src/components/Directory/UpdateContact.jsx index d210435c..03ae906c 100644 --- a/src/components/Directory/UpdateContact.jsx +++ b/src/components/Directory/UpdateContact.jsx @@ -239,23 +239,23 @@ await submitContact({ ...cleaned, id: existingContact.id }); placeholder="email@example.com" /> {index === emailFields.length - 1 ? ( - + // + //
{errors.contactEmails?.[index]?.emailAddress && ( @@ -299,23 +299,21 @@ await submitContact({ ...cleaned, id: existingContact.id }); placeholder="9876543210" /> {index === phoneFields.length - 1 ? ( - + // + //
{errors.contactPhones?.[index]?.phoneNumber && ( diff --git a/src/components/common/GlobalModel.jsx b/src/components/common/GlobalModel.jsx index afac3c42..61e09750 100644 --- a/src/components/common/GlobalModel.jsx +++ b/src/components/common/GlobalModel.jsx @@ -8,7 +8,8 @@ const GlobalModel = ({ dialogClass = '', // For additional custom classes on modal dialog role = 'dialog', // Accessibility role for the modal size = '', // Dynamically set the size (sm, lg, xl) - dataAttributes = {} // Additional dynamic data-bs-* attributes + dataAttributes = {}, // Additional dynamic data-bs-* attributes + IsCloseBtn=true }) => { const modalRef = useRef(null); // Reference to the modal element @@ -69,13 +70,13 @@ useEffect(() => {
{/* Close button inside the modal header */} - + >}
{children} {/* Render children here, which can be the ReportTask component */} diff --git a/src/components/common/MultiSelectDropdown.css b/src/components/common/MultiSelectDropdown.css index eae0fa94..38ada243 100644 --- a/src/components/common/MultiSelectDropdown.css +++ b/src/components/common/MultiSelectDropdown.css @@ -118,8 +118,8 @@ } .custom-checkbox:checked { - background-color: #0d6efd; - border-color: #0d6efd; + background-color: #696cff; + border-color: #696cff; } .custom-checkbox:checked::after { diff --git a/src/components/common/TextEditor/Editor.css b/src/components/common/TextEditor/Editor.css new file mode 100644 index 00000000..a48c4638 --- /dev/null +++ b/src/components/common/TextEditor/Editor.css @@ -0,0 +1,132 @@ +.editor-wrapper { + max-width: 800px; + margin: 1px auto; + background: #fff; + + overflow: hidden; +} + +.ql-container { + border: 1px solid #ccc; + border-bottom: none; + min-height: 80px; +} + +.custom-toolbar { + /* text-align: left; */ + background-color: transparent; + border: 1px solid #ccc; + border-top: none; +} +/* Target the dropdown in the toolbar */ +.ql-toolbar .ql-picker.ql-header { + position: relative; +} + +/* Open the dropdown upwards */ +.ql-toolbar .ql-picker.ql-header .ql-picker-options { + bottom: 100%; /* Move it above the picker */ + top: auto; /* Cancel default dropdown positioning */ + margin-bottom: 5px; /* Optional spacing */ +} +.ql-toolbar .ql-picker.ql-header { + font-family: Arial, sans-serif; + font-size: 10px; +} + +.ql-toolbar .ql-picker-label { + background-color: #eee; + /* padding: 6px 10px; */ + border-radius: 4px; + cursor: pointer; + color: #333; +} + +.ql-toolbar .ql-picker-options { + background-color: white; + border: 1px solid #ccc; + box-shadow: 0 4px 8px rgba(0,0,0,0.1); + border-radius: 4px; + overflow: hidden; +} + +.ql-toolbar .ql-picker-options span { + padding: 2px 1px; + display: block; + cursor: pointer; +} + +.ql-toolbar .ql-picker-options span:hover { + background-color: #f0f0f0; +} + +.ql-toolbar .ql-picker-item{ + padding: 0px; +} +.ql-snow.ql-toolbar button, .ql-snow .ql-toolbar button { + background: none; + border: none; + cursor: pointer; + display: inline-block; + float: left; + font-size: 15px; + padding: 2px 2px; + width: 28px; +} +.ql-toolbar.ql-snow{ + padding: 4px; +} + + + +@media (max-width: 768px) { +.ql-toolbar.ql-snow .ql-formats { + margin-right: 1px; + align-items: center; +} +} + + + +.ql-snow.ql-toolbar button, +.ql-snow .ql-toolbar button { + background: none; + border: none; + cursor: pointer; + display: inline-block; + height: 18px; + padding: 2px 2px; + width: 22px; + font-size: 14px; + /* REMOVE THIS to fix side-alignment */ + /* float: left; */ + vertical-align: middle; +} + +.ql-snow .ql-picker-label { + font-size: 10px; /* Smaller text */ + padding: 0 6px; /* Horizontal padding */ + height: 20px; /* Height of the label */ + line-height: 20px; /* Match height to vertically center single-line text */ + background-color: #eee; + border-radius: 0px; + cursor: pointer; + color: #333; + text-align: center; + width: 100%; + + display: flex; /* Enable flexbox */ + align-items: center; /* Vertical centering */ + justify-content: center; /* Horizontal centering */ +} + + +/* Remove custom upward-opening styles */ +.ql-toolbar .ql-picker.ql-header .ql-picker-options { + top: 100%; /* Position it below the label */ + bottom: auto; /* Cancel the upward positioning */ + margin-top: 5px; /* Optional spacing */ +} +.ql-editor { + padding: 4px 15px; +} \ No newline at end of file diff --git a/src/components/common/TextEditor/Editor.jsx b/src/components/common/TextEditor/Editor.jsx new file mode 100644 index 00000000..84f9728f --- /dev/null +++ b/src/components/common/TextEditor/Editor.jsx @@ -0,0 +1,94 @@ +import React, { useRef } from "react"; +import ReactQuill from "react-quill"; +import "quill/dist/quill.snow.css"; +import "./Editor.css"; + +const Editor = ({ + value, + loading, + onChange, + onCancel, + onSubmit, + placeholder = "Start writing...", +}) => { + const modules = { + toolbar: { + container: "#custom-toolbar", + }, + }; + + const formats = [ + "header", + "bold", + "italic", + "underline", + "strike", + "list", + "bullet", + "blockquote", + "code-block", + "link", + "align", + "image" + ]; + + return ( +
+
+
+ {/* Left: Quill Format Buttons */} + + + +
+
+ + {/* Right: Submit + Cancel Buttons */} +
+ + Cancel + + + {loading ? "Please Wait..." : "Submit"} + +
+ +
+ ); +}; + +export default Editor; diff --git a/src/hooks/useDirectory.js b/src/hooks/useDirectory.js index 21c4a320..7d18a554 100644 --- a/src/hooks/useDirectory.js +++ b/src/hooks/useDirectory.js @@ -61,3 +61,80 @@ export const useBuckets = () => { return { buckets, loading, error }; }; + +export const useContactProfile = (id) => +{ + const [ conatProfile, setContactProfile ] = useState( null ); + const [ loading, setLoading ] = useState( false ); + const [ Error, setError ] = useState( "" ); + + +const fetchContactProfile = async () => { + const cached = getCachedData("Contact Profile"); + + if (!cached || cached.contactId !== id) { + setLoading(true); + try { + const resp = await DirectoryRepository.GetContactProfile(id); + setContactProfile(resp.data); + cacheData("Contact Profile", { data: resp.data, contactId: id }); + } catch (err) { + const msg = + err?.response?.data?.message || err?.message || "Something went wrong"; + setError(msg); + } finally { + setLoading(false); + } + } else { + setContactProfile(cached.data); + } + }; + + useEffect(() => { + if ( id ) + { + fetchContactProfile(id); + } + }, [id]); + + return { conatProfile, loading, Error }; +} + + +export const useContactNotes = (id) => +{ + const [ conatNotes, setContactNotes ] = useState( [] ); + const [ loading, setLoading ] = useState( false ); + const [ Error, setError ] = useState( "" ); + + +const fetchContactNotes = async () => { + const cached = getCachedData("Contact Notes"); + + if (!cached || cached.contactId !== id) { + setLoading(true); + try { + const resp = await DirectoryRepository.GetNote(id); + setContactNotes(resp.data); + cacheData("Contact Notes", { data: resp.data, contactId: id }); + } catch (err) { + const msg = + err?.response?.data?.message || err?.message || "Something went wrong"; + setError(msg); + } finally { + setLoading(false); + } + } else { + setContactNotes(cached.data); + } + }; + + useEffect(() => { + if ( id ) + { + fetchContactNotes(id); + } + }, [id]); + + return { conatProfile, loading, Error }; +} diff --git a/src/pages/Directory/Directory.jsx b/src/pages/Directory/Directory.jsx index f231cd67..6e00e720 100644 --- a/src/pages/Directory/Directory.jsx +++ b/src/pages/Directory/Directory.jsx @@ -12,15 +12,18 @@ import UpdateContact from "../../components/Directory/UpdateContact"; import CardViewDirectory from "../../components/Directory/CardViewDirectory"; import { useContactCategory } from "../../hooks/masterHook/useMaster"; import usePagination from "../../hooks/usePagination"; -import {ITEMS_PER_PAGE} from "../../utils/constants"; +import { ITEMS_PER_PAGE } from "../../utils/constants"; +import ProfileContactDirectory from "../../components/Directory/ProfileContactDirectory"; const Directory = () => { const [isOpenModal, setIsOpenModal] = useState(false); + const [isOpenModalNote, setIsOpenModalNote] = useState(false); const [selectedContact, setSelectedContact] = useState(null); + const [open_contact, setOpen_contact] = useState(null); const [ContatList, setContactList] = useState([]); const [contactCategories, setContactCategories] = useState([]); - const [ searchText, setSearchText ] = useState( "" ); - const [listView, setListView] = useState(true); + const [searchText, setSearchText] = useState(""); + const [listView, setListView] = useState(false); const { contacts, loading } = useDirectory(); const { contactCategory, loading: contactCategoryLoading } = @@ -59,6 +62,7 @@ const Directory = () => { const closedModel = () => { setIsOpenModal(false); setSelectedContact(null); + setOpen_contact(null); }; useEffect(() => { setContactList(contacts); @@ -80,23 +84,39 @@ const Directory = () => { ); }; const filteredContacts = useMemo(() => { - return ContatList - .filter((c) => { - const matchesSearch = - c.name.toLowerCase().includes(searchText.toLowerCase()) || - c.organization.toLowerCase().includes(searchText.toLowerCase()); - const matchesCategory = - selectedCategoryIds.length === 0 || - selectedCategoryIds.includes(c.contactCategory?.id); - return matchesSearch && matchesCategory; - }) - .sort((a, b) => a.name.localeCompare(b.name)); + return ContatList.filter((c) => { + const matchesSearch = + c.name.toLowerCase().includes(searchText.toLowerCase()) || + c.organization.toLowerCase().includes(searchText.toLowerCase()); + const matchesCategory = + selectedCategoryIds.length === 0 || + selectedCategoryIds.includes(c.contactCategory?.id); + return matchesSearch && matchesCategory; + }).sort((a, b) => a.name.localeCompare(b.name)); }, [ContatList, searchText, selectedCategoryIds]); const { currentPage, totalPages, currentItems, paginate } = usePagination( filteredContacts, ITEMS_PER_PAGE ); + const renderModalContent = () => { + if (selectedContact) { + return ( + + ); + } + + if (!open_contact) { + return ( + + ); + } + }; + return (
{ {isOpenModal && ( setIsOpenModal(false)} + closeModal={() => + { + setSelectedContact(null) + setIsOpenModal(false) + }} size="lg" > - {selectedContact ? ( - - ) : ( - - )} + {renderModalContent()} + + )} + {isOpenModalNote && ( + + { + setOpen_contact(null) + setIsOpenModalNote(false) + }} + size="lg" + > + {open_contact && setIsOpenModalNote(false)} />} )}
-
+
{
- -
+
- { - listView ? ( -
- - - - - - - - - - - - - - {loading && ContatList.length === 0 && ( + {!listView && loading &&

Loading...

} + {listView ? ( +
+
-
- alert("User icon clicked")} - /> - Name -
- 		-
- - Email -
- 		-
- alert("User icon clicked")} - /> - Phone -
- 		-
- - Organization -
- 		Category - Action -
+ - - - )} - {!loading && contacts.length == 0 && ContatList.length === 0 && ( - - - - )} - {!loading && - currentItems.map((contact) => ( - - ))} - -
Loading...
No Contact Found
-
- ) : ( -
- {currentItems.map((contact, index) => ( -
- -
- ))} -
- ) - } + +
+ alert("User icon clicked")} + /> + Name +
+ + +
+ + Email +
+ - - - + +
+ alert("User icon clicked")} + /> + Phone +
+ + +
+ + Organization +
+ + Category + + Action + + + + + {loading && ContatList.length === 0 && ( + + Loading... + + )} + {!loading && + contacts.length == 0 && + ContatList.length === 0 && ( + + No Contact Found + + )} + {!loading && + currentItems.map((contact) => ( + + ))} + + +
+ ) : ( +
+ {currentItems.map((contact, index) => ( +
+ +
+ ))} +
+ )} {!loading && (