Skip to main content

Dashboard Features

The PixelTech admin dashboard provides real-time operational insights and centralized management of your e-commerce business. Built on Firebase with real-time listeners, the dashboard automatically updates as orders, payments, and inventory changes occur.

Key Metrics

The dashboard displays five critical KPIs that update in real-time:

Total Sales

Aggregated revenue from paid, shipped, and delivered orders

Treasury Balance

Combined balance across all bank accounts and cash registers

Pending Orders

Priority count of orders awaiting fulfillment

Accounts Receivable

Outstanding customer payments and partial balances

Real-Time Order Management

Orders are automatically categorized by urgency based on a configurable cutoff time (default: 2:30 PM):
const cutoffTimeStr = configSnap.data().cutoffTime || "14:00";
const now = new Date();
const [hours, minutes] = cutoffTimeStr.split(':').map(Number);
const cutoffDateToday = new Date(now);
cutoffDateToday.setHours(hours, minutes, 0, 0);
Priority Logic:
  • Orders placed before cutoff → Ship today
  • Orders placed after cutoff → Ship next business day

Smart Real-Time Cache

The dashboard implements an intelligent caching system that minimizes Firebase reads:
function initRealtimeDashboard() {
    const ordersRef = collection(db, "orders");
    const qRecentOrders = query(ordersRef, orderBy("createdAt", "desc"), limit(100));
    
    unsubscribeOrders = onSnapshot(qRecentOrders, (snap) => {
        snap.docChanges().forEach(change => {
            if (['added', 'modified', 'removed'].includes(change.type)) {
                fetchDashboardData();
            }
        });
    });
}
Performance Optimization: Only changed documents trigger updates, reducing unnecessary reads by up to 90%.

User Roles and Permissions

Firestore security rules enforce role-based access control:

Admin Role

function isAdmin() {
  return request.auth != null && 
    exists(/databases/$(database)/documents/users/$(request.auth.uid)) &&
    get(/databases/$(database)/documents/users/$(request.auth.uid)).data.role == 'admin';
}
Admin Capabilities:
  • Full CRUD operations on all collections
  • Access to financial reports and treasury
  • Inventory management and pricing
  • Order status modifications
  • Customer data management
  • WhatsApp CRM access

Customer Role

Regular users have restricted access:
  • Read-only access to products catalog
  • Manage own orders and profile
  • Update stock quantities (system operations only)
  • Cannot modify prices or sensitive data
The admin sidebar (admin-ui.js) provides organized access to all modules:
1

Sales & Orders

  • Dashboard overview
  • Order management
  • Manual sales creation
  • Remissions and invoices
2

Inventory

  • Product catalog
  • Stock adjustments
  • Suppliers and purchases
  • Warranty inventory
3

Customer Service

  • WhatsApp CRM
  • Customer database
  • Communication history
4

Accounting

  • Expenses tracking
  • Accounts receivable/payable
  • Treasury management
  • Financial reports

Quick Actions

The dashboard header provides instant access to critical functions:
<button id="btn-open-manual" class="bg-brand-black text-white">
    <i class="fa-solid fa-plus"></i> Nueva Venta
</button>
Important: All manual sales automatically update inventory, treasury, and accounts receivable in real-time.

Next Steps

Inventory Management

Learn how to manage products and stock

Order Fulfillment

Process and ship customer orders

WhatsApp CRM

Manage customer conversations

Financial Reports

Track revenue and expenses

Build docs developers (and LLMs) love