Sales Dashboard

/***********************************************************************************
 *  Copyright (c) 2025 Corvus Engineering
 *  All Rights Reserved
 ***********************************************************************************/
package com.oorian.website.demos;

import com.oorian.chartjs.CjChart;
import com.oorian.chartjs.CjDataset;
import com.oorian.chartjs.enums.ChartType;
import com.oorian.chartjs.enums.LegendPosition;
import com.oorian.css.*;
import com.oorian.html.elements.*;


/****************************************************************************************************************
 * Sales Dashboard demo component.
 * Showcases a complete sales dashboard with multiple Chart.js visualizations.
 ****************************************************************************************************************/
public class SalesDashboardDemo extends Div
{
    public SalesDashboardDemo()
    {
        createDashboard();
    }

    private void createDashboard()
    {
        // Main container
        setPadding("40px");
        setBackgroundColor("#f1f5f9");

        Div container = new Div();
        container.setMaxWidth("1400px");
        container.setMargin("0 auto");

        // Dashboard header
        container.addElement(createDashboardHeader());

        // KPI Cards row
        container.addElement(createKpiCardsRow());

        // Charts grid
        container.addElement(createChartsGrid());

        addElement(container);
    }

    private Div createDashboardHeader()
    {
        Div header = new Div();
        header.setMarginBottom("32px");

        H2 title = new H2();
        title.setText("Sales Dashboard");
        title.setColor("#1e293b");
        title.setFontSize("28px");
        title.setFontWeight("700");
        title.setMarginTop("0");
        title.setMarginBottom("8px");
        header.addElement(title);

        P subtitle = new P();
        subtitle.setText("Real-time sales performance metrics for Q4 2025");
        subtitle.setColor("#64748b");
        subtitle.setFontSize("15px");
        subtitle.setMargin("0");
        header.addElement(subtitle);

        return header;
    }

    private Div createKpiCardsRow()
    {
        Div row = new Div();
        row.setDisplay(Display.GRID);
        row.addStyleAttribute("grid-template-columns", "repeat(auto-fit, minmax(240px, 1fr))");
        row.addStyleAttribute("gap", "20px");
        row.setMarginBottom("32px");

        row.addElement(createKpiCard("Total Revenue", "$1,284,592", "+12.5%", true, "#10b981"));
        row.addElement(createKpiCard("Orders", "3,847", "+8.2%", true, "#3b82f6"));
        row.addElement(createKpiCard("Average Order Value", "$334", "-2.1%", false, "#f59e0b"));
        row.addElement(createKpiCard("Conversion Rate", "3.24%", "+0.8%", true, "#8b5cf6"));

        return row;
    }

    private Div createKpiCard(String label, String value, String change, boolean positive, String accentColor)
    {
        Div card = new Div();
        card.setBackgroundColor("#ffffff");
        card.setBorderRadius("12px");
        card.setPadding("24px");
        card.addStyleAttribute("box-shadow", "0 1px 3px rgba(0, 0, 0, 0.1)");
        card.setBorderLeft("4px solid " + accentColor);

        P labelEl = new P();
        labelEl.setText(label);
        labelEl.setColor("#64748b");
        labelEl.setFontSize("13px");
        labelEl.setFontWeight("500");
        labelEl.setMarginTop("0");
        labelEl.setMarginBottom("8px");
        labelEl.addStyleAttribute("text-transform", "uppercase");
        labelEl.addStyleAttribute("letter-spacing", "0.05em");
        card.addElement(labelEl);

        Div valueRow = new Div();
        valueRow.setDisplay(Display.FLEX);
        valueRow.setAlignItems(AlignItems.BASELINE);
        valueRow.addStyleAttribute("gap", "12px");

        Span valueEl = new Span();
        valueEl.setText(value);
        valueEl.setColor("#1e293b");
        valueEl.setFontSize("28px");
        valueEl.setFontWeight("700");
        valueRow.addElement(valueEl);

        Span changeEl = new Span();
        changeEl.setText(change);
        changeEl.setColor(positive ? "#10b981" : "#ef4444");
        changeEl.setFontSize("14px");
        changeEl.setFontWeight("600");
        valueRow.addElement(changeEl);

        card.addElement(valueRow);

        return card;
    }

    private Div createChartsGrid()
    {
        Div grid = new Div();
        grid.setDisplay(Display.GRID);
        grid.addStyleAttribute("grid-template-columns", "2fr 1fr");
        grid.addStyleAttribute("gap", "24px");

        // Left column - Revenue trend
        grid.addElement(createRevenueTrendCard());

        // Right column - Sales by channel
        grid.addElement(createSalesByChannelCard());

        // Second row - full width product performance
        Div fullWidthRow = new Div();
        fullWidthRow.addStyleAttribute("grid-column", "1 / -1");
        fullWidthRow.setMarginTop("24px");
        fullWidthRow.addElement(createProductPerformanceCard());
        grid.addElement(fullWidthRow);

        return grid;
    }

    private Div createRevenueTrendCard()
    {
        Div card = createChartCard("Revenue Trend", "Monthly revenue over the past 12 months");

        CjChart chart = new CjChart(ChartType.LINE)
            .setLabels("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec")
            .addDataset(new CjDataset("2024")
                .setData(85000, 92000, 78000, 95000, 88000, 102000, 98000, 110000, 105000, 115000, 125000, 135000)
                .setBorderColor("rgba(156, 163, 175, 0.8)")
                .setBackgroundColor("rgba(156, 163, 175, 0.1)")
                .setTension(0.4)
                .setFill(false))
            .addDataset(new CjDataset("2025")
                .setData(95000, 105000, 92000, 118000, 108000, 125000, 115000, 132000, 128000, 142000, 155000, 168000)
                .setBorderColor("rgb(59, 130, 246)")
                .setBackgroundColor("rgba(59, 130, 246, 0.1)")
                .setTension(0.4)
                .setFill(true))
            .setYAxisBeginAtZero(false)
            .setLegendPosition(LegendPosition.TOP)
            .setResponsive(true)
            .setMaintainAspectRatio(true)
            .setAspectRatio(2.2);

        card.addElement(chart);
        return card;
    }

    private Div createSalesByChannelCard()
    {
        Div card = createChartCard("Sales by Channel", "Distribution across sales channels");

        CjChart chart = new CjChart(ChartType.DOUGHNUT)
            .setLabels("Online Store", "Retail Partners", "Direct Sales", "Marketplace")
            .addDataset(new CjDataset("Revenue")
                .setData(45, 25, 18, 12)
                .setBackgroundColors(
                    "rgba(59, 130, 246, 0.85)",
                    "rgba(16, 185, 129, 0.85)",
                    "rgba(245, 158, 11, 0.85)",
                    "rgba(139, 92, 246, 0.85)")
                .setBorderColor("#ffffff")
                .setBorderWidth(3)
                .setCutout("65%"))
            .setLegendPosition(LegendPosition.BOTTOM)
            .setResponsive(true)
            .setMaintainAspectRatio(true);

        card.addElement(chart);
        return card;
    }

    private Div createProductPerformanceCard()
    {
        Div card = createChartCard("Top Product Performance", "Units sold by product category");

        CjChart chart = new CjChart(ChartType.BAR)
            .setLabels("Electronics", "Clothing", "Home & Garden", "Sports", "Beauty", "Books")
            .addDataset(new CjDataset("Q3 2025")
                .setData(1250, 980, 720, 650, 580, 420)
                .setBackgroundColor("rgba(59, 130, 246, 0.7)")
                .setBorderColor("rgb(59, 130, 246)")
                .setBorderWidth(1)
                .setBorderRadius(6))
            .addDataset(new CjDataset("Q4 2025")
                .setData(1480, 1120, 890, 780, 720, 510)
                .setBackgroundColor("rgba(16, 185, 129, 0.7)")
                .setBorderColor("rgb(16, 185, 129)")
                .setBorderWidth(1)
                .setBorderRadius(6))
            .setYAxisBeginAtZero(true)
            .setLegendPosition(LegendPosition.TOP)
            .setResponsive(true)
            .setMaintainAspectRatio(true)
            .setAspectRatio(3);

        card.addElement(chart);
        return card;
    }

    private Div createChartCard(String title, String subtitle)
    {
        Div card = new Div();
        card.setBackgroundColor("#ffffff");
        card.setBorderRadius("12px");
        card.setPadding("24px");
        card.addStyleAttribute("box-shadow", "0 1px 3px rgba(0, 0, 0, 0.1)");

        H4 titleEl = new H4();
        titleEl.setText(title);
        titleEl.setColor("#1e293b");
        titleEl.setFontSize("16px");
        titleEl.setFontWeight("600");
        titleEl.setMarginTop("0");
        titleEl.setMarginBottom("4px");
        card.addElement(titleEl);

        P subtitleEl = new P();
        subtitleEl.setText(subtitle);
        subtitleEl.setColor("#94a3b8");
        subtitleEl.setFontSize("13px");
        subtitleEl.setMarginTop("0");
        subtitleEl.setMarginBottom("20px");
        card.addElement(subtitleEl);

        return card;
    }
}