{% extends "base.html" %}

{% block content %}

<div class="container-fluid px-2 px-md-4">

    <h4 class="mb-3 text-center text-md-start">Subcontractor Dashboard </h4>

    <!-- Charts -->
    <div class="row g-3">

        <!-- Bar Chart -->
        <div class="col-12 col-md-6">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-dark text-white text-center text-md-start">
                    Work Category Bar Chart
                </div>
                <div class="card-body text-center">
                    <img src="data:image/png;base64,{{ bar_chart }}" class="img-fluid" style="max-height:300px;">
                </div>
            </div>
        </div>


    </div>

</div>

{% endblock %}