Add initial Spring Boot attendance app scaffold

Add project scaffolding for an attendance system: Maven wrapper and pom.xml, .gitignore and .gitattributes, Spring Boot application entrypoint and a PageController with basic routes. Include application.properties, JSP views under WEB-INF/views, static assets (CSS, JS) for UI, and a test class. This sets up the initial structure for development and local builds using the Maven wrapper.

.gitattributes

@@ -0,0 +1,4 @@
+/mvnw text eol=lf
+*.cmd text eol=crlf
+*.db filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,33 @@
+HELP.md
+target/
+.mvn/wrapper/maven-wrapper.jar
+!**/src/main/**/target/
+!**/src/test/**/target/
+
+### STS ###
+.apt_generated
+.classpath
+.factorypath
+.project
+.settings
+.springBeans
+.sts4-cache
+
+### IntelliJ IDEA ###
+.idea
+*.iws
+*.iml
+*.ipr
+
+### NetBeans ###
+/nbproject/private/
+/nbbuild/
+/dist/
+/nbdist/
+/.nb-gradle/
+build/
+!**/src/main/**/build/
+!**/src/test/**/build/
+
+### VS Code ###
+.vscode/

.mvn/wrapper/maven-wrapper.properties

@@ -0,0 +1,3 @@
+wrapperVersion=3.3.4
+distributionType=only-script
+distributionUrl=https://repo.maven.apache.org/maven2/org/apache/maven/apache-maven/3.9.16/apache-maven-3.9.16-bin.zip

mvnw

@@ -0,0 +1,295 @@
+#!/bin/sh
+# ----------------------------------------------------------------------------
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#    http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+# ----------------------------------------------------------------------------
+
+# ----------------------------------------------------------------------------
+# Apache Maven Wrapper startup batch script, version 3.3.4
+#
+# Optional ENV vars
+# -----------------
+#   JAVA_HOME - location of a JDK home dir, required when download maven via java source
+#   MVNW_REPOURL - repo url base for downloading maven distribution
+#   MVNW_USERNAME/MVNW_PASSWORD - user and password for downloading maven
+#   MVNW_VERBOSE - true: enable verbose log; debug: trace the mvnw script; others: silence the output
+# ----------------------------------------------------------------------------
+
+set -euf
+[ "${MVNW_VERBOSE-}" != debug ] || set -x
+
+# OS specific support.
+native_path() { printf %s\\n "$1"; }
+case "$(uname)" in
+CYGWIN* | MINGW*)
+  [ -z "${JAVA_HOME-}" ] || JAVA_HOME="$(cygpath --unix "$JAVA_HOME")"
+  native_path() { cygpath --path --windows "$1"; }
+  ;;
+esac
+
+# set JAVACMD and JAVACCMD
+set_java_home() {
+  # For Cygwin and MinGW, ensure paths are in Unix format before anything is touched
+  if [ -n "${JAVA_HOME-}" ]; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ]; then
+      # IBM's JDK on AIX uses strange locations for the executables
+      JAVACMD="$JAVA_HOME/jre/sh/java"
+      JAVACCMD="$JAVA_HOME/jre/sh/javac"
+    else
+      JAVACMD="$JAVA_HOME/bin/java"
+      JAVACCMD="$JAVA_HOME/bin/javac"
+
+      if [ ! -x "$JAVACMD" ] || [ ! -x "$JAVACCMD" ]; then
+        echo "The JAVA_HOME environment variable is not defined correctly, so mvnw cannot run." >&2
+        echo "JAVA_HOME is set to \"$JAVA_HOME\", but \"\$JAVA_HOME/bin/java\" or \"\$JAVA_HOME/bin/javac\" does not exist." >&2
+        return 1
+      fi
+    fi
+  else
+    JAVACMD="$(
+      'set' +e
+      'unset' -f command 2>/dev/null
+      'command' -v java
+    )" || :
+    JAVACCMD="$(
+      'set' +e
+      'unset' -f command 2>/dev/null
+      'command' -v javac
+    )" || :
+
+    if [ ! -x "${JAVACMD-}" ] || [ ! -x "${JAVACCMD-}" ]; then
+      echo "The java/javac command does not exist in PATH nor is JAVA_HOME set, so mvnw cannot run." >&2
+      return 1
+    fi
+  fi
+}
+
+# hash string like Java String::hashCode
+hash_string() {
+  str="${1:-}" h=0
+  while [ -n "$str" ]; do
+    char="${str%"${str#?}"}"
+    h=$(((h * 31 + $(LC_CTYPE=C printf %d "'$char")) % 4294967296))
+    str="${str#?}"
+  done
+  printf %x\\n $h
+}
+
+verbose() { :; }
+[ "${MVNW_VERBOSE-}" != true ] || verbose() { printf %s\\n "${1-}"; }
+
+die() {
+  printf %s\\n "$1" >&2
+  exit 1
+}
+
+trim() {
+  # MWRAPPER-139:
+  #   Trims trailing and leading whitespace, carriage returns, tabs, and linefeeds.
+  #   Needed for removing poorly interpreted newline sequences when running in more
+  #   exotic environments such as mingw bash on Windows.
+  printf "%s" "${1}" | tr -d '[:space:]'
+}
+
+scriptDir="$(dirname "$0")"
+scriptName="$(basename "$0")"
+
+# parse distributionUrl and optional distributionSha256Sum, requires .mvn/wrapper/maven-wrapper.properties
+while IFS="=" read -r key value; do
+  case "${key-}" in
+  distributionUrl) distributionUrl=$(trim "${value-}") ;;
+  distributionSha256Sum) distributionSha256Sum=$(trim "${value-}") ;;
+  esac
+done <"$scriptDir/.mvn/wrapper/maven-wrapper.properties"
+[ -n "${distributionUrl-}" ] || die "cannot read distributionUrl property in $scriptDir/.mvn/wrapper/maven-wrapper.properties"
+
+case "${distributionUrl##*/}" in
+maven-mvnd-*bin.*)
+  MVN_CMD=mvnd.sh _MVNW_REPO_PATTERN=/maven/mvnd/
+  case "${PROCESSOR_ARCHITECTURE-}${PROCESSOR_ARCHITEW6432-}:$(uname -a)" in
+  *AMD64:CYGWIN* | *AMD64:MINGW*) distributionPlatform=windows-amd64 ;;
+  :Darwin*x86_64) distributionPlatform=darwin-amd64 ;;
+  :Darwin*arm64) distributionPlatform=darwin-aarch64 ;;
+  :Linux*x86_64*) distributionPlatform=linux-amd64 ;;
+  *)
+    echo "Cannot detect native platform for mvnd on $(uname)-$(uname -m), use pure java version" >&2
+    distributionPlatform=linux-amd64
+    ;;
+  esac
+  distributionUrl="${distributionUrl%-bin.*}-$distributionPlatform.zip"
+  ;;
+maven-mvnd-*) MVN_CMD=mvnd.sh _MVNW_REPO_PATTERN=/maven/mvnd/ ;;
+*) MVN_CMD="mvn${scriptName#mvnw}" _MVNW_REPO_PATTERN=/org/apache/maven/ ;;
+esac
+
+# apply MVNW_REPOURL and calculate MAVEN_HOME
+# maven home pattern: ~/.m2/wrapper/dists/{apache-maven-<version>,maven-mvnd-<version>-<platform>}/<hash>
+[ -z "${MVNW_REPOURL-}" ] || distributionUrl="$MVNW_REPOURL$_MVNW_REPO_PATTERN${distributionUrl#*"$_MVNW_REPO_PATTERN"}"
+distributionUrlName="${distributionUrl##*/}"
+distributionUrlNameMain="${distributionUrlName%.*}"
+distributionUrlNameMain="${distributionUrlNameMain%-bin}"
+MAVEN_USER_HOME="${MAVEN_USER_HOME:-${HOME}/.m2}"
+MAVEN_HOME="${MAVEN_USER_HOME}/wrapper/dists/${distributionUrlNameMain-}/$(hash_string "$distributionUrl")"
+
+exec_maven() {
+  unset MVNW_VERBOSE MVNW_USERNAME MVNW_PASSWORD MVNW_REPOURL || :
+  exec "$MAVEN_HOME/bin/$MVN_CMD" "$@" || die "cannot exec $MAVEN_HOME/bin/$MVN_CMD"
+}
+
+if [ -d "$MAVEN_HOME" ]; then
+  verbose "found existing MAVEN_HOME at $MAVEN_HOME"
+  exec_maven "$@"
+fi
+
+case "${distributionUrl-}" in
+*?-bin.zip | *?maven-mvnd-?*-?*.zip) ;;
+*) die "distributionUrl is not valid, must match *-bin.zip or maven-mvnd-*.zip, but found '${distributionUrl-}'" ;;
+esac
+
+# prepare tmp dir
+if TMP_DOWNLOAD_DIR="$(mktemp -d)" && [ -d "$TMP_DOWNLOAD_DIR" ]; then
+  clean() { rm -rf -- "$TMP_DOWNLOAD_DIR"; }
+  trap clean HUP INT TERM EXIT
+else
+  die "cannot create temp dir"
+fi
+
+mkdir -p -- "${MAVEN_HOME%/*}"
+
+# Download and Install Apache Maven
+verbose "Couldn't find MAVEN_HOME, downloading and installing it ..."
+verbose "Downloading from: $distributionUrl"
+verbose "Downloading to: $TMP_DOWNLOAD_DIR/$distributionUrlName"
+
+# select .zip or .tar.gz
+if ! command -v unzip >/dev/null; then
+  distributionUrl="${distributionUrl%.zip}.tar.gz"
+  distributionUrlName="${distributionUrl##*/}"
+fi
+
+# verbose opt
+__MVNW_QUIET_WGET=--quiet __MVNW_QUIET_CURL=--silent __MVNW_QUIET_UNZIP=-q __MVNW_QUIET_TAR=''
+[ "${MVNW_VERBOSE-}" != true ] || __MVNW_QUIET_WGET='' __MVNW_QUIET_CURL='' __MVNW_QUIET_UNZIP='' __MVNW_QUIET_TAR=v
+
+# normalize http auth
+case "${MVNW_PASSWORD:+has-password}" in
+'') MVNW_USERNAME='' MVNW_PASSWORD='' ;;
+has-password) [ -n "${MVNW_USERNAME-}" ] || MVNW_USERNAME='' MVNW_PASSWORD='' ;;
+esac
+
+if [ -z "${MVNW_USERNAME-}" ] && command -v wget >/dev/null; then
+  verbose "Found wget ... using wget"
+  wget ${__MVNW_QUIET_WGET:+"$__MVNW_QUIET_WGET"} "$distributionUrl" -O "$TMP_DOWNLOAD_DIR/$distributionUrlName" || die "wget: Failed to fetch $distributionUrl"
+elif [ -z "${MVNW_USERNAME-}" ] && command -v curl >/dev/null; then
+  verbose "Found curl ... using curl"
+  curl ${__MVNW_QUIET_CURL:+"$__MVNW_QUIET_CURL"} -f -L -o "$TMP_DOWNLOAD_DIR/$distributionUrlName" "$distributionUrl" || die "curl: Failed to fetch $distributionUrl"
+elif set_java_home; then
+  verbose "Falling back to use Java to download"
+  javaSource="$TMP_DOWNLOAD_DIR/Downloader.java"
+  targetZip="$TMP_DOWNLOAD_DIR/$distributionUrlName"
+  cat >"$javaSource" <<-END
+	public class Downloader extends java.net.Authenticator
+	{
+	  protected java.net.PasswordAuthentication getPasswordAuthentication()
+	  {
+	    return new java.net.PasswordAuthentication( System.getenv( "MVNW_USERNAME" ), System.getenv( "MVNW_PASSWORD" ).toCharArray() );
+	  }
+	  public static void main( String[] args ) throws Exception
+	  {
+	    setDefault( new Downloader() );
+	    java.nio.file.Files.copy( java.net.URI.create( args[0] ).toURL().openStream(), java.nio.file.Paths.get( args[1] ).toAbsolutePath().normalize() );
+	  }
+	}
+	END
+  # For Cygwin/MinGW, switch paths to Windows format before running javac and java
+  verbose " - Compiling Downloader.java ..."
+  "$(native_path "$JAVACCMD")" "$(native_path "$javaSource")" || die "Failed to compile Downloader.java"
+  verbose " - Running Downloader.java ..."
+  "$(native_path "$JAVACMD")" -cp "$(native_path "$TMP_DOWNLOAD_DIR")" Downloader "$distributionUrl" "$(native_path "$targetZip")"
+fi
+
+# If specified, validate the SHA-256 sum of the Maven distribution zip file
+if [ -n "${distributionSha256Sum-}" ]; then
+  distributionSha256Result=false
+  if [ "$MVN_CMD" = mvnd.sh ]; then
+    echo "Checksum validation is not supported for maven-mvnd." >&2
+    echo "Please disable validation by removing 'distributionSha256Sum' from your maven-wrapper.properties." >&2
+    exit 1
+  elif command -v sha256sum >/dev/null; then
+    if echo "$distributionSha256Sum  $TMP_DOWNLOAD_DIR/$distributionUrlName" | sha256sum -c - >/dev/null 2>&1; then
+      distributionSha256Result=true
+    fi
+  elif command -v shasum >/dev/null; then
+    if echo "$distributionSha256Sum  $TMP_DOWNLOAD_DIR/$distributionUrlName" | shasum -a 256 -c >/dev/null 2>&1; then
+      distributionSha256Result=true
+    fi
+  else
+    echo "Checksum validation was requested but neither 'sha256sum' or 'shasum' are available." >&2
+    echo "Please install either command, or disable validation by removing 'distributionSha256Sum' from your maven-wrapper.properties." >&2
+    exit 1
+  fi
+  if [ $distributionSha256Result = false ]; then
+    echo "Error: Failed to validate Maven distribution SHA-256, your Maven distribution might be compromised." >&2
+    echo "If you updated your Maven version, you need to update the specified distributionSha256Sum property." >&2
+    exit 1
+  fi
+fi
+
+# unzip and move
+if command -v unzip >/dev/null; then
+  unzip ${__MVNW_QUIET_UNZIP:+"$__MVNW_QUIET_UNZIP"} "$TMP_DOWNLOAD_DIR/$distributionUrlName" -d "$TMP_DOWNLOAD_DIR" || die "failed to unzip"
+else
+  tar xzf${__MVNW_QUIET_TAR:+"$__MVNW_QUIET_TAR"} "$TMP_DOWNLOAD_DIR/$distributionUrlName" -C "$TMP_DOWNLOAD_DIR" || die "failed to untar"
+fi
+
+# Find the actual extracted directory name (handles snapshots where filename != directory name)
+actualDistributionDir=""
+
+# First try the expected directory name (for regular distributions)
+if [ -d "$TMP_DOWNLOAD_DIR/$distributionUrlNameMain" ]; then
+  if [ -f "$TMP_DOWNLOAD_DIR/$distributionUrlNameMain/bin/$MVN_CMD" ]; then
+    actualDistributionDir="$distributionUrlNameMain"
+  fi
+fi
+
+# If not found, search for any directory with the Maven executable (for snapshots)
+if [ -z "$actualDistributionDir" ]; then
+  # enable globbing to iterate over items
+  set +f
+  for dir in "$TMP_DOWNLOAD_DIR"/*; do
+    if [ -d "$dir" ]; then
+      if [ -f "$dir/bin/$MVN_CMD" ]; then
+        actualDistributionDir="$(basename "$dir")"
+        break
+      fi
+    fi
+  done
+  set -f
+fi
+
+if [ -z "$actualDistributionDir" ]; then
+  verbose "Contents of $TMP_DOWNLOAD_DIR:"
+  verbose "$(ls -la "$TMP_DOWNLOAD_DIR")"
+  die "Could not find Maven distribution directory in extracted archive"
+fi
+
+verbose "Found extracted Maven distribution directory: $actualDistributionDir"
+printf %s\\n "$distributionUrl" >"$TMP_DOWNLOAD_DIR/$actualDistributionDir/mvnw.url"
+mv -- "$TMP_DOWNLOAD_DIR/$actualDistributionDir" "$MAVEN_HOME" || [ -d "$MAVEN_HOME" ] || die "fail to move MAVEN_HOME"
+
+clean || :
+exec_maven "$@"

mvnw.cmd

@@ -0,0 +1,189 @@
+<# : batch portion
+@REM ----------------------------------------------------------------------------
+@REM Licensed to the Apache Software Foundation (ASF) under one
+@REM or more contributor license agreements.  See the NOTICE file
+@REM distributed with this work for additional information
+@REM regarding copyright ownership.  The ASF licenses this file
+@REM to you under the Apache License, Version 2.0 (the
+@REM "License"); you may not use this file except in compliance
+@REM with the License.  You may obtain a copy of the License at
+@REM
+@REM    http://www.apache.org/licenses/LICENSE-2.0
+@REM
+@REM Unless required by applicable law or agreed to in writing,
+@REM software distributed under the License is distributed on an
+@REM "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+@REM KIND, either express or implied.  See the License for the
+@REM specific language governing permissions and limitations
+@REM under the License.
+@REM ----------------------------------------------------------------------------
+
+@REM ----------------------------------------------------------------------------
+@REM Apache Maven Wrapper startup batch script, version 3.3.4
+@REM
+@REM Optional ENV vars
+@REM   MVNW_REPOURL - repo url base for downloading maven distribution
+@REM   MVNW_USERNAME/MVNW_PASSWORD - user and password for downloading maven
+@REM   MVNW_VERBOSE - true: enable verbose log; others: silence the output
+@REM ----------------------------------------------------------------------------
+
+@IF "%__MVNW_ARG0_NAME__%"=="" (SET __MVNW_ARG0_NAME__=%~nx0)
+@SET __MVNW_CMD__=
+@SET __MVNW_ERROR__=
+@SET __MVNW_PSMODULEP_SAVE=%PSModulePath%
+@SET PSModulePath=
+@FOR /F "usebackq tokens=1* delims==" %%A IN (`powershell -noprofile "& {$scriptDir='%~dp0'; $script='%__MVNW_ARG0_NAME__%'; icm -ScriptBlock ([Scriptblock]::Create((Get-Content -Raw '%~f0'))) -NoNewScope}"`) DO @(
+  IF "%%A"=="MVN_CMD" (set __MVNW_CMD__=%%B) ELSE IF "%%B"=="" (echo %%A) ELSE (echo %%A=%%B)
+)
+@SET PSModulePath=%__MVNW_PSMODULEP_SAVE%
+@SET __MVNW_PSMODULEP_SAVE=
+@SET __MVNW_ARG0_NAME__=
+@SET MVNW_USERNAME=
+@SET MVNW_PASSWORD=
+@IF NOT "%__MVNW_CMD__%"=="" ("%__MVNW_CMD__%" %*)
+@echo Cannot start maven from wrapper >&2 && exit /b 1
+@GOTO :EOF
+: end batch / begin powershell #>
+
+$ErrorActionPreference = "Stop"
+if ($env:MVNW_VERBOSE -eq "true") {
+  $VerbosePreference = "Continue"
+}
+
+# calculate distributionUrl, requires .mvn/wrapper/maven-wrapper.properties
+$distributionUrl = (Get-Content -Raw "$scriptDir/.mvn/wrapper/maven-wrapper.properties" | ConvertFrom-StringData).distributionUrl
+if (!$distributionUrl) {
+  Write-Error "cannot read distributionUrl property in $scriptDir/.mvn/wrapper/maven-wrapper.properties"
+}
+
+switch -wildcard -casesensitive ( $($distributionUrl -replace '^.*/','') ) {
+  "maven-mvnd-*" {
+    $USE_MVND = $true
+    $distributionUrl = $distributionUrl -replace '-bin\.[^.]*$',"-windows-amd64.zip"
+    $MVN_CMD = "mvnd.cmd"
+    break
+  }
+  default {
+    $USE_MVND = $false
+    $MVN_CMD = $script -replace '^mvnw','mvn'
+    break
+  }
+}
+
+# apply MVNW_REPOURL and calculate MAVEN_HOME
+# maven home pattern: ~/.m2/wrapper/dists/{apache-maven-<version>,maven-mvnd-<version>-<platform>}/<hash>
+if ($env:MVNW_REPOURL) {
+  $MVNW_REPO_PATTERN = if ($USE_MVND -eq $False) { "/org/apache/maven/" } else { "/maven/mvnd/" }
+  $distributionUrl = "$env:MVNW_REPOURL$MVNW_REPO_PATTERN$($distributionUrl -replace "^.*$MVNW_REPO_PATTERN",'')"
+}
+$distributionUrlName = $distributionUrl -replace '^.*/',''
+$distributionUrlNameMain = $distributionUrlName -replace '\.[^.]*$','' -replace '-bin$',''
+
+$MAVEN_M2_PATH = "$HOME/.m2"
+if ($env:MAVEN_USER_HOME) {
+  $MAVEN_M2_PATH = "$env:MAVEN_USER_HOME"
+}
+
+if (-not (Test-Path -Path $MAVEN_M2_PATH)) {
+    New-Item -Path $MAVEN_M2_PATH -ItemType Directory | Out-Null
+}
+
+$MAVEN_WRAPPER_DISTS = $null
+if ((Get-Item $MAVEN_M2_PATH).Target[0] -eq $null) {
+  $MAVEN_WRAPPER_DISTS = "$MAVEN_M2_PATH/wrapper/dists"
+} else {
+  $MAVEN_WRAPPER_DISTS = (Get-Item $MAVEN_M2_PATH).Target[0] + "/wrapper/dists"
+}
+
+$MAVEN_HOME_PARENT = "$MAVEN_WRAPPER_DISTS/$distributionUrlNameMain"
+$MAVEN_HOME_NAME = ([System.Security.Cryptography.SHA256]::Create().ComputeHash([byte[]][char[]]$distributionUrl) | ForEach-Object {$_.ToString("x2")}) -join ''
+$MAVEN_HOME = "$MAVEN_HOME_PARENT/$MAVEN_HOME_NAME"
+
+if (Test-Path -Path "$MAVEN_HOME" -PathType Container) {
+  Write-Verbose "found existing MAVEN_HOME at $MAVEN_HOME"
+  Write-Output "MVN_CMD=$MAVEN_HOME/bin/$MVN_CMD"
+  exit $?
+}
+
+if (! $distributionUrlNameMain -or ($distributionUrlName -eq $distributionUrlNameMain)) {
+  Write-Error "distributionUrl is not valid, must end with *-bin.zip, but found $distributionUrl"
+}
+
+# prepare tmp dir
+$TMP_DOWNLOAD_DIR_HOLDER = New-TemporaryFile
+$TMP_DOWNLOAD_DIR = New-Item -Itemtype Directory -Path "$TMP_DOWNLOAD_DIR_HOLDER.dir"
+$TMP_DOWNLOAD_DIR_HOLDER.Delete() | Out-Null
+trap {
+  if ($TMP_DOWNLOAD_DIR.Exists) {
+    try { Remove-Item $TMP_DOWNLOAD_DIR -Recurse -Force | Out-Null }
+    catch { Write-Warning "Cannot remove $TMP_DOWNLOAD_DIR" }
+  }
+}
+
+New-Item -Itemtype Directory -Path "$MAVEN_HOME_PARENT" -Force | Out-Null
+
+# Download and Install Apache Maven
+Write-Verbose "Couldn't find MAVEN_HOME, downloading and installing it ..."
+Write-Verbose "Downloading from: $distributionUrl"
+Write-Verbose "Downloading to: $TMP_DOWNLOAD_DIR/$distributionUrlName"
+
+$webclient = New-Object System.Net.WebClient
+if ($env:MVNW_USERNAME -and $env:MVNW_PASSWORD) {
+  $webclient.Credentials = New-Object System.Net.NetworkCredential($env:MVNW_USERNAME, $env:MVNW_PASSWORD)
+}
+[Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Tls12
+$webclient.DownloadFile($distributionUrl, "$TMP_DOWNLOAD_DIR/$distributionUrlName") | Out-Null
+
+# If specified, validate the SHA-256 sum of the Maven distribution zip file
+$distributionSha256Sum = (Get-Content -Raw "$scriptDir/.mvn/wrapper/maven-wrapper.properties" | ConvertFrom-StringData).distributionSha256Sum
+if ($distributionSha256Sum) {
+  if ($USE_MVND) {
+    Write-Error "Checksum validation is not supported for maven-mvnd. `nPlease disable validation by removing 'distributionSha256Sum' from your maven-wrapper.properties."
+  }
+  Import-Module $PSHOME\Modules\Microsoft.PowerShell.Utility -Function Get-FileHash
+  if ((Get-FileHash "$TMP_DOWNLOAD_DIR/$distributionUrlName" -Algorithm SHA256).Hash.ToLower() -ne $distributionSha256Sum) {
+    Write-Error "Error: Failed to validate Maven distribution SHA-256, your Maven distribution might be compromised. If you updated your Maven version, you need to update the specified distributionSha256Sum property."
+  }
+}
+
+# unzip and move
+Expand-Archive "$TMP_DOWNLOAD_DIR/$distributionUrlName" -DestinationPath "$TMP_DOWNLOAD_DIR" | Out-Null
+
+# Find the actual extracted directory name (handles snapshots where filename != directory name)
+$actualDistributionDir = ""
+
+# First try the expected directory name (for regular distributions)
+$expectedPath = Join-Path "$TMP_DOWNLOAD_DIR" "$distributionUrlNameMain"
+$expectedMvnPath = Join-Path "$expectedPath" "bin/$MVN_CMD"
+if ((Test-Path -Path $expectedPath -PathType Container) -and (Test-Path -Path $expectedMvnPath -PathType Leaf)) {
+  $actualDistributionDir = $distributionUrlNameMain
+}
+
+# If not found, search for any directory with the Maven executable (for snapshots)
+if (!$actualDistributionDir) {
+  Get-ChildItem -Path "$TMP_DOWNLOAD_DIR" -Directory | ForEach-Object {
+    $testPath = Join-Path $_.FullName "bin/$MVN_CMD"
+    if (Test-Path -Path $testPath -PathType Leaf) {
+      $actualDistributionDir = $_.Name
+    }
+  }
+}
+
+if (!$actualDistributionDir) {
+  Write-Error "Could not find Maven distribution directory in extracted archive"
+}
+
+Write-Verbose "Found extracted Maven distribution directory: $actualDistributionDir"
+Rename-Item -Path "$TMP_DOWNLOAD_DIR/$actualDistributionDir" -NewName $MAVEN_HOME_NAME | Out-Null
+try {
+  Move-Item -Path "$TMP_DOWNLOAD_DIR/$MAVEN_HOME_NAME" -Destination $MAVEN_HOME_PARENT | Out-Null
+} catch {
+  if (! (Test-Path -Path "$MAVEN_HOME" -PathType Container)) {
+    Write-Error "fail to move MAVEN_HOME"
+  }
+} finally {
+  try { Remove-Item $TMP_DOWNLOAD_DIR -Recurse -Force | Out-Null }
+  catch { Write-Warning "Cannot remove $TMP_DOWNLOAD_DIR" }
+}
+
+Write-Output "MVN_CMD=$MAVEN_HOME/bin/$MVN_CMD"

pom.xml

@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+            xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+    <parent>
+        <groupId>org.springframework.boot</groupId>
+        <artifactId>spring-boot-starter-parent</artifactId>
+        <version>4.0.6</version>
+        <relativePath/> <!-- lookup parent from repository -->
+    </parent>
+    <groupId>com.</groupId>
+    <artifactId>attendenceSystem</artifactId>
+    <version>0.0.1-SNAPSHOT</version>
+    <name/>
+    <description/>
+    <url/>
+    <licenses>
+        <license/>
+    </licenses>
+    <developers>
+        <developer/>
+    </developers>
+    <scm>
+        <connection/>
+        <developerConnection/>
+        <tag/>
+        <url/>
+    </scm>
+    <properties>
+        <java.version>21</java.version>
+    </properties>
+    <dependencies>
+        <!-- <dependency>
+                <groupId>org.springframework.boot</groupId>
+                <artifactId>spring-boot-starter-data-jpa</artifactId>
+        </dependency> -->
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-restclient</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.apache.tomcat.embed</groupId>
+            <artifactId>tomcat-embed-jasper</artifactId>
+        </dependency>
+
+        <dependency>
+            <groupId>jakarta.servlet.jsp.jstl</groupId>
+            <artifactId>jakarta.servlet.jsp.jstl-api</artifactId>
+        </dependency>
+
+        <dependency>
+            <groupId>org.glassfish.web</groupId>
+            <artifactId>jakarta.servlet.jsp.jstl</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-webmvc</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-devtools</artifactId>
+            <scope>runtime</scope>
+            <optional>true</optional>
+        </dependency>
+        <!-- <dependency>
+                <groupId>com.mysql</groupId>
+                <artifactId>mysql-connector-j</artifactId>
+                <scope>runtime</scope>
+        </dependency> -->
+        <!-- <dependency>
+                <groupId>org.springframework.boot</groupId>
+                <artifactId>spring-boot-starter-data-jpa-test</artifactId>
+                <scope>test</scope>
+        </dependency> -->
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-restclient-test</artifactId>
+            <scope>test</scope>
+        </dependency>
+        
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-webmvc-test</artifactId>
+            <scope>test</scope>
+        </dependency>
+    </dependencies>
+
+    <build>
+        <plugins>
+            <plugin>
+                <groupId>org.springframework.boot</groupId>
+                <artifactId>spring-boot-maven-plugin</artifactId>
+            </plugin>
+        </plugins>
+    </build>
+
+</project>

src/main/java/com/attendenceSystem/AttendenceSystemApplication.java

@@ -0,0 +1,13 @@
+package com.attendenceSystem;
+
+import org.springframework.boot.SpringApplication;
+import org.springframework.boot.autoconfigure.SpringBootApplication;
+
+@SpringBootApplication
+public class AttendenceSystemApplication {
+
+	public static void main(String[] args) {
+		SpringApplication.run(AttendenceSystemApplication.class, args);
+	}
+
+}

src/main/java/com/attendenceSystem/controllers/PageController.java

@@ -0,0 +1,38 @@
+package com.attendenceSystem.controllers;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.ResponseBody;
+
+@Controller
+@RequestMapping("/")
+public class PageController {
+
+    @GetMapping("home")
+    public String home() {
+        return "home";
+    }
+    @GetMapping("login")
+    public String login() {
+        return "auths/login";
+    }
+    @GetMapping("register")
+    public String register() {
+        return "auths/register";
+    }
+    @GetMapping("attendance")
+    public String homeAttendance() {
+        return "attendances/homeAttendance";
+    }
+    @GetMapping("dashboard")
+    public String dashboard() {
+        return "dashboard/employees/dashboard";
+    }
+
+    @GetMapping("test")
+    @ResponseBody
+    public String test() {
+        return "OK";
+    }
+}

src/main/resources/application.properties

@@ -0,0 +1,12 @@
+spring.application.name=attendenceSystem
+
+
+# JSP Configuration
+spring.mvc.view.prefix=/WEB-INF/views/
+spring.mvc.view.suffix=.jsp
+# Thymeleaf Configuration
+# spring.thymeleaf.prefix=classpath:/templates/
+# spring.thymeleaf.suffix=.html
+# spring.thymeleaf.cache=false
+# spring.thymeleaf.encoding=UTF-8
+# spring.thymeleaf.mode=HTML

src/main/resources/static/css/attendance.css

@@ -0,0 +1,472 @@
+/* ===================================
+    RESET
+=================================== */
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: "Segoe UI", sans-serif;
+    background: #050b17;
+    color: white;
+    min-height: 100vh;
+}
+
+/* ===================================
+    HEADER
+=================================== */
+
+.header {
+    height: 80px;
+    background: #151d2f;
+    border-bottom: 1px solid #23365b;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    padding: 0 40px;
+}
+
+.header-left {
+    display: flex;
+    
+    gap: 20px;
+}
+
+.header-logo a {
+    text-decoration: none;
+    color: #3b82f6;
+    font-size: 2rem;
+    font-weight: 700;
+}
+
+.header-left h1 {
+    font-size: 1.2rem;
+    color: #d8e3f8;
+}
+
+.header-time {
+    color: #8fa3c7;
+}
+
+.header-right {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.header-clock {
+    min-width: 140px;
+    height: 70px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    background: #19253d;
+    border: 1px solid #29426f;
+    border-radius: 16px;
+
+    color: #ffffff;
+    font-size: 1.8rem;
+    font-weight: 700;
+
+    box-shadow:
+        0 0 15px rgba(59,130,246,.15);
+}
+
+.header-btn {
+    width: 80px;
+    height: 40px;
+
+    border: none;
+    border-radius: 16px;
+
+    cursor: pointer;
+
+    background: #19253d;
+    color: white;
+
+    font-size: 1.4rem;
+
+    transition: all .3s;
+}
+
+.header-btn:hover {
+    transform: translateY(-2px);
+}
+
+.theme-toggle:hover {
+    background: #243b63;
+}
+
+.login-btn {
+    background: #3b82f6;
+}
+
+.login-btn:hover {
+    background: #2563eb;
+}
+
+.header-login,
+.header-changeLight {
+    border: none;
+    background: #1c2841;
+    color: white;
+
+    padding: 12px 20px;
+    border-radius: 12px;
+    cursor: pointer;
+
+    transition: 0.3s;
+}
+
+.header-login:hover,
+.header-changeLight:hover {
+    background: #3b82f6;
+}
+
+/* ===================================
+    MAIN LAYOUT
+=================================== */
+
+.container {
+    padding: 30px;
+
+    display: grid;
+    grid-template-columns: 320px 1fr 320px;
+    gap: 25px;
+}
+
+/* ===================================
+    CARD CHUNG
+=================================== */
+
+.container-attend-left,
+.container-attend-right,
+.face-guide {
+    background: #151d2f;
+    border: 1px solid #23365b;
+    border-radius: 20px;
+}
+
+/* ===================================
+    HISTORY
+=================================== */
+
+.container-attend-left {
+    padding: 25px;
+}
+
+.history-title {
+    color: #3b82f6;
+    margin-bottom: 20px;
+    font-size: 1.5rem;
+}
+
+.history-list {
+    list-style: none;
+
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+.history-item {
+    background: #1a2741;
+
+    padding: 15px;
+    border-radius: 14px;
+
+    border: 1px solid #263a61;
+
+    line-height: 1.6;
+}
+
+/* ===================================
+    CAMERA
+=================================== */
+
+.container-attend-main {
+    display: flex;
+    flex-direction: column;
+    gap: 25px;
+}
+
+.face-scanner {
+    position: relative;
+
+    height: 560px;
+
+    background: #111b2f;
+
+    border-radius: 24px;
+    border: 2px solid #3b82f6;
+
+    overflow: hidden;
+
+    box-shadow:
+        0 0 20px rgba(59,130,246,.3),
+        inset 0 0 50px rgba(59,130,246,.05);
+}
+
+/* camera */
+
+#camera {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* khung nhận diện */
+
+.scan-overlay {
+    position: absolute;
+
+    width: 340px;
+    height: 420px;
+
+    border: 5px solid #3b82f6;
+    border-radius: 25px;
+
+    top: 50%;
+    left: 50%;
+
+    transform: translate(-50%, -50%);
+
+    box-shadow:
+        0 0 20px #3b82f6,
+        inset 0 0 15px rgba(59,130,246,.5);
+}
+
+/* hiệu ứng tia scan */
+
+.scan-overlay::after {
+    content: "";
+
+    position: absolute;
+
+    left: -50px;
+    right: -50px;
+
+    top: 50%;
+
+    height: 4px;
+
+    background: rgba(59,130,246,.8);
+
+    box-shadow: 0 0 20px #3b82f6;
+
+    animation: scan 3s infinite linear;
+}
+
+@keyframes scan {
+    0% {
+        top: 10%;
+    }
+
+    50% {
+        top: 90%;
+    }
+
+    100% {
+        top: 10%;
+    }
+}
+
+/* kết quả */
+
+.result-card {
+    position: absolute;
+
+    bottom: 20px;
+    left: 50%;
+
+    transform: translateX(-50%);
+
+    background: rgba(30,64,175,.8);
+
+    padding: 14px 28px;
+
+    border-radius: 30px;
+
+    font-size: 1rem;
+}
+
+/* ===================================
+    GUIDE
+=================================== */
+
+.face-guide {
+    padding: 25px;
+}
+
+.face-guide p {
+    color: #3b82f6;
+    font-size: 1.2rem;
+    margin-bottom: 15px;
+    font-weight: 600;
+}
+
+.face-guide ol {
+    padding-left: 20px;
+}
+
+.face-guide li {
+    margin-bottom: 12px;
+    color: #d7dff0;
+}
+
+/* ===================================
+    STATISTICS
+=================================== */
+
+.container-attend-right {
+    background: #151d2f;
+    border: 1px solid #23365b;
+    border-radius: 20px;
+
+    padding: 25px;
+
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+}
+
+.attendance-title {
+    color: #3b82f6;
+    font-size: 1.5rem;
+    font-weight: 600;
+
+    margin-bottom: 10px;
+}
+
+/* Card chung */
+
+.stat-card {
+    padding: 20px;
+    border-radius: 16px;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    transition: .3s;
+}
+
+.stat-card:hover {
+    transform: translateY(-2px);
+}
+
+/* Text trong card */
+
+.stat-card p {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 500;
+}
+
+/* Số liệu */
+
+.stat-number {
+    font-size: 2rem;
+    font-weight: 700;
+}
+
+/* Đã chấm công */
+
+.success-card {
+    background: rgba(0, 255, 170, 0.12);
+    border: 1px solid rgba(0, 255, 170, 0.3);
+}
+
+.success-card .attendance-present,
+.success-card .stat-number {
+    color: #00e29b;
+}
+
+/* Đi muộn */
+
+.warning-card {
+    background: rgba(255, 166, 0, 0.12);
+    border: 1px solid rgba(255, 166, 0, 0.3);
+}
+
+.warning-card .attendance-late,
+.warning-card .stat-number {
+    color: #ffb347;
+}
+
+/* Chưa chấm công */
+
+.danger-card {
+    background: rgba(255, 70, 70, 0.12);
+    border: 1px solid rgba(255, 70, 70, 0.3);
+}
+
+.danger-card .attendance-absent,
+.danger-card .stat-number {
+    color: #ff6161;
+}
+
+/* Khối thông tin */
+
+.attendance-info {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    margin-top: 5px;
+}
+
+/* Tổng nhân viên */
+
+.attendance-sum {
+    padding: 16px;
+    border-radius: 14px;
+
+    background: rgba(59, 130, 246, 0.12);
+    border: 1px solid rgba(59, 130, 246, 0.3);
+
+    color: #dbeafe;
+}
+
+/* Giờ làm việc */
+
+.attendance-date {
+    padding: 16px;
+    border-radius: 14px;
+
+    background: rgba(255, 166, 0, 0.12);
+    border: 1px solid rgba(255, 166, 0, 0.3);
+
+    color: #ffb347;
+}
+
+/* Xóa margin mặc định */
+
+.attendance-present,
+.attendance-late,
+.attendance-absent,
+.attendance-sum,
+.attendance-date {
+    margin: 0;
+}
+/* ===================================
+    RESPONSIVE
+=================================== */
+
+@media (max-width: 1200px) {
+
+    .container {
+        grid-template-columns: 1fr;
+    }
+
+    .face-scanner {
+        height: 450px;
+    }
+}

src/main/resources/static/css/auth.css

@@ -0,0 +1,281 @@
+/* ==========================================
+   LOGIN PAGE
+========================================== */
+
+.login-section {
+    min-height: 100vh;
+    padding-top: 30px;
+    /* display: flex; */
+    align-items: center;
+    padding-bottom: 30px;
+    background:
+        radial-gradient(circle at top left,
+            rgba(37,99,235,.18),
+            transparent 30%),
+
+        radial-gradient(circle at bottom right,
+            rgba(239,68,68,.12),
+            transparent 40%),
+
+        #070b16;
+}
+
+/* ==========================================
+   LEFT SIDE
+========================================== */
+
+.welcome-panel {
+    color: white;
+    padding-right: 60px;
+}
+
+.logo-circle {
+    width: 80px;
+    height: 80px;
+
+    border-radius: 24px;
+
+    background: rgba(37,99,235,.15);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    margin-bottom: 30px;
+}
+
+.logo-circle i {
+    color: #3b82f6;
+    font-size: 42px;
+}
+
+.left-title {
+    color: white;
+
+    font-size: 3.8rem;
+    font-weight: 700;
+
+    margin-bottom: 25px;
+
+    line-height: 1.1;
+}
+
+.left-description {
+    color: #94a3b8;
+
+    font-size: 1.1rem;
+
+    line-height: 1.8;
+}
+
+/* ==========================================
+   LOGIN CARD
+========================================== */
+
+
+.card-header{
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    margin-bottom: 20px;
+}
+
+.login-card {
+    background: #111827;
+
+    border: 1px solid rgba(59,130,246,.2);
+
+    border-radius: 24px;
+
+    padding: 20px;
+    
+    max-width: 480px;
+
+    box-shadow:
+        0 20px 60px rgba(0,0,0,.35),
+        0 0 0 1px rgba(59,130,246,.05);
+}
+
+.card-icon {
+    width: 70px;
+    height: 70px;
+
+    border-radius: 18px;
+
+    background: rgba(16,185,129,.15);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    margin-bottom: 20px;
+}
+
+.card-icon i {
+    color: #10b981;
+    font-size: 32px;
+}
+
+.login-card h2 {
+    color: white;
+
+    font-size: 2rem;
+    font-weight: 700;
+
+    margin-bottom: 25px;
+}
+
+/* ==========================================
+   FORM
+========================================== */
+
+.form-group {
+    margin-bottom: 18px;
+}
+
+.form-group label {
+    display: block;
+
+    color: #cbd5e1;
+
+    font-weight: 500;
+
+    margin-bottom: 8px;
+}
+
+.form-control {
+    width: 100%;
+
+    height: 54px;
+
+    background: #0f172a;
+
+    border: 1px solid #334155;
+
+    border-radius: 14px;
+
+    color: white;
+}
+
+.form-control:focus {
+    background: #0f172a;
+
+    color: white;
+
+    border-color: #3b82f6;
+
+    box-shadow: 0 0 0 4px rgba(59,130,246,.15);
+}
+
+.form-check-label {
+    color: #94a3b8;
+}
+
+/* ==========================================
+   BUTTONS
+========================================== */
+
+.btn-danger {
+    width: 100%;
+
+    height: 50px;
+
+    border: none;
+
+    border-radius: 14px;
+
+    background: #051863;
+
+    color: white;
+
+    font-weight: 600;
+}
+
+.btn-danger:hover {
+    background: #dc2626;
+}
+
+.btn-primary {
+    width: 100%;
+
+    height: 54px;
+
+    border: none;
+
+    border-radius: 14px;
+
+    background: #2563eb;
+
+    color: white;
+
+    font-weight: 600;
+
+    margin-top: 10px;
+}
+
+.btn-primary:hover {
+    background: #1d4ed8;
+}
+
+/* ==========================================
+   LINKS
+========================================== */
+
+.btn-link,
+.text-end a {
+    
+    color: #60a5fa;
+    text-decoration: none;
+}
+
+.btn-link:hover,
+.text-end a:hover {
+    color: white;
+}
+
+.text-end {
+    display:flex;
+    justify-content:space-around;
+    margin-top: 10px;
+}
+
+/* ==========================================
+   ALERT
+========================================== */
+
+.alert-danger {
+    background: rgba(239,68,68,.15);
+
+    border: 1px solid rgba(239,68,68,.3);
+
+    color: #fecaca;
+
+    border-radius: 12px;
+}
+
+/* ==========================================
+   MOBILE
+========================================== */
+
+@media (max-width: 991px) {
+
+    .welcome-panel {
+        text-align: center;
+
+        padding-right: 0;
+
+        margin-bottom: 50px;
+    }
+
+    .logo-circle {
+        margin: 0 auto 25px;
+    }
+
+    .left-title {
+        font-size: 2.5rem;
+    }
+
+    .login-card {
+        max-width: 100%;
+    }
+}

src/main/resources/static/css/components.css

@@ -0,0 +1,536 @@
+/* ===========================
+   COMPONENTS CSS
+   Buttons, Cards, Forms, Tables, Badges
+   =========================== */
+
+/* ===========================
+   BUTTONS
+   =========================== */
+
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    font-weight: 500;
+    border-radius: var(--radius);
+    border: none;
+    cursor: pointer;
+    transition: all var(--transition-duration);
+    text-decoration: none;
+}
+
+.btn-primary {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+}
+
+.btn-primary:hover {
+    opacity: 0.9;
+}
+
+.btn-secondary {
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+}
+
+.btn-secondary:hover {
+    opacity: 0.8;
+}
+
+.btn-success {
+    background-color: var(--success);
+    color: white;
+}
+
+.btn-success:hover {
+    opacity: 0.9;
+}
+
+.btn-warning {
+    background-color: var(--warning);
+    color: white;
+}
+
+.btn-warning:hover {
+    opacity: 0.9;
+}
+
+.btn-destructive {
+    background-color: var(--destructive);
+    color: white;
+}
+
+.btn-destructive:hover {
+    opacity: 0.9;
+}
+
+.btn-outline {
+    background-color: transparent;
+    border: 1px solid var(--border);
+    color: var(--foreground);
+}
+
+.btn-outline:hover {
+    background-color: var(--secondary);
+}
+
+.btn-icon {
+    padding: 0.5rem;
+    width: 2.5rem;
+    height: 2.5rem;
+}
+
+.btn-sm {
+    padding: 0.25rem 0.75rem;
+    font-size: 0.875rem;
+}
+
+.btn-lg {
+    padding: 0.75rem 1.5rem;
+    font-size: 1.125rem;
+}
+
+/* ===========================
+   CARDS
+   =========================== */
+
+.card {
+    background-color: var(--card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1.5rem;
+    transition: all var(--transition-duration);
+}
+
+.card:hover {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+    margin-bottom: 1rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--border);
+}
+
+.card-title {
+    font-size: 1.25rem;
+    font-weight: 700;
+    margin: 0;
+}
+
+.card-description {
+    color: var(--muted-foreground);
+    font-size: 0.875rem;
+    margin-top: 0.25rem;
+}
+
+.card-body {
+    padding: 0;
+}
+
+.card-footer {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--border);
+}
+
+.stat-card {
+    background-color: var(--card);
+    border: 1px solid var(--border);
+    border-radius: calc(var(--radius) * 2);
+    padding: 1rem;
+    transition: all var(--transition-duration);
+}
+
+.stat-card-success {
+    border-color: rgba(16, 185, 129, 0.3);
+}
+
+.stat-card-warning {
+    border-color: rgba(245, 158, 11, 0.3);
+}
+
+.stat-card-destructive {
+    border-color: rgba(239, 68, 68, 0.3);
+}
+
+/* ===========================
+   FORMS
+   =========================== */
+
+.form-group {
+    margin-bottom: 1rem;
+}
+
+.form-label {
+    display: block;
+    font-weight: 500;
+    margin-bottom: 0.5rem;
+    font-size: 0.875rem;
+}
+
+.form-control {
+    width: 100%;
+    padding: 0.5rem 1rem;
+    background-color: var(--input-background);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    color: var(--foreground);
+    font-size: 1rem;
+    transition: all var(--transition-duration);
+}
+
+.form-control:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+}
+
+.form-control:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+textarea.form-control {
+    min-height: 100px;
+    resize: vertical;
+}
+
+select.form-control {
+    cursor: pointer;
+}
+
+.form-text {
+    display: block;
+    margin-top: 0.25rem;
+    font-size: 0.875rem;
+    color: var(--muted-foreground);
+}
+
+.form-error {
+    display: block;
+    margin-top: 0.25rem;
+    font-size: 0.875rem;
+    color: var(--destructive);
+}
+
+/* Checkbox & Radio */
+.form-check {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.form-check-input {
+    width: 1.25rem;
+    height: 1.25rem;
+    cursor: pointer;
+}
+
+/* ===========================
+   TABLES
+   =========================== */
+
+.table-container {
+    background-color: var(--card);
+    border: 1px solid var(--border);
+    border-radius: calc(var(--radius) * 2);
+    overflow: hidden;
+}
+
+.table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.table thead {
+    background-color: rgba(0, 0, 0, 0.03);
+}
+
+[data-theme="dark"] .table thead {
+    background-color: rgba(255, 255, 255, 0.05);
+}
+
+.table th {
+    padding: 1rem 1.5rem;
+    text-align: left;
+    font-weight: 600;
+    font-size: 0.875rem;
+    border-bottom: 1px solid var(--border);
+}
+
+.table th.text-center,
+.table td.text-center {
+    text-align: center;
+}
+
+.table td {
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid var(--border);
+}
+
+.table tbody tr:last-child td {
+    border-bottom: none;
+}
+
+.table tbody tr:hover {
+    background-color: rgba(0, 0, 0, 0.02);
+}
+
+[data-theme="dark"] .table tbody tr:hover {
+    background-color: rgba(255, 255, 255, 0.05);
+}
+
+/* ===========================
+   BADGES
+   =========================== */
+
+.badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.25rem 0.75rem;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 600;
+}
+
+.badge-success {
+    background-color: rgba(16, 185, 129, 0.2);
+    color: var(--success);
+}
+
+.badge-warning {
+    background-color: rgba(245, 158, 11, 0.2);
+    color: var(--warning);
+}
+
+.badge-destructive {
+    background-color: rgba(239, 68, 68, 0.2);
+    color: var(--destructive);
+}
+
+.badge-primary {
+    background-color: rgba(59, 130, 246, 0.2);
+    color: var(--primary);
+}
+
+.badge-secondary {
+    background-color: var(--muted);
+    color: var(--muted-foreground);
+}
+
+/* ===========================
+   ALERTS
+   =========================== */
+
+.alert {
+    padding: 1rem;
+    border-radius: var(--radius);
+    margin-bottom: 1rem;
+}
+
+.alert-success {
+    background-color: rgba(16, 185, 129, 0.1);
+    border: 1px solid rgba(16, 185, 129, 0.3);
+    color: var(--success);
+}
+
+.alert-warning {
+    background-color: rgba(245, 158, 11, 0.1);
+    border: 1px solid rgba(245, 158, 11, 0.3);
+    color: var(--warning);
+}
+
+.alert-destructive {
+    background-color: rgba(239, 68, 68, 0.1);
+    border: 1px solid rgba(239, 68, 68, 0.3);
+    color: var(--destructive);
+}
+
+.alert-info {
+    background-color: rgba(59, 130, 246, 0.1);
+    border: 1px solid rgba(59, 130, 246, 0.3);
+    color: var(--primary);
+}
+
+/* ===========================
+   MODALS
+   =========================== */
+
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    padding: 1rem;
+}
+
+.modal {
+    background-color: var(--card);
+    border: 1px solid var(--border);
+    border-radius: calc(var(--radius) * 2);
+    padding: 1.5rem;
+    max-width: 600px;
+    width: 100%;
+    max-height: 90vh;
+    overflow-y: auto;
+}
+
+.modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--border);
+}
+
+.modal-title {
+    font-size: 1.25rem;
+    font-weight: 700;
+    margin: 0;
+}
+
+.modal-close {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0.25rem;
+    color: var(--muted-foreground);
+}
+
+.modal-close:hover {
+    color: var(--foreground);
+}
+
+.modal-body {
+    margin-bottom: 1rem;
+}
+
+.modal-footer {
+    display: flex;
+    gap: 0.75rem;
+    justify-content: flex-end;
+    padding-top: 1rem;
+    border-top: 1px solid var(--border);
+}
+
+/* ===========================
+   HEADER & NAVIGATION
+   =========================== */
+
+.header {
+    background-color: var(--card);
+    border-bottom: 1px solid var(--border);
+    padding: 1rem;
+}
+
+.nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    max-width: 1280px;
+    margin: 0 auto;
+}
+
+.nav-brand {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    font-size: 1.5rem;
+    font-weight: 700;
+    text-decoration: none;
+    color: var(--foreground);
+}
+
+.nav-menu {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    list-style: none;
+}
+
+.nav-link {
+    text-decoration: none;
+    color: var(--foreground);
+    padding: 0.5rem 1rem;
+    border-radius: var(--radius);
+    transition: all var(--transition-duration);
+}
+
+.nav-link:hover {
+    background-color: var(--secondary);
+}
+
+/* ===========================
+   PROGRESS BARS
+   =========================== */
+
+.progress {
+    width: 100%;
+    height: 0.5rem;
+    background-color: var(--secondary);
+    border-radius: 9999px;
+    overflow: hidden;
+}
+
+.progress-bar {
+    height: 100%;
+    background: linear-gradient(to right, var(--success), var(--primary));
+    border-radius: 9999px;
+    transition: width var(--transition-duration);
+}
+
+/* ===========================
+   LOADING SPINNER
+   =========================== */
+
+.spinner {
+    display: inline-block;
+    width: 1.5rem;
+    height: 1.5rem;
+    border: 2px solid var(--border);
+    border-top-color: var(--primary);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* ===========================
+   ANIMATIONS
+   =========================== */
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.animate-fade-in {
+    animation: fadeIn 0.3s ease-in-out;
+}
+
+.animate-slide-up {
+    animation: slideUp 0.3s ease-in-out;
+}

src/main/resources/static/css/layout.css

@@ -0,0 +1,316 @@
+/* =====================================
+   HEADER
+===================================== */
+
+.app-header {
+    background: #0f172a;
+
+    border-bottom: 1px solid rgba(59,130,246,.15);
+
+    position: sticky;
+    top: 0;
+
+    z-index: 999;
+}
+
+/* =====================================
+   LAYOUT
+===================================== */
+
+.header-content {
+    height: 75px;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.header-left {
+    display: flex;
+    align-items: center;
+    gap: 18px;
+}
+
+.header-right {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+/* =====================================
+   LOGO
+===================================== */
+
+.logo-box {
+    width: 60px;
+    height: 60px;
+
+    border-radius: 18px;
+
+    background: rgba(37,99,235,.15);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    text-decoration: none;
+}
+
+.logo-box i {
+    font-size: 28px;
+    color: #3b82f6;
+}
+
+/* =====================================
+   TITLE
+===================================== */
+
+.header-title {
+    color: white;
+
+    font-size: 1.5rem;
+    font-weight: 700;
+
+    margin: 0;
+}
+
+.header-subtitle {
+    color: #94a3b8;
+
+    font-size: .9rem;
+}
+
+/* =====================================
+   THEME BUTTON
+===================================== */
+
+.theme-btn {
+    width: 46px;
+    height: 46px;
+
+    border: none;
+
+    border-radius: 14px;
+
+    background: #1e293b;
+
+    color: #cbd5e1;
+
+    transition: .3s;
+}
+
+.theme-btn:hover {
+    background: #2563eb;
+    color: white;
+}
+
+/* =====================================
+   USER BOX
+===================================== */
+
+.user-box {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    background: #1e293b;
+
+    border: 1px solid rgba(59,130,246,.15);
+
+    padding: 8px 14px;
+
+    border-radius: 16px;
+}
+
+.user-avatar {
+    width: 42px;
+    height: 42px;
+
+    border-radius: 12px;
+
+    background: rgba(59,130,246,.15);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.user-avatar i {
+    color: #60a5fa;
+    font-size: 18px;
+}
+
+.user-name {
+    color: white;
+
+    font-weight: 600;
+
+    display: block;
+}
+
+.user-info small {
+    color: #94a3b8;
+}
+
+/* =====================================
+   FOOTER
+===================================== */
+
+.app-footer {
+    background: #0f172a;
+
+    border-top: 1px solid rgba(59,130,246,.15);
+
+    margin-top: 0px;
+
+    padding-top: 10px;
+}
+
+.footer-content {
+    display: flex;
+
+    justify-content: space-between;
+
+    align-items: center;
+
+    gap: 40px;
+    margin-top: 30px;
+    padding-bottom: 30px;
+}
+
+/* =====================================
+   LEFT
+===================================== */
+
+.footer-left h5 {
+    color: white;
+
+    margin-bottom: 10px;
+
+    font-weight: 700;
+}
+
+.footer-left h5 i {
+    color: #3b82f6;
+
+    margin-right: 8px;
+}
+
+.footer-left p {
+    color: #94a3b8;
+
+    margin: 0;
+}
+
+/* =====================================
+   CENTER
+===================================== */
+
+.footer-center {
+    display: flex;
+
+    gap: 25px;
+}
+
+.footer-center a {
+    color: #94a3b8;
+
+    text-decoration: none;
+
+    transition: .3s;
+}
+
+.footer-center a:hover {
+    color: #60a5fa;
+}
+
+/* =====================================
+   RIGHT
+===================================== */
+
+.footer-right {
+    display: flex;
+
+    gap: 15px;
+}
+
+.footer-right a {
+    width: 42px;
+    height: 42px;
+
+    border-radius: 12px;
+
+    background: #1e293b;
+
+    color: #94a3b8;
+
+    display: flex;
+
+    align-items: center;
+    justify-content: center;
+
+    text-decoration: none;
+
+    transition: .3s;
+}
+
+.footer-right a:hover {
+    background: #2563eb;
+    color: white;
+
+    transform: translateY(-3px);
+}
+
+/* =====================================
+   COPYRIGHT
+===================================== */
+
+.footer-bottom {
+    text-align: center;
+
+    color: #64748b;
+
+    border-top: 1px solid rgba(255,255,255,.05);
+
+    padding: 20px 0;
+
+    font-size: .9rem;
+}
+
+/* =====================================
+   MOBILE
+===================================== */
+
+@media (max-width: 768px) {
+
+    .footer-content {
+        flex-direction: column;
+
+        text-align: center;
+    }
+
+    .footer-center {
+        flex-wrap: wrap;
+
+        justify-content: center;
+    }
+}
+/* =====================================
+   MOBILE
+===================================== */
+
+@media (max-width: 768px) {
+
+    .header-subtitle,
+    .user-info {
+        display: none;
+    }
+
+    .header-title {
+        font-size: 1.1rem;
+    }
+
+    .header-content {
+        height: 75px;
+    }
+}

src/main/resources/static/css/style.css

@@ -0,0 +1,133 @@
+/* Smart Attendance System - Main Styles */
+
+:root {
+  --primary-gradient: linear-gradient(to right, #6366f1, #8b5cf6);
+  --secondary-gradient: linear-gradient(to right, #8b5cf6, #ec4899);
+  --admin-gradient: linear-gradient(to right, #ec4899, #f97316);
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Glassmorphism Effect */
+.glass {
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Gradient Text */
+.gradient-text {
+  background: linear-gradient(to right, #6366f1, #8b5cf6, #ec4899);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Smooth Transitions */
+.transition-smooth {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Card Hover Effect */
+.card-hover {
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.card-hover:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #1e293b;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #475569;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #64748b;
+}
+
+/* Loading Animation */
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* Fade In Animation */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-in {
+  animation: fadeIn 0.6s ease-out;
+}
+
+/* Button Styles */
+.btn-primary {
+  background: linear-gradient(to right, #6366f1, #8b5cf6);
+  color: white;
+  padding: 0.75rem 1.5rem;
+  border-radius: 0.75rem;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  border: none;
+  cursor: pointer;
+}
+
+.btn-primary:hover {
+  background: linear-gradient(to right, #4f46e5, #7c3aed);
+  transform: translateY(-2px);
+  box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .sidebar {
+    position: fixed;
+    left: -100%;
+    transition: left 0.3s ease;
+    z-index: 50;
+  }
+
+  .sidebar.open {
+    left: 0;
+  }
+}

src/main/resources/static/css/theme.css

@@ -0,0 +1,235 @@
+/* ===========================
+   FACE ID ATTENDANCE SYSTEM
+   Theme CSS - Light & Dark Mode
+   =========================== */
+
+:root {
+    /* Light Mode Colors */
+    --background: #ffffff;
+    --foreground: #0F1117;
+    --card: #ffffff;
+    --card-foreground: #0F1117;
+    --popover: #ffffff;
+    --popover-foreground: #0F1117;
+    --primary: #3B82F6;
+    --primary-foreground: #ffffff;
+    --secondary: #F3F4F6;
+    --secondary-foreground: #0F1117;
+    --muted: #F3F4F6;
+    --muted-foreground: #6B7280;
+    --accent: #F3F4F6;
+    --accent-foreground: #0F1117;
+    --destructive: #EF4444;
+    --destructive-foreground: #ffffff;
+    --border: #E5E7EB;
+    --input: #E5E7EB;
+    --input-background: #ffffff;
+    --ring: #3B82F6;
+    --success: #10B981;
+    --warning: #F59E0B;
+    --info: #3B82F6;
+
+    /* Spacing */
+    --radius: 0.5rem;
+    --transition-duration: 300ms;
+}
+
+[data-theme="dark"] {
+    /* Dark Mode Colors */
+    --background: #0F1117;
+    --foreground: #F9FAFB;
+    --card: #1B1F2A;
+    --card-foreground: #F9FAFB;
+    --popover: #1B1F2A;
+    --popover-foreground: #F9FAFB;
+    --primary: #60A5FA;
+    --primary-foreground: #0F1117;
+    --secondary: #1F2937;
+    --secondary-foreground: #F9FAFB;
+    --muted: #1F2937;
+    --muted-foreground: #9CA3AF;
+    --accent: #1F2937;
+    --accent-foreground: #F9FAFB;
+    --destructive: #EF4444;
+    --destructive-foreground: #ffffff;
+    --border: #374151;
+    --input: #374151;
+    --input-background: #1F2937;
+    --ring: #60A5FA;
+    --success: #10B981;
+    --warning: #F59E0B;
+    --info: #60A5FA;
+}
+
+/* ===========================
+   RESET & BASE STYLES
+   =========================== */
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    background-color: var(--background);
+    color: var(--foreground);
+    line-height: 1.5;
+    transition: background-color var(--transition-duration), color var(--transition-duration);
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-weight: 700;
+    line-height: 1.2;
+}
+
+h1 { font-size: 2rem; }
+h2 { font-size: 1.5rem; }
+h3 { font-size: 1.25rem; }
+
+/* ===========================
+   SCROLLBAR STYLING
+   =========================== */
+
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--secondary);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--muted-foreground);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--foreground);
+}
+
+/* ===========================
+   UTILITY CLASSES
+   =========================== */
+
+.container {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 0 1.5rem;
+}
+
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+
+.font-bold { font-weight: 700; }
+.font-semibold { font-weight: 600; }
+.font-medium { font-weight: 500; }
+
+.text-sm { font-size: 0.875rem; }
+.text-xs { font-size: 0.75rem; }
+.text-lg { font-size: 1.125rem; }
+.text-xl { font-size: 1.25rem; }
+.text-2xl { font-size: 1.5rem; }
+.text-3xl { font-size: 1.875rem; }
+
+.text-muted { color: var(--muted-foreground); }
+.text-primary { color: var(--primary); }
+.text-success { color: var(--success); }
+.text-warning { color: var(--warning); }
+.text-destructive { color: var(--destructive); }
+
+.bg-card { background-color: var(--card); }
+.bg-secondary { background-color: var(--secondary); }
+.bg-primary { background-color: var(--primary); }
+.bg-success { background-color: var(--success); }
+.bg-warning { background-color: var(--warning); }
+.bg-destructive { background-color: var(--destructive); }
+
+.border { border: 1px solid var(--border); }
+.border-primary { border-color: var(--primary); }
+.border-success { border-color: var(--success); }
+.border-warning { border-color: var(--warning); }
+.border-destructive { border-color: var(--destructive); }
+
+.rounded { border-radius: var(--radius); }
+.rounded-lg { border-radius: calc(var(--radius) * 1.5); }
+.rounded-xl { border-radius: calc(var(--radius) * 2); }
+.rounded-full { border-radius: 9999px; }
+
+.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); }
+.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
+
+.transition-all {
+    transition: all var(--transition-duration);
+}
+
+/* Flexbox */
+.flex { display: flex; }
+.flex-col { flex-direction: column; }
+.items-center { align-items: center; }
+.items-start { align-items: flex-start; }
+.items-end { align-items: flex-end; }
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.justify-end { justify-content: flex-end; }
+.gap-1 { gap: 0.25rem; }
+.gap-2 { gap: 0.5rem; }
+.gap-3 { gap: 0.75rem; }
+.gap-4 { gap: 1rem; }
+.gap-6 { gap: 1.5rem; }
+
+/* Grid */
+.grid { display: grid; }
+.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
+.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
+.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
+.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
+.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
+
+/* Spacing */
+.p-1 { padding: 0.25rem; }
+.p-2 { padding: 0.5rem; }
+.p-3 { padding: 0.75rem; }
+.p-4 { padding: 1rem; }
+.p-6 { padding: 1.5rem; }
+.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
+.px-4 { padding-left: 1rem; padding-right: 1rem; }
+.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
+.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
+.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
+.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
+
+.m-0 { margin: 0; }
+.mb-1 { margin-bottom: 0.25rem; }
+.mb-2 { margin-bottom: 0.5rem; }
+.mb-3 { margin-bottom: 0.75rem; }
+.mb-4 { margin-bottom: 1rem; }
+.mb-6 { margin-bottom: 1.5rem; }
+.mt-1 { margin-top: 0.25rem; }
+.mt-2 { margin-top: 0.5rem; }
+.mt-4 { margin-top: 1rem; }
+.mx-auto { margin-left: auto; margin-right: auto; }
+
+/* Width & Height */
+.w-full { width: 100%; }
+.h-full { height: 100%; }
+.min-h-screen { min-height: 100vh; }
+
+/* Display */
+.hidden { display: none; }
+.block { display: block; }
+.inline-block { display: inline-block; }
+.inline-flex { display: inline-flex; }
+
+/* Position */
+.relative { position: relative; }
+.absolute { position: absolute; }
+.fixed { position: fixed; }
+
+/* Overflow */
+.overflow-hidden { overflow: hidden; }
+.overflow-auto { overflow: auto; }

src/main/resources/static/js/main.js

@@ -0,0 +1,88 @@
+/**
+ * FACE ID ATTENDANCE SYSTEM
+ * Main JavaScript - Theme Toggle & Utilities
+ */
+
+// ===========================
+// THEME MANAGEMENT
+// ===========================
+
+function initTheme() {
+    const savedTheme = localStorage.getItem('theme') || 'light';
+    document.documentElement.setAttribute('data-theme', savedTheme);
+    updateThemeIcon(savedTheme);
+}
+
+function toggleTheme() {
+    const currentTheme = document.documentElement.getAttribute('data-theme');
+    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+    document.documentElement.setAttribute('data-theme', newTheme);
+    localStorage.setItem('theme', newTheme);
+    updateThemeIcon(newTheme);
+}
+
+function updateThemeIcon(theme) {
+    const themeBtn = document.getElementById('theme-toggle');
+    if (themeBtn) {
+        const icon = themeBtn.querySelector('svg');
+        if (icon) {
+            icon.innerHTML = theme === 'light'
+                ? '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>'
+                : '<circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line>';
+        }
+    }
+}
+
+// Clock, modals, validation
+function updateClock() {
+    const clockElements = document.querySelectorAll('.clock');
+    if (clockElements.length === 0) return;
+    const now = new Date();
+    clockElements.forEach(clock => {
+        const timeEl = clock.querySelector('.clock-time');
+        const dateEl = clock.querySelector('.clock-date');
+        if (timeEl) timeEl.textContent = now.toLocaleTimeString('vi-VN');
+        if (dateEl) dateEl.textContent = now.toLocaleDateString('vi-VN', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
+    });
+}
+
+function openModal(modalId) {
+    const modal = document.getElementById(modalId);
+    if (modal) {
+        modal.style.display = 'flex';
+        document.body.style.overflow = 'hidden';
+    }
+}
+
+function closeModal(modalId) {
+    const modal = document.getElementById(modalId);
+    if (modal) {
+        modal.style.display = 'none';
+        document.body.style.overflow = 'auto';
+    }
+}
+
+function showAlert(message, type = 'info') {
+    alert(message);
+}
+
+function togglePassword(inputId) {
+    const input = document.getElementById(inputId);
+    if (!input) return;
+    input.type = input.type === 'password' ? 'text' : 'password';
+}
+
+// Initialize
+document.addEventListener('DOMContentLoaded', function() {
+    initTheme();
+    updateClock();
+    setInterval(updateClock, 1000);
+});
+
+window.AttendanceSystem = {
+    toggleTheme,
+    openModal,
+    closeModal,
+    showAlert,
+    togglePassword
+};

src/main/webapp/WEB-INF/views/attendances/homeAttendance.jsp

@@ -0,0 +1,143 @@
+<%@ page contentType="text/html;charset=UTF-8" %>
+
+
+    <html lang="en">
+
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Home Attendance</title>
+        <link href="/css/attendance.css" rel="stylesheet">
+    </head>
+
+    <body>
+
+        <!-- =======================================================================
+                                    HEADER
+    ==========================================================================-->
+        <header class="header">
+            <div class="header-left">
+                <div class="header-logo">
+                    <a href="/home">MyApp</a>
+                </div>
+
+                <div class="header-info">
+                    <h1 class="header-title">Home Attendance 1</h1>
+                    <div class="header-time">22/22/22</div>
+                </div>
+            </div>
+
+            <div class="header-right">
+
+                <div class="header-clock" id="clock">
+                    00:00:00
+                </div>
+
+                <button class="header-btn theme-toggle" id="themeToggle">
+                    🌙
+                </button>
+
+                
+
+            </div>
+        </header>
+        <!-- =======================================================================
+                                    BODY
+    ==========================================================================-->
+        <div class="container">
+            <div class="container-attend-left history">
+                <h3 class="history-title">Lịch sử chấm công</h3>
+
+                <ul class="history-list">
+
+                    <li class="history-item">
+                        <div class="history-card">
+                            <span class="history-date">
+                                Ngày 01/01/2024
+                            </span>
+
+                            <span class="history-status status-in">
+                                Vào lúc 08:00
+                            </span>
+
+                            <span class="history-status status-out">
+                                Ra lúc 17:00
+                            </span>
+                        </div>
+                    </li>
+
+                </ul>
+            </div>
+            <div class="container-attend-main">
+
+                <div class="face-scanner scanner-card">
+
+                    <!-- <video id="camera" autoplay playsinline></video> -->
+
+                    <div class="scan-overlay">
+                        <div class="scan-frame"></div>
+                        <div class="scan-line"></div>
+                    </div>
+
+                    <div class="result-card success-result">
+                        ✓ Nhận diện thành công
+                    </div>
+
+                </div>
+
+                <div class="face-guide guide-card">
+                    <p class="guide-title">
+                        Hướng dẫn chấm công bằng nhận diện khuôn mặt:
+                    </p>
+
+                    <ol class="guide-list">
+                        <li>Đứng cách camera khoảng 50cm - 1m</li>
+                        <li>Nhìn thẳng vào camera</li>
+                        <li>Giữ khuôn mặt trong khung hình</li>
+                        <li>Hệ thống sẽ tự động nhận diện và ghi nhận</li>
+                    </ol>
+                </div>
+
+            </div>
+            <div class="container-attend-right">
+
+                <h3 class="attendance-title">
+                    Thống kê hôm nay
+                </h3>
+
+                <div class="stat-card success-card">
+                    <p class="attendance-present">
+                        Đã chấm công
+                    </p>
+                    <span class="stat-number">42</span>
+                </div>
+
+                <div class="stat-card warning-card">
+                    <p class="attendance-late">
+                        Đi muộn
+                    </p>
+                    <span class="stat-number">8</span>
+                </div>
+
+                <div class="stat-card danger-card">
+                    <p class="attendance-absent">
+                        Chưa chấm công
+                    </p>
+                    <span class="stat-number">12</span>
+                </div>
+
+                <div class="attendance-info">
+                    <p class="attendance-sum">
+                        Tổng nhân viên: 50
+                    </p>
+
+                    <p class="attendance-date">
+                        Giờ làm việc: 08:00 - 17:00
+                    </p>
+                </div>
+
+            </div>
+
+    </body>
+
+    </html>

src/main/webapp/WEB-INF/views/auths/login.jsp

@@ -0,0 +1,98 @@
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+<%@ include file="/WEB-INF/views/layouts/header.jsp" %>
+
+<div class="min-h-screen bg-gradient-to-br from-slate-950 via-indigo-950 to-slate-950 flex items-center justify-center p-4">
+    <div class="w-full max-w-md bg-slate-900/50 backdrop-blur-xl border border-white/10 rounded-2xl p-8">
+        <div class="text-center mb-8">
+            <div class="w-16 h-16 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
+                <i data-lucide="camera" class="w-8 h-8 text-white"></i>
+            </div>
+            <h1 class="text-3xl font-bold text-white mb-2">Đăng nhập</h1>
+            <p class="text-slate-400">Truy cập vào hệ thống quản lý điểm danh</p>
+        </div>
+
+        <form action="${pageContext.request.contextPath}/login" method="POST" class="space-y-4">
+            <div class="space-y-2">
+                <label for="email" class="block text-sm text-slate-300">Email</label>
+                <input
+                    type="email"
+                    id="email"
+                    name="email"
+                    placeholder="example@company.com"
+                    class="w-full px-4 py-3 bg-slate-800/50 border border-white/10 rounded-xl text-white placeholder:text-slate-500 focus:outline-none focus:border-indigo-500 transition"
+                    required
+                />
+            </div>
+
+            <div class="space-y-2">
+                <label for="password" class="block text-sm text-slate-300">Mật khẩu</label>
+                <div class="relative">
+                    <input
+                        type="password"
+                        id="password"
+                        name="password"
+                        placeholder="••••••••"
+                        class="w-full px-4 py-3 bg-slate-800/50 border border-white/10 rounded-xl text-white placeholder:text-slate-500 focus:outline-none focus:border-indigo-500 transition pr-10"
+                        required
+                    />
+                    <button
+                        type="button"
+                        onclick="togglePassword()"
+                        class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white"
+                    >
+                        <i data-lucide="eye" id="eyeIcon" class="w-5 h-5"></i>
+                    </button>
+                </div>
+            </div>
+
+            <div class="space-y-3 pt-4">
+                <button
+                    type="submit"
+                    formaction="${pageContext.request.contextPath}/employee/dashboard"
+                    class="w-full px-4 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 rounded-xl font-medium transition"
+                >
+                    Đăng nhập với vai trò Nhân viên
+                </button>
+                <button
+                    type="submit"
+                    formaction="${pageContext.request.contextPath}/teacher/dashboard"
+                    class="w-full px-4 py-3 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 rounded-xl font-medium transition"
+                >
+                    Đăng nhập với vai trò Quản lý
+                </button>
+                <button
+                    type="submit"
+                    formaction="${pageContext.request.contextPath}/admin/dashboard"
+                    class="w-full px-4 py-3 bg-gradient-to-r from-pink-600 to-orange-600 hover:from-pink-700 hover:to-orange-700 rounded-xl font-medium transition"
+                >
+                    Đăng nhập với vai trò Admin
+                </button>
+            </div>
+        </form>
+
+        <div class="text-center text-sm text-slate-400 mt-6">
+            Chưa có tài khoản?
+            <a href="${pageContext.request.contextPath}/register" class="text-indigo-400 hover:text-indigo-300 font-medium">
+                Đăng ký ngay
+            </a>
+        </div>
+    </div>
+</div>
+
+<script>
+function togglePassword() {
+    const passwordInput = document.getElementById('password');
+    const eyeIcon = document.getElementById('eyeIcon');
+    if (passwordInput.type === 'password') {
+        passwordInput.type = 'text';
+        eyeIcon.setAttribute('data-lucide', 'eye-off');
+    } else {
+        passwordInput.type = 'password';
+        eyeIcon.setAttribute('data-lucide', 'eye');
+    }
+    lucide.createIcons();
+}
+</script>
+
+<%@ include file="/WEB-INF/views/layouts/footer.jsp" %>

src/main/webapp/WEB-INF/views/auths/register.jsp

@@ -0,0 +1,81 @@
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+<%@ include file="/WEB-INF/views/layouts/header.jsp" %>
+
+<div class="min-h-screen bg-gradient-to-br from-slate-950 via-indigo-950 to-slate-950 flex items-center justify-center p-4">
+    <div class="w-full max-w-md bg-slate-900/50 backdrop-blur-xl border border-white/10 rounded-2xl p-8">
+        <div class="text-center mb-8">
+            <div class="w-16 h-16 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
+                <i data-lucide="camera" class="w-8 h-8 text-white"></i>
+            </div>
+            <h1 class="text-3xl font-bold text-white mb-2">Đăng ký</h1>
+            <p class="text-slate-400">Tạo tài khoản mới để sử dụng hệ thống</p>
+        </div>
+
+        <form action="${pageContext.request.contextPath}/register" method="POST" class="space-y-4">
+            <div class="space-y-2">
+                <label for="fullName" class="block text-sm text-slate-300">Họ và tên</label>
+                <input
+                    type="text"
+                    id="fullName"
+                    name="fullName"
+                    placeholder="Nguyễn Văn A"
+                    class="w-full px-4 py-3 bg-slate-800/50 border border-white/10 rounded-xl text-white placeholder:text-slate-500 focus:outline-none focus:border-indigo-500 transition"
+                    required
+                />
+            </div>
+
+            <div class="space-y-2">
+                <label for="email" class="block text-sm text-slate-300">Email</label>
+                <input
+                    type="email"
+                    id="email"
+                    name="email"
+                    placeholder="example@company.com"
+                    class="w-full px-4 py-3 bg-slate-800/50 border border-white/10 rounded-xl text-white placeholder:text-slate-500 focus:outline-none focus:border-indigo-500 transition"
+                    required
+                />
+            </div>
+
+            <div class="space-y-2">
+                <label for="password" class="block text-sm text-slate-300">Mật khẩu</label>
+                <input
+                    type="password"
+                    id="password"
+                    name="password"
+                    placeholder="••••••••"
+                    class="w-full px-4 py-3 bg-slate-800/50 border border-white/10 rounded-xl text-white placeholder:text-slate-500 focus:outline-none focus:border-indigo-500 transition"
+                    required
+                />
+            </div>
+
+            <div class="space-y-2">
+                <label for="confirmPassword" class="block text-sm text-slate-300">Xác nhận mật khẩu</label>
+                <input
+                    type="password"
+                    id="confirmPassword"
+                    name="confirmPassword"
+                    placeholder="••••••••"
+                    class="w-full px-4 py-3 bg-slate-800/50 border border-white/10 rounded-xl text-white placeholder:text-slate-500 focus:outline-none focus:border-indigo-500 transition"
+                    required
+                />
+            </div>
+
+            <button
+                type="submit"
+                class="w-full px-4 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 rounded-xl font-medium transition"
+            >
+                Đăng ký
+            </button>
+        </form>
+
+        <div class="text-center text-sm text-slate-400 mt-6">
+            Đã có tài khoản?
+            <a href="${pageContext.request.contextPath}/login" class="text-indigo-400 hover:text-indigo-300 font-medium">
+                Đăng nhập
+            </a>
+        </div>
+    </div>
+</div>
+
+<%@ include file="/WEB-INF/views/layouts/footer.jsp" %>

src/main/webapp/WEB-INF/views/dashBoard/employees/dashboard.jsp

@@ -0,0 +1,173 @@
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+
+<%-- Set page variables --%>
+<c:set var="pageTitle" value="Dashboard" scope="request"/>
+<c:set var="roleColor" value="from-indigo-600 to-purple-600" scope="request"/>
+<c:set var="roleLabel" value="Nhân viên" scope="request"/>
+<c:set var="userName" value="Nguyễn Văn A" scope="request"/>
+<c:set var="currentPage" value="/employee/dashboard" scope="request"/>
+
+<%-- Define menu items --%>
+<jsp:useBean id="menuItems" class="java.util.ArrayList" scope="request"/>
+<%-- In real app, this would be populated from backend --%>
+
+<%@ include file="/WEB-INF/views/layout/header.jsp" %>
+
+<div class="min-h-screen bg-slate-950 flex">
+    <%@ include file="/WEB-INF/views/layout/sidebar.jsp" %>
+
+    <div class="flex-1 flex flex-col">
+        <header class="h-16 bg-slate-900/50 backdrop-blur-xl border-b border-white/10 flex items-center justify-between px-6">
+            <h1 class="text-xl font-bold text-white">Dashboard</h1>
+            <button class="relative text-slate-400 hover:text-white">
+                <i data-lucide="bell" class="w-5 h-5"></i>
+                <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
+            </button>
+        </header>
+
+        <main class="flex-1 overflow-auto p-6">
+            <div class="space-y-6">
+                <!-- Welcome -->
+                <div class="bg-gradient-to-br from-indigo-600/20 to-purple-600/20 backdrop-blur-xl border border-white/10 rounded-2xl p-6">
+                    <h2 class="text-2xl font-bold text-white mb-2">Xin chào, ${userName}!</h2>
+                    <p class="text-slate-300">Chúc bạn một ngày làm việc hiệu quả</p>
+                </div>
+
+                <!-- Stats Cards -->
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                    <div class="bg-slate-900/50 backdrop-blur-xl border border-white/10 rounded-2xl p-6">
+                        <div class="flex items-start justify-between">
+                            <div class="flex-1">
+                                <p class="text-sm text-slate-400 mb-1">Check In hôm nay</p>
+                                <p class="text-2xl font-bold text-white mb-1">08:01 AM</p>
+                                <p class="text-xs text-green-400">+2 phút sớm</p>
+                            </div>
+                            <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-green-600 to-emerald-600 flex items-center justify-center">
+                                <i data-lucide="log-in" class="w-6 h-6 text-white"></i>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="bg-slate-900/50 backdrop-blur-xl border border-white/10 rounded-2xl p-6">
+                        <div class="flex items-start justify-between">
+                            <div class="flex-1">
+                                <p class="text-sm text-slate-400 mb-1">Giờ làm việc</p>
+                                <p class="text-2xl font-bold text-white mb-1">7h 23m</p>
+                            </div>
+                            <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-600 to-cyan-600 flex items-center justify-center">
+                                <i data-lucide="clock" class="w-6 h-6 text-white"></i>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="bg-slate-900/50 backdrop-blur-xl border border-white/10 rounded-2xl p-6">
+                        <div class="flex items-start justify-between">
+                            <div class="flex-1">
+                                <p class="text-sm text-slate-400 mb-1">Tỷ lệ chuyên cần</p>
+                                <p class="text-2xl font-bold text-white mb-1">96%</p>
+                                <p class="text-xs text-green-400">+2% so với tháng trước</p>
+                            </div>
+                            <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-purple-600 to-pink-600 flex items-center justify-center">
+                                <i data-lucide="trending-up" class="w-6 h-6 text-white"></i>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="bg-slate-900/50 backdrop-blur-xl border border-white/10 rounded-2xl p-6">
+                        <div class="flex items-start justify-between">
+                            <div class="flex-1">
+                                <p class="text-sm text-slate-400 mb-1">Yêu cầu chờ duyệt</p>
+                                <p class="text-2xl font-bold text-white mb-1">2</p>
+                                <p class="text-xs text-slate-400">1 nghỉ phép, 1 báo cáo</p>
+                            </div>
+                            <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-orange-600 to-red-600 flex items-center justify-center">
+                                <i data-lucide="alert-circle" class="w-6 h-6 text-white"></i>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Timeline & Calendar -->
+                <div class="grid lg:grid-cols-3 gap-6">
+                    <div class="lg:col-span-2 bg-slate-900/50 backdrop-blur-xl border border-white/10 rounded-2xl p-6">
+                        <h3 class="text-white font-bold mb-6 flex items-center gap-2">
+                            <i data-lucide="clock" class="w-5 h-5"></i>
+                            Lịch trình hôm nay
+                        </h3>
+                        <div class="space-y-4">
+                            <div class="flex items-center gap-4">
+                                <div class="w-10 h-10 rounded-full bg-green-600 flex items-center justify-center">
+                                    <i data-lucide="log-in" class="w-5 h-5 text-white"></i>
+                                </div>
+                                <div class="flex-1">
+                                    <div class="text-white font-medium">Check In</div>
+                                    <div class="text-sm text-slate-400">08:01</div>
+                                </div>
+                                <div class="text-xs bg-green-600/20 text-green-400 px-2 py-1 rounded">Hoàn thành</div>
+                            </div>
+                            <div class="flex items-center gap-4">
+                                <div class="w-10 h-10 rounded-full bg-slate-700 flex items-center justify-center">
+                                    <i data-lucide="coffee" class="w-5 h-5 text-white"></i>
+                                </div>
+                                <div class="flex-1">
+                                    <div class="text-white font-medium">Nghỉ trưa</div>
+                                    <div class="text-sm text-slate-400">12:00</div>
+                                </div>
+                            </div>
+                            <div class="flex items-center gap-4">
+                                <div class="w-10 h-10 rounded-full bg-slate-700 flex items-center justify-center">
+                                    <i data-lucide="coffee" class="w-5 h-5 text-white"></i>
+                                </div>
+                                <div class="flex-1">
+                                    <div class="text-white font-medium">Quay lại làm việc</div>
+                                    <div class="text-sm text-slate-400">13:00</div>
+                                </div>
+                            </div>
+                            <div class="flex items-center gap-4">
+                                <div class="w-10 h-10 rounded-full bg-slate-700 flex items-center justify-center">
+                                    <i data-lucide="log-out" class="w-5 h-5 text-white"></i>
+                                </div>
+                                <div class="flex-1">
+                                    <div class="text-white font-medium">Check Out</div>
+                                    <div class="text-sm text-slate-400">17:30</div>
+                                </div>
+                            </div>
+                            <button class="w-full px-4 py-3 mt-4 border border-white/20 text-white hover:bg-white/5 rounded-xl transition">
+                                <i data-lucide="log-out" class="w-5 h-5 inline mr-2"></i>
+                                Điểm danh ra ca
+                            </button>
+                        </div>
+                    </div>
+
+                    <div class="bg-slate-900/50 backdrop-blur-xl border border-white/10 rounded-2xl p-6">
+                        <h3 class="text-white font-bold mb-6 flex items-center gap-2">
+                            <i data-lucide="calendar" class="w-5 h-5"></i>
+                            Lịch làm việc
+                        </h3>
+                        <div class="space-y-4 mt-6">
+                            <div class="flex items-center gap-2 text-sm">
+                                <div class="w-3 h-3 rounded-full bg-green-500"></div>
+                                <span class="text-slate-400">Có mặt</span>
+                            </div>
+                            <div class="flex items-center gap-2 text-sm">
+                                <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
+                                <span class="text-slate-400">Đi muộn</span>
+                            </div>
+                            <div class="flex items-center gap-2 text-sm">
+                                <div class="w-3 h-3 rounded-full bg-red-500"></div>
+                                <span class="text-slate-400">Vắng mặt</span>
+                            </div>
+                            <div class="flex items-center gap-2 text-sm">
+                                <div class="w-3 h-3 rounded-full bg-blue-500"></div>
+                                <span class="text-slate-400">Nghỉ phép</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+</div>
+
+<%@ include file="/WEB-INF/views/layouts/footer.jsp" %>

src/main/webapp/WEB-INF/views/home.jsp

@@ -0,0 +1,130 @@
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+<%@ include file="/WEB-INF/views/layouts/header.jsp" %>
+
+<div class="min-h-screen bg-gradient-to-br from-slate-950 via-indigo-950 to-slate-950">
+    <!-- Navigation -->
+    <nav class="border-b border-white/10 bg-slate-950/50 backdrop-blur-xl">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between items-center h-16">
+                <div class="flex items-center gap-2">
+                    <div class="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center">
+                        <i data-lucide="camera" class="w-6 h-6 text-white"></i>
+                    </div>
+                    <span class="text-xl font-bold bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent">
+                        Smart Attendance
+                    </span>
+                </div>
+                <div class="flex gap-4">
+                    <a href="${pageContext.request.contextPath}/login" class="px-4 py-2 text-slate-300 hover:text-white transition">Đăng nhập</a>
+                    <a href="${pageContext.request.contextPath}/register" class="px-4 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 rounded-lg transition">Bắt đầu ngay</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <section class="relative overflow-hidden py-20 lg:py-32">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="grid lg:grid-cols-2 gap-12 items-center">
+                <div>
+                    <h1 class="text-5xl lg:text-7xl font-bold mb-6">
+                        <span class="bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">
+                            SMART ATTENDANCE
+                        </span>
+                        <br />
+                        <span class="text-white">SYSTEM</span>
+                    </h1>
+                    <p class="text-xl text-slate-300 mb-8 leading-relaxed">
+                        Giải pháp điểm danh Face ID thông minh cho doanh nghiệp và cơ sở giáo dục.
+                        Quản lý hiệu quả, chính xác và an toàn.
+                    </p>
+                    <div class="flex gap-4">
+                        <a href="${pageContext.request.contextPath}/register" class="px-6 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 rounded-lg font-medium transition">
+                            Bắt đầu ngay
+                        </a>
+                        <a href="${pageContext.request.contextPath}/login" class="px-6 py-3 border border-white/20 text-white hover:bg-white/10 rounded-lg font-medium transition">
+                            Xem Demo
+                        </a>
+                    </div>
+                </div>
+
+                <div class="relative">
+                    <div class="bg-gradient-to-br from-indigo-600/20 to-purple-600/20 backdrop-blur-xl border border-white/10 rounded-3xl p-8">
+                        <div class="grid grid-cols-2 gap-4">
+                            <div class="bg-slate-900/50 backdrop-blur-sm border border-white/10 rounded-2xl p-6 text-center">
+                                <i data-lucide="users" class="w-8 h-8 mx-auto mb-3 text-indigo-400"></i>
+                                <div class="text-3xl font-bold text-white mb-1">5000+</div>
+                                <div class="text-sm text-slate-400">Người dùng</div>
+                            </div>
+                            <div class="bg-slate-900/50 backdrop-blur-sm border border-white/10 rounded-2xl p-6 text-center">
+                                <i data-lucide="target" class="w-8 h-8 mx-auto mb-3 text-indigo-400"></i>
+                                <div class="text-3xl font-bold text-white mb-1">99.8%</div>
+                                <div class="text-sm text-slate-400">Độ chính xác</div>
+                            </div>
+                            <div class="bg-slate-900/50 backdrop-blur-sm border border-white/10 rounded-2xl p-6 text-center">
+                                <i data-lucide="building-2" class="w-8 h-8 mx-auto mb-3 text-indigo-400"></i>
+                                <div class="text-3xl font-bold text-white mb-1">50+</div>
+                                <div class="text-sm text-slate-400">Đơn vị</div>
+                            </div>
+                            <div class="bg-slate-900/50 backdrop-blur-sm border border-white/10 rounded-2xl p-6 text-center">
+                                <i data-lucide="clock" class="w-8 h-8 mx-auto mb-3 text-indigo-400"></i>
+                                <div class="text-3xl font-bold text-white mb-1">24/7</div>
+                                <div class="text-sm text-slate-400">Hoạt động</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Features Section -->
+    <section class="py-20 bg-slate-900/50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-16">
+                <h2 class="text-4xl font-bold text-white mb-4">Tính năng nổi bật</h2>
+                <p class="text-xl text-slate-400">Giải pháp toàn diện cho quản lý điểm danh</p>
+            </div>
+            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+                <div class="bg-slate-900/50 backdrop-blur-sm border border-white/10 hover:border-white/20 rounded-2xl p-6 transition-all group">
+                    <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-indigo-600 to-indigo-800 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
+                        <i data-lucide="camera" class="w-7 h-7 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-white mb-2">Face Recognition</h3>
+                    <p class="text-slate-400 leading-relaxed">Nhận diện khuôn mặt chính xác với AI, chống điểm danh hộ</p>
+                </div>
+                <div class="bg-slate-900/50 backdrop-blur-sm border border-white/10 hover:border-white/20 rounded-2xl p-6 transition-all group">
+                    <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-600 to-purple-800 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
+                        <i data-lucide="bar-chart-3" class="w-7 h-7 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-white mb-2">Analytics Dashboard</h3>
+                    <p class="text-slate-400 leading-relaxed">Thống kê realtime, biểu đồ trực quan, báo cáo chi tiết</p>
+                </div>
+                <div class="bg-slate-900/50 backdrop-blur-sm border border-white/10 hover:border-white/20 rounded-2xl p-6 transition-all group">
+                    <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-pink-600 to-pink-800 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
+                        <i data-lucide="file-text" class="w-7 h-7 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-white mb-2">Report Management</h3>
+                    <p class="text-slate-400 leading-relaxed">Quản lý báo cáo công việc hằng ngày và cuối tuần</p>
+                </div>
+                <div class="bg-slate-900/50 backdrop-blur-sm border border-white/10 hover:border-white/20 rounded-2xl p-6 transition-all group">
+                    <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-orange-600 to-orange-800 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
+                        <i data-lucide="calendar" class="w-7 h-7 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-white mb-2">Leave Management</h3>
+                    <p class="text-slate-400 leading-relaxed">Xin nghỉ phép, duyệt đơn, theo dõi lịch sử nghỉ</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="border-t border-white/10 bg-slate-950/50 backdrop-blur-xl py-12">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-slate-400">
+            <p>&copy; 2026 Smart Attendance System. All rights reserved.</p>
+        </div>
+    </footer>
+</div>
+
+<%@ include file="/WEB-INF/views/layouts/footer.jsp" %>

src/main/webapp/WEB-INF/views/landing.jsp

@@ -0,0 +1,130 @@
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+<%@ include file="/WEB-INF/views/layout/header.jsp" %>
+
+<div class="min-h-screen bg-gradient-to-br from-slate-950 via-indigo-950 to-slate-950">
+    <!-- Navigation -->
+    <nav class="border-b border-white/10 bg-slate-950/50 backdrop-blur-xl">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between items-center h-16">
+                <div class="flex items-center gap-2">
+                    <div class="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center">
+                        <i data-lucide="camera" class="w-6 h-6 text-white"></i>
+                    </div>
+                    <span class="text-xl font-bold bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent">
+                        Smart Attendance
+                    </span>
+                </div>
+                <div class="flex gap-4">
+                    <a href="${pageContext.request.contextPath}/login" class="px-4 py-2 text-slate-300 hover:text-white transition">Đăng nhập</a>
+                    <a href="${pageContext.request.contextPath}/register" class="px-4 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 rounded-lg transition">Bắt đầu ngay</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <section class="relative overflow-hidden py-20 lg:py-32">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="grid lg:grid-cols-2 gap-12 items-center">
+                <div>
+                    <h1 class="text-5xl lg:text-7xl font-bold mb-6">
+                        <span class="bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">
+                            SMART ATTENDANCE
+                        </span>
+                        <br />
+                        <span class="text-white">SYSTEM</span>
+                    </h1>
+                    <p class="text-xl text-slate-300 mb-8 leading-relaxed">
+                        Giải pháp điểm danh Face ID thông minh cho doanh nghiệp và cơ sở giáo dục.
+                        Quản lý hiệu quả, chính xác và an toàn.
+                    </p>
+                    <div class="flex gap-4">
+                        <a href="${pageContext.request.contextPath}/register" class="px-6 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 rounded-lg font-medium transition">
+                            Bắt đầu ngay
+                        </a>
+                        <a href="${pageContext.request.contextPath}/login" class="px-6 py-3 border border-white/20 text-white hover:bg-white/10 rounded-lg font-medium transition">
+                            Xem Demo
+                        </a>
+                    </div>
+                </div>
+
+                <div class="relative">
+                    <div class="bg-gradient-to-br from-indigo-600/20 to-purple-600/20 backdrop-blur-xl border border-white/10 rounded-3xl p-8">
+                        <div class="grid grid-cols-2 gap-4">
+                            <div class="bg-slate-900/50 backdrop-blur-sm border border-white/10 rounded-2xl p-6 text-center">
+                                <i data-lucide="users" class="w-8 h-8 mx-auto mb-3 text-indigo-400"></i>
+                                <div class="text-3xl font-bold text-white mb-1">5000+</div>
+                                <div class="text-sm text-slate-400">Người dùng</div>
+                            </div>
+                            <div class="bg-slate-900/50 backdrop-blur-sm border border-white/10 rounded-2xl p-6 text-center">
+                                <i data-lucide="target" class="w-8 h-8 mx-auto mb-3 text-indigo-400"></i>
+                                <div class="text-3xl font-bold text-white mb-1">99.8%</div>
+                                <div class="text-sm text-slate-400">Độ chính xác</div>
+                            </div>
+                            <div class="bg-slate-900/50 backdrop-blur-sm border border-white/10 rounded-2xl p-6 text-center">
+                                <i data-lucide="building-2" class="w-8 h-8 mx-auto mb-3 text-indigo-400"></i>
+                                <div class="text-3xl font-bold text-white mb-1">50+</div>
+                                <div class="text-sm text-slate-400">Đơn vị</div>
+                            </div>
+                            <div class="bg-slate-900/50 backdrop-blur-sm border border-white/10 rounded-2xl p-6 text-center">
+                                <i data-lucide="clock" class="w-8 h-8 mx-auto mb-3 text-indigo-400"></i>
+                                <div class="text-3xl font-bold text-white mb-1">24/7</div>
+                                <div class="text-sm text-slate-400">Hoạt động</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Features Section -->
+    <section class="py-20 bg-slate-900/50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-16">
+                <h2 class="text-4xl font-bold text-white mb-4">Tính năng nổi bật</h2>
+                <p class="text-xl text-slate-400">Giải pháp toàn diện cho quản lý điểm danh</p>
+            </div>
+            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+                <div class="bg-slate-900/50 backdrop-blur-sm border border-white/10 hover:border-white/20 rounded-2xl p-6 transition-all group">
+                    <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-indigo-600 to-indigo-800 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
+                        <i data-lucide="camera" class="w-7 h-7 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-white mb-2">Face Recognition</h3>
+                    <p class="text-slate-400 leading-relaxed">Nhận diện khuôn mặt chính xác với AI, chống điểm danh hộ</p>
+                </div>
+                <div class="bg-slate-900/50 backdrop-blur-sm border border-white/10 hover:border-white/20 rounded-2xl p-6 transition-all group">
+                    <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-600 to-purple-800 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
+                        <i data-lucide="bar-chart-3" class="w-7 h-7 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-white mb-2">Analytics Dashboard</h3>
+                    <p class="text-slate-400 leading-relaxed">Thống kê realtime, biểu đồ trực quan, báo cáo chi tiết</p>
+                </div>
+                <div class="bg-slate-900/50 backdrop-blur-sm border border-white/10 hover:border-white/20 rounded-2xl p-6 transition-all group">
+                    <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-pink-600 to-pink-800 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
+                        <i data-lucide="file-text" class="w-7 h-7 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-white mb-2">Report Management</h3>
+                    <p class="text-slate-400 leading-relaxed">Quản lý báo cáo công việc hằng ngày và cuối tuần</p>
+                </div>
+                <div class="bg-slate-900/50 backdrop-blur-sm border border-white/10 hover:border-white/20 rounded-2xl p-6 transition-all group">
+                    <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-orange-600 to-orange-800 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
+                        <i data-lucide="calendar" class="w-7 h-7 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-white mb-2">Leave Management</h3>
+                    <p class="text-slate-400 leading-relaxed">Xin nghỉ phép, duyệt đơn, theo dõi lịch sử nghỉ</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="border-t border-white/10 bg-slate-950/50 backdrop-blur-xl py-12">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-slate-400">
+            <p>&copy; 2026 Smart Attendance System. All rights reserved.</p>
+        </div>
+    </footer>
+</div>
+
+<%@ include file="/WEB-INF/views/layout/footer.jsp" %>

src/main/webapp/WEB-INF/views/layouts/base.jsp

@@ -0,0 +1,32 @@
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+
+<%@ include file="/WEB-INF/views/layouts/header.jsp" %>
+
+<div class="min-h-screen bg-slate-950 flex">
+    <!-- Sidebar -->
+    <%@ include file="/WEB-INF/views/layouts/sidebar.jsp" %>
+
+    <!-- Main Content -->
+    <div class="flex-1 flex flex-col">
+        <!-- Header -->
+        <header class="h-16 bg-slate-900/50 backdrop-blur-xl border-b border-white/10 flex items-center justify-between px-6">
+            <div>
+                <h1 class="text-xl font-bold text-white">${pageTitle}</h1>
+            </div>
+            <div class="flex items-center gap-4">
+                <button class="relative text-slate-400 hover:text-white">
+                    <i data-lucide="bell" class="w-5 h-5"></i>
+                    <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
+                </button>
+            </div>
+        </header>
+
+        <!-- Page Content -->
+        <main class="flex-1 overflow-auto p-6">
+            <jsp:include page="${contentPage}" />
+        </main>
+    </div>
+</div>
+
+<%@ include file="/WEB-INF/views/layouts/footer.jsp" %>

src/main/webapp/WEB-INF/views/layouts/footer.jsp

@@ -0,0 +1,13 @@
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
+
+    <!-- Custom JavaScript -->
+    <script src="${pageContext.request.contextPath}/js/main.js"></script>
+    <script src="${pageContext.request.contextPath}/js/face-recognition.js"></script>
+    <script src="${pageContext.request.contextPath}/js/attendance.js"></script>
+
+    <!-- Initialize Lucide Icons -->
+    <script>
+        lucide.createIcons();
+    </script>
+</body>
+</html>

src/main/webapp/WEB-INF/views/layouts/header.jsp

@@ -0,0 +1,40 @@
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+<!DOCTYPE html>
+<html lang="vi">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>${pageTitle != null ? pageTitle : 'Smart Attendance System'}</title>
+
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
+    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/dashboard.css">
+    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/components.css">
+
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest"></script>
+
+    <!-- Chart.js for charts -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
+    <!-- Tailwind Config -->
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        slate: {
+                            950: '#0f172a'
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-slate-950 text-white">

src/main/webapp/WEB-INF/views/layouts/sidebar.jsp

@@ -0,0 +1,46 @@
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+
+<aside class="w-64 bg-slate-900/50 backdrop-blur-xl border-r border-white/10 flex flex-col">
+    <!-- Logo -->
+    <div class="p-6 border-b border-white/10">
+        <div class="flex items-center gap-3">
+            <div class="w-10 h-10 bg-gradient-to-br ${roleColor} rounded-xl flex items-center justify-center">
+                <i data-lucide="camera" class="w-6 h-6 text-white"></i>
+            </div>
+            <div>
+                <div class="font-bold text-white">Smart Attendance</div>
+                <div class="text-xs text-slate-400">${roleLabel}</div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Menu -->
+    <nav class="flex-1 p-4 space-y-1">
+        <c:forEach items="${menuItems}" var="item">
+            <a href="${pageContext.request.contextPath}${item.path}"
+                class="flex items-center gap-3 px-4 py-3 rounded-xl transition-all ${currentPage == item.path ? 'bg-gradient-to-r ' + roleColor + ' text-white' : 'text-slate-400 hover:text-white hover:bg-white/5'}">
+                <i data-lucide="${item.icon}" class="w-5 h-5"></i>
+                <span>${item.label}</span>
+            </a>
+        </c:forEach>
+    </nav>
+
+    <!-- User Profile -->
+    <div class="p-4 border-t border-white/10">
+        <div class="flex items-center gap-3 p-3 rounded-xl bg-slate-800/50">
+            <div class="w-10 h-10 rounded-full bg-gradient-to-br ${roleColor} flex items-center justify-center text-white font-bold">
+                ${userName.substring(0, 1)}
+            </div>
+            <div class="flex-1 min-w-0">
+                <div class="text-sm font-medium text-white truncate">${userName}</div>
+                <div class="text-xs text-slate-400">${roleLabel}</div>
+            </div>
+        </div>
+        <a href="${pageContext.request.contextPath}/login"
+           class="flex items-center gap-2 w-full px-4 py-2 mt-2 text-slate-400 hover:text-white rounded-xl hover:bg-white/5 transition-all">
+            <i data-lucide="log-out" class="w-4 h-4"></i>
+            <span>Đăng xuất</span>
+        </a>
+    </div>
+</aside>

src/main/webapp/WEB-INF/views/webapp1/face-attendance.jsp

@@ -0,0 +1,157 @@
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
+<!DOCTYPE html>
+<html lang="vi">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Điểm Danh Face ID - Face ID Attendance</title>
+    <link rel="stylesheet" href="css/theme.css">
+    <link rel="stylesheet" href="css/components.css">
+    <style>
+        .camera-frame {
+            position: relative;
+            width: 400px;
+            height: 500px;
+            background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
+            border-radius: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+        }
+        .face-icon {
+            font-size: 10rem;
+            opacity: 0.3;
+        }
+        .corner-marker {
+            position: absolute;
+            width: 30px;
+            height: 30px;
+            border: 3px solid #60a5fa;
+        }
+        .corner-marker.top-left { top: 20px; left: 20px; border-right: none; border-bottom: none; }
+        .corner-marker.top-right { top: 20px; right: 20px; border-left: none; border-bottom: none; }
+        .corner-marker.bottom-left { bottom: 20px; left: 20px; border-right: none; border-top: none; }
+        .corner-marker.bottom-right { bottom: 20px; right: 20px; border-left: none; border-top: none; }
+        .scan-line {
+            position: absolute;
+            width: 90%;
+            height: 2px;
+            background: linear-gradient(to right, transparent, #60a5fa, transparent);
+            animation: scan 2s linear infinite;
+        }
+        @keyframes scan {
+            0% { top: 0%; }
+            100% { top: 100%; }
+        }
+        .log-item {
+            padding: 1rem;
+            background: var(--card);
+            border: 1px solid var(--border);
+            border-radius: 0.5rem;
+            margin-bottom: 0.5rem;
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <div class="nav">
+            <div class="nav-brand">
+                <svg width="32" height="32" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+                    <circle cx="12" cy="7" r="4"></circle>
+                </svg>
+                Điểm Danh Face ID
+            </div>
+            <div class="flex items-center gap-4">
+                <div class="clock text-right">
+                    <div class="clock-time font-bold text-xl">--:--:--</div>
+                    <div class="clock-date text-sm text-muted"></div>
+                </div>
+                <button id="theme-toggle" onclick="AttendanceSystem.toggleTheme()" class="btn btn-icon btn-outline">
+                    <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <div class="container" style="padding: 2rem 1.5rem;">
+        <div class="grid grid-cols-3 gap-6">
+            <!-- Recent Logs -->
+            <div>
+                <h3 class="font-bold mb-4">Lịch sử gần đây</h3>
+                <div style="max-height: 600px; overflow-y: auto;">
+                    <div class="log-item animate-slide-up">
+                        <div class="flex items-center gap-3">
+                            <div class="badge badge-success">✓</div>
+                            <div>
+                                <div class="font-semibold">Nguyễn Văn A</div>
+                                <div class="text-xs text-muted">Check In: 07:58</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="log-item animate-slide-up">
+                        <div class="flex items-center gap-3">
+                            <div class="badge badge-warning">!</div>
+                            <div>
+                                <div class="font-semibold">Trần Thị B</div>
+                                <div class="text-xs text-muted">Check In: 08:12 (Muộn)</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="log-item animate-slide-up">
+                        <div class="flex items-center gap-3">
+                            <div class="badge badge-success">✓</div>
+                            <div>
+                                <div class="font-semibold">Lê Văn C</div>
+                                <div class="text-xs text-muted">Check In: 08:00</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Camera View -->
+            <div class="text-center">
+                <h3 class="font-bold mb-4">Quét khuôn mặt</h3>
+                <div class="camera-frame mx-auto">
+                    <div class="face-icon">👤</div>
+                    <div class="corner-marker top-left"></div>
+                    <div class="corner-marker top-right"></div>
+                    <div class="corner-marker bottom-left"></div>
+                    <div class="corner-marker bottom-right"></div>
+                    <div class="scan-line"></div>
+                </div>
+                <p class="text-muted mt-4">Vui lòng nhìn vào camera để điểm danh</p>
+                <p class="text-sm text-muted">Hệ thống đang quét...</p>
+            </div>
+
+            <!-- Stats -->
+            <div>
+                <h3 class="font-bold mb-4">Thống kê hôm nay</h3>
+                <div class="stat-card stat-card-success mb-4">
+                    <div class="text-muted text-sm mb-1">Đã điểm danh</div>
+                    <div class="text-3xl font-bold text-success">42</div>
+                </div>
+                <div class="stat-card stat-card-warning mb-4">
+                    <div class="text-muted text-sm mb-1">Đi muộn</div>
+                    <div class="text-3xl font-bold text-warning">8</div>
+                </div>
+                <div class="stat-card stat-card-destructive mb-4">
+                    <div class="text-muted text-sm mb-1">Chưa điểm danh</div>
+                    <div class="text-3xl font-bold text-destructive">12</div>
+                </div>
+                <div class="card mt-6">
+                    <div class="text-sm text-muted mb-2">Tổng nhân viên</div>
+                    <div class="text-2xl font-bold">50</div>
+                    <div class="text-xs text-muted mt-2">Tỷ lệ chuyên cần: 84%</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="js/main.js"></script>
+</body>
+</html>

src/main/webapp/WEB-INF/views/webapp1/index.jsp

@@ -0,0 +1,52 @@
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
+<!DOCTYPE html>
+<html lang="vi">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hệ Thống Điểm Danh Face ID</title>
+    <link rel="stylesheet" href="css/theme.css">
+    <link rel="stylesheet" href="css/components.css">
+</head>
+<body>
+    <div class="min-h-screen flex flex-col items-center justify-center" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+        <div class="text-center" style="color: white; max-width: 600px; padding: 2rem;">
+            <h1 style="font-size: 3rem; margin-bottom: 1rem;">🎯 Hệ Thống Điểm Danh</h1>
+            <h2 style="font-size: 2rem; margin-bottom: 2rem;">Face ID Recognition</h2>
+            <p style="font-size: 1.25rem; margin-bottom: 3rem; opacity: 0.9;">
+                Hệ thống điểm danh tự động bằng nhận diện khuôn mặt, 
+                quản lý báo cáo và nghỉ phép thông minh
+            </p>
+
+            <div class="grid grid-cols-1 gap-4" style="max-width: 400px; margin: 0 auto;">
+                <a href="face-attendance.jsp" class="btn btn-lg" style="background: white; color: #667eea; font-size: 1.25rem; padding: 1rem 2rem;">
+                    <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; margin-right: 0.5rem;">
+                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+                        <circle cx="12" cy="7" r="4"></circle>
+                    </svg>
+                    Điểm Danh Face ID
+                </a>
+
+                <a href="login.jsp" class="btn btn-lg btn-outline" style="background: rgba(255,255,255,0.2); color: white; border: 2px solid white; font-size: 1.25rem; padding: 1rem 2rem;">
+                    <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; margin-right: 0.5rem;">
+                        <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
+                        <polyline points="10 17 15 12 10 7"></polyline>
+                        <line x1="15" y1="12" x2="3" y2="12"></line>
+                    </svg>
+                    Đăng Nhập Hệ Thống
+                </a>
+
+                <a href="register.jsp" class="btn btn-lg" style="background: rgba(255,255,255,0.1); color: white; border: 1px solid rgba(255,255,255,0.3); font-size: 1rem; padding: 0.75rem 1.5rem;">
+                    Đăng ký tài khoản mới →
+                </a>
+            </div>
+
+            <div class="mt-4" style="margin-top: 3rem; opacity: 0.8;">
+                <p style="font-size: 0.875rem;">© 2026 Face ID Attendance System. All rights reserved.</p>
+            </div>
+        </div>
+    </div>
+
+    <script src="js/main.js"></script>
+</body>
+</html>

src/main/webapp/WEB-INF/views/webapp1/login.jsp

@@ -0,0 +1,89 @@
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
+<!DOCTYPE html>
+<html lang="vi">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Đăng Nhập - Face ID Attendance</title>
+    <link rel="stylesheet" href="css/theme.css">
+    <link rel="stylesheet" href="css/components.css">
+</head>
+<body>
+    <div class="min-h-screen flex items-center justify-center" style="background-color: var(--background); padding: 1.5rem;">
+        <div class="card" style="max-width: 450px; width: 100%;">
+            <div class="card-header text-center">
+                <h1 class="card-title" style="font-size: 2rem;">Đăng Nhập</h1>
+                <p class="card-description">Nhập thông tin để truy cập hệ thống</p>
+            </div>
+
+            <div class="card-body">
+                <% String error = request.getParameter("error");
+                   if (error != null) { %>
+                    <div class="alert alert-destructive mb-4">
+                        Sai email hoặc mật khẩu!
+                    </div>
+                <% } %>
+
+                <form action="login" method="post" id="loginForm">
+                    <div class="form-group">
+                        <label class="form-label">Vai trò</label>
+                        <select name="role" class="form-control" required>
+                            <option value="EMPLOYEE">Nhân viên (Employee)</option>
+                            <option value="TEACHER">Giáo viên / Quản lý (Teacher)</option>
+                            <option value="ADMIN">Quản trị viên (Admin)</option>
+                        </select>
+                    </div>
+
+                    <div class="form-group">
+                        <label class="form-label">Email</label>
+                        <input type="email" name="email" class="form-control" placeholder="your.email@company.com" required>
+                    </div>
+
+                    <div class="form-group">
+                        <label class="form-label">Mật khẩu</label>
+                        <div style="position: relative;">
+                            <input type="password" name="password" id="password" class="form-control" placeholder="••••••••" required>
+                            <button type="button" onclick="AttendanceSystem.togglePassword('password')" 
+                                    style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer;">
+                                <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
+                                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+                                    <circle cx="12" cy="12" r="3"></circle>
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+
+                    <button type="submit" class="btn btn-primary w-full" style="width: 100%; margin-top: 1.5rem;">
+                        <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
+                            <polyline points="10 17 15 12 10 7"></polyline>
+                            <line x1="15" y1="12" x2="3" y2="12"></line>
+                        </svg>
+                        Đăng nhập
+                    </button>
+                </form>
+            </div>
+
+            <div class="card-footer text-center">
+                <p class="text-sm text-muted">
+                    Chưa có tài khoản? 
+                    <a href="register.jsp" class="text-primary font-semibold">Đăng ký ngay</a>
+                </p>
+                <p class="text-sm text-muted" style="margin-top: 0.5rem;">
+                    <a href="index.jsp" class="text-muted">← Về trang chủ</a>
+                </p>
+            </div>
+
+            <div style="text-align: center; margin-top: 1rem;">
+                <button id="theme-toggle" onclick="AttendanceSystem.toggleTheme()" class="btn btn-icon btn-outline">
+                    <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <script src="js/main.js"></script>
+</body>
+</html>

src/main/webapp/WEB-INF/views/webapp1/register.jsp

@@ -0,0 +1,87 @@
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
+<!DOCTYPE html>
+<html lang="vi">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Đăng Ký - Face ID Attendance</title>
+    <link rel="stylesheet" href="css/theme.css">
+    <link rel="stylesheet" href="css/components.css">
+</head>
+<body>
+    <div class="min-h-screen flex items-center justify-center" style="background-color: var(--background); padding: 1.5rem;">
+        <div class="card" style="max-width: 500px; width: 100%;">
+            <div class="card-header text-center">
+                <h1 class="card-title" style="font-size: 2rem;">Đăng Ký Tài Khoản</h1>
+                <p class="card-description">Tạo tài khoản mới để sử dụng hệ thống</p>
+            </div>
+
+            <div class="card-body">
+                <form action="register" method="post" id="registerForm">
+                    <div class="form-group">
+                        <label class="form-label">Họ và tên *</label>
+                        <input type="text" name="name" class="form-control" placeholder="Nguyễn Văn A" required>
+                    </div>
+
+                    <div class="form-group">
+                        <label class="form-label">Email *</label>
+                        <input type="email" name="email" class="form-control" placeholder="your.email@company.com" required>
+                    </div>
+
+                    <div class="form-group">
+                        <label class="form-label">Số điện thoại *</label>
+                        <input type="tel" name="phone" class="form-control" placeholder="0901234567" required>
+                    </div>
+
+                    <div class="form-group">
+                        <label class="form-label">Phòng ban *</label>
+                        <select name="department" class="form-control" required>
+                            <option value="">Chọn phòng ban</option>
+                            <option value="IT">IT</option>
+                            <option value="HR">HR</option>
+                            <option value="Marketing">Marketing</option>
+                            <option value="Finance">Finance</option>
+                        </select>
+                    </div>
+
+                    <div class="form-group">
+                        <label class="form-label">Mật khẩu *</label>
+                        <input type="password" name="password" id="password" class="form-control" placeholder="••••••••" required>
+                    </div>
+
+                    <div class="form-group">
+                        <label class="form-label">Xác nhận mật khẩu *</label>
+                        <input type="password" name="confirmPassword" class="form-control" placeholder="••••••••" required>
+                    </div>
+
+                    <div class="alert alert-info" style="font-size: 0.875rem; margin-top: 1rem;">
+                        <strong>Lưu ý:</strong> Tài khoản của bạn sẽ cần được Admin phê duyệt trước khi có thể đăng nhập.
+                    </div>
+
+                    <button type="submit" class="btn btn-primary w-full" style="width: 100%; margin-top: 1.5rem;">
+                        <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+                            <circle cx="8.5" cy="7" r="4"></circle>
+                            <line x1="20" y1="8" x2="20" y2="14"></line>
+                            <line x1="23" y1="11" x2="17" y2="11"></line>
+                        </svg>
+                        Đăng ký
+                    </button>
+                </form>
+            </div>
+
+            <div class="card-footer text-center">
+                <p class="text-sm text-muted">
+                    Đã có tài khoản? 
+                    <a href="login.jsp" class="text-primary font-semibold">Đăng nhập</a>
+                </p>
+                <p class="text-sm text-muted" style="margin-top: 0.5rem;">
+                    <a href="index.jsp" class="text-muted">← Về trang chủ</a>
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <script src="js/main.js"></script>
+</body>
+</html>

src/test/java/com/attendenceSystem/AttendenceSystemApplicationTests.java

@@ -0,0 +1,13 @@
+package com.attendenceSystem;
+
+import org.junit.jupiter.api.Test;
+import org.springframework.boot.test.context.SpringBootTest;
+
+@SpringBootTest
+class AttendenceSystemApplicationTests {
+
+	@Test
+	void contextLoads() {
+	}
+
+}