feat: update UI dashboard page
This commit is contained in:
2nguyen
+45
-26
@@ -1,6 +1,25 @@
|
||||
@import 'tailwindcss';
|
||||
@import '@heroui/styles';
|
||||
|
||||
@theme {
|
||||
--color-app-bg: #f8fafc;
|
||||
--color-app-surface: #ffffff;
|
||||
--color-app-surface-muted: #f1f5f9;
|
||||
--color-app-border: #e2e8f0;
|
||||
--color-app-border-input: #cbd5e1;
|
||||
--color-app-text: #1e293b;
|
||||
--color-app-text-strong: #0f172a;
|
||||
--color-app-text-muted: #64748b;
|
||||
--color-app-primary: #1a73e8;
|
||||
--color-app-primary-dark: #1558b0;
|
||||
--color-app-primary-soft: #e8f1fd;
|
||||
--color-app-primary-contrast: #ffffff;
|
||||
--color-app-interactive-hover: #f1f5f9;
|
||||
--color-app-interactive-active: #e8f1fd;
|
||||
--color-app-focus: #1a73e8;
|
||||
--shadow-app-panel: 0 16px 42px rgb(0 0 0 / 5%);
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
display: grid;
|
||||
grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
|
||||
@@ -17,8 +36,8 @@
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
padding: 24px 16px;
|
||||
border-right: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
border-right: 1px solid var(--color-app-border);
|
||||
background: var(--color-app-surface);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -36,7 +55,7 @@
|
||||
place-items: center;
|
||||
border-radius: 8px;
|
||||
color: #ffffff;
|
||||
background: var(--primary);
|
||||
background: var(--color-app-primary);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
@@ -61,7 +80,7 @@
|
||||
|
||||
.sidebar__brand span {
|
||||
margin-top: 3px;
|
||||
color: var(--text-muted);
|
||||
color: var(--color-app-text-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@@ -71,10 +90,10 @@
|
||||
height: 36px;
|
||||
margin-bottom: 14px;
|
||||
place-items: center;
|
||||
border: 1px solid var(--border);
|
||||
border: 1px solid var(--color-app-border);
|
||||
border-radius: 8px;
|
||||
color: var(--text-muted);
|
||||
background: var(--surface);
|
||||
color: var(--color-app-text-muted);
|
||||
background: var(--color-app-surface);
|
||||
cursor: pointer;
|
||||
font-weight: 800;
|
||||
transition:
|
||||
@@ -84,14 +103,14 @@
|
||||
}
|
||||
|
||||
.sidebar__toggle:hover {
|
||||
color: var(--primary);
|
||||
border-color: var(--primary);
|
||||
background: var(--primary-soft);
|
||||
color: var(--color-app-primary);
|
||||
border-color: var(--color-app-primary);
|
||||
background: var(--color-app-primary-soft);
|
||||
}
|
||||
|
||||
.sidebar__toggle:focus-visible,
|
||||
.sidebar__link:focus-visible {
|
||||
outline: 2px solid var(--focus);
|
||||
outline: 2px solid var(--color-app-focus);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@@ -106,7 +125,7 @@
|
||||
min-height: 42px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
color: var(--text-muted);
|
||||
color: var(--color-app-text-muted);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
gap: 10px;
|
||||
@@ -123,20 +142,20 @@
|
||||
height: 28px;
|
||||
place-items: center;
|
||||
border-radius: 7px;
|
||||
color: var(--primary-dark);
|
||||
background: var(--primary-soft);
|
||||
color: var(--color-app-primary-dark);
|
||||
background: var(--color-app-primary-soft);
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.sidebar__link:hover {
|
||||
color: var(--text);
|
||||
background: var(--interactive-hover);
|
||||
color: var(--color-app-text);
|
||||
background: var(--color-app-interactive-hover);
|
||||
}
|
||||
|
||||
.sidebar__link--active {
|
||||
color: var(--primary);
|
||||
background: var(--interactive-active);
|
||||
color: var(--color-app-primary);
|
||||
background: var(--color-app-interactive-active);
|
||||
}
|
||||
|
||||
.app-shell--collapsed .sidebar {
|
||||
@@ -168,7 +187,7 @@
|
||||
|
||||
.main-content {
|
||||
min-width: 0;
|
||||
padding: 32px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
@@ -188,7 +207,7 @@
|
||||
.page-header p {
|
||||
max-width: 720px;
|
||||
margin: 8px 0 0;
|
||||
color: var(--text-muted);
|
||||
color: var(--color-app-text-muted);
|
||||
}
|
||||
|
||||
.stat-grid {
|
||||
@@ -199,10 +218,10 @@
|
||||
|
||||
.stat-card,
|
||||
.content-panel {
|
||||
border: 1px solid var(--border);
|
||||
border: 1px solid var(--color-app-border);
|
||||
border-radius: 8px;
|
||||
background: var(--surface);
|
||||
box-shadow: 0 16px 42px var(--shadow-color);
|
||||
background: var(--color-app-surface);
|
||||
box-shadow: var(--shadow-app-panel);
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
@@ -211,7 +230,7 @@
|
||||
|
||||
.stat-card span {
|
||||
display: block;
|
||||
color: var(--text-muted);
|
||||
color: var(--color-app-text-muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@@ -233,7 +252,7 @@
|
||||
|
||||
.content-panel p {
|
||||
margin: 8px 0 0;
|
||||
color: var(--text-muted);
|
||||
color: var(--color-app-text-muted);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
@@ -250,7 +269,7 @@
|
||||
height: auto;
|
||||
padding: 16px;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--color-app-border);
|
||||
}
|
||||
|
||||
.sidebar__brand {
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
import { Card, Button } from '@heroui/react';
|
||||
import { PencilIcon, EllipsisVerticalIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
const statusStyles = {
|
||||
Published: 'bg-green-100 text-green-700',
|
||||
Draft: 'bg-yellow-100 text-yellow-700',
|
||||
Archived: 'bg-gray-100 text-gray-600'
|
||||
};
|
||||
|
||||
function CourseCard({ course, image }) {
|
||||
const { code, title, description, status, lastUpdate } = course;
|
||||
|
||||
const formattedDate = new Date(lastUpdate).toLocaleDateString('en-GB', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric'
|
||||
});
|
||||
|
||||
return (
|
||||
<Card
|
||||
variant="default"
|
||||
className="w-full max-w-100 overflow-hidden rounded-lg border border-gray-300 bg-white shadow-none"
|
||||
>
|
||||
{/* Image */}
|
||||
<div className="relative h-48 overflow-hidden border-b border-gray-300">
|
||||
<img src={image} alt={title} className="h-full w-full object-cover" />
|
||||
|
||||
{/* Course code */}
|
||||
<div className="absolute left-4 top-4 rounded-sm border border-gray-300 bg-white px-3 py-1.5">
|
||||
<span className="text-lg font-semibold text-gray-800">{code}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<Card.Content className="px-5 py-5">
|
||||
<h3 className="mb-3 text-xl font-medium leading-tight text-gray-900">
|
||||
{title}
|
||||
</h3>
|
||||
|
||||
<p className="line-clamp-2 text-lg leading-8 text-gray-700">
|
||||
{description}
|
||||
</p>
|
||||
</Card.Content>
|
||||
|
||||
{/* Footer */}
|
||||
<Card.Footer className="mx-5 flex items-center justify-between border-t border-gray-300 px-0 py-5">
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className={`rounded-full px-2.5 py-1 text-sm font-medium ${
|
||||
statusStyles[status] ?? 'bg-gray-100 text-gray-600'
|
||||
}`}
|
||||
>
|
||||
{status}
|
||||
</span>
|
||||
|
||||
<span className="text-sm text-gray-600">Updated {formattedDate}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
isIconOnly
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
aria-label={`Edit ${title}`}
|
||||
>
|
||||
<PencilIcon className="h-5 w-5" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
isIconOnly
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
aria-label={`More actions for ${title}`}
|
||||
>
|
||||
<EllipsisVerticalIcon className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</Card.Footer>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default CourseCard;
|
||||
@@ -1,14 +0,0 @@
|
||||
function StatGrid({ items }) {
|
||||
return (
|
||||
<section className="stat-grid" aria-label="Metrics">
|
||||
{items.map((item) => (
|
||||
<article className="stat-card" key={item.label}>
|
||||
<span>{item.label}</span>
|
||||
<strong>{item.value}</strong>
|
||||
</article>
|
||||
))}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default StatGrid
|
||||
@@ -1,121 +0,0 @@
|
||||
export const colors = {
|
||||
// =========================
|
||||
// Brand
|
||||
// =========================
|
||||
primary: {
|
||||
main: '#1A73E8',
|
||||
light: '#E8F1FD',
|
||||
dark: '#1558B0',
|
||||
contrast: '#FFFFFF',
|
||||
},
|
||||
|
||||
// =========================
|
||||
// Text & Icon
|
||||
// =========================
|
||||
slate: {
|
||||
50: '#F8FAFC',
|
||||
100: '#F1F5F9',
|
||||
200: '#E2E8F0',
|
||||
300: '#CBD5E1',
|
||||
400: '#94A3B8',
|
||||
500: '#64748B',
|
||||
600: '#475569',
|
||||
700: '#334155',
|
||||
800: '#1E293B',
|
||||
900: '#0F172A',
|
||||
},
|
||||
|
||||
// =========================
|
||||
// Background
|
||||
// =========================
|
||||
background: {
|
||||
default: '#F8FAFC',
|
||||
surface: '#FFFFFF',
|
||||
muted: '#F1F5F9',
|
||||
},
|
||||
|
||||
// =========================
|
||||
// Border
|
||||
// =========================
|
||||
border: {
|
||||
default: '#E2E8F0',
|
||||
input: '#CBD5E1',
|
||||
focus: '#1A73E8',
|
||||
divider: '#E2E8F0',
|
||||
},
|
||||
|
||||
// =========================
|
||||
// Status
|
||||
// =========================
|
||||
status: {
|
||||
success: {
|
||||
main: '#16A34A',
|
||||
light: '#DCFCE7',
|
||||
dark: '#166534',
|
||||
},
|
||||
|
||||
warning: {
|
||||
main: '#D97706',
|
||||
light: '#FEF3C7',
|
||||
dark: '#92400E',
|
||||
},
|
||||
|
||||
error: {
|
||||
main: '#DC2626',
|
||||
light: '#FEE2E2',
|
||||
dark: '#991B1B',
|
||||
},
|
||||
|
||||
info: {
|
||||
main: '#2563EB',
|
||||
light: '#DBEAFE',
|
||||
dark: '#1E40AF',
|
||||
},
|
||||
|
||||
neutral: {
|
||||
main: '#64748B',
|
||||
light: '#F1F5F9',
|
||||
dark: '#475569',
|
||||
},
|
||||
},
|
||||
|
||||
// =========================
|
||||
// Interactive
|
||||
// =========================
|
||||
interactive: {
|
||||
hover: '#F1F5F9',
|
||||
active: '#E8F1FD',
|
||||
selected: '#E8F1FD',
|
||||
focus: '#1A73E8',
|
||||
disabled: '#CBD5E1',
|
||||
},
|
||||
|
||||
// =========================
|
||||
// Drag & Drop
|
||||
// =========================
|
||||
drag: {
|
||||
outline: '#1A73E8',
|
||||
background: '#FFFFFF',
|
||||
dropZone: '#1A73E8',
|
||||
dropZoneBackground: '#E8F1FD',
|
||||
},
|
||||
|
||||
// =========================
|
||||
// Overlay / Shadow
|
||||
// =========================
|
||||
overlay: {
|
||||
shadow: 'rgba(0, 0, 0, 0.05)',
|
||||
backdrop: 'rgba(15, 23, 42, 0.32)',
|
||||
},
|
||||
|
||||
// =========================
|
||||
// Common
|
||||
// =========================
|
||||
common: {
|
||||
white: '#FFFFFF',
|
||||
black: '#000000',
|
||||
transparent: 'transparent',
|
||||
},
|
||||
} as const;
|
||||
|
||||
export type Colors = typeof colors;
|
||||
@@ -1,26 +0,0 @@
|
||||
import { colors } from './color'
|
||||
|
||||
export const themeCssVariables = {
|
||||
'--bg': colors.background.default,
|
||||
'--surface': colors.background.surface,
|
||||
'--surface-muted': colors.background.muted,
|
||||
'--border': colors.border.default,
|
||||
'--border-input': colors.border.input,
|
||||
'--text': colors.slate[800],
|
||||
'--text-strong': colors.slate[900],
|
||||
'--text-muted': colors.slate[500],
|
||||
'--primary': colors.primary.main,
|
||||
'--primary-dark': colors.primary.dark,
|
||||
'--primary-soft': colors.primary.light,
|
||||
'--primary-contrast': colors.primary.contrast,
|
||||
'--interactive-hover': colors.interactive.hover,
|
||||
'--interactive-active': colors.interactive.active,
|
||||
'--focus': colors.interactive.focus,
|
||||
'--shadow-color': colors.overlay.shadow,
|
||||
}
|
||||
|
||||
export function applyThemeCssVariables() {
|
||||
Object.entries(themeCssVariables).forEach(([key, value]) => {
|
||||
document.documentElement.style.setProperty(key, value)
|
||||
})
|
||||
}
|
||||
+2
-17
@@ -1,27 +1,12 @@
|
||||
:root {
|
||||
--bg: #f6f7f9;
|
||||
--surface: #ffffff;
|
||||
--surface-muted: #f0f3f7;
|
||||
--border: #dfe3ea;
|
||||
--text: #1d2433;
|
||||
--text-muted: #667085;
|
||||
--primary: #2563eb;
|
||||
--primary-dark: #1d4ed8;
|
||||
--primary-soft: #e9f0ff;
|
||||
--primary-contrast: #ffffff;
|
||||
--interactive-hover: #f0f3f7;
|
||||
--interactive-active: #e9f0ff;
|
||||
--focus: #2563eb;
|
||||
--shadow: 0 16px 42px rgba(29, 36, 51, 0.08);
|
||||
--shadow-color: rgba(0, 0, 0, 0.05);
|
||||
--sidebar-width: 264px;
|
||||
--sidebar-collapsed-width: 88px;
|
||||
|
||||
font-family:
|
||||
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
|
||||
sans-serif;
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
color: var(--color-app-text);
|
||||
background: var(--color-app-bg);
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
@@ -2,9 +2,6 @@ import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.jsx'
|
||||
import { applyThemeCssVariables } from './config/theme.js'
|
||||
|
||||
applyThemeCssVariables()
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<StrictMode>
|
||||
|
||||
@@ -1,29 +1,54 @@
|
||||
import PageHeader from '../../components/PageHeader.jsx';
|
||||
import StatGrid from '../../components/StatGrid.jsx';
|
||||
import { Typography, SearchField, Separator } from '@heroui/react';
|
||||
import CourseCard from '../../components/CourseCard.jsx';
|
||||
import {
|
||||
Typography,
|
||||
SearchField,
|
||||
Separator,
|
||||
Button,
|
||||
Tabs
|
||||
} from '@heroui/react';
|
||||
import {
|
||||
BellIcon,
|
||||
QuestionMarkCircleIcon,
|
||||
UserCircleIcon
|
||||
UserCircleIcon,
|
||||
FunnelIcon,
|
||||
PlusIcon
|
||||
} from '@heroicons/react/16/solid';
|
||||
|
||||
const stats = [
|
||||
{ label: 'Khoa hoc dang mo', value: '24' },
|
||||
{ label: 'Hoc vien', value: '1,248' },
|
||||
{ label: 'Lop trong tuan', value: '18' },
|
||||
{ label: 'Ty le hoan thanh', value: '82%' }
|
||||
{
|
||||
code: 'LDR-101',
|
||||
title: 'Foundations of Modern Leadership',
|
||||
description:
|
||||
'An introductory course covering essential leadership principles for new managers.',
|
||||
status: 'Published',
|
||||
lastUpdate: '2026-08-19'
|
||||
},
|
||||
{
|
||||
code: 'TEC-204',
|
||||
title: 'Advanced Cloud Architecture Patterns',
|
||||
description:
|
||||
'Deep dive into scalable cloud infrastructure design and implementation strategies.',
|
||||
status: 'Draft',
|
||||
lastUpdate: '2026-08-19'
|
||||
},
|
||||
{
|
||||
code: 'CMP-099',
|
||||
title: '2022 Annual Compliance Review',
|
||||
description: 'Outdated compliance materials from the previous fiscal year.',
|
||||
status: 'Archived',
|
||||
lastUpdate: '2026-08-19'
|
||||
}
|
||||
];
|
||||
|
||||
const courseImage =
|
||||
'https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=800&q=80';
|
||||
|
||||
function DashboardPage() {
|
||||
return (
|
||||
<>
|
||||
{/* <PageHeader
|
||||
title="Tong quan"
|
||||
description="Theo doi nhanh tinh hinh dao tao va cac chi so LMS."
|
||||
/> */}
|
||||
<div className="mb-3 flex flex-row items-center justify-between">
|
||||
<SearchField name="search">
|
||||
<SearchField.Group className="w-[280px]">
|
||||
<SearchField.Group className="rounded-xl border border-gray-300 w-100">
|
||||
<SearchField.SearchIcon />
|
||||
|
||||
<SearchField.Input
|
||||
@@ -34,14 +59,15 @@ function DashboardPage() {
|
||||
<SearchField.ClearButton />
|
||||
</SearchField.Group>
|
||||
</SearchField>
|
||||
<div className="flex flex-row items-center gap-2">
|
||||
<div className="flex flex-row items-center gap-5">
|
||||
<BellIcon className="mr-1 inline h-6 w-6" />
|
||||
<QuestionMarkCircleIcon className="mr-1 inline h-6 w-6" />
|
||||
<UserCircleIcon className="mr-1 inline h-6 w-6" />
|
||||
</div>
|
||||
</div>
|
||||
<Separator className="my-4" />
|
||||
<div className="mb-4">
|
||||
<div className="mb-4 flex flex-row items-center justify-between">
|
||||
<div>
|
||||
<Typography variant="h3" className="mb-2">
|
||||
Course
|
||||
</Typography>
|
||||
@@ -49,7 +75,74 @@ function DashboardPage() {
|
||||
Manage and organize your learning content.
|
||||
</Typography>
|
||||
</div>
|
||||
<StatGrid items={stats} />
|
||||
<div className="flex flex-row item-center gap-2">
|
||||
<Button variant="outline" className="rounded-lg">
|
||||
<FunnelIcon />
|
||||
Filter
|
||||
</Button>
|
||||
<Button className="rounded-lg">
|
||||
<PlusIcon />
|
||||
New Course
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Separator className="my-4" />
|
||||
<div className="flex flex-row items-center justify-between my-3 bg-white rounded-md border p-3">
|
||||
<Tabs defaultSelectedKey="all" className="w-fit">
|
||||
<Tabs.ListContainer>
|
||||
<Tabs.List
|
||||
aria-label="Course status"
|
||||
className="gap-1 rounded-md bg-gray-100"
|
||||
>
|
||||
<Tabs.Tab
|
||||
id="all"
|
||||
className="h-7 rounded px-6 py-5 text-base font-normal text-gray-700"
|
||||
>
|
||||
All
|
||||
<Tabs.Indicator className="rounded bg-white shadow-sm" />
|
||||
</Tabs.Tab>
|
||||
|
||||
<Tabs.Tab
|
||||
id="draft"
|
||||
className="h-7 rounded px-6 py-5 text-base font-normal text-gray-500"
|
||||
>
|
||||
Draft
|
||||
<Tabs.Indicator className="rounded bg-white shadow-sm" />
|
||||
</Tabs.Tab>
|
||||
|
||||
<Tabs.Tab
|
||||
id="published"
|
||||
className="h-7 rounded px-6 py-5 text-base font-normal text-gray-500"
|
||||
>
|
||||
Published
|
||||
<Tabs.Indicator className="rounded bg-white shadow-sm" />
|
||||
</Tabs.Tab>
|
||||
|
||||
<Tabs.Tab
|
||||
id="archived"
|
||||
className="h-7 rounded px-6 py-5 text-base font-normal text-gray-500"
|
||||
>
|
||||
Archived
|
||||
<Tabs.Indicator className="rounded bg-white shadow-sm" />
|
||||
</Tabs.Tab>
|
||||
</Tabs.List>
|
||||
</Tabs.ListContainer>
|
||||
</Tabs>
|
||||
<SearchField name="search">
|
||||
<SearchField.Group className="rounded-xl border border-gray-300 w-100">
|
||||
<SearchField.SearchIcon />
|
||||
|
||||
<SearchField.Input placeholder="Search course by title or code..." />
|
||||
|
||||
<SearchField.ClearButton />
|
||||
</SearchField.Group>
|
||||
</SearchField>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-4">
|
||||
{stats.map((course) => (
|
||||
<CourseCard key={course.code} course={course} image={courseImage} />
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user