Skip to content
Verta Docs

Business Modules

Business Modules

Section titled “Business Modules”

Comprehensive business management modules designed for e-commerce and enterprise operations. Features complete order management workflows, product catalog administration, and professional invoice generation with advanced status tracking and reporting capabilities.

🛒 Live Demo - Order Management

📦 Live Demo - Product Catalog

🧾 Live Demo - Invoice System

✨ Key Features

Section titled “✨ Key Features”

🛒 Order Management System

Complete order lifecycle management with status tracking, timeline views, and customer information

📦 Product Catalog Management

Comprehensive product administration with inventory tracking, image galleries, and sales analytics

🧾 Invoice Generation

Professional invoice system with client management, automated calculations, and PDF generation

📊 Status Tracking

Advanced status workflows with visual indicators, timeline tracking, and automated notifications

📈 Analytics & Reporting

Comprehensive business analytics with sales trends, performance metrics, and export capabilities

🔄 Workflow Automation

Automated business processes with status transitions, notifications, and task assignments

📊 Business Modules Overview

Section titled “📊 Business Modules Overview”

Order Processing

End-to-end order management from creation to delivery with comprehensive tracking and customer communication.

Product Administration

Complete product lifecycle management with inventory control, pricing, and sales performance tracking.

Invoice Management

Professional invoicing system with client management, automated billing, and financial reporting.

Status Workflows

Advanced status management with customizable workflows, automated transitions, and notification systems.

🛒 Order Management System

Section titled “🛒 Order Management System”

Order List Interface

Section titled “Order List Interface”
Core Business Module

Comprehensive order management with advanced filtering, sorting, and bulk operations for efficient order processing.

src/views/management/order/index.vue
<script setup lang="ts">
import { BaseCard } from '@/components/BaseCard'
import { Button } from '@/components/ui/button'
import { Download, RefreshCw, Package } from 'lucide-vue-next'
import { onMounted } from 'vue'
import OrderStatsCards from './components/OrderStatsCards.vue'
import OrderTable from './components/OrderTable.vue'
import { useOrders } from './composables/useOrderData'


const { orders, loading, loadOrders, refreshOrders, exportOrders } = useOrders()


onMounted(() => {
  loadOrders()
})
</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">
          Order Management
        </h1>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
          Total {{ orders.length }} orders
        </p>
      </div>
      <div class="flex items-center space-x-3">
        <Button class="bg-primary hover:bg-primary/90">
          <Package class="mr-2 h-4 w-4" />
          Create Order
        </Button>
      </div>
    </div>


    <!-- Order Statistics Cards -->
    <OrderStatsCards :orders="orders" />


    <!-- Orders Table -->
    <BaseCard>
      <div class="p-6">
        <OrderTable :data="orders" :loading="loading">
          <!-- Custom toolbar actions -->
          <template #toolbar-actions>
            <Button @click="exportOrders" variant="outline" size="sm">
              <Download class="mr-2 h-4 w-4" />
              Export
            </Button>
            <Button @click="refreshOrders" variant="outline" size="sm">
              <RefreshCw :class="['mr-2 h-4 w-4', loading && 'animate-spin']" />
              Refresh
            </Button>
          </template>
        </OrderTable>
      </div>
    </BaseCard>
  </div>
</template>

Key Components:

  • Order Statistics Cards: Real-time metrics on order volumes, revenue, and status distribution
  • Advanced Order Table: HiTable integration with filtering, sorting, and export capabilities
  • Bulk Operations: Multi-order selection for batch processing and status updates
  • Export Functionality: Comprehensive order data export with customizable columns

Order Detail System

Section titled “Order Detail System”
Detailed Management

Comprehensive order detail view with complete customer information, timeline tracking, and management actions.

src/views/management/order/detail.vue
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Button } from '@/components/ui/button'
import HiLoading from '@/components/HiLoading/index.vue'
import { ArrowLeft, Edit, Printer, Download } from 'lucide-vue-next'
import OrderStatusCard from './components/OrderStatusCard.vue'
import OrderItemsList from './components/OrderItemsList.vue'
import CustomerCard from './components/CustomerCard.vue'
import AddressCard from './components/AddressCard.vue'
import OrderTimeline from './components/OrderTimeline.vue'


const route = useRoute()
const router = useRouter()
const loading = ref(false)
const order = ref<OrderDetail | null>(null)


// Mock detailed order data
const mockOrder: OrderDetail = {
  id: orderId.value,
  customerName: 'John Doe',
  customerEmail: '[email protected]',
  amount: 299.99,
  subtotal: 259.99,
  tax: 26.0,
  shipping: 14.0,
  status: 'delivered',
  paymentMethod: 'credit_card',
  paymentStatus: 'paid',
  trackingNumber: 'TRK-1234567890',
  items: [
    {
      name: 'Wireless Bluetooth Headphones',
      description: 'Premium noise-cancelling wireless headphones',
      price: 129.99,
      quantity: 1,
      sku: 'WBH-001',
    },
    // ... more items
  ],
  shippingAddress: {
    fullName: 'John Doe',
    address: '123 Main St, Apt 4B',
    city: 'New York',
    state: 'NY',
    zipCode: '10001',
    country: 'United States',
  }
}
</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="goBack" variant="ghost" size="sm">
          <ArrowLeft class="h-4 w-4" />
        </Button>
        <div>
          <h1 class="text-2xl font-semibold">Order Details</h1>
          <p class="mt-1 text-sm text-gray-500">
            Order #{{ order.id }} • Created {{ formatDateLong(order.createdAt) }}
          </p>
        </div>
      </div>


      <div class="flex items-center space-x-3">
        <Button @click="printOrder" variant="outline" size="sm">
          <Printer class="mr-2 h-4 w-4" />
          Print
        </Button>
        <Button @click="downloadInvoice" variant="outline" size="sm">
          <Download class="mr-2 h-4 w-4" />
          Invoice
        </Button>
        <Button @click="editOrder" size="sm">
          <Edit class="mr-2 h-4 w-4" />
          Edit Order
        </Button>
      </div>
    </div>


    <!-- Order Content -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- Main Content -->
      <div class="lg:col-span-2 space-y-6">
        <OrderStatusCard :order="order" />
        <OrderItemsList :order="order" />
      </div>


      <!-- Sidebar -->
      <div class="space-y-6">
        <CustomerCard :order="order" />
        <AddressCard title="Shipping Address" :address="order.shippingAddress" />
        <AddressCard title="Billing Address" :address="order.billingAddress" />
        <OrderTimeline :order="order" />
      </div>
    </div>
  </div>
</template>

Layout Structure:

  • Main Content (lg:col-span-2): Order status card and items list with detailed product information
  • Sidebar (col-span-1): Customer details, shipping/billing addresses, and order timeline
  • Action Bar: Edit, print, download invoice, and navigation controls

📦 Product Catalog Management

Section titled “📦 Product Catalog Management”

Product Administration

Section titled “Product Administration”
Inventory Control

Complete product management system with inventory tracking, pricing control, and sales analytics.

src/views/management/product/index.vue
<script setup lang="ts">
import { BaseCard } from '@/components/BaseCard'
import { Button } from '@/components/ui/button'
import { Plus, Download, RefreshCw, Package } from 'lucide-vue-next'
import { onMounted } from 'vue'
import ProductTable from './components/ProductTable.vue'
import { useProducts } from './composables/useProductData'


const { products, loading, loadProducts, refreshProducts, exportProducts } = useProducts()


onMounted(() => {
  loadProducts()
})
</script>


<template>
  <div class="space-y-6">
    <!-- Page Header -->
    <div class="flex items-center justify-between">
      <div>
        <h1 class="text-2xl font-semibold">Product Management</h1>
        <p class="mt-1 text-sm text-gray-500">
          {{ products.length }} products total
        </p>
      </div>
      <Button @click="$router.push('/management/product/new')">
        <Plus class="mr-2 h-4 w-4" />
        Add Product
      </Button>
    </div>


    <!-- Products Table -->
    <BaseCard>
      <div class="p-6">
        <ProductTable :data="products" :loading="loading">
          <!-- Custom toolbar actions -->
          <template #toolbar-actions>
            <Button @click="exportProducts" variant="outline" size="sm">
              <Download class="mr-2 h-4 w-4" />
              Export
            </Button>
            <Button @click="refreshProducts" variant="outline" size="sm">
              <RefreshCw :class="['mr-2 h-4 w-4', loading && 'animate-spin']" />
              Refresh
            </Button>
          </template>


          <!-- Custom empty state -->
          <template #empty-state>
            <div class="text-center py-12">
              <Package class="h-12 w-12 mx-auto text-gray-400" />
              <h3 class="mt-4 text-sm font-medium">No Products</h3>
              <p class="mt-1 text-sm text-gray-500">
                No products available. Click the button below to add your first product.
              </p>
              <div class="mt-6">
                <Button @click="$router.push('/management/product/new')">
                  <Plus class="mr-2 h-4 w-4" />
                  Add Product
                </Button>
              </div>
            </div>
          </template>
        </ProductTable>
      </div>
    </BaseCard>
  </div>
</template>

Product Listing Features

  • Advanced product table with image thumbnails
  • Real-time inventory status indicators
  • Price management with discount tracking
  • Category and tag-based organization

Bulk Operations

  • Mass price updates and inventory adjustments
  • Bulk category assignments
  • Product status changes (active/inactive)
  • Export for accounting and reporting

🧾 Invoice Management System

Section titled “🧾 Invoice Management System”

Professional Invoicing

Section titled “Professional Invoicing”
Financial Management

Complete invoice generation and management system with client administration and automated billing workflows.

src/views/management/invoice/index.vue
<script setup lang="ts">
import { BaseCard } from '@/components/BaseCard'
import { Button } from '@/components/ui/button'
import { onMounted } from 'vue'
import { Download, RefreshCw, FileText } from 'lucide-vue-next'
import { InvoiceStatsCards, InvoiceTable } from './components'
import { useInvoices } from './composables/useInvoiceData'


const { invoices, loading, loadInvoices, refreshInvoices, exportInvoices } = useInvoices()


onMounted(() => {
  loadInvoices()
})
</script>


<template>
  <div class="space-y-6">
    <!-- Page Header -->
    <div class="flex items-center justify-between">
      <div>
        <h1 class="text-2xl font-semibold">Invoice Management</h1>
        <p class="mt-1 text-sm text-gray-500">
          Total {{ invoices.length }} invoices
        </p>
      </div>
      <div class="flex items-center space-x-3">
        <Button class="bg-primary hover:bg-primary/90">
          <FileText class="mr-2 h-4 w-4" />
          Create Invoice
        </Button>
      </div>
    </div>


    <!-- Invoice Statistics Cards -->
    <InvoiceStatsCards :invoices="invoices" />


    <!-- Invoices Table -->
    <BaseCard>
      <div class="p-6">
        <InvoiceTable :data="invoices" :loading="loading">
          <!-- Custom toolbar actions -->
          <template #toolbar-actions>
            <Button @click="exportInvoices" variant="outline" size="sm">
              <Download class="mr-2 h-4 w-4" />
              Export
            </Button>
            <Button @click="refreshInvoices" variant="outline" size="sm">
              <RefreshCw :class="['mr-2 h-4 w-4', loading && 'animate-spin']" />
              Refresh
            </Button>
          </template>
        </InvoiceTable>
      </div>
    </BaseCard>
  </div>
</template>

Invoice System Features:

  • Client Management: Comprehensive customer database with billing information
  • Automated Calculations: Tax, discount, and total calculations with currency support
  • Invoice Templates: Professional templates with company branding and customization
  • Payment Tracking: Payment status monitoring with automated reminders

Invoice Workflow

Section titled “Invoice Workflow”

Status Management:

  • Draft: Invoice creation and editing phase
  • Sent: Invoice transmitted to client with delivery confirmation
  • Paid: Payment received and recorded with transaction details
  • Overdue: Automated overdue notifications and follow-up actions

Professional Features:

  • PDF Generation: High-quality PDF invoices with company branding
  • Email Integration: Automated invoice delivery with customizable templates
  • Payment Integration: Support for multiple payment gateways
  • Recurring Invoices: Automated billing for subscription-based services

📈 Status Tracking & Workflows

Section titled “📈 Status Tracking & Workflows”

Order Status Management

Section titled “Order Status Management”

Advanced status tracking system with customizable workflows and automated transitions.

Order Status Flow:

Order Status Workflow
Pending → Processing → Shipped → Delivered
   ↓         ↓          ↓         ↓
Cancelled  On Hold   In Transit  Returned

Status Components:

  • Visual Status Badges: Color-coded status indicators with hover tooltips
  • Timeline Tracking: Chronological status change history
  • Automated Notifications: Customer and staff notifications on status changes
  • Custom Status Rules: Business logic for status transition validation

Product Status Management

Section titled “Product Status Management”

Product Lifecycle States:

  • Active: Available for sale with full visibility
  • Inactive: Hidden from public view but retained in system
  • Out of Stock: Temporarily unavailable with restock notifications
  • Discontinued: Permanently removed from active catalog

Invoice Status Tracking

Section titled “Invoice Status Tracking”

Payment Status Indicators:

  • Draft: Invoice being prepared and edited
  • Sent: Invoice transmitted and awaiting payment
  • Paid: Payment received and confirmed
  • Overdue: Past due date with automated follow-up
  • Cancelled: Invoice voided or cancelled

🔧 Advanced Features

Section titled “🔧 Advanced Features”

Data Export & Reporting

Section titled “Data Export & Reporting”

Comprehensive export capabilities across all business modules:

Export Options:

  • CSV Export: Structured data for spreadsheet analysis
  • PDF Reports: Professional formatted reports for presentations
  • JSON Data: Raw data export for API integration
  • Excel Workbooks: Multi-sheet reports with charts and formatting

Report Generation:

  • Sales Reports: Revenue analysis by time period, product, or customer
  • Inventory Reports: Stock levels, turnover rates, and reorder points
  • Financial Reports: Invoice summaries, payment tracking, and revenue forecasting
  • Customer Reports: Purchase history, preferences, and loyalty metrics

Search & Filtering

Section titled “Search & Filtering”

Advanced search capabilities across all modules:

Universal Search Features:

  • Multi-column Search: Search across names, IDs, descriptions, and metadata
  • Date Range Filtering: Time-based filtering with preset ranges
  • Status Filtering: Filter by order status, payment status, or product availability
  • Advanced Filters: Combine multiple criteria for precise results

Integration Capabilities

Section titled “Integration Capabilities”

API Integration:

  • RESTful APIs: Complete API coverage for all business operations
  • Webhook Support: Real-time notifications for status changes and updates
  • Third-party Integration: Compatible with payment gateways, shipping providers
  • Data Synchronization: Real-time sync with external systems and databases

🎨 User Experience Design

Section titled “🎨 User Experience Design”

Responsive Interface

Section titled “Responsive Interface”

Mobile Optimization:

  • Touch-friendly Controls: Optimized buttons and navigation for mobile devices
  • Collapsible Tables: Smart column hiding based on screen size
  • Swipe Gestures: Intuitive navigation for mobile users
  • Progressive Enhancement: Full feature access across all device types

Desktop Enhancement:

  • Multi-panel Layouts: Efficient use of screen real estate
  • Keyboard Shortcuts: Power user features for rapid navigation
  • Bulk Selection Tools: Efficient multi-item management
  • Advanced Filtering UI: Sophisticated filter interfaces for complex queries

Accessibility Features

Section titled “Accessibility Features”

Universal Access:

  • Screen Reader Support: Complete ARIA labeling and semantic markup
  • Keyboard Navigation: Full functionality without mouse interaction
  • High Contrast Mode: Enhanced visibility for visual impairments
  • Internationalization: Multi-language support with RTL text support

🔒 Security & Permissions

Section titled “🔒 Security & Permissions”

Role-Based Access Control

Section titled “Role-Based Access Control”

Permission Levels:

  • View Only: Read access to data without modification capabilities
  • Editor: Create and modify records within assigned modules
  • Manager: Full module access with advanced administrative features
  • Administrator: Complete system access with user management

Data Security:

  • Audit Logging: Complete activity tracking for compliance and security
  • Data Encryption: Sensitive information protection at rest and in transit
  • Secure Authentication: Multi-factor authentication and session management
  • GDPR Compliance: Data protection features and user privacy controls

The business modules provide a comprehensive foundation for enterprise operations with professional workflows, advanced analytics, and scalable architecture suitable for businesses of all sizes.

Section titled “Navigation”

Previous: User Management

Next: Communication Tools