ferzui

Business Components

Komponen untuk dashboard, analytics, CRM, e-commerce, finance, dan project management yang profesional.

Dashboard Layout

Layout dashboard yang lengkap dengan sidebar, header, dan main content area.

Dashboard

🔍
JD
John Doe 
<div class="dashboard">
  <div class="dashboard-sidebar">
    <div class="dashboard-logo">ferzui</div>
    <ul class="dashboard-nav">
      <li class="dashboard-nav-item">
        <a href="#" class="dashboard-nav-link active">
          <span class="dashboard-nav-icon">📊</span>
          Dashboard
        </a>
      </li>
    </ul>
  </div>
  
  <div class="dashboard-main">
    <div class="dashboard-header">
      <h1 class="dashboard-title">Dashboard</h1>
      <div class="dashboard-actions">
        <div class="dashboard-search">
          <input type="text" class="dashboard-search-input" placeholder="Search...">
        </div>
      </div>
    </div>
  </div>
</div>

Analytics Cards

Kartu analytics dengan statistik dan perubahan persentase.

Total Revenue

💰

$45,678

↗ +12.5% from last month

New Users

👥

1,234

↗ +8.2% from last month

Conversion Rate

📊

3.24%

↘ -2.1% from last month

Bounce Rate

📉

42.1%

↘ +1.5% from last month 
<div class="analytics-grid">
  <div class="analytics-card">
    <div class="analytics-card-header">
      <h4 class="analytics-card-title">Total Revenue</h4>
      <div class="analytics-card-icon primary">💰</div>
    </div>
    <h2 class="analytics-card-value">$45,678</h2>
    <div class="analytics-card-change positive">
      <span class="analytics-card-change-icon">↗</span>
      <span>+12.5% from last month</span>
    </div>
  </div>
</div>

Charts

Container untuk chart dengan controls dan title.

Revenue Analytics

📊 Chart will be rendered here 
<div class="chart-container">
  <div class="chart-header">
    <h3 class="chart-title">Revenue Analytics</h3>
    <div class="chart-controls">
      <button class="chart-control-btn active">7D</button>
      <button class="chart-control-btn">30D</button>
      <button class="chart-control-btn">90D</button>
      <button class="chart-control-btn">1Y</button>
    </div>
  </div>
  <div class="chart-content">
    <!-- Chart will be rendered here -->
  </div>
</div>

Data Table

Tabel data dengan search, actions, dan responsive design.

Users

🔍
Name Email Role Status Actions
John Doe john@example.com Admin Active
Jane Smith jane@example.com User Pending
Bob Johnson bob@example.com User Active 
<div class="data-table-container">
  <div class="data-table-header">
    <h3 class="data-table-title">Users</h3>
    <div class="data-table-actions">
      <div class="data-table-search">
        <input type="text" class="data-table-search-input" placeholder="Search users...">
      </div>
      <button class="btn btn-primary">Add User</button>
    </div>
  </div>
  
  <table class="data-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Role</th>
        <th>Status</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>john@example.com</td>
        <td>Admin</td>
        <td><span class="badge badge-success">Active</span></td>
        <td>
          <div class="data-table-actions-cell">
            <button class="data-table-action-btn primary">Edit</button>
            <button class="data-table-action-btn danger">Delete</button>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

CRM Contacts

Kartu kontak CRM dengan status dan actions.

JD

John Doe

john.doe@company.com

Customer
📞 +1 (555) 123-4567
🏢 Acme Corp
📍 New York, NY
💰 $5,000 LTV 
<div class="crm-contact-card">
  <div class="crm-contact-header">
    <div class="crm-contact-avatar">JD</div>
    <div class="crm-contact-info">
      <h4>John Doe</h4>
      <p>john.doe@company.com</p>
    </div>
  </div>
  
  <div class="crm-contact-status customer">Customer</div>
  
  <div class="crm-contact-details">
    <div class="crm-contact-detail">
      <span>📞</span>
      <span>+1 (555) 123-4567</span>
    </div>
  </div>
  
  <div class="crm-contact-actions">
    <button class="crm-contact-action-btn">Message</button>
    <button class="crm-contact-action-btn primary">Call</button>
  </div>
</div>

E-commerce Products

Kartu produk e-commerce dengan rating, harga, dan actions.

Product
Sale
Electronics

Amazing Wireless Headphones

★ ★ ★ ★ ★
(4.2)
$99.99 $129.99 -23%
Product
New
Gadgets

Cool Smart Watch

★ ★ ★ ★ ★
(4.8)
$199.99 
<div class="product-grid">
  <div class="product-card">
    <div class="product-image">
      <img src="product.jpg" alt="Product">
      <div class="product-badge sale">Sale</div>
      <button class="product-wishlist">❤️</button>
    </div>
    <div class="product-info">
      <div class="product-category">Electronics</div>
      <h4 class="product-title">Amazing Wireless Headphones</h4>
      <div class="product-rating">
        <div class="product-stars">
          <span class="product-star filled">★</span>
          <span class="product-star filled">★</span>
          <span class="product-star filled">★</span>
          <span class="product-star filled">★</span>
          <span class="product-star">★</span>
        </div>
        <span class="product-rating-text">(4.2)</span>
      </div>
      <div class="product-price">
        <span class="product-price-current">$99.99</span>
        <span class="product-price-original">$129.99</span>
        <span class="product-price-discount">-23%</span>
      </div>
      <div class="product-actions">
        <button class="product-action-btn">Add to Cart</button>
        <button class="product-action-btn primary">Buy Now</button>
      </div>
    </div>
  </div>
</div>

Finance Summary

Ringkasan keuangan dengan income, expense, dan balance.

💰

$12,450

Total Income

💸

$8,230

Total Expenses

📊

$4,220

Net Balance

<div class="finance-summary">
  <div class="finance-card">
    <div class="finance-card-icon income">💰</div>
    <h2 class="finance-card-value">$12,450</h2>
    <p class="finance-card-label">Total Income</p>
  </div>
  
  <div class="finance-card">
    <div class="finance-card-icon expense">💸</div>
    <h2 class="finance-card-value">$8,230</h2>
    <p class="finance-card-label">Total Expenses</p>
  </div>
  
  <div class="finance-card">
    <div class="finance-card-icon balance">📊</div>
    <h2 class="finance-card-value">$4,220</h2>
    <p class="finance-card-label">Net Balance</p>
  </div>
</div>

Project Management

Board project management dengan kolom dan task cards.

To Do

3
Design new homepage

Create wireframes and mockups for the new homepage design

JD
John Doe
High
Update documentation

Update API documentation with new endpoints

JS
Jane Smith
Medium

In Progress

2
Implement user authentication

Add JWT-based authentication system

BJ
Bob Johnson
High

Done

1
Setup CI/CD pipeline

Configure automated testing and deployment

AL
Alice Lee
Low
<div class="project-board">
  <div class="project-column">
    <div class="project-column-header">
      <h4 class="project-column-title">To Do</h4>
      <div class="project-column-count">3</div>
    </div>
    
    <div class="project-task">
      <h5 class="project-task-title">Design new homepage</h5>
      <p class="project-task-description">Create wireframes and mockups</p>
      <div class="project-task-meta">
        <div class="project-task-assignee">
          <div class="project-task-assignee-avatar">JD</div>
          <span>John Doe</span>
        </div>
        <div class="project-task-priority high">High</div>
      </div>
    </div>
  </div>
</div>