User Management System

Comprehensive user management solution with complete CRUD operations, advanced filtering, detailed user profiles, and activity tracking. Built with HiTable and HiForm components for enterprise-level user administration.

👀 Live Demo - User List

📋 Live Demo - User Detail

✨ Key Features

👥 Complete CRUD Operations

Full user lifecycle management with create, read, update, and delete functionality

🔍 Advanced Search & Filtering

Multi-column search, role-based filtering, and status-based user organization

📊 Detailed User Profiles

Comprehensive user detail pages with activity tracking and performance metrics

📤 Export Capabilities

HiExport integration for CSV exports with customizable column selection

🎛️ Bulk Operations

Multi-row selection with batch actions for efficient user management

🔐 Role & Permission Management

Role-based access control with visual badges and status indicators

📊 User Management Overview

HiTable Integration

Advanced data table with sorting, filtering, pagination, and column visibility controls for efficient user browsing.

User Profile System

Detailed user profiles with personal information, activity timeline, performance metrics, and team collaboration.

Activity Tracking

Comprehensive activity monitoring with timeline views, project assignments, and task completion tracking.

Export & Reporting

Flexible data export with HiExport integration supporting multiple formats and custom column selection.

🏗️ Component Architecture

User List Page

Main Interface

The primary user management interface built with HiTable for advanced data operations and user interaction.

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { BaseCard } from '@/components/BaseCard'
import { Button } from '@/components/ui/button'
import { HiExport } from '@/components/HiExport'
import type { ExportColumn } from '@/components/HiExport/types'
import { UserPlus, RefreshCw } from 'lucide-vue-next'
import { useI18n } from 'vue-i18n'
import UserTable from './components/UserTable.vue'
import { useUsers, formatDate, type User } from './composables/useUserData'
import { useAlertDialog } from '@/hooks/useAlertDialog'

const { t } = useI18n()
const { users, loading, loadUsers, refreshUsers } = useUsers()
const { confirm } = useAlertDialog()

// Export columns configuration
const exportColumns = computed<ExportColumn[]>(() => [
  { key: 'id', header: 'ID' },
  { key: 'name', header: 'Name' },
  { key: 'email', header: 'Email' },
  { key: 'phone', header: 'Phone' },
  {
    key: 'role',
    header: 'Role',
    accessor: (user: User) => user.role.toUpperCase()
  },
  {
    key: 'status',
    header: 'Status',
    accessor: (user: User) => user.status.toUpperCase()
  },
  {
    key: 'lastLogin',
    header: 'Last Login',
    accessor: (user: User) => formatDate(user.lastLogin)
  },
  {
    key: 'createdAt',
    header: 'Created At',
    accessor: (user: User) => formatDate(user.createdAt)
  }
])

const handleRefreshUsers = async () => {
  const shouldRefresh = await confirm('Refresh user data? Any unsaved changes will be lost.')
  if (shouldRefresh) {
    await refreshUsers()
  }
}
</script>

<template>
  <div class="space-y-6">
    <!-- Page Header -->
    <div class="flex items-center justify-between">
      <div>
        <h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">
          {{ t('user.title') }}
        </h1>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
          {{ t('user.totalUsers', { count: users.length }) }}
        </p>
      </div>
      <router-link :to="{ name: 'userAdd' }">
        <Button class="bg-primary hover:bg-primary/90">
          <UserPlus class="mr-2 h-4 w-4" />
          {{ t('user.add') }}
        </Button>
      </router-link>
    </div>

    <!-- Users Table -->
    <BaseCard>
      <div class="p-6">
        <UserTable :data="users" :loading="loading">
          <!-- Custom toolbar actions -->
          <template #toolbar-actions="{ table }">
            <HiExport
              :table="table"
              :original-data="users"
              :columns="exportColumns"
              filename="users-data"
              button-text="Export"
            />
            <Button @click="handleRefreshUsers" variant="outline" size="sm">
              <RefreshCw :class="['mr-2 h-4 w-4', loading && 'animate-spin']" />
              {{ t('common.refresh') }}
            </Button>
          </template>
        </UserTable>
      </div>
    </BaseCard>
  </div>
</template>

Key Features:

Page Header: User count display and add user button
HiTable Integration: Advanced table with custom toolbar actions
Export Functionality: CSV export with configurable columns
Refresh System: Data refresh with confirmation dialog
Empty State: Custom empty state with call-to-action

User Detail Page

Comprehensive Profile

Detailed user profile with comprehensive information display and management capabilities.

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { Button } from '@/components/ui/button'
import { ArrowLeft, Edit, Trash2 } from 'lucide-vue-next'
import UserProfileCard from './components/UserProfileCard.vue'
import AccountDetails from './components/AccountDetails.vue'
import ActivityStats from './components/ActivityStats.vue'
import QuickActions from './components/QuickActions.vue'
import ActivityTimeline from './components/ActivityTimeline.vue'
import ProjectShowcase from './components/ProjectShowcase.vue'
import PerformanceChart from './components/PerformanceChart.vue'
import TeamPreview from './components/TeamPreview.vue'
import RecentTasks from './components/RecentTasks.vue'

// Mock user data with comprehensive profile information
const user: UserProfile = {
  id: 'u001',
  name: 'John Doe',
  email: '[email protected]',
  phone: '+1 (555) 123-4567',
  avatar: 'https://vertaui.com/avatar/cartoon/1.png?id=1',
  role: 'admin',
  status: 'active',
  department: 'Engineering',
  location: 'San Francisco, CA',
  timezone: 'PST (UTC-8)',
  bio: 'Senior Software Engineer with over 8 years of experience.',
  skills: ['JavaScript', 'TypeScript', 'Vue.js', 'Node.js', 'Python'],
  projects: 12,
  tasksCompleted: 247,
  teamSize: 6,
}
</script>

<template>
  <div class="space-y-6">
    <!-- Page Header -->
    <div class="flex flex-wrap gap-y-4 items-center justify-between">
      <div class="flex items-center space-x-4">
        <Button @click="handleBack" variant="ghost" size="sm">
          <ArrowLeft class="h-4 w-4" />
        </Button>
        <div>
          <h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">
            {{ user.name }}
          </h1>
          <p class="mt-1 text-sm text-gray-500">Comprehensive User Profile</p>
        </div>
      </div>
      <div class="flex items-center space-x-3">
        <Button @click="handleEdit" variant="outline">
          <Edit class="h-4 w-4 mr-2" />
          Edit Profile
        </Button>
        <Button @click="handleDelete" variant="outline" class="text-red-600">
          <Trash2 class="h-4 w-4 mr-2" />
          Delete User
        </Button>
      </div>
    </div>

    <!-- Main Content Grid -->
    <div class="grid grid-cols-1 xl:grid-cols-12 gap-6">
      <!-- Left Column - Main Content -->
      <div class="xl:col-span-8 space-y-6">
        <UserProfileCard :user="user" />
        <PerformanceChart :performance-data="performanceData" />
        <ProjectShowcase :projects="projectData" />
        <ActivityTimeline :activities="activityData" />
      </div>

      <!-- Right Sidebar -->
      <div class="xl:col-span-4 space-y-6">
        <ActivityStats :user="user" />
        <AccountDetails :user="user" />
        <TeamPreview :team-members="teamMembers" />
        <RecentTasks :tasks="recentTasks" />
        <QuickActions />
      </div>
    </div>
  </div>
</template>

Components Structure:

Left Column (xl:col-span-8): Main profile content and activity data
Right Sidebar (xl:col-span-4): Quick stats, account details, and team information
Grid Layout: Responsive 12-column grid system for optimal content organization

📋 Advanced Table Features

UserTable Component

Professional data table with advanced filtering, sorting, and selection capabilities.

<script setup lang="ts">
import { h, ref, computed } from 'vue'
import { HiTable } from '@/components/HiTable'
import type { ColumnDef } from '@tanstack/vue-table'
import { Checkbox } from '@/components/ui/checkbox'
import { Button } from '@/components/ui/button'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { ArrowUpDown, MoreHorizontal, Eye, Edit, Trash2 } from 'lucide-vue-next'
import { StatusBadge, RoleBadge } from '../composables/useUserBadges'

// Filter states
const searchFilter = ref('')
const roleFilter = ref<string>('')
const statusFilter = ref<string>('')

// Table columns definition
const columns: ColumnDef<User>[] = [
  {
    id: 'select',
    header: ({ table }) => h(Checkbox, {
      checked: table.getIsAllPageRowsSelected(),
      'onUpdate:checked': (value) => table.toggleAllPageRowsSelected(!!value),
    }),
    cell: ({ row }) => h(Checkbox, {
      checked: row.getIsSelected(),
      'onUpdate:checked': (value) => row.toggleSelected(!!value),
    }),
    enableSorting: false,
    enableHiding: false,
  },
  {
    accessorKey: 'avatar',
    header: 'Avatar',
    cell: ({ row }) => {
      const user = row.original
      return h('div', { class: 'flex items-center' }, [
        h(Avatar, { class: 'h-8 w-8' }, [
          h(AvatarImage, { src: user.avatar, alt: user.name }),
          h(AvatarFallback, user.name.charAt(0).toUpperCase())
        ])
      ])
    },
    enableSorting: false,
  },
  {
    accessorKey: 'name',
    header: ({ column }) => h(Button, {
      variant: 'ghost',
      onClick: () => column.toggleSorting(column.getIsSorted() === 'asc')
    }, [
      'Name',
      h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })
    ]),
    cell: ({ row }) => h('div', { class: 'font-medium' }, row.getValue('name'))
  },
  {
    accessorKey: 'email',
    header: 'Email',
    cell: ({ row }) => h('div', { class: 'text-muted-foreground' }, row.getValue('email'))
  },
  {
    accessorKey: 'role',
    header: 'Role',
    cell: ({ row }) => h(RoleBadge, { role: row.getValue('role') })
  },
  {
    accessorKey: 'status',
    header: 'Status',
    cell: ({ row }) => h(StatusBadge, { status: row.getValue('status') })
  }
]
</script>

Multi-Column Search

Combined name and email search
Real-time filtering as you type
Case-insensitive search functionality

Advanced Filters

Role-based filtering (Admin, Manager, User, Guest)
Status filtering (Active, Inactive, Pending, Suspended)
Filter combination for precise results

👤 User Profile Components

Profile Overview

The user detail page includes multiple specialized components for comprehensive profile management:

Core Profile Components:

UserProfileCard: Personal information, bio, skills, and contact details
AccountDetails: System information, permissions, and account settings
ActivityStats: Quick metrics on projects, tasks, and team collaboration

Activity & Performance:

ActivityTimeline: Chronological activity feed with commit, task, and project events
PerformanceChart: Performance metrics visualization with monthly trends
ProjectShowcase: Active and completed projects with progress tracking

Team & Tasks:

TeamPreview: Team member overview with status indicators
RecentTasks: Task management with priority and status tracking
QuickActions: Common user management operations

🔐 Role & Permission System

Role Management

Visual role identification with badge components and permission-based access control.

Available Roles:

Admin: Full system access with user management capabilities
Manager: Department-level access with limited user management
User: Standard user access with personal data management
Guest: Read-only access for temporary or external users

Status Management:

Active: Full access to assigned resources and features
Inactive: Suspended access with data retention
Pending: Awaiting approval or verification
Suspended: Temporary access restriction

Badge Components

// Role Badge Component
export const RoleBadge = ({ role }: { role: string }) => {
  const variants = {
    admin: 'bg-red-100 text-red-800',
    manager: 'bg-blue-100 text-blue-800',
    user: 'bg-green-100 text-green-800',
    guest: 'bg-gray-100 text-gray-800'
  }

  return (
    <Badge variant="secondary" className={variants[role]}>
      {role.toUpperCase()}
    </Badge>
  )
}

// Status Badge Component
export const StatusBadge = ({ status }: { status: string }) => {
  const variants = {
    active: 'bg-green-100 text-green-800',
    inactive: 'bg-gray-100 text-gray-800',
    pending: 'bg-yellow-100 text-yellow-800',
    suspended: 'bg-red-100 text-red-800'
  }

  return (
    <Badge variant="outline" className={variants[status]}>
      {status.toUpperCase()}
    </Badge>
  )
}

💾 Data Management

User Data Structure

Comprehensive user data model with full profile information:

interface UserProfile {
  // Basic Information
  id: string
  name: string
  email: string
  phone: string
  avatar: string

  // System Information
  role: 'admin' | 'manager' | 'user' | 'guest'
  status: 'active' | 'inactive' | 'pending' | 'suspended'
  lastLogin: string
  createdAt: string

  // Profile Details
  department: string
  location: string
  timezone: string
  bio: string
  skills: string[]

  // Metrics
  projects: number
  tasksCompleted: number
  teamSize: number
}

Composables Integration

useUserData Composable:

User data fetching and caching
CRUD operations with optimistic updates
Loading states and error handling
Data transformation and formatting

useUserBadges Composable:

Role and status badge generation
Color scheme management
Accessibility features

// useUserData Composable
const {
  users,
  loading,
  loadUsers,
  refreshUsers
} = useUserData()

// useUserBadges Composable
const {
  RoleBadge,
  StatusBadge
} = useUserBadges()

📤 Export & Reporting

HiExport Integration

Advanced export functionality with configurable column selection and data transformation.

Export Features:

Multiple Formats: CSV, Excel, and JSON export options
Column Configuration: Selective column export with custom headers
Data Transformation: Accessor functions for data formatting
Batch Processing: Handle large datasets efficiently

Export Configuration:

const exportColumns: ExportColumn[] = [
  { key: 'id', header: 'User ID' },
  { key: 'name', header: 'Full Name' },
  { key: 'email', header: 'Email Address' },
  {
    key: 'role',
    header: 'User Role',
    accessor: (user: User) => user.role.toUpperCase()
  },
  {
    key: 'lastLogin',
    header: 'Last Login Date',
    accessor: (user: User) => formatDate(user.lastLogin)
  }
]

🎨 Responsive Design

Layout Optimization

Mobile First Approach:

Collapsible table columns for small screens
Touch-friendly interaction elements
Simplified navigation for mobile devices

Desktop Enhancement:

Full-width table with all columns visible
Sidebar navigation with quick actions
Multi-panel layout for detail pages

Tablet Adaptation:

Balanced column visibility
Touch and mouse interaction support
Responsive grid layouts

🔧 Customization Options

Theme Integration

Full support for light and dark themes with automatic color adaptation:

Component Theming: All user management components adapt to theme changes
Badge Colors: Theme-aware role and status indicators
Table Styling: Consistent with global design system
Form Integration: Seamless HiForm integration for user editing

Internationalization

Complete i18n support with Vue I18n integration:

Multi-language Support: English, Chinese, and extensible language system
Dynamic Translation: Real-time language switching
Localized Formatting: Date, number, and currency formatting
Accessibility: Screen reader compatible translations

The user management system provides a comprehensive solution for enterprise user administration with advanced table features, detailed profile management, and extensive customization options.

Previous: Dashboard System

Next: Business Modules

User Management System

User Management System

✨ Key Features

👥 Complete CRUD Operations

🔍 Advanced Search & Filtering

📊 Detailed User Profiles

📤 Export Capabilities

🎛️ Bulk Operations

🔐 Role & Permission Management

📊 User Management Overview

🏗️ Component Architecture

User List Page

User Detail Page

📋 Advanced Table Features

UserTable Component

👤 User Profile Components

Profile Overview

🔐 Role & Permission System

Role Management

Badge Components

💾 Data Management

User Data Structure

Composables Integration

📤 Export & Reporting

HiExport Integration

🎨 Responsive Design

Layout Optimization

🔧 Customization Options

Theme Integration

Internationalization

Navigation