From bd36b3c9d170351f788912a5a74aa0c3298a75ee Mon Sep 17 00:00:00 2001 From: priyanshuvish Date: Thu, 23 Apr 2026 19:53:27 +0530 Subject: [PATCH] add dummy assign profiler and added course and programme --- src/index.css | 3973 +---------------- src/layouts/components/HRSidebar.tsx | 4 + src/pages/Courses/CoursesPage.tsx | 93 + src/pages/DiscussionsPage/DiscussionsPage.tsx | 4 +- src/pages/Learners/LearnersPage.tsx | 218 +- src/pages/Programmes/ProgrammesPage.tsx | 133 + src/redux/services/learnersApi.ts | 95 + src/routes/index.tsx | 10 + 8 files changed, 539 insertions(+), 3991 deletions(-) create mode 100644 src/pages/Courses/CoursesPage.tsx create mode 100644 src/pages/Programmes/ProgrammesPage.tsx diff --git a/src/index.css b/src/index.css index fe41d73..a1d4786 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3971 +1,2 @@ -@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"); -/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */ -@layer properties { - @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { - *, :before, :after, ::backdrop { - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-translate-z: 0; - --tw-rotate-x: rotateX(0); - --tw-rotate-y: rotateY(0); - --tw-rotate-z: rotateZ(0); - --tw-skew-x: skewX(0); - --tw-skew-y: skewY(0); - --tw-space-y-reverse: 0; - --tw-space-x-reverse: 0; - --tw-border-style: solid; - --tw-leading: initial; - --tw-font-weight: initial; - --tw-tracking: initial; - --tw-shadow: 0 0 #0000; - --tw-shadow-color: initial; - --tw-shadow-alpha: 100%; - --tw-inset-shadow: 0 0 #0000; - --tw-inset-shadow-color: initial; - --tw-inset-shadow-alpha: 100%; - --tw-ring-color: initial; - --tw-ring-shadow: 0 0 #0000; - --tw-inset-ring-color: initial; - --tw-inset-ring-shadow: 0 0 #0000; - --tw-ring-inset: initial; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-offset-shadow: 0 0 #0000; - --tw-outline-style: solid; - --tw-blur: initial; - --tw-brightness: initial; - --tw-contrast: initial; - --tw-grayscale: initial; - --tw-hue-rotate: initial; - --tw-invert: initial; - --tw-opacity: initial; - --tw-saturate: initial; - --tw-sepia: initial; - --tw-drop-shadow: initial; - --tw-drop-shadow-color: initial; - --tw-drop-shadow-alpha: 100%; - --tw-drop-shadow-size: initial; - --tw-backdrop-blur: initial; - --tw-backdrop-brightness: initial; - --tw-backdrop-contrast: initial; - --tw-backdrop-grayscale: initial; - --tw-backdrop-hue-rotate: initial; - --tw-backdrop-invert: initial; - --tw-backdrop-opacity: initial; - --tw-backdrop-saturate: initial; - --tw-backdrop-sepia: initial; - --tw-duration: initial; - --tw-ease: initial; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-scale-z: 1; - } - } -} - -@layer theme { - :root, :host { - --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - --color-blue-50: oklch(.97 .014 254.604); - --color-blue-100: oklch(.932 .032 255.585); - --color-blue-200: oklch(.882 .059 254.128); - --color-blue-800: oklch(.424 .199 265.638); - --color-blue-900: oklch(.379 .146 265.522); - --color-black: #000; - --color-white: #fff; - --spacing: .25rem; - --container-sm: 24rem; - --container-md: 28rem; - --container-lg: 32rem; - --container-7xl: 80rem; - --text-xs: .75rem; - --text-xs--line-height: calc(1 / .75); - --text-sm: .875rem; - --text-sm--line-height: calc(1.25 / .875); - --text-base: 1rem; - --text-base--line-height: calc(1.5 / 1); - --text-lg: 1.125rem; - --text-lg--line-height: calc(1.75 / 1.125); - --text-xl: 1.25rem; - --text-xl--line-height: calc(1.75 / 1.25); - --text-2xl: 1.5rem; - --text-2xl--line-height: calc(2 / 1.5); - --font-weight-normal: 400; - --font-weight-medium: 500; - --font-weight-semibold: 600; - --font-weight-bold: 700; - --tracking-tight: -.025em; - --tracking-widest: .1em; - --leading-relaxed: 1.625; - --radius-xs: .125rem; - --ease-in-out: cubic-bezier(.4, 0, .2, 1); - --animate-spin: spin 1s linear infinite; - --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; - --blur-sm: 8px; - --default-transition-duration: .15s; - --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); - --default-font-family: var(--font-sans); - --default-font-feature-settings: var(--font-sans--font-feature-settings); - --default-font-variation-settings: var(--font-sans--font-variation-settings); - --default-mono-font-family: var(--font-mono); - --default-mono-font-feature-settings: var(--font-mono--font-feature-settings); - --default-mono-font-variation-settings: var(--font-mono--font-variation-settings); - --color-muted-foreground: var(--muted-foreground); - --color-border: var(--border); - --color-brand-primary: var(--brand-primary); - } -} - -@layer base { - *, :after, :before, ::backdrop { - box-sizing: border-box; - border: 0 solid; - margin: 0; - padding: 0; - } - - ::file-selector-button { - box-sizing: border-box; - border: 0 solid; - margin: 0; - padding: 0; - } - - html, :host { - -webkit-text-size-adjust: 100%; - tab-size: 4; - line-height: 1.5; - font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); - font-feature-settings: var(--default-font-feature-settings, normal); - font-variation-settings: var(--default-font-variation-settings, normal); - -webkit-tap-highlight-color: transparent; - } - - body { - line-height: inherit; - } - - hr { - height: 0; - color: inherit; - border-top-width: 1px; - } - - abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; - } - - h1, h2, h3, h4, h5, h6 { - font-size: inherit; - font-weight: inherit; - } - - a { - color: inherit; - -webkit-text-decoration: inherit; - -webkit-text-decoration: inherit; - text-decoration: inherit; - } - - b, strong { - font-weight: bolder; - } - - code, kbd, samp, pre { - font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); - font-feature-settings: var(--default-mono-font-feature-settings, normal); - font-variation-settings: var(--default-mono-font-variation-settings, normal); - font-size: 1em; - } - - small { - font-size: 80%; - } - - sub, sup { - vertical-align: baseline; - font-size: 75%; - line-height: 0; - position: relative; - } - - sub { - bottom: -.25em; - } - - sup { - top: -.5em; - } - - table { - text-indent: 0; - border-color: inherit; - border-collapse: collapse; - } - - :-moz-focusring { - outline: auto; - } - - progress { - vertical-align: baseline; - } - - summary { - display: list-item; - } - - ol, ul, menu { - list-style: none; - } - - img, svg, video, canvas, audio, iframe, embed, object { - vertical-align: middle; - display: block; - } - - img, video { - max-width: 100%; - height: auto; - } - - button, input, select, optgroup, textarea { - font: inherit; - font-feature-settings: inherit; - font-variation-settings: inherit; - letter-spacing: inherit; - color: inherit; - opacity: 1; - background-color: #0000; - border-radius: 0; - } - - ::file-selector-button { - font: inherit; - font-feature-settings: inherit; - font-variation-settings: inherit; - letter-spacing: inherit; - color: inherit; - opacity: 1; - background-color: #0000; - border-radius: 0; - } - - :where(select:is([multiple], [size])) optgroup { - font-weight: bolder; - } - - :where(select:is([multiple], [size])) optgroup option { - padding-inline-start: 20px; - } - - ::file-selector-button { - margin-inline-end: 4px; - } - - ::placeholder { - opacity: 1; - color: currentColor; - } - - @supports (color: color-mix(in lab, red, red)) { - ::placeholder { - color: color-mix(in oklab, currentColor 50%, transparent); - } - } - - textarea { - resize: vertical; - } - - ::-webkit-search-decoration { - -webkit-appearance: none; - } - - ::-webkit-date-and-time-value { - min-height: 1lh; - text-align: inherit; - } - - ::-webkit-datetime-edit { - display: inline-flex; - } - - ::-webkit-datetime-edit-fields-wrapper { - padding: 0; - } - - ::-webkit-datetime-edit { - padding-block: 0; - } - - ::-webkit-datetime-edit-year-field { - padding-block: 0; - } - - ::-webkit-datetime-edit-month-field { - padding-block: 0; - } - - ::-webkit-datetime-edit-day-field { - padding-block: 0; - } - - ::-webkit-datetime-edit-hour-field { - padding-block: 0; - } - - ::-webkit-datetime-edit-minute-field { - padding-block: 0; - } - - ::-webkit-datetime-edit-second-field { - padding-block: 0; - } - - ::-webkit-datetime-edit-millisecond-field { - padding-block: 0; - } - - ::-webkit-datetime-edit-meridiem-field { - padding-block: 0; - } - - :-moz-ui-invalid { - box-shadow: none; - } - - button, input:where([type="button"], [type="reset"], [type="submit"]) { - appearance: button; - } - - ::file-selector-button { - appearance: button; - } - - ::-webkit-inner-spin-button { - height: auto; - } - - ::-webkit-outer-spin-button { - height: auto; - } - - [hidden]:where(:not([hidden="until-found"])) { - display: none !important; - } - - * { - border-color: var(--border); - outline-color: var(--ring); - } - - @supports (color: color-mix(in lab, red, red)) { - * { - outline-color: color-mix(in oklab, var(--ring) 50%, transparent); - } - } - - body { - background-color: var(--background); - color: var(--foreground); - } - - * { - border-color: var(--border); - outline-color: var(--ring); - } - - @supports (color: color-mix(in lab, red, red)) { - * { - outline-color: color-mix(in oklab, var(--ring) 50%, transparent); - } - } - - html { - font-size: var(--font-size); - scroll-behavior: smooth; - } - - body { - background-color: var(--background); - color: var(--foreground); - font-family: Inter, system-ui, -apple-system, sans-serif; - overflow-x: hidden; - } - - :focus { - outline: 2px solid var(--ring); - outline-offset: 2px; - } - - button:focus, input:focus, textarea:focus, select:focus, a:focus { - outline: 2px solid var(--primary); - outline-offset: 2px; - border-radius: 4px; - } - - .sr-only { - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; - width: 1px; - height: 1px; - margin: -1px; - padding: 0; - position: absolute; - overflow: hidden; - } - - .sr-only:focus { - width: auto; - height: auto; - padding: inherit; - margin: inherit; - clip: auto; - white-space: normal; - position: static; - overflow: visible; - } - - :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h1 { - font-size: var(--text-32); - font-weight: var(--font-weight-bold); - letter-spacing: -.025em; - line-height: 1.2; - } - - :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h2 { - font-size: var(--text-28); - font-weight: var(--font-weight-semibold); - letter-spacing: -.025em; - line-height: 1.3; - } - - :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h3 { - font-size: var(--text-24); - font-weight: var(--font-weight-semibold); - line-height: 1.4; - } - - :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h4 { - font-size: var(--text-20); - font-weight: var(--font-weight-medium); - line-height: 1.5; - } - - :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h5 { - font-size: var(--text-18); - font-weight: var(--font-weight-medium); - line-height: 1.5; - } - - :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h6 { - font-size: var(--text-16); - font-weight: var(--font-weight-medium); - line-height: 1.5; - } - - :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) p { - font-size: var(--text-16); - font-weight: var(--font-weight-normal); - line-height: 1.6; - } - - :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) label, :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) button { - font-size: var(--text-16); - font-weight: var(--font-weight-medium); - line-height: 1.5; - } - - :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) input, :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) textarea, :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) select { - font-size: var(--text-16); - font-weight: var(--font-weight-normal); - line-height: 1.5; - } - - :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) small, :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) .text-sm { - font-size: var(--text-14); - line-height: 1.4; - } - - :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) .text-xs { - font-size: var(--text-14); - line-height: 1.3; - } - - ::-webkit-scrollbar { - width: 6px; - height: 6px; - } - - ::-webkit-scrollbar-track { - background: none; - } - - ::-webkit-scrollbar-thumb { - background: var(--muted-foreground); - opacity: .3; - border-radius: 3px; - transition: opacity .2s; - } - - ::-webkit-scrollbar-thumb:hover { - opacity: .5; - } - - ::-webkit-scrollbar-thumb:active { - opacity: .7; - } - - * { - scrollbar-width: thin; - scrollbar-color: var(--muted-foreground) transparent; - } -} - -@layer utilities { - .\@container\/card-header { - container: card-header / inline-size; - } - - .pointer-events-none { - pointer-events: none; - } - - .sr-only { - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border-width: 0; - width: 1px; - height: 1px; - margin: -1px; - padding: 0; - position: absolute; - overflow: hidden; - } - - .absolute { - position: absolute; - } - - .fixed { - position: fixed; - } - - .relative { - position: relative; - } - - .sticky { - position: sticky; - } - - .inset-0 { - inset: calc(var(--spacing) * 0); - } - - .inset-x-0 { - inset-inline: calc(var(--spacing) * 0); - } - - .inset-y-0 { - inset-block: calc(var(--spacing) * 0); - } - - .-top-1 { - top: calc(var(--spacing) * -1); - } - - .top-0 { - top: calc(var(--spacing) * 0); - } - - .top-1\/2 { - top: 50%; - } - - .top-4 { - top: calc(var(--spacing) * 4); - } - - .top-\[50\%\] { - top: 50%; - } - - .-right-1 { - right: calc(var(--spacing) * -1); - } - - .right-0 { - right: calc(var(--spacing) * 0); - } - - .right-2 { - right: calc(var(--spacing) * 2); - } - - .right-4 { - right: calc(var(--spacing) * 4); - } - - .right-6 { - right: calc(var(--spacing) * 6); - } - - .bottom-0 { - bottom: calc(var(--spacing) * 0); - } - - .bottom-6 { - bottom: calc(var(--spacing) * 6); - } - - .left-0 { - left: calc(var(--spacing) * 0); - } - - .left-2 { - left: calc(var(--spacing) * 2); - } - - .left-3 { - left: calc(var(--spacing) * 3); - } - - .left-\[50\%\] { - left: 50%; - } - - .z-10 { - z-index: 10; - } - - .z-20 { - z-index: 20; - } - - .z-40 { - z-index: 40; - } - - .z-50 { - z-index: 50; - } - - .col-start-2 { - grid-column-start: 2; - } - - .row-span-2 { - grid-row: span 2 / span 2; - } - - .row-start-1 { - grid-row-start: 1; - } - - .-mx-1 { - margin-inline: calc(var(--spacing) * -1); - } - - .mx-auto { - margin-inline: auto; - } - - .my-1 { - margin-block: calc(var(--spacing) * 1); - } - - .mt-0\.5 { - margin-top: calc(var(--spacing) * .5); - } - - .mt-1 { - margin-top: calc(var(--spacing) * 1); - } - - .mt-2 { - margin-top: calc(var(--spacing) * 2); - } - - .mt-3 { - margin-top: calc(var(--spacing) * 3); - } - - .mt-4 { - margin-top: calc(var(--spacing) * 4); - } - - .mt-6 { - margin-top: calc(var(--spacing) * 6); - } - - .mt-auto { - margin-top: auto; - } - - .mr-1 { - margin-right: calc(var(--spacing) * 1); - } - - .mr-2 { - margin-right: calc(var(--spacing) * 2); - } - - .mr-3 { - margin-right: calc(var(--spacing) * 3); - } - - .mb-1 { - margin-bottom: calc(var(--spacing) * 1); - } - - .mb-2 { - margin-bottom: calc(var(--spacing) * 2); - } - - .mb-3 { - margin-bottom: calc(var(--spacing) * 3); - } - - .mb-4 { - margin-bottom: calc(var(--spacing) * 4); - } - - .mb-6 { - margin-bottom: calc(var(--spacing) * 6); - } - - .ml-1 { - margin-left: calc(var(--spacing) * 1); - } - - .ml-2 { - margin-left: calc(var(--spacing) * 2); - } - - .ml-10 { - margin-left: calc(var(--spacing) * 10); - } - - .ml-auto { - margin-left: auto; - } - - .line-clamp-1 { - -webkit-line-clamp: 1; - -webkit-box-orient: vertical; - display: -webkit-box; - overflow: hidden; - } - - .line-clamp-2 { - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - display: -webkit-box; - overflow: hidden; - } - - .block { - display: block; - } - - .flex { - display: flex; - } - - .grid { - display: grid; - } - - .hidden { - display: none; - } - - .inline-flex { - display: inline-flex; - } - - .table { - display: table; - } - - .table-caption { - display: table-caption; - } - - .table-cell { - display: table-cell; - } - - .table-row { - display: table-row; - } - - .field-sizing-content { - field-sizing: content; - } - - .size-2 { - width: calc(var(--spacing) * 2); - height: calc(var(--spacing) * 2); - } - - .size-3\.5 { - width: calc(var(--spacing) * 3.5); - height: calc(var(--spacing) * 3.5); - } - - .size-4 { - width: calc(var(--spacing) * 4); - height: calc(var(--spacing) * 4); - } - - .size-9 { - width: calc(var(--spacing) * 9); - height: calc(var(--spacing) * 9); - } - - .h-2 { - height: calc(var(--spacing) * 2); - } - - .h-3 { - height: calc(var(--spacing) * 3); - } - - .h-4 { - height: calc(var(--spacing) * 4); - } - - .h-5 { - height: calc(var(--spacing) * 5); - } - - .h-6 { - height: calc(var(--spacing) * 6); - } - - .h-8 { - height: calc(var(--spacing) * 8); - } - - .h-9 { - height: calc(var(--spacing) * 9); - } - - .h-10 { - height: calc(var(--spacing) * 10); - } - - .h-12 { - height: calc(var(--spacing) * 12); - } - - .h-16 { - height: calc(var(--spacing) * 16); - } - - .h-24 { - height: calc(var(--spacing) * 24); - } - - .h-32 { - height: calc(var(--spacing) * 32); - } - - .h-64 { - height: calc(var(--spacing) * 64); - } - - .h-96 { - height: calc(var(--spacing) * 96); - } - - .h-\[calc\(100\%-1px\)\] { - height: calc(100% - 1px); - } - - .h-\[var\(--radix-select-trigger-height\)\] { - height: var(--radix-select-trigger-height); - } - - .h-auto { - height: auto; - } - - .h-full { - height: 100%; - } - - .h-px { - height: 1px; - } - - .max-h-\(--radix-dropdown-menu-content-available-height\) { - max-height: var(--radix-dropdown-menu-content-available-height); - } - - .max-h-\(--radix-select-content-available-height\) { - max-height: var(--radix-select-content-available-height); - } - - .min-h-4 { - min-height: calc(var(--spacing) * 4); - } - - .min-h-16 { - min-height: calc(var(--spacing) * 16); - } - - .min-h-\[44px\] { - min-height: 44px; - } - - .min-h-\[48px\] { - min-height: 48px; - } - - .min-h-\[60vh\] { - min-height: 60vh; - } - - .min-h-\[100px\] { - min-height: 100px; - } - - .min-h-\[120px\] { - min-height: 120px; - } - - .min-h-\[calc\(100vh-4rem\)\] { - min-height: calc(100vh - 4rem); - } - - .min-h-screen { - min-height: 100vh; - } - - .w-2 { - width: calc(var(--spacing) * 2); - } - - .w-3 { - width: calc(var(--spacing) * 3); - } - - .w-3\/4 { - width: 75%; - } - - .w-4 { - width: calc(var(--spacing) * 4); - } - - .w-5 { - width: calc(var(--spacing) * 5); - } - - .w-6 { - width: calc(var(--spacing) * 6); - } - - .w-8 { - width: calc(var(--spacing) * 8); - } - - .w-10 { - width: calc(var(--spacing) * 10); - } - - .w-12 { - width: calc(var(--spacing) * 12); - } - - .w-16 { - width: calc(var(--spacing) * 16); - } - - .w-24 { - width: calc(var(--spacing) * 24); - } - - .w-32 { - width: calc(var(--spacing) * 32); - } - - .w-48 { - width: calc(var(--spacing) * 48); - } - - .w-56 { - width: calc(var(--spacing) * 56); - } - - .w-64 { - width: calc(var(--spacing) * 64); - } - - .w-80 { - width: calc(var(--spacing) * 80); - } - - .w-96 { - width: calc(var(--spacing) * 96); - } - - .w-\[50px\] { - width: 50px; - } - - .w-\[80px\] { - width: 80px; - } - - .w-\[100px\] { - width: 100px; - } - - .w-\[120px\] { - width: 120px; - } - - .w-\[140px\] { - width: 140px; - } - - .w-\[150px\] { - width: 150px; - } - - .w-\[160px\] { - width: 160px; - } - - .w-\[180px\] { - width: 180px; - } - - .w-\[200px\] { - width: 200px; - } - - .w-\[220px\] { - width: 220px; - } - - .w-\[250px\] { - width: 250px; - } - - .w-\[280px\] { - width: 280px; - } - - .w-\[300px\] { - width: 300px; - } - - .w-\[480px\] { - width: 480px; - } - - .w-\[500px\] { - width: 500px; - } - - .w-\[600px\] { - width: 600px; - } - - .w-auto { - width: auto; - } - - .w-fit { - width: fit-content; - } - - .w-full { - width: 100%; - } - - .max-w-7xl { - max-width: var(--container-7xl); - } - - .max-w-\[calc\(100\%-2rem\)\] { - max-width: calc(100% - 2rem); - } - - .max-w-md { - max-width: var(--container-md); - } - - .max-w-none { - max-width: none; - } - - .max-w-sm { - max-width: var(--container-sm); - } - - .min-w-0 { - min-width: calc(var(--spacing) * 0); - } - - .min-w-\[8rem\] { - min-width: 8rem; - } - - .min-w-\[120px\] { - min-width: 120px; - } - - .min-w-\[200px\] { - min-width: 200px; - } - - .min-w-\[248px\] { - min-width: 248px; - } - - .min-w-\[var\(--radix-select-trigger-width\)\] { - min-width: var(--radix-select-trigger-width); - } - - .flex-1 { - flex: 1; - } - - .cs-height{ - height: calc(100vh - 56px); - } - - .flex-shrink-0, .shrink-0 { - flex-shrink: 0; - } - - .caption-bottom { - caption-side: bottom; - } - - .origin-\(--radix-dropdown-menu-content-transform-origin\) { - transform-origin: var(--radix-dropdown-menu-content-transform-origin); - } - - .origin-\(--radix-select-content-transform-origin\) { - transform-origin: var(--radix-select-content-transform-origin); - } - - .translate-x-\[-50\%\] { - --tw-translate-x: -50%; - translate: var(--tw-translate-x) var(--tw-translate-y); - } - - .-translate-y-1\/2 { - --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); - translate: var(--tw-translate-x) var(--tw-translate-y); - } - - .translate-y-0\.5 { - --tw-translate-y: calc(var(--spacing) * .5); - translate: var(--tw-translate-x) var(--tw-translate-y); - } - - .translate-y-\[-50\%\] { - --tw-translate-y: -50%; - translate: var(--tw-translate-x) var(--tw-translate-y); - } - - .transform { - transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); - } - - .animate-pulse { - animation: var(--animate-pulse); - } - - .animate-spin { - animation: var(--animate-spin); - } - - .cursor-default { - cursor: default; - } - - .cursor-not-allowed { - cursor: not-allowed; - } - - .cursor-pointer { - cursor: pointer; - } - - .resize-none { - resize: none; - } - - .scroll-my-1 { - scroll-margin-block: calc(var(--spacing) * 1); - } - - .auto-rows-min { - grid-auto-rows: min-content; - } - - .grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); - } - - .grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - - .grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - - .grid-cols-5 { - grid-template-columns: repeat(5, minmax(0, 1fr)); - } - - .grid-cols-6 { - grid-template-columns: repeat(6, minmax(0, 1fr)); - } - - .grid-cols-7 { - grid-template-columns: repeat(7, minmax(0, 1fr)); - } - - .grid-cols-\[0_1fr\] { - grid-template-columns: 0 1fr; - } - - .grid-rows-\[auto_auto\] { - grid-template-rows: auto auto; - } - - .flex-col { - flex-direction: column; - } - - .flex-col-reverse { - flex-direction: column-reverse; - } - - .flex-row { - flex-direction: row; - } - - .flex-wrap { - flex-wrap: wrap; - } - - .items-baseline { - align-items: baseline; - } - - .items-center { - align-items: center; - } - - .items-end { - align-items: flex-end; - } - - .items-start { - align-items: flex-start; - } - - .justify-between { - justify-content: space-between; - } - - .justify-center { - justify-content: center; - } - - .justify-start { - justify-content: flex-start; - } - - .justify-items-start { - justify-items: start; - } - - .gap-1 { - gap: calc(var(--spacing) * 1); - } - - .gap-1\.5 { - gap: calc(var(--spacing) * 1.5); - } - - .gap-2 { - gap: calc(var(--spacing) * 2); - } - - .gap-3 { - gap: calc(var(--spacing) * 3); - } - - .gap-4 { - gap: calc(var(--spacing) * 4); - } - - .gap-6 { - gap: calc(var(--spacing) * 6); - } - - :where(.space-y-1 > :not(:last-child)) { - --tw-space-y-reverse: 0; - margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse)); - margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse))); - } - - :where(.space-y-2 > :not(:last-child)) { - --tw-space-y-reverse: 0; - margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); - margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))); - } - - :where(.space-y-3 > :not(:last-child)) { - --tw-space-y-reverse: 0; - margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse)); - margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse))); - } - - :where(.space-y-4 > :not(:last-child)) { - --tw-space-y-reverse: 0; - margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); - margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); - } - - :where(.space-y-6 > :not(:last-child)) { - --tw-space-y-reverse: 0; - margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse)); - margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))); - } - - :where(.space-x-3 > :not(:last-child)) { - --tw-space-x-reverse: 0; - margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse)); - margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse))); - } - - .gap-y-0\.5 { - row-gap: calc(var(--spacing) * .5); - } - - .self-start { - align-self: flex-start; - } - - .justify-self-end { - justify-self: flex-end; - } - - .truncate { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - } - - .overflow-auto { - overflow: auto; - } - - .overflow-hidden { - overflow: hidden; - } - - .overflow-x-auto { - overflow-x: auto; - } - - .overflow-x-hidden { - overflow-x: hidden; - } - - .overflow-y-auto { - overflow-y: auto; - } - - .rounded { - border-radius: .25rem; - } - - .rounded-\[4px\] { - border-radius: 4px; - } - - .rounded-full { - border-radius: 3.40282e38px; - } - - .rounded-lg { - border-radius: var(--radius-12); - } - - .rounded-md { - border-radius: var(--radius-8); - } - - .rounded-sm { - border-radius: var(--radius-4); - } - - .rounded-xl { - border-radius: calc(var(--radius-12) + 4px); - } - - .rounded-xs { - border-radius: var(--radius-xs); - } - - .border { - border-style: var(--tw-border-style); - border-width: 1px; - } - - .border-0 { - border-style: var(--tw-border-style); - border-width: 0; - } - - .border-2 { - border-style: var(--tw-border-style); - border-width: 2px; - } - - .border-t { - border-top-style: var(--tw-border-style); - border-top-width: 1px; - } - - .border-r { - border-right-style: var(--tw-border-style); - border-right-width: 1px; - } - - .border-b { - border-bottom-style: var(--tw-border-style); - border-bottom-width: 1px; - } - - .border-l { - border-left-style: var(--tw-border-style); - border-left-width: 1px; - } - - .border-l-4 { - border-left-style: var(--tw-border-style); - border-left-width: 4px; - } - - .border-dashed { - --tw-border-style: dashed; - border-style: dashed; - } - - .border-blue-200 { - border-color: var(--color-blue-200); - } - - .border-border { - border-color: var(--border); - } - - .border-brand-primary { - border-color: var(--brand-primary); - } - - .border-brand-primary\/20 { - border-color: var(--brand-primary); - } - - @supports (color: color-mix(in lab, red, red)) { - .border-brand-primary\/20 { - border-color: color-mix(in oklab, var(--brand-primary) 20%, transparent); - } - } - - .border-chrome-divider { - border-color: var(--chrome-divider); - } - - .border-input { - border-color: var(--input); - } - - .border-muted { - border-color: var(--muted); - } - - .border-status-error { - border-color: var(--status-error); - } - - .border-status-error\/20 { - border-color: var(--status-error); - } - - @supports (color: color-mix(in lab, red, red)) { - .border-status-error\/20 { - border-color: color-mix(in oklab, var(--status-error) 20%, transparent); - } - } - - .border-status-success { - border-color: var(--status-success); - } - - .border-status-success\/20 { - border-color: var(--status-success); - } - - @supports (color: color-mix(in lab, red, red)) { - .border-status-success\/20 { - border-color: color-mix(in oklab, var(--status-success) 20%, transparent); - } - } - - .border-status-warn\/20 { - border-color: var(--status-warn); - } - - @supports (color: color-mix(in lab, red, red)) { - .border-status-warn\/20 { - border-color: color-mix(in oklab, var(--status-warn) 20%, transparent); - } - } - - .border-transparent { - border-color: #0000; - } - - .border-l-brand-primary { - border-left-color: var(--brand-primary); - } - - .bg-accent { - background-color: var(--accent); - } - - .bg-background { - background-color: var(--background); - } - - .bg-background\/80 { - background-color: var(--background); - } - - @supports (color: color-mix(in lab, red, red)) { - .bg-background\/80 { - background-color: color-mix(in oklab, var(--background) 80%, transparent); - } - } - - .bg-black\/50 { - background-color: #00000080; - } - - @supports (color: color-mix(in lab, red, red)) { - .bg-black\/50 { - background-color: color-mix(in oklab, var(--color-black) 50%, transparent); - } - } - - .bg-blue-50 { - background-color: var(--color-blue-50); - } - - .bg-blue-100 { - background-color: var(--color-blue-100); - } - - .bg-border { - background-color: var(--border); - } - - .bg-brand-charcoal { - background-color: var(--brand-charcoal); - } - - .bg-brand-navy { - background-color: var(--brand-navy); - } - - .bg-brand-primary { - background-color: var(--brand-primary); - } - - .bg-brand-primary\/5 { - background-color: var(--brand-primary); - } - - @supports (color: color-mix(in lab, red, red)) { - .bg-brand-primary\/5 { - background-color: color-mix(in oklab, var(--brand-primary) 5%, transparent); - } - } - - .bg-card { - background-color: var(--card); - } - - .bg-chart-1 { - background-color: var(--chart-1); - } - - .bg-chart-2 { - background-color: var(--chart-2); - } - - .bg-chart-3 { - background-color: var(--chart-3); - } - - .bg-chart-4 { - background-color: var(--chart-4); - } - - .bg-destructive { - background-color: var(--destructive); - } - - .bg-input-background { - background-color: var(--input-background); - } - - .bg-muted { - background-color: var(--muted); - } - - .bg-muted-foreground { - background-color: var(--muted-foreground); - } - - .bg-muted\/20 { - background-color: var(--muted); - } - - @supports (color: color-mix(in lab, red, red)) { - .bg-muted\/20 { - background-color: color-mix(in oklab, var(--muted) 20%, transparent); - } - } - - .bg-muted\/30 { - background-color: var(--muted); - } - - @supports (color: color-mix(in lab, red, red)) { - .bg-muted\/30 { - background-color: color-mix(in oklab, var(--muted) 30%, transparent); - } - } - - .bg-muted\/50 { - background-color: var(--muted); - } - - @supports (color: color-mix(in lab, red, red)) { - .bg-muted\/50 { - background-color: color-mix(in oklab, var(--muted) 50%, transparent); - } - } - - .bg-popover { - background-color: var(--popover); - } - - .bg-primary { - background-color: var(--primary); - } - - .bg-primary\/20 { - background-color: var(--primary); - } - - @supports (color: color-mix(in lab, red, red)) { - .bg-primary\/20 { - background-color: color-mix(in oklab, var(--primary) 20%, transparent); - } - } - - .bg-secondary { - background-color: var(--secondary); - } - - .bg-sidebar { - background-color: var(--sidebar); - } - - .bg-sidebar-primary { - background-color: var(--sidebar-primary); - } - - .bg-status-error { - background-color: var(--status-error); - } - - .bg-status-error\/10 { - background-color: var(--status-error); - } - - @supports (color: color-mix(in lab, red, red)) { - .bg-status-error\/10 { - background-color: color-mix(in oklab, var(--status-error) 10%, transparent); - } - } - - .bg-status-success { - background-color: var(--status-success); - } - - .bg-status-success\/10 { - background-color: var(--status-success); - } - - @supports (color: color-mix(in lab, red, red)) { - .bg-status-success\/10 { - background-color: color-mix(in oklab, var(--status-success) 10%, transparent); - } - } - - .bg-status-warn { - background-color: var(--status-warn); - } - - .bg-status-warn\/10 { - background-color: var(--status-warn); - } - - @supports (color: color-mix(in lab, red, red)) { - .bg-status-warn\/10 { - background-color: color-mix(in oklab, var(--status-warn) 10%, transparent); - } - } - - .fill-current { - fill: currentColor; - } - - .p-0 { - padding: calc(var(--spacing) * 0); - } - - .p-1 { - padding: calc(var(--spacing) * 1); - } - - .p-2 { - padding: calc(var(--spacing) * 2); - } - - .p-3 { - padding: calc(var(--spacing) * 3); - } - - .p-4 { - padding: calc(var(--spacing) * 4); - } - - .p-6 { - padding: calc(var(--spacing) * 6); - } - - .p-8 { - padding: calc(var(--spacing) * 8); - } - - .p-\[3px\] { - padding: 3px; - } - - .px-1 { - padding-inline: calc(var(--spacing) * 1); - } - - .px-2 { - padding-inline: calc(var(--spacing) * 2); - } - - .px-2\.5 { - padding-inline: calc(var(--spacing) * 2.5); - } - - .px-3 { - padding-inline: calc(var(--spacing) * 3); - } - - .px-4 { - padding-inline: calc(var(--spacing) * 4); - } - - .px-6 { - padding-inline: calc(var(--spacing) * 6); - } - - .py-0 { - padding-block: calc(var(--spacing) * 0); - } - - .py-0\.5 { - padding-block: calc(var(--spacing) * .5); - } - - .py-1 { - padding-block: calc(var(--spacing) * 1); - } - - .py-1\.5 { - padding-block: calc(var(--spacing) * 1.5); - } - - .py-2 { - padding-block: calc(var(--spacing) * 2); - } - - .py-3 { - padding-block: calc(var(--spacing) * 3); - } - - .py-4 { - padding-block: calc(var(--spacing) * 4); - } - - .py-6 { - padding-block: calc(var(--spacing) * 6); - } - - .py-8 { - padding-block: calc(var(--spacing) * 8); - } - - .py-12 { - padding-block: calc(var(--spacing) * 12); - } - - .pt-0 { - padding-top: calc(var(--spacing) * 0); - } - - .pt-2 { - padding-top: calc(var(--spacing) * 2); - } - - .pt-4 { - padding-top: calc(var(--spacing) * 4); - } - - .pt-6 { - padding-top: calc(var(--spacing) * 6); - } - - .pr-2 { - padding-right: calc(var(--spacing) * 2); - } - - .pr-8 { - padding-right: calc(var(--spacing) * 8); - } - - .pb-2 { - padding-bottom: calc(var(--spacing) * 2); - } - - .pb-4 { - padding-bottom: calc(var(--spacing) * 4); - } - - .pb-6 { - padding-bottom: calc(var(--spacing) * 6); - } - - .pl-2 { - padding-left: calc(var(--spacing) * 2); - } - - .pl-4 { - padding-left: calc(var(--spacing) * 4); - } - - .pl-8 { - padding-left: calc(var(--spacing) * 8); - } - - .pl-10 { - padding-left: calc(var(--spacing) * 10); - } - - .text-center { - text-align: center; - } - - .text-left { - text-align: left; - } - - .text-right { - text-align: right; - } - - .align-middle { - vertical-align: middle; - } - - .text-2xl { - font-size: var(--text-2xl); - line-height: var(--tw-leading, var(--text-2xl--line-height)); - } - - .text-base { - font-size: var(--text-base); - line-height: var(--tw-leading, var(--text-base--line-height)); - } - - .text-lg { - font-size: var(--text-lg); - line-height: var(--tw-leading, var(--text-lg--line-height)); - } - - .text-sm { - font-size: var(--text-sm); - line-height: var(--tw-leading, var(--text-sm--line-height)); - } - - .text-xl { - font-size: var(--text-xl); - line-height: var(--tw-leading, var(--text-xl--line-height)); - } - - .text-xs { - font-size: var(--text-xs); - line-height: var(--tw-leading, var(--text-xs--line-height)); - } - - .leading-none { - --tw-leading: 1; - line-height: 1; - } - - .font-bold { - --tw-font-weight: var(--font-weight-bold); - font-weight: var(--font-weight-bold); - } - - .font-medium { - --tw-font-weight: var(--font-weight-medium); - font-weight: var(--font-weight-medium); - } - - .font-normal { - --tw-font-weight: var(--font-weight-normal); - font-weight: var(--font-weight-normal); - } - - .font-semibold { - --tw-font-weight: var(--font-weight-semibold); - font-weight: var(--font-weight-semibold); - } - - .tracking-tight { - --tw-tracking: var(--tracking-tight); - letter-spacing: var(--tracking-tight); - } - - .tracking-widest { - --tw-tracking: var(--tracking-widest); - letter-spacing: var(--tracking-widest); - } - - .break-words { - overflow-wrap: break-word; - } - - .whitespace-nowrap { - white-space: nowrap; - } - - .text-black { - color: var(--color-black); - } - - .text-blue-800 { - color: var(--color-blue-800); - } - - .text-blue-900 { - color: var(--color-blue-900); - } - - .text-brand-charcoal-foreground { - color: var(--brand-charcoal-foreground); - } - - .text-brand-navy { - color: var(--brand-navy); - } - - .text-brand-navy-foreground { - color: var(--brand-navy-foreground); - } - - .text-brand-primary { - color: var(--brand-primary); - } - - .text-card-foreground { - color: var(--card-foreground); - } - - .text-current { - color: currentColor; - } - - .text-destructive { - color: var(--destructive); - } - - .text-foreground { - color: var(--foreground); - } - - .text-muted-foreground { - color: var(--muted-foreground); - } - - .text-popover-foreground { - color: var(--popover-foreground); - } - - .text-primary { - color: var(--primary); - } - - .text-primary-foreground { - color: var(--primary-foreground); - } - - .text-secondary-foreground { - color: var(--secondary-foreground); - } - - .text-sidebar-foreground { - color: var(--sidebar-foreground); - } - - .text-sidebar-primary-foreground { - color: var(--sidebar-primary-foreground); - } - - .text-status-error { - color: var(--status-error); - } - - .text-status-error-foreground { - color: var(--status-error-foreground); - } - - .text-status-success { - color: var(--status-success); - } - - .text-status-success-foreground { - color: var(--status-success-foreground); - } - - .text-status-warn { - color: var(--status-warn); - } - - .text-status-warn-foreground { - color: var(--status-warn-foreground); - } - - .text-white { - color: var(--color-white); - } - - .capitalize { - text-transform: capitalize; - } - - .underline { - text-decoration-line: underline; - } - - .underline-offset-4 { - text-underline-offset: 4px; - } - - .opacity-50 { - opacity: .5; - } - - .opacity-70 { - opacity: .7; - } - - .opacity-80 { - opacity: .8; - } - - .shadow-lg { - --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - - .shadow-md { - --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - - .shadow-sm { - --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - - .shadow-xs { - --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - - .ring-offset-background { - --tw-ring-offset-color: var(--background); - } - - .outline-hidden { - --tw-outline-style: none; - outline-style: none; - } - - @media (forced-colors: active) { - .outline-hidden { - outline-offset: 2px; - outline: 2px solid #0000; - } - } - - .outline { - outline-style: var(--tw-outline-style); - outline-width: 1px; - } - - .filter { - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); - } - - .backdrop-blur-sm { - --tw-backdrop-blur: blur(var(--blur-sm)); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - } - - .transition { - transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); - transition-duration: var(--tw-duration, var(--default-transition-duration)); - } - - .transition-\[color\,box-shadow\] { - transition-property: color, box-shadow; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); - transition-duration: var(--tw-duration, var(--default-transition-duration)); - } - - .transition-all { - transition-property: all; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); - transition-duration: var(--tw-duration, var(--default-transition-duration)); - } - - .transition-colors { - transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); - transition-duration: var(--tw-duration, var(--default-transition-duration)); - } - - .transition-opacity { - transition-property: opacity; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); - transition-duration: var(--tw-duration, var(--default-transition-duration)); - } - - .transition-shadow { - transition-property: box-shadow; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); - transition-duration: var(--tw-duration, var(--default-transition-duration)); - } - - .transition-transform { - transition-property: transform, translate, scale, rotate; - transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); - transition-duration: var(--tw-duration, var(--default-transition-duration)); - } - - .transition-none { - transition-property: none; - } - - .duration-200 { - --tw-duration: .2s; - transition-duration: .2s; - } - - .duration-300 { - --tw-duration: .3s; - transition-duration: .3s; - } - - .ease-in-out { - --tw-ease: var(--ease-in-out); - transition-timing-function: var(--ease-in-out); - } - - .outline-none { - --tw-outline-style: none; - outline-style: none; - } - - .select-none { - -webkit-user-select: none; - user-select: none; - } - - .selection\:bg-primary ::selection, .selection\:bg-primary::selection { - background-color: var(--primary); - } - - .selection\:text-primary-foreground ::selection, .selection\:text-primary-foreground::selection { - color: var(--primary-foreground); - } - - .file\:inline-flex::file-selector-button { - display: inline-flex; - } - - .file\:h-7::file-selector-button { - height: calc(var(--spacing) * 7); - } - - .file\:border-0::file-selector-button { - border-style: var(--tw-border-style); - border-width: 0; - } - - .file\:bg-transparent::file-selector-button { - background-color: #0000; - } - - .file\:text-sm::file-selector-button { - font-size: var(--text-sm); - line-height: var(--tw-leading, var(--text-sm--line-height)); - } - - .file\:font-medium::file-selector-button { - --tw-font-weight: var(--font-weight-medium); - font-weight: var(--font-weight-medium); - } - - .file\:text-foreground::file-selector-button { - color: var(--foreground); - } - - .placeholder\:text-muted-foreground::placeholder { - color: var(--muted-foreground); - } - - .last\:border-b-0:last-child { - border-bottom-style: var(--tw-border-style); - border-bottom-width: 0; - } - - @media (hover: hover) { - .hover\:scale-105:hover { - --tw-scale-x: 105%; - --tw-scale-y: 105%; - --tw-scale-z: 105%; - scale: var(--tw-scale-x) var(--tw-scale-y); - } - } - - @media (hover: hover) { - .hover\:scale-110:hover { - --tw-scale-x: 110%; - --tw-scale-y: 110%; - --tw-scale-z: 110%; - scale: var(--tw-scale-x) var(--tw-scale-y); - } - } - - @media (hover: hover) { - .hover\:bg-accent:hover { - background-color: var(--accent); - } - } - - @media (hover: hover) { - .hover\:bg-blue-100:hover { - background-color: var(--color-blue-100); - } - } - - @media (hover: hover) { - .hover\:bg-brand-navy\/90:hover { - background-color: var(--brand-navy); - } - - @supports (color: color-mix(in lab, red, red)) { - .hover\:bg-brand-navy\/90:hover { - background-color: color-mix(in oklab, var(--brand-navy) 90%, transparent); - } - } - } - - @media (hover: hover) { - .hover\:bg-destructive\/90:hover { - background-color: var(--destructive); - } - - @supports (color: color-mix(in lab, red, red)) { - .hover\:bg-destructive\/90:hover { - background-color: color-mix(in oklab, var(--destructive) 90%, transparent); - } - } - } - - @media (hover: hover) { - .hover\:bg-muted:hover { - background-color: var(--muted); - } - } - - @media (hover: hover) { - .hover\:bg-muted\/30:hover { - background-color: var(--muted); - } - - @supports (color: color-mix(in lab, red, red)) { - .hover\:bg-muted\/30:hover { - background-color: color-mix(in oklab, var(--muted) 30%, transparent); - } - } - } - - @media (hover: hover) { - .hover\:bg-muted\/50:hover { - background-color: var(--muted); - } - - @supports (color: color-mix(in lab, red, red)) { - .hover\:bg-muted\/50:hover { - background-color: color-mix(in oklab, var(--muted) 50%, transparent); - } - } - } - - @media (hover: hover) { - .hover\:bg-primary\/90:hover { - background-color: var(--primary); - } - - @supports (color: color-mix(in lab, red, red)) { - .hover\:bg-primary\/90:hover { - background-color: color-mix(in oklab, var(--primary) 90%, transparent); - } - } - } - - @media (hover: hover) { - .hover\:bg-secondary\/80:hover { - background-color: var(--secondary); - } - - @supports (color: color-mix(in lab, red, red)) { - .hover\:bg-secondary\/80:hover { - background-color: color-mix(in oklab, var(--secondary) 80%, transparent); - } - } - } - - @media (hover: hover) { - .hover\:bg-sidebar-accent:hover { - background-color: var(--sidebar-accent); - } - } - - @media (hover: hover) { - .hover\:text-accent-foreground:hover { - color: var(--accent-foreground); - } - } - - @media (hover: hover) { - .hover\:text-foreground:hover { - color: var(--foreground); - } - } - - @media (hover: hover) { - .hover\:text-sidebar-accent-foreground:hover { - color: var(--sidebar-accent-foreground); - } - } - - @media (hover: hover) { - .hover\:no-underline:hover { - text-decoration-line: none; - } - } - - @media (hover: hover) { - .hover\:underline:hover { - text-decoration-line: underline; - } - } - - @media (hover: hover) { - .hover\:opacity-100:hover { - opacity: 1; - } - } - - @media (hover: hover) { - .hover\:shadow-md:hover { - --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - } - - @media (hover: hover) { - .hover\:shadow-sm:hover { - --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - } - - .focus\:not-sr-only:focus { - clip: auto; - white-space: normal; - width: auto; - height: auto; - margin: 0; - padding: 0; - position: static; - overflow: visible; - } - - .focus\:absolute:focus { - position: absolute; - } - - .focus\:top-4:focus { - top: calc(var(--spacing) * 4); - } - - .focus\:left-4:focus { - left: calc(var(--spacing) * 4); - } - - .focus\:bg-accent:focus { - background-color: var(--accent); - } - - .focus\:bg-muted\/50:focus { - background-color: var(--muted); - } - - @supports (color: color-mix(in lab, red, red)) { - .focus\:bg-muted\/50:focus { - background-color: color-mix(in oklab, var(--muted) 50%, transparent); - } - } - - .focus\:bg-status-error\/10:focus { - background-color: var(--status-error); - } - - @supports (color: color-mix(in lab, red, red)) { - .focus\:bg-status-error\/10:focus { - background-color: color-mix(in oklab, var(--status-error) 10%, transparent); - } - } - - .focus\:text-accent-foreground:focus { - color: var(--accent-foreground); - } - - .focus\:text-status-error:focus { - color: var(--status-error); - } - - .focus\:ring-2:focus { - --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - - .focus\:ring-ring:focus { - --tw-ring-color: var(--ring); - } - - .focus\:ring-sidebar-ring:focus { - --tw-ring-color: var(--sidebar-ring); - } - - .focus\:ring-offset-2:focus { - --tw-ring-offset-width: 2px; - --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - } - - .focus\:ring-offset-sidebar:focus { - --tw-ring-offset-color: var(--sidebar); - } - - .focus\:outline-hidden:focus { - --tw-outline-style: none; - outline-style: none; - } - - @media (forced-colors: active) { - .focus\:outline-hidden:focus { - outline-offset: 2px; - outline: 2px solid #0000; - } - } - - .focus\:outline-none:focus { - --tw-outline-style: none; - outline-style: none; - } - - .focus-visible\:border-ring:focus-visible { - border-color: var(--ring); - } - - .focus-visible\:ring-\[3px\]:focus-visible { - --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - - .focus-visible\:ring-destructive\/20:focus-visible { - --tw-ring-color: var(--destructive); - } - - @supports (color: color-mix(in lab, red, red)) { - .focus-visible\:ring-destructive\/20:focus-visible { - --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent); - } - } - - .focus-visible\:ring-ring\/50:focus-visible { - --tw-ring-color: var(--ring); - } - - @supports (color: color-mix(in lab, red, red)) { - .focus-visible\:ring-ring\/50:focus-visible { - --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); - } - } - - .focus-visible\:outline-1:focus-visible { - outline-style: var(--tw-outline-style); - outline-width: 1px; - } - - .focus-visible\:outline-ring:focus-visible { - outline-color: var(--ring); - } - - .disabled\:pointer-events-none:disabled { - pointer-events: none; - } - - .disabled\:cursor-not-allowed:disabled { - cursor: not-allowed; - } - - .disabled\:opacity-50:disabled { - opacity: .5; - } - - .has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has([data-slot="card-action"]) { - grid-template-columns: 1fr auto; - } - - .has-\[\>svg\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\]:has( > svg) { - grid-template-columns: calc(var(--spacing) * 4) 1fr; - } - - .has-\[\>svg\]\:gap-x-3:has( > svg) { - column-gap: calc(var(--spacing) * 3); - } - - .has-\[\>svg\]\:px-2\.5:has( > svg) { - padding-inline: calc(var(--spacing) * 2.5); - } - - .has-\[\>svg\]\:px-3:has( > svg) { - padding-inline: calc(var(--spacing) * 3); - } - - .has-\[\>svg\]\:px-4:has( > svg) { - padding-inline: calc(var(--spacing) * 4); - } - - .aria-invalid\:border-destructive[aria-invalid="true"] { - border-color: var(--destructive); - } - - .aria-invalid\:ring-destructive\/20[aria-invalid="true"] { - --tw-ring-color: var(--destructive); - } - - @supports (color: color-mix(in lab, red, red)) { - .aria-invalid\:ring-destructive\/20[aria-invalid="true"] { - --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent); - } - } - - .data-\[disabled\]\:pointer-events-none[data-disabled] { - pointer-events: none; - } - - .data-\[disabled\]\:opacity-50[data-disabled] { - opacity: .5; - } - - .data-\[inset\]\:pl-8[data-inset] { - padding-left: calc(var(--spacing) * 8); - } - - .data-\[placeholder\]\:text-muted-foreground[data-placeholder] { - color: var(--muted-foreground); - } - - .data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] { - --tw-translate-y: calc(var(--spacing) * 1); - translate: var(--tw-translate-x) var(--tw-translate-y); - } - - .data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] { - --tw-enter-translate-y: calc(2 * var(--spacing) * -1); - } - - .data-\[side\=left\]\:-translate-x-1[data-side="left"] { - --tw-translate-x: calc(var(--spacing) * -1); - translate: var(--tw-translate-x) var(--tw-translate-y); - } - - .data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] { - --tw-enter-translate-x: calc(2 * var(--spacing)); - } - - .data-\[side\=right\]\:translate-x-1[data-side="right"] { - --tw-translate-x: calc(var(--spacing) * 1); - translate: var(--tw-translate-x) var(--tw-translate-y); - } - - .data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] { - --tw-enter-translate-x: calc(2 * var(--spacing) * -1); - } - - .data-\[side\=top\]\:-translate-y-1[data-side="top"] { - --tw-translate-y: calc(var(--spacing) * -1); - translate: var(--tw-translate-x) var(--tw-translate-y); - } - - .data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] { - --tw-enter-translate-y: calc(2 * var(--spacing)); - } - - .data-\[size\=default\]\:h-9[data-size="default"] { - height: calc(var(--spacing) * 9); - } - - .data-\[size\=sm\]\:h-8[data-size="sm"] { - height: calc(var(--spacing) * 8); - } - - :is(.\*\:data-\[slot\=alert-description\]\:text-destructive\/90 > *)[data-slot="alert-description"] { - color: var(--destructive); - } - - @supports (color: color-mix(in lab, red, red)) { - :is(.\*\:data-\[slot\=alert-description\]\:text-destructive\/90 > *)[data-slot="alert-description"] { - color: color-mix(in oklab, var(--destructive) 90%, transparent); - } - } - - :is(.\*\:data-\[slot\=select-value\]\:line-clamp-1 > *)[data-slot="select-value"] { - -webkit-line-clamp: 1; - -webkit-box-orient: vertical; - display: -webkit-box; - overflow: hidden; - } - - :is(.\*\:data-\[slot\=select-value\]\:flex > *)[data-slot="select-value"] { - display: flex; - } - - :is(.\*\:data-\[slot\=select-value\]\:items-center > *)[data-slot="select-value"] { - align-items: center; - } - - :is(.\*\:data-\[slot\=select-value\]\:gap-2 > *)[data-slot="select-value"] { - gap: calc(var(--spacing) * 2); - } - - .data-\[state\=active\]\:bg-card[data-state="active"] { - background-color: var(--card); - } - - .data-\[state\=checked\]\:border-primary[data-state="checked"] { - border-color: var(--primary); - } - - .data-\[state\=checked\]\:bg-primary[data-state="checked"] { - background-color: var(--primary); - } - - .data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] { - color: var(--primary-foreground); - } - - .data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] { - animation: accordion-up var(--tw-duration, .2s) ease-out; - } - - .data-\[state\=closed\]\:animate-out[data-state="closed"] { - animation: exit var(--tw-duration, .15s) var(--tw-ease, ease); - } - - .data-\[state\=closed\]\:duration-300[data-state="closed"] { - --tw-duration: .3s; - transition-duration: .3s; - } - - .data-\[state\=closed\]\:fade-out-0[data-state="closed"] { - --tw-exit-opacity: 0; - } - - .data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] { - --tw-exit-translate-y: 100%; - } - - .data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] { - --tw-exit-translate-x: -100%; - } - - .data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] { - --tw-exit-translate-x: 100%; - } - - .data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] { - --tw-exit-translate-y: -100%; - } - - .data-\[state\=closed\]\:zoom-out-95[data-state="closed"] { - --tw-exit-scale: .95; - } - - .data-\[state\=open\]\:animate-accordion-down[data-state="open"] { - animation: accordion-down var(--tw-duration, .2s) ease-out; - } - - .data-\[state\=open\]\:animate-in[data-state="open"] { - animation: enter var(--tw-duration, .15s) var(--tw-ease, ease); - } - - .data-\[state\=open\]\:bg-accent[data-state="open"] { - background-color: var(--accent); - } - - .data-\[state\=open\]\:bg-secondary[data-state="open"] { - background-color: var(--secondary); - } - - .data-\[state\=open\]\:text-accent-foreground[data-state="open"] { - color: var(--accent-foreground); - } - - .data-\[state\=open\]\:text-muted-foreground[data-state="open"] { - color: var(--muted-foreground); - } - - .data-\[state\=open\]\:duration-500[data-state="open"] { - --tw-duration: .5s; - transition-duration: .5s; - } - - .data-\[state\=open\]\:fade-in-0[data-state="open"] { - --tw-enter-opacity: 0; - } - - .data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] { - --tw-enter-translate-y: 100%; - } - - .data-\[state\=open\]\:slide-in-from-left[data-state="open"] { - --tw-enter-translate-x: -100%; - } - - .data-\[state\=open\]\:slide-in-from-right[data-state="open"] { - --tw-enter-translate-x: 100%; - } - - .data-\[state\=open\]\:slide-in-from-top[data-state="open"] { - --tw-enter-translate-y: -100%; - } - - .data-\[state\=open\]\:zoom-in-95[data-state="open"] { - --tw-enter-scale: .95; - } - - .data-\[state\=selected\]\:bg-muted[data-state="selected"] { - background-color: var(--muted); - } - - .data-\[variant\=destructive\]\:text-destructive[data-variant="destructive"] { - color: var(--destructive); - } - - .data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant="destructive"]:focus { - background-color: var(--destructive); - } - - @supports (color: color-mix(in lab, red, red)) { - .data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant="destructive"]:focus { - background-color: color-mix(in oklab, var(--destructive) 10%, transparent); - } - } - - .data-\[variant\=destructive\]\:focus\:text-destructive[data-variant="destructive"]:focus { - color: var(--destructive); - } - - @media (width >= 40rem) { - .sm\:block { - display: block; - } - } - - @media (width >= 40rem) { - .sm\:hidden { - display: none; - } - } - - @media (width >= 40rem) { - .sm\:inline { - display: inline; - } - } - - @media (width >= 40rem) { - .sm\:w-\[540px\] { - width: 540px; - } - } - - @media (width >= 40rem) { - .sm\:w-\[600px\] { - width: 600px; - } - } - - @media (width >= 40rem) { - .sm\:w-\[700px\] { - width: 700px; - } - } - - @media (width >= 40rem) { - .sm\:max-w-\[425px\] { - max-width: 425px; - } - } - - @media (width >= 40rem) { - .sm\:max-w-\[500px\] { - max-width: 500px; - } - } - - @media (width >= 40rem) { - .sm\:max-w-\[600px\] { - max-width: 600px; - } - } - - @media (width >= 40rem) { - .sm\:max-w-lg { - max-width: var(--container-lg); - } - } - - @media (width >= 40rem) { - .sm\:max-w-sm { - max-width: var(--container-sm); - } - } - - @media (width >= 40rem) { - .sm\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - } - - @media (width >= 40rem) { - .sm\:grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - } - - @media (width >= 40rem) { - .sm\:flex-row { - flex-direction: row; - } - } - - @media (width >= 40rem) { - .sm\:items-center { - align-items: center; - } - } - - @media (width >= 40rem) { - .sm\:justify-between { - justify-content: space-between; - } - } - - @media (width >= 40rem) { - .sm\:justify-end { - justify-content: flex-end; - } - } - - @media (width >= 40rem) { - .sm\:gap-2\.5 { - gap: calc(var(--spacing) * 2.5); - } - } - - @media (width >= 40rem) { - .sm\:pr-2\.5 { - padding-right: calc(var(--spacing) * 2.5); - } - } - - @media (width >= 40rem) { - .sm\:pl-2\.5 { - padding-left: calc(var(--spacing) * 2.5); - } - } - - @media (width >= 40rem) { - .sm\:text-left { - text-align: left; - } - } - - @media (width >= 48rem) { - .md\:w-auto { - width: auto; - } - } - - @media (width >= 48rem) { - .md\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - } - - @media (width >= 48rem) { - .md\:grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - } - - @media (width >= 48rem) { - .md\:text-sm { - font-size: var(--text-sm); - line-height: var(--tw-leading, var(--text-sm--line-height)); - } - } - - @media (width >= 64rem) { - .lg\:mr-80 { - margin-right: calc(var(--spacing) * 80); - } - } - - @media (width >= 64rem) { - .lg\:flex { - display: flex; - } - } - - @media (width >= 64rem) { - .lg\:hidden { - display: none; - } - } - - @media (width >= 64rem) { - .lg\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - } - - @media (width >= 64rem) { - .lg\:grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - } - - @media (width >= 64rem) { - .lg\:grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - } - - @media (width >= 64rem) { - .lg\:flex-row { - flex-direction: row; - } - } - - @media (width >= 64rem) { - .lg\:items-center { - align-items: center; - } - } - - @media (width >= 64rem) { - .lg\:justify-between { - justify-content: space-between; - } - } - - @media (width >= 64rem) { - .lg\:gap-6 { - gap: calc(var(--spacing) * 6); - } - } - - @media (width >= 64rem) { - .lg\:p-8 { - padding: calc(var(--spacing) * 8); - } - } - - @media (width >= 64rem) { - .lg\:px-6 { - padding-inline: calc(var(--spacing) * 6); - } - } - - .dark\:border-input:is(.dark *) { - border-color: var(--input); - } - - .dark\:bg-destructive\/60:is(.dark *) { - background-color: var(--destructive); - } - - @supports (color: color-mix(in lab, red, red)) { - .dark\:bg-destructive\/60:is(.dark *) { - background-color: color-mix(in oklab, var(--destructive) 60%, transparent); - } - } - - .dark\:bg-input\/30:is(.dark *) { - background-color: var(--input); - } - - @supports (color: color-mix(in lab, red, red)) { - .dark\:bg-input\/30:is(.dark *) { - background-color: color-mix(in oklab, var(--input) 30%, transparent); - } - } - - .dark\:text-muted-foreground:is(.dark *) { - color: var(--muted-foreground); - } - - @media (hover: hover) { - .dark\:hover\:bg-accent\/50:is(.dark *):hover { - background-color: var(--accent); - } - - @supports (color: color-mix(in lab, red, red)) { - .dark\:hover\:bg-accent\/50:is(.dark *):hover { - background-color: color-mix(in oklab, var(--accent) 50%, transparent); - } - } - } - - @media (hover: hover) { - .dark\:hover\:bg-input\/50:is(.dark *):hover { - background-color: var(--input); - } - - @supports (color: color-mix(in lab, red, red)) { - .dark\:hover\:bg-input\/50:is(.dark *):hover { - background-color: color-mix(in oklab, var(--input) 50%, transparent); - } - } - } - - .dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible { - --tw-ring-color: var(--destructive); - } - - @supports (color: color-mix(in lab, red, red)) { - .dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible { - --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent); - } - } - - .dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid="true"] { - --tw-ring-color: var(--destructive); - } - - @supports (color: color-mix(in lab, red, red)) { - .dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid="true"] { - --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent); - } - } - - .dark\:data-\[state\=active\]\:border-input:is(.dark *)[data-state="active"] { - border-color: var(--input); - } - - .dark\:data-\[state\=active\]\:bg-input\/30:is(.dark *)[data-state="active"] { - background-color: var(--input); - } - - @supports (color: color-mix(in lab, red, red)) { - .dark\:data-\[state\=active\]\:bg-input\/30:is(.dark *)[data-state="active"] { - background-color: color-mix(in oklab, var(--input) 30%, transparent); - } - } - - .dark\:data-\[state\=active\]\:text-foreground:is(.dark *)[data-state="active"] { - color: var(--foreground); - } - - .dark\:data-\[state\=checked\]\:bg-primary:is(.dark *)[data-state="checked"] { - background-color: var(--primary); - } - - .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:is(.dark *)[data-variant="destructive"]:focus { - background-color: var(--destructive); - } - - @supports (color: color-mix(in lab, red, red)) { - .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:is(.dark *)[data-variant="destructive"]:focus { - background-color: color-mix(in oklab, var(--destructive) 20%, transparent); - } - } - - .\[\&_p\]\:leading-relaxed p { - --tw-leading: var(--leading-relaxed); - line-height: var(--leading-relaxed); - } - - .\[\&_svg\]\:pointer-events-none svg { - pointer-events: none; - } - - .\[\&_svg\]\:shrink-0 svg { - flex-shrink: 0; - } - - .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*="size-"]) { - width: calc(var(--spacing) * 4); - height: calc(var(--spacing) * 4); - } - - .\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*="text-"]) { - color: var(--muted-foreground); - } - - .\[\&_tr\]\:border-b tr { - border-bottom-style: var(--tw-border-style); - border-bottom-width: 1px; - } - - .\[\&_tr\:last-child\]\:border-0 tr:last-child { - border-style: var(--tw-border-style); - border-width: 0; - } - - .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role="checkbox"]) { - padding-right: calc(var(--spacing) * 0); - } - - .\[\.border-b\]\:pb-6.border-b { - padding-bottom: calc(var(--spacing) * 6); - } - - .\[\.border-t\]\:pt-6.border-t { - padding-top: calc(var(--spacing) * 6); - } - - :is(.\*\:\[span\]\:last\:flex > *):is(span):last-child { - display: flex; - } - - :is(.\*\:\[span\]\:last\:items-center > *):is(span):last-child { - align-items: center; - } - - :is(.\*\:\[span\]\:last\:gap-2 > *):is(span):last-child { - gap: calc(var(--spacing) * 2); - } - - :is(.data-\[variant\=destructive\]\:\*\:\[svg\]\:\!text-destructive[data-variant="destructive"] > *):is(svg) { - color: var(--destructive) !important; - } - - .\[\&\:last-child\]\:pb-6:last-child { - padding-bottom: calc(var(--spacing) * 6); - } - - .\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\] > [role="checkbox"] { - --tw-translate-y: 2px; - translate: var(--tw-translate-x) var(--tw-translate-y); - } - - .\[\&\>svg\]\:pointer-events-none > svg { - pointer-events: none; - } - - .\[\&\>svg\]\:size-3 > svg { - width: calc(var(--spacing) * 3); - height: calc(var(--spacing) * 3); - } - - .\[\&\>svg\]\:size-3\.5 > svg { - width: calc(var(--spacing) * 3.5); - height: calc(var(--spacing) * 3.5); - } - - .\[\&\>svg\]\:size-4 > svg { - width: calc(var(--spacing) * 4); - height: calc(var(--spacing) * 4); - } - - .\[\&\>svg\]\:translate-y-0\.5 > svg { - --tw-translate-y: calc(var(--spacing) * .5); - translate: var(--tw-translate-x) var(--tw-translate-y); - } - - .\[\&\>svg\]\:text-current > svg { - color: currentColor; - } - - .\[\&\>tr\]\:last\:border-b-0 > tr:last-child { - border-bottom-style: var(--tw-border-style); - border-bottom-width: 0; - } - - .\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state="open"] > svg { - rotate: 180deg; - } - - @media (hover: hover) { - a.\[a\&\]\:hover\:bg-accent:hover { - background-color: var(--accent); - } - } - - @media (hover: hover) { - a.\[a\&\]\:hover\:bg-destructive\/90:hover { - background-color: var(--destructive); - } - - @supports (color: color-mix(in lab, red, red)) { - a.\[a\&\]\:hover\:bg-destructive\/90:hover { - background-color: color-mix(in oklab, var(--destructive) 90%, transparent); - } - } - } - - @media (hover: hover) { - a.\[a\&\]\:hover\:bg-primary\/90:hover { - background-color: var(--primary); - } - - @supports (color: color-mix(in lab, red, red)) { - a.\[a\&\]\:hover\:bg-primary\/90:hover { - background-color: color-mix(in oklab, var(--primary) 90%, transparent); - } - } - } - - @media (hover: hover) { - a.\[a\&\]\:hover\:bg-secondary\/90:hover { - background-color: var(--secondary); - } - - @supports (color: color-mix(in lab, red, red)) { - a.\[a\&\]\:hover\:bg-secondary\/90:hover { - background-color: color-mix(in oklab, var(--secondary) 90%, transparent); - } - } - } - - @media (hover: hover) { - a.\[a\&\]\:hover\:text-accent-foreground:hover { - color: var(--accent-foreground); - } - } - - .animate-fade-in { - opacity: 0; - animation: .4s ease-out forwards fadeIn; - } - - .animate-slide-up { - opacity: 0; - animation: .4s ease-out forwards slideUp; - } - - .animate-count-up { - animation: 1.2s ease-out countUp; - } - - .animate-slide-in-right { - opacity: 0; - animation: .18s ease-out forwards slideInRight; - } - - .animate-scale-hover { - transition: transform .12s ease-out; - } - - .animate-scale-hover:hover { - transform: scale(1.02); - } - - @keyframes fadeIn { - from { - opacity: 0; - } - - to { - opacity: 1; - } - } - - @keyframes slideUp { - from { - opacity: 0; - transform: translateY(20px); - } - - to { - opacity: 1; - transform: translateY(0); - } - } - - @keyframes slideInRight { - from { - opacity: 0; - transform: translateX(100%); - } - - to { - opacity: 1; - transform: translateX(0); - } - } - - @keyframes countUp { - from { - opacity: 0; - transform: scale(.8); - } - - to { - opacity: 1; - transform: scale(1); - } - } - - .min-tap-44 { - min-width: 12px; - min-height: 12px; - } - - .sticky-header { - z-index: 10; - background: var(--background); - border-bottom: 1px solid var(--border); - position: sticky; - top: 0; - } - - .focus-ring { - outline: 2px solid var(--ring); - outline-offset: 2px; - } - - .skeleton { - background: linear-gradient(90deg, var(--muted) 0%, var(--accent) 50%, var(--muted) 100%); - background-size: 200% 100%; - animation: 1.5s infinite shimmer; - } - - @keyframes shimmer { - 0% { - background-position: -200% 0; - } - - 100% { - background-position: 200% 0; - } - } -} - - -:root { - --font-size: 14px; - --brand-gold: #f8c301; - --brand-gold-foreground: #26231a; - --brand-navy: #04045b; - --brand-navy-foreground: #fff; - --brand-charcoal: #26231a; - --brand-charcoal-foreground: #fff; - --silver-grey: silver; - --burgundy: #89002d; - --burgundy-foreground: #fff; - --background: #fff; - --foreground: #26231a; - --bg-surface: #fff; - --bg-elevated: #f8f9fa; - --text-primary: #26231a; - --text-secondary: #717182; - --brand-primary: #04045b; - --brand-contrast: #fff; - --status-success: #21a36a; - --status-success-foreground: #fff; - --status-warn: #f8c301; - --status-warn-foreground: #26231a; - --status-error: #d64545; - --status-error-foreground: #fff; - --chrome-divider: #0000001a; - --card: #fff; - --card-foreground: #26231a; - --popover: #fff; - --popover-foreground: #26231a; - --primary: #04045b; - --primary-foreground: #fff; - --secondary: #f8f9fa; - --secondary-foreground: #26231a; - --muted: #ececf0; - --muted-foreground: #717182; - --accent: #e9ebef; - --accent-foreground: #26231a; - --destructive: #d64545; - --destructive-foreground: #fff; - --border: var(--chrome-divider); - --input: transparent; - --input-background: #f3f3f5; - --switch-background: #cbced4; - --ring: #04045b; - --chart-1: #04045b; - --chart-2: #f8c301; - --chart-3: #21a36a; - --chart-4: #89002d; - --chart-5: silver; - --spacing-4: .286rem; - --spacing-8: .571rem; - --spacing-12: .857rem; - --spacing-16: 1.143rem; - --spacing-20: 1.429rem; - --spacing-24: 1.714rem; - --spacing-28: 2rem; - --spacing-32: 2.286rem; - --radius-4: .286rem; - --radius-8: .571rem; - --radius-12: .857rem; - --radius: var(--radius-8); - --shadow-1: 0 1px 2px #0000000d; - --shadow-2: 0 1px 3px #0000001a, 0 1px 2px #0000000f; - --shadow-3: 0 4px 6px #00000012, 0 2px 4px #0000000f; - --text-12: .857rem; - --text-14: 1rem; - --text-16: 1.143rem; - --text-18: 1.286rem; - --text-20: 1.429rem; - --text-24: 1.714rem; - --text-28: 2rem; - --text-32: 2.286rem; - --font-weight-medium: 500; - --font-weight-normal: 400; - --font-weight-semibold: 600; - --font-weight-bold: 700; - --sidebar: #04045b; - --sidebar-foreground: #fff; - --sidebar-primary: #f8c301; - --sidebar-primary-foreground: #26231a; - --sidebar-accent: #f8c3011a; - --sidebar-accent-foreground: #fff; - --sidebar-border: transparent; - --sidebar-ring: #f8c301; -} - -.dark { - --background: #1a1a1a; - --foreground: #fff; - --bg-surface: #1a1a1a; - --bg-elevated: #2a2a2a; - --text-primary: #fff; - --text-secondary: #a1a1aa; - --brand-primary: #6366f1; - --brand-contrast: #fff; - --status-success: #22c55e; - --status-success-foreground: #fff; - --status-warn: #f8c301; - --status-warn-foreground: #26231a; - --status-error: #ef4444; - --status-error-foreground: #fff; - --chrome-divider: #ffffff1a; - --card: #2a2a2a; - --card-foreground: #fff; - --popover: #2a2a2a; - --popover-foreground: #fff; - --primary: #6366f1; - --primary-foreground: #fff; - --secondary: #374151; - --secondary-foreground: #fff; - --muted: #374151; - --muted-foreground: #a1a1aa; - --accent: #374151; - --accent-foreground: #fff; - --destructive: #ef4444; - --destructive-foreground: #fff; - --border: var(--chrome-divider); - --input: #374151; - --input-background: #374151; - --switch-background: #4b5563; - --ring: #6366f1; - --chart-1: #6366f1; - --chart-2: #f8c301; - --chart-3: #22c55e; - --chart-4: #ef4444; - --chart-5: #a1a1aa; - --sidebar: #04045b; - --sidebar-foreground: #fff; - --sidebar-primary: #f8c301; - --sidebar-primary-foreground: #26231a; - --sidebar-accent: #f8c3011a; - --sidebar-accent-foreground: #fff; - --sidebar-border: transparent; - --sidebar-ring: #f8c301; -} - -@media (prefers-reduced-motion: reduce) { - .animate-fade-in, .animate-slide-up, .animate-count-up, .animate-slide-in-right, .animate-scale-hover { - opacity: 1 !important; - animation: none !important; - transform: none !important; - } - - .animate-scale-hover:hover { - transform: none !important; - } - - html { - scroll-behavior: auto !important; - } - - *, :before, :after { - transition-duration: .01ms !important; - animation-duration: .01ms !important; - animation-iteration-count: 1 !important; - } -} - -@media (prefers-contrast: high) { - :root { - --border: #000; - --chrome-divider: #000; - } - - .dark { - --border: #fff; - --chrome-divider: #fff; - } - - button, input, textarea, select { - border: 2px solid; - } -} - -@property --tw-translate-x { - syntax: "*"; - inherits: false; - initial-value: 0; -} - -@property --tw-translate-y { - syntax: "*"; - inherits: false; - initial-value: 0; -} - -@property --tw-translate-z { - syntax: "*"; - inherits: false; - initial-value: 0; -} - -@property --tw-rotate-x { - syntax: "*"; - inherits: false; - initial-value: rotateX(0); -} - -@property --tw-rotate-y { - syntax: "*"; - inherits: false; - initial-value: rotateY(0); -} - -@property --tw-rotate-z { - syntax: "*"; - inherits: false; - initial-value: rotateZ(0); -} - -@property --tw-skew-x { - syntax: "*"; - inherits: false; - initial-value: skewX(0); -} - -@property --tw-skew-y { - syntax: "*"; - inherits: false; - initial-value: skewY(0); -} - -@property --tw-space-y-reverse { - syntax: "*"; - inherits: false; - initial-value: 0; -} - -@property --tw-space-x-reverse { - syntax: "*"; - inherits: false; - initial-value: 0; -} - -@property --tw-border-style { - syntax: "*"; - inherits: false; - initial-value: solid; -} - -@property --tw-leading { - syntax: "*"; - inherits: false -} - -@property --tw-font-weight { - syntax: "*"; - inherits: false -} - -@property --tw-tracking { - syntax: "*"; - inherits: false -} - -@property --tw-shadow { - syntax: "*"; - inherits: false; - initial-value: 0 0 #0000; -} - -@property --tw-shadow-color { - syntax: "*"; - inherits: false -} - -@property --tw-shadow-alpha { - syntax: ""; - inherits: false; - initial-value: 100%; -} - -@property --tw-inset-shadow { - syntax: "*"; - inherits: false; - initial-value: 0 0 #0000; -} - -@property --tw-inset-shadow-color { - syntax: "*"; - inherits: false -} - -@property --tw-inset-shadow-alpha { - syntax: ""; - inherits: false; - initial-value: 100%; -} - -@property --tw-ring-color { - syntax: "*"; - inherits: false -} - -@property --tw-ring-shadow { - syntax: "*"; - inherits: false; - initial-value: 0 0 #0000; -} - -@property --tw-inset-ring-color { - syntax: "*"; - inherits: false -} - -@property --tw-inset-ring-shadow { - syntax: "*"; - inherits: false; - initial-value: 0 0 #0000; -} - -@property --tw-ring-inset { - syntax: "*"; - inherits: false -} - -@property --tw-ring-offset-width { - syntax: ""; - inherits: false; - initial-value: 0; -} - -@property --tw-ring-offset-color { - syntax: "*"; - inherits: false; - initial-value: #fff; -} - -@property --tw-ring-offset-shadow { - syntax: "*"; - inherits: false; - initial-value: 0 0 #0000; -} - -@property --tw-outline-style { - syntax: "*"; - inherits: false; - initial-value: solid; -} - -@property --tw-blur { - syntax: "*"; - inherits: false -} - -@property --tw-brightness { - syntax: "*"; - inherits: false -} - -@property --tw-contrast { - syntax: "*"; - inherits: false -} - -@property --tw-grayscale { - syntax: "*"; - inherits: false -} - -@property --tw-hue-rotate { - syntax: "*"; - inherits: false -} - -@property --tw-invert { - syntax: "*"; - inherits: false -} - -@property --tw-opacity { - syntax: "*"; - inherits: false -} - -@property --tw-saturate { - syntax: "*"; - inherits: false -} - -@property --tw-sepia { - syntax: "*"; - inherits: false -} - -@property --tw-drop-shadow { - syntax: "*"; - inherits: false -} - -@property --tw-drop-shadow-color { - syntax: "*"; - inherits: false -} - -@property --tw-drop-shadow-alpha { - syntax: ""; - inherits: false; - initial-value: 100%; -} - -@property --tw-drop-shadow-size { - syntax: "*"; - inherits: false -} - -@property --tw-backdrop-blur { - syntax: "*"; - inherits: false -} - -@property --tw-backdrop-brightness { - syntax: "*"; - inherits: false -} - -@property --tw-backdrop-contrast { - syntax: "*"; - inherits: false -} - -@property --tw-backdrop-grayscale { - syntax: "*"; - inherits: false -} - -@property --tw-backdrop-hue-rotate { - syntax: "*"; - inherits: false -} - -@property --tw-backdrop-invert { - syntax: "*"; - inherits: false -} - -@property --tw-backdrop-opacity { - syntax: "*"; - inherits: false -} - -@property --tw-backdrop-saturate { - syntax: "*"; - inherits: false -} - -@property --tw-backdrop-sepia { - syntax: "*"; - inherits: false -} - -@property --tw-duration { - syntax: "*"; - inherits: false -} - -@property --tw-ease { - syntax: "*"; - inherits: false -} - -@property --tw-scale-x { - syntax: "*"; - inherits: false; - initial-value: 1; -} - -@property --tw-scale-y { - syntax: "*"; - inherits: false; - initial-value: 1; -} - -@property --tw-scale-z { - syntax: "*"; - inherits: false; - initial-value: 1; -} - -@keyframes spin { - to { - transform: rotate(360deg); - } -} - -@keyframes pulse { - 50% { - opacity: .5; - } -} - -@keyframes enter { - from { - opacity: var(--tw-enter-opacity, 1); - transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0)); - } -} - -@keyframes exit { - to { - opacity: var(--tw-exit-opacity, 1); - transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0)); - } -} - -@keyframes accordion-down { - from { - height: 0; - } - - to { - height: var(--radix-accordion-content-height, var(--bits-accordion-content-height)); - } -} - -@keyframes accordion-up { - from { - height: var(--radix-accordion-content-height, var(--bits-accordion-content-height)); - } - - to { - height: 0; - } -} +@import "tailwindcss"; +@import "./styles/globals.css"; diff --git a/src/layouts/components/HRSidebar.tsx b/src/layouts/components/HRSidebar.tsx index ee152d7..08160e2 100644 --- a/src/layouts/components/HRSidebar.tsx +++ b/src/layouts/components/HRSidebar.tsx @@ -1,5 +1,7 @@ import { BarChart3, + BookOpen, + FolderOpen, Home, MessageSquare, Users @@ -12,6 +14,8 @@ import { useAuth } from '../../context/AuthContext'; const menuItems = [ { id: 'dashboard', label: 'Dashboard', icon: Home, path: '/hr/dashboard' }, { id: 'learners', label: 'Learners', icon: Users, path: '/hr/learners' }, + { id: 'courses', label: 'Courses', icon: BookOpen, path: '/hr/courses' }, + { id: 'programmes', label: 'Programmes', icon: FolderOpen, path: '/hr/programmes' }, { id: 'reports', label: 'Reports', icon: BarChart3, path: '/hr/reports' }, { id: 'discussions', label: 'Discussion Forums', icon: MessageSquare, path: '/hr/discussions' } ]; diff --git a/src/pages/Courses/CoursesPage.tsx b/src/pages/Courses/CoursesPage.tsx new file mode 100644 index 0000000..b7739aa --- /dev/null +++ b/src/pages/Courses/CoursesPage.tsx @@ -0,0 +1,93 @@ +import React from 'react'; +import { Calendar, Clock, Lock } from 'lucide-react'; +import { Card, CardContent, CardHeader, CardTitle } from '../../components/ui/card'; +import { Button } from '../../components/ui/button'; +import { Progress } from '../../components/ui/progress'; +import { useGetAssignedHrCoursesQuery } from '../../redux/services/learnersApi'; + +const CoursesPage: React.FC = () => { + const { data, isLoading, isError } = useGetAssignedHrCoursesQuery({ + limit: 10, + start: 0, + }); + + const courseCards = data?.data.course_items ?? []; + const totalCourses = data?.data.pagination.total ?? 0; + + return ( +
+

My Courses

+ + + + Assigned Courses +

{totalCourses} courses assigned by your organization.

+ + + {isLoading &&

Loading courses...

} + + {isError &&

Failed to load courses. Please try again.

} + + {!isLoading && !isError && courseCards.length === 0 && ( +

No courses found.

+ )} + +
+ {courseCards.map((course) => ( + + +
+ {course.course_name} +
+

{course.course_name}

+

{course.course_description}

+
+
+
+ + + Duration: {course.total_duration}h + + + + Learners: {course.total_learners} + + + + Status: {course.status} + +
+ +
+
+ Progress + {course.avg_progress}% +
+ +
+ +
+ {course.status === 'new' ? ( + + ) : ( + + )} +
+ + + ))} +
+ + +
+ ); +}; + +export default CoursesPage; diff --git a/src/pages/DiscussionsPage/DiscussionsPage.tsx b/src/pages/DiscussionsPage/DiscussionsPage.tsx index 00eaa9b..9ea115f 100644 --- a/src/pages/DiscussionsPage/DiscussionsPage.tsx +++ b/src/pages/DiscussionsPage/DiscussionsPage.tsx @@ -192,9 +192,9 @@ const DiscussionsPage: React.FC = () => {
L
-
+
-

{thread.title}

+

{thread.title}

{thread.content}

diff --git a/src/pages/Learners/LearnersPage.tsx b/src/pages/Learners/LearnersPage.tsx index 24ae8fb..88bf5b6 100644 --- a/src/pages/Learners/LearnersPage.tsx +++ b/src/pages/Learners/LearnersPage.tsx @@ -11,6 +11,12 @@ import { Progress } from '../../components/ui/progress'; import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '../../components/ui/sheet'; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../../components/ui/dialog'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../components/ui/tabs'; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from '../../components/ui/dropdown-menu'; import { Search, Plus, @@ -87,6 +93,7 @@ const LearnersPage: React.FC = () => { const [showImportModal, setShowImportModal] = useState(false); const [showAssignModal, setShowAssignModal] = useState(false); const [showAssignCourseModal, setShowAssignCourseModal] = useState(false); + const [showAssignProfilerModal, setShowAssignProfilerModal] = useState(false); const [showEditDrawer, setShowEditDrawer] = useState(false); const [selectedProgrammeId, setSelectedProgrammeId] = useState(''); const [selectedCourseId, setSelectedCourseId] = useState(''); @@ -94,6 +101,11 @@ const LearnersPage: React.FC = () => { const [courseEndDate, setCourseEndDate] = useState(''); const [assignError, setAssignError] = useState(''); const [assignCourseError, setAssignCourseError] = useState(''); + const [assignProfilerError, setAssignProfilerError] = useState(''); + const [selectedProfilerId, setSelectedProfilerId] = useState(''); + const [profilerStartDate, setProfilerStartDate] = useState(''); + const [profilerEndDate, setProfilerEndDate] = useState(''); + const [isAssigningProfiler, setIsAssigningProfiler] = useState(false); const [editingEmployee, setEditingEmployee] = useState(null); const [editForm, setEditForm] = useState({ firstName: '', @@ -132,6 +144,11 @@ const LearnersPage: React.FC = () => { { code: '+61', label: 'AU +61' }, { code: '+86', label: 'CN +86' }, ]; + const profilerOptions = [ + { id: 'profiler-1', name: 'Leadership Profiler' }, + { id: 'profiler-2', name: 'Behavioral Profiler' }, + { id: 'profiler-3', name: 'Skills Profiler' }, + ]; useEffect(() => { const timer = setTimeout(() => { @@ -787,6 +804,74 @@ const LearnersPage: React.FC = () => { } }; + const handleAssignProfiler = async () => { + setAssignProfilerError(''); + if (selectedEmployees.length === 0) { + setAssignProfilerError('Please select at least one learner.'); + return; + } + if (!selectedProfilerId) { + setAssignProfilerError('Please select a profiler.'); + return; + } + if (!profilerStartDate || !profilerEndDate) { + setAssignProfilerError('Please select start date and end date.'); + return; + } + if (new Date(profilerEndDate) < new Date(profilerStartDate)) { + setAssignProfilerError('End date cannot be before start date.'); + return; + } + + try { + setIsAssigningProfiler(true); + await new Promise((resolve) => setTimeout(resolve, 600)); + const profilerName = + profilerOptions.find((option) => option.id === selectedProfilerId)?.name ?? 'selected profiler'; + + showToast( + 'Profiler assigned', + `${selectedEmployees.length} learner${selectedEmployees.length !== 1 ? 's' : ''} assigned to ${profilerName}.`, + 'success' + ); + setShowAssignProfilerModal(false); + setSelectedProfilerId(''); + setProfilerStartDate(''); + setProfilerEndDate(''); + setSelectedEmployees([]); + } catch { + setAssignProfilerError('Failed to assign profiler.'); + showToast('Assign failed', 'Failed to assign profiler.', 'error'); + } finally { + setIsAssigningProfiler(false); + } + }; + + const handleOpenAssignAction = (employeeId: string, action: 'programme' | 'course' | 'profiler') => { + setSelectedEmployees([employeeId]); + if (action === 'programme') { + setAssignError(''); + setSelectedProgrammeId(''); + setProgrammeStartDate(''); + setProgrammeEndDate(''); + setShowAssignModal(true); + return; + } + if (action === 'course') { + setAssignCourseError(''); + setSelectedCourseId(''); + setCourseStartDate(''); + setCourseEndDate(''); + setShowAssignCourseModal(true); + return; + } + setAssignProfilerError(''); + setSelectedProfilerId(''); + setProfilerStartDate(''); + setProfilerEndDate(''); + setShowAssignProfilerModal(true); + }; + const getStatusColor = (status: string) => { switch (status) { case 'Active': return 'default'; @@ -964,18 +1049,11 @@ const LearnersPage: React.FC = () => { -
@@ -1083,14 +1161,38 @@ const LearnersPage: React.FC = () => { > - + + + + + + handleOpenAssignAction(employee.id, 'programme')} + > + + Assign to Programme + + handleOpenAssignAction(employee.id, 'course')} + > + + Assign to Course + + handleOpenAssignAction(employee.id, 'profiler')} + > + + Assign to Profiler + + +
@@ -1609,6 +1711,86 @@ const LearnersPage: React.FC = () => { + {/* Assign Profiler Modal (Bulk) */} + + + + Assign to Profiler + + Assign {selectedEmployees.length} selected learner{selectedEmployees.length !== 1 ? 's' : ''} to a profiler. + + +
+ {assignProfilerError && ( +
+ + {assignProfilerError} +
+ )} +
+ + +
+
+
+ + setProfilerStartDate(e.target.value)} + required + /> +
+
+ + setProfilerEndDate(e.target.value)} + required + /> +
+
+
+ + +
+
+ + + {/* Edit Drawer */} diff --git a/src/pages/Programmes/ProgrammesPage.tsx b/src/pages/Programmes/ProgrammesPage.tsx new file mode 100644 index 0000000..f43d610 --- /dev/null +++ b/src/pages/Programmes/ProgrammesPage.tsx @@ -0,0 +1,133 @@ +import React, { useState } from 'react'; +import { BookOpen, Calendar, ChevronRight, FolderOpen, Info, Presentation, Users } from 'lucide-react'; +import { Card, CardContent, CardHeader, CardTitle } from '../../components/ui/card'; +import { Button } from '../../components/ui/button'; +import { Progress } from '../../components/ui/progress'; +import { useGetAssignedHrProgrammesQuery } from '../../redux/services/learnersApi'; + +const ProgrammesPage: React.FC = () => { + const { data, isLoading, isError } = useGetAssignedHrProgrammesQuery({ + limit: 10, + start: 0, + }); + const [openProgrammeId, setOpenProgrammeId] = useState(null); + + const programmeItems = data?.data.programme_items ?? []; + + const formatDate = (date: string) => + new Date(date).toLocaleDateString('en-GB', { + day: '2-digit', + month: 'short', + year: 'numeric', + }); + + return ( +
+

My Programs

+ + {isLoading &&

Loading programmes...

} + + {isError &&

Failed to load programmes. Please try again.

} + + {!isLoading && !isError && programmeItems.length === 0 && ( +

No programmes found.

+ )} + +
+ {programmeItems.map((programme) => { + const isOpen = openProgrammeId === programme.id; + + return ( + + setOpenProgrammeId((prev) => (prev === programme.id ? null : programme.id))} + > +
+
+ +
+ {programme.programme_title} +
+ {programme.progress ?? 0}% Complete + + + Ends: {formatDate(programme.end_date)} + + + + {programme.courses} Courses + + + + {programme.webinars} Webinars + + + + {programme.resources} Resources + + + + {programme.classes} Classes + +
+
+
+ +
+ + +
+
+ +
+

Programme Summary

+
+ + + {programme.courses} Courses + + + + {programme.resources} Resources + + + + {programme.webinars} Webinars + + + + {programme.classes} Classes + +
+
+ +
+
+ Progress + {programme.progress ?? 0}% +
+ +
+ +
+
+ + ); + })} +
+
+ ); +}; + +export default ProgrammesPage; diff --git a/src/redux/services/learnersApi.ts b/src/redux/services/learnersApi.ts index c36d343..2276af6 100644 --- a/src/redux/services/learnersApi.ts +++ b/src/redux/services/learnersApi.ts @@ -288,6 +288,74 @@ interface UpdateLearnerResponse { correlation_id: string; } +export interface AssignedHrCoursesQueryParams { + limit: number; + start: number; + search_query?: string; + status?: 'inprogress' | 'completed' | 'new'; +} + +export interface AssignedHrCourseItem { + id: string; + course_name: string; + course_description: string; + thumbnail_url: string; + total_duration: number; + total_learners: number; + avg_progress: number; + status: 'inprogress' | 'completed' | 'new'; +} + +interface AssignedHrCoursesResponse { + success: boolean; + status: number; + message: string; + data: { + course_items: AssignedHrCourseItem[]; + pagination: { + total: number; + limit: number; + start: number; + has_next: boolean; + }; + }; + errors: unknown; + correlation_id: string; +} + +export interface AssignedHrProgrammesQueryParams { + limit: number; + start: number; +} + +export interface AssignedHrProgrammeItem { + id: string; + programme_title: string; + end_date: string; + courses: number; + webinars: number; + resources: number; + classes: number; + progress: number | null; +} + +interface AssignedHrProgrammesResponse { + success: boolean; + status: number; + message: string; + data: { + programme_items: AssignedHrProgrammeItem[]; + pagination: { + total: number; + limit: number; + start: number; + has_next: boolean; + }; + }; + errors: unknown; + correlation_id: string; +} + const API_BASE_URL = import.meta.env.VITE_API_URL; export const learnersApi = createApi({ @@ -440,6 +508,31 @@ export const learnersApi = createApi({ }), invalidatesTags: ['Learners'], }), + getAssignedHrCourses: builder.query({ + query: (params) => ({ + url: '/hr/organization/assigned-courses/hr', + method: 'GET', + params: { + limit: params.limit, + start: params.start, + search_query: params.search_query || undefined, + status: params.status || undefined, + }, + }), + }), + getAssignedHrProgrammes: builder.query< + AssignedHrProgrammesResponse, + AssignedHrProgrammesQueryParams + >({ + query: (params) => ({ + url: '/hr/organization/assigned-programmes/hr', + method: 'GET', + params: { + limit: params.limit, + start: params.start, + }, + }), + }), }), }); @@ -457,4 +550,6 @@ export const { useGetAssignedCoursesForOrganizationQuery, useGetLearnerCoursesQuery, useUpdateLearnerMutation, + useGetAssignedHrCoursesQuery, + useGetAssignedHrProgrammesQuery, } = learnersApi; diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 968f381..aeb6388 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -9,6 +9,8 @@ import ReportsPage from '../pages/ReportsPage/ReportsPage'; import DiscussionsPage from '../pages/DiscussionsPage/DiscussionsPage'; import ProgrammeViewPage from '../pages/ProgrammeViewPage/ProgrammeViewPage'; import CourseViewPage from '../pages/CourseViewPage/CourseViewPage'; +import CoursesPage from '../pages/Courses/CoursesPage'; +import ProgrammesPage from '../pages/Programmes/ProgrammesPage'; export const router = createBrowserRouter([ { @@ -46,6 +48,14 @@ export const router = createBrowserRouter([ path: 'reports', element: , }, + { + path: 'courses', + element: , + }, + { + path: 'programmes', + element: , + }, { path: 'discussions', element: , -- 2.34.1