Applications #

Admindek ships with a complete set of pre-built application layouts you can drop into your project. Each app is a standalone HTML page with its own SCSS partial and JavaScript module, designed to be customized rather than configured.

Application catalog #

Application	File	Use case
Email	`application/email.html`	Inbox, message detail, compose
File Manager	`application/file-manager.html`	Folder navigation, grid/list views, file actions
Chat	`application/chat.html`	One-to-one and group messaging
Calendar	`application/calendar.html`	Month/week/day calendar with events
Tasks	`application/task-board.html`, `task-list.html`, `task-detail.html`	Kanban board, task list, detail view
To-Do	`application/todo.html`	Lightweight checklist app
Notifications	`application/notifications.html`	Notification center with filtering
Invoice	`application/invoice.html`, `invoice-list.html`, `invoice-summary.html`	Invoice creation, listing, summary
Gallery	`application/gallery-grid.html`, `gallery-masonry.html`, `gallery-advance.html`	Image galleries with GLightbox
User Profile	`application/user-profile.html`, `user-profile-social.html`, `user-list.html`, `user-card.html`	Profile, social profile, user management

All applications use the standard pc-container > pc-content layout wrapper, integrate with the dark mode and RTL theming, and follow the same Phosphor + Tabler icon conventions as the rest of the template.

Email #

A three-pane email client (sidebar, message list, message detail) with compose support.

File: src/html/application/email.html

Markup structure #

<div class="email-wrapper">
  <!-- Sidebar: folders, labels -->
  <div class="email-sidebar" id="emailSidebar">
    <button class="btn btn-primary w-100" id="composeBtn">Compose</button>
    <ul class="email-folders">
      <li><a href="#inbox"><i class="ti ti-inbox"></i> Inbox <span class="badge">12</span></a></li>
      <li><a href="#sent"><i class="ti ti-send"></i> Sent</a></li>
      <li><a href="#drafts"><i class="ti ti-file"></i> Drafts</a></li>
      <li><a href="#trash"><i class="ti ti-trash"></i> Trash</a></li>
    </ul>
  </div>
 
  <!-- Main content: list + detail -->
  <div class="email-content">
    <div class="email-toolbar"><!-- search, refresh, archive, delete --></div>
 
    <div class="email-list" id="emailList">
      <div class="email-list-item unread starred" data-email-id="1">
        <div class="email-avatar">SJ</div>
        <div class="email-item-content">
          <div class="email-subject">Q1 Marketing Report</div>
          <div class="email-preview">Hi team, please find attached…</div>
        </div>
      </div>
      <!-- repeat per email -->
    </div>
 
    <div class="email-detail" id="emailDetail" hidden>
      <!-- Selected email rendered here -->
    </div>
  </div>
</div>

Key CSS hooks #

Class	Purpose
`.email-wrapper`	Outer 3-column flex container
`.email-sidebar`	Folder/label nav
`.email-list-item.unread`	Bold styling for unread
`.email-list-item.starred`	Star icon shown
`.email-list-item.selected`	Highlighted active item

JavaScript init #

The page wires up three behaviors:

List item selection — clicking an .email-list-item populates #emailDetail
Compose modal — #composeBtn opens a Bootstrap modal with a Quill editor
Sidebar toggle — #sidebarToggle collapses the sidebar on mobile

Sample data lives inline in the page; replace with your own fetch call to populate #emailList.

File Manager #

A two-pane file browser with folder tree, grid/list view toggle, and file actions.

File: src/html/application/file-manager.html

Features #

Folder tree navigation with expand/collapse
Toggle between grid and list view
File type icons (Phosphor)
Search and sort controls
Right-click context menu for file actions (rename, copy, move, delete)
Drag-and-drop upload zone (uses Uppy)

Markup snippet #

<div class="file-manager">
  <aside class="fm-tree">
    <ul class="fm-folder-list">
      <li class="fm-folder open">
        <i class="ph ph-folder-open"></i> Documents
        <ul>
          <li class="fm-folder">Reports</li>
          <li class="fm-folder">Contracts</li>
        </ul>
      </li>
      <li class="fm-folder"><i class="ph ph-folder"></i> Images</li>
    </ul>
  </aside>
 
  <main class="fm-content">
    <div class="fm-toolbar">
      <div class="btn-group view-toggle">
        <button class="btn btn-outline-secondary active" data-view="grid"><i class="ti ti-layout-grid"></i></button>
        <button class="btn btn-outline-secondary" data-view="list"><i class="ti ti-list"></i></button>
      </div>
    </div>
 
    <div class="fm-files fm-view-grid">
      <div class="fm-file" data-type="pdf">
        <i class="ph-duotone ph-file-pdf"></i>
        <span class="fm-file-name">Report.pdf</span>
        <span class="fm-file-size">2.3 MB</span>
      </div>
      <!-- repeat -->
    </div>
  </main>
</div>

Chat #

A messaging interface with conversation list, message thread, and rich input.

File: src/html/application/chat.html

Left rail: conversation list with avatars, unread badges, last-message preview
Center pane: scrollable message thread with date dividers
Bottom: input with attachment, emoji, and send

<div class="chat-wrapper">
  <div class="chat-conversations"><!-- conversation list --></div>
  <div class="chat-thread">
    <div class="chat-messages">
      <div class="chat-message received">
        <div class="chat-avatar">JD</div>
        <div class="chat-bubble">Hey, can you review the spec?</div>
        <div class="chat-time">10:42 AM</div>
      </div>
      <div class="chat-message sent">
        <div class="chat-bubble">Yep, on it.</div>
        <div class="chat-time">10:43 AM</div>
      </div>
    </div>
    <div class="chat-input">
      <textarea placeholder="Type a message…"></textarea>
      <button class="btn btn-primary"><i class="ti ti-send"></i></button>
    </div>
  </div>
</div>

Calendar #

A FullCalendar-powered calendar with month / week / day views, event creation, and drag-to-resize.

File: src/html/application/calendar.html

import { Calendar } from '@fullcalendar/core'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
 
const calendar = new Calendar(document.getElementById('calendar'), {
  plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
  initialView: 'dayGridMonth',
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay',
  },
  selectable: true,
  editable: true,
  events: '/api/events',
  select: (info) => openEventModal(info),
  eventClick: (info) => editEvent(info.event),
})
 
calendar.render()

Event source can be a URL (FullCalendar fetches JSON) or an inline array. Customize the toolbar, locale, and view options via the FullCalendar config.

Tasks #

Three views for task management:

Task Board (task-board.html) — Kanban board with drag-and-drop columns
Task List (task-list.html) — Sortable list with filters
Task Detail (task-detail.html) — Single-task view with comments, attachments, activity

The board view uses Dragula for column drag-and-drop:

import dragula from 'dragula'
 
dragula([...document.querySelectorAll('.kanban-column')], {
  moves: (el) => el.classList.contains('kanban-card'),
}).on('drop', (el, target, source) => {
  // Persist new column assignment
  updateTaskStatus(el.dataset.taskId, target.dataset.column)
})

To-Do #

A lightweight checklist (vs. the fuller Tasks app). Single page with add/check/delete actions, no separate detail view.

File: src/html/application/todo.html

Notifications #

A notification center with categorized notifications and read/unread management.

File: src/html/application/notifications.html

Features:

Filter tabs: All, Unread, Mentions, System
Bulk actions: mark all read, clear all
Per-notification actions: dismiss, mark read/unread, snooze
Empty state shown when no notifications match the filter

<div class="notification-center">
  <ul class="nav nav-tabs notification-tabs">
    <li><a class="nav-link active" data-filter="all">All <span class="badge">24</span></a></li>
    <li><a class="nav-link" data-filter="unread">Unread <span class="badge">8</span></a></li>
    <li><a class="nav-link" data-filter="mentions">Mentions</a></li>
    <li><a class="nav-link" data-filter="system">System</a></li>
  </ul>
 
  <ul class="notification-list">
    <li class="notification-item unread" data-category="mentions">
      <div class="notification-avatar">JD</div>
      <div class="notification-body">
        <strong>Jane</strong> mentioned you in <em>Q1 review</em>
        <small class="notification-time">2 min ago</small>
      </div>
      <div class="notification-actions">
        <button class="btn btn-sm btn-link">Mark read</button>
      </div>
    </li>
  </ul>
</div>

Invoice #

Three invoice-related pages:

invoice.html — Single invoice template (printable)
invoice-list.html — List of invoices with status badges (Paid / Pending / Overdue) and DataTables
invoice-summary.html — Compact summary view

Print styles are included; window.print() produces a clean printable invoice.

Gallery #

Three gallery layouts:

Grid (gallery-grid.html) — Uniform grid
Masonry (gallery-masonry.html) — Pinterest-style with Isotope
Advanced (gallery-advance.html) — Filterable + lightbox

All three open images in GLightbox (replaced FSLightbox in v3.4 — see What's new):

import GLightbox from 'glightbox'
 
GLightbox({
  selector: '.glightbox',
  loop: true,
  touchNavigation: true,
})

<a href="/images/photo1-large.jpg" class="glightbox" data-gallery="gallery-1">
  <img src="/images/photo1-thumb.jpg" alt="" />
</a>

User Profile #

Four user-related pages:

user-profile.html — Personal profile with bio, stats, activity feed
user-profile-social.html — Social-network style profile with cover photo, posts
user-list.html — Compact user list/table for admin views
user-card.html — Multiple user card variants

Profiles support tabs (About, Activity, Friends, Settings), inline editing, and avatar upload via FilePond.