unifi-voucher-site/template/components/bulk-print.ejs

<div class="relative z-40" role="dialog" aria-modal="true">
    <div id="overlay" class="fixed inset-0 bg-gray-500/75"></div>

    <div class="fixed overflow-hidden">
        <div class="absolute inset-0 overflow-hidden">
            <div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16">
                <div class="pointer-events-auto w-screen max-w-md">
                    <form id="print-form" class="flex h-full flex-col divide-y divide-black/5 dark:divide-white/5 bg-white dark:bg-gray-900 shadow-xl" action="<%= baseUrl %>/bulk/print" method="post" enctype="multipart/form-data">
                        <div class="h-0 flex-1 overflow-y-auto">
                            <div class="bg-sky-700 px-4 py-6 sm:px-6">
                                <div class="flex items-center justify-between">
                                    <h2 class="text-base font-semibold leading-6 text-white" id="slide-over-title">Bulk Print Vouchers</h2>
                                </div>
                                <div class="mt-1">
                                    <p class="text-sm text-sky-100">Get started by filling in the information below to print multiple vouchers.</p>
                                </div>
                            </div>
                            <div class="flex flex-1 flex-col justify-between">
                                <div class="divide-y divide-black/5 dark:divide-white/5 px-4 sm:px-6">
                                    <div class="space-y-6 pb-5 pt-6">
                                        <div>
                                            <label for="language" class="block text-sm font-medium leading-6 text-gray-900 dark:text-white">Language</label>
                                            <div class="mt-2">
                                                <select id="language" name="language" class="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 dark:text-white dark:bg-white/5 ring-1 ring-inset ring-gray-300 dark:ring-white/10 focus:ring-2 focus:ring-sky-600 sm:text-sm sm:leading-6 **:text-black">
                                                    <% Object.keys(languages).forEach((language) => { %>
                                                        <option value="<%= language %>"<%= language === defaultLanguage ? ' selected' : '' %>><%= languages[language] %> (<%= language %>)</option>
                                                    <% }); %>
                                                </select>
                                            </div>
                                        </div>
                                        <div>
                                            <span class="block text-sm font-medium leading-6 text-gray-900 dark:text-white">Vouchers</span>
                                            <ul role="list" class="max-h-96 h-96 overflow-y-auto mt-2 rounded-md border-0 divide-y divide-black/5 dark:divide-white/5 dark:bg-white/5 ring-1 ring-inset ring-gray-300 dark:ring-white/10">
                                                <% vouchers.forEach((voucher) => { %>
                                                    <li class="relative flex items-center space-x-4 px-4 py-4">
                                                        <input id="voucher-<%= voucher._id %>" aria-describedby="voucher-<%= voucher._id %>" name="vouchers" type="checkbox" value="<%= voucher._id %>" class="col-start-1 row-start-1 appearance-none rounded-sm border-0 dark:bg-white/5 ring-1 ring-inset ring-gray-300 dark:ring-white/10 focus:ring-2 focus:ring-sky-600 focus:ring-offset-0">
                                                        <label for="voucher-<%= voucher._id %>" class="voucher min-w-0 flex-auto">
                                                            <div class="flex items-center gap-x-3">
                                                                <h2 class="min-w-0 text-sm font-semibold leading-6 text-gray-900 dark:text-white">
                                                                    <div class="flex gap-x-2">
                                                                        <span class="tabular-nums pointer-events-none no-underline text-inherit"><%= voucher.code.slice(0, 5) %>-<%= voucher.code.slice(5) %></span>
                                                                        <% if (voucher.status === 'EXPIRED') { %>
                                                                            <div class="rounded-full w-fit  py-1 px-2 text-xs font-medium ring-1 ring-inset bg-red-50 text-red-800 ring-red-600/20 dark:text-red-400 dark:bg-red-400/10 dark:ring-red-400/20">
                                                                                Expired
                                                                            </div>
                                                                        <% } else {%>
                                                                            <% if(voucher.used > 0) { %>
                                                                                <div class="rounded-full flex-none py-1 px-2 text-xs font-medium ring-1 ring-inset bg-yellow-50 text-yellow-800 ring-yellow-600/20 dark:text-yellow-400 dark:bg-yellow-400/10 dark:ring-yellow-400/20">
                                                                                    In Use
                                                                                </div>
                                                                            <% } else { %>
                                                                                <div class="rounded-full flex-none py-1 px-2 text-xs font-medium ring-1 ring-inset bg-green-50 text-green-700 ring-green-600/20 dark:text-green-400 dark:bg-green-400/10 dark:ring-green-400/20">
                                                                                    Available
                                                                                </div>
                                                                            <% } %>
                                                                        <% } %>
                                                                        <% if (voucher.note) { %>
                                                                            <div class="hidden sm:block rounded-md flex-none py-1 px-2 text-xs font-medium ring-1 ring-inset bg-gray-50 text-gray-800 ring-gray-600/20 dark:text-gray-400 dark:bg-gray-400/10 dark:ring-gray-400/20">
                                                                                <%= voucher.note %>
                                                                            </div>
                                                                        <% } %>
                                                                    </div>
                                                                </h2>
                                                            </div>
                                                            <div class="mt-2 flex items-center gap-x-2.5 text-xs leading-5 text-gray-600 dark:text-gray-400">
                                                                <p class="whitespace-nowrap"><%= voucher.quota === 1 ? 'Single-use' : voucher.quota === 0 ? 'Multi-use (Unlimited)' : `Multi-use (${voucher.quota}x)` %></p>
                                                                <svg viewBox="0 0 2 2" class="h-0.5 w-0.5 flex-none fill-gray-500 dark:fill-gray-300">
                                                                    <circle cx="1" cy="1" r="1" />
                                                                </svg>
                                                                <p class="whitespace-nowrap"><%= timeConvert(voucher.duration) %></p>
                                                                <% if(voucher.qos_usage_quota) { %>
                                                                    <svg viewBox="0 0 2 2" class="hidden sm:block h-0.5 w-0.5 flex-none fill-gray-500 dark:fill-gray-300">
                                                                        <circle cx="1" cy="1" r="1" />
                                                                    </svg>
                                                                    <p class="hidden sm:block truncate"><%= bytesConvert(voucher.qos_usage_quota, 2) %> Data Limit</p>
                                                                <% } %>
                                                                <% if(voucher.qos_rate_max_down) { %>
                                                                    <svg viewBox="0 0 2 2" class="hidden sm:block h-0.5 w-0.5 flex-none fill-gray-500 dark:fill-gray-300">
                                                                        <circle cx="1" cy="1" r="1" />
                                                                    </svg>
                                                                    <p class="hidden sm:block truncate"><%= bytesConvert(voucher.qos_rate_max_down, 1, true) %> Download Limit</p>
                                                                <% } %>
                                                                <% if(voucher.qos_rate_max_up) { %>
                                                                    <svg viewBox="0 0 2 2" class="hidden sm:block h-0.5 w-0.5 flex-none fill-gray-500 dark:fill-gray-300">
                                                                        <circle cx="1" cy="1" r="1" />
                                                                    </svg>
                                                                    <p class=" hidden sm:block truncate"><%= bytesConvert(voucher.qos_rate_max_up, 1, true) %> Upload Limit</p>
                                                                <% } %>
                                                            </div>
                                                        </label>
                                                    </li>
                                                <% }); %>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="flex shrink-0 justify-end px-4 py-4">
                            <button id="close" type="button" class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50">Cancel</button>
                            <button type="submit" class="ml-4 inline-flex justify-center rounded-md bg-sky-700 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-sky-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-700">Print</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>