Done. Svelte Themes

Done.

Task Management platform with Svelte and Svelte Kit, Firebase and Stripe

Download

Done. - Task Management Application

A modern task management application built with SvelteKit, TypeScript, and Firebase. This application provides a comprehensive solution for managing tasks, goals, and team collaboration with a clean, intuitive interface.

Features

  • Task Management: Create, edit, delete, and track tasks with priority levels and due dates
  • User Management: Multi-user support with role-based access control
  • Goal Tracking: Set and monitor progress towards goals
  • Real-time Updates: Firebase integration for live data synchronization
  • Responsive Design: Modern UI built with Tailwind CSS
  • Component Library: Reusable Svelte components for consistent design
  • Type Safety: Full TypeScript support throughout the application

Project Structure

src/
├── lib/
│   ├── core/                 # Core services (Firebase, Stripe)
│   ├── data/                 # Data layer and mock data
│   ├── services/             # Business logic services
│   ├── shared/               # Shared components and utilities
│   │   ├── components/       # Reusable UI components
│   │   ├── constants/        # Application constants
│   │   ├── layout/           # Layout components
│   │   └── models/           # TypeScript interfaces
│   └── stores/               # Svelte stores for state management
├── routes/                   # SvelteKit pages and layouts
│   ├── tasks/               # Task management pages
│   ├── goals/               # Goal tracking pages
│   ├── components/          # Component showcase
│   └── ...                  # Other feature pages
└── assets/                  # Static assets

Getting Started

Prerequisites

  • Node.js (version 18 or higher)
  • Yarn package manager
  • Firebase project (for backend services)

Installation

  1. Clone the repository

  2. Install dependencies:

    yarn install

  3. Set up environment variables:

    cp env.example .env

    Update .env with your Firebase configuration:

    VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id

Development

# Start development server
yarn dev

# Build for production
yarn build

# Preview production build
yarn preview

# Type checking
yarn check

# Watch mode for type checking
yarn check:watch

Key Technologies

  • SvelteKit: Full-stack framework for building web applications
  • TypeScript: Type-safe JavaScript development
  • Firebase: Backend-as-a-Service for authentication and data storage
  • Tailwind CSS: Utility-first CSS framework for styling
  • Vite: Fast build tool and development server

Pages and Features

  • Dashboard (/): Overview of recent tasks and upcoming goals
  • Tasks (/tasks): Complete task management with CRUD operations
  • Goals (/goals): Goal setting and progress tracking
  • Components (/components): Showcase of reusable UI components
  • Projects (/projects): Project management (coming soon)
  • Decisions (/decisions): Decision tracking (coming soon)
  • SOP Vault (/sop-vault): Standard Operating Procedures (coming soon)
  • Ad-hoc (/ad-hoc): Ad-hoc task management (coming soon)
  • Constraint Buster (/constraint-buster): Constraint identification (coming soon)
  • Vendor Loop (/vendor-loop): Vendor management (coming soon)

Component Library

The application includes a comprehensive component library with:

  • Task Components: TaskCard, TaskList, TaskDrawer
  • Badge Components: StatusBadge, PriorityBadge
  • Button Components: Button, AttachmentButton
  • User Components: UserAvatar, UserGroup
  • Utility Components: DateDisplay, MentionTag, LinkIndicator, DragHandle
  • Layout Components: TopBar, FilterTabs, Sidebar, Header, Footer

Data Models

The application uses well-defined TypeScript interfaces:

  • Task: Core task model with status, priority, and user assignments
  • User: User model with roles and department information
  • Goal: Goal model with progress tracking
  • UITask: Extended task model for UI components

VS Code + Svelte.

Development Notes

Firebase Setup

  1. Create a Firebase project at Firebase Console
  2. Enable Firestore Database
  3. Set up Authentication (optional, for user management)
  4. Configure security rules for your collections
  5. Add your Firebase configuration to the .env file

Component Development

  • All components are located in src/lib/shared/components/
  • Components follow a consistent naming convention and structure
  • Each component includes proper TypeScript interfaces
  • Components are designed to be reusable across the application

State Management

  • User state is managed through Svelte stores (src/lib/stores/)
  • Firebase data is fetched through service classes (src/lib/services/)
  • Component state is managed locally with Svelte's reactive statements

Styling

  • Tailwind CSS is used for all styling
  • Custom CSS classes are defined in src/app.css
  • Components use consistent color schemes and spacing

Data Layer

This directory contains all data-related files including real data services and data models. The data layer provides a clean separation between the UI components and the data sources, making it easier to maintain and test the application.

⚠️ Important Notice

Mock data has been deprecated and replaced with real data services. See mock/DEPRECATED.md for migration details.

Real Data Services

The application now uses real data services located in src/lib/services/:

  • TaskService (src/lib/services/task/taskService.ts) - Handles all task operations
  • GoalService (src/lib/services/goals/task/goalService.ts) - Handles all goal operations
  • UserService (src/lib/services/user/userService.ts) - Handles all user operations
  • BusinessService (src/lib/services/business/businessService.ts) - Handles business operations
  • BillingService (src/lib/services/billing/billingService.ts) - Handles billing operations
  • DataService (src/lib/services/dataService.ts) - Utility functions for data manipulation

Service Usage

Import real data services in your components:

// Import services
import { TaskService } from '$lib/services/task/taskService';
import { GoalService } from '$lib/services/goals/task/goalService';
import { UserService } from '$lib/services/user/userService';

// Or import from the central index
import { TaskService, GoalService, UserService } from '$lib/services';

// Use utility functions
import { getRecentTasks } from '$lib/services/dataService';

Available Services

TaskService

  • getAllTasks() - Get all tasks
  • getTasks(userId) - Get tasks for a specific user
  • getTask(id) - Get a single task by ID
  • createTask(task) - Create a new task
  • updateTask(id, updates) - Update an existing task
  • deleteTask(id) - Delete a task
  • toggleTaskCompletion(id) - Toggle task completion status

GoalService

  • getGoals(userId) - Get goals for a specific user
  • getGoal(id) - Get a single goal by ID
  • createGoal(goal) - Create a new goal
  • updateGoal(id, updates) - Update an existing goal
  • deleteGoal(id) - Delete a goal
  • updateGoalProgress(id, progress) - Update goal progress

UserService

  • getAllUsers() - Get all users
  • getUser(id) - Get a single user by ID
  • getUserByEmail(email) - Get user by email
  • createUser(user) - Create a new user
  • updateUser(id, updates) - Update an existing user
  • deleteUser(id) - Delete a user

Data Models

All services use TypeScript interfaces defined in src/lib/shared/models/:

  • Task: Complete task object with all properties
  • Goal: Complete goal object with all properties
  • User: User object with authentication and profile data
  • Business: Business/workspace object
  • BusinessUser: User within a business context

Integration with Firebase

All services integrate with Firebase Firestore:

  • Real-time data - Changes are reflected immediately
  • Offline support - Works offline with Firebase's built-in caching
  • Security rules - Proper access control through Firestore security rules
  • Optimistic updates - UI updates immediately for better UX
  • Error handling - Comprehensive error handling and user feedback

Business Task Service

This service provides complete CRUD (Create, Read, Update, Delete) operations for business tasks using Firebase Firestore. The service includes comprehensive error handling, data validation, visibility logic, and permission-based access control.

Overview

The BusinessTaskService implements the endpoint specification for /businesses/{businessId}/tasks/{taskId} with the following core features:

  • Visibility Logic: Tasks can be private, team, or business visibility
  • Permission Checks: All operations validate user permissions before execution
  • Team Association: Optional team assignment for tasks
  • Advanced Querying: Filter by status, priority, team, and visibility
  • Comprehensive CRUD: Full create, read, update, delete operations

Data Model

The service works with the BusinessTask interface:

interface BusinessTask {
  id: string;
  title: string;
  description?: string;
  createdBy: string; // User ID who created the task
  assignedTo: string[]; // Array of user IDs assigned to the task
  teamId?: string; // Optional team association
  visibility: "private" | "team" | "business";
  createdAt: Date;
  updatedAt: Date;
  dueDate?: Date;
  startedDate?: Date;
  dateCompleted?: Date;
  priority: 'low' | 'medium' | 'high';
  status: 'not-started' | 'in-progress' | 'completed' | 'overdue' | 'cancelled' | 'paused';
  businessId: string;
}

Core CRUD Operations

1. Create Business Task

Endpoint: POST /businesses/{businessId}/tasks

import { BusinessTaskService } from '$lib/services';

const newTask = await BusinessTaskService.createBusinessTask('business123', {
  title: 'Complete project documentation',
  description: 'Write comprehensive documentation for the new feature',
  createdBy: 'user123',
  assignedTo: ['user123', 'user456'],
  teamId: 'team789', // Optional
  visibility: 'team',
  priority: 'high',
  status: 'not-started',
  dueDate: new Date('2024-12-31')
});

if (newTask.success) {
  console.log('Task created:', newTask.data);
} else {
  console.error('Error:', newTask.error);
}

2. Get Business Task

Endpoint: GET /businesses/{businessId}/tasks/{taskId}

const task = await BusinessTaskService.getBusinessTask(
  'business123', 
  'task456', 
  'user123'
);

if (task.success) {
  console.log('Task:', task.data);
} else {
  console.error('Error:', task.error);
}

3. Update Business Task

Endpoint: PUT /businesses/{businessId}/tasks/{taskId}

const updated = await BusinessTaskService.updateBusinessTask(
  'business123',
  'task456',
  {
    title: 'Updated task title',
    priority: 'medium',
    status: 'in-progress'
  },
  'user123'
);

if (updated.success) {
  console.log('Task updated:', updated.data);
} else {
  console.error('Error:', updated.error);
}

4. Delete Business Task

Endpoint: DELETE /businesses/{businessId}/tasks/{taskId}

const deleted = await BusinessTaskService.deleteBusinessTask(
  'business123',
  'task456',
  'user123'
);

if (deleted.success) {
  console.log('Task deleted successfully');
} else {
  console.error('Error:', deleted.error);
}

Visibility Logic

The service implements comprehensive visibility logic:

Private Tasks

  • Only the creator and assigned users can view/edit
  • Not visible to other team members or business users

Team Tasks

  • Visible to all members of the assigned team
  • Creator and assigned users have full access
  • Other team members have view access based on team permissions

Business Tasks

  • Visible to all business users based on their visibility level:
    • business-read and business-full: Can view all business tasks
    • multi-team: Can view tasks from their visible teams
    • team: Can only view tasks from their own teams

Permission System

The service integrates with the existing permission system:

Create Permissions

  • User must have business-level permissions to create tasks
  • Team validation if teamId is provided

View Permissions

  • Uses PermissionService.canViewTask() for comprehensive visibility checks
  • Respects user's visibility level and team memberships

Edit Permissions

  • Task creator can always edit their own tasks
  • Assigned users can edit tasks assigned to them
  • Team members can edit based on team permissions
  • Business users can edit based on business permissions

Delete Permissions

  • Task creator can always delete their own tasks
  • Team members can delete based on team permissions
  • Business users can delete based on business permissions

Task Service - Firebase CRUD Operations

This service provides complete CRUD (Create, Read, Update, Delete) operations for tasks using Firebase Firestore. The service includes comprehensive error handling, data validation, and support for advanced querying operations.

Basic Usage

import { TaskService } from '$lib/services/task/taskService';
import type { Task } from '$lib/shared/models';

// Example user ID (you'll get this from Firebase Auth or user store)
const userId = 'user123';

Available Methods

The TaskService provides the following methods:

Core CRUD Operations

  • createTask(taskData) - Create a new task
  • getTask(taskId) - Get a single task by ID
  • getAllTasks() - Get all tasks (admin only)
  • getTasks(userId) - Get tasks for a specific user
  • updateTask(taskId, updates) - Update an existing task
  • deleteTask(taskId) - Delete a task
  • toggleTaskCompletion(taskId) - Toggle task completion status

Advanced Querying

  • getTasksByStatus(userId, completed) - Get tasks by completion status
  • getTasksByPriority(userId, priority) - Get tasks by priority level
  • getTasksByDateRange(userId, startDate, endDate) - Get tasks within date range
  • getOverdueTasks(userId) - Get overdue tasks
  • getRecentTasks(limit) - Get recent tasks for dashboard

CRUD Operations

1. Create Task

const newTask = await TaskService.createTask({
  title: 'Complete project documentation',
  description: 'Write comprehensive documentation for the new feature',
  completed: false,
  createdBy: userId,
  assignedTo: [userId, 'user456'],
  dueDate: new Date('2024-12-31'),
  priority: 'high',
  status: 'not-started'
});

if (newTask.success) {
  console.log('Task created:', newTask.data);
} else {
  console.error('Error:', newTask.error);
}

2. Read Tasks

Get All Tasks for a User
const tasks = await TaskService.getTasks(userId);

if (tasks.success) {
  console.log('All tasks:', tasks.data);
} else {
  console.error('Error:', tasks.error);
}
Get Single Task
const task = await TaskService.getTask('taskId123');

if (task.success) {
  console.log('Task:', task.data);
} else {
  console.error('Error:', task.error);
}
Get Tasks by Status
// Get completed tasks
const completedTasks = await TaskService.getTasksByStatus(userId, true);

// Get incomplete tasks
const incompleteTasks = await TaskService.getTasksByStatus(userId, false);
Get Tasks by Priority
const highPriorityTasks = await TaskService.getTasksByPriority(userId, 'high');
const mediumPriorityTasks = await TaskService.getTasksByPriority(userId, 'medium');
const lowPriorityTasks = await TaskService.getTasksByPriority(userId, 'low');

3. Update Task

const updatedTask = await TaskService.updateTask('taskId123', {
  title: 'Updated task title',
  description: 'Updated description',
  priority: 'medium',
  status: 'in-progress',
  assignedTo: ['user123', 'user456', 'user789']
});

if (updatedTask.success) {
  console.log('Task updated:', updatedTask.data);
} else {
  console.error('Error:', updatedTask.error);
}

4. Delete Task

const deleteResult = await TaskService.deleteTask('taskId123');

if (deleteResult.success) {
  console.log('Task deleted successfully');
} else {
  console.error('Error:', deleteResult.error);
}

5. Toggle Task Completion

const toggleResult = await TaskService.toggleTaskCompletion('taskId123');

if (toggleResult.success) {
  console.log('Task completion toggled:', toggleResult.data);
} else {
  console.error('Error:', toggleResult.error);
}

Response Format

All methods return an ApiResponse<T> object with the following structure:

interface ApiResponse<T> {
  success: boolean;
  data?: T;
  error?: string;
  message?: string;
}

Error Handling

The service includes comprehensive error handling:

  • Input Validation: Required fields, data types, and format validation
  • Firebase Operation Errors: Network errors, permission errors, and data conflicts
  • Data Conversion: Safe conversion of Firestore timestamps to Date objects
  • Proper Error Messages: Clear, actionable error messages for debugging
  • Console Logging: Detailed logging for development and troubleshooting
  • Graceful Degradation: Fallback behavior when operations fail

Data Validation

The service validates the following:

  • Required Fields: title, createdBy, assignedTo
  • Data Types: Proper types for dates, booleans, and arrays
  • Date Formats: Valid date objects and ISO strings
  • User IDs: Valid user ID format and existence
  • Priority Levels: Valid priority values (low, medium, high)
  • Status Values: Valid status values (not-started, in-progress, completed, overdue, cancelled, paused)

Firebase Security Rules

Make sure your Firestore security rules allow authenticated users to access their own tasks:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /tasks/{taskId} {
      // Users can read tasks they created or are assigned to
      allow read: if request.auth != null && 
        (request.auth.uid == resource.data.createdBy || 
         request.auth.uid in resource.data.assignedTo);
      
      // Users can create tasks
      allow create: if request.auth != null && 
        request.auth.uid == request.resource.data.createdBy;
      
      // Users can update tasks they created or are assigned to
      allow update: if request.auth != null && 
        (request.auth.uid == resource.data.createdBy || 
         request.auth.uid in resource.data.assignedTo);
      
      // Only task creators can delete tasks
      allow delete: if request.auth != null && 
        request.auth.uid == resource.data.createdBy;
    }
  }
}

Component Library

This directory contains all reusable components for the Done. application. All components are built with Svelte 5 and styled with Tailwind CSS. The component library follows a consistent design system and provides comprehensive functionality for task management, user interaction, and data display.

Component Categories

Task Components

TaskCard

A comprehensive task display component that shows all task information including title, description, metadata, status, and user information. Features drag-and-drop support and interactive elements.

Props:

  • task (UITask): Task data object with UI-specific properties
  • isSelected (boolean): Whether the task is selected
  • onSelect (function): Callback when task is selected
  • onEdit (function): Callback when task is edited
  • onDelete (function): Callback when task is deleted
  • draggable (boolean): Whether the task can be dragged

Usage:

<TaskCard 
  task={taskData}
  isSelected={false}
  onSelect={(taskId) => console.log('Selected:', taskId)}
  onEdit={(taskId) => console.log('Edit:', taskId)}
  onDelete={(taskId) => console.log('Delete:', taskId)}
  draggable={true}
/>
TaskList

Container component for displaying multiple TaskCard components with proper spacing, empty state handling, and drag-and-drop support.

Props:

  • tasks (UITask[]): Array of task objects
  • selectedTasks (string[]): Array of selected task IDs
  • onTaskSelect (function): Callback when tasks are selected
  • onTaskEdit (function): Callback when tasks are edited
  • onTaskDelete (function): Callback when tasks are deleted
  • onTaskReorder (function): Callback when tasks are reordered via drag-and-drop

Usage:

<TaskList 
  tasks={tasks}
  selectedTasks={selectedTaskIds}
  onTaskSelect={handleTaskSelect}
  onTaskEdit={handleTaskEdit}
  onTaskDelete={handleTaskDelete}
  onTaskReorder={handleTaskReorder}
/>
TaskDrawer

A slide-out drawer component for creating and editing tasks with a comprehensive form interface.

Props:

  • isOpen (boolean): Whether the drawer is open
  • task (UITask | null): Task to edit (null for new task)
  • onClose (function): Callback when drawer is closed
  • onSave (function): Callback when task is saved
  • onDelete (function): Callback when task is deleted

Usage:

<TaskDrawer 
  isOpen={isDrawerOpen}
  task={editingTask}
  onClose={() => isDrawerOpen = false}
  onSave={handleTaskSave}
  onDelete={handleTaskDelete}
/>

Badge Components

StatusBadge

Displays task status with appropriate colors and optional status dot. Supports all task statuses including cancelled and paused.

Props:

  • status (string): 'not-started' | 'in-progress' | 'completed' | 'overdue' | 'cancelled' | 'paused'
  • showDot (boolean): Whether to show the status dot
  • size (string): 'sm' | 'md' | 'lg'

Usage:

<StatusBadge status="in-progress" showDot={true} size="md" />
PriorityBadge

Displays task priority with appropriate colors.

Props:

  • priority (string): 'low' | 'medium' | 'high'
  • size (string): 'sm' | 'md' | 'lg'

Usage:

<PriorityBadge priority="medium" size="md" />

Button Components

AttachmentButton

Button component for displaying attachment counts with a paperclip icon.

Props:

  • count (number): Number of attachments
  • size (string): 'sm' | 'md' | 'lg'
  • onClick (function): Click handler

Usage:

<AttachmentButton count={3} size="md" onClick={handleAttachmentClick} />

User Components

UserAvatar

Displays user profile picture or initials with fallback.

Props:

  • user (object): User object with name and optional avatar
  • size (string): 'xs' | 'sm' | 'md' | 'lg' | 'xl'
  • showTooltip (boolean): Whether to show tooltip on hover

Usage:

<UserAvatar 
  user={{ name: 'John Doe', avatar: '/path/to/avatar.jpg' }}
  size="md"
  showTooltip={true}
/>
UserGroup

Displays multiple user avatars in an overlapping style with overflow handling.

Props:

  • users (array): Array of user objects
  • maxVisible (number): Maximum number of visible avatars
  • size (string): 'xs' | 'sm' | 'md' | 'lg' | 'xl'
  • showTooltip (boolean): Whether to show tooltips

Usage:

<UserGroup 
  users={userArray}
  maxVisible={3}
  size="md"
  showTooltip={true}
/>

Utility Components

DateDisplay

Formatted date display component for start and due dates with overdue highlighting.

Props:

  • startDate (string): Start date string
  • dueDate (string): Due date string
  • showLabels (boolean): Whether to show "Start" and "Due" labels
  • size (string): 'sm' | 'md' | 'lg'
  • isOverdue (boolean): Whether to force overdue styling

Usage:

<DateDisplay 
  startDate="2025-05-16"
  dueDate="2025-05-26"
  showLabels={true}
  size="md"
/>
MentionTag

Displays @mentions in text with proper styling and click handling.

Props:

  • mention (string): The mention text (e.g., "@Fred")
  • onClick (function): Click handler
  • size (string): 'sm' | 'md' | 'lg'

Usage:

<MentionTag 
  mention="@Fred"
  onClick={(mention) => console.log('Clicked:', mention)}
  size="md"
/>
LinkIndicator

Shows when items are linked to other items with a chain icon.

Props:

  • isLinked (boolean): Whether the item is linked
  • linkText (string): Text to display
  • size (string): 'sm' | 'md' | 'lg'

Usage:

<LinkIndicator isLinked={true} linkText="Linked to" size="md" />
DragHandle

Drag handle component for drag and drop functionality.

Props:

  • size (string): 'sm' | 'md' | 'lg'
  • onClick (function): Click handler

Usage:

<DragHandle size="md" onClick={handleDragStart} />

Layout Components

TopBar

Header component with title, search, and action buttons. Provides consistent navigation across the application.

Props:

  • title (string): Page title
  • showSearch (boolean): Whether to show search bar
  • showAddButton (boolean): Whether to show add button
  • onSearch (function): Callback when search is performed
  • onAdd (function): Callback when add button is clicked

Usage:

<TopBar 
  title="Tasks"
  showSearch={true}
  showAddButton={true}
  onSearch={handleSearch}
  onAdd={handleAddTask}
/>
FilterTabs

Filter tabs component for task filtering with active state management.

Props:

  • activeFilter (string): Currently active filter
  • filters (array): Array of filter objects with id and label
  • onFilterChange (function): Callback when filter changes

Usage:

<FilterTabs 
  bind:activeFilter
  filters={[
    { id: 'all', label: 'All' },
    { id: 'my-tasks', label: 'My Tasks' },
    { id: 'completed', label: 'Completed' }
  ]}
  onFilterChange={handleFilterChange}
/>

Navigation sidebar component with menu items and user information.

Props:

  • activePage (string): Currently active page
  • onPageChange (function): Callback when page changes
  • user (User): Current user information

Usage:

<Sidebar 
  activePage="tasks"
  onPageChange={handlePageChange}
  user={currentUser}
/>

Main header component with branding and user controls.

Props:

  • title (string): Application title
  • user (User): Current user information
  • onLogout (function): Callback when user logs out

Usage:

<Header 
  title="Done."
  user={currentUser}
  onLogout={handleLogout}
/>

Footer component with links and copyright information.

Props:

  • links (array): Array of footer links
  • copyright (string): Copyright text

Usage:

<Footer 
  links={footerLinks}
  copyright="© 2024 Done. All rights reserved."
/>

Data Types

Core Task Model

interface Task {
  id: string;
  orderId: number; // Auto-generated order ID (1 + count of user's tasks)
  title: string;
  description?: string;
  completed: boolean;
  createdBy: string; // User ID
  assignedTo: string[]; // Array of user IDs
  createdAt: Date;
  updatedAt: Date;
  dueDate?: Date;
  startedDate?: Date;
  dateCompleted?: Date; // Date when task was completed
  priority: 'low' | 'medium' | 'high';
  status: 'not-started' | 'in-progress' | 'completed' | 'overdue' | 'cancelled' | 'paused';
}

UI Task Interface (extends Task)

interface UITask extends Task {
  startDate: string; // Planned start date
  isLinked: boolean;
  attachments: number;
  createdByUser: {
    name: string;
    avatar?: string;
  };
  mentions?: string[];
}

User Object

interface User {
  id: string;
  name: string;
  email: string;
  displayName?: string;
  photoURL?: string;
  createdAt: Date;
  updatedAt: Date;
  role: string;
  isAdmin: boolean;
  department: string;
}

Styling

All components use Tailwind CSS classes and follow a consistent design system:

  • Primary color: Blue (blue-600)
  • Success: Green (green-600)
  • Warning: Yellow (yellow-600)
  • Error: Red (red-600)
  • Neutral: Gray (gray-600)
  • Status colors: Custom colors for different task statuses
  • Priority colors: Distinct colors for low, medium, and high priorities

Component Architecture

Design Principles

  • Consistency: All components follow the same design patterns
  • Reusability: Components are designed to be used across different contexts
  • Accessibility: Proper ARIA labels and keyboard navigation
  • Responsiveness: Mobile-first design with responsive breakpoints
  • Type Safety: Full TypeScript support with proper interfaces

State Management

  • Local State: Component-specific state managed with Svelte's reactive statements
  • Props: Data passed down from parent components
  • Callbacks: Event handling through callback functions
  • Stores: Global state managed through Svelte stores when needed

Accessibility

Components include comprehensive accessibility features:

  • ARIA Labels: Proper labeling for screen readers
  • Semantic HTML: Correct HTML elements for content structure
  • Keyboard Navigation: Full keyboard accessibility
  • Focus Management: Proper focus states and focus trapping
  • Color Contrast: WCAG compliant color combinations

Browser Support

Components are built for modern browsers with:

  • ES6+ Support: Modern JavaScript features
  • CSS Grid & Flexbox: Modern layout techniques
  • CSS Custom Properties: Dynamic theming support
  • Intersection Observer: For performance optimizations

Performance

Components are optimized for performance:

  • Lazy Loading: Components load only when needed
  • Virtual Scrolling: For large lists of tasks
  • Debounced Inputs: For search and filtering
  • Memoization: Expensive calculations are cached
  • Bundle Splitting: Code splitting for better loading times

Mock Data

This directory contains comprehensive mock data for development and testing purposes. The mock data is designed to simulate a real-world task management application with realistic user relationships, task assignments, and goal tracking.

Structure

  • users.ts - Mock user data with IDs, names, roles, departments, and avatars
  • tasks.ts - Mock task data with user relationships, priorities, and statuses
  • goals.ts - Mock goal data with user relationships and progress tracking
  • dashboard.ts - Mock dashboard data with aggregated views
  • index.ts - Central exports and utility functions for data manipulation

User Data

Each user has the following structure:

interface MockUser {
  id: string;           // Unique user identifier (e.g., 'user-1')
  name: string;         // User's display name
  avatar?: string;      // Optional avatar URL
  email?: string;       // User's email address
  role?: string;        // User's role in the organization
  department?: string;  // User's department
}

Available Users

The mock data includes users from different departments and roles:

  • Engineering: Developers, Tech Leads, DevOps Engineers
  • Product: Product Managers, UX Designers
  • Marketing: Marketing Managers, Content Creators
  • Sales: Sales Representatives, Account Managers
  • Operations: Operations Managers, Support Staff

Task and Goal Data

Tasks and goals include comprehensive user relationship data:

  • createdBy: User ID of the person who created the task/goal
  • assignedTo: Array of user IDs assigned to the task/goal
  • createdByUser: Object containing the creator's name and avatar for display
  • status: Current status (not-started, in-progress, completed, overdue, cancelled, paused)
  • priority: Priority level (low, medium, high)
  • dueDate: Optional due date for tasks
  • progress: Progress percentage for goals (0-100)

Utility Functions

The following utility functions are available for working with user data:

getUserById(userId: string)

Returns a user object by their ID, or undefined if not found.

getUsersByIds(userIds: string[])

Returns an array of user objects for the given user IDs.

getCreatedByUser(userId: string)

Returns user display information (name and avatar) for the createdBy field.

getAssignedUsers(userIds: string[])

Returns an array of user objects for assigned users.

Example Usage

import { getUserById, getUsersByIds, mockTasks } from '$lib/data/mock';

// Get a specific user
const user = getUserById('user-1');

// Get assigned users for a task
const task = mockTasks[0];
const assignedUsers = getUsersByIds(task.assignedTo);

// Display user names
const assignedNames = assignedUsers.map(u => u.name).join(', ');

Data Consistency

All mock data is designed to be consistent and realistic:

  • User Relationships: User IDs in createdBy and assignedTo fields correspond to actual users in the users array
  • Immediate Access: The createdByUser object provides immediate access to creator information without additional lookups
  • Realistic Data: Department and role information is realistic and varied across different user types
  • Status Consistency: Task statuses are logically consistent with due dates and completion states
  • Priority Distribution: Tasks have a realistic distribution of priority levels
  • Date Ranges: Due dates and creation dates follow logical sequences

Usage in Development

The mock data is used throughout the application for:

  • Component Development: Testing UI components with realistic data
  • Service Testing: Validating service layer functionality
  • User Experience: Providing a realistic feel during development
  • Demo Purposes: Showcasing application features with sample data

Integration with Services

The mock data integrates seamlessly with the application's service layer:

  • TaskService: Uses mock tasks for development and testing
  • UserService: Provides user lookup and management functionality
  • GoalService: Manages goal-related operations with mock data
  • Dashboard Services: Aggregates mock data for dashboard views

Contributing

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Add tests if applicable
  5. Submit a pull request

License

This project is licensed under the MIT License.

Top categories

tailwinddaisyuiadmin templatepopupmdsvexportfolioblogformecommerceuicarouselauthdarkseoimagerouting
Loading Svelte Themes