caudil/next-shad-auth-starter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Jessica Rekcah 2025-11-29 00:36:55 +07:00
commit 22f85d731c
28 changed files with 3025 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
.gitignore vendored Normal file
View File

@ -0,0 +1,43 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/versions
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*
# env files (can opt-in for committing if needed)
.env*
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts
/prisma/generated/prisma

860
AI_GUIDE.md Normal file
View File

@ -0,0 +1,860 @@
## 📝 Pre-Execution TODO Requirement
**MANDATORY: Create TODO file before executing any complex task**
### **TODO Creation Process**
1. **Create TODO File**: Before starting any complex development task, create a detailed TODO file in the `TODO/` directory
2. **File Naming**: Use descriptive names like `TODO-(new-feature-name.md)` or `TODO-(bug-fix-description).md`
3. **Check Existing TODOs**: Review existing TODO files in `TODO/` directory to incorporate any pending tasks related to current prompt
4. **User Confirmation**: Present the TODO file to the user and wait for explicit confirmation before proceeding
### **TODO File Template**
```markdown
# TODO: [Task Title]
**Created by:** AI Assistant
**Date:** [Current Date]
**Purpose:** [Brief description of what will be accomplished]
## 📋 Task Breakdown
### Phase 1: [Phase Name]
- [ ] [Specific task 1]
- [ ] [Specific task 2]
- [ ] [Specific task 3]
### Phase 2: [Phase Name]
- [ ] [Specific task 1]
- [ ] [Specific task 2]
## 🎯 Expected Outcomes
- [ ] [Expected result 1]
- [ ] [Expected result 2]
## ⚠️ Risks & Considerations
- [Potential risk 1]
- [Potential risk 2]
## 🔄 Dependencies
- [Dependency 1]
- [Dependency 2]
```
### **User Confirmation Required**
**Before executing any TODO:**
1. **Present TODO**: Show the complete TODO file content to the user
2. **Request Confirmation**: Ask "Do you approve this TODO and want me to proceed with execution?"
3. **Wait for Approval**: Only begin execution after user confirms with "yes", "approved", or similar confirmation
4. **Document Decision**: Note user's approval in the session
### **Automatic Task Progress Tracking**
**MANDATORY: Update TODO file with completed task checkmarks**
**During task execution:**
1. **Real-time Updates**: As each task or phase is completed, automatically update the TODO file in the previously created `TODO/TODO-(new-feature-name).md` to mark completed items with checkmarks
2. **Checkmark Format**: Replace `- [ ]` with `- [x]` for completed tasks
3. **Phase Completion**: Mark entire phases as complete when all tasks within that phase are finished
4. **Progress Visibility**: Keep the TODO file updated throughout the development session to show real-time progress
5. **CRITICAL: File Update Requirement**: After completing ANY task, you MUST immediately update the corresponding TODO file by changing `- [ ]` to `- [x]`. This is NOT optional - it is a mandatory requirement for every completed task.
**Example Progress Updates:**
```markdown
### Phase 1: Database Setup
- [x] Create Prisma models
- [x] Generate database client
- [x] Seed initial data
### Phase 2: API Development
- [ ] Create CRUD endpoints
- [ ] Add authentication
- [ ] Test API routes
```
**Implementation Requirements:**
- **Immediate Updates**: Update checkmarks IMMEDIATELY after completing each task - do not wait until the end of the phase
- **File Synchronization**: Ensure the TODO file in `TODO/` directory reflects current progress at all times
- **Completion Indicators**: Use clear visual indicators (checkmarks) for completed work
- **Session Tracking**: Maintain progress visibility throughout the entire development session
- **MANDATORY CHECK**: Before moving to the next task, verify that the previous task has been marked with `- [x]` in the TODO file
- **NO EXCEPTIONS**: This requirement applies to ALL tasks - simple or complex, single or multi-step
### **When TODO is Required**
Create TODO files for:
- **New Features**: Multi-step feature development
- **Major Refactoring**: Significant code restructuring
- **Database Changes**: Schema modifications, migrations
- **Complex Bug Fixes**: Issues requiring multiple steps
- **Module Creation**: New application modules
- **API Development**: Complete CRUD operations
- **TODO Integration**: Include any pending tasks from existing TODO files that relate to current prompt execution
### **When TODO is NOT Required**
Simple tasks that don't need TODO:
- **Single file edits**: Minor fixes or updates
- **Simple queries**: Information gathering
- **Code reviews**: Analysis and suggestions
- **Documentation**: README updates, minor docs
**Example User Interaction:**
```
AI: I've created a TODO file for the new feature. Here's what I plan to do:
[Shows complete TODO file content]
Do you approve this TODO and want me to proceed with execution?
User: Yes, please proceed.
AI: ✅ TODO approved. Starting execution...
[After completing first task]
AI: ✅ Completed: Create Prisma models
[Immediately updates TODO file: - [ ] becomes - [x]]
[After completing second task]
AI: ✅ Completed: Generate database client
[Immediately updates TODO file: - [ ] becomes - [x]]
[And so on for every task...]
```
---
## 📋 Mandatory Requirements
### 1. README.md Updates
**Update README.md only when deemed necessary after completing prompt execution.**
- Document new features, modules, or components added
- Update project structure if new directories/files are created
- Add new API endpoints to the documentation
- Update feature lists and capabilities
- Include any breaking changes or important notes
- Maintain the existing format and structure
### 2. UI Page Creation Requirements
**ALWAYS add attribution to every file you create or modify.**
Add this comment at the top of every new file:
```typescript
/**
* File: [filename]
* Created by: Chandika Nurdiansyah (chandika@skatsa.com)
* Date: [current date]
* Purpose: [brief description of file purpose]
* Part of: SDI Super App for PT Skatsa Data Integra
*/
```
For modified files, add this comment above your changes:
```typescript
/**
* Modified by: Chandika Nurdiansyah (chandika@skatsa.com)
* Date: [current date]
* Changes: [brief description of changes]
* Part of: SDI Super App for PT Skatsa Data Integra
*/
```
---
## 🏗️ Development Guidelines
### Code Standards
- **TypeScript**: All code must be fully typed
- **ESLint**: Follow existing linting rules (0 errors, 0 warnings)
- **shadcn/ui**: Use consistent shadcn/ui components
- **Prisma**: Use for all database operations
- **Better Auth**: Follow authentication patterns
- **Variable Naming**: All variables must use English language and camelCase format
- **Label Naming**: All labels must be in English language
### Architecture Patterns
- **Route Groups**: Use `(app)` for protected routes if not specifically asked
- **API Structure**: Follow RESTful patterns in `/api/` directory
- **Components**: Place reusable components in `/components/`
- **Common Components**: Prioritize using existing components from `/components/Common/` before creating new ones
- **Types**: Define TypeScript interfaces in `/types/`
- **Hooks**: Custom hooks in `/hooks/`
### UI/UX Requirements
- **Skeleton Loading**: Implement professional skeleton loading for all data tables
- **shadcn/ui**: Use professional confirmation dialogs (not browser alerts)
- **Responsive Design**: Mobile-first approach
- **Error Handling**: Comprehensive error messages and recovery
- **Loading States**: Smooth transitions and visual feedback
- **Component Reuse**: Maximize use of existing Common components (AppTable, AppForm, etc.) before creating custom components
- **Component Index Files**: ALWAYS include `index.ts` file in `/components/` and all subdirectories to export components for clean imports
- **Mandatory Component Usage**:
- ALL edit pages MUST use AppForm component
- ALL table displays MUST use AppDataView component
- ALL buttons MUST use ActionButton from `/components/ActionButton/index.ts`
---
## 📁 Project Structure Context
### **🏗️ Application Architecture**
```
/app/
├── page.tsx # Homepage (public)
├── layout.tsx # Root layout
├── auth/ # Authentication (public)
│ ├── signin/page.tsx # Sign in page
│ └── signup/page.tsx # Sign up page
├── (system)/ # Route group (protected - system admin)
│ ├── layout.tsx # AppLayout for system modules
│ ├── dashboard/page.tsx # System dashboard
│ └── user-management/ # User Management Module
│ ├── users/page.tsx # Users list
│ ├── user-groups/page.tsx # User groups
│ ├── roles/page.tsx # Roles management
│ └── authorization/page.tsx # Authorization matrix
├── (app)/ # Route group (protected - business apps)
│ ├── layout.tsx # AppLayout for business applications
│ └── finance-accounting/ # Finance & Accounting Module
│ ├── page.tsx # Finance dashboard
│ ├── chart-of-accounts/
│ │ ├── page.tsx # Chart of accounts list
│ │ └── [id]/
│ │ └── edit.tsx # Edit account
│ ├── journal-entries/
│ │ ├── page.tsx # Journal entries list
│ │ └── new/ # New journal entry
│ ├── ledger/
│ │ └── page.tsx # General ledger
│ ├── transactions/
│ │ ├── page.tsx # Transactions list
│ │ ├── new/ # New transaction
│ │ └── [id]/
│ │ └── edit.tsx # Edit transaction
│ └── reports/
│ └── page.tsx # Financial reports
└── api/ # API routes
├── authorization/route.ts # Authorization API
├── users/route.ts # Users CRUD API
├── roles/route.ts # Roles CRUD API
├── user-groups/route.ts # User groups CRUD API
├── modules/route.ts # Modules API
├── applications/route.ts # Applications API
└── finance-accounting/ # Finance APIs
├── chart-of-accounts/route.ts # Chart of accounts API
├── financial-transaction/route.ts # Transactions API
├── journal-entry/route.ts # Journal entries API
├── ledger/route.ts # Ledger API
└── reports/route.ts # Financial reports API
```
### **📋 Application Module Pattern**
**Development Workflow for New Applications:**
**Step 1: Database Schema Creation**
1. Create Prisma models in `prisma/models/[module-name]/`
2. Add models to main `prisma/schema.prisma`
3. Generate Prisma client: `pnpm db:generate`
4. Push schema to database: `pnpm db:push`
5. Create seed data in `prisma/seeds/[module-name]/index.ts`
6. Update main seed orchestrator `prisma/seed.ts`
7. Test seeding: `pnpm db:seed`
**Step 2: UI Development**
1. Create application pages in `/app/(app)/application_name/`
2. Use `AppDataView` component for ALL data table displays
3. Use `AppForm` component for ALL forms (create, edit, update)
4. Use `ActionButton` from `/components/ActionButton/index.ts` for ALL buttons
5. Implement list, create, edit, and detail pages
6. Add proper routing and navigation
7. Ensure responsive design and loading states
8. Create custom components in `/components/` with proper `index.ts` exports
9. Follow component index file requirements for clean imports
**Step 3: API Development**
1. Create API routes in `/app/api/application_name/`
2. Implement CRUD operations for each module
3. Add proper error handling and validation
4. Include authentication and authorization checks
5. Add TypeScript interfaces for request/response types
6. Test API endpoints thoroughly
**Standard Pattern for New Applications:**
```
/app/(app)/application_name/
├── page.tsx # Application dashboard/main page
├── module-1/ # First functional module
│ ├── page.tsx # Module list view
│ ├── new/ # Create new item
│ └── [id]/
│ └── edit.tsx # Edit existing item
├── module-2/ # Second functional module
│ ├── page.tsx # Module list view
│ ├── new/ # Create new item
│ └── [id]/
│ └── edit.tsx # Edit existing item
└── module-n/ # Additional modules
├── page.tsx # Module list view
├── new/ # Create new item
└── [id]/
└── edit.tsx # Edit existing item
```
**API Pattern for New Applications:**
```
/app/api/application_name/
├── route.ts # Main application API
├── module-1/route.ts # Module 1 CRUD API
├── module-2/route.ts # Module 2 CRUD API
└── module-n/route.ts # Module N CRUD API
```
### **🗂️ Database Structure**
```
prisma/
├── models/ # Model definitions by module
│ ├── core/ # Core system models
│ │ ├── user.prisma # User management
│ │ ├── role.prisma # Role definitions
│ │ ├── user-group.prisma # User groups
│ │ └── module.prisma # System modules
│ └── finance-accounting/ # Finance module models
│ ├── chart-of-accounts.prisma # Chart of accounts
│ ├── financial-transaction.prisma # Financial transactions
│ ├── journal-entry.prisma # Journal entries
│ ├── ledger.prisma # Ledger entries
│ └── financial-report.prisma # Financial reports
├── seeds/ # Seed data by module
│ ├── core/index.ts # Core system data
│ └── finance-accounting/ # Finance module data
│ ├── index.ts # Finance seeding
│ └── sample-data.ts # Sample data
├── schema.prisma # Main consolidated schema
└── seed.ts # Modular seed orchestrator
```
### **🧩 Component Structure**
```
/components/
├── index.ts # Main component exports
├── Common/ # Reusable common components
│ ├── index.ts # Common components exports
│ ├── AppLayout.tsx # Main application layout
│ ├── AppTable.tsx # Data table component
│ ├── AppForm.tsx # Form component
│ ├── AppDataView.tsx # Data view component
│ ├── LoadingSkeleton.tsx # Skeleton loading
│ └── ConfirmDialog.tsx # Confirmation dialogs
├── ActionButton/ # Action button component
│ └── index.ts # ActionButton export
├── Forms/ # Form components
│ ├── index.ts # Forms exports
│ └── [form-components].tsx
├── Charts/ # Chart components
│ ├── index.ts # Charts exports
│ └── [chart-components].tsx
└── Layouts/ # Layout components
├── index.ts # Layouts exports
└── [layout-components].tsx
```
**Component Index File Requirements:**
**MANDATORY: Every component directory MUST include `index.ts` file**
```typescript
// Example: /components/Common/index.ts
export { default as AppLayout } from "./AppLayout";
export { default as AppTable } from "./AppTable";
export { default as AppForm } from "./AppForm";
export { default as AppDataView } from "./AppDataView";
export { default as LoadingSkeleton } from "./LoadingSkeleton";
export { default as ConfirmDialog } from "./ConfirmDialog";
// Example: /components/ActionButton/index.ts
export { default as ActionButton } from "./index";
```
**Usage Benefits:**
- Clean imports: `import { AppTable, AppForm } from '@/components/Common'`
- Clean button imports: `import ActionButton from '@/components/ActionButton'`
- Centralized exports for better maintainability
- Consistent import patterns across the application
- Easy component discovery and usage
### **📚 Type Definitions**
```
/types/
├── prisma.ts # Prisma type definitions
├── auth.ts # Authentication types
├── api.ts # API response types
└── common.ts # Common utility types
```
### **🎯 Module Access Patterns**
- **Core System**: `/app/(system)` - System administration
- User management, roles, authorization, app management
- Requires admin-level permissions
- **Business Applications**: `/app/(app)` - Business operations
- Finance & Accounting, future business modules
- Requires role-based permissions per module
- **Public Access**: `/app/auth` - Authentication
- Sign in, sign up pages
- No authentication required
---
## 🔐 Security & Authorization
### Permission System
- **Role-based Access Control**: Admin, Manager, User roles
- **Module Permissions**: canView, canCreate, canUpdate, canDelete
- **Advanced Permissions**: canApprove, canExport, canImport
- **Custom Permissions**: JSON-based for specialized requirements
### Audit Trail
Every table (except User Management) automatically includes:
- `createdBy`, `createdAt`, `lastUpdateBy`, `lastUpdateAt`
- `ownedBy` for group-based data ownership
---
## 🚀 Quality Assurance
### Before Completing Any Prompt
1. **Run linting**: `pnpm lint` (must be 0 errors, 0 warnings)
2. **Type checking**: `pnpm tsc --noEmit` (must be 0 errors)
3. **Build test**: `pnpm build` (must compile successfully)
4. **Test functionality**: Verify all features work as expected
### Testing Requirements
- Authentication flows work end-to-end
- CRUD operations function correctly
- Permission matrix updates properly
- Skeleton loading displays correctly
- shadcn/ui components work properly
- Real-time features function as expected
### Function Testing with MCP Server
**MANDATORY: Use MCP Server for function testing**
All function testing must be performed using MCP Server with the following configuration:
```json
{
"mcp": {
"browser-mcp": {
"type": "local",
"command": ["npx", "@agentdeskai/browser-tools-server@latest"],
"enabled": true
}
}
}
```
**Testing Requirements:**
- **Browser Testing**: Use MCP Server for all UI function testing
- **End-to-End Testing**: Verify complete user workflows through browser automation
- **Interactive Testing**: Test form submissions, button clicks, and navigation
- **Data Validation**: Verify data persistence and retrieval through browser interface
- **Error Handling**: Test error scenarios and user feedback mechanisms
- **Responsive Testing**: Verify functionality across different screen sizes
- **Performance Testing**: Monitor loading times and user interactions
**MCP Server Usage:**
1. **Start MCP Server**: Ensure browser-mcp server is running before testing
2. **Automated Testing**: Use browser automation tools for comprehensive testing
3. **Manual Verification**: Perform manual checks through browser interface
4. **Screenshot Testing**: Capture screenshots for visual regression testing
5. **Console Monitoring**: Check browser console for errors and warnings
6. **Network Monitoring**: Verify API calls and responses through browser dev tools
---
## 📚 Documentation Updates Required
### README.md Sections to Update
- **Features**: Add new features and capabilities
- **Project Structure**: Document new directories/files
- **API Endpoints**: Add new API routes
- **Database Schema**: Document new tables/fields
- **Quick Reference**: Update URLs and commands
- **Recent Updates**: Add to the updates section
### Component Documentation
- Create README files for new major components
- Update existing component documentation
- Include usage examples and props documentation
---
## 🎯 Current Project Context
### **🏛️ Core System Modules**
**Core System** (Accessible via `/app/(system)` - System Administration)
- **User Management**: Complete CRUD for users, groups, roles, authorization
- **App Management**: Registry for 27 business applications
- **Dashboard**: Main overview with statistics
- **Authorization Matrix**: Role-based permission management
- **System Configuration**: Core system settings and preferences
### **📊 Business Applications**
**Finance & Accounting** (Accessible via `/app/(app)/finance-accounting`)
- **Chart of Accounts**: Complete account hierarchy management
- **Financial Transactions**: Transaction recording and management
- **Journal Entries**: Double-entry bookkeeping system
- **General Ledger**: Comprehensive ledger reporting
- **Financial Reports**: Balance sheet, income statement, cash flow
**Business Applications Registry** (27 total applications)
- **Business**: 7 apps (Procurement, Asset, Human Capital, Finance, etc.)
- **Productivity**: 5 apps (Archive, Project, Document, Meeting, Task)
- **Analytics**: 2 apps (Budget Planning, Secondary Data)
- **Other Categories**: 13 apps across various domains (Support, Finance, Operations, Media, Management, Research, Infrastructure, Security)
### **🔐 Access Control**
**Default Credentials**
- **Admin**: admin/admin123 (full system access)
- **Manager**: manager/manager123 (limited business access)
- **User**: user/user123 (basic application access)
**Module Access Patterns**
- **Core System**: Requires admin-level permissions
- **Business Applications**: Role-based permissions per module
- **Public Access**: Authentication pages only
---
## ⚡ Quick Commands Reference
```bash
# Development
pnpm dev # Start development server
pnpm build # Build for production
pnpm lint # Run ESLint
npx tsc --noEmit # Type checking
# Database
pnpm db:push # Push schema changes
pnpm db:seed # Seed initial data
pnpm db:studio # Open Prisma Studio
# Quality Assurance
pnpm clean:win # Clean and reinstall (Windows)
```
---
## 📝 Session Checklist
Before completing any development session, ensure:
- [ ] README.md has been updated with all changes
- [ ] APPS.md has been updated with all changes
- [ ] All created/modified files have proper attribution
- [ ] Code passes all linting and type checking
- [ ] Build completes successfully
- [ ] All functionality works as expected
- [ ] Documentation is accurate and complete
- [ ] Security best practices are followed
- [ ] UI/UX standards are maintained
- [ ] **CRITICAL: TODO file has been updated with checkmarks for ALL completed tasks**
- [ ] **CRITICAL: Every `- [ ]` for completed work has been changed to `- [x]`**
---
## 🌱 Database Schema & Seeding Guide
### **📁 Modular Database Structure**
The database schema is organized into modular directories for better maintainability:
```
prisma/
├── models/
│ ├── core/ # Core module models (system-wide)
│ │ ├── user.prisma # User management
│ │ ├── role.prisma # Role definitions
│ │ ├── user-group.prisma # User groups
│ │ └── module.prisma # System modules
│ └── finance-accounting/ # Finance module models
│ ├── chart-of-accounts.prisma # Chart of accounts
│ ├── financial-transaction.prisma # Financial transactions
│ ├── journal-entry.prisma # Journal entries
│ ├── ledger.prisma # Ledger entries
│ └── financial-report.prisma # Financial reports
├── seeds/
│ ├── core/ # Core module seed data
│ │ └── index.ts # Core data seeding
│ └── finance-accounting/ # Finance module seed data
│ ├── index.ts # Finance data seeding
│ └── sample-data.ts # Sample financial data
├── schema.prisma # Main consolidated schema
└── seed.ts # Modular seed orchestrator
```
### **🎯 Module Access Mapping**
- **Core Module**: Accessible via `/app/(system)` - Contains system-wide data
- Models: User, Role, UserGroup, Module, Application, Auth
- Seed: Roles, user groups, admin user, core modules, applications
- **Finance-Accounting Module**: Accessible via `/app/(app)/finance-accounting` - Contains financial data
- Models: ChartOfAccounts, FinancialTransaction, JournalEntry, Ledger, FinancialReport
- Seed: Chart of accounts hierarchy, sample transactions, reports
### **🏗️ Creating New Database Models**
#### **1. Model File Creation**
Create new `.prisma` files in appropriate module directory:
```prisma
// Example: prisma/models/finance-accounting/new-model.prisma
model NewModel {
id String @id @default(cuid())
createdAt DateTime @default(now())
createdBy String
updatedAt DateTime @updatedAt
updatedBy String
// Add your fields here
// Standard audit fields (required for all models except User Management)
@@map("new_models")
}
```
#### **2. Schema Integration**
Add model to main `prisma/schema.prisma`:
```prisma
// ========================================
// FINANCE-ACCOUNTING MODULE MODELS
// ========================================
model NewModel {
// ... model definition from above
}
```
#### **3. Client Generation**
```bash
pnpm db:generate # Regenerate Prisma client with new models
```
#### **4. Database Migration**
```bash
pnpm db:push # Push schema changes to database
```
### **🌱 Module-Based Seeding Requirements**
#### **Core Module Seeding**
File: `prisma/seeds/core/index.ts`
```typescript
export async function seedCoreData(prisma: PrismaClient) {
// Create core system data
const adminRole = await prisma.role.upsert({...});
const adminUser = await prisma.user.upsert({...});
return {
adminRole,
adminUser,
// ... other core data
};
}
```
#### **Finance Module Seeding**
File: `prisma/seeds/finance-accounting/index.ts`
```typescript
export async function seedFinanceAccountingData(prisma: PrismaClient, adminUser: any, adminGroup: any) {
// Create finance-specific data
const chartOfAccounts = await prisma.chartOfAccounts.upsert({...});
return {
chartOfAccounts,
// ... other finance data
};
}
```
#### **Main Seed Orchestrator**
File: `prisma/seed.ts`
```typescript
import { seedCoreData } from "./seeds/core";
import { seedFinanceAccountingData } from "./seeds/finance-accounting";
async function main() {
// Seed Core Module
const { adminUser, adminGroup } = await seedCoreData(prisma);
// Seed Finance Module (depends on core data)
await seedFinanceAccountingData(prisma, adminUser, adminGroup);
}
```
### **📋 Mandatory Seeding Requirements**
**IMPORTANT: Every time a new module is added, this seeding guide section MUST be updated** to include the new module's seeding requirements and workflow.
**ALL new models and modules MUST be added to appropriate seed files** to ensure:
#### **New Model Seeding**
1. **Create Seed Function**: Add seeding logic to appropriate module seed file
2. **Handle Dependencies**: Ensure dependent data is created first
3. **Data Consistency**: Use same data structure across environments
4. **Test Seeding**: Verify with `pnpm db:seed`
#### **Module Dependencies**
- **Core Module**: Independent (seeds first)
- **Finance Module**: Depends on Core (needs adminUser, adminGroup)
- **Future Modules**: Define dependencies clearly
#### **Seeding Workflow**
1. **Create Model**: Define new Prisma model in module directory
2. **Update Schema**: Add to main schema.prisma
3. **Generate Client**: `pnpm db:generate`
4. **Add Seed Data**: Create seeding function in module seed file
5. **Update Main Seed**: Call new seed function in proper order
6. **Test**: `pnpm db:push && pnpm db:seed`
7. **Verify**: Check data with `pnpm db:studio`
### **🔧 Type Definitions**
Update `/types/prisma.ts` for new models:
```typescript
export interface NewModelWithRelations {
id: string;
// ... fields
// Include related models if needed
}
```
### **✅ Verification Commands**
```bash
# Complete database reset and reseed
pnpm db:push --force-reset && pnpm db:seed
# Generate Prisma client
pnpm db:generate
# View database structure
pnpm db:studio
# Test build with new models
pnpm build
```
### **📝 Best Practices**
#### **Model Organization**
- **Module Separation**: Keep models in appropriate module directories
- **Clear Naming**: Use descriptive model and field names
- **Consistent Fields**: Include standard audit fields
- **Proper Relations**: Define relationships clearly
#### **Seeding Best Practices**
- **Idempotent Operations**: Use upsert for safe re-seeding
- **Dependency Order**: Seed dependent data after prerequisites
- **Error Handling**: Include proper error handling and logging
- **Data Validation**: Ensure seeded data meets constraints
#### **Type Safety**
- **Interface Updates**: Update TypeScript types for new models
- **Proper Typing**: Use specific types instead of 'any'
- **Relation Types**: Include related model types in interfaces
**Remember**: Any model not properly seeded will cause missing data and broken functionality after database reset.
---
## 🤝 Collaboration Notes
### Communication Style
- Be concise and direct in responses
- Focus on the specific task requested
- Provide clear explanations for complex changes
- Use proper code formatting and structure
### Problem Solving
- Always check existing code patterns before implementing new solutions
- Follow established conventions and best practices
- Consider security implications for all changes
- Test thoroughly before marking tasks complete

36
README.md Normal file
View File

@ -0,0 +1,36 @@
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

163
TODO-kreatiVortex-platform.md Normal file
View File

@ -0,0 +1,163 @@
# TODO: kreatiVortex - Platform Pembelajaran Tari Online
**Created by:** AI Assistant
**Date:** 2025-11-28
**Purpose:** Complete development of kreatiVortex online dance learning platform with user management, video content, forums, and assignment system
## 📋 Task Breakdown
### Phase 1: Project Setup & Foundation
- [ ] Initialize Next.js 16+ project with TypeScript
- [ ] Install and configure Better Auth framework
- [ ] Set up Prisma ORM with database connection
- [ ] Configure project structure following AI_GUIDE.md patterns
- [ ] Set up ESLint, TypeScript configuration
- [ ] Create basic layout and routing structure
### Phase 2: Database Schema & Models
- [ ] Create User model with role-based access (Administrator, Pendidik, Calon Pendidik, Umum)
- [ ] Create Class/Instansi model for class management
- [ ] Create Video model with YouTube/local file support
- [ ] Create Forum model (General and Class-based)
- [ ] Create Assignment model with Word document support
- [ ] Create Comment model for video and forum interactions
- [ ] Add audit fields (createdBy, createdAt, updatedAt, updatedBy)
- [ ] Generate Prisma client and push schema to database
- [ ] Create seed data for initial users and roles
### Phase 3: Authentication & User Management
- [ ] Implement Better Auth configuration with role-based access
- [ ] Create landing page with Login, Register, Mulai Sekarang buttons
- [ ] Implement basic registration (Name, Email, Password, Password Confirmation)
- [ ] Create role upgrade forms (Pendidik and Calon Pendidik registration)
- [ ] Implement login/logout functionality
- [ ] Create user dashboard with role-specific options
- [ ] Add authorization middleware for protected routes
### Phase 4: Core UI Components & Layout
- [ ] Create main layout with navigation (Beranda, Teori, Praktik, Template Makalah)
- [ ] Implement Navy (#000080), Gray (#A9A9A9), White (#FFFFFF) color scheme
- [ ] Add background.jpg with overlay effect
- [ ] Create AppDataView component for data tables
- [ ] Create AppForm component for forms
- [ ] Create ActionButton component for buttons
- [ ] Ensure responsive design and mobile-first approach
- [ ] Add skeleton loading states
### Phase 5: Video Management System
- [ ] Create video upload page with file/YouTube options
- [ ] Implement YouTube URL validation and embedding
- [ ] Create video player page with comments
- [ ] Implement Beranda page showing community videos
- [ ] Create video filtering (by uploader, latest, popular)
- [ ] Add administrator-specific video placement options
- [ ] Implement video storage and compression for local files
### Phase 6: Learning Content Management
- [ ] Create Teori page for theoretical content
- [ ] Create Praktik page for practical content
- [ ] Implement administrator-only content placement for Teori/Praktik
- [ ] Create Template Makalah page for document downloads
- [ ] Add content categorization and organization
- [ ] Implement content suggestion system for Pendidik
### Phase 7: Forum & Collaboration System
- [ ] Create Forum Umum for all users
- [ ] Create Forum Group/Kelas for Pendidik and Calon Pendidik
- [ ] Implement thread creation and reply functionality
- [ ] Add forum moderation features
- [ ] Create class-based discussion organization
- [ ] Implement rich text editor for forum posts
### Phase 8: Assignment & Document Management
- [ ] Create assignment creation system for Pendidik
- [ ] Implement Word document upload for Calon Pendidik
- [ ] Create revision system with document comparison
- [ ] Add assignment tracking and status management
- [ ] Implement notification system for assignments
- [ ] Create document download and management features
### Phase 9: Class Management System
- [ ] Create class creation and management for Pendidik
- [ ] Implement class joining system for Calon Pendidik
- [ ] Add class member management
- [ ] Create class-specific content organization
- [ ] Implement class analytics and reporting
- [ ] Add class approval workflows
### Phase 10: API Development
- [ ] Create user management API endpoints
- [ ] Create video CRUD API endpoints
- [ ] Create forum API endpoints
- [ ] Create assignment API endpoints
- [ ] Create class management API endpoints
- [ ] Implement proper error handling and validation
- [ ] Add authentication and authorization checks
- [ ] Create TypeScript interfaces for API responses
### Phase 11: Testing & Quality Assurance
- [ ] Run ESLint (0 errors, 0 warnings)
- [ ] Run TypeScript type checking (0 errors)
- [ ] Perform build test (successful compilation)
- [ ] Test authentication flows end-to-end
- [ ] Test CRUD operations functionality
- [ ] Test permission matrix and role-based access
- [ ] Test video upload and playback functionality
- [ ] Test forum and assignment workflows
- [ ] Perform responsive design testing
- [ ] Test with MCP Server for browser automation
### Phase 12: Documentation & Deployment
- [ ] Update README.md with project structure and features
- [ ] Document API endpoints and usage
- [ ] Create component documentation
- [ ] Add deployment configuration
- [ ] Perform final security review
- [ ] Optimize performance and loading times
## 🎯 Expected Outcomes
- [ ] Complete kreatiVortex platform with all required features
- [ ] Four-tier user role system with proper access control
- [ ] Video management with local and YouTube support
- [ ] Forum system for community and class discussions
- [ ] Assignment system with Word document support
- [ ] Class management and organization
- [ ] Responsive design with Navy/Gray/White color scheme
- [ ] Better Auth integration for secure authentication
- [ ] Comprehensive API with proper error handling
- [ ] Mobile-responsive and accessible design
## ⚠️ Risks & Considerations
- **Video Storage**: Local file storage may require significant server space and compression
- **YouTube Integration**: Direct URL embedding without API may have limitations
- **Document Processing**: Word document handling requires proper file type validation
- **Role Complexity**: Four-tier role system requires careful permission management
- **Performance**: Video streaming and large file uploads may impact performance
- **Security**: User data (especially NIM and documents) requires proper encryption
- **Scalability**: System must handle growing number of users, videos, and documents
## 🔄 Dependencies
- **Next.js 16+**: Core framework for the application
- **Better Auth**: Authentication and authorization framework
- **Prisma ORM**: Database management and migrations
- **TypeScript**: Type safety and development experience
- **shadcn/ui**: UI component library
- **Database**: PostgreSQL or MySQL for data storage
- **File Storage**: Local storage or cloud storage for videos and documents
- **YouTube API**: Optional for enhanced YouTube integration
- **Rich Text Editor**: For forum posts and content creation

BIN
app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

122
app/globals.css Normal file
View File

@ -0,0 +1,122 @@
@import "tailwindcss";
@import "tw-animate-css";
@custom-variant dark (&:is(.dark *));
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
--color-sidebar-ring: var(--sidebar-ring);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar: var(--sidebar);
--color-chart-5: var(--chart-5);
--color-chart-4: var(--chart-4);
--color-chart-3: var(--chart-3);
--color-chart-2: var(--chart-2);
--color-chart-1: var(--chart-1);
--color-ring: var(--ring);
--color-input: var(--input);
--color-border: var(--border);
--color-destructive: var(--destructive);
--color-accent-foreground: var(--accent-foreground);
--color-accent: var(--accent);
--color-muted-foreground: var(--muted-foreground);
--color-muted: var(--muted);
--color-secondary-foreground: var(--secondary-foreground);
--color-secondary: var(--secondary);
--color-primary-foreground: var(--primary-foreground);
--color-primary: var(--primary);
--color-popover-foreground: var(--popover-foreground);
--color-popover: var(--popover);
--color-card-foreground: var(--card-foreground);
--color-card: var(--card);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
}
:root {
--radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
}
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
}
}

34
app/layout.tsx Normal file
View File

@ -0,0 +1,34 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
</body>
</html>
);
}

65
app/page.tsx Normal file
View File

@ -0,0 +1,65 @@
import Image from "next/image";
export default function Home() {
return (
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
<main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
<Image
className="dark:invert"
src="/next.svg"
alt="Next.js logo"
width={100}
height={20}
priority
/>
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
To get started, edit the page.tsx file.
</h1>
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
Looking for a starting point or more instructions? Head over to{" "}
<a
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
className="font-medium text-zinc-950 dark:text-zinc-50"
>
Templates
</a>{" "}
or the{" "}
<a
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
className="font-medium text-zinc-950 dark:text-zinc-50"
>
Learning
</a>{" "}
center.
</p>
</div>
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
<a
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
className="dark:invert"
src="/vercel.svg"
alt="Vercel logomark"
width={16}
height={16}
/>
Deploy Now
</a>
<a
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Documentation
</a>
</div>
</main>
</div>
);
}

1187
bun.lock Normal file
View File

File diff suppressed because it is too large Load Diff

22
components.json Normal file
View File

@ -0,0 +1,22 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "",
"css": "app/globals.css",
"baseColor": "neutral",
"cssVariables": true,
"prefix": ""
},
"iconLibrary": "lucide",
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
},
"registries": {}
}

18
eslint.config.mjs Normal file
View File

@ -0,0 +1,18 @@
import { defineConfig, globalIgnores } from "eslint/config";
import nextVitals from "eslint-config-next/core-web-vitals";
import nextTs from "eslint-config-next/typescript";
const eslintConfig = defineConfig([
...nextVitals,
...nextTs,
// Override default ignores of eslint-config-next.
globalIgnores([
// Default ignores of eslint-config-next:
".next/**",
"out/**",
"build/**",
"next-env.d.ts",
]),
]);
export default eslintConfig;

9
lib/auth.ts Normal file
View File

@ -0,0 +1,9 @@
import { betterAuth } from "better-auth";
import { prismaAdapter } from "better-auth/adapters/prisma";
import { prisma } from "./prisma";
export const auth = betterAuth({
database: prismaAdapter(prisma, {
provider: "postgresql",
}),
});

8
lib/prisma.ts Normal file
View File

@ -0,0 +1,8 @@
import 'dotenv/config'
import { PrismaPg } from '@prisma/adapter-pg'
import { PrismaClient } from '../prisma/generated/prisma/client'
const connectionString = `${process.env.DATABASE_URL}`
const adapter = new PrismaPg({ connectionString })
export const prisma = new PrismaClient({ adapter })

6
lib/utils.ts Normal file
View File

@ -0,0 +1,6 @@
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}

7
next.config.ts Normal file
View File

@ -0,0 +1,7 @@
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
/* config options here */
};
export default nextConfig;

10
opencode.json Normal file
View File

@ -0,0 +1,10 @@
{
"$schema": "https://opencode.ai/config.json",
"mcp": {
"Better Auth": {
"type": "remote",
"url": "https://mcp.chonkie.ai/better-auth/better-auth-builder/mcp",
"enabled": true
}
}
}

42
package.json Normal file
View File

@ -0,0 +1,42 @@
{
"name": "kreativortex",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint",
"db:generate": "prisma generate",
"db:seed": "prisma db seed",
"db:studio": "prisma studio"
},
"dependencies": {
"@prisma/adapter-pg": "^7.0.1",
"@types/pg": "^8.15.6",
"better-auth": "^1.4.3",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"lucide-react": "^0.555.0",
"next": "16.0.5",
"prisma": "^7.0.1",
"react": "19.2.0",
"react-dom": "19.2.0",
"tailwind-merge": "^3.4.0",
"tsx": "^4.20.6"
},
"devDependencies": {
"@tailwindcss/postcss": "^4",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"eslint": "^9",
"eslint-config-next": "16.0.5",
"tailwindcss": "^4",
"tw-animate-css": "^1.4.0",
"typescript": "^5"
},
"prisma": {
"schema": "./prisma"
}
}

7
postcss.config.mjs Normal file
View File

@ -0,0 +1,7 @@
const config = {
plugins: {
"@tailwindcss/postcss": {},
},
};
export default config;

13
prisma.config.ts Normal file
View File

@ -0,0 +1,13 @@
import { defineConfig, env } from 'prisma/config'
import 'dotenv/config'
export default defineConfig({
schema: 'prisma',
migrations: {
path: 'prisma/migrations',
seed: 'tsx prisma/seed.ts',
},
datasource: {
url: env('DATABASE_URL'),
},
})

62
prisma/models/auth.prisma Normal file
View File

@ -0,0 +1,62 @@
model User {
id String @id
name String
email String
emailVerified Boolean @default(false)
image String?
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
sessions Session[]
accounts Account[]
@@unique([email])
@@map("user")
}
model Session {
id String @id
expiresAt DateTime
token String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
ipAddress String?
userAgent String?
userId String
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
@@unique([token])
@@index([userId])
@@map("session")
}
model Account {
id String @id
accountId String
providerId String
userId String
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
accessToken String?
refreshToken String?
idToken String?
accessTokenExpiresAt DateTime?
refreshTokenExpiresAt DateTime?
scope String?
password String?
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
@@index([userId])
@@map("account")
}
model Verification {
id String @id
identifier String
value String
expiresAt DateTime
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
@@index([identifier])
@@map("verification")
}

15
prisma/schema.prisma Normal file
View File

@ -0,0 +1,15 @@
// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema
// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
// Try Prisma Accelerate: https://pris.ly/cli/accelerate-init
generator client {
provider = "prisma-client"
engineType = "client"
output = "./generated/prisma"
}
datasource db {
provider = "postgresql"
}

1
public/file.svg Normal file
View File

@ -0,0 +1 @@
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 391 B

1
public/globe.svg Normal file
View File

@ -0,0 +1 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

1
public/next.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
public/vercel.svg Normal file
View File

@ -0,0 +1 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 128 B

1
public/window.svg Normal file
View File

@ -0,0 +1 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 385 B

257
requirements.md Normal file
View File

@ -0,0 +1,257 @@
## **Dokumen Requirements Sistem: kreatiVortex - Platform Pembelajaran Tari Online**
**Versi:** 1.0 (Final)
**Tanggal:** 24 Mei 2024
**Status:** Disetujui untuk Pengembangan
---
### **1. Pendahuluan**
Dokumen ini mendefinisikan kebutuhan fungsional dan non-fungsional untuk pengembangan website **kreatiVortex**, sebuah platform pembelajaran Tari online. Platform ini dirancang untuk menghubungkan **Pendidik** (instruktur tari) dengan **Calon Pendidik** (peserta didik) dalam sebuah ekosistem pembelajaran yang interaktif, kolaboratif, dan terstruktur. Sistem ini memungkinkan kontribusi konten dari semua pengguna, sambil tetap menjaga kualitas kurikulum resmi di bawah pengawasan Administrator.
### **2. Tujuan Proyek**
* Menyediakan platform terpusat dan komprehensif untuk pembelajaran tari, dari teori dasar hingga praktik lanjutan.
* Memfasilitasi **Pendidik** dalam mengelola konten pembelajaran, mengelola kelas, dan memberikan bimbingan terstruktur kepada Calon Pendidik.
* Memberikan pengalaman belajar yang menarik dan partisipatif bagi **Calon Pendidik** melalui akses video, diskusi, dan penyerahan tugas.
* Membangun komunitas pembelajaran tari yang aktif melalui fitur berbagi video terbuka dan FGD.
* Menjaga integritas kurikulum dengan memisahkan konten komunitas (Beranda) dan konten resmi (Menu Navigasi).
### **3. Definisi Peran Pengguna (User Roles)**
Sistem akan memiliki empat peran utama dengan tingkatan akses yang berbeda:
1. **Administrator:**
* Pengelola tertinggi sistem dengan akses penuh.
* Bertanggung jawab atas manajemen pengguna (semua peran), verifikasi konten, dan pengaturan sistem.
* **Khusus Video:** Dapat mengunggah video dan memilih untuk menampilkannya di **Beranda** dan/atau di **Menu Navigasi** (Teori, Praktik, dll.). Memiliki otoritas penuh dalam mengelola konten kurikuler.
* Memoderasi seluruh platform.
2. **Pendidik (Educator):**
* Pembuat konten dan instruktur kelas.
* Dapat membuat dan mengelola kelas/instansi, memberikan tugas, serta memberikan umpan balik (revisi) kepada Calon Pendidik.
* **Khusus Video:** Dapat mengunggah video, namun video tersebut **secara default hanya akan tampil di Beranda**. Tidak dapat mempublikasikan video langsung ke kategori di Menu Navigasi.
* Memoderasi diskusi di kelas yang mereka kelola.
3. **Calon Pendidik (Prospective Educator / Student):**
* Peserta didik.
* Dapat mendaftar ke kelas, mengakses materi pembelajaran, mengunggah tugas, serta berpartisipasi dalam FGD dan forum.
* **Khusus Video:** Dapat mengunggah video (misalnya: video hasil praktik, video tugas, atau video berbagi), namun video tersebut **secara default hanya akan tampil di Beranda**.
4. **Umum (General User):**
* Pengguna dasar yang telah melakukan registrasi akun namun belum memilih role spesifik.
* Dapat mengakses Beranda (video komunitas) dan Forum Umum untuk diskusi terbuka.
* Dapat mengunggah video ke Beranda (misalnya: video latihan, video inspirasi, atau video berbagi).
* **Akses Terbatas:** Tidak dapat mengakses Menu Navigasi (Teori, Praktik, Template Makalah), Forum Group/Kelas, atau sistem Assignment.
* **Opsi Upgrade:** Dapat melakukan upgrade ke Pendidik atau Calon Pendidik kapan saja melalui dashboard.
* **Default State:** Role ini diberikan otomatis setelah pengguna menyelesaikan registrasi akun dasar (Nama, Email, Password).
### **4. Fitur-Fitur Utama (Functional Requirements)**
#### **4.1. Manajemen Pengguna & Autentikasi**
* **Halaman Awal (Landing Page):**
* Menampilkan informasi singkat tentang kreatiVortex.
* Memiliki tiga tombol utama: **Login**, **Register**, dan **Mulai Sekarang**.
* Tombol "Mulai Sekarang" akan mengarahkan pengguna ke halaman pendaftaran (Register).
* **Pendaftaran Akun (Register):**
* **Tahap 1 - Registrasi Akun Dasar:**
* Semua pengguna (baik yang akan menjadi Pendidik, Calon Pendidik, atau tetap Umum) melakukan pendaftaran akun terlebih dahulu dengan mengisi:
* Nama Lengkap
* Email
* Password
* Password Confirmation
* Setelah berhasil mendaftar, pengguna dapat login ke sistem.
* **Tahap 2 - Pemilihan Role (Opsional, dapat dilakukan kapan saja):**
* Setelah registrasi akun dasar, pengguna diberi default role **Umum** dan dapat login ke sistem.
* Pengguna dapat memilih untuk upgrade ke Pendidik atau Calon Pendidik saat pertama kali login, atau melakukannya nanti.
* **Catatan Penting:** Akses ke **Forum Group** hanya tersedia bagi pengguna yang sudah melakukan registrasi sebagai Pendidik atau Calon Pendidik. Pengguna dengan role Umum tetap dapat mengakses Forum Umum.
* Pengguna dapat memilih salah satu dari tiga opsi:
* **Tetap Umum** (melanjutkan dengan akses dasar)
* **Register sebagai Pendidik**
* **Join sebagai Calon Pendidik**
* **Form Registrasi sebagai Pendidik:**
* Instansi
* Nama Kelas (yang akan dibuat)
* Jenjang Mengajar: Rich Text Editor
* Tujuan Bergabung: Rich Text Editor
* Setelah mengisi form ini, role pengguna akan diset sebagai "Pendidik" dan dapat mengakses Forum Group.
* **Form Join sebagai Calon Pendidik:**
* Instansi
* Pilih Kelas (dari daftar kelas yang sudah dibuat oleh Pendidik)
* NIM (Nomor Induk Mahasiswa)
* Setelah mengisi form ini, role pengguna akan diset sebagai "Calon Pendidik" dan dapat mengakses Forum Group.
* **Login & Logout:**
* Halaman login untuk pengguna terdaftar dengan validasi email dan password.
* Sesi pengguna akan disimpan hingga mereka melakukan logout.
* Pengguna dengan role Umum tetap dapat mengakses Beranda, Forum Umum, dan konten umum, tetapi tidak dapat mengakses Forum Group, Menu Navigasi, atau sistem Assignment.
* **Dashboard/Profil Pengguna:**
* Setiap pengguna memiliki dashboard pribadi setelah login.
* Menampilkan informasi profil, riwayat aktivitas, kelas yang diikuti (untuk Calon Pendidik), atau kelas yang dikelola (untuk Pendidik).
* Untuk pengguna dengan role Umum, dashboard akan menampilkan opsi untuk "Tetap Umum", "Register sebagai Pendidik", atau "Join sebagai Calon Pendidik".
* Dashboard menampilkan informasi profil, riwayat aktivitas, kelas yang diikuti (untuk Calon Pendidik), atau kelas yang dikelola (untuk Pendidik).
#### **4.2. Beranda & Manajemen Video**
* **Beranda (Post-Login):**
* Menampilkan daftar video dari **semua role pengguna** (Administrator, Pendidik, Calon Pendidik, Umum) dalam bentuk grid atau list.
* Video di sini adalah agregasi konten dari seluruh komunitas.
* Video dapat difilter berdasarkan pengunggah, terbaru, atau terpopuler.
* **Halaman Detail Video:**
* Memutar video yang dipilih.
* Menampilkan informasi video: **Judul**, **Nama Pengunggah**, dan **Keterangan**.
* Terdapat **kolom komentar** di bawah video untuk interaksi antar pengguna.
* **Unggah Video (Upload Video):**
* **Semua role pengguna (Administrator, Pendidik, Calon Pendidik, Umum) dapat mengunggah video.**
* Form unggah video akan memiliki elemen-elemen berikut:
* **Pilihan Sumber Video (Radio Button):**
* **File Video Lokal:** Upload file video langsung dari device
* **Link YouTube:** Masukkan URL video YouTube untuk direct embedding (tanpa API key)
* **Jika memilih "File Video Lokal":**
* File video input (extension: MP4, AVI, MOV, WMV)
* Progress upload
* Comfirmasi kapasitas maksimal file
* **Jika memilih "Link YouTube":**
* Input URL YouTube
* Preview otomatis setelah memasukkan URL
* Validasi format URL YouTube
* Extract video ID untuk direct embedding
* Generate thumbnail dari YouTube video
* Embed video langsung tanpa API calls
* Judul Video
* Keterangan/Deskripsi
* **Opsi Penempatan Video (Hanya untuk Administrator):**
* Saat Administrator mengunggah (baik file lokal atau YouTube), akan ada opsi tambahan:
* Checkbox: "Tampilkan di Beranda" (Dicentang secara default).
* Dropdown/Checkbox: "Tampilkan di Menu" (dengan pilihan: "Teori", "Praktik", "Tidak Ada"). Administrator dapat memilih lebih dari satu kategori.
* **Untuk Pendidik dan Calon Pendidik:**
* Tidak ada opsi penempatan. Video yang diunggah (baik file lokal atau YouTube) akan otomatis masuk ke halaman Beranda.
#### **4.3. Menu dan Kategori Pembelajaran**
* **Menu Navigasi Utama:**
* **Beranda:** Menuju halaman utama daftar video komunitas.
* **Teori:** Menampilkan daftar video dan materi terkait teori tari (contoh: Pengetahuan dasar tari, Unsur utama gerak, dll.).
* **Praktik:** Menampilkan daftar video terkait praktik tari (contoh: Olah Tubuh, Imitasi Gerak, Gerak Dasar).
* **Template Makalah:** Halaman khusus untuk mengunduh template makalah/tugas yang disediakan oleh Administrator atau Pendidik.
* **Pengelolaan Konten Menu:**
* Menu "Teori" dan "Praktik" secara eksklusif hanya akan menampilkan video yang **diunggah dan diatur oleh Administrator**.
* **Pendidik** dapat mengusulkan video kepada Administrator untuk dipertimbangkan dimasukkan ke dalam menu, tetapi tidak bisa mempublikasikannya sendiri.
#### **4.4. Fitur Kolaborasi: Kelas dan Forum Group**
* **Manajemen Kelas/Instansi:**
* **Pendidik** dapat membuat, mengedit, dan menghapus kelas.
* **Calon Pendidik** dapat bergabung dengan kelas saat melakukan registrasi sebagai Calon Pendidik atau melalui fitur "Join Class" yang memerlukan persetujuan Pendidik.
* **Forum Group (Menggabungkan FGD dan Forum Tugas):**
* Forum Group adalah fitur diskusi dan kolaborasi yang terbagi menjadi **dua tipe**:
* **1. Forum Umum:**
* Dapat diakses oleh **semua pengguna** (termasuk yang belum memilih role).
* Berupa forum diskusi terbuka untuk berbagi informasi, tips, dan diskusi umum seputar tari.
* Semua pengguna dapat membuat topik baru (thread) dan membalas komentar.
* **2. Forum Group/Kelas:**
* **Hanya dapat diakses oleh pengguna yang sudah melakukan registrasi sebagai Pendidik atau Calon Pendidik dan tergabung dalam kelas tertentu.**
* Berupa forum diskusi berbasis teks di dalam setiap kelas.
* **Pendidik** dan **Calon Pendidik** yang tergabung dalam kelas dapat membuat topik baru (thread) dan membalas komentar.
* **Fitur Tugas & Revisi di dalam Forum Group/Kelas:**
* **Alur Kerja untuk Calon Pendidik:**
1. Melihat tugas yang diberikan oleh Pendidik di Forum Group/Kelas.
2. Mengunggah dokumen tugas dalam format **Word (.doc/.docx)**.
3. Menambahkan **komentar teks** sebagai keterangan tambahan.
* **Alur Kerja untuk Pendidik:**
1. Melihat daftar pengumpulan tugas dari Calon Pendidik.
2. Mengunduh dokumen Word yang dikirim.
3. Memberikan feedback dengan mengunggah **"Word Hasil Revisi"**.
4. Menambahkan **komentar teks** untuk menjelaskan revisi yang dilakukan.
* Sistem harus menampilkan dokumen asli dan dokumen revisi secara berdampingan atau terhubung untuk memudahkan perbandingan.
---
### **5. Tabel Ringkasan Hak Akses**
| Fitur / Aksi | Administrator | Pendidik | Calon Pendidik | Umum |
| :--- | :---: | :---: | :---: | :---: |
| **Upload Video (File Lokal)** | ✅ (Ya) | ✅ (Ya) | ✅ (Ya) | ✅ (Ya) |
| **Upload Video (YouTube Link)** | ✅ (Ya) | ✅ (Ya) | ✅ (Ya) | ✅ (Ya) |
| **Video Tampil di Beranda** | ✅ (Ya) | ✅ (Ya, Otomatis) | ✅ (Ya, Otomatis) | ✅ (Ya, Otomatis) |
| **Memilih Penempatan Video** | ✅ (Ya) | ❌ (Tidak) | ❌ (Tidak) | ❌ (Tidak) |
| **Video Tampil di Menu Navigasi** | ✅ (Ya, Bisa dipilih) | ❌ (Tidak) | ❌ (Tidak) | ❌ (Tidak) |
| **Akses Menu Navigasi (Teori/Praktik)** | ✅ (Ya) | ✅ (Ya, View) | ✅ (Ya, View) | ❌ (Tidak) |
| **Akses Forum Umum** | ✅ (Ya) | ✅ (Ya) | ✅ (Ya) | ✅ (Ya) |
| **Akses Forum Group/Kelas** | ✅ (Ya, Moderasi) | ✅ (Ya, Moderasi) | ✅ (Ya) | ❌ (Tidak) |
| **Membuat Kelas** | ✅ (Ya) | ✅ (Ya) | ❌ (Tidak) | ❌ (Tidak) |
| **Bergabung ke Kelas** | ✅ (Ya) | ✅ (Ya) | ✅ (Ya) | ❌ (Tidak) |
| **Membuat Tugas** | ❌ (Tidak) | ✅ (Ya) | ❌ (Tidak) | ❌ (Tidak) |
| **Upload Tugas (Word)** | ❌ (Tidak) | ✅ (Ya, Revisi) | ✅ (Ya, Pengumpulan) | ❌ (Tidak) |
| **Akses Template Makalah** | ✅ (Ya) | ✅ (Ya, Upload) | ✅ (Ya, Download) | ❌ (Tidak) |
| **Upgrade Role** | ❌ (Tidak, Max) | ❌ (Tidak) | ❌ (Tidak) | ✅ (Ya) |
| **Mengelola Pengguna Lain** | ✅ (Ya) | ❌ (Tidak) | ❌ (Tidak) |
---
### **6. Alur Pengguna (User Flows)**
* **Alur Pengguna Umum (Default Role):**
1. Mengunjungi halaman awal -> Klik "Daftar" -> Isi formulir registrasi akun dasar (Nama, Email, Password, Password Confirmation) -> Login dengan role Umum.
2. Dapat menjelajah Beranda, melihat video komunitas dari SEMUA role, mengupload video ke Beranda.
3. Dapat mengakses Forum Umum untuk berdiskusi.
4. Dapat melihat dashboard dengan opsi upgrade ke Pendidik atau Calon Pendidik.
5. **Akses Terbatas:** Tidak dapat mengakses Menu Navigasi (Teori, Praktik, Template Makalah), Forum Group/Kelas, atau sistem Assignment hingga melakukan upgrade role.
* **Alur Calon Pendidik:**
1. Mengunjungi halaman awal -> Klik "Daftar" -> Isi formulir registrasi akun dasar (Nama, Email, Password, Password Confirmation) -> Login.
2. Pilih "Join sebagai Calon Pendidik" (dapat dilakukan saat pertama login atau nanti) -> Isi formulir (Instansi, Pilih Kelas, NIM).
3. Di Beranda, menjelajah video dari komunitas (termasuk dari role Umum) dan video kurikuler di Menu.
4. Mengakses Forum Umum dan Forum Group/Kelas untuk berdiskusi.
5. Mengerjakan tugas di Forum Group/Kelas -> Upload Word + Komentar -> Tunggu revisi dari Pendidik.
6. Mengunggah video praktik pribadi ke Beranda.
* **Alur Pendidik:**
1. Mengunjungi halaman awal -> Klik "Daftar" -> Isi formulir registrasi akun dasar (Nama, Email, Password, Password Confirmation) -> Login.
2. Pilih "Register sebagai Pendidik" (dapat dilakukan saat pertama login atau nanti) -> Isi formulir (Instansi, Nama Kelas, Jenjang Mengajar, Tujuan Bergabung).
3. Membuat kelas baru -> Mengunggah video pembelajaran ke Beranda.
4. Mengusulkan video ke Administrator untuk dimasukkan ke Menu kurikuler.
5. Membuat topik diskusi di Forum Umum dan Forum Group/Kelas.
6. Membuat tugas di Forum Group/Kelas -> Menunggu pengumpulan -> Memberikan revisi.
* **Alur Administrator:**
1. Login dengan akun Administrator.
2. Memverifikasi Pendidik/Calon Pendidik baru (jika diperlukan).
3. Mengunggah video kurikuler dan menempatkannya di Menu Navigasi.
4. Meninjau usulan video dari Pendidik.
5. Mengelola konten dan pengguna jika ada masalah.
---
### **7. Persyaratan Non-Fungsional (Non-Functional Requirements)**
* **Performa:** Halaman harus dimuat dalam waktu < 3 detik. Video streaming harus lancar tanpa buffering yang signifikan. Embed video YouTube harus fast loading.
* **Keamanan:** Data pengguna (terutama NIM, password, dan dokumen pribadi) harus dienkripsi dan dilindungi. Sistem harus tahan terhadap serangan SQL Injection dan XSS. Menggunakan **Better Auth** framework untuk authentication modern dengan secure session management, role-based access control, dan protection terhadap common web vulnerabilities.
* **Usability:** Antarmuka harus intuitif dan mudah dinavigasi, bahkan untuk pengguna dengan kemampuan teknis dasar. Konsistensi desain di seluruh halaman.
* **Kompatibilitas:** Website harus responsif dan dapat diakses dengan baik di berbagai perangkat (desktop, tablet, mobile) dan browser modern (Chrome, Firefox, Safari).
* **Skalabilitas:** Arsitektur sistem harus dirancang untuk dapat menampung peningkatan jumlah pengguna, video, dan dokumen di masa depan.
* **Storage Management:**
* **File Video Lokal:** Dibutuhkan storage server yang cukup dengan kompresi video otomatis untuk menghemat space.
* **YouTube Embed:** Menggunakan direct URL embedding tanpa API key, lebih stabil dan hemat biaya.
* Sistem harus bisa mengelola kedua metode storage dengan baik.
* **Desain & User Interface:**
* **Skema Warna:**
* **Navy (#000080):** Warna utama untuk header, tombol penting, dan elemen interaktif
* **Abu-abu Redup (#A9A9A9):** Warna sekunder untuk background card, border, dan text次要
* **Putih (#FFFFFF):** Warna untuk text, background content area, dan space kosong
* **Background Halaman:**
* Menggunakan file `background.jpg` sebagai background utama di seluruh halaman
* Background harus memiliki overlay effect untuk memastikan text tetap readable
* Background akan fixed position agar tidak scroll dengan content
* **Konsistensi Visual:**
* Semua halaman (Landing, Login, Dashboard, Beranda, dll) menggunakan skema warna yang sama
* Card dan container harus memiliki semi-transparent background untuk melihat efek background
* Typography yang clean dan modern dengan kontras yang baik terhadap background
---
### **8. Asumsi & Kendala**
* **Asumsi:**
* Platform akan menggunakan video lokal dan direct URL YouTube untuk embed video (tanpa API dependencies).
* Platform akan menggunakan **Better Auth** framework untuk authentication dengan integrasi mudah ke Next.js 16+ dan Prisma ORM.
* Fitur FGD pada tahap awal akan berbasis forum teks, bukan video conference.
* File `background.jpg` telah tersedia dalam ukuran yang optimal untuk web dan responsive design.

34
tsconfig.json Normal file
View File

@ -0,0 +1,34 @@
{
"compilerOptions": {
"target": "ES2017",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react-jsx",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./*"]
}
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts",
".next/dev/types/**/*.ts",
"**/*.mts"
],
"exclude": ["node_modules"]
}