# Usable UI Components This document contains reusable UI components for the Containr project. All components are built with React, TypeScript, and styled using Tailwind CSS with a consistent design system. ## 📊 Dashboard & Analytics Components ### Metric Cards #### Sales Metric Card Displays total sales with trend indicator and time period selector. **Features:** - Large metric display ($128.32) - Trend indicator (+2% with green styling) - Time period buttons (1D, 1W, 1M, 3M, 6M, 1Y) - Report action button **Usage:** Perfect for dashboard overviews, KPI displays, and analytics summaries. --- #### Visitors Metric Card Shows visitor statistics with device breakdown and trends. **Features:** - Visitor count display (237,456) - Trend indicator (-1.4% with red styling for decline) - Device type breakdown (Desktop: 27%, Mobile: 63%, Tablet: 10%) - Device-specific trend indicators - Report action button **Usage:** Ideal for traffic analytics, user behavior dashboards, and marketing metrics. --- #### Conversion Rate Card Displays conversion metrics with funnel breakdown. **Features:** - Main conversion rate (16.9%) - Trend indicator (+2.1% growth) - Conversion funnel stages: - Added to Cart: 3,842 (+12%) - Checkout Started: 2,156 (+8%) - Payment Completed: 1,842 (+5%) - Mini sparkline chart - Details action button **Usage:** E-commerce dashboards, sales funnel analysis, conversion optimization tracking. --- ## 📈 Charts & Visualizations ### Visitor Channels Chart Horizontal stacked bar chart showing traffic source distribution. **Features:** - Overall percentage (78%) - Trend indicator (-0.4%) - Visual channel breakdown: - Organic Search: 45% (gray) - Direct Traffic: 40% (blue) - Social Media: 15% (green) - Channel labels with percentages - Details action button **Usage:** Marketing analytics, traffic source analysis, channel performance tracking.
Online Store
$52.12
+4.5%
Facebook
$38.45
-2.8%
Instagram
$37.75
+3.2%
Total Visitors
237,456
-1.4%
Desktop
27%
-3.2%
Tablet
12%
-6.4%
Mobile
61%
+0.8%
Conversion Rate
16.9%
+2.1%
Added to Cart
3,842
+1.8%
Reached Checkout
1,256
-1.2%
Purchased
649
+2.4%
JUL '23OCT '23JAN '24APR '24JUL '24NOV '24
Visitors Channels
78%
-0.4%
Organic Search
Referral
Direct
ChannelsPercentTotal
Facebook
28%
6,958
Instagram
23%
5,716
Google
32%
7,952
User Retention
24%
+2.0%
1
2
3
4
5
6
7
8
9
10
11
12
Last 12 months data updated at 1:51 PM.
Weekly Visitors
16,008
+1.1%
New visitors
Returning visitors
HappinessSadnessAngerFearSurpriseDisgustLoveExcitement
Weekly Visitors
16,008
+1.1%
New visitors
Returning visitors
HappinessSadnessAngerFearSurpriseDisgustLoveExcitement
Weekly Visitors
16,008
+1.1%
New visitors
Returning visitors
HappinessSadnessAngerFearSurpriseDisgustLoveExcitement
Shipping Tracking
3,844
+1.8%
Apple Watch S5 GPS 40mm White
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Support Analytics
2450
+5.4% total tickets
Target : 20m
Mon
Tue
Wed
Thu
Fri
Sat
Sun
ChannelsActualAvg.
First response time
Below SLA
15m
+22%
Avg Resolution Time
Meeting SLA
48m
+18%
CSAT Score
Above Target
4.8/5
-0.3%
Recent Tickets
J
James Brown
High
·
Solved
48m
#TKT-98744
S
Sophia Williams
Medium
·
In-progress
19m
#TKT-98743
M
Matthew Johnson
Low
·
Pending
12m
#TKT-98745
Campaign Data
$1,750
Last 15 days
45%
$32.9K used
Product Categories
+2.1% vs last week
Accessories
45 products
·
+3.2%
Customer Segments
+5.8% vs last week
Premium
$6,450
·
36%
Regular
$5,320
·
30%
New
$3,280
·
18%
Recent Activities
7 new activities today
Inventory Updated
11:30 AM
Women's Summer Dress - Blue
Stock: +150 units added
Price Change
11:30 AM
Seasonal discount applied
$89.99 → $69.99 (-22%)
New Product Added
11:30 AM
Women's Summer Dress - Red
Listed in Women's Fashion
Product Images Updated
11:30 AM
Women's Summer Dress - Blue
5 new images added
Description Updated
11:30 AM
Women's Summer Dress - Blue
Added size guide and materials
Inventory Updated
11:30 AM
Women's Summer Dress - Blue
Stock: +150 units added
Price Change
11:30 AM
Seasonal discount applied
$89.99 → $69.99 (-22%)