From 7fca97912fc6783704540e74539d3768ce9cfb59 Mon Sep 17 00:00:00 2001 From: Md Afiq Iskandar Date: Wed, 23 Apr 2025 08:19:14 +0800 Subject: [PATCH] Add Documentation for Backend Services, Components, Database Models, Development Guidelines, Form Handling, Project Overview, Project Structure, Routing, and State Management - Created comprehensive documentation files for backend services, detailing API endpoints, database access, authentication, and middleware. - Added documentation for Rose UI components and custom FormKit components, including descriptions and usage. - Documented database models defined in Prisma, outlining core and supporting models with their fields and relationships. - Established development guidelines for component and form development, state management, API development, and styling. - Included details on FormKit integration for form handling, plugins, and the form builder feature. - Provided an overview of the project structure, key configuration files, and routing system with main routes and middleware usage. - Enhanced state management documentation with key stores and usage guidelines for Pinia. --- .cursor/rules/backend-services.mdc | 40 ++++++++++++++++++++ .cursor/rules/components.mdc | 41 ++++++++++++++++++++ .cursor/rules/database-models.mdc | 30 +++++++++++++++ .cursor/rules/development-guidelines.mdc | 48 ++++++++++++++++++++++++ .cursor/rules/form-handling.mdc | 31 +++++++++++++++ .cursor/rules/project-overview.mdc | 22 +++++++++++ .cursor/rules/project-structure.mdc | 23 ++++++++++++ .cursor/rules/routing.mdc | 37 ++++++++++++++++++ .cursor/rules/state-management.mdc | 35 +++++++++++++++++ 9 files changed, 307 insertions(+) create mode 100644 .cursor/rules/backend-services.mdc create mode 100644 .cursor/rules/components.mdc create mode 100644 .cursor/rules/database-models.mdc create mode 100644 .cursor/rules/development-guidelines.mdc create mode 100644 .cursor/rules/form-handling.mdc create mode 100644 .cursor/rules/project-overview.mdc create mode 100644 .cursor/rules/project-structure.mdc create mode 100644 .cursor/rules/routing.mdc create mode 100644 .cursor/rules/state-management.mdc diff --git a/.cursor/rules/backend-services.mdc b/.cursor/rules/backend-services.mdc new file mode 100644 index 0000000..206b7fd --- /dev/null +++ b/.cursor/rules/backend-services.mdc @@ -0,0 +1,40 @@ +--- +description: +globs: *.js +alwaysApply: false +--- +# Backend Services + +The project uses Nuxt's server directory for backend API endpoints and services. + +## API Endpoints + +Check the [server](mdc:server) directory for API routes: +- Authentication routes (login, register, password reset) +- User management +- Form builder APIs +- Data access endpoints + +## Database Access + +The application uses Prisma ORM to interact with the database: +- Models defined in [schema.prisma](mdc:prisma/schema.prisma) +- Database operations through Prisma Client +- Migrations managed through Prisma Migration + +## Authentication + +The authentication system includes: +- JWT-based authentication +- Password hashing and verification +- Role-based access control +- Session management + +## Middleware + +Server middleware handles: +- Request validation +- Authentication verification +- Error handling +- Response formatting + diff --git a/.cursor/rules/components.mdc b/.cursor/rules/components.mdc new file mode 100644 index 0000000..84d1bc6 --- /dev/null +++ b/.cursor/rules/components.mdc @@ -0,0 +1,41 @@ +--- +description: +globs: *.vue +alwaysApply: false +--- +# Components + +## Rose UI Components +The project uses a custom UI library with components prefixed with `rs-`: + +- **[RsAlert.vue](mdc:components/RsAlert.vue)**: Alert messages +- **[RsBadge.vue](mdc:components/RsBadge.vue)**: Badge indicators +- **[RsButton.vue](mdc:components/RsButton.vue)**: Button component +- **[RsCard.vue](mdc:components/RsCard.vue)**: Card container +- **[RsCollapse.vue](mdc:components/RsCollapse.vue)**: Collapsible elements +- **[RsDropdown.vue](mdc:components/RsDropdown.vue)**: Dropdown menus +- **[RsFieldset.vue](mdc:components/RsFieldset.vue)**: Form fieldsets +- **[RsModal.vue](mdc:components/RsModal.vue)**: Modal dialogs +- **[RsProgressBar.vue](mdc:components/RsProgressBar.vue)**: Progress indicators +- **[RsTab.vue](mdc:components/RsTab.vue)**: Tab navigation +- **[RsTable.vue](mdc:components/RsTable.vue)**: Data tables +- **[RsWizard.vue](mdc:components/RsWizard.vue)**: Step-by-step wizards +- **[RSCalendar.vue](mdc:components/RSCalendar.vue)**: Calendar component +- **[RsCodeMirror.vue](mdc:components/RsCodeMirror.vue)**: Code editor + +## FormKit Components +Custom FormKit components for enhanced form functionality: + +- **[OneTimePassword.vue](mdc:components/formkit/OneTimePassword.vue)**: OTP input +- **[TextMask.vue](mdc:components/formkit/TextMask.vue)**: Masked text input +- **[DateTimePicker.vue](mdc:components/formkit/DateTimePicker.vue)**: Date and time picker +- **[FileDropzone.vue](mdc:components/formkit/FileDropzone.vue)**: File upload dropzone + +## Form Builder Components +Components used for the Form Builder feature: + +- **[FormBuilderCanvas.vue](mdc:components/FormBuilderCanvas.vue)**: Canvas for drag-and-drop form building +- **[FormBuilderComponents.vue](mdc:components/FormBuilderComponents.vue)**: Available form components +- **[FormBuilderConfiguration.vue](mdc:components/FormBuilderConfiguration.vue)**: Form configuration panel +- **[FormBuilderHistory.vue](mdc:components/FormBuilderHistory.vue)**: Form edit history + diff --git a/.cursor/rules/database-models.mdc b/.cursor/rules/database-models.mdc new file mode 100644 index 0000000..cc238c7 --- /dev/null +++ b/.cursor/rules/database-models.mdc @@ -0,0 +1,30 @@ +--- +description: +globs: +alwaysApply: false +--- +# Database Models + +The project uses Prisma ORM with the following key models defined in [schema.prisma](mdc:prisma/schema.prisma): + +## Core Models +- **User**: User management with authentication + - Fields: userID, userUsername, userPassword, userFullName, userEmail, userPhone, userStatus + - Relationships: audit (one-to-many), userrole (one-to-many) + +- **Role**: Role-based access control + - Fields: roleID, roleName, roleDescription, roleStatus + - Relationships: userrole (one-to-many) + +- **UserRole**: Join table connecting users and roles + - Fields: userRoleID, userRoleUserID, userRoleRoleID, userRoleCreatedDate + - Relationships: user (many-to-one), role (many-to-one) + +## Supporting Models +- **Audit**: System for tracking user actions + - Fields: auditID, auditIP, auditURL, auditURLMethod, auditURLPayload, auditAction, auditDetails, auditUserID, auditUsername + - Relationships: user (many-to-one) + +- **Lookup**: Reference data for dropdown options + - Fields: lookupID, lookupOrder, lookupTitle, lookupRefCode, lookupValue, lookupType, lookupStatus + diff --git a/.cursor/rules/development-guidelines.mdc b/.cursor/rules/development-guidelines.mdc new file mode 100644 index 0000000..5ac31d5 --- /dev/null +++ b/.cursor/rules/development-guidelines.mdc @@ -0,0 +1,48 @@ +--- +description: +globs: *.vue,*.js +alwaysApply: false +--- +# Development Guidelines + +## Component Development + +When working with components: +- Use existing Rose UI components (prefixed with `rs-`) instead of creating new ones +- Customize components through props rather than creating variants +- Follow the established naming conventions and component structure +- Place new Rose UI components in the [components](mdc:components) directory +- Place new FormKit components in the [components/formkit](mdc:components/formkit) directory + +## Form Development + +When creating forms: +- Use FormKit for all form inputs and validation +- Refer to [formkit.config.js](mdc:formkit.config.js) for available plugins and configuration +- For complex forms, use the Form Builder feature +- Implement custom FormKit inputs when needed + +## State Management + +When managing state: +- Use Pinia stores for global state +- Store files should be placed in the [stores](mdc:stores) directory +- Follow the existing pattern in [stores/formBuilder.js](mdc:stores/formBuilder.js) +- Use Vue's Composition API for component-local state + +## API Development + +When creating new API endpoints: +- Place new API routes in the [server](mdc:server) directory +- Use Prisma for database operations +- Implement proper validation and error handling +- Follow RESTful API design principles + +## Styling Guidelines + +When styling components: +- Use Tailwind CSS utility classes +- Custom styling should be placed in the [assets](mdc:assets) directory +- Follow the existing color scheme and design patterns +- Ensure responsive design for all components + diff --git a/.cursor/rules/form-handling.mdc b/.cursor/rules/form-handling.mdc new file mode 100644 index 0000000..1e65117 --- /dev/null +++ b/.cursor/rules/form-handling.mdc @@ -0,0 +1,31 @@ +--- +description: +globs: +alwaysApply: false +--- +# Form Handling + +## FormKit Integration +The project uses FormKit for form handling with configuration in [formkit.config.js](mdc:formkit.config.js). + +### FormKit Plugins +- **Floating Labels**: Creates floating labels for form inputs +- **Multi-Step**: Supports multi-step form workflows +- **Auto Animate**: Adds animations to form elements +- **Auto Height Textarea**: Automatically adjusts textarea height +- **Local Storage**: Persists form state in localStorage + +### Custom FormKit Components +- **[OneTimePassword.vue](mdc:components/formkit/OneTimePassword.vue)**: For OTP verification +- **[TextMask.vue](mdc:components/formkit/TextMask.vue)**: For input masking +- **[DateTimePicker.vue](mdc:components/formkit/DateTimePicker.vue)**: Date and time selection +- **[FileDropzone.vue](mdc:components/formkit/FileDropzone.vue)**: File uploads + +## Form Builder +The project includes a form builder feature for creating dynamic forms: + +- **[FormBuilderCanvas.vue](mdc:components/FormBuilderCanvas.vue)**: The canvas for form building +- **[FormBuilderComponents.vue](mdc:components/FormBuilderComponents.vue)**: Component palette +- **[FormBuilderConfiguration.vue](mdc:components/FormBuilderConfiguration.vue)**: Form properties +- **[formBuilder.js](mdc:stores/formBuilder.js)**: Form builder state management + diff --git a/.cursor/rules/project-overview.mdc b/.cursor/rules/project-overview.mdc new file mode 100644 index 0000000..0b0b15d --- /dev/null +++ b/.cursor/rules/project-overview.mdc @@ -0,0 +1,22 @@ +--- +description: +globs: +alwaysApply: false +--- +# Project Overview + +This project is a Nuxt 3 application called "Corrad" that integrates with ProcessMaker. + +## Core Technologies +- **Nuxt 3**: Vue.js framework for server-side rendering and static site generation +- **Vue 3**: Progressive JavaScript framework for building user interfaces +- **NitroJS**: Server engine that powers Nuxt 3 +- **Prisma**: Next-generation ORM for Node.js and TypeScript +- **FormKit**: Form building library for Vue.js +- **Pinia**: State management for Vue.js applications + +## Main Entry Points +- [app.vue](mdc:app.vue) - The main application component +- [nuxt.config.js](mdc:nuxt.config.js) - Nuxt configuration +- [formkit.config.js](mdc:formkit.config.js) - FormKit configuration + diff --git a/.cursor/rules/project-structure.mdc b/.cursor/rules/project-structure.mdc new file mode 100644 index 0000000..ce88a5e --- /dev/null +++ b/.cursor/rules/project-structure.mdc @@ -0,0 +1,23 @@ +--- +description: +globs: +alwaysApply: false +--- +# Project Structure + +## Directory Organization +- **[/components](mdc:components)**: Contains all Rose UI components (prefixed with `rs-`) and FormKit custom components +- **[/layouts](mdc:layouts)**: Page layouts (default and empty) +- **[/pages](mdc:pages)**: Application routes following Nuxt's file-based routing +- **[/server](mdc:server)**: Backend API endpoints and middleware +- **[/prisma](mdc:prisma)**: Database schema and migrations +- **[/stores](mdc:stores)**: Pinia stores for state management +- **[/assets](mdc:assets)**: Static assets like SCSS and images +- **[/plugins](mdc:plugins)**: Vue plugins and Nuxt modules + +## Key Configuration Files +- **[nuxt.config.js](mdc:nuxt.config.js)**: Main Nuxt configuration +- **[formkit.config.js](mdc:formkit.config.js)**: FormKit configuration +- **[tailwind.config.js](mdc:tailwind.config.js)**: Tailwind CSS configuration +- **[package.json](mdc:package.json)**: Project dependencies + diff --git a/.cursor/rules/routing.mdc b/.cursor/rules/routing.mdc new file mode 100644 index 0000000..e62d15f --- /dev/null +++ b/.cursor/rules/routing.mdc @@ -0,0 +1,37 @@ +--- +description: +globs: +alwaysApply: false +--- +# Routing + +The project uses Nuxt 3's file-based routing system. + +## Main Routes + +- **[/pages/index.vue](mdc:pages/index.vue)**: Homepage +- **Authentication**: + - **[/pages/login](mdc:pages/login)**: User login + - **[/pages/register](mdc:pages/register)**: New user registration + - **[/pages/forgot-password](mdc:pages/forgot-password)**: Password reset request + - **[/pages/reset-password](mdc:pages/reset-password)**: Password reset + - **[/pages/logout](mdc:pages/logout)**: User logout +- **Application**: + - **[/pages/dashboard](mdc:pages/dashboard)**: User dashboard + - **[/pages/form-builder](mdc:pages/form-builder)**: Form building interface + - **[/pages/devtool](mdc:pages/devtool)**: Developer tools + +## Route Guards + +Authentication is managed through middleware: +- Check the [middleware](mdc:middleware) directory for route protection +- Authenticated routes are guarded from unauthorized access +- User roles determine access to specific features + +## Layouts + +Routes can use different layouts: +- Default layout with navigation sidebar +- Empty layout for authentication pages +- Custom layouts for specific features + diff --git a/.cursor/rules/state-management.mdc b/.cursor/rules/state-management.mdc new file mode 100644 index 0000000..b17b707 --- /dev/null +++ b/.cursor/rules/state-management.mdc @@ -0,0 +1,35 @@ +--- +description: +globs: +alwaysApply: false +--- +# State Management + +The project uses Pinia for state management. Key stores include: + +## Stores + +- **[formBuilder.js](mdc:stores/formBuilder.js)**: Manages state for the form builder feature + - Handles form components, properties, and history + - Controls drag-and-drop operations + - Manages form validation and submission + +- **[user.js](mdc:stores/user.js)**: Manages user authentication and profile + - Stores user information + - Handles login/logout operations + - Manages user permissions + +- **[theme.js](mdc:stores/theme.js)**: Controls application theming + - Manages light/dark mode + - Stores user theme preferences + +- **[layout.js](mdc:stores/layout.js)**: Controls application layout + - Manages sidebar state + - Controls responsive layout changes + +## Usage Guidelines +- Use Pinia stores for shared state that needs to be accessed across components +- Keep component-specific state within components using Vue's Composition API +- For form state, prefer FormKit's built-in state management +- Use persisted state (localStorage) for user preferences +