/Fahri-Hilm/DSS-SPK_KAJEK

Wiki directory

Browse AI-generated documentation for any repository.

Design System and Theming

Relevant source files

The following files were used as context for generating this wiki page:

The SPK Kajek application employs a modern, data-centric design system built to provide an engaging and intuitive user experience. The aesthetic is characterized by a "soft dark theme" with glassmorphism effects, interactive animations, and a clear visual hierarchy, making complex data analysis more approachable. The system is primarily implemented using React, TypeScript, and Tailwind CSS, with Framer Motion handling animations.

The design prioritizes responsiveness, ensuring an optimal viewing experience across devices from mobile phones to large desktops. The core principles include consistency in color and spacing, clear user feedback through micro-interactions, and high performance with smooth animations and transitions.

Sources: README.md:12-22, DASHBOARD_README.md:5-8, SUMMARY.md:32-35, UI_UX_UPGRADE.md:50-57

Core Technologies

The frontend's visual identity is built upon a specific set of technologies that work together to create the final user interface.

Layer	Technology	Purpose
UI Framework	React 18 + TypeScript	Building interactive and type-safe user interface components.
Styling	Tailwind CSS 3.3	A utility-first CSS framework for rapid and consistent styling.
Animations	Framer Motion	Powering fluid animations and interactive micro-interactions.
Charts	Recharts	Rendering interactive and responsive data visualizations.
Icons	Lucide React	Providing a consistent and clean set of SVG icons.
3D Graphics	Three.js	Used for advanced 3D visualizations, such as 3D bar charts.

Sources: DASHBOARD_README.md:10-21, frontend/package.json:17-29, UI_UX_UPGRADE.md:60-67

Color System

The application utilizes a well-defined color palette designed for a dark theme, ensuring readability and visual comfort. The colors are defined as CSS variables and also extended in the Tailwind CSS configuration.

Main Application Palette

The primary palette is based on a dark background with vibrant accent colors for actions, states, and data visualization.

Category	Variable	Hex Code	Description
Background	`--dark-900`	`#0a0a0f`	Darkest background
	`--dark-800`	`#12121a`	Card backgrounds
	`--dark-700`	`#1a1a24`	Elevated surfaces
	`--dark-600`	`#22222e`	Borders & dividers
Text	`--text-primary`	`#ffffff`	Primary text
	`--text-secondary`	`#94a3b8`	Secondary/muted text
Accent	`--blue-500`	`#3b82f6`	Primary actions, highlights
	`--green-500`	`#22c55e`	Success states
	`--yellow-500`	`#eab308`	Warnings
	`--red-500`	`#ef4444`	Errors/Danger
	`--purple-500`	`#a855f7`	Highlights

Sources: DASHBOARD_README.md:25-42, README.md:211-219

Glassmorphism Effect

A key feature of the UI is the "glassmorphism" effect, which uses semi-transparent, blurred backgrounds to create a sense of depth.

Variable	Value	Purpose
`--glass-bg`	`rgba(255, 255, 255, 0.05)`	Background color for glass elements
`--glass-border`	`rgba(255, 255, 255, 0.1)`	Border color for glass elements
`--glass-blur`	`10px`	Backdrop blur value

Sources: DASHBOARD_README.md:44-48, SUMMARY.md:33-36

Tailwind CSS Configuration

The dark theme colors are integrated into Tailwind CSS through the tailwind.config.js file, allowing for their use as utility classes (e.g., bg-dark-900).

// frontend/tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
    content: [
        "./index.html",
        "./src/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {
            colors: {
                dark: {
                    900: '#1a1f2e', // Note: This differs from the CSS variable in docs
                    800: '#242b3d',
                    700: '#2d3548',
                    600: '#3d4556',
                }
            }
        },
    },
    plugins: [],
}

Source: frontend/tailwind.config.js:1-21

Static Login Page Palette (`code.html`)

The static code.html login page defines its own, slightly different color palette within an embedded <script> tag for Tailwind's JIT compiler. This demonstrates a self-contained styling approach for standalone pages.

Name	Hex Code	Description
`primary`	`#8B5CF6`	Main accent color (purple)
`background-dark`	`#0A0A0A`	Near-black background
`surface-dark`	`#151515`	Base for UI elements
`surface-accent`	`#262626`	Lighter dark for details
`text-light`	`#E0E0E0`	General text color
`accent-bright`	`#3B82F6`	Secondary accent (blue)

Source: code.html:14-25

Typography

The application uses the "Inter" font family for a clean and professional look, suitable for displaying data. A clear typographic scale is defined for headings and body text.

Class	Font Size	Font Weight
`.h1`	`2.25rem`	`700`
`.h2`	`1.875rem`	`700`
`.h3`	`1.5rem`	`600`
`.h4`	`1.25rem`	`600`
`.body-lg`	`1.125rem`	`N/A`
`.body`	`1rem`	`N/A`
`.body-sm`	`0.875rem`	`N/A`
`.caption`	`0.75rem`	`N/A`

Sources: DASHBOARD_README.md:52-65, README.md:222-224

Layout and Structure

The application's structure is managed by a main Layout.tsx component, which orchestrates the sidebar, header, and content areas.

This diagram shows the high-level component structure of the main layout.

Generating architecture diagram...

Sources: frontend/src/components/Layout.tsx, frontend/src/components/Sidebar.tsx

Responsive Design

The UI is fully responsive, adapting to different screen sizes using Tailwind CSS's default breakpoints.

Breakpoint	Min-width	Target Devices
`sm`	`640px`	Small devices
`md`	`768px`	Tablets
`lg`	`1024px`	Laptops
`xl`	`1280px`	Desktops
`2xl`	`1536px`	Large screens

Source: DASHBOARD_README.md:188-194

Spacing and Sizing

The design system adheres to a consistent spacing and border-radius scale, based on Tailwind's defaults, to maintain visual rhythm.

Unit	Value
`--space-4`	`1rem` (16px)
`--radius-md`	`0.5rem` (8px)
`--radius-lg`	`0.75rem` (12px)
`--radius-xl`	`1rem` (16px)

Sources: DASHBOARD_README.md:67-76, DASHBOARD_README.md:78-85

Animations and Micro-interactions

Animations are a core part of the user experience, implemented with Framer Motion and custom CSS.

Framer Motion

Framer Motion is used for component-level animations, such as fade-in effects on load and interactive hover/tap effects on buttons.

// Example from documentation
import { motion } from 'framer-motion';

// Fade in animation
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.5 }}
>
  Content
</motion.div>

Source: DASHBOARD_README.md:161-170

The Sidebar.tsx component makes extensive use of Framer Motion to animate its collapsed and expanded states, as well as the active tab indicator.

Source: frontend/src/components/Sidebar.tsx

Custom CSS Animations

Simple, reusable animations are defined in the global stylesheet (e.g., index.css).

/* Custom animations mentioned in DASHBOARD_README.md */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.animate-fade-in { animation: fade-in 0.5s ease-out; }
.animate-slide-up { animation: slide-up 0.5s ease-out; }

Source: DASHBOARD_README.md:173-185

Micro-interactions

Subtle animations are used to provide feedback for user actions, such as hover effects on cards and buttons.

Hover Lift: Cards and table rows lift with a shadow on hover.
Glow Effect: Buttons and focused inputs receive a colored glow.
Scale & Rotate: Icons and buttons scale or rotate on hover to indicate interactivity.

Source: UI_UX_UPGRADE.md:35-49

Theming

The application supports a theme-switching mechanism, although the provided files primarily detail a dark theme. The logic is handled by a React Context.

Theme Context

A ThemeContext.tsx is responsible for managing the current theme state (dark/light) and providing a function to toggle it. While the file is not provided, its usage is evident in Layout.tsx.

Source: DASHBOARD_README.md:133-134

Theme Toggle

The Layout.tsx component contains the UI element for switching themes. It uses the useTheme hook to get the current theme and the toggleTheme function.

This sequence diagram illustrates how a user action triggers a theme change.

Generating architecture diagram...

The button itself is styled to show a Sun or Moon icon depending on the active theme.

// frontend/src/components/Layout.tsx:64-74
<button
    onClick={toggleTheme}
    className="p-2.5 rounded-xl hover:bg-white/5 border border-transparent hover:border-white/10 transition-all duration-200 flex items-center gap-2 group"
    aria-label="Toggle Theme"
>
    {theme === 'dark' ? (
        <Sun size={18} className="text-amber-300 group-hover:rotate-180 transition-transform duration-500" />
    ) : (
        <Moon size={18} className="text-indigo-400 group-hover:-rotate-12 transition-transform duration-300" />
    )}
</button>

Sources: frontend/src/components/Layout.tsx:13, 64-74, UI_UX_UPGRADE.md:28

Design System and Theming

Relevant source files

The following files were used as context for generating this wiki page:

Sources: README.md:12-22, DASHBOARD_README.md:5-8, SUMMARY.md:32-35, UI_UX_UPGRADE.md:50-57

Core Technologies

The frontend's visual identity is built upon a specific set of technologies that work together to create the final user interface.

Layer	Technology	Purpose
UI Framework	React 18 + TypeScript	Building interactive and type-safe user interface components.
Styling	Tailwind CSS 3.3	A utility-first CSS framework for rapid and consistent styling.
Animations	Framer Motion	Powering fluid animations and interactive micro-interactions.
Charts	Recharts	Rendering interactive and responsive data visualizations.
Icons	Lucide React	Providing a consistent and clean set of SVG icons.
3D Graphics	Three.js	Used for advanced 3D visualizations, such as 3D bar charts.

Sources: DASHBOARD_README.md:10-21, frontend/package.json:17-29, UI_UX_UPGRADE.md:60-67

Color System

Main Application Palette

The primary palette is based on a dark background with vibrant accent colors for actions, states, and data visualization.

Category	Variable	Hex Code	Description
Background	`--dark-900`	`#0a0a0f`	Darkest background
	`--dark-800`	`#12121a`	Card backgrounds
	`--dark-700`	`#1a1a24`	Elevated surfaces
	`--dark-600`	`#22222e`	Borders & dividers
Text	`--text-primary`	`#ffffff`	Primary text
	`--text-secondary`	`#94a3b8`	Secondary/muted text
Accent	`--blue-500`	`#3b82f6`	Primary actions, highlights
	`--green-500`	`#22c55e`	Success states
	`--yellow-500`	`#eab308`	Warnings
	`--red-500`	`#ef4444`	Errors/Danger
	`--purple-500`	`#a855f7`	Highlights

Sources: DASHBOARD_README.md:25-42, README.md:211-219

Glassmorphism Effect

A key feature of the UI is the "glassmorphism" effect, which uses semi-transparent, blurred backgrounds to create a sense of depth.

Variable	Value	Purpose
`--glass-bg`	`rgba(255, 255, 255, 0.05)`	Background color for glass elements
`--glass-border`	`rgba(255, 255, 255, 0.1)`	Border color for glass elements
`--glass-blur`	`10px`	Backdrop blur value

Sources: DASHBOARD_README.md:44-48, SUMMARY.md:33-36

Tailwind CSS Configuration

The dark theme colors are integrated into Tailwind CSS through the tailwind.config.js file, allowing for their use as utility classes (e.g., bg-dark-900).

// frontend/tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
    content: [
        "./index.html",
        "./src/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {
            colors: {
                dark: {
                    900: '#1a1f2e', // Note: This differs from the CSS variable in docs
                    800: '#242b3d',
                    700: '#2d3548',
                    600: '#3d4556',
                }
            }
        },
    },
    plugins: [],
}

Source: frontend/tailwind.config.js:1-21

Static Login Page Palette (`code.html`)

Name	Hex Code	Description
`primary`	`#8B5CF6`	Main accent color (purple)
`background-dark`	`#0A0A0A`	Near-black background
`surface-dark`	`#151515`	Base for UI elements
`surface-accent`	`#262626`	Lighter dark for details
`text-light`	`#E0E0E0`	General text color
`accent-bright`	`#3B82F6`	Secondary accent (blue)

Source: code.html:14-25

Typography

The application uses the "Inter" font family for a clean and professional look, suitable for displaying data. A clear typographic scale is defined for headings and body text.

Class	Font Size	Font Weight
`.h1`	`2.25rem`	`700`
`.h2`	`1.875rem`	`700`
`.h3`	`1.5rem`	`600`
`.h4`	`1.25rem`	`600`
`.body-lg`	`1.125rem`	`N/A`
`.body`	`1rem`	`N/A`
`.body-sm`	`0.875rem`	`N/A`
`.caption`	`0.75rem`	`N/A`

Sources: DASHBOARD_README.md:52-65, README.md:222-224

Layout and Structure

The application's structure is managed by a main Layout.tsx component, which orchestrates the sidebar, header, and content areas.

This diagram shows the high-level component structure of the main layout.

Generating architecture diagram...

Sources: frontend/src/components/Layout.tsx, frontend/src/components/Sidebar.tsx

Responsive Design

The UI is fully responsive, adapting to different screen sizes using Tailwind CSS's default breakpoints.

Breakpoint	Min-width	Target Devices
`sm`	`640px`	Small devices
`md`	`768px`	Tablets
`lg`	`1024px`	Laptops
`xl`	`1280px`	Desktops
`2xl`	`1536px`	Large screens

Source: DASHBOARD_README.md:188-194

Spacing and Sizing

The design system adheres to a consistent spacing and border-radius scale, based on Tailwind's defaults, to maintain visual rhythm.

Unit	Value
`--space-4`	`1rem` (16px)
`--radius-md`	`0.5rem` (8px)
`--radius-lg`	`0.75rem` (12px)
`--radius-xl`	`1rem` (16px)

Sources: DASHBOARD_README.md:67-76, DASHBOARD_README.md:78-85

Animations and Micro-interactions

Animations are a core part of the user experience, implemented with Framer Motion and custom CSS.

Framer Motion

Framer Motion is used for component-level animations, such as fade-in effects on load and interactive hover/tap effects on buttons.

// Example from documentation
import { motion } from 'framer-motion';

// Fade in animation
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.5 }}
>
  Content
</motion.div>

Source: DASHBOARD_README.md:161-170

The Sidebar.tsx component makes extensive use of Framer Motion to animate its collapsed and expanded states, as well as the active tab indicator.

Source: frontend/src/components/Sidebar.tsx

Custom CSS Animations

Simple, reusable animations are defined in the global stylesheet (e.g., index.css).

/* Custom animations mentioned in DASHBOARD_README.md */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.animate-fade-in { animation: fade-in 0.5s ease-out; }
.animate-slide-up { animation: slide-up 0.5s ease-out; }

Source: DASHBOARD_README.md:173-185

Micro-interactions

Subtle animations are used to provide feedback for user actions, such as hover effects on cards and buttons.

Hover Lift: Cards and table rows lift with a shadow on hover.
Glow Effect: Buttons and focused inputs receive a colored glow.
Scale & Rotate: Icons and buttons scale or rotate on hover to indicate interactivity.

Source: UI_UX_UPGRADE.md:35-49

Theming

The application supports a theme-switching mechanism, although the provided files primarily detail a dark theme. The logic is handled by a React Context.

Theme Context

A ThemeContext.tsx is responsible for managing the current theme state (dark/light) and providing a function to toggle it. While the file is not provided, its usage is evident in Layout.tsx.

Source: DASHBOARD_README.md:133-134

Theme Toggle

The Layout.tsx component contains the UI element for switching themes. It uses the useTheme hook to get the current theme and the toggleTheme function.

This sequence diagram illustrates how a user action triggers a theme change.

Generating architecture diagram...

The button itself is styled to show a Sun or Moon icon depending on the active theme.

// frontend/src/components/Layout.tsx:64-74
<button
    onClick={toggleTheme}
    className="p-2.5 rounded-xl hover:bg-white/5 border border-transparent hover:border-white/10 transition-all duration-200 flex items-center gap-2 group"
    aria-label="Toggle Theme"
>
    {theme === 'dark' ? (
        <Sun size={18} className="text-amber-300 group-hover:rotate-180 transition-transform duration-500" />
    ) : (
        <Moon size={18} className="text-indigo-400 group-hover:-rotate-12 transition-transform duration-300" />
    )}
</button>

Sources: frontend/src/components/Layout.tsx:13, 64-74, UI_UX_UPGRADE.md:28

Design System and Theming

Core Technologies

Color System

Main Application Palette

Glassmorphism Effect

Tailwind CSS Configuration

Static Login Page Palette (code.html)

Typography

Layout and Structure

Responsive Design

Spacing and Sizing

Animations and Micro-interactions

Framer Motion

Custom CSS Animations

Micro-interactions

Theming

Theme Context

Theme Toggle

Design System and Theming

Core Technologies

Color System

Main Application Palette

Glassmorphism Effect

Tailwind CSS Configuration

Static Login Page Palette (code.html)

Typography

Layout and Structure

Responsive Design

Spacing and Sizing

Animations and Micro-interactions

Framer Motion

Custom CSS Animations

Micro-interactions

Theming

Theme Context

Theme Toggle

Static Login Page Palette (`code.html`)

Static Login Page Palette (`code.html`)