@portnet/ui 5.0.12 → 5.0.14

package/dist/hooks/useReclamation.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useListServiceReclamation = exports.useListReclamation = exports.useDownloadDocument = exports.useCreateReclamation = void 0;
+var _reactQuery = require("react-query");
+var _PuiHelpWidgetContext = require("../components/common/PuiHelpWidgetContext");
+const useListReclamation = (page, search) => {
+  const {
+    reclamationApi
+  } = (0, _PuiHelpWidgetContext.useHelpWidget)();
+  return (0, _reactQuery.useQuery)({
+    queryKey: ["get_list_reclamation", page, search],
+    queryFn: () => reclamationApi.getListReclamationApi({
+      page,
+      size: 4,
+      search
+    }),
+    initialData: {},
+    retry: 1,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false
+  });
+};
+exports.useListReclamation = useListReclamation;
+const useCreateReclamation = () => {
+  const {
+    reclamationApi
+  } = (0, _PuiHelpWidgetContext.useHelpWidget)();
+  const queryClient = (0, _reactQuery.useQueryClient)();
+  return (0, _reactQuery.useMutation)({
+    mutationFn: data => reclamationApi.createReclamationApi(data),
+    onSuccess: data => {
+      queryClient.invalidateQueries("get_list_reclamation");
+    }
+  });
+};
+exports.useCreateReclamation = useCreateReclamation;
+const useDownloadDocument = () => {
+  const {
+    reclamationApi
+  } = (0, _PuiHelpWidgetContext.useHelpWidget)();
+  return (0, _reactQuery.useMutation)({
+    mutationFn: data => reclamationApi.downloadDocumentApi(data),
+    onSuccess: data => {
+      console.log("Download document success", data);
+    },
+    onError: err => {
+      console.log("Download document failled", err);
+    }
+  });
+};
+exports.useDownloadDocument = useDownloadDocument;
+const useListServiceReclamation = () => {
+  const {
+    reclamationApi
+  } = (0, _PuiHelpWidgetContext.useHelpWidget)();
+  return (0, _reactQuery.useQuery)({
+    queryKey: ["get_list_service_reclamation"],
+    queryFn: () => reclamationApi.getListServiceReclamationApi(),
+    initialData: {},
+    retry: 1,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false
+  });
+};
+exports.useListServiceReclamation = useListServiceReclamation;

package/dist/index.js

@@ -111,6 +111,18 @@ Object.defineProperty(exports, "PuiGrid", {
     return _PuiGrid.default;
   }
 });
+Object.defineProperty(exports, "PuiHelpWidget", {
+  enumerable: true,
+  get: function get() {
+    return _PuiHelpWidget.default;
+  }
+});
+Object.defineProperty(exports, "PuiHelpWidgetProvider", {
+  enumerable: true,
+  get: function get() {
+    return _PuiHelpWidgetProvider.default;
+  }
+});
 Object.defineProperty(exports, "PuiIcon", {
   enumerable: true,
   get: function get() {
@@ -330,6 +342,8 @@ var _PuiNotFoundErrorPage = _interopRequireDefault(require("./components/ui/page
 var _PuiServerErrorPage = _interopRequireDefault(require("./components/ui/pages/errors/PuiServerErrorPage"));
 var _PuiDefaultPage = _interopRequireDefault(require("./components/ui/pages/general/PuiDefaultPage"));
 var _PuiSearchPage = _interopRequireDefault(require("./components/ui/pages/general/PuiSearchPage"));
+var _PuiHelpWidget = _interopRequireDefault(require("./components/widgets/PuiHelpWidget"));
+var _PuiHelpWidgetProvider = _interopRequireDefault(require("./components/providers/PuiHelpWidgetProvider"));
 var _useAlert = _interopRequireDefault(require("./hooks/useAlert"));
 var _useQuery = _interopRequireDefault(require("./hooks/useQuery"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/styles/ReclamationFormModal.css

@@ -0,0 +1,569 @@
+.reclamation-modal .modal-paper {
+  border-radius: 15px;
+  display: flex;
+  flex-direction: column;
+  max-height: 90vh;
+  height: auto;
+}
+
+.reclamation-modal .MuiDialog-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.reclamation-modal .MuiPaper-root {
+  margin: 0;
+}
+
+
+.reclamation-modal .modal-header {
+  padding: 24px 32px;
+  background: linear-gradient(135deg, var(--primary-color, #222f67) 0%, var(--gradient-end, #3447a0) 100%);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+}
+
+.reclamation-modal .header-icon {
+  font-size: 32px;
+  animation: bounce 2s infinite;
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-5px);
+  }
+}
+
+.reclamation-modal .header-title {
+  font-weight: 600;
+  font-size: 20px;
+}
+
+.reclamation-modal .close-button {
+  color: white;
+  transition: transform 0.2s;
+}
+
+.reclamation-modal .close-button:hover {
+  transform: none;
+}
+
+.reclamation-modal .progress-section {
+  padding: 24px 32px 16px;
+  background-color: #f8f9fa;
+  flex-shrink: 0;
+}
+
+.reclamation-modal .progress-bar {
+  height: 6px;
+  border-radius: 10px;
+  margin-bottom: 24px;
+  background-color: #6c757d;
+}
+
+.reclamation-modal .progress-bar .MuiLinearProgress-bar {
+  background: linear-gradient(90deg, var(--primary-color, #222f67) 0%, var(--gradient-end, #3447a0) 100%);
+  border-radius: 10px;
+}
+
+.reclamation-modal .stepper {
+  background-color: transparent;
+}
+
+.reclamation-modal .stepper .MuiStepLabel-label {
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.reclamation-modal .stepper .MuiStepLabel-label.Mui-active {
+  color: var(--primary-color, #222f67);
+  font-weight: 600;
+}
+
+.reclamation-modal .stepper .MuiStepIcon-root.Mui-active {
+  color: var(--primary-color, #222f67);
+}
+
+.reclamation-modal .stepper .MuiStepIcon-root.Mui-completed {
+  color: #4caf50;
+}
+
+.reclamation-modal .modal-content {
+  padding: 24px 32px;
+  min-height: 300px;
+  background-color: white;
+  flex: 1 1 auto;
+  overflow-y: auto;
+  overflow-x: hidden;
+  display: flex;
+  justify-content: center;
+}
+
+.reclamation-modal .step-content {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.reclamation-modal .step-title {
+  font-weight: 600;
+  color: #2c3e50;
+  margin-bottom: 8px;
+}
+
+/* Type Selection Dropdown */
+.reclamation-modal .type-select .MuiOutlinedInput-root {
+  border-radius: 12px;
+  transition: all 0.3s;
+  min-height: 56px;
+}
+
+.reclamation-modal .type-select .MuiOutlinedInput-root:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.reclamation-modal .type-select .MuiOutlinedInput-root.Mui-focused {
+  box-shadow: 0 4px 16px var(--primary-alpha-15, rgba(34, 47, 103, 0.15));
+}
+
+.reclamation-modal .type-select .MuiInputLabel-root.Mui-focused {
+  color: var(--primary-color, #222f67);
+}
+
+.reclamation-modal .type-select .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: var(--primary-color, #222f67);
+  border-width: 2px;
+}
+
+.reclamation-modal .type-select .MuiMenuItem-root {
+  padding: 14px 16px;
+  transition: background-color 0.2s;
+}
+
+.reclamation-modal .type-select .MuiMenuItem-root:hover {
+  background-color: var(--light-color, #f0f2ff);
+}
+
+.reclamation-modal .type-select .MuiMenuItem-root.Mui-selected {
+  background-color: var(--primary-alpha-8, rgba(34, 47, 103, 0.08));
+  font-weight: 600;
+}
+
+.reclamation-modal .type-select .MuiMenuItem-root.Mui-selected:hover {
+  background-color: var(--primary-alpha-12, rgba(34, 47, 103, 0.12));
+}
+
+/* --- Service Autocomplete: Match Type Select Style --- */
+.reclamation-modal .service-autocomplete {
+  width: 384px !important;
+  max-width: 100%;
+  height: 230px;
+}
+
+.reclamation-modal .service-autocomplete .MuiOutlinedInput-root {
+  border-radius: 12px;
+  min-height: 56px;
+  transition: all 0.3s;
+}
+
+.reclamation-modal .service-autocomplete .MuiOutlinedInput-root:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.reclamation-modal .service-autocomplete .MuiOutlinedInput-root.Mui-focused {
+  box-shadow: 0 4px 16px var(--primary-alpha-15, rgba(34, 47, 103, 0.15));
+}
+
+.reclamation-modal .service-autocomplete .MuiInputLabel-root.Mui-focused {
+  color: var(--primary-color, #222f67);
+}
+
+.reclamation-modal
+  .service-autocomplete
+  .MuiOutlinedInput-root.Mui-focused
+  .MuiOutlinedInput-notchedOutline {
+  border-color: var(--primary-color, #222f67);
+  border-width: 2px;
+}
+
+/* --- Listbox (Dropdown) Styling --- */
+.reclamation-modal .service-listbox {
+  max-height: 300px;
+  border-radius: 12px;
+  margin-top: 4px !important;
+  background-color: #fff;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  overflow-y: auto;
+  position: absolute !important;
+  top: 100% !important;
+  left: 0 !important;
+  right: 0 !important;
+}
+
+/* --- Option Items --- */
+.reclamation-modal .service-option {
+  padding: 14px 16px;
+  transition: background-color 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+
+.reclamation-modal .service-option .MuiTypography-root {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
+}
+
+.reclamation-modal .service-option:hover {
+  background-color: var(--light-color, #f0f2ff);
+}
+
+.reclamation-modal .MuiAutocomplete-option[aria-selected='true'] {
+  background-color: var(--primary-alpha-8, rgba(34, 47, 103, 0.08)) !important;
+  font-weight: 600;
+}
+
+.reclamation-modal .MuiAutocomplete-option[aria-selected='true']:hover {
+  background-color: var(--primary-alpha-12, rgba(34, 47, 103, 0.12)) !important;
+}
+
+/* --- Bullet Color --- */
+.reclamation-modal .service-bullet {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--primary-color, #222f67);
+  flex-shrink: 0;
+}
+
+/* --- Autocomplete Popper Styling Fix --- */
+.service-popper {
+  z-index: 1300;
+}
+
+.service-popper .MuiAutocomplete-listbox {
+  border-radius: 12px;
+  background-color: #fff;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  margin-top: 4px;
+  padding: 4px 0;
+}
+
+.service-popper .MuiAutocomplete-option {
+  padding: 14px 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: background-color 0.2s;
+}
+
+.service-popper .MuiAutocomplete-option:hover {
+  background-color: var(--light-color, #f0f2ff);
+}
+
+.service-popper .MuiAutocomplete-option[aria-selected='true'] {
+  background-color: var(--primary-alpha-8, rgba(34, 47, 103, 0.08)) !important;
+  font-weight: 600;
+}
+
+.service-popper .MuiAutocomplete-option[aria-selected='true']:hover {
+  background-color: var(--primary-alpha-12, rgba(34, 47, 103, 0.12)) !important;
+}
+
+.service-popper .service-bullet {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--primary-color, #222f67);
+}
+
+
+/* Details Form */
+.reclamation-modal .details-step .form-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.reclamation-modal .form-field .MuiOutlinedInput-root {
+  border-radius: 12px;
+  transition: all 0.3s;
+}
+
+.reclamation-modal .form-field .MuiOutlinedInput-root:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.reclamation-modal .form-field .MuiOutlinedInput-root.Mui-focused {
+  box-shadow: 0 4px 16px var(--primary-alpha-12, rgba(34, 47, 103, 0.12));
+}
+
+.reclamation-modal .form-field .MuiInputLabel-root.Mui-focused {
+  color: var(--primary-color, #222f67);
+}
+
+.reclamation-modal .form-field .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: var(--primary-color, #222f67);
+  border-width: 2px;
+}
+
+/* File Upload */
+.reclamation-modal .file-upload-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.reclamation-modal .upload-button {
+  border-radius: 12px;
+  padding: 12px;
+  border: 2px dashed var(--primary-color, #222f67);
+  color: var(--primary-color, #222f67);
+  font-weight: 600;
+  text-transform: none;
+  transition: all 0.3s;
+}
+
+.reclamation-modal .upload-button:hover {
+  background-color: var(--light-color, #f0f2ff);
+  border-style: solid;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px var(--primary-alpha-15, rgba(34, 47, 103, 0.15));
+}
+
+.reclamation-modal .file-chip {
+  border-radius: 8px;
+  padding: 8px;
+  font-weight: 500;
+}
+
+/* Footer */
+.reclamation-modal .modal-footer {
+  padding: 16px 32px;
+  background-color: #f8f9fa;
+  border-top: 1px solid #6c757d;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-shrink: 0;
+  z-index: 10;
+  min-height: 45px;
+}
+
+.reclamation-modal .back-button {
+  color: #6c757d;
+  text-transform: none;
+  font-weight: 600;
+  border-radius: 10px;
+  padding: 10px 24px;
+  transition: background-color 0.3s, color 0.3s;
+}
+
+.reclamation-modal .back-button:hover {
+  background-color: var(--soft-hover, #e8ecfd);
+  color: var(--primary-color, #222f67) ! important;
+}
+
+.reclamation-modal .back-button:active {
+  background-color: var(--soft-active, #d5ddfb);
+  color: var(--primary-color, #222f67) ! important;
+}
+
+.reclamation-modal .next-button,
+.reclamation-modal .submit-button {
+  background: linear-gradient(135deg, var(--primary-color, #222f67) 0%, var(--gradient-end, #3447a0) 100%);
+  color: white;
+  text-transform: none;
+  font-weight: 600;
+  border-radius: 10px;
+  padding: 10px 32px;
+  box-shadow: 0 4px 12px var(--primary-alpha-30, rgba(34, 47, 103, 0.3));
+  transition: all 0.3s;
+}
+
+.reclamation-modal .upload-button:hover,
+.reclamation-modal .next-button:hover,
+.reclamation-modal .submit-button:hover,
+.success-modal .close-success-button:hover {
+  transform: none;
+  box-shadow: 0 4px 12px var(--primary-alpha-30, rgba(34, 47, 103, 0.3));
+}
+
+.reclamation-modal .next-button:hover,
+.reclamation-modal .submit-button:hover,
+.success-modal .close-success-button:hover {
+  transform: none;
+  box-shadow: 0 4px 12px var(--primary-alpha-35, rgba(34, 47, 103, 0.35));
+}
+
+.reclamation-modal .next-button:disabled,
+.reclamation-modal .submit-button:disabled {
+  background: #6c757d;
+  color: #9e9e9e;
+  box-shadow: none;
+}
+
+/* Success Modal */
+.success-modal .modal-paper {
+  border-radius: 20px;
+}
+
+.success-modal .success-content {
+  padding: 48px 32px;
+  text-align: center;
+}
+
+.success-modal .success-container {
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+.success-modal .success-icon {
+  font-size: 80px;
+  color: #4caf50;
+  margin-bottom: 24px;
+  animation: successPop 0.5s ease-out;
+}
+
+@keyframes successPop {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.success-modal .success-title {
+  font-weight: 700;
+  color: #2c3e50;
+  margin-bottom: 12px;
+}
+
+.success-modal .reference-box {
+  padding: 24px;
+  border-radius: 16px;
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+  margin: 24px 0;
+  border: 2px solid #cccc;
+  box-shadow:none;
+}
+
+.success-modal .reference-number {
+  font-weight: 700;
+  color: var(--primary-color, #222f67);
+  font-family: 'Courier New', monospace;
+  letter-spacing: 2px;
+  margin-top: 8px;
+}
+
+.success-modal .close-success-button {
+  margin-top: 24px;
+  background: linear-gradient(135deg, var(--primary-color, #222f67) 0%, var(--gradient-end, #3447a0) 100%);
+  color: white;
+  text-transform: none;
+  font-weight: 600;
+  border-radius: 12px;
+  padding: 14px;
+  font-size: 16px;
+  box-shadow: 0 4px 12px var(--primary-alpha-30, rgba(34, 47, 103, 0.3));
+  transition: all 0.3s;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .reclamation-modal .modal-header {
+    padding: 20px;
+  }
+
+  .reclamation-modal .modal-content {
+    padding: 24px 20px;
+  }
+
+  .reclamation-modal .progress-section {
+    padding: 20px;
+  }
+
+  .reclamation-modal .stepper .MuiStepLabel-label {
+    font-size: 11px;
+  }
+
+  .success-modal .success-content {
+    padding: 32px 20px;
+  }
+}
+
+/* Alert customization */
+.reclamation-modal .MuiAlert-root {
+  border-radius: 12px;
+  font-size: 14px;
+}
+
+.reclamation-modal .MuiAlert-icon {
+  font-size: 24px;
+}
+
+.reclamation-modal .MuiAlertTitle-root {
+  font-weight: 600;
+  font-size: 15px;
+}
+
+/* --- Force Autocomplete Dropdown Styling --- */
+.MuiAutocomplete-popper {
+  z-index: 1500 !important;
+}
+
+.MuiAutocomplete-popper .MuiAutocomplete-listbox {
+  border-radius: 12px !important;
+  background-color: #fff !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
+  margin-top: 4px !important;
+  padding: 4px 0 !important;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.MuiAutocomplete-popper .MuiAutocomplete-option {
+  padding: 14px 16px !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 8px !important;
+  transition: background-color 0.2s !important;
+}
+
+.MuiAutocomplete-popper .MuiAutocomplete-option:hover {
+  background-color: var(--light-color, #f0f2ff) !important;
+}
+
+.MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected='true'] {
+  background-color: var(--primary-alpha-8, rgba(34, 47, 103, 0.08)) !important;
+  font-weight: 600 !important;
+}
+
+.MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected='true']:hover {
+  background-color: var(--primary-alpha-12, rgba(34, 47, 103, 0.12)) !important;
+}
+
+.MuiAutocomplete-popper .service-bullet {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--primary-color, #222f67);
+  flex-shrink: 0;
+}