Skip to main content
The SGD-MCS frontend includes a collection of reusable React components designed for managing academic data, documents, and Google Drive integration.

​
Common Components

The application features several common components located in src/components/common/ that provide core UI functionality:

​
Form & Input Components

CustomSelect

A custom dropdown select component with dark mode support, icons, and validation states

​
Document Management

DocumentUpload

Drag-and-drop file upload component with document type selection and progress tracking

​
Google Drive Integration

FolderExplorer

Google Drive folder explorer with sync capabilities and file upload integration

​
Component Architecture

All components follow these design principles:
  • Responsive Design: Mobile-first approach with responsive breakpoints
  • Dark Mode: Full dark mode support using Tailwind’s dark: variant
  • Accessibility: Semantic HTML and keyboard navigation support
  • Modern UI: Uses lucide-react icons and Tailwind CSS for styling
  • Type Safety: Components accept typed props for validation

​
Layout Components

Additional layout components are available in src/components/layout/:
  • MainLayout: Primary application layout wrapper
  • Navbar: Top navigation bar with user menu
  • Sidebar: Side navigation panel

​
Dashboard Components

Specialized dashboard components in src/components/dashboard/:
  • StatCard: Metric display cards
  • DashboardCharts: Chart visualization components
  • Module Components: Domain-specific modules (Students, Docentes, Tesis, etc.)

​
Getting Started

Import components from their respective paths: 
import CustomSelect from './components/common/CustomSelect';
import FolderExplorer from './components/common/FolderExplorer';
import DocumentUpload from './components/common/DocumentUpload';
Each component page includes detailed prop documentation, usage examples, and code samples.

Build docs developers (and LLMs) love

Get started for freeTalk to us