4
This commit is contained in:
Flatlogic Bot
parent
b073dd491e
commit
7aefb06035
@ -11,10 +11,10 @@ export const colorsBgLight = {
|
||||
white: 'bg-white text-black',
|
||||
light: ' bg-white text-black text-black dark:bg-dark-900 dark:text-white',
|
||||
contrast: 'bg-gray-800 text-white dark:bg-white dark:text-black',
|
||||
success: 'bg-emerald-500 border-emerald-500 dark:bg-pavitra-blue dark:border-pavitra-blue text-white',
|
||||
success: 'bg-emerald-500 border-emerald-500 dark:bg-emerald-500 dark:border-emerald-500 text-white',
|
||||
danger: 'bg-red-500 border-red-500 text-white',
|
||||
warning: 'bg-yellow-500 border-yellow-500 text-white',
|
||||
info: 'bg-[#0E1A2B] border-[#0E1A2B] dark:bg-pavitra-blue dark:border-pavitra-blue text-white',
|
||||
info: 'bg-[#0E1A2B] border-[#0E1A2B] dark:bg-[#D8B75E] dark:border-[#D8B75E] text-white dark:text-[#08111F]',
|
||||
}
|
||||
|
||||
export const colorsText = {
|
||||
@ -53,30 +53,30 @@ export const getButtonColor = (
|
||||
whiteDark: 'ring-gray-200 dark:ring-dark-500',
|
||||
lightDark: 'ring-gray-200 dark:ring-gray-500',
|
||||
contrast: 'ring-gray-300 dark:ring-gray-400',
|
||||
success: 'ring-emerald-300 dark:ring-pavitra-blue',
|
||||
success: 'ring-emerald-300 dark:ring-emerald-500',
|
||||
danger: 'ring-red-300 dark:ring-red-700',
|
||||
warning: 'ring-yellow-300 dark:ring-yellow-700',
|
||||
info: "ring-[#D8B75E]/35 dark:ring-pavitra-blue",
|
||||
info: "ring-[#D8B75E]/35 dark:ring-[#D8B75E]/35",
|
||||
},
|
||||
active: {
|
||||
white: 'bg-gray-100',
|
||||
whiteDark: 'bg-gray-100 dark:bg-dark-800',
|
||||
lightDark: 'bg-gray-200 dark:bg-slate-700',
|
||||
contrast: 'bg-gray-700 dark:bg-slate-100',
|
||||
success: 'bg-emerald-700 dark:bg-pavitra-blue',
|
||||
success: 'bg-emerald-700 dark:bg-emerald-500',
|
||||
danger: 'bg-red-700 dark:bg-red-600',
|
||||
warning: 'bg-yellow-700 dark:bg-yellow-600',
|
||||
info: 'bg-[#162742] dark:bg-pavitra-blue',
|
||||
info: 'bg-[#162742] dark:bg-[#F2C95C]',
|
||||
},
|
||||
bg: {
|
||||
white: 'bg-white text-black',
|
||||
whiteDark: 'bg-white text-black dark:bg-dark-900 dark:text-white',
|
||||
lightDark: 'bg-gray-100 text-black dark:bg-slate-800 dark:text-white',
|
||||
contrast: 'bg-gray-800 text-white dark:bg-white dark:text-black',
|
||||
success: 'bg-emerald-600 dark:bg-pavitra-blue text-white',
|
||||
success: 'bg-emerald-600 dark:bg-emerald-500 text-white',
|
||||
danger: 'bg-red-600 text-white dark:bg-red-500 ',
|
||||
warning: 'bg-yellow-600 dark:bg-yellow-500 text-white',
|
||||
info: " bg-[#0E1A2B] dark:bg-pavitra-blue text-white ",
|
||||
info: " bg-[#0E1A2B] dark:bg-[#D8B75E] text-white dark:text-[#08111F] ",
|
||||
},
|
||||
bgHover: {
|
||||
white: 'hover:bg-gray-100',
|
||||
@ -84,39 +84,39 @@ export const getButtonColor = (
|
||||
lightDark: 'hover:bg-gray-200 hover:dark:bg-slate-700',
|
||||
contrast: 'hover:bg-gray-700 hover:dark:bg-slate-100',
|
||||
success:
|
||||
'hover:bg-emerald-700 hover:border-emerald-700 hover:dark:bg-pavitra-blue hover:dark:border-pavitra-blue',
|
||||
'hover:bg-emerald-700 hover:border-emerald-700 hover:dark:bg-emerald-600 hover:dark:border-emerald-600',
|
||||
danger:
|
||||
'hover:bg-red-700 hover:border-red-700 hover:dark:bg-red-600 hover:dark:border-red-600',
|
||||
warning:
|
||||
'hover:bg-yellow-700 hover:border-yellow-700 hover:dark:bg-yellow-600 hover:dark:border-yellow-600',
|
||||
info: "hover:bg-[#162742] hover:border-[#162742] hover:dark:bg-pavitra-blue/80 hover:dark:border-pavitra-blue/80",
|
||||
info: "hover:bg-[#162742] hover:border-[#162742] hover:dark:bg-[#F2C95C] hover:dark:border-[#F2C95C]",
|
||||
},
|
||||
borders: {
|
||||
white: 'border-white',
|
||||
whiteDark: 'border-white dark:border-dark-900',
|
||||
lightDark: 'border-gray-100 dark:border-slate-800',
|
||||
contrast: 'border-gray-800 dark:border-white',
|
||||
success: 'border-emerald-600 dark:border-pavitra-blue',
|
||||
success: 'border-emerald-600 dark:border-emerald-500',
|
||||
danger: 'border-red-600 dark:border-red-500',
|
||||
warning: 'border-yellow-600 dark:border-yellow-500',
|
||||
info: "border-[#0E1A2B] dark:border-pavitra-blue",
|
||||
info: "border-[#0E1A2B] dark:border-[#D8B75E]",
|
||||
},
|
||||
text: {
|
||||
contrast: 'dark:text-slate-100',
|
||||
success: 'text-emerald-600 dark:text-pavitra-blue',
|
||||
success: 'text-emerald-600 dark:text-emerald-400',
|
||||
danger: 'text-red-600 dark:text-red-500',
|
||||
warning: 'text-yellow-600 dark:text-yellow-500',
|
||||
info: 'text-[#0E1A2B] dark:text-pavitra-blue',
|
||||
info: 'text-[#0E1A2B] dark:text-[#D8B75E]',
|
||||
},
|
||||
outlineHover: {
|
||||
contrast:
|
||||
'hover:bg-gray-800 hover:text-gray-100 hover:dark:bg-slate-100 hover:dark:text-black',
|
||||
success: 'hover:bg-emerald-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-pavitra-blue',
|
||||
success: 'hover:bg-emerald-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-emerald-500',
|
||||
danger:
|
||||
'hover:bg-red-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-red-600',
|
||||
warning:
|
||||
'hover:bg-yellow-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-yellow-600',
|
||||
info: "hover:bg-[#0E1A2B] hover:text-white hover:dark:text-white hover:dark:border-pavitra-blue",
|
||||
info: "hover:bg-[#0E1A2B] hover:text-white hover:dark:bg-[#D8B75E] hover:dark:text-[#08111F] hover:dark:border-[#D8B75E]",
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
@ -30,9 +30,9 @@ export default function AsideMenuLayer({ menu, className = '', ...props }: Props
|
||||
<aside
|
||||
id='asideMenu'
|
||||
className={`${className} zzz fixed top-0 z-40 flex h-screen w-80 overflow-hidden transition-position lg:py-3 lg:pl-3`}
|
||||
>
|
||||
<div
|
||||
className={`flex-1 flex flex-col overflow-hidden border border-[#E5E0D6] shadow-xl shadow-[#83755E]/10 dark:bg-dark-900 ${asideStyle} ${corners}`}
|
||||
>
|
||||
<div
|
||||
className={`flex-1 flex flex-col overflow-hidden border border-[#E5E0D6] shadow-xl shadow-[#83755E]/10 dark:border-[#273447] dark:bg-[#0B1120] dark:shadow-black/30 ${asideStyle} ${corners}`}
|
||||
>
|
||||
<div
|
||||
className={`flex flex-row items-center justify-between px-5 py-5 ${asideBrandStyle}`}
|
||||
|
||||
@ -115,7 +115,7 @@ const BigCalendar = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='h-[600px] p-4'>
|
||||
<div className='legal-governance-calendar h-[680px] p-4 md:p-6'>
|
||||
<Calendar
|
||||
defaultDate={defaultDate}
|
||||
defaultView={Views.MONTH}
|
||||
|
||||
@ -34,12 +34,12 @@ const FormField = ({ icons = [], ...props }: Props) => {
|
||||
}
|
||||
|
||||
const controlClassName = [
|
||||
`px-3 py-2 max-w-full border-gray-300 dark:border-dark-700 ${corners} w-full dark:placeholder-gray-400`,
|
||||
`px-3 py-2 max-w-full border-gray-300 text-[#0E1A2B] dark:border-[#334155] dark:text-slate-100 ${corners} w-full dark:placeholder-slate-500`,
|
||||
`${focusRing}`,
|
||||
props.hasTextareaHeight ? 'h-24' : 'h-12',
|
||||
props.isBorderless ? 'border-0' : 'border',
|
||||
props.isTransparent ? 'bg-transparent' : `${props.websiteBg ? ` bg-white` : bgColor} dark:bg-dark-800`,
|
||||
props.disabled ? 'bg-gray-200 text-gray-100 dark:bg-dark-900 disabled' : '',
|
||||
props.isTransparent ? 'bg-transparent' : `${props.websiteBg ? ` bg-white` : bgColor} dark:bg-[#0F172A]`,
|
||||
props.disabled ? 'bg-gray-200 text-gray-100 dark:bg-[#111827] dark:text-slate-500 disabled' : '',
|
||||
props.borderButtom ? `border-0 border-b ${props.diversity ? "border-gray-400" : " placeholder-white border-gray-300/10 border-white "} rounded-none focus:ring-0` : '',
|
||||
].join(' ');
|
||||
|
||||
@ -48,7 +48,7 @@ const FormField = ({ icons = [], ...props }: Props) => {
|
||||
{props.label && (
|
||||
<label
|
||||
htmlFor={props.labelFor}
|
||||
className={`block font-bold mb-2 ${props.labelFor ? 'cursor-pointer' : ''}`}
|
||||
className={`block font-bold mb-2 dark:text-slate-100 ${props.labelFor ? 'cursor-pointer' : ''}`}
|
||||
>
|
||||
{props.label}
|
||||
</label>
|
||||
@ -71,7 +71,7 @@ const FormField = ({ icons = [], ...props }: Props) => {
|
||||
))}
|
||||
</div>
|
||||
{props.help && (
|
||||
<div className='text-xs text-gray-500 dark:text-dark-600 mt-1'>{props.help}</div>
|
||||
<div className='text-xs text-gray-500 dark:text-slate-400 mt-1'>{props.help}</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -22,24 +22,24 @@ export default function LegalOpsPageIntro({
|
||||
children,
|
||||
}: Props) {
|
||||
return (
|
||||
<section className='mb-6 overflow-hidden rounded-xl border border-[#DDD5C7] bg-white shadow-sm shadow-[#83755E]/10'>
|
||||
<section className='mb-6 overflow-hidden rounded-xl border border-[#DDD5C7] bg-white shadow-sm shadow-[#83755E]/10 dark:border-[#273447] dark:bg-[#111827] dark:shadow-none'>
|
||||
<div className='grid gap-5 p-6 lg:grid-cols-[1fr_auto] lg:items-start'>
|
||||
<div>
|
||||
<p className='text-xs font-semibold uppercase tracking-[0.16em] text-[#7A5B13]'>{eyebrow}</p>
|
||||
<h2 className='mt-2 text-2xl font-semibold text-[#0E1A2B]'>{title}</h2>
|
||||
<p className='mt-3 max-w-3xl text-sm leading-6 text-[#5B6472]'>{description}</p>
|
||||
<p className='text-xs font-semibold uppercase tracking-[0.16em] text-[#7A5B13] dark:text-[#D8B75E]'>{eyebrow}</p>
|
||||
<h2 className='mt-2 text-2xl font-semibold text-[#0E1A2B] dark:text-slate-50'>{title}</h2>
|
||||
<p className='mt-3 max-w-3xl text-sm leading-6 text-[#5B6472] dark:text-slate-300'>{description}</p>
|
||||
</div>
|
||||
{children && <div className='flex flex-wrap gap-2 lg:max-w-xl lg:justify-end'>{children}</div>}
|
||||
</div>
|
||||
<div className='grid border-t border-[#E5E0D6] bg-[#FBF8F1] md:grid-cols-3'>
|
||||
<div className='grid border-t border-[#E5E0D6] bg-[#FBF8F1] dark:border-[#273447] dark:bg-[#0F172A] md:grid-cols-3'>
|
||||
{metrics.map((metric) => (
|
||||
<div
|
||||
key={metric.label}
|
||||
className='border-b border-[#E5E0D6] p-5 last:border-b-0 md:border-b-0 md:border-r md:last:border-r-0'
|
||||
className='border-b border-[#E5E0D6] p-5 last:border-b-0 dark:border-[#273447] md:border-b-0 md:border-r md:last:border-r-0'
|
||||
>
|
||||
<p className='text-xs font-semibold uppercase tracking-[0.14em] text-[#8B7A61]'>{metric.label}</p>
|
||||
<p className='mt-2 text-xl font-semibold text-[#0E1A2B]'>{metric.value}</p>
|
||||
<p className='mt-1 text-xs leading-5 text-[#6B7280]'>{metric.helper}</p>
|
||||
<p className='text-xs font-semibold uppercase tracking-[0.14em] text-[#8B7A61] dark:text-[#D8B75E]'>{metric.label}</p>
|
||||
<p className='mt-2 text-xl font-semibold text-[#0E1A2B] dark:text-slate-50'>{metric.value}</p>
|
||||
<p className='mt-1 text-xs leading-5 text-[#6B7280] dark:text-slate-400'>{metric.helper}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -33,9 +33,9 @@ export default function NavBar({ menu, className = '', children }: Props) {
|
||||
|
||||
return (
|
||||
<nav
|
||||
className={`${className} fixed inset-x-0 top-0 z-30 h-14 w-screen border-b border-[#DDD5C7] bg-[#F6F3EC]/95 backdrop-blur transition-position lg:w-auto dark:bg-dark-800`}
|
||||
className={`${className} fixed inset-x-0 top-0 z-30 h-14 w-screen border-b border-[#DDD5C7] bg-[#F6F3EC]/95 backdrop-blur transition-position dark:border-[#273447] dark:bg-[#08111F]/95 lg:w-auto`}
|
||||
>
|
||||
<div className={`flex lg:items-stretch ${containerMaxW} ${isScrolled ? 'shadow-sm shadow-[#83755E]/10 dark:border-dark-700' : ''}`}>
|
||||
<div className={`flex lg:items-stretch ${containerMaxW} ${isScrolled ? 'shadow-sm shadow-[#83755E]/10 dark:shadow-none' : ''}`}>
|
||||
<div className="flex flex-1 items-stretch h-14">{children}</div>
|
||||
<div className="flex-none items-stretch flex h-14 lg:hidden">
|
||||
<NavBarItemPlain onClick={handleMenuNavBarToggleClick}>
|
||||
@ -45,7 +45,7 @@ export default function NavBar({ menu, className = '', children }: Props) {
|
||||
<div
|
||||
className={`${
|
||||
isMenuNavBarActive ? 'block' : 'hidden'
|
||||
} absolute left-0 top-14 flex max-h-screen-menu w-screen items-center overflow-y-auto bg-[#F6F3EC] shadow-lg lg:static lg:flex lg:w-auto lg:overflow-visible lg:bg-transparent lg:shadow-none dark:bg-dark-800`}
|
||||
} absolute left-0 top-14 flex max-h-screen-menu w-screen items-center overflow-y-auto bg-[#F6F3EC] shadow-lg dark:bg-[#08111F] dark:shadow-none lg:static lg:flex lg:w-auto lg:overflow-visible lg:bg-transparent lg:shadow-none`}
|
||||
>
|
||||
<NavBarMenuList menu={menu} />
|
||||
</div>
|
||||
|
||||
@ -36,7 +36,7 @@ const Search = () => {
|
||||
name='search'
|
||||
validate={validateSearch}
|
||||
placeholder='Search governance records'
|
||||
className={`${corners} relative ml-2 w-full border-[#DDD5C7] bg-white/80 p-2.5 text-sm text-[#111827] placeholder-[#8A8173] shadow-none dark:bg-dark-900 dark:placeholder-dark-600 ${focusRing}`}
|
||||
className={`${corners} relative ml-2 w-full border-[#DDD5C7] bg-white/80 p-2.5 text-sm text-[#111827] placeholder-[#8A8173] shadow-none dark:border-[#273447] dark:bg-[#111827] dark:text-slate-100 dark:placeholder-slate-500 ${focusRing}`}
|
||||
/>
|
||||
{errors.search && touched.search && values.search.length < 2 ? (
|
||||
<div className='text-red-500 text-sm ml-2 absolute'>{errors.search}</div>
|
||||
|
||||
@ -1,39 +1,302 @@
|
||||
.rbc-event {
|
||||
@apply bg-blue-600 !important;
|
||||
.legal-governance-calendar {
|
||||
color: #0E1A2B;
|
||||
}
|
||||
|
||||
.rbc-show-more {
|
||||
@apply dark:text-white bg-transparent !important;
|
||||
.legal-governance-calendar .rbc-calendar {
|
||||
border: 1px solid #DDD5C7;
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 10px 24px rgba(131, 117, 94, 0.08);
|
||||
}
|
||||
|
||||
.rbc-btn-group button {
|
||||
@apply dark:text-white !important;
|
||||
.legal-governance-calendar .rbc-toolbar {
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.rbc-btn-group button:hover {
|
||||
@apply text-white dark:bg-dark-700 !important;
|
||||
.legal-governance-calendar .rbc-toolbar-label {
|
||||
color: #0E1A2B;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.rbc-btn-group button.rbc-active {
|
||||
@apply text-black dark:bg-blue-600 !important;
|
||||
.legal-governance-calendar .rbc-btn-group {
|
||||
display: inline-flex;
|
||||
overflow: hidden;
|
||||
border: 1px solid #D8D0C2;
|
||||
border-radius: 10px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 1px 2px rgba(131, 117, 94, 0.08);
|
||||
}
|
||||
|
||||
.rbc-btn-group button:focus {
|
||||
@apply dark:bg-blue-600 !important;
|
||||
.legal-governance-calendar .rbc-btn-group button {
|
||||
min-height: 38px;
|
||||
border: 0 !important;
|
||||
border-right: 1px solid #E5E0D6 !important;
|
||||
background: #FFFFFF !important;
|
||||
color: #0E1A2B !important;
|
||||
font-weight: 600;
|
||||
padding: 8px 16px;
|
||||
transition: background-color 150ms ease, color 150ms ease;
|
||||
}
|
||||
|
||||
.rbc-day-bg.rbc-off-range-bg {
|
||||
@apply dark:bg-dark-800 !important;
|
||||
}
|
||||
.rbc-current-time-indicator{
|
||||
@apply h-1 !important;
|
||||
}
|
||||
.rbc-today {
|
||||
@apply dark:bg-dark-600/40 !important;
|
||||
.legal-governance-calendar .rbc-btn-group button:last-child {
|
||||
border-right: 0 !important;
|
||||
}
|
||||
|
||||
.rbc-day-bg.rbc-selected-cell {
|
||||
@apply dark:bg-dark-500 !important;
|
||||
.legal-governance-calendar .rbc-btn-group button:hover,
|
||||
.legal-governance-calendar .rbc-btn-group button:focus {
|
||||
background: #FBF8F1 !important;
|
||||
color: #7A5B13 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.legal-governance-calendar .rbc-btn-group button.rbc-active,
|
||||
.legal-governance-calendar .rbc-btn-group button.rbc-active:hover,
|
||||
.legal-governance-calendar .rbc-btn-group button.rbc-active:focus {
|
||||
background: #0E1A2B !important;
|
||||
color: #FFFFFF !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.legal-governance-calendar .rbc-month-view,
|
||||
.legal-governance-calendar .rbc-time-view,
|
||||
.legal-governance-calendar .rbc-agenda-view {
|
||||
border-color: #DDD5C7;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.legal-governance-calendar .rbc-header {
|
||||
min-height: 38px;
|
||||
border-color: #E5E0D6;
|
||||
background: #FBF8F1;
|
||||
color: #7A5B13;
|
||||
font-size: 0.76rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.12em;
|
||||
line-height: 38px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.legal-governance-calendar .rbc-month-row,
|
||||
.legal-governance-calendar .rbc-day-bg,
|
||||
.legal-governance-calendar .rbc-date-cell,
|
||||
.legal-governance-calendar .rbc-timeslot-group,
|
||||
.legal-governance-calendar .rbc-time-content,
|
||||
.legal-governance-calendar .rbc-time-header-content,
|
||||
.legal-governance-calendar .rbc-time-header.rbc-overflowing {
|
||||
border-color: #E5E0D6;
|
||||
}
|
||||
|
||||
.legal-governance-calendar .rbc-month-row {
|
||||
min-height: 104px;
|
||||
}
|
||||
|
||||
.legal-governance-calendar .rbc-date-cell {
|
||||
padding: 6px 8px;
|
||||
color: #0E1A2B;
|
||||
font-size: 0.86rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.legal-governance-calendar .rbc-off-range {
|
||||
color: #A59B8B;
|
||||
}
|
||||
|
||||
.legal-governance-calendar .rbc-off-range-bg {
|
||||
background: #F7F5EF !important;
|
||||
}
|
||||
|
||||
.legal-governance-calendar .rbc-today {
|
||||
background: #FFF8DF !important;
|
||||
}
|
||||
|
||||
.legal-governance-calendar .rbc-selected-cell {
|
||||
background: #F1E7C7 !important;
|
||||
}
|
||||
|
||||
.legal-governance-calendar .rbc-event {
|
||||
min-height: 28px;
|
||||
border: 0 !important;
|
||||
border-left: 4px solid #D8B75E !important;
|
||||
border-radius: 7px;
|
||||
background: #0E1A2B !important;
|
||||
color: #FFFFFF !important;
|
||||
padding: 4px 8px !important;
|
||||
box-shadow: 0 6px 14px rgba(14, 26, 43, 0.14);
|
||||
}
|
||||
|
||||
.legal-governance-calendar .rbc-event:focus,
|
||||
.legal-governance-calendar .rbc-event.rbc-selected {
|
||||
outline: 2px solid rgba(216, 183, 94, 0.45);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.legal-governance-calendar .rbc-event-content {
|
||||
font-size: 0.82rem;
|
||||
font-weight: 650;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.legal-governance-calendar .rbc-show-more {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 24px;
|
||||
border-radius: 999px;
|
||||
background: #FFF8DF !important;
|
||||
color: #7A5B13 !important;
|
||||
font-size: 0.76rem;
|
||||
font-weight: 800;
|
||||
padding: 2px 8px;
|
||||
}
|
||||
|
||||
.legal-governance-calendar .rbc-current-time-indicator {
|
||||
height: 2px !important;
|
||||
background: #D8B75E;
|
||||
}
|
||||
|
||||
.legal-governance-calendar .rbc-agenda-table {
|
||||
border-color: #DDD5C7;
|
||||
}
|
||||
|
||||
.legal-governance-calendar .rbc-agenda-table th {
|
||||
background: #FBF8F1;
|
||||
color: #7A5B13;
|
||||
font-size: 0.76rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.legal-governance-calendar .rbc-agenda-table td {
|
||||
border-color: #E5E0D6;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.legal-governance-calendar .rbc-time-gutter,
|
||||
.legal-governance-calendar .rbc-label {
|
||||
color: #6B7280;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.dark .legal-governance-calendar {
|
||||
color: #F8FAFC;
|
||||
}
|
||||
|
||||
.dark .legal-governance-calendar .rbc-calendar {
|
||||
border-color: #273447;
|
||||
background: #111827;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.dark .legal-governance-calendar .rbc-toolbar-label {
|
||||
color: #F8FAFC;
|
||||
}
|
||||
|
||||
.dark .legal-governance-calendar .rbc-btn-group {
|
||||
border-color: #273447;
|
||||
background: #0F172A;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.dark .legal-governance-calendar .rbc-btn-group button {
|
||||
border-right-color: #273447 !important;
|
||||
background: #0F172A !important;
|
||||
color: #CBD5E1 !important;
|
||||
}
|
||||
|
||||
.dark .legal-governance-calendar .rbc-btn-group button:hover,
|
||||
.dark .legal-governance-calendar .rbc-btn-group button:focus {
|
||||
background: #172033 !important;
|
||||
color: #F8FAFC !important;
|
||||
}
|
||||
|
||||
.dark .legal-governance-calendar .rbc-btn-group button.rbc-active,
|
||||
.dark .legal-governance-calendar .rbc-btn-group button.rbc-active:hover,
|
||||
.dark .legal-governance-calendar .rbc-btn-group button.rbc-active:focus {
|
||||
background: #D8B75E !important;
|
||||
color: #08111F !important;
|
||||
}
|
||||
|
||||
.dark .legal-governance-calendar .rbc-month-view,
|
||||
.dark .legal-governance-calendar .rbc-time-view,
|
||||
.dark .legal-governance-calendar .rbc-agenda-view {
|
||||
border-color: #273447;
|
||||
}
|
||||
|
||||
.dark .legal-governance-calendar .rbc-header {
|
||||
border-color: #273447;
|
||||
background: #0F172A;
|
||||
color: #D8B75E;
|
||||
}
|
||||
|
||||
.dark .legal-governance-calendar .rbc-month-row,
|
||||
.dark .legal-governance-calendar .rbc-day-bg,
|
||||
.dark .legal-governance-calendar .rbc-date-cell,
|
||||
.dark .legal-governance-calendar .rbc-timeslot-group,
|
||||
.dark .legal-governance-calendar .rbc-time-content,
|
||||
.dark .legal-governance-calendar .rbc-time-header-content,
|
||||
.dark .legal-governance-calendar .rbc-time-header.rbc-overflowing {
|
||||
border-color: #273447;
|
||||
}
|
||||
|
||||
.dark .legal-governance-calendar .rbc-date-cell {
|
||||
color: #E2E8F0;
|
||||
}
|
||||
|
||||
.dark .legal-governance-calendar .rbc-off-range {
|
||||
color: #64748B;
|
||||
}
|
||||
|
||||
.dark .legal-governance-calendar .rbc-off-range-bg {
|
||||
background: #0B1120 !important;
|
||||
}
|
||||
|
||||
.dark .legal-governance-calendar .rbc-today {
|
||||
background: rgba(216, 183, 94, 0.12) !important;
|
||||
}
|
||||
|
||||
.dark .legal-governance-calendar .rbc-selected-cell {
|
||||
background: rgba(216, 183, 94, 0.18) !important;
|
||||
}
|
||||
|
||||
.dark .legal-governance-calendar .rbc-event {
|
||||
border-left-color: #F2C95C !important;
|
||||
background: #D8B75E !important;
|
||||
color: #08111F !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.dark .legal-governance-calendar .rbc-event:focus,
|
||||
.dark .legal-governance-calendar .rbc-event.rbc-selected {
|
||||
outline-color: rgba(248, 250, 252, 0.5);
|
||||
}
|
||||
|
||||
.dark .legal-governance-calendar .rbc-show-more {
|
||||
background: rgba(216, 183, 94, 0.14) !important;
|
||||
color: #F2C95C !important;
|
||||
}
|
||||
|
||||
.dark .legal-governance-calendar .rbc-agenda-table {
|
||||
border-color: #273447;
|
||||
}
|
||||
|
||||
.dark .legal-governance-calendar .rbc-agenda-table th {
|
||||
background: #0F172A;
|
||||
color: #D8B75E;
|
||||
}
|
||||
|
||||
.dark .legal-governance-calendar .rbc-agenda-table td {
|
||||
border-color: #273447;
|
||||
color: #CBD5E1;
|
||||
}
|
||||
|
||||
.dark .legal-governance-calendar .rbc-time-gutter,
|
||||
.dark .legal-governance-calendar .rbc-label {
|
||||
color: #94A3B8;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -72,6 +72,33 @@
|
||||
|
||||
.datagrid--table {
|
||||
@apply rounded-xl border-none !important;
|
||||
--legal-grid-accent: #7A5B13;
|
||||
--legal-grid-bg: #FFFFFF;
|
||||
--legal-grid-border: #DDD5C7;
|
||||
--legal-grid-border-muted: #E5E0D6;
|
||||
--legal-grid-cell-text: #374151;
|
||||
--legal-grid-checkbox: #8B7A61;
|
||||
--legal-grid-footer-bg: #FBF8F1;
|
||||
--legal-grid-header-bg: #FBF8F1;
|
||||
--legal-grid-header-text: #0E1A2B;
|
||||
--legal-grid-hover-bg: #FFF8E8;
|
||||
--legal-grid-selected-bg: #FFF3C9;
|
||||
--legal-grid-selected-hover-bg: #FFEDB1;
|
||||
}
|
||||
|
||||
.dark .datagrid--table {
|
||||
--legal-grid-accent: #D8B75E;
|
||||
--legal-grid-bg: #111827;
|
||||
--legal-grid-border: #273447;
|
||||
--legal-grid-border-muted: #1F2A3A;
|
||||
--legal-grid-cell-text: #CBD5E1;
|
||||
--legal-grid-checkbox: #94A3B8;
|
||||
--legal-grid-footer-bg: #0F172A;
|
||||
--legal-grid-header-bg: #0F172A;
|
||||
--legal-grid-header-text: #F8FAFC;
|
||||
--legal-grid-hover-bg: #172033;
|
||||
--legal-grid-selected-bg: rgba(216, 183, 94, 0.18);
|
||||
--legal-grid-selected-hover-bg: rgba(216, 183, 94, 0.24);
|
||||
}
|
||||
|
||||
.datagrid--header {
|
||||
@ -95,7 +122,7 @@
|
||||
}
|
||||
|
||||
.datagrid--row {
|
||||
@apply even:bg-[#F7F5EF] odd:bg-white dark:even:bg-[#1B1D22] dark:odd:bg-dark-900 !important;
|
||||
@apply even:bg-[#F7F5EF] odd:bg-white dark:even:bg-[#0F172A] dark:odd:bg-[#111827] !important;
|
||||
}
|
||||
|
||||
.datagrid--table .MuiDataGrid-cell,
|
||||
@ -119,7 +146,7 @@
|
||||
}
|
||||
|
||||
.datagrid--table .MuiDataGrid-cellContent {
|
||||
color: #374151;
|
||||
color: var(--legal-grid-cell-text);
|
||||
}
|
||||
|
||||
|
||||
@ -128,7 +155,7 @@
|
||||
}
|
||||
|
||||
.datagrid--table .MuiTablePagination-root .MuiButtonBase-root:disabled {
|
||||
@apply dark:text-dark-700;
|
||||
@apply dark:text-slate-600;
|
||||
}
|
||||
|
||||
.datagrid--table .MuiTablePagination-root .MuiButtonBase-root:hover {
|
||||
@ -136,6 +163,6 @@
|
||||
}
|
||||
|
||||
.datagrid--table .MuiButton-colorInherit {
|
||||
@apply text-blue-600 dark:text-dark-700 !important;
|
||||
@apply text-blue-600 dark:text-slate-300 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -101,3 +101,74 @@
|
||||
@apply text-pavitra-800;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
.dark {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
.dark .bg-white:not([class*="!bg-"]) {
|
||||
background-color: #111827 !important;
|
||||
}
|
||||
|
||||
.dark .bg-slate-50,
|
||||
.dark .bg-gray-50,
|
||||
.dark .bg-gray-100,
|
||||
.dark [class*="bg-slate-50/"],
|
||||
.dark [class*="bg-[#FBF8F1]"],
|
||||
.dark [class*="bg-[#F6F3EC]"],
|
||||
.dark [class*="bg-[#F7F5EF]"] {
|
||||
background-color: #0F172A !important;
|
||||
}
|
||||
|
||||
.dark [class*="bg-[#F1E7C7]"],
|
||||
.dark [class*="bg-[#FFF8DF]"],
|
||||
.dark [class*="bg-[#EFF6FF]"] {
|
||||
background-color: rgba(216, 183, 94, 0.14) !important;
|
||||
}
|
||||
|
||||
.dark .text-black,
|
||||
.dark .text-slate-950,
|
||||
.dark .text-slate-900,
|
||||
.dark [class*="text-[#0E1A2B]"],
|
||||
.dark [class*="text-[#111827]"] {
|
||||
color: #F8FAFC !important;
|
||||
}
|
||||
|
||||
.dark .text-slate-700,
|
||||
.dark .text-slate-600,
|
||||
.dark .text-slate-500,
|
||||
.dark .text-gray-500,
|
||||
.dark [class*="text-[#5B6472]"],
|
||||
.dark [class*="text-[#6B7280]"] {
|
||||
color: #CBD5E1 !important;
|
||||
}
|
||||
|
||||
.dark .text-slate-400,
|
||||
.dark [class*="text-[#8B7A61]"],
|
||||
.dark [class*="text-[#7A5B13]"],
|
||||
.dark [class*="text-[#1D4ED8]"] {
|
||||
color: #D8B75E !important;
|
||||
}
|
||||
|
||||
.dark [class*="border-[#DDD5C7]"],
|
||||
.dark [class*="border-[#E5E0D6]"],
|
||||
.dark [class*="border-[#D8D0C2]"],
|
||||
.dark [class*="border-[#D6E0F5]"],
|
||||
.dark [class*="border-[#DBEAFE]"],
|
||||
.dark .border-gray-300,
|
||||
.dark .border-stone-300,
|
||||
.dark .border-slate-200,
|
||||
.dark .border-slate-300 {
|
||||
border-color: #273447 !important;
|
||||
}
|
||||
|
||||
.dark .divide-stone-300 > :not([hidden]) ~ :not([hidden]) {
|
||||
border-color: #273447 !important;
|
||||
}
|
||||
|
||||
.dark [class*="shadow-[#83755E]/10"],
|
||||
.dark [class*="shadow-slate-200/50"] {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -102,14 +102,14 @@ export default function LayoutAuthenticated({
|
||||
|
||||
if (!isAuthReady) {
|
||||
return (
|
||||
<div className={`${darkMode ? 'dark' : ''} min-h-screen bg-[#F6F3EC] text-[#0E1A2B]`}>
|
||||
<div className={`${darkMode ? 'dark' : ''} min-h-screen bg-[#F6F3EC] text-[#0E1A2B] dark:bg-[#08111F] dark:text-slate-50`}>
|
||||
<div className='flex min-h-screen items-center justify-center px-5'>
|
||||
<div className='w-full max-w-md rounded-xl border border-[#DDD5C7] bg-white p-6 text-center shadow-xl shadow-[#83755E]/10'>
|
||||
<div className='mx-auto flex h-12 w-12 items-center justify-center rounded-md bg-[#0E1A2B] text-[#D8B75E]'>
|
||||
<div className='w-full max-w-md rounded-xl border border-[#DDD5C7] bg-white p-6 text-center shadow-xl shadow-[#83755E]/10 dark:border-[#273447] dark:bg-[#111827] dark:shadow-none'>
|
||||
<div className='mx-auto flex h-12 w-12 items-center justify-center rounded-md bg-[#0E1A2B] text-[#D8B75E] dark:bg-[#D8B75E] dark:text-[#08111F]'>
|
||||
<BaseIcon path={mdiShieldCheckOutline} size={26} />
|
||||
</div>
|
||||
<h1 className='mt-5 text-xl font-semibold text-[#0E1A2B]'>Checking secure workspace access</h1>
|
||||
<p className='mt-3 text-sm leading-6 text-[#6B7280]'>
|
||||
<h1 className='mt-5 text-xl font-semibold text-[#0E1A2B] dark:text-slate-50'>Checking secure workspace access</h1>
|
||||
<p className='mt-3 text-sm leading-6 text-[#6B7280] dark:text-slate-400'>
|
||||
We are verifying your session before opening the legal AI governance workspace.
|
||||
</p>
|
||||
</div>
|
||||
@ -123,7 +123,7 @@ export default function LayoutAuthenticated({
|
||||
<div
|
||||
className={`${layoutAsidePadding} ${
|
||||
isAsideMobileExpanded ? 'ml-80 lg:ml-0' : ''
|
||||
} pt-14 min-h-screen w-screen transition-position lg:w-auto ${bgColor} dark:bg-dark-800 dark:text-slate-100`}
|
||||
} pt-14 min-h-screen w-screen transition-position lg:w-auto ${bgColor} dark:bg-[#08111F] dark:text-slate-100`}
|
||||
>
|
||||
<NavBar
|
||||
menu={menuNavBar}
|
||||
@ -141,7 +141,7 @@ export default function LayoutAuthenticated({
|
||||
>
|
||||
<BaseIcon path={mdiMenu} size="24" />
|
||||
</NavBarItemPlain>
|
||||
<div className='hidden items-center gap-2 px-4 text-xs font-semibold uppercase tracking-[0.14em] text-[#7A5B13] 2xl:flex'>
|
||||
<div className='hidden items-center gap-2 px-4 text-xs font-semibold uppercase tracking-[0.14em] text-[#7A5B13] dark:text-[#D8B75E] 2xl:flex'>
|
||||
<span className='h-2 w-2 rounded-full bg-emerald-500' />
|
||||
<span>Audit trail active</span>
|
||||
</div>
|
||||
|
||||
@ -25,6 +25,7 @@ const Ai_use_casesTablesPage = () => {
|
||||
const [csvFile, setCsvFile] = useState<File | null>(null);
|
||||
const [isModalActive, setIsModalActive] = useState(false);
|
||||
const [showTableView, setShowTableView] = useState(false);
|
||||
const actionButtonClass = 'min-h-[44px] w-full justify-center px-4 text-sm font-semibold';
|
||||
|
||||
|
||||
const { currentUser } = useAppSelector((state) => state.auth);
|
||||
@ -121,29 +122,54 @@ const Ai_use_casesTablesPage = () => {
|
||||
{ label: 'Evidence', value: 'ROI tracked', helper: 'Hours saved, notes, and approvals become an audit trail.' },
|
||||
]}
|
||||
>
|
||||
{hasCreatePermission && <BaseButton href={'/ai_use_cases/ai_use_cases-new'} color='info' label='New AI intake'/>}
|
||||
<BaseButton href={'/governance-workbench'} color='whiteDark' label='Governance workbench'/>
|
||||
<BaseButton
|
||||
color='info'
|
||||
label='Add filter'
|
||||
onClick={addFilter}
|
||||
/>
|
||||
<BaseButton color='whiteDark' label='Export CSV' onClick={getAi_use_casesCSV} />
|
||||
|
||||
<div className='grid w-full grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3'>
|
||||
{hasCreatePermission && (
|
||||
<BaseButton
|
||||
color='whiteDark'
|
||||
label='Upload CSV'
|
||||
onClick={() => setIsModalActive(true)}
|
||||
href={'/ai_use_cases/ai_use_cases-new'}
|
||||
color='info'
|
||||
label='New AI intake'
|
||||
className={actionButtonClass}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className='md:inline-flex items-center ms-auto'>
|
||||
<div id='delete-rows-button'></div>
|
||||
</div>
|
||||
|
||||
<BaseButton href={'/ai_use_cases/ai_use_cases-table'} color='whiteDark' label='Table view'/>
|
||||
|
||||
<BaseButton
|
||||
href={'/governance-workbench'}
|
||||
color='info'
|
||||
outline
|
||||
label='Governance workbench'
|
||||
className={actionButtonClass}
|
||||
/>
|
||||
<BaseButton
|
||||
color='info'
|
||||
outline
|
||||
label='Add filter'
|
||||
onClick={addFilter}
|
||||
className={actionButtonClass}
|
||||
/>
|
||||
<BaseButton
|
||||
color='info'
|
||||
outline
|
||||
label='Export CSV'
|
||||
onClick={getAi_use_casesCSV}
|
||||
className={actionButtonClass}
|
||||
/>
|
||||
{hasCreatePermission && (
|
||||
<BaseButton
|
||||
color='info'
|
||||
outline
|
||||
label='Upload CSV'
|
||||
onClick={() => setIsModalActive(true)}
|
||||
className={actionButtonClass}
|
||||
/>
|
||||
)}
|
||||
<div id='delete-rows-button' className='contents'></div>
|
||||
<BaseButton
|
||||
href={'/ai_use_cases/ai_use_cases-table'}
|
||||
color='info'
|
||||
outline
|
||||
label='Table view'
|
||||
className={actionButtonClass}
|
||||
/>
|
||||
</div>
|
||||
</LegalOpsPageIntro>
|
||||
|
||||
<TableAi_use_cases
|
||||
|
||||
@ -6,11 +6,11 @@ import CardBox from '../../components/CardBox'
|
||||
import LayoutAuthenticated from '../../layouts/Authenticated'
|
||||
import SectionMain from '../../components/SectionMain'
|
||||
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
|
||||
import LegalOpsPageIntro from '../../components/LegalOpsPageIntro'
|
||||
import { getPageTitle } from '../../config'
|
||||
import TableAi_use_cases from '../../components/Ai_use_cases/TableAi_use_cases'
|
||||
import BaseButton from '../../components/BaseButton'
|
||||
import axios from "axios";
|
||||
import Link from "next/link";
|
||||
import {useAppDispatch, useAppSelector} from "../../stores/hooks";
|
||||
import CardBoxModal from "../../components/CardBoxModal";
|
||||
import DragDropFilePicker from "../../components/DragDropFilePicker";
|
||||
@ -26,6 +26,7 @@ const Ai_use_casesTablesPage = () => {
|
||||
const [csvFile, setCsvFile] = useState<File | null>(null);
|
||||
const [isModalActive, setIsModalActive] = useState(false);
|
||||
const [showTableView, setShowTableView] = useState(false);
|
||||
const actionButtonClass = 'min-h-[44px] w-full justify-center px-4 text-sm font-semibold';
|
||||
|
||||
|
||||
const { currentUser } = useAppSelector((state) => state.auth);
|
||||
@ -34,33 +35,33 @@ const Ai_use_casesTablesPage = () => {
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
|
||||
const [filters] = useState([{label: 'UseCaseTitle', title: 'title'},{label: 'Description', title: 'description'},{label: 'BusinessGoal', title: 'business_goal'},{label: 'ReviewNotes', title: 'review_notes'},
|
||||
const [filters] = useState([{label: 'Use case title', title: 'title'},{label: 'Description', title: 'description'},{label: 'Business goal', title: 'business_goal'},{label: 'Review notes', title: 'review_notes'},
|
||||
|
||||
{label: 'ExpectedHoursSaved', title: 'expected_hours_saved', number: 'true'},
|
||||
{label: 'SubmittedAt', title: 'submitted_at', date: 'true'},{label: 'ApprovedAt', title: 'approved_at', date: 'true'},
|
||||
{label: 'Expected hours saved', title: 'expected_hours_saved', number: 'true'},
|
||||
{label: 'Submitted at', title: 'submitted_at', date: 'true'},{label: 'Approved at', title: 'approved_at', date: 'true'},
|
||||
|
||||
|
||||
{label: 'Owner', title: 'owner'},
|
||||
|
||||
|
||||
|
||||
{label: 'PracticeGroup', title: 'practice_group'},
|
||||
{label: 'Practice group', title: 'practice_group'},
|
||||
|
||||
|
||||
|
||||
{label: 'MatterType', title: 'matter_type'},
|
||||
{label: 'Matter type', title: 'matter_type'},
|
||||
|
||||
|
||||
|
||||
{label: 'DataClassification', title: 'data_classification'},
|
||||
{label: 'Data classification', title: 'data_classification'},
|
||||
|
||||
|
||||
|
||||
{label: 'IntendedAITool', title: 'intended_tool'},
|
||||
{label: 'Intended AI tool', title: 'intended_tool'},
|
||||
|
||||
|
||||
|
||||
{label: 'Status', title: 'status', type: 'enum', options: ['draft','submitted','risk_review','security_review','ethics_review','approved','rejected','needs_changes','retired']},{label: 'RiskLevel', title: 'risk_level', type: 'enum', options: ['low','medium','high','critical']},
|
||||
{label: 'Status', title: 'status', type: 'enum', options: ['draft','submitted','risk_review','security_review','ethics_review','approved','rejected','needs_changes','retired']},{label: 'Risk level', title: 'risk_level', type: 'enum', options: ['low','medium','high','critical']},
|
||||
]);
|
||||
|
||||
const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_AI_USE_CASES');
|
||||
@ -106,41 +107,64 @@ const Ai_use_casesTablesPage = () => {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>{getPageTitle('Ai_use_cases')}</title>
|
||||
<title>{getPageTitle('AI request register table')}</title>
|
||||
</Head>
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Ai_use_cases" main>
|
||||
<SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="AI request register table" main>
|
||||
{''}
|
||||
</SectionTitleLineWithButton>
|
||||
<CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
|
||||
|
||||
{hasCreatePermission && <BaseButton className={'mr-3'} href={'/ai_use_cases/ai_use_cases-new'} color='info' label='New Item'/>}
|
||||
|
||||
<BaseButton
|
||||
className={'mr-3'}
|
||||
color='info'
|
||||
label='Filter'
|
||||
onClick={addFilter}
|
||||
/>
|
||||
<BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getAi_use_casesCSV} />
|
||||
|
||||
<LegalOpsPageIntro
|
||||
eyebrow='AI governance intake'
|
||||
title='Review proposed AI workflows in table view'
|
||||
description='Use the table when you need dense scanning, filtering, CSV review, or quick edits across the AI request register.'
|
||||
metrics={[
|
||||
{ label: 'View mode', value: 'Table', helper: 'Best for bulk review and governance cleanup.' },
|
||||
{ label: 'Review model', value: 'Human approval', helper: 'Partner, GC, security, and ethics review stay visible.' },
|
||||
{ label: 'Evidence', value: 'ROI tracked', helper: 'Hours saved, notes, and approvals become an audit trail.' },
|
||||
]}
|
||||
>
|
||||
<div className='grid w-full grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3'>
|
||||
{hasCreatePermission && (
|
||||
<BaseButton
|
||||
href={'/ai_use_cases/ai_use_cases-new'}
|
||||
color='info'
|
||||
label='Upload CSV'
|
||||
onClick={() => setIsModalActive(true)}
|
||||
label='New AI intake'
|
||||
className={actionButtonClass}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className='md:inline-flex items-center ms-auto'>
|
||||
<div id='delete-rows-button'></div>
|
||||
|
||||
<Link href={'/ai_use_cases/ai_use_cases-list'}>
|
||||
Back to <span className='capitalize'>kanban</span>
|
||||
</Link>
|
||||
|
||||
<BaseButton
|
||||
color='info'
|
||||
outline
|
||||
label='Add filter'
|
||||
onClick={addFilter}
|
||||
className={actionButtonClass}
|
||||
/>
|
||||
<BaseButton
|
||||
color='info'
|
||||
outline
|
||||
label='Export CSV'
|
||||
onClick={getAi_use_casesCSV}
|
||||
className={actionButtonClass}
|
||||
/>
|
||||
{hasCreatePermission && (
|
||||
<BaseButton
|
||||
color='info'
|
||||
outline
|
||||
label='Upload CSV'
|
||||
onClick={() => setIsModalActive(true)}
|
||||
className={actionButtonClass}
|
||||
/>
|
||||
)}
|
||||
<div id='delete-rows-button' className='contents'></div>
|
||||
<BaseButton
|
||||
href={'/ai_use_cases/ai_use_cases-list'}
|
||||
color='info'
|
||||
outline
|
||||
label='Card view'
|
||||
className={actionButtonClass}
|
||||
/>
|
||||
</div>
|
||||
</CardBox>
|
||||
</LegalOpsPageIntro>
|
||||
<CardBox className="mb-6" hasTable>
|
||||
<TableAi_use_cases
|
||||
filterItems={filterItems}
|
||||
|
||||
@ -25,29 +25,29 @@ interface StyleObject {
|
||||
}
|
||||
|
||||
export const white: StyleObject = {
|
||||
aside: 'bg-[#FBF8F1] text-[#374151] dark:text-white',
|
||||
aside: 'bg-[#FBF8F1] text-[#374151] dark:bg-[#0B1120] dark:text-slate-100',
|
||||
asideScrollbars: 'aside-scrollbars-light',
|
||||
asideBrand: '',
|
||||
asideMenuItem: 'text-[#374151] hover:bg-[#F1E7C7]/70 hover:text-[#0E1A2B] dark:text-dark-500 dark:hover:text-white dark:hover:bg-dark-800',
|
||||
asideMenuItemActive: 'font-semibold text-[#0E1A2B] dark:text-white',
|
||||
asideMenuItem: 'text-[#374151] hover:bg-[#F1E7C7]/70 hover:text-[#0E1A2B] dark:text-slate-300 dark:hover:text-white dark:hover:bg-[#1E293B]',
|
||||
asideMenuItemActive: 'font-semibold text-[#0E1A2B] dark:bg-[#172033] dark:text-white',
|
||||
asideMenuDropdown: 'bg-transparent',
|
||||
navBarItemLabel: 'text-[#4B5563]',
|
||||
navBarItemLabelHover: 'hover:text-[#0E1A2B]',
|
||||
navBarItemLabelActiveColor: 'text-[#0E1A2B]',
|
||||
overlay: 'from-[#F6F3EC] via-[#E9E1D2] to-[#F6F3EC]',
|
||||
activeLinkColor: 'bg-[#F1E7C7]',
|
||||
bgLayoutColor: 'bg-[#F6F3EC]',
|
||||
iconsColor: 'text-[#7A5B13]',
|
||||
cardsColor: 'bg-white',
|
||||
focusRingColor: 'focus:ring focus:ring-[#D8B75E]/35 focus:border-[#D8B75E] focus:outline-none border-[#C9BFAE] dark:focus:ring-[#D8B75E] dark:focus:border-[#D8B75E]',
|
||||
navBarItemLabel: 'text-[#4B5563] dark:text-slate-300',
|
||||
navBarItemLabelHover: 'hover:text-[#0E1A2B] dark:hover:text-white',
|
||||
navBarItemLabelActiveColor: 'text-[#0E1A2B] dark:text-white',
|
||||
overlay: 'from-[#F6F3EC] via-[#E9E1D2] to-[#F6F3EC] dark:from-[#08111F] dark:via-[#0F172A] dark:to-[#08111F]',
|
||||
activeLinkColor: 'bg-[#F1E7C7] dark:bg-[#1F2937]',
|
||||
bgLayoutColor: 'bg-[#F6F3EC] dark:bg-[#08111F]',
|
||||
iconsColor: 'text-[#7A5B13] dark:text-[#D8B75E]',
|
||||
cardsColor: 'bg-white dark:bg-[#111827]',
|
||||
focusRingColor: 'focus:ring focus:ring-[#D8B75E]/35 focus:border-[#D8B75E] focus:outline-none border-[#C9BFAE] dark:border-[#334155] dark:focus:ring-[#D8B75E]/35 dark:focus:border-[#D8B75E]',
|
||||
corners: 'rounded-lg',
|
||||
cardsStyle: 'bg-white border border-[#DDD5C7] shadow-sm shadow-[#83755E]/10',
|
||||
linkColor: 'text-[#7A5B13]',
|
||||
websiteHeder: 'border-b border-[#DDD5C7]',
|
||||
borders: 'border-[#DDD5C7]',
|
||||
shadow: 'shadow-sm shadow-[#83755E]/10',
|
||||
cardsStyle: 'bg-white border border-[#DDD5C7] shadow-sm shadow-[#83755E]/10 dark:bg-[#111827] dark:border-[#273447] dark:shadow-none',
|
||||
linkColor: 'text-[#7A5B13] dark:text-[#D8B75E]',
|
||||
websiteHeder: 'border-b border-[#DDD5C7] dark:border-[#273447]',
|
||||
borders: 'border-[#DDD5C7] dark:border-[#273447]',
|
||||
shadow: 'shadow-sm shadow-[#83755E]/10 dark:shadow-none',
|
||||
websiteSectionStyle: '',
|
||||
textSecondary: 'text-[#6B7280]',
|
||||
textSecondary: 'text-[#6B7280] dark:text-slate-400',
|
||||
}
|
||||
|
||||
|
||||
@ -57,8 +57,8 @@ export const white: StyleObject = {
|
||||
export const dataGridStyles = {
|
||||
'& .MuiDataGrid-cell': {
|
||||
alignItems: 'center',
|
||||
borderColor: '#E5E0D6',
|
||||
color: '#374151',
|
||||
borderColor: 'var(--legal-grid-border-muted)',
|
||||
color: 'var(--legal-grid-cell-text)',
|
||||
display: 'flex',
|
||||
fontSize: '0.9rem',
|
||||
lineHeight: 1.25,
|
||||
@ -68,7 +68,7 @@ export const dataGridStyles = {
|
||||
'& .MuiDataGrid-columnHeader': {
|
||||
minHeight: '58px !important',
|
||||
padding: '10px 18px',
|
||||
color: '#0E1A2B',
|
||||
color: 'var(--legal-grid-header-text)',
|
||||
fontWeight: 700,
|
||||
},
|
||||
'& .MuiDataGrid-columnHeaderCheckbox': {
|
||||
@ -79,11 +79,11 @@ export const dataGridStyles = {
|
||||
maxHeight: 'unset !important',
|
||||
borderStartStartRadius: 7,
|
||||
borderStartEndRadius: 7,
|
||||
backgroundColor: '#FBF8F1',
|
||||
borderColor: '#DDD5C7',
|
||||
backgroundColor: 'var(--legal-grid-header-bg)',
|
||||
borderColor: 'var(--legal-grid-border)',
|
||||
},
|
||||
'& .MuiDataGrid-columnHeaderTitle': {
|
||||
color: '#0E1A2B',
|
||||
color: 'var(--legal-grid-header-text)',
|
||||
fontSize: '0.72rem',
|
||||
fontWeight: 800,
|
||||
letterSpacing: '0.07em',
|
||||
@ -115,36 +115,36 @@ export const dataGridStyles = {
|
||||
paddingY: 0.5,
|
||||
borderEndStartRadius: 7,
|
||||
borderEndEndRadius: 7,
|
||||
borderColor: '#DDD5C7',
|
||||
backgroundColor: '#FBF8F1',
|
||||
borderColor: 'var(--legal-grid-border)',
|
||||
backgroundColor: 'var(--legal-grid-footer-bg)',
|
||||
minHeight: '60px',
|
||||
},
|
||||
'& .MuiDataGrid-root': {
|
||||
border: '1px solid #DDD5C7',
|
||||
border: '1px solid var(--legal-grid-border)',
|
||||
borderRadius: '12px',
|
||||
overflow: 'hidden',
|
||||
backgroundColor: '#FFFFFF',
|
||||
backgroundColor: 'var(--legal-grid-bg)',
|
||||
},
|
||||
'& .MuiDataGrid-row': {
|
||||
borderColor: '#E5E0D6',
|
||||
borderColor: 'var(--legal-grid-border-muted)',
|
||||
},
|
||||
'& .MuiDataGrid-row.Mui-selected': {
|
||||
backgroundColor: '#FFF3C9',
|
||||
backgroundColor: 'var(--legal-grid-selected-bg)',
|
||||
},
|
||||
'& .MuiDataGrid-row.Mui-selected:hover': {
|
||||
backgroundColor: '#FFEDB1',
|
||||
backgroundColor: 'var(--legal-grid-selected-hover-bg)',
|
||||
},
|
||||
'& .MuiDataGrid-row:hover': {
|
||||
backgroundColor: '#FFF8E8',
|
||||
backgroundColor: 'var(--legal-grid-hover-bg)',
|
||||
},
|
||||
'& .MuiDataGrid-iconButtonContainer .MuiIconButton-root': {
|
||||
color: '#7A5B13',
|
||||
color: 'var(--legal-grid-accent)',
|
||||
},
|
||||
'& .MuiCheckbox-root': {
|
||||
color: '#8B7A61',
|
||||
color: 'var(--legal-grid-checkbox)',
|
||||
},
|
||||
'& .MuiCheckbox-root.Mui-checked': {
|
||||
color: '#7A5B13',
|
||||
color: 'var(--legal-grid-accent)',
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user