agper-agen/modules/dasbor-level1.html

<style>
    .card{
        border-radius: 1ch;
        background-color: var(--input-background);
        padding: 1.25ch;
        display: grid; 
        grid-template-columns: auto 1fr;
    }
    .ecard{
        border-radius: 1ch;
        background-color: var(--input-background);
        padding: 1.25ch;
    }
    .numbers
    {
        width: 4ch;
        height: 4ch;
        background-color: var(--neutral-p-accent);
        border-radius: 2ch;
        text-align: center;
        line-height: 2em;
        margin: 1ch;
    }
    .numbers.warn
    {
        background-color: var(--neutral-n-accent);
    }
    .numbers.good
    {
        background-color: var(--positive-accent);
    }
    .texts{
        font-weight: 600;
        padding: 0 1ch;
    }
    .stexts{
        padding: 0 1ch;
    }
</style>
<div style="padding: 1ch; font-size: 1.2em; font-weight: 600;">
    Dasbor Evaluator <span id="uk"></span>
</div>
<div style="display: grid; gap: 2ch; grid-template-columns: 1fr auto 1fr; padding: 1ch">
    <div class="card">
        <div class="numbers">
            0
        </div>
        <div class="texts">
            Rencana<br>
            Aksi
        </div>
    </div>
    <div class="card">
        
        <div class="numbers">
            0
        </div>
        <div class="texts">
            Aksi<br>
            Berlangsung
        </div>
    </div>
    <div class="card">
        <div class="numbers warn">
            0
        </div>
        <div class="texts">
            Menunggu<br>
            Evaluasi
        </div>
    </div>
    <div style="grid-column: span 2;" class="ecard">
        <div class="texts">
            Paling Butuh Perhatian
        </div>
        <div class="stexts">
            <span id="udate">Tanggal</span>
            <span>-</span>
            <span id="utext">Deskripsi</span>
        </div>
    </div>
    <div class="card">
        <div class="numbers good">
            0
        </div>
        <div class="texts">
            Telah<br>
            Dievaluasi
        </div>
    </div>
    <div class="ecard">
        <div class="texts">
            Hari Ini
        </div>
        <div class="stexts" id="htoday">
            Tidak ada yang istimewa hari ini.
        </div>
    </div>
    <div style="grid-column: span 2;" class="ecard">
        <div class="texts">
            <span id="mo"></span>
            <span id="yr"></span>
        </div>
        <div class="stexts" id="calendar" style="display: grid; grid-template-columns: auto auto auto auto auto auto auto; gap: 1ch;">
        </div>
    </div>
</div>
<script type="module">
    function µ(selector)
    {
        if (selector) return $('body>#main>#content').find(selector);
        return $('body>#main>#content');
    }
    µ('#uk').text(userDetails.info.unitKerja);
    µ('#mo').text(monthName[(new Date()).getMonth()+1]);
    µ('#yr').text((new Date()).getFullYear());
    function buildCalendar()
    {
        µ('#calendar').empty();
        µ('#calendar')[0].style.marginTop = ".5em"
        const dayNames = 
        [
            "Ahd",
            "Sen",
            "Sel",
            "Rab",
            "Kam",
            "Jum",
            "Sab"
        ]
        for (let d = 0;d<7;d++)
        {
            const day = moly.newElement("div");
            day.append(dayNames[d]);
            day.style.fontWeight = "600";
            day.style.color = d == 0 ? "var(--negative-accent)" : "var(--primary-foreground)";
            day.style.textAlign = "center"
            day.style.borderBottom = "1px solid " + (d == 0 ? "var(--negative-accent)" : "var(--primary-foreground)");
            µ('#calendar').append(day);
        }
        const today = new Date();
        const tomonth = new Date(today.getFullYear(),today.getMonth(),1);
        const tomonthl = new Date(today.getFullYear(),today.getMonth()+1,0);
        const firstDay = tomonth.getDay();
        const lastDate = tomonthl.getDate();
        const todayDate = today.getDate()
        let x = 0;
        while (x <firstDay)
        {
            µ('#calendar').append(moly.newElement("div"));
            x++;
        }
        for (let d = 1;d<=lastDate;d++)
        {
            const day = moly.newElement("div");
            day.append(d);
            day.style.color = (firstDay + d - 1) % 7 == 0 ? "var(--negative-accent)" : "var(--primary-foreground)";
            day.style.textAlign = "center"
            day.style.margin = "auto"
            day.style.width = "2em"
            day.style.height = "2em"
            day.style.lineHeight = "2em"
            day.style.borderRadius = "1em"
            day.style.backgroundColor = d == todayDate ? "var(--secondary-background)" : "";
            µ('#calendar').append(day);
        }
    }
    buildCalendar();
</script>