diff --git a/package.json b/package.json index e3acfbb..79a84aa 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "no-copy-frontend", - "version": "0.87.0", + "version": "0.88.0", "private": true, "scripts": { "dev": "next dev -p 2999", diff --git a/src/app/styles/global-styles.scss b/src/app/styles/global-styles.scss index b731bcf..aa0330c 100644 --- a/src/app/styles/global-styles.scss +++ b/src/app/styles/global-styles.scss @@ -7,6 +7,7 @@ @use './privacy-and-terms-pages.scss'; @use './VKLogin.scss'; @use './animation.scss'; +@use './violation-details.scss'; .page-title { font-size: 30px; diff --git a/src/app/styles/pages-styles.scss b/src/app/styles/pages-styles.scss index 8a3581b..9bd5ec0 100644 --- a/src/app/styles/pages-styles.scss +++ b/src/app/styles/pages-styles.scss @@ -4255,619 +4255,6 @@ } } -.violation-details { - .page-title-color-frame { - display: flex; - gap: 10px; - - .violation-page-icon { - width: 80px; - height: 80px; - border-radius: 20px; - display: flex; - align-items: center; - justify-content: center; - font-size: 40px; - background: rgba(255, 255, 255, 0.2); - backdrop-filter: blur(10px); - border: 2px solid rgba(255, 255, 255, 0.3); - overflow: hidden; - - .icon { - width: 100%; - height: 100%; - } - } - - .violation-page-info { - display: flex; - gap: 10px; - } - } - - .card-header { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 20px; - padding-bottom: 15px; - border-bottom: 1px solid v.$border-color-1; - } - - .info-row { - display: flex; - justify-content: space-between; - padding: 12px 0; - border-bottom: 1px solid #f8fafc; - } - - .info-label { - color: #64748b; - font-size: 14px; - } - - .info-value { - color: #1e293b; - font-weight: 600; - font-size: 14px; - text-align: right; - } - - .violation-source { - margin-top: 15px; - - &-title { - font-size: 14px; - color: #64748b; - margin-bottom: 8px; - font-weight: 600; - } - - .url-display { - background: #f8fafc; - padding: 12px; - border-radius: 8px; - border: 1px solid v.$border-color-1; - margin-top: 10px; - word-break: break-all; - - .url-link { - color: #6366f1; - text-decoration: none; - font-weight: 600; - } - } - } - - .notes-section { - background: #f8fafc; - padding: 15px; - border-radius: 12px; - margin-top: 15px; - border: 1px solid v.$border-color-1; - text-align: left; - - .notes-title { - font-size: 14px; - font-weight: 600; - color: #1e293b; - margin-bottom: 10px; - text-align: left; - } - - .notes-content { - font-size: 13px; - color: #475569; - line-height: 1.6; - white-space: pre-line; - max-height: 200px; - overflow-y: auto; - text-align: left; - word-wrap: break-word; - margin: 0; - padding: 0; - } - } - - .stats-mini-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 15px; - margin-bottom: 20px; - - .stat-mini-card { - background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); - padding: 15px; - border-radius: 12px; - text-align: center; - border: 1px solid v.$border-color-1; - } - - .stat-mini-value { - font-size: 28px; - font-weight: 700; - color: #1e293b; - margin-bottom: 5px; - } - - .stat-mini-label { - font-size: 12px; - color: #64748b; - } - } - - .btn-small { - padding: 6px 12px; - border-radius: 8px; - font-size: 12px; - font-weight: 600; - border: none; - cursor: pointer; - transition: all 0.3s ease; - text-decoration: none; - display: inline-block; - - &:disabled { - opacity: 0.6; - } - } - - .btn-primary-small { - background: linear-gradient(135deg, #6366f1, #8b5cf6); - color: white; - - &:hover { - box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4); - } - } - - .btn-secondary-small { - background: #f1f5f9; - color: #64748b; - - &:hover { - background: v.$border-color-1; - } - } - - .sources-list-wrapper { - display: grid; - grid-template-columns: 1fr 3fr; - gap: 10px; - height: 80vh; - margin-bottom: 20px; - - .sources-list { - display: flex; - flex-direction: column; - gap: 15px; - - .source-card { - background: #fff; - border: 1px solid #f3f4f6; - border-radius: 20px; - box-shadow: 0 4px 20px #0000001a; - - - - transition: all 0.3s ease; - padding: 15px; - height: calc(16vh - 12px); - cursor: pointer; - justify-content: space-between; - opacity: 0.75; - display: flex; - gap: 10px; - - &:hover { - transform: translateY(-2px); - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); - border-color: #cbd5e1; - } - - &.selected { - opacity: 1; - border: 1px solid #6366f1; - background: linear-gradient(180deg, #ffffff 0%, #e6eaf3 100%); - } - } - - .source-header { - display: flex; - align-items: start; - justify-content: space-between; - margin-bottom: 10px; - gap: 5px; - - &-left { - display: flex; - flex-direction: column; - } - - &-right { - display: flex; - flex-direction: column; - align-items: end; - } - } - - .source-image { - max-height: 80%; - min-height: 50px; - height: 100%; - position: relative; - - img { - position: relative !important; - height: 100% !important; - border-radius: 8px; - width: auto !important; - } - } - - .source-url-block { - margin-top: auto; - } - - .source-url { - color: #6366f1; - font-weight: 600; - font-size: 14px; - text-decoration: none; - word-break: break-all; - flex: 1; - } - - .source-meta { - gap: 15px; - font-size: 12px; - color: #64748b; - margin-bottom: 10px; - flex-wrap: wrap; - margin-right: 5px; - } - - .source-actions { - display: flex; - gap: 10px; - flex-wrap: wrap; - margin-top: auto; - } - } - } - - .sources-list-pagination { - display: flex; - justify-content: space-between; - align-items: center; - } - - .source-status { - padding: 4px 10px; - border-radius: 6px; - font-size: 11px; - font-weight: 600; - white-space: nowrap; - margin-bottom: 5px; - user-select: none; - - &.new, - &.created { - background: v.$status-new; - } - - &.showed { - background-color: v.$b-color-1; - } - - &.legal_in_work, - &.complaint_in_work { - background: v.$status-in-work; - color: v.$white; - } - - &.authorized_use { - background: v.$authorized-use; - } - } - - .btn-action { - flex: 1; - width: 100%; - padding: 12px 20px; - border-radius: 12px; - font-weight: 600; - border: none; - cursor: pointer; - transition: all 0.3s ease; - font-size: 14px; - max-width: 300px; - - &:disabled { - opacity: 0.5; - } - } - - .btn-case { - background: linear-gradient(135deg, #6366f1, #8b5cf6); - color: white; - margin-bottom: 20px; - - &:hover { - transform: translateY(-2px); - } - } - - .btn-success { - background: linear-gradient(135deg, #10b981, #059669); - color: white; - max-width: 200px; - padding: 6px 10px; - - &:hover { - transform: translateY(-2px); - box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4); - } - } - - /* .btn-warning { - background: linear-gradient(135deg, #f59e0b, #d97706); - color: white; - } - - .btn-secondary { - background: linear-gradient(135deg, #64748b, #475569); - color: white; - - &:hover { - transform: translateY(-2px); - box-shadow: 0 8px 20px rgba(100, 116, 139, 0.4); - } - } */ - - .violation-info { - background: #fff; - border: 1px solid #f3f4f6; - border-radius: 20px; - box-shadow: 0 4px 20px #0000001a; - padding: 15px; - display: flex; - flex-direction: column; - height: 100%; - min-height: 500px; - - &-content { - display: flex; - flex-direction: column; - flex: 1; - min-height: 0; - } - - &-grid { - display: grid; - grid-template-columns: 3fr 1fr; - gap: 10px; - flex-grow: 1; - padding-bottom: 15px; - } - - &-title { - border-bottom: 1px solid v.$border-color-1; - justify-content: space-between; - align-items: center; - margin-bottom: 20px; - padding-bottom: 15px; - display: flex; - } - - &-image { - width: 300px; - height: 200px; - position: relative; - - img { - width: 100%; - height: 100%; - object-fit: contain; - } - } - - &-right-side { - display: flex; - flex-direction: column; - gap: 10px; - } - - &-source { - span { - color: #64748b; - margin-right: 5px; - } - - a { - color: #6366f1; - word-break: break-all; - } - } - - &-date-status { - display: flex; - gap: 10px; - - .source-status { - margin-bottom: 0; - } - } - - &-action { - margin-top: auto; - } - - &-actions { - border-left: 1px solid v.$border-color-1; - padding-left: 15px; - } - - &-header { - display: grid; - grid-template-columns: 300px auto; - gap: 10px; - flex-shrink: 0; - padding-bottom: 20px; - - border-bottom: 1px solid rgb(226, 232, 240); - } - - /* &-case-grid { - display: grid; - grid-template-rows: 1fr 1fr; - gap: 5px; - flex: 1; - min-height: 0; - overflow: auto; - } */ - - &-case { - padding: 10px; - position: relative; - - &:first-child { - border-bottom: 1px solid rgb(226, 232, 240); - padding-bottom: 10px; - } - } - - &-choice { - height: 100%; - display: flex; - justify-content: center; - flex-direction: column; - - h4 { - text-align: center; - } - - .violation-info-choice-buttons { - display: flex; - flex-direction: column; - align-items: center; - } - } - - &-tabs-wrapper { - position: relative; - - .violation-info-choice { - padding: 20px; - text-align: center; - } - - .violation-info-choice-buttons { - display: flex; - gap: 16px; - justify-content: center; - margin-top: 16px; - } - - .violation-info-choice-btn { - padding: 12px 24px; - border: 1px solid #ccc; - border-radius: 6px; - background: white; - cursor: pointer; - } - - .violation-info-tab { - padding: 8px 16px; - border: none; - background: transparent; - cursor: pointer; - } - - .violation-info-tab--active { - border-bottom: 2px solid blue; - color: blue; - } - } - } - - .violation-page-note { - margin-top: auto; - margin-bottom: 0; - } - - .note-form { - margin-top: 0; - border: none; - padding: 0; - } - - .note-textarea { - width: 100%; - min-height: 80px; - padding: 12px; - border: 1px solid v.$border-color-1; - border-radius: 8px; - font-size: 14px; - font-family: inherit; - resize: vertical; - box-sizing: border-box; - background: #f8fafc; - - &:focus { - outline: none; - border-color: #6366f1; - box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); - } - - &-wrapper { - display: flex; - flex-direction: column; - margin-bottom: 10px; - } - } - - .note-form-flex { - display: flex; - gap: 10px; - margin-bottom: 10px; - } - - .note-case-input { - border: 1px solid v.$border-color-1; - border-radius: 8px; - box-sizing: border-box; - background: #f8fafc; - padding: 5px; - - &::-webkit-outer-spin-button, - &::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; - } - - &:focus { - outline: none; - border-color: #6366f1; - box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); - } - - &::placeholder { - font-size: 12px; - } - } - - .note-case-label { - font-weight: 600; - } - - .note-form-group { - input { - display: block; - } - } -} - .popular-questions { background: linear-gradient(135deg, #6366f1, #8b5cf6); border-radius: 20px; diff --git a/src/app/styles/violation-details.scss b/src/app/styles/violation-details.scss new file mode 100644 index 0000000..d94f439 --- /dev/null +++ b/src/app/styles/violation-details.scss @@ -0,0 +1,806 @@ +@use './variable.scss' as v; + +.violation-details { + .page-title-color-frame { + display: flex; + gap: 10px; + + .violation-page-icon { + width: 80px; + height: 80px; + border-radius: 20px; + display: flex; + align-items: center; + justify-content: center; + font-size: 40px; + background: rgba(255, 255, 255, 0.2); + backdrop-filter: blur(10px); + border: 2px solid rgba(255, 255, 255, 0.3); + overflow: hidden; + + .icon { + width: 100%; + height: 100%; + } + } + + .violation-page-info { + display: flex; + gap: 10px; + } + } + + .card-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 20px; + padding-bottom: 15px; + border-bottom: 1px solid v.$border-color-1; + } + + .info-row { + display: flex; + justify-content: space-between; + padding: 12px 0; + border-bottom: 1px solid #f8fafc; + } + + .info-label { + color: #64748b; + font-size: 14px; + } + + .info-value { + color: #1e293b; + font-weight: 600; + font-size: 14px; + text-align: right; + } + + .violation-source { + margin-top: 15px; + + &-title { + font-size: 14px; + color: #64748b; + margin-bottom: 8px; + font-weight: 600; + } + + .url-display { + background: #f8fafc; + padding: 12px; + border-radius: 8px; + border: 1px solid v.$border-color-1; + margin-top: 10px; + word-break: break-all; + + .url-link { + color: #6366f1; + text-decoration: none; + font-weight: 600; + } + } + } + + .notes-section { + background: #f8fafc; + padding: 15px; + border-radius: 12px; + margin-top: 15px; + border: 1px solid v.$border-color-1; + text-align: left; + + .notes-title { + font-size: 14px; + font-weight: 600; + color: #1e293b; + margin-bottom: 10px; + text-align: left; + } + + .notes-content { + font-size: 13px; + color: #475569; + line-height: 1.6; + white-space: pre-line; + max-height: 200px; + overflow-y: auto; + text-align: left; + word-wrap: break-word; + margin: 0; + padding: 0; + } + } + + .stats-mini-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 15px; + margin-bottom: 20px; + + .stat-mini-card { + background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); + padding: 15px; + border-radius: 12px; + text-align: center; + border: 1px solid v.$border-color-1; + } + + .stat-mini-value { + font-size: 28px; + font-weight: 700; + color: #1e293b; + margin-bottom: 5px; + } + + .stat-mini-label { + font-size: 12px; + color: #64748b; + } + } + + .btn-small { + padding: 6px 12px; + border-radius: 8px; + font-size: 12px; + font-weight: 600; + border: none; + cursor: pointer; + transition: all 0.3s ease; + text-decoration: none; + display: inline-block; + + &:disabled { + opacity: 0.6; + } + } + + .btn-primary-small { + background: linear-gradient(135deg, #6366f1, #8b5cf6); + color: white; + + &:hover { + box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4); + } + } + + .btn-secondary-small { + background: #f1f5f9; + color: #64748b; + + &:hover { + background: v.$border-color-1; + } + } + + .sources-list-wrapper { + display: grid; + grid-template-columns: 1fr 3fr; + gap: 10px; + height: 80vh; + margin-bottom: 20px; + + .sources-list { + display: flex; + flex-direction: column; + gap: 15px; + + .source-card { + background: #fff; + border: 1px solid #f3f4f6; + border-radius: 20px; + box-shadow: 0 4px 20px #0000001a; + + + + transition: all 0.3s ease; + padding: 15px; + height: calc(16vh - 12px); + cursor: pointer; + justify-content: space-between; + opacity: 0.75; + display: flex; + gap: 10px; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); + border-color: #cbd5e1; + } + + &.selected { + opacity: 1; + border: 1px solid #6366f1; + background: linear-gradient(180deg, #ffffff 0%, #e6eaf3 100%); + } + } + + .source-header { + display: flex; + align-items: start; + justify-content: space-between; + margin-bottom: 10px; + gap: 5px; + + &-left { + display: flex; + flex-direction: column; + } + + &-right { + display: flex; + flex-direction: column; + align-items: end; + } + } + + .source-image { + max-height: 80%; + min-height: 50px; + height: 100%; + position: relative; + + img { + position: relative !important; + height: 100% !important; + border-radius: 8px; + width: auto !important; + } + } + + .source-url-block { + margin-top: auto; + } + + .source-url { + color: #6366f1; + font-weight: 600; + font-size: 14px; + text-decoration: none; + word-break: break-all; + flex: 1; + } + + .source-meta { + gap: 15px; + font-size: 12px; + color: #64748b; + margin-bottom: 10px; + flex-wrap: wrap; + margin-right: 5px; + } + + .source-actions { + display: flex; + gap: 10px; + flex-wrap: wrap; + margin-top: auto; + } + } + } + + .sources-list-pagination { + display: flex; + justify-content: space-between; + align-items: center; + } + + .source-status { + padding: 4px 10px; + border-radius: 6px; + font-size: 11px; + font-weight: 600; + white-space: nowrap; + margin-bottom: 5px; + user-select: none; + + &.new, + &.created { + background: v.$status-new; + } + + &.showed { + background-color: v.$b-color-1; + } + + &.legal_in_work, + &.complaint_in_work { + background: v.$status-in-work; + color: v.$white; + } + + &.authorized_use { + background: v.$authorized-use; + } + } + + .btn-action { + flex: 1; + width: 100%; + padding: 12px 20px; + border-radius: 12px; + font-weight: 600; + border: none; + cursor: pointer; + transition: all 0.3s ease; + font-size: 14px; + max-width: 300px; + + &:disabled { + opacity: 0.5; + } + } + + .btn-case { + background: linear-gradient(135deg, #6366f1, #8b5cf6); + color: white; + margin-bottom: 20px; + + &:hover { + transform: translateY(-2px); + } + } + + .btn-success { + background: linear-gradient(135deg, #10b981, #059669); + color: white; + max-width: 200px; + padding: 6px 10px; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4); + } + } + + + .violation-info { + background: #fff; + border: 1px solid #f3f4f6; + border-radius: 20px; + box-shadow: 0 4px 20px #0000001a; + padding: 15px; + display: flex; + flex-direction: column; + height: 100%; + min-height: 500px; + overflow: hidden; + + * { + min-height: 0; + } + + &-content { + display: flex; + flex-direction: column; + flex: 1; + min-height: 0; + height: 100%; + overflow: hidden; + } + + &-grid { + display: grid; + grid-template-columns: 3fr 1fr; + gap: 10px; + flex-grow: 1; + padding-bottom: 15px; + } + + &-title { + border-bottom: 1px solid v.$border-color-1; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; + padding-bottom: 15px; + display: flex; + } + + &-image-wrapper { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + position: relative; + } + + &-image { + width: 300px; + height: 200px; + position: relative; + background: #f5f5f5; + border-radius: 8px; + overflow: hidden; + + img { + width: 100%; + height: 100%; + object-fit: contain; + } + } + + &-image-buttons { + display: flex; + gap: 12px; + justify-content: center; + position: absolute; + bottom: 5px; + + .image-btn { + width: 36px; + height: 36px; + border-radius: 8px; + border: 1px solid #e2e8f0; + background: white; + cursor: pointer; + font-size: 18px; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s ease; + + &:hover { + background: #f1f5f9; + transform: scale(1.05); + } + + &:active { + transform: scale(0.95); + } + } + } + + &-right-side { + display: flex; + flex-direction: column; + gap: 10px; + } + + &-source { + span { + color: #64748b; + margin-right: 5px; + } + + a { + color: #6366f1; + word-break: break-all; + } + } + + &-date-status { + display: flex; + gap: 10px; + + .source-status { + margin-bottom: 0; + } + } + + &-action { + margin-top: auto; + } + + &-actions { + border-left: 1px solid v.$border-color-1; + padding-left: 15px; + } + + &-header { + display: grid; + grid-template-columns: 300px auto; + gap: 10px; + flex-shrink: 0; + padding-bottom: 20px; + + border-bottom: 1px solid rgb(226, 232, 240); + } + + &-case { + padding: 10px; + position: relative; + height: 100%; + display: flex; + flex-direction: column; + min-height: 0; + } + + &-choice { + height: 100%; + display: flex; + justify-content: center; + flex-direction: column; + gap: 10px; + + h4 { + text-align: center; + font-size: 26px; + } + + .violation-info-choice-buttons { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + + .btn { + min-width: 180px; + } + } + } + + &-tabs-wrapper { + position: relative; + height: 100%; + display: flex; + flex-direction: column; + min-height: 0; + + .violation-info-choice { + padding: 20px; + text-align: center; + } + + .violation-info-choice-buttons { + display: flex; + gap: 16px; + justify-content: center; + margin-top: 16px; + } + + .violation-info-choice-btn { + padding: 12px 24px; + border: 1px solid #ccc; + border-radius: 6px; + background: white; + cursor: pointer; + } + + .violation-info-tab { + padding: 8px 16px; + border: none; + background: transparent; + cursor: pointer; + } + + .violation-info-tabs { + display: flex; + gap: 20px; + padding: 10px; + flex-shrink: 0; + } + + .btn-primary { + background: v.$bg-hover; + color: v.$text-p; + border: 2px solid transparent; + + &.active { + background: linear-gradient(135deg, v.$p-color, v.$s-color); + color: v.$white; + border: 2px solid transparent; + } + } + } + + .samples-wrapper { + max-width: 400px; + display: flex; + flex-direction: column; + min-height: 0; + flex: 1; + + h5 { + font-size: 20px; + font-weight: 600; + margin-bottom: 5px; + border-bottom: 1px solid v.$border-color-1; + padding-left: 10px; + } + + .samples-list { + overflow: auto; + flex: 1; + min-height: 0; + height: 100%; + + &::-webkit-scrollbar-button { + display: none; + height: 0; + width: 0; + } + + &::-webkit-scrollbar { + width: 6px; + height: 6px; + } + + &::-webkit-scrollbar-track { + background: rgba(0, 0, 0, 0.05); + border-radius: 10px; + } + + &::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, 0.2); + border-radius: 10px; + + &:hover { + background: rgba(0, 0, 0, 0.3); + } + } + + scrollbar-width: thin; + scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.05); + + .sample-item { + margin-bottom: 5px; + border-bottom: 1px solid v.$border-color-1; + padding: 10px; + margin-bottom: 10px; + border-radius: 12px; + cursor: pointer; + + &:hover { + background: v.$bg-light; + } + + .sample-item-title { + font-size: 18px; + font-weight: 600; + } + + .sample-item-text { + color: v.$text-s; + } + } + } + } + + .complaint-details { + &-item { + margin-bottom: 10px; + } + + &-title { + color: v.$text-s; + font-size: 16px; + font-weight: 400; + } + + &-text { + color: v.$text-p; + font-weight: 600; + font-size: 18px; + } + } + } + + .violation-page-note { + margin-top: auto; + margin-bottom: 0; + } + + .note-form { + margin-top: 0; + border: none; + padding: 0; + + .button-actions { + display: flex; + justify-content: end; + gap: 10px; + } + } + + .note-textarea { + width: 100%; + min-height: 80px; + padding: 12px; + border: 1px solid v.$border-color-1; + border-radius: 8px; + font-size: 14px; + font-family: inherit; + resize: vertical; + box-sizing: border-box; + background: #f8fafc; + + &:focus { + outline: none; + border-color: #6366f1; + box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); + } + + &-wrapper { + display: flex; + flex-direction: column; + margin-bottom: 10px; + } + } + + .note-form-flex { + display: flex; + gap: 10px; + margin-bottom: 10px; + } + + .note-case-input { + border: 1px solid v.$border-color-1; + border-radius: 8px; + box-sizing: border-box; + background: #f8fafc; + padding: 5px; + + &::-webkit-outer-spin-button, + &::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; + } + + &:focus { + outline: none; + border-color: #6366f1; + box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); + } + + &::placeholder { + font-size: 12px; + } + } + + .note-case-label { + font-weight: 600; + } + + .note-form-group { + input { + display: block; + } + } +} + +.image-modal-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.9); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; + cursor: pointer; +} + +.image-modal-content { + position: relative; + max-width: 90vw; + max-height: 90vh; + cursor: default; + + img { + max-width: 100%; + max-height: 90vh; + object-fit: contain; + border-radius: 8px; + } +} + +.image-modal-close { + position: absolute; + top: -40px; + right: 0; + background: none; + border: none; + color: white; + font-size: 32px; + cursor: pointer; + padding: 8px; + line-height: 1; + + &:hover { + opacity: 0.8; + } +} \ No newline at end of file diff --git a/src/app/ui/file-page/violation-table/case-complaint.tsx b/src/app/ui/file-page/violation-table/case-complaint.tsx index 0958b3b..b1fccd6 100644 --- a/src/app/ui/file-page/violation-table/case-complaint.tsx +++ b/src/app/ui/file-page/violation-table/case-complaint.tsx @@ -7,6 +7,7 @@ import { createComplaint, fetchComplainInfo } from '@/app/actions/violationActio import { toast } from 'sonner'; import { useQuery, useQueryClient } from '@tanstack/react-query'; import { MatchStatus } from '@/app/actions/violationActions'; +import {formatDate, formatDateTime} from '@/app/lib/formatDate'; interface complaintInfo { id: number, @@ -26,8 +27,8 @@ export default function CaseComplaint({ selectedViolation, updateStatusHandler } const t = useTranslations('Global'); const queryClient = useQueryClient(); - const [showCreateCase, setShowCreateCase] = useState(false); const [localViolation, setLocalViolation] = useState(selectedViolation); + const [noteText, setNoteText] = useState(''); const [state, formAction, isPending] = useActionState(createComplaint, undefined); useEffect(() => { @@ -59,8 +60,6 @@ export default function CaseComplaint({ selectedViolation, updateStatusHandler } })); updateStatusHandler(selectedViolation.id, newStatus); - - setShowCreateCase(false); } else if (state && !state.success) { console.log(state.errorMessage); if (state.errorMessage?.server) { @@ -71,72 +70,170 @@ export default function CaseComplaint({ selectedViolation, updateStatusHandler } } }, [state, updateStatusHandler, selectedViolation.id]); - function toggleForm() { - setShowCreateCase(!showCreateCase); + function templateHandler(e: React.MouseEvent) { + const sampleItemText = e.currentTarget.querySelector('.sample-item-text'); + + if (sampleItemText) { + const text = sampleItemText.textContent || ''; + setNoteText(text); + } } if (!ENABLED_STATUSES.includes(localViolation.status)) { return (
- {!showCreateCase ? ( - - ) : ( -
- -
- - - -
+ {t('submit-violation')} + + + {state?.errorMessage?.textArea && ( +

- - {state?.errorMessage?.textArea && ( -

- - { - state?.errorMessage?.textArea.split('&').map((e, index) => { - return ( - - {t(e)} -
- - ) - }) - } -

- )} -
- + { + state?.errorMessage?.textArea.split('&').map((e, index) => { + return ( + + {t(e)} +
+ + ) + }) + } +

+ )}
-
- )} + + +
+
+
Шаблоны
+ +
    +
  • { + templateHandler(e) + }} + > +
    + title 1 +
    +
    + 1text text text text text text text text text text text text +
    +
    • +
  • { + templateHandler(e) + }} + > +
    + title 2 +
    +
    + 2text text text text text text text text text text text text +
    +
    • +
  • { + templateHandler(e) + }} + > +
    + title 3 +
    +
    + 3text text text text text text text text text text text text +
    +
    • + +
  • { + templateHandler(e) + }} + > +
    + title 3 +
    +
    + 3text text text text text text text text text text text text +
    +
    • + +
  • { + templateHandler(e) + }} + > +
    + title 3 +
    +
    + 3text text text text text text text text text text text text +
    +
    • +
+
); } else { @@ -162,17 +259,72 @@ export default function CaseComplaint({ selectedViolation, updateStatusHandler } {complainInfo.body.content.map((item: complaintInfo) => { return (
-

- {t('complaint-Information')} -

-

ID: {item.id}

-

{t('status')}: {item.status}

-

{t('text-of-the-complaint')}: {item.complaint_text}

-

{t('violation-id')}: {item.violation_id}

-

{t('email')}: {item.email}

-

{t('date-of-creation')}: {item.created_at}

-

{t('date-of-update')}: {item.updated_at}

+
+ ID: {item.id} +
+
+ + {t('status')}: + +
+ + {item.status} + +
+
+ + {t('date-of-creation')}: + +
+ + {item.created_at ? `${formatDate(item.created_at)}: ${formatDateTime(item.created_at)}` : '---'} + +
+
+ + {t('date-of-update')}: + +
+ + {item.updated_at ? `${formatDate(item.updated_at)}: ${formatDateTime(item.updated_at)}` : '---'} + +
+
+ + {t('text-of-the-complaint')}: + +
+ + {item.complaint_text} + +
); diff --git a/src/app/ui/file-page/violation-table/case-legal.tsx b/src/app/ui/file-page/violation-table/case-legal.tsx index fd92d73..f178f8d 100644 --- a/src/app/ui/file-page/violation-table/case-legal.tsx +++ b/src/app/ui/file-page/violation-table/case-legal.tsx @@ -32,7 +32,6 @@ type UpdateStatusHandler = (id: number, status: MatchStatus) => Promise export default function CaseViolation({ selectedViolation, updateStatusHandler }: { selectedViolation: ViolationFileDetail, updateStatusHandler: UpdateStatusHandler }) { const t = useTranslations('Global'); const queryClient = useQueryClient(); - const [showCreateCase, setShowCreateCase] = useState(false); const [localViolation, setLocalViolation] = useState(selectedViolation); const [state, formAction, isPending] = useActionState(createCase, undefined); @@ -61,8 +60,6 @@ export default function CaseViolation({ selectedViolation, updateStatusHandler } })); updateStatusHandler(selectedViolation.id, newStatus); - - setShowCreateCase(false); } else if (state && !state.success) { console.log(state.errorMessage); if (state.errorMessage?.server) { @@ -73,144 +70,121 @@ export default function CaseViolation({ selectedViolation, updateStatusHandler } } }, [state, updateStatusHandler, selectedViolation.id]); - function toggleForm() { - setShowCreateCase(!showCreateCase); - } - if (!ENABLED_STATUSES.includes(localViolation.status)) { return (
- {!showCreateCase ? ( - - ) : ( -
- - -
- - -
+
- -
{ + return ( + + {t(e)} +
+ + ) + }) + } +

+ )} +
+
+
-
- -
- + { + state?.errorMessage?.amount.split('&').map((e, index) => { + return ( + + {t(e)} +
+ + ) + }) + } +

+ )} +
-
- )} + +
+ + {state?.errorMessage?.textArea && ( +

+ { + state?.errorMessage?.textArea.split('&').map((e, index) => { + return ( + + {t(e)} +
+ + ) + }) + } +

+ )} +
+
+ +
+ +
); } else { @@ -237,22 +211,124 @@ export default function CaseViolation({ selectedViolation, updateStatusHandler } {caseInfo.body.content.map((item: CaseInfo) => { return (
-

- {t('complaint-Information')} -

-
-

ID: {item.id}

-

{t('name')}: {item.name}

-

{t('description')}: {item.description}

-

{t('amount')}: {item.amount}

-

{t('priority')}: {item.priority}

-

{t('type')}: {item.type}

-

{t('lawyer')}: {item.lawyer || t('not-assigned')}

-

{t('violation-id')}: {item.violationId}

-

{t('date-of-creation')}: {item.createdAt ? `${formatDate(item.createdAt)}: ${formatDateTime(item.createdAt)}` : '---'}

-

{t('date-of-update')}: {item.createdAt ? `${formatDate(item.createdAt)}: ${formatDateTime(item.createdAt)}` : '---'}

+{/*
+
ID: {item.id}
+
{t('name')}: +
+ {item.name} +
+
{t('description')}: {item.description}
+
{t('amount')}: {item.amount}
+
{t('priority')}: {item.priority}
+
{t('type')}: {item.type}
+
{t('lawyer')}: {item.lawyer || t('not-assigned')}
+
{t('violation-id')}: {item.violationId}
+
{t('date-of-creation')}: {item.createdAt ? `${formatDate(item.createdAt)}: ${formatDateTime(item.createdAt)}` : '---'}
+
{t('date-of-update')}: {item.createdAt ? `${formatDate(item.createdAt)}: ${formatDateTime(item.createdAt)}` : '---'}
{item.content &&

{t('content')}: {item.content}

} +
*/} + + +
+
+ ID: {item.id} +
+
+ + {t('status')}: + +
+ + {item.type} + +
+
+ + {t('date-of-creation')}: + +
+ + {item.createdAt ? `${formatDate(item.createdAt)}: ${formatDateTime(item.createdAt)}` : '---'} + +
+
+ + {t('date-of-update')}: + +
+ + {item.updatedAt ? `${formatDate(item.updatedAt)}: ${formatDateTime(item.updatedAt)}` : '---'} + +
+
+ + {t('description')}: + +
+ + {item.description} + +
+ +
+ + {t('amount-of-damage')}: + +
+ + {item.amount} + +
+
+ + {t('lawyer')}: + +
+ + {item.lawyer} + +
+ +
); })} diff --git a/src/app/ui/file-page/violation-table/file-page-violation-info-tabs.tsx b/src/app/ui/file-page/violation-table/file-page-violation-info-tabs.tsx index b4e7062..8e07983 100644 --- a/src/app/ui/file-page/violation-table/file-page-violation-info-tabs.tsx +++ b/src/app/ui/file-page/violation-table/file-page-violation-info-tabs.tsx @@ -31,7 +31,7 @@ export default function FilePageViolationInfoTabs({ selectedViolation, updateSta

Вы можете

+ {alt} +
+
+ ); + }; + + return (
+ {isModalOpen && createPortal( + setIsModalOpen(false)} + />, + document.body + )}
@@ -87,20 +120,47 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV
-
- {selectedViolation?.page_title} { - const target = e.target as HTMLImageElement; - target.src = '/images/no-image.png'; - }} - /> +
+
+ {selectedViolation?.page_title} { + const target = e.target as HTMLImageElement; + target.src = '/images/no-image.png'; + }} + /> +
+
+ + +
- {selectedViolation?.page_url} + {selectedViolation?.page_url ? cleanUrlForDisplay(selectedViolation?.page_url) : selectedViolation?.page_url}