mukeshs/IOT_application
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dashboard update

Browse Source
This commit is contained in:
mukeshs
2025-10-25 09:35:47 +05:30
parent 7cfe522512
commit e5c5044ff3
15 changed files with 1137 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

524
fuse-starter-v20.0.0/src/app/modules/admin/example/example.component.ts
View File

@ -23,10 +23,23 @@ interface DashboardMetrics {
client_users: number;
transactions: number;
sales: string;
active_machines?: number;
inactive_machines?: number;
machine_operation_status?: { [key: string]: number };
machine_stock_status?: { [key: string]: number };
payment_breakdown?: {
cash: number;
cashless: number;
upi_wallet_card: number;
upi_wallet_paytm: number;
refund: number;
refund_processed: number;
total: number;
};
product_sales_yearly?: { year: string; amount: number }[];
sales_yearly?: { year: string; amount: number }[];
top_selling_products?: { product_name: string; quantity: number }[];
error?: string;
transaction_trends?: { date: string; transactions: number }[];
sales_distribution?: { [key: string]: number };
client_user_categories?: { [key: string]: number };
}
@Component({
@ -56,112 +69,41 @@ export class ExampleComponent implements OnInit {
clientUsers: number = 0;
transactions: number = 0;
sales: string = '₹0.00';
activeMachines: number = 0;
inactiveMachines: number = 0;
errorMessage: string = '';
loading: boolean = false;
barChartOptions: Partial<ApexOptions>;
lineChartOptions: Partial<ApexOptions>;
doughnutChartOptions: Partial<ApexOptions>;
pieChartOptions: Partial<ApexOptions>;
// Payment breakdown
paymentCash: number = 0;
paymentCashless: number = 0;
paymentUPIWalletCard: number = 0;
paymentUPIWalletPaytm: number = 0;
refund: number = 0;
refundProcessed: number = 0;
paymentTotal: number = 0;
// Machine operation status
machineOperationStatus: { [key: string]: number } = {};
// Machine stock status
machineStockStatus: { [key: string]: number } = {};
// Top selling products
topSellingProducts: { product_name: string; quantity: number }[] = [];
// Filter states
productSalesTimeRange: string = 'year';
salesTimeRange: string = 'year';
topProductsTimeRange: string = 'year';
productSalesChartOptions: Partial<ApexOptions>;
salesChartOptions: Partial<ApexOptions>;
private readonly baseUrl = environment.apiUrl || 'http://localhost:5000';
constructor(private http: HttpClient) {
// Initialize bar chart options with mock data
this.barChartOptions = {
series: [{
name: 'Metrics',
data: [150, 80, 120, 60]
}],
chart: {
type: 'bar',
height: 350
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%'
}
},
dataLabels: {
enabled: false
},
xaxis: {
categories: ['Machines', 'Clients', 'Company Users', 'Client Users']
},
colors: ['#3B82F6', '#EF4444', '#F59E0B', '#EF4444'],
tooltip: {
y: {
formatter: (val) => `${val}`
}
}
};
// Initialize line chart options with mock data
this.lineChartOptions = {
series: [{
name: 'Transactions',
data: [10, 15, 8, 12, 20]
}],
chart: {
type: 'line',
height: 350
},
stroke: {
width: 3,
curve: 'smooth'
},
xaxis: {
type: 'category',
categories: ['2025-08-15', '2025-08-16', '2025-08-17', '2025-08-18', '2025-08-19']
},
yaxis: {
title: {
text: 'Transactions'
}
},
colors: ['#EF4444'],
tooltip: {
x: {
format: 'dd MMM yyyy'
}
}
};
// Initialize doughnut chart options with mock data
this.doughnutChartOptions = {
series: [40, 30, 20],
chart: {
type: 'donut',
height: 350
},
labels: ['Product A', 'Product B', 'Product C'],
colors: ['#10B981', '#F59E0B', '#8B5CF6'],
responsive: [{
breakpoint: 480,
options: {
chart: { width: 200 },
legend: { position: 'bottom' }
}
}]
};
// Initialize pie chart options with mock data
this.pieChartOptions = {
series: [50, 30, 20],
chart: {
type: 'pie',
height: 350
},
labels: ['Premium', 'Standard', 'Basic'],
colors: ['#EF4444', '#6B7280', '#34D399'],
responsive: [{
breakpoint: 480,
options: {
chart: { width: 200 },
legend: { position: 'bottom' }
}
}]
};
this.initializeCharts();
}
ngOnInit() {
@ -169,35 +111,259 @@ export class ExampleComponent implements OnInit {
}
updateMachine(filter: 'active' | 'inactive' | 'all') {
console.log('Filter clicked:', filter);
this.fetchDashboardMetrics(filter);
}
updateProductSalesTimeRange(range: string) {
this.productSalesTimeRange = range;
console.log('Product Sales Time Range:', range);
this.fetchProductSalesData(range);
}
updateSalesTimeRange(range: string) {
this.salesTimeRange = range;
console.log('Sales Time Range:', range);
this.fetchSalesData(range);
}
updateTopProductsTimeRange(range: string) {
this.topProductsTimeRange = range;
console.log('Top Products Time Range:', range);
this.fetchTopProductsData(range);
}
private fetchProductSalesData(timeRange: string) {
const url = `${this.baseUrl}/product-sales?time_range=${timeRange}`;
console.log('Fetching product sales data:', timeRange);
const token = localStorage.getItem('token') || localStorage.getItem('access_token');
this.http.get<{ product_sales: { year: string; amount: number }[] }>(url, {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': token ? `Bearer ${token}` : ''
}
}).subscribe({
next: (response) => {
console.log('✓ Product Sales Data:', response);
if (response.product_sales && response.product_sales.length > 0) {
this.productSalesChartOptions = {
...this.productSalesChartOptions,
series: [{
name: 'Sales',
data: response.product_sales.map(item => item.amount)
}],
xaxis: {
...this.productSalesChartOptions.xaxis,
categories: response.product_sales.map(item => item.year)
}
};
}
},
error: (error) => {
console.error('✗ Error fetching product sales data:', error);
}
});
}
private fetchSalesData(timeRange: string) {
const url = `${this.baseUrl}/sales-data?time_range=${timeRange}`;
console.log('Fetching sales data:', timeRange);
const token = localStorage.getItem('token') || localStorage.getItem('access_token');
this.http.get<{ sales_data: { year: string; amount: number }[] }>(url, {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': token ? `Bearer ${token}` : ''
}
}).subscribe({
next: (response) => {
console.log('✓ Sales Data:', response);
if (response.sales_data && response.sales_data.length > 0) {
this.salesChartOptions = {
...this.salesChartOptions,
series: [{
name: 'Sales',
data: response.sales_data.map(item => item.amount)
}],
xaxis: {
...this.salesChartOptions.xaxis,
categories: response.sales_data.map(item => item.year)
}
};
}
},
error: (error) => {
console.error('✗ Error fetching sales data:', error);
}
});
}
private fetchTopProductsData(timeRange: string) {
const url = `${this.baseUrl}/top-products?time_range=${timeRange}`;
console.log('Fetching top products data:', timeRange);
const token = localStorage.getItem('token') || localStorage.getItem('access_token');
this.http.get<{ top_products: { product_name: string; quantity: number }[] }>(url, {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': token ? `Bearer ${token}` : ''
}
}).subscribe({
next: (response) => {
console.log('✓ Top Products Data:', response);
if (response.top_products) {
this.topSellingProducts = response.top_products;
}
},
error: (error) => {
console.error('✗ Error fetching top products data:', error);
}
});
}
private initializeCharts() {
// Product Sales Chart
this.productSalesChartOptions = {
series: [{
name: 'Sales',
data: []
}],
chart: {
type: 'bar',
height: 350,
stacked: true,
toolbar: {
show: false
}
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '80%',
}
},
dataLabels: {
enabled: false
},
xaxis: {
categories: [],
labels: {
style: {
fontSize: '12px'
}
}
},
yaxis: {
title: {
text: 'Rupees'
},
labels: {
formatter: (val) => `₹${(val / 1000000).toFixed(1)}M`
}
},
colors: ['#3B82F6', '#EF4444', '#F59E0B', '#10B981', '#8B5CF6'],
fill: {
opacity: 1
},
legend: {
show: false
},
grid: {
borderColor: '#f1f1f1'
}
};
// Sales Chart (Area)
this.salesChartOptions = {
series: [{
name: 'Sales',
data: []
}],
chart: {
type: 'area',
height: 350,
toolbar: {
show: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
width: 2
},
xaxis: {
categories: [],
labels: {
style: {
fontSize: '12px'
}
}
},
yaxis: {
title: {
text: 'Rupees'
},
labels: {
formatter: (val) => `₹${(val / 1000000).toFixed(1)}M`
}
},
colors: ['#14B8A6'],
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
opacityFrom: 0.7,
opacityTo: 0.3,
stops: [0, 90, 100]
}
},
grid: {
borderColor: '#f1f1f1'
}
};
}
private fetchDashboardMetrics(filter: string) {
this.loading = true;
this.machineTitle = 'Loading...';
this.errorMessage = '';
const url = `${this.baseUrl}/dashboard-metrics?machine_filter=${filter}`;
console.log('Fetching from URL:', url);
console.log('Fetching dashboard data with filter:', filter);
console.log('URL:', url);
// Get token from localStorage
const token = localStorage.getItem('token') || localStorage.getItem('access_token');
this.http.get<DashboardMetrics>(url, {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
'Content-Type': 'application/json',
'Authorization': token ? `Bearer ${token}` : ''
}
}).subscribe({
next: (response) => {
console.log('API Response:', response);
console.log('✓ Dashboard API Response:', response);
this.loading = false;
if (response.error) {
this.handleError(`Server Error: ${response.error}`);
} else {
this.updateDashboardData(response);
console.log('✓ Dashboard data updated successfully');
}
},
error: (error: HttpErrorResponse) => {
console.error('HTTP Error:', error);
console.error('✗ Dashboard HTTP Error:', error);
this.loading = false;
this.handleHttpError(error);
}
@ -205,6 +371,7 @@ export class ExampleComponent implements OnInit {
}
private updateDashboardData(response: DashboardMetrics) {
// Update basic metrics
this.machineTitle = response.machine_title || 'Machines';
this.machineCount = response.machine_count || 0;
this.clients = response.clients || 0;
@ -212,54 +379,73 @@ export class ExampleComponent implements OnInit {
this.clientUsers = response.client_users || 0;
this.transactions = response.transactions || 0;
this.sales = `₹${response.sales || '0.00'}`;
this.activeMachines = response.active_machines || 0;
this.inactiveMachines = response.inactive_machines || 0;
this.errorMessage = '';
// Update bar chart
this.barChartOptions = {
...this.barChartOptions,
series: [{
name: 'Metrics',
data: [
this.machineCount,
this.clients,
this.companyUsers,
this.clientUsers
]
}]
};
// Update payment breakdown
if (response.payment_breakdown) {
this.paymentCash = response.payment_breakdown.cash || 0;
this.paymentCashless = response.payment_breakdown.cashless || 0;
this.paymentUPIWalletCard = response.payment_breakdown.upi_wallet_card || 0;
this.paymentUPIWalletPaytm = response.payment_breakdown.upi_wallet_paytm || 0;
this.refund = response.payment_breakdown.refund || 0;
this.refundProcessed = response.payment_breakdown.refund_processed || 0;
this.paymentTotal = response.payment_breakdown.total || 0;
}
// Update line chart with transaction trends
if (response.transaction_trends) {
this.lineChartOptions = {
...this.lineChartOptions,
// Update machine operation status
if (response.machine_operation_status) {
this.machineOperationStatus = response.machine_operation_status;
}
// Update machine stock status
if (response.machine_stock_status) {
this.machineStockStatus = response.machine_stock_status;
}
// Update top selling products
if (response.top_selling_products) {
this.topSellingProducts = response.top_selling_products;
}
// Update Product Sales Chart
if (response.product_sales_yearly && response.product_sales_yearly.length > 0) {
this.productSalesChartOptions = {
...this.productSalesChartOptions,
series: [{
name: 'Transactions',
data: response.transaction_trends.map(item => item.transactions)
name: 'Sales',
data: response.product_sales_yearly.map(item => item.amount)
}],
xaxis: {
...this.lineChartOptions.xaxis,
categories: response.transaction_trends.map(item => item.date)
...this.productSalesChartOptions.xaxis,
categories: response.product_sales_yearly.map(item => item.year)
}
};
}
// Update doughnut chart with sales distribution
if (response.sales_distribution) {
this.doughnutChartOptions = {
...this.doughnutChartOptions,
series: Object.values(response.sales_distribution),
labels: Object.keys(response.sales_distribution)
// Update Sales Chart
if (response.sales_yearly && response.sales_yearly.length > 0) {
this.salesChartOptions = {
...this.salesChartOptions,
series: [{
name: 'Sales',
data: response.sales_yearly.map(item => item.amount)
}],
xaxis: {
...this.salesChartOptions.xaxis,
categories: response.sales_yearly.map(item => item.year)
}
};
}
}
// Update pie chart with client user categories
if (response.client_user_categories) {
this.pieChartOptions = {
...this.pieChartOptions,
series: Object.values(response.client_user_categories),
labels: Object.keys(response.client_user_categories)
};
}
getStockStatusKeys(): string[] {
return Object.keys(this.machineStockStatus).sort();
}
getOperationStatusKeys(): string[] {
return Object.keys(this.machineOperationStatus).sort();
}
private handleError(message: string) {
@ -272,18 +458,15 @@ export class ExampleComponent implements OnInit {
if (error.status === 0) {
errorMessage += 'Cannot connect to server. Please check if the Flask server is running on the correct port.';
} else if (error.status === 401) {
errorMessage += 'Authentication required. Please login again.';
} else if (error.status === 404) {
errorMessage += 'API endpoint not found. Please check the server routing.';
} else if (error.status >= 500) {
errorMessage += 'Internal server error. Please check the server logs.';
} else {
errorMessage += `Status: ${error.status} - ${error.statusText}. `;
if (error.error && typeof error.error === 'string' && error.error.includes('<!doctype')) {
errorMessage += 'Server returned HTML instead of JSON. Check your proxy configuration.';
} else {
errorMessage += `Details: ${error.error?.error || error.message || 'Unknown error'}`;
}
errorMessage += `Details: ${error.error?.error || error.message || 'Unknown error'}`;
}
this.handleError(errorMessage);
@ -297,39 +480,18 @@ export class ExampleComponent implements OnInit {
this.clientUsers = 0;
this.transactions = 0;
this.sales = '₹0.00';
// Reset chart data
this.barChartOptions = {
...this.barChartOptions,
series: [{
name: 'Metrics',
data: [0, 0, 0, 0]
}]
};
this.lineChartOptions = {
...this.lineChartOptions,
series: [{
name: 'Transactions',
data: []
}],
xaxis: {
...this.lineChartOptions.xaxis,
categories: []
}
};
this.doughnutChartOptions = {
...this.doughnutChartOptions,
series: [],
labels: []
};
this.pieChartOptions = {
...this.pieChartOptions,
series: [],
labels: []
};
this.activeMachines = 0;
this.inactiveMachines = 0;
this.paymentCash = 0;
this.paymentCashless = 0;
this.paymentUPIWalletCard = 0;
this.paymentUPIWalletPaytm = 0;
this.refund = 0;
this.refundProcessed = 0;
this.paymentTotal = 0;
this.machineOperationStatus = {};
this.machineStockStatus = {};
this.topSellingProducts = [];
}
retryFetch() {